@getmicdrop/svelte-components 3.0.0 → 4.0.0

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

@@ -1,177 +0,0 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import TabNavigation from "./TabNavigation.svelte";
-
-  export const meta = {
-    title: "Pages/Shows/TabNavigation",
-    component: TabNavigation,
-    argTypes: {
-      tabs: { control: "object" },
-      activeTab: {
-        control: "select",
-        options: ["upcoming", "invitations", "declined", "past"]
-      },
-    },
-  };
-
-  const standardTabs = [
-    { key: "upcoming", label: "Upcoming" },
-    { key: "invitations", label: "Invitations", badge: () => 0 },
-    { key: "declined", label: "Declined" },
-    { key: "past", label: "Past" },
-  ];
-
-  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"
-  args={{
-    tabs: standardTabs,
-    activeTab: "upcoming",
-  }}
-/>
-
-<Story
-  name="Invitations Active - No Badge"
-  args={{
-    tabs: standardTabs,
-    activeTab: "invitations",
-  }}
-/>
-
-<Story
-  name="Invitations Active - With Badge"
-  args={{
-    tabs: [
-      { key: "upcoming", label: "Upcoming" },
-      { key: "invitations", label: "Invitations", badge: () => 3 },
-      { key: "declined", label: "Declined" },
-      { key: "past", label: "Past" },
-    ],
-    activeTab: "invitations",
-  }}
-/>
-
-<Story
-  name="Declined Active"
-  args={{
-    tabs: standardTabs,
-    activeTab: "declined",
-  }}
-/>
-
-<Story
-  name="Past Active"
-  args={{
-    tabs: standardTabs,
-    activeTab: "past",
-  }}
-/>
-
-<Story
-  name="Multiple Invitations Badge"
-  args={{
-    tabs: [
-      { key: "upcoming", label: "Upcoming" },
-      { key: "invitations", label: "Invitations", badge: () => 12 },
-      { key: "declined", label: "Declined" },
-      { key: "past", label: "Past" },
-    ],
-    activeTab: "upcoming",
-  }}
-/>
-
-<Story
-  name="High Invitation Count"
-  args={{
-    tabs: [
-      { key: "upcoming", label: "Upcoming" },
-      { key: "invitations", label: "Invitations", badge: () => 99 },
-      { key: "declined", label: "Declined" },
-      { key: "past", label: "Past" },
-    ],
-    activeTab: "invitations",
-  }}
-/>
-
-<Story name="In Mobile Context">
-  <div class="max-w-sm mx-auto border rounded-lg overflow-hidden shadow-lg bg-white">
-    <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>
-    <TabNavigation
-      tabs={[
-        { key: "upcoming", label: "Upcoming" },
-        { key: "invitations", label: "Invitations", badge: () => 5 },
-        { key: "declined", label: "Declined" },
-        { key: "past", label: "Past" },
-      ]}
-      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>
-  </div>
-</Story>
-
-<Story name="Full Page Layout">
-  <div class="min-h-screen bg-gray-100">
-    <header class="bg-white 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>
-      </div>
-    </header>
-
-    <main class="max-w-7xl mx-auto px-4 py-6">
-      <div class="bg-white rounded-lg shadow">
-        <TabNavigation
-          tabs={[
-            { key: "upcoming", label: "Upcoming" },
-            { key: "invitations", label: "Invitations", badge: () => 7 },
-            { key: "declined", label: "Declined" },
-            { key: "past", label: "Past" },
-          ]}
-          activeTab="invitations"
-          on:tabChange={handleTabChange}
-        />
-        <div class="p-6">
-          <div class="space-y-4">
-            {#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="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>
-                  </div>
-                </div>
-              </div>
-            {/each}
-          </div>
-        </div>
-      </div>
-    </main>
-  </div>
-</Story>
-
-<Story name="Compact Tabs">
-  <div class="max-w-md mx-auto p-4">
-    <TabNavigation
-      tabs={standardTabs}
-      activeTab="upcoming"
-      on:tabChange={handleTabChange}
-    />
-  </div>
-</Story>

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

@@ -1,42 +0,0 @@
-export namespace meta {
-    export let title: string;
-    export { TabNavigation as component };
-    export namespace argTypes {
-        namespace tabs {
-            let control: string;
-        }
-        namespace activeTab {
-            let control_1: string;
-            export { control_1 as control };
-            export let options: string[];
-        }
-    }
-}
-export default TabNavigation;
-type TabNavigation = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const TabNavigation: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-import TabNavigation from "./TabNavigation.svelte";
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-//# sourceMappingURL=TabNavigation.stories.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TabNavigation.stories.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabNavigation.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8JA;;;;mBAAyH;0BA1J7F,wBAAwB;6CAiJP,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/TabNavigation.svelte

@@ -1,71 +0,0 @@
-<script>
-  import Badge from "../../Badges/Badge.svelte";
-
-  /**
-   * @type {{
-   *   tabs?: Array<{ key: string, label: string, badge?: () => boolean }>,
-   *   activeTab?: string,
-   *   ontabchange?: (tab: string) => void
-   * }}
-   */
-  let {
-    tabs = [],
-    activeTab,
-    ontabchange
-  } = $props();
-
-  const handleTabClick = (tab) => {
-    ontabchange?.(tab);
-  };
-</script>
-
-<div class="flex flex-row">
-  {#each tabs as { key, label, badge }}
-    <!-- svelte-ignore a11y_no_noninteractive_element_to_interactive_role -->
-    <div
-      role="tab"
-      tabindex="0"
-      class="tab {activeTab === key ? 'active' : ''}"
-      onclick={() => handleTabClick(key)}
-      onkeydown={(e) => e.key === "Enter" && handleTabClick(key)}
-    >
-      {label}
-      {#if key === "invitations" && badge && badge()}
-        <span class="ml-1 w-2 h-2 rounded-full bg-red-500"></span>
-      {/if}
-    </div>
-  {/each}
-</div>
-
-<style>
-  .tab {
-    display: flex;
-    flex: 1 1 0%;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-bottom-width: 1px;
-    padding-left: 0px;
-    padding-right: 0px;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-}
-@media (min-width: 640px) {
-    .tab {
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-    }
-}
-  .tab {
-    color: hsl(var(--Text-Tartiary));
-    border-color: hsl(var(--Stroke-Secondary));
-  }
-  .tab.active {
-    font-weight: 600;
-    color: hsl(var(--Brand-Primary));
-    border-color: hsl(var(--Brand-Primary));
-}
-</style>

package/dist/components/pages/shows/TabNavigation.svelte.d.ts

@@ -1,23 +0,0 @@
-export default TabNavigation;
-type TabNavigation = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<{
-        tabs?: {
-            key: string;
-            label: string;
-            badge?: (() => boolean) | undefined;
-        }[] | undefined;
-        activeTab?: string | undefined;
-        ontabchange?: ((tab: string) => void) | undefined;
-    }>): void;
-};
-declare const TabNavigation: import("svelte").Component<{
-    tabs?: Array<{
-        key: string;
-        label: string;
-        badge?: () => boolean;
-    }>;
-    activeTab?: string;
-    ontabchange?: (tab: string) => void;
-}, {}, "">;
-//# sourceMappingURL=TabNavigation.svelte.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TabNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pages/shows/TabNavigation.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAgDA;WALc,KAAK,CAAC;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,OAAO,CAAA;KAAE,CAAC;gBACvD,MAAM;kBACJ,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;WAGkB"}