feat: tsup config updated and cues added in examples

Author: taj54

examples/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { InteractiveVideo } from '../dist/index';
+import { InteractiveVideo } from '@interactive-video-labs/react';
 
 const App = () => {
   return (
@@ -13,6 +13,17 @@ const App = () => {
           onAnalyticsEvent={(event, payload) => {
             console.log('Analytics Event:', event, payload);
           }}
+          cues={[
+            {
+              id: 'cue1',
+              time: 2,
+              payload: {
+                type: 'quiz',
+                question: 'What is the capital of France?',
+                answers: ['Paris', 'London', 'Berlin', 'Madrid'],
+              },
+            },
+          ]}
         />
       </div>
     </div>

tsup.config.ts

@@ -1,16 +1,23 @@
 import { defineConfig } from 'tsup';
 import pkg from './package.json';
 
-export default defineConfig({
+export default defineConfig((options) => ({
   entry: ['src/index.tsx'],
   format: ['esm', 'cjs'],
+  outExtension({ format }) {
+    return {
+      js: `.${format === 'esm' ? 'mjs' : 'cjs'}`,
+    };
+  },
   dts: true,
+  watch: options.watch,
   clean: true,
   banner: {
     js: `/**
  * ${pkg.name} v${pkg.version}
  * Author: ${pkg.author}
+ * @license MIT
  */
-        `,
+    `,
   },
-});
+}));