@getmicdrop/svelte-components 1.0.2 → 1.0.4

package/dist/components/Input/SelectAudit.stories.svelte

@@ -0,0 +1,364 @@
+<script context="module">
+  import Select from "./Select.svelte";
+  import MultiSelect from "./MultiSelect.svelte";
+  import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../constants/formOptions";
+
+  export const meta = {
+    title: "Audit/Select & Dropdown Variants",
+    component: Select,
+  };
+</script>
+
+<script>
+  import { Story } from "@storybook/addon-svelte-csf";
+
+  let singleValue = "";
+  let multiValue = [];
+  let genderValue = "";
+  let ethnicityValue = [];
+
+  const countryItems = [
+    { value: "us", name: "United States" },
+    { value: "ca", name: "Canada" },
+    { value: "uk", name: "United Kingdom" },
+    { value: "au", name: "Australia" },
+  ];
+
+  const roleItems = [
+    { value: "host", name: "Host" },
+    { value: "headliner", name: "Headliner" },
+    { value: "feature", name: "Feature" },
+    { value: "opener", name: "Opener" },
+  ];
+
+  const genreItems = [
+    { value: "standup", name: "Stand-up Comedy" },
+    { value: "improv", name: "Improv" },
+    { value: "sketch", name: "Sketch Comedy" },
+    { value: "musical", name: "Musical Comedy" },
+  ];
+</script>
+
+<Story name="All Select Variants">
+  <div class="performer-portal p-6 space-y-8 bg-BG-Primary min-h-screen">
+    <div class="max-w-2xl mx-auto">
+      <h1 class="text-2xl font-bold text-Text-Primary mb-2">Select & Dropdown Component Audit</h1>
+      <p class="text-Text-Tartiary mb-8">All dropdown/select variants across the performers portal</p>
+
+      <!-- SECTION: Base Select -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Select Component (Single Selection)
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Basic Select with label
+            </div>
+            <Select
+              bind:value={singleValue}
+              items={countryItems}
+              label="Country"
+              placeholder="Select a country"
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Required Select
+            </div>
+            <Select
+              bind:value={singleValue}
+              items={roleItems}
+              label="Role"
+              placeholder="Select your role"
+              required
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Select with error
+            </div>
+            <Select
+              bind:value={singleValue}
+              items={countryItems}
+              label="Country"
+              placeholder="Select a country"
+              error="Please select a country"
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Disabled Select
+            </div>
+            <Select
+              value="us"
+              items={countryItems}
+              label="Country"
+              disabled
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: MultiSelect -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          MultiSelect Component (Multiple Selection)
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Basic MultiSelect
+            </div>
+            <MultiSelect
+              bind:value={multiValue}
+              items={genreItems}
+              label="Genres"
+              placeholder="Select genres"
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              MultiSelect with hideClear=true
+            </div>
+            <MultiSelect
+              bind:value={multiValue}
+              items={genreItems}
+              label="Genres (No Clear Button)"
+              placeholder="Select genres"
+              hideClear
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Required MultiSelect with error
+            </div>
+            <MultiSelect
+              bind:value={multiValue}
+              items={genreItems}
+              label="Genres"
+              placeholder="Select at least one"
+              required
+              error="Please select at least one genre"
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Using Constants for Options -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Using Shared Constants for Options
+        </h2>
+        <p class="text-sm text-Text-Tartiary mb-4">
+          Instead of wrapper components, use Select/MultiSelect with constants from <code>$lib/constants/formOptions</code>.
+        </p>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              Select with GENDER_OPTIONS constant
+            </div>
+            <Select
+              bind:value={genderValue}
+              items={GENDER_OPTIONS}
+              label="Gender"
+              placeholder="Select gender"
+            />
+            <div class="mt-2 text-xs text-Text-Tartiary">
+              <strong>Options:</strong> Male (1), Female (2), Non-Binary (3)
+            </div>
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              MultiSelect with ETHNICITY_OPTIONS constant
+            </div>
+            <MultiSelect
+              bind:value={ethnicityValue}
+              items={ETHNICITY_OPTIONS}
+              label="Ethnicity"
+              placeholder="Select ethnicity"
+              hideClear
+            />
+            <div class="mt-2 text-xs text-Text-Tartiary">
+              <strong>Options:</strong> American Indian, Asian, Black, Hispanic, Middle Eastern, Native Hawaiian, White
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Real Usage Examples -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Real Usage Examples
+        </h2>
+
+        <div class="space-y-4">
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Gender field</div>
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              &lt;Select items=&#123;GENDER_OPTIONS&#125; bind:value=&#123;formData.gender&#125; /&gt;
+            </div>
+            <Select
+              value=""
+              items={GENDER_OPTIONS}
+              label="Gender"
+              placeholder="Select gender"
+            />
+          </div>
+
+          <div class="p-4 bg-BG-Secondary rounded-lg">
+            <div class="text-xs text-primary-700 font-semibold mb-1">profile-form.svelte - Ethnicity field</div>
+            <div class="text-xs text-Text-Tartiary mb-2 font-mono">
+              &lt;MultiSelect items=&#123;ETHNICITY_OPTIONS&#125; bind:value=&#123;formData.ethnicity&#125; hideClear /&gt;
+            </div>
+            <MultiSelect
+              value={[]}
+              items={ETHNICITY_OPTIONS}
+              label="Ethnicity"
+              placeholder="Select ethnicity"
+              hideClear
+            />
+          </div>
+        </div>
+      </section>
+
+      <!-- SECTION: Props Summary -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Props Summary
+        </h2>
+
+        <div class="bg-BG-Secondary rounded-lg p-4 text-sm mb-4">
+          <h3 class="font-semibold text-Text-Primary mb-2">Select</h3>
+          <table class="w-full text-left">
+            <thead>
+              <tr class="border-b border-stroke-Primary">
+                <th class="py-2 text-Text-Primary">Prop</th>
+                <th class="py-2 text-Text-Primary">Type</th>
+                <th class="py-2 text-Text-Primary">Description</th>
+              </tr>
+            </thead>
+            <tbody class="text-Text-Tartiary">
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">value</td>
+                <td class="py-2 text-xs">any</td>
+                <td class="py-2 text-xs">Selected value (bindable)</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">items</td>
+                <td class="py-2 text-xs">array</td>
+                <td class="py-2 text-xs">Options: &#123;value, name&#125;</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">label</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Label text above select</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">placeholder</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Placeholder text</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">required</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Shows * indicator</td>
+              </tr>
+              <tr class="border-b border-stroke-Secondary">
+                <td class="py-2 font-mono text-xs">disabled</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Disables interaction</td>
+              </tr>
+              <tr>
+                <td class="py-2 font-mono text-xs">error</td>
+                <td class="py-2 text-xs">string</td>
+                <td class="py-2 text-xs">Error message</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="bg-BG-Secondary rounded-lg p-4 text-sm">
+          <h3 class="font-semibold text-Text-Primary mb-2">MultiSelect (same as Select, plus:)</h3>
+          <table class="w-full text-left">
+            <thead>
+              <tr class="border-b border-stroke-Primary">
+                <th class="py-2 text-Text-Primary">Prop</th>
+                <th class="py-2 text-Text-Primary">Type</th>
+                <th class="py-2 text-Text-Primary">Description</th>
+              </tr>
+            </thead>
+            <tbody class="text-Text-Tartiary">
+              <tr>
+                <td class="py-2 font-mono text-xs">hideClear</td>
+                <td class="py-2 text-xs">boolean</td>
+                <td class="py-2 text-xs">Hides the clear/X button</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- SECTION: Consolidation Status -->
+      <section class="mb-10">
+        <h2 class="text-lg font-semibold text-Text-Primary mb-4 pb-2 border-b border-stroke-Primary">
+          Consolidation Status
+        </h2>
+
+        <div class="space-y-4 text-sm text-Text-Tartiary">
+          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Completed</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li><strong>Removed GenderInput</strong> - was just wrapping Select with hardcoded items</li>
+              <li><strong>Removed EthnicityDropdown</strong> - was just wrapping MultiSelect with hardcoded items</li>
+              <li><strong>Created constants file</strong> - GENDER_OPTIONS and ETHNICITY_OPTIONS in <code>$lib/constants/formOptions.js</code></li>
+              <li><strong>Updated profile-form.svelte</strong> - now uses Select/MultiSelect directly with constants</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
+            <h3 class="font-semibold text-green-700 dark:text-green-400 mb-2">Current State</h3>
+            <ul class="list-disc list-inside space-y-1">
+              <li>Select and MultiSelect are the only dropdown components needed</li>
+              <li>Pass items as props - no need for wrapper components</li>
+              <li>Consistent API across both components</li>
+              <li>Error handling and label display work well</li>
+            </ul>
+          </div>
+
+          <div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
+            <h3 class="font-semibold text-blue-700 dark:text-blue-400 mb-2">Usage Pattern</h3>
+            <pre class="bg-gray-100 dark:bg-gray-800 p-2 rounded text-xs overflow-x-auto">
+{`import { GENDER_OPTIONS, ETHNICITY_OPTIONS } from "../../constants/formOptions";
+
+// Gender dropdown
+<Select
+  items={GENDER_OPTIONS}
+  bind:value={formData.gender}
+  label="Gender"
+  placeholder="Select gender"
+/>
+
+// Ethnicity multi-select
+<MultiSelect
+  items={ETHNICITY_OPTIONS}
+  bind:value={formData.ethnicity}
+  label="Ethnicity"
+  hideClear
+/>`}
+            </pre>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</Story>

package/dist/components/Input/SelectAudit.stories.svelte.d.ts

@@ -0,0 +1,31 @@
+export namespace meta {
+    export let title: string;
+    export { Select as component };
+}
+/** @typedef {typeof __propDef.props}  SelectAuditProps */
+/** @typedef {typeof __propDef.events}  SelectAuditEvents */
+/** @typedef {typeof __propDef.slots}  SelectAuditSlots */
+export default class SelectAudit extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SelectAuditProps = typeof __propDef.props;
+export type SelectAuditEvents = typeof __propDef.events;
+export type SelectAuditSlots = typeof __propDef.slots;
+import Select from "./Select.svelte";
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=SelectAudit.stories.svelte.d.ts.map

package/dist/components/Input/SelectAudit.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectAudit.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/SelectAudit.stories.svelte.js"],"names":[],"mappings":";;;;AAwTA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;mBAvTf,iBAAiB;gCAHN,QAAQ;AAuTxC;;;;;;;;;;EAAgF"}

package/dist/components/Layout/BottomNav.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=BottomNav.spec.d.ts.map

package/dist/components/Layout/BottomNav.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNav.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Layout/BottomNav.spec.js"],"names":[],"mappings":""}

package/dist/components/Layout/BottomNav.spec.js

@@ -0,0 +1,130 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import BottomNav from './BottomNav.svelte';
+
+// Mock fetch for API calls
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve([]),
+  })
+);
+
+// Mock SvelteKit modules
+vi.mock('$app/stores', () => ({
+  page: {
+    subscribe: (fn) => {
+      fn({ url: { pathname: '/shows' } });
+      return () => {};
+    }
+  }
+}));
+
+vi.mock('$app/paths', () => ({
+  base: '/performers'
+}));
+
+describe('BottomNav', () => {
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Shows', href: '/shows', icon: 'shows' },
+    { label: 'Availability', href: '/availability', icon: 'availability' },
+    { label: 'Profile', href: '/profile', icon: 'profile' }
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    global.fetch.mockImplementation(() =>
+      Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve([]),
+      })
+    );
+  });
+
+  describe('basic rendering', () => {
+    it('renders all navigation links', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+    });
+
+    it('renders link labels as aria-label', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('[aria-label="Home"]');
+      expect(homeLink).toBeTruthy();
+    });
+
+    it('renders icons for each link', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const icons = container.querySelectorAll('.bottom-nav-icon');
+      expect(icons.length).toBe(4);
+    });
+  });
+
+  describe('active state', () => {
+    it('marks current path as active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const showsLink = container.querySelector('a[href="/shows"]');
+      expect(showsLink.classList.contains('active')).toBe(true);
+    });
+
+    it('non-current paths are not active', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const homeLink = container.querySelector('a[href="/"]');
+      expect(homeLink.classList.contains('active')).toBe(false);
+    });
+  });
+
+  describe('notification dot', () => {
+    it('shows notification dot when there are invitations', async () => {
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve([{ acceptedState: 0 }]),
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Wait for the fetch to complete
+      await vi.waitFor(() => {
+        const dot = container.querySelector('.notification-dot');
+        return dot !== null;
+      }, { timeout: 1000 }).catch(() => null);
+    });
+
+    it('does not show notification dot when no invitations', () => {
+      const { container } = render(BottomNav, { links: defaultLinks });
+      const dot = container.querySelector('.notification-dot');
+      expect(dot).toBeFalsy();
+    });
+  });
+
+  describe('empty links', () => {
+    it('renders nothing when links array is empty', () => {
+      const { container } = render(BottomNav, { links: [] });
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(0);
+    });
+  });
+
+  describe('API error handling', () => {
+    it('handles fetch error gracefully', async () => {
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      global.fetch.mockImplementationOnce(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      );
+
+      const { container } = render(BottomNav, { links: defaultLinks });
+
+      // Component should still render despite fetch error
+      const navItems = container.querySelectorAll('.bottom-nav-item');
+      expect(navItems.length).toBe(4);
+
+      consoleSpy.mockRestore();
+    });
+  });
+});

package/dist/components/Layout/BottomNav.stories.svelte

@@ -0,0 +1,115 @@
+<script context="module">
+  import BottomNav from './BottomNav.svelte';
+
+  export const meta = {
+    title: 'Components/Layout/BottomNav',
+    component: BottomNav,
+    tags: ['autodocs'],
+  };
+</script>
+
+<script>
+  import { Story } from '@storybook/addon-svelte-csf';
+
+  const defaultLinks = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Shows', href: '/shows', icon: 'Shows' },
+    { label: 'Availability', href: '/availability', icon: 'Availability' },
+    { label: 'Profile', href: '/profile', icon: 'Profile' },
+  ];
+
+  const extendedLinks = [
+    { label: 'Home', href: '/', icon: 'Home' },
+    { label: 'Shows', href: '/shows', icon: 'Shows' },
+    { label: 'Availability', href: '/availability', icon: 'Availability' },
+    { label: 'Messages', href: '/messages', icon: 'Message' },
+    { label: 'Profile', href: '/profile', icon: 'Profile' },
+  ];
+</script>
+
+<Story name="Default (4 Tabs)">
+  <div class="bg-gray-100 p-4">
+    <p class="text-sm text-gray-600 mb-4">Mobile Bottom Navigation (4 tabs)</p>
+    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center">
+        <p class="text-gray-500">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="With 5 Tabs">
+  <div class="bg-gray-100 p-4">
+    <p class="text-sm text-gray-600 mb-4">Extended Navigation (5 tabs)</p>
+    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-purple-50 to-purple-100 flex items-center justify-center">
+        <p class="text-gray-500">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white">
+        <BottomNav links={extendedLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Different Icon Set">
+  <div class="bg-gray-100 p-4">
+    <p class="text-sm text-gray-600 mb-4">Custom Icons</p>
+    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center">
+        <p class="text-gray-500">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-white">
+        <BottomNav
+          links={[
+            { label: 'Dashboard', href: '/', icon: 'Home' },
+            { label: 'Events', href: '/events', icon: 'Shows' },
+            { label: 'Notifications', href: '/notifications', icon: 'Notification' },
+            { label: 'Settings', href: '/settings', icon: 'Profile' },
+          ]}
+        />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Mobile Viewport">
+  <div class="max-w-[375px] mx-auto bg-white shadow-2xl rounded-3xl overflow-hidden">
+    <!-- Mock iPhone screen -->
+    <div class="h-[667px] flex flex-col">
+      <!-- Status bar -->
+      <div class="h-6 bg-black flex items-center justify-between px-4">
+        <span class="text-white text-xs">9:41</span>
+        <span class="text-white text-xs">100%</span>
+      </div>
+
+      <!-- Content area -->
+      <div class="flex-1 bg-gradient-to-br from-blue-50 to-purple-50 p-4">
+        <h1 class="text-2xl font-bold mb-2">Home</h1>
+        <p class="text-gray-600">This is a mobile viewport simulation</p>
+      </div>
+
+      <!-- Bottom navigation -->
+      <div class="flex border-t bg-white safe-bottom">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Dark Mode">
+  <div class="dark bg-gray-900 p-4 min-h-screen">
+    <p class="text-sm text-gray-400 mb-4">Dark Mode Bottom Navigation</p>
+    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-2xl overflow-hidden">
+      <div class="h-64 bg-gradient-to-br from-gray-900 to-gray-800 flex items-center justify-center">
+        <p class="text-gray-400">Dark Mode Content</p>
+      </div>
+      <div class="flex border-t border-gray-700 bg-gray-800">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/components/Layout/BottomNav.stories.svelte.d.ts

@@ -0,0 +1,32 @@
+export namespace meta {
+    export let title: string;
+    export { BottomNav as component };
+    export let tags: string[];
+}
+/** @typedef {typeof __propDef.props}  BottomNavProps */
+/** @typedef {typeof __propDef.events}  BottomNavEvents */
+/** @typedef {typeof __propDef.slots}  BottomNavSlots */
+export default class BottomNav extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BottomNavProps = typeof __propDef.props;
+export type BottomNavEvents = typeof __propDef.events;
+export type BottomNavSlots = typeof __propDef.slots;
+import BottomNav from './BottomNav.svelte';
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=BottomNav.stories.svelte.d.ts.map