@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/pages/settings/tabs/CustomImageDropzone.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import CustomImageDropzone from "./CustomImageDropzone.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import CustomImageDropzone from "./CustomImageDropzone.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Settings/CustomImageDropzone",
     component: CustomImageDropzone,
     argTypes: {
@@ -21,7 +22,7 @@
       },
       label: { control: "text" },
     },
-  };
+  });
 
   function handleUpload(event) {
     console.log("File uploaded:", event.detail);
@@ -30,11 +31,9 @@
   function handleDelete(event) {
     console.log("File deleted:", event.detail);
   }
+
 </script>
 
-<Template let:args>
-  <CustomImageDropzone on:upload={handleUpload} on:delete={handleDelete} {...args} />
-</Template>
 
 <Story
   name="Default Empty"
@@ -57,7 +56,7 @@
 />
 
 <Story
-  name="64x64 Rounded Square"
+  name="Size 64x64 Rounded Square"
   args={{
     existingImages: [],
     readonly: false,
@@ -67,7 +66,7 @@
 />
 
 <Story
-  name="256x256 Profile Photo"
+  name="Size 256x256 Profile Photo"
   args={{
     existingImages: [],
     readonly: false,
@@ -77,7 +76,7 @@
 />
 
 <Story
-  name="128x128 Rounded Square"
+  name="Size 128x128 Rounded Square"
   args={{
     existingImages: [],
     readonly: false,
@@ -97,7 +96,7 @@
 />
 
 <Story
-  name="32x32 Circle"
+  name="Size 32x32 Circle"
   args={{
     existingImages: [],
     readonly: false,

package/dist/components/pages/settings/tabs/CustomImageDropzone.stories.svelte.d.ts

@@ -1,25 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { CustomImageDropzone as component };
-    export namespace argTypes {
-        namespace existingImages {
-            let control: string;
-        }
-        namespace readonly {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace shape {
-            let control_2: string;
-            export { control_2 as control };
-            export let options: string[];
-        }
-        namespace label {
-            let control_3: string;
-            export { control_3 as control };
-        }
-    }
-}
 export default CustomImageDropzone;
 type CustomImageDropzone = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/settings/tabs/CustomImageDropzone.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomImageDropzone.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/pages/settings/tabs/CustomImageDropzone.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2HA;;;;mBAA+H;gCAvH7F,8BAA8B;6CA8GnB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"CustomImageDropzone.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/pages/settings/tabs/CustomImageDropzone.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA0HA;;;;mBAA+H;gCArH3F,8BAA8B;6CA4GrB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte

@@ -1,34 +1,23 @@
 <script>
+  import { createEventDispatcher } from "svelte";
+  export let existingImages = [];
+  export let readonly = false;
+  export let shape = "default";
+  export let label = "";
   import CancelIcon from "../../../../assets/svg/cancel.svg";
+
   import AddMain from "../../../../assets/svg/add-main-01.svg";
   import CloudUpload from "../../../../assets/svg/cloud-upload.svg";
 
-  /**
-   * @type {{
-   *   existingImages?: string[],
-   *   readonly?: boolean,
-   *   shape?: string,
-   *   label?: string,
-   *   onupload?: (file: File) => void,
-   *   ondelete?: (detail: { index: number }) => void
-   * }}
-   */
-  let {
-    existingImages = [],
-    readonly = false,
-    shape = "default",
-    label = "",
-    onupload,
-    ondelete
-  } = $props();
-
-  let images = $state([]);
-  let error = $state("");
-  let deleteModalOpen = $state(false);
-  let uploadModalOpen = $state(false);
-  let selectedIndex = $state(null);
-  let fileType = $state(null);
-  let isDragOver = $state(false);
+  let images = [];
+  let error = "";
+  let deleteModalOpen = false;
+  let uploadModalOpen = false;
+
+  let selectedIndex = null;
+  let fileType = null;
+
+  const dispatch = createEventDispatcher();
 
   const MAX_FILE_SIZE = 300 * 1024 * 1024; // 300 MB
   const ALLOWED_FILE_TYPES = [
@@ -38,10 +27,7 @@
     "image/gif",
   ];
 
-  // Sync images with existingImages prop
-  $effect(() => {
-    images = existingImages;
-  });
+  $: images = existingImages;
 
   function onDrop(event) {
     event.preventDefault();
@@ -68,7 +54,7 @@
         images = [...images, URL.createObjectURL(file)];
       }
       error = "";
-      onupload?.(file);
+      dispatch("upload", file);
       uploadModalOpen = false;
     }
     isDragOver = false;
@@ -76,7 +62,7 @@
 
   function handleDelete(index) {
     images = images.filter((_, i) => i !== index);
-    ondelete?.({ index });
+    dispatch("delete", { index });
   }
 
   function handleUpload() {
@@ -113,7 +99,7 @@
       case "64x64-rounded-square":
         return `right-3 top-3 p-1 rounded-lg`;
       case "256x256-profile-photo":
-        return `top-[22px] right-[19px] p-2.5 rounded-full`;
+        return `top-5 right-5 p-2.5 rounded-full`;
       case "128x128-rounded-square":
         return `right-3 top-3 p-1 rounded-lg`;
       case "fullwidth-rounded-rectangle":
@@ -125,6 +111,8 @@
     }
   }
 
+  let isDragOver = false;
+
   function handleDragOver(event) {
     event.preventDefault();
     isDragOver = true;
@@ -150,7 +138,7 @@
 {#if images.length === 0}
   <input
     type="file"
-    onchange={onDrop}
+    on:change={onDrop}
     accept="image/*,video/mp4,application/pdf"
     class="hidden"
     aria-label="file-input"
@@ -166,7 +154,7 @@
     <div class="flex w-full">
       {#each images as image, index}
         <div class={`relative shadow ${shapeStyle(shape)}`}>
-          <!-- svelte-ignore a11y_img_redundant_alt -->
+          <!-- svelte-ignore a11y-img-redundant-alt -->
           <img
             src={image}
             alt="uploaded image"
@@ -175,7 +163,7 @@
           {#if !readonly}
             <button
               class={`${shapeClose(shape)} absolute bg-red-200 cursor-pointer`}
-              onclick={(e) => { e.preventDefault(); handleDelete(index); }}
+              on:click|preventDefault={() => handleDelete(index, "image")}
             >
               <img src={CancelIcon} alt="close button img" />
             </button>
@@ -185,8 +173,8 @@
 
       {#if !readonly && images.length === 0}
         <button
-          class={`flex justify-center items-center border-dashed border-2 cursor-pointer border-brand-Primary border-opacity-50 bg-BG-Secondary ${shapeStyle(shape)}`}
-          onclick={(e) => { e.preventDefault(); handleUpload(); }}
+          class={`flex justify-center items-center border-dashed border-2 cursor-pointer border-blue-600 dark:border-blue-500 border-opacity-50 bg-gray-50 dark:bg-gray-700 ${shapeStyle(shape)}`}
+          on:click|preventDefault={handleUpload}
         >
           <img
             src={AddMain}
@@ -198,54 +186,53 @@
     </div>
 
     {#if uploadModalOpen}
-      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
         class="fixed inset-0 flex items-center justify-center gap-6 bg-gray-900 bg-opacity-50 z-50"
         role="presentation"
-        onclick={(e) => { e.preventDefault(); handeUploadModel(); }}
+        on:click|preventDefault={handeUploadModel}
       >
-        <!-- svelte-ignore a11y_click_events_have_key_events -->
-        <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
         <div
-          class="bg-BG-Primary pb-6 px-6 rounded-2xl modal-box text-center flex w-[484px] flex-col max-sm:w-full"
+          class="bg-white dark:bg-gray-800 pb-6 px-6 rounded-lg modal-box text-center flex max-w-md flex-col max-sm:w-full"
           role="dialog"
-          onclick={(event) => { event.preventDefault(); event.stopPropagation(); }}
+          on:click|preventDefault={(event) => event.stopPropagation()}
         >
           <button
             class={`presentation dropzone w-full flex py-8 mt-6 flex-col rounded-lg justify-center items-center ${isDragOver ? "bg-blue-100 dark:bg-blue-900/30" : ""}`}
-            ondrop={onDrop}
-            ondragover={handleDragOver}
-            ondragleave={handleDragLeave}
+            on:drop={onDrop}
+            on:dragover={handleDragOver}
+            on:dragleave={handleDragLeave}
           >
             {#if !readonly}
               <img
-                class="p-5 bg-brand-Primary rounded-full ring-[16px] ring-blue-100 dark:ring-blue-900/50"
+                class="p-5 bg-blue-600 rounded-full ring-4 ring-blue-100 dark:ring-blue-900/50"
                 src={CloudUpload}
                 alt=""
               />
             {/if}
           </button>
-          <p class="uploadFile text-xl font-normal text-Text-Primary">
+          <p class="uploadFile text-xl font-normal text-gray-900 dark:text-white">
             Drop anywhere to upload
           </p>
           <div class="flex items-center justify-center gap-6 my-5">
-            <span class="block w-full h-px bg-stroke-Primary"></span>
-            <p class="text-base text-center text-Text-Tartiary">or</p>
-            <span class="block w-full h-px bg-stroke-Primary"></span>
+            <span class="block w-full h-px bg-gray-300 dark:bg-gray-600"></span>
+            <p class="text-base text-center text-gray-500 dark:text-gray-400">or</p>
+            <span class="block w-full h-px bg-gray-300 dark:bg-gray-600"></span>
           </div>
           <button
-            class="p-3 mx-auto min-w-24 text-brand-Primary text-sm leading-3 font-medium rounded-lg flex justify-center items-center border border-stroke-Primary cursor-pointer bg-BG-Secondary/20"
-            onclick={openFileUploadModal}
+            class="p-3 mx-auto min-w-24 text-blue-600 dark:text-blue-500 text-sm leading-3 font-medium rounded-lg flex justify-center items-center border border-gray-300 dark:border-gray-600 cursor-pointer bg-gray-50 dark:bg-gray-700/20 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            on:click={openFileUploadModal}
           >
             Browse files
           </button>
-          <h2 class="text-Text-Tartiary font-normal text-sm my-5">
+          <h2 class="text-gray-500 dark:text-gray-400 font-normal text-sm my-5">
             Supported : JPG, JPEG, PNG, GIF
           </h2>
-          <p class="text-accent-success text-sm font-medium">Max 300 MB</p>
+          <p class="text-green-600 dark:text-green-500 text-sm font-medium">Max 300 MB</p>
 
           {#if error}
-            <p class="text-red-500 text-xs font-semibold mt-4">{error}</p>
+            <p class="text-red-600 dark:text-red-500 text-xs font-semibold mt-4">{error}</p>
           {/if}
         </div>
       </div>

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts

@@ -1,25 +1,39 @@
 export default CustomImageDropzone;
-type CustomImageDropzone = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        existingImages?: string[] | undefined;
-        readonly?: boolean | undefined;
-        shape?: string | undefined;
-        label?: string | undefined;
-        onupload?: ((file: File) => void) | undefined;
-        ondelete?: ((detail: {
-            index: number;
-        }) => void) | undefined;
-    }>): void;
+type CustomImageDropzone = SvelteComponent<{
+    shape?: string | undefined;
+    label?: string | undefined;
+    readonly?: boolean | undefined;
+    existingImages?: any[] | undefined;
+}, {
+    upload: CustomEvent<any>;
+    delete: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-declare const CustomImageDropzone: import("svelte").Component<{
-    existingImages?: string[];
-    readonly?: boolean;
-    shape?: string;
-    label?: string;
-    onupload?: (file: File) => void;
-    ondelete?: (detail: {
-        index: number;
-    }) => void;
-}, {}, "">;
+declare const CustomImageDropzone: $$__sveltets_2_IsomorphicComponent<{
+    shape?: string | undefined;
+    label?: string | undefined;
+    readonly?: boolean | undefined;
+    existingImages?: any[] | undefined;
+}, {
+    upload: CustomEvent<any>;
+    delete: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
 //# sourceMappingURL=CustomImageDropzone.svelte.d.ts.map

package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomImageDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/pages/settings/tabs/CustomImageDropzone.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAyOA;qBARwB,MAAM,EAAE;eACd,OAAO;YACV,MAAM;YACN,MAAM;eACH,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;eACpB,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;WAGa"}
+{"version":3,"file":"CustomImageDropzone.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/pages/settings/tabs/CustomImageDropzone.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;AA8NA;;;;;;;;;;mBAA8K;6CATjI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/pages/shows/ShowList.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import ShowList from "./ShowList.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import ShowList from "./ShowList.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Shows/ShowList",
     component: ShowList,
     argTypes: {
@@ -12,7 +13,7 @@
         options: ["upcoming", "invitations", "declined", "past"]
       },
     },
-  };
+  });
 
   const sampleShows = [
     {
@@ -79,13 +80,9 @@
       },
     },
   ];
+
 </script>
 
-<Template let:args>
-  <div class="max-w-7xl mx-auto p-6 bg-gray-50 min-h-screen">
-    <ShowList {...args} />
-  </div>
-</Template>
 
 <Story
   name="Upcoming Shows"

package/dist/components/pages/shows/ShowList.stories.svelte.d.ts

@@ -1,17 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { ShowList as component };
-    export namespace argTypes {
-        namespace shows {
-            let control: string;
-        }
-        namespace status {
-            let control_1: string;
-            export { control_1 as control };
-            export let options: string[];
-        }
-    }
-}
 export default ShowList;
 type ShowList = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/shows/ShowList.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShowList.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/ShowList.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2PA;;;;mBAAoH;qBAvP7F,mBAAmB;6CA8OG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ShowList.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/ShowList.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAwPA;;;;mBAAoH;qBAnP3F,mBAAmB;6CA0OC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/pages/shows/TabContent.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import TabContent from "./TabContent.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import TabContent from "./TabContent.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Shows/TabContent",
     component: TabContent,
     argTypes: {
@@ -13,7 +14,7 @@
       shows: { control: "object" },
       loadedItems: { control: "object" },
     },
-  };
+  });
 
   const sampleShows = {
     upcoming: [
@@ -117,13 +118,9 @@
   const mockLoadMore = (tab) => {
     console.log(`Loading more shows for tab: ${tab}`);
   };
+
 </script>
 
-<Template let:args>
-  <div class="max-w-7xl mx-auto bg-gray-50">
-    <TabContent {...args} />
-  </div>
-</Template>
 
 <Story
   name="Upcoming Shows Tab"

package/dist/components/pages/shows/TabContent.stories.svelte.d.ts

@@ -1,21 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { TabContent as component };
-    export namespace argTypes {
-        namespace activeTab {
-            let control: string;
-            let options: string[];
-        }
-        namespace shows {
-            let control_1: string;
-            export { control_1 as control };
-        }
-        namespace loadedItems {
-            let control_2: string;
-            export { control_2 as control };
-        }
-    }
-}
 export default TabContent;
 type TabContent = SvelteComponent<{
     [x: string]: never;

package/dist/components/pages/shows/TabContent.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabContent.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabContent.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoPA;;;;mBAAsH;uBAhP7F,qBAAqB;6CAuOD,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabContent.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabContent.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAiPA;;;;mBAAsH;uBA5O3F,qBAAqB;6CAmOH,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/components/pages/shows/TabContent.svelte

@@ -61,8 +61,8 @@
 
 {#if loadedItems[activeTab]?.data?.length}
   {#if content[activeTab].notice}
-    <div class="bg-bg-primary md:rounded-b-lg px-3 sm:px-4 py-2">
-      <p class="text-xs text-text-tertiary">{content[activeTab].notice}</p>
+    <div class="bg-white dark:bg-gray-900 md:rounded-b-lg px-3 sm:px-4 py-2">
+      <p class="text-xs text-gray-500 dark:text-gray-400">{content[activeTab].notice}</p>
     </div>
   {/if}
 
@@ -71,24 +71,15 @@
   </div>
 
   {#if loadedItems[activeTab].data.length < shows[activeTab].length}
-    <div class="loading-indicator" bind:this={sentinel}>
+    <div class="text-center p-4 text-sm text-gray-500 dark:text-gray-400" bind:this={sentinel}>
       {loadedItems[activeTab].isMoreLoading ? "Loading..." : ""}
     </div>
   {/if}
 {:else}
-  <div class="bg-bg-primary md:rounded-b-lg p-3 sm:p-4">
+  <div class="bg-white dark:bg-gray-900 md:rounded-b-lg p-3 sm:p-4">
     <SectionHeader
       title={content[activeTab].title}
       description={content[activeTab].description}
     />
   </div>
 {/if}
-
-<style>
-  .loading-indicator {
-    text-align: center;
-    padding: 16px;
-    font-size: 14px;
-    color: #666;
-  }
-</style>

package/dist/components/pages/shows/TabContent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabContent.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabContent.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AAwGA;;;;;;;mBAAsH;6CATzE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabContent.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabContent.svelte.js"],"names":[],"mappings":";;;;;;;;;;;AAsGA;;;;;;;mBAAsH;6CATzE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/components/pages/shows/TabNavigation.stories.svelte

@@ -1,8 +1,9 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import TabNavigation from "./TabNavigation.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import TabNavigation from "./TabNavigation.svelte";
+
+  const { Story } = defineMeta({
     title: "Pages/Shows/TabNavigation",
     component: TabNavigation,
     argTypes: {
@@ -12,7 +13,7 @@
         options: ["upcoming", "invitations", "declined", "past"]
       },
     },
-  };
+  });
 
   const standardTabs = [
     { key: "upcoming", label: "Upcoming" },
@@ -24,13 +25,9 @@
   const handleTabChange = (event) => {
     console.log("Tab changed to:", event.detail);
   };
+
 </script>
 
-<Template let:args>
-  <div class="max-w-4xl mx-auto">
-    <TabNavigation on:tabChange={handleTabChange} {...args} />
-  </div>
-</Template>
 
 <Story
   name="Default - Upcoming Active"
@@ -104,7 +101,7 @@
 />
 
 <Story name="In Mobile Context">
-  <div class="max-w-sm mx-auto border rounded-lg overflow-hidden shadow-lg bg-white">
+  <div class="max-w-sm mx-auto border rounded-lg overflow-hidden shadow-lg bg-white dark:bg-gray-900">
     <div class="p-4 bg-gradient-to-r from-blue-600 to-purple-600">
       <h1 class="text-white text-xl font-bold">My Shows</h1>
     </div>
@@ -118,23 +115,23 @@
       activeTab="upcoming"
       on:tabChange={handleTabChange}
     />
-    <div class="p-4 bg-gray-50 min-h-[200px]">
-      <p class="text-gray-600 text-sm">Tab content would appear here...</p>
+    <div class="p-4 bg-gray-50 dark:bg-gray-800 min-h-[200px]">
+      <p class="text-gray-500 dark:text-gray-400 text-sm">Tab content would appear here...</p>
     </div>
   </div>
 </Story>
 
 <Story name="Full Page Layout">
-  <div class="min-h-screen bg-gray-100">
-    <header class="bg-white shadow">
+  <div class="min-h-screen bg-gray-100 dark:bg-gray-700">
+    <header class="bg-white dark:bg-gray-900 shadow">
       <div class="max-w-7xl mx-auto px-4 py-6">
-        <h1 class="text-3xl font-bold text-gray-900">Shows Dashboard</h1>
-        <p class="mt-1 text-sm text-gray-600">Manage your comedy show bookings and invitations</p>
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Shows Dashboard</h1>
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Manage your comedy show bookings and invitations</p>
       </div>
     </header>
 
     <main class="max-w-7xl mx-auto px-4 py-6">
-      <div class="bg-white rounded-lg shadow">
+      <div class="bg-white dark:bg-gray-900 rounded-lg shadow">
         <TabNavigation
           tabs={[
             { key: "upcoming", label: "Upcoming" },
@@ -150,11 +147,11 @@
             {#each Array(3) as _, i}
               <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
                 <div class="flex items-start gap-4">
-                  <div class="w-16 h-16 bg-gray-200 rounded-lg flex-shrink-0"></div>
+                  <div class="w-16 h-16 bg-gray-200 dark:bg-gray-600 rounded-lg flex-shrink-0"></div>
                   <div class="flex-1">
-                    <h3 class="font-semibold text-gray-900">Comedy Show {i + 1}</h3>
-                    <p class="text-sm text-gray-600">March {15 + i}, 2024 • 8:00 PM</p>
-                    <p class="text-sm text-gray-500">Comedy Club {i + 1}</p>
+                    <h3 class="font-semibold text-gray-900 dark:text-white">Comedy Show {i + 1}</h3>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">March {15 + i}, 2024 • 8:00 PM</p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Comedy Club {i + 1}</p>
                   </div>
                 </div>
               </div>