@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/patterns/navigation/BottomNav.stories.svelte

@@ -1,117 +1,117 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import BottomNav from './BottomNav.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Layout/BottomNav',
-    component: BottomNav,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  
-  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 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Mobile Bottom Navigation (4 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 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 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav links={defaultLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="With 5 Tabs">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Extended Navigation (5 tabs)</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 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 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <BottomNav links={extendedLinks} />
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Different Icon Set">
-  <div class="bg-gray-100 dark:bg-gray-700 p-4">
-    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">Custom Icons</p>
-    <div class="max-w-md mx-auto bg-white dark:bg-gray-900 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 dark:text-gray-400">Page Content Area</p>
-      </div>
-      <div class="flex border-t bg-white dark:bg-gray-900">
-        <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 dark:bg-gray-900 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-500 dark:text-gray-400">This is a mobile viewport simulation</p>
-      </div>
-
-      <!-- Bottom navigation -->
-      <div class="flex border-t bg-white dark:bg-gray-900 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-500 dark: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-500 dark: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>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import BottomNav from './BottomNav.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Layout/BottomNav',
+    component: BottomNav,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  
+  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-muted p-4">
+    <p class="text-sm text-muted-foreground mb-4">Mobile Bottom Navigation (4 tabs)</p>
+    <div class="max-w-md mx-auto bg-card 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-muted-foreground">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-card">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="With 5 Tabs">
+  <div class="bg-muted p-4">
+    <p class="text-sm text-muted-foreground mb-4">Extended Navigation (5 tabs)</p>
+    <div class="max-w-md mx-auto bg-card 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-muted-foreground">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-card">
+        <BottomNav links={extendedLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Different Icon Set">
+  <div class="bg-muted p-4">
+    <p class="text-sm text-muted-foreground mb-4">Custom Icons</p>
+    <div class="max-w-md mx-auto bg-card 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-muted-foreground">Page Content Area</p>
+      </div>
+      <div class="flex border-t bg-card">
+        <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-card 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-muted-foreground">This is a mobile viewport simulation</p>
+      </div>
+
+      <!-- Bottom navigation -->
+      <div class="flex border-t bg-card safe-bottom">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Dark Mode">
+  <div class="dark bg-bg-primary p-4 min-h-screen">
+    <p class="text-sm text-muted-foreground mb-4">Dark Mode Bottom Navigation</p>
+    <div class="max-w-md mx-auto bg-bg-secondary 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-muted-foreground">Dark Mode Content</p>
+      </div>
+      <div class="flex border-t border-stroke-primary bg-bg-secondary">
+        <BottomNav links={defaultLinks} />
+      </div>
+    </div>
+  </div>
+</Story>

package/dist/patterns/navigation/BottomNav.svelte

@@ -1,82 +1,82 @@
-<script lang="ts">
-  import { page } from '../../__LIB_STORES__.js';
-  import { base } from '../../__LIB_PATHS__.js';
-  import { browser } from '../../__LIB_ENVIRONMENT__.js';
-  import { onMount } from "svelte";
-  import Icon from "../../primitives/Icons/Icon.svelte";
-  import { typography } from '../../tokens/typography';
-
-  interface NavLink {
-    label: string;
-    href: string;
-    icon: string;
-  }
-
-  const defaultLabels = {
-    showsLabel: 'Shows',
-  };
-
-  interface Props {
-    links?: NavLink[];
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    links = [],
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let invitationCount = $state(0);
-
-  let currentPath = $derived($page.url.pathname);
-
-  function isActive(href: string, path: string): boolean {
-    if (href === `${base}/` || href === '/') {
-      return path === href || path === `${base}/`;
-    }
-    return path.startsWith(href);
-  }
-
-  onMount(() => {
-    async function fetchShows() {
-      try {
-        const res = await fetch(`/api/getEventsForVenue`);
-        if (!res.ok) {
-          // Silently ignore auth errors - user may not be logged in yet
-          if (res.status === 401) return;
-          return;
-        }
-        const events = await res.json();
-        invitationCount = events.filter((event: { acceptedState: number }) => event.acceptedState === 0).length;
-      } catch (_err) {
-        // Silently fail - this is non-critical UI enhancement
-      }
-    }
-
-    if (browser) {
-      fetchShows();
-    }
-  });
-</script>
-
-{#each links as { label, href, icon }}
-  <a
-    {href}
-    class={`bottom-nav-item flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
-      ${typography.textMuted} transition-colors duration-150
-      hover:text-gray-900 hover:no-underline dark:hover:text-white
-      select-none touch-manipulation
-      ${isActive(href, currentPath) ? 'active text-blue-700 dark:text-blue-500' : ''}`}
-    aria-label={label}
-    style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
-  >
-    <span class="bottom-nav-icon relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
-      <Icon name={icon} size="24" />
-      {#if label === labels.showsLabel && invitationCount > 0}
-        <span class="notification-dot absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
-      {/if}
-    </span>
-  </a>
-{/each}
+<script lang="ts">
+  import { page } from '../../__LIB_STORES__.js';
+  import { base } from '../../__LIB_PATHS__.js';
+  import { browser } from '../../__LIB_ENVIRONMENT__.js';
+  import { onMount } from "svelte";
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import { typography } from '../../tokens/typography';
+
+  interface NavLink {
+    label: string;
+    href: string;
+    icon: string;
+  }
+
+  const defaultLabels = {
+    showsLabel: 'Shows',
+  };
+
+  interface Props {
+    links?: NavLink[];
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    links = [],
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let invitationCount = $state(0);
+
+  let currentPath = $derived($page.url.pathname);
+
+  function isActive(href: string, path: string): boolean {
+    if (href === `${base}/` || href === '/') {
+      return path === href || path === `${base}/`;
+    }
+    return path.startsWith(href);
+  }
+
+  onMount(() => {
+    async function fetchShows() {
+      try {
+        const res = await fetch(`/api/getEventsForVenue`);
+        if (!res.ok) {
+          // Silently ignore auth errors - user may not be logged in yet
+          if (res.status === 401) return;
+          return;
+        }
+        const events = await res.json();
+        invitationCount = events.filter((event: { acceptedState: number }) => event.acceptedState === 0).length;
+      } catch (_err) {
+        // Silently fail - this is non-critical UI enhancement
+      }
+    }
+
+    if (browser) {
+      fetchShows();
+    }
+  });
+</script>
+
+{#each links as { label, href, icon }}
+  <a
+    {href}
+    class={`bottom-nav-item flex-1 flex items-center justify-center py-3 px-2 no-underline bg-transparent border-none cursor-pointer min-w-0
+      ${typography.textMuted} transition-colors duration-150
+      hover:text-text-primary hover:no-underline
+      select-none touch-manipulation
+      ${isActive(href, currentPath) ? 'active text-brand-primary' : ''}`}
+    aria-label={label}
+    style="-webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;"
+  >
+    <span class="bottom-nav-icon relative flex items-center justify-center transition-transform duration-150 active:scale-[0.8]">
+      <Icon name={icon} size="24" />
+      {#if label === labels.showsLabel && invitationCount > 0}
+        <span class="notification-dot absolute -top-1 -right-1 w-2 h-2 bg-accent-danger rounded-full"></span>
+      {/if}
+    </span>
+  </a>
+{/each}

package/dist/patterns/navigation/Header.spec.js

@@ -159,7 +159,7 @@ describe('Header', () => {
             await fireEvent.click(mobileButton);
             // The mobile sheet uses portal action to render to document.body,
             // so we need to check in document.body instead of container
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
         });
         it('navigates when a mobile sheet dropdown link is clicked', async () => {
@@ -168,7 +168,7 @@ describe('Header', () => {
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
             // Mobile sheet renders via portal in document.body
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             // Click the first dropdown link in the mobile sheet
             const menuItems = mobileSheet.querySelectorAll('button');
@@ -183,7 +183,7 @@ describe('Header', () => {
             const { container } = render(Header, { ...defaultProps, signoutHandler });
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             // Find the Sign Out button in the mobile sheet
             const menuItems = mobileSheet.querySelectorAll('button');
@@ -230,8 +230,8 @@ describe('Header', () => {
         it('marks current path as active', () => {
             const { container } = render(Header, defaultProps);
             const showsLink = container.querySelector('a[href="/shows"]');
-            // The active link should have 'text-blue-700' class (or dark mode 'dark:text-blue-500')
-            expect(showsLink.classList.contains('text-blue-700')).toBe(true);
+            // The active link should have 'text-brand-primary' class (or dark mode '')
+            expect(showsLink.classList.contains('text-brand-primary')).toBe(true);
         });
     });
     describe('default values', () => {
@@ -245,7 +245,7 @@ describe('Header', () => {
             const { container } = render(Header, { ...defaultProps, name: 'Jane Doe' });
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             expect(mobileSheet.textContent).toContain('Jane Doe');
         });
@@ -253,7 +253,7 @@ describe('Header', () => {
             const { container } = render(Header, { ...defaultProps, name: '' });
             const mobileButton = container.querySelector('button.block.md\\:hidden');
             await fireEvent.click(mobileButton);
-            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-black\\/50');
+            const mobileSheet = document.body.querySelector('div.fixed.inset-0.bg-overlay-bg');
             expect(mobileSheet).toBeTruthy();
             expect(mobileSheet.textContent).toContain('Performer');
         });
@@ -281,13 +281,13 @@ describe('Header', () => {
             const { container } = render(Header, propsWithRoot);
             const homeLink = container.querySelector('a[href="/performers/"]');
             // /shows does not match /performers/, so it should NOT be active
-            expect(homeLink.classList.contains('text-blue-700')).toBe(false);
+            expect(homeLink.classList.contains('text-brand-primary')).toBe(false);
         });
         it('marks link as active using startsWith for non-root paths', () => {
             const { container } = render(Header, defaultProps);
             // '/shows' starts with '/shows' so it should be active
             const showsLink = container.querySelector('a[href="/shows"]');
-            expect(showsLink.classList.contains('text-blue-700')).toBe(true);
+            expect(showsLink.classList.contains('text-brand-primary')).toBe(true);
         });
     });
 });

package/dist/patterns/navigation/Header.stories.svelte

@@ -1,77 +1,77 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-    import Header from "./Header.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Layout/Header",
-    component: Header,
-    argTypes: {
-      name: { control: "text" },
-      email: { control: "text" },
-      avatar: { control: "text" },
-      signoutHandler: { action: "signout" },
-    },
-  });
-
-  function handleSignout() {
-    alert("User signed out");
-  }
-
-</script>
-
-
-<Story
-  name="Default Header"
-  args={{
-    name: "John Performer",
-    email: "john@example.com",
-    avatar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=12",
-    signoutHandler: handleSignout
-  }}
-/>
-
-<Story name="With Long Name">
-  <Header
-    name="Alexander Christopher Wellington"
-    email="alexander.wellington@performersportal.com"
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=33"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="With Short Name">
-  <Header
-    name="Jo"
-    email="jo@test.com"
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=5"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="Female Performer">
-  <Header
-    name="Sarah Johnson"
-    email="sarah.johnson@comedy.com"
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=47"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="Without Email">
-  <Header
-    name="Anonymous Performer"
-    email=""
-    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=68"
-    signoutHandler={handleSignout}
-  />
-</Story>
-
-<Story name="With Default Avatar">
-  <Header
-    name="Default User"
-    email="default@performers.com"
-    avatar=""
-    signoutHandler={handleSignout}
-  />
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Header from "./Header.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Layout/Header",
+    component: Header,
+    argTypes: {
+      name: { control: "text" },
+      email: { control: "text" },
+      avatar: { control: "text" },
+      signoutHandler: { action: "signout" },
+    },
+  });
+
+  function handleSignout() {
+    alert("User signed out");
+  }
+
+</script>
+
+
+<Story
+  name="Default Header"
+  args={{
+    name: "John Performer",
+    email: "john@example.com",
+    avatar: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=12",
+    signoutHandler: handleSignout
+  }}
+/>
+
+<Story name="With Long Name">
+  <Header
+    name="Alexander Christopher Wellington"
+    email="alexander.wellington@performersportal.com"
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=33"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="With Short Name">
+  <Header
+    name="Jo"
+    email="jo@test.com"
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=5"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="Female Performer">
+  <Header
+    name="Sarah Johnson"
+    email="sarah.johnson@comedy.com"
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=47"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="Without Email">
+  <Header
+    name="Anonymous Performer"
+    email=""
+    avatar="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%236366f1'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E?demo=68"
+    signoutHandler={handleSignout}
+  />
+</Story>
+
+<Story name="With Default Avatar">
+  <Header
+    name="Default User"
+    email="default@performers.com"
+    avatar=""
+    signoutHandler={handleSignout}
+  />
+</Story>