@getmicdrop/svelte-components 5.10.3 → 5.13.0

package/dist/primitives/DarkModeToggle.stories.svelte

@@ -1,57 +1,57 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import DarkModeToggle from './DarkModeToggle.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/DarkModeToggle',
-    component: DarkModeToggle,
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-  </script>
-
-<Story name="Default">
-  <div class="flex flex-col gap-4 p-4">
-    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
-    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
-      Cycles through: Auto → Light → Dark → Auto
-    </p>
-    <DarkModeToggle />
-    <p class="text-xs text-gray-500 dark:text-gray-400">
-      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
-    </p>
-  </div>
-</Story>
-
-<Story name="In Header">
-  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
-    <div class="flex items-center justify-between">
-      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
-      <DarkModeToggle />
-    </div>
-  </div>
-</Story>
-
-<Story name="Theme States Demo">
-  <div class="space-y-4 p-4">
-    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
-      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
-        Current Theme Demo
-      </h3>
-      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
-        This content changes appearance based on the selected theme mode.
-      </p>
-      <DarkModeToggle />
-    </div>
-
-    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
-      <p><strong>Auto Mode:</strong> Follows system preferences</p>
-      <p><strong>Light Mode:</strong> Forces light theme</p>
-      <p><strong>Dark Mode:</strong> Forces dark theme</p>
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import DarkModeToggle from './DarkModeToggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/DarkModeToggle',
+    component: DarkModeToggle,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  </script>
+
+<Story name="Default">
+  <div class="flex flex-col gap-4 p-4">
+    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
+    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+      Cycles through: Auto → Light → Dark → Auto
+    </p>
+    <DarkModeToggle />
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
+    </p>
+  </div>
+</Story>
+
+<Story name="In Header">
+  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
+      <DarkModeToggle />
+    </div>
+  </div>
+</Story>
+
+<Story name="Theme States Demo">
+  <div class="space-y-4 p-4">
+    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
+        Current Theme Demo
+      </h3>
+      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
+        This content changes appearance based on the selected theme mode.
+      </p>
+      <DarkModeToggle />
+    </div>
+
+    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+      <p><strong>Auto Mode:</strong> Follows system preferences</p>
+      <p><strong>Light Mode:</strong> Forces light theme</p>
+      <p><strong>Dark Mode:</strong> Forces dark theme</p>
+    </div>
+  </div>
+</Story>

package/dist/primitives/DarkModeToggle.svelte

@@ -1,136 +1,136 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-  import SunIcon from "./Icons/SunIcon.svelte";
-  import MoonIcon from "./Icons/MoonIcon.svelte";
-  import Button from "./Button/Button.svelte";
-
-  interface Props {
-    /** Container selector for applying dark class */
-    containerSelector?: string;
-  }
-
-  let { containerSelector = ".performer-portal" }: Props = $props();
-
-  let themeMode = $state<"auto" | "light" | "dark">("auto");
-  let isDark = $state(false);
-
-  function setMicdropDarkClass(enable: boolean) {
-    const container = document.querySelector(containerSelector);
-    if (enable) {
-      if (container) container.classList.add("dark");
-      document.documentElement.classList.add("dark");
-    } else {
-      if (container) container.classList.remove("dark");
-      document.documentElement.classList.remove("dark");
-    }
-  }
-
-  function getSystemPreference() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches;
-  }
-
-  function applyTheme() {
-    if (themeMode === "auto") {
-      isDark = getSystemPreference();
-    } else {
-      isDark = themeMode === "dark";
-    }
-    setMicdropDarkClass(isDark);
-  }
-
-  onMount(() => {
-    const savedTheme = localStorage.getItem("theme");
-
-    if (savedTheme === "dark" || savedTheme === "light") {
-      themeMode = savedTheme;
-    } else {
-      themeMode = "auto";
-    }
-
-    applyTheme();
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (themeMode === "auto") {
-        applyTheme();
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleChange);
-    };
-  });
-
-  function toggleTheme(event: MouseEvent) {
-    if (themeMode === "auto") {
-      themeMode = "light";
-      localStorage.setItem("theme", "light");
-    } else if (themeMode === "light") {
-      themeMode = "dark";
-      localStorage.setItem("theme", "dark");
-    } else {
-      themeMode = "auto";
-      localStorage.removeItem("theme");
-    }
-
-    applyTheme();
-
-    if (event?.currentTarget) {
-      (event.currentTarget as HTMLElement).blur();
-    }
-  }
-
-  let titleText = $derived(
-    themeMode === "auto"
-      ? "Auto theme (following device) - click for light mode"
-      : themeMode === "light"
-        ? "Light mode - click for dark mode"
-        : "Dark mode - click for auto"
-  );
-</script>
-
-<Button
-  variant="alternative"
-  onclick={toggleTheme}
-  class="relative h-10 w-10 overflow-hidden p-0"
-  aria-label="Toggle theme"
-  title={titleText}
->
-  <span
-    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
-      ? 'scale-100 rotate-0 opacity-100'
-      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-  >
-    <SunIcon size="20" />
-  </span>
-
-  <span
-    class="transition-all duration-300 {themeMode === 'dark'
-      ? 'scale-100 rotate-0 opacity-100'
-      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
-  >
-    <MoonIcon size="20" color="white" />
-  </span>
-
-  {#if themeMode === "auto"}
-    <div class="absolute inset-0 overflow-hidden rounded-lg">
-      <div
-        class="absolute flex h-full w-full items-center justify-center bg-white"
-        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
-      >
-        <span class="-translate-x-1 -translate-y-1 text-amber-500">
-          <SunIcon size="12" />
-        </span>
-      </div>
-      <div
-        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
-        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
-      >
-        <span class="translate-x-1 translate-y-1">
-          <MoonIcon size="12" color="white" />
-        </span>
-      </div>
-    </div>
-  {/if}
-</Button>
+<script lang="ts">
+  import { onMount } from "svelte";
+  import SunIcon from "./Icons/SunIcon.svelte";
+  import MoonIcon from "./Icons/MoonIcon.svelte";
+  import Button from "./Button/Button.svelte";
+
+  interface Props {
+    /** Container selector for applying dark class */
+    containerSelector?: string;
+  }
+
+  let { containerSelector = ".performer-portal" }: Props = $props();
+
+  let themeMode = $state<"auto" | "light" | "dark">("auto");
+  let isDark = $state(false);
+
+  function setMicdropDarkClass(enable: boolean) {
+    const container = document.querySelector(containerSelector);
+    if (enable) {
+      if (container) container.classList.add("dark");
+      document.documentElement.classList.add("dark");
+    } else {
+      if (container) container.classList.remove("dark");
+      document.documentElement.classList.remove("dark");
+    }
+  }
+
+  function getSystemPreference() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  function applyTheme() {
+    if (themeMode === "auto") {
+      isDark = getSystemPreference();
+    } else {
+      isDark = themeMode === "dark";
+    }
+    setMicdropDarkClass(isDark);
+  }
+
+  onMount(() => {
+    const savedTheme = localStorage.getItem("theme");
+
+    if (savedTheme === "dark" || savedTheme === "light") {
+      themeMode = savedTheme;
+    } else {
+      themeMode = "auto";
+    }
+
+    applyTheme();
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (themeMode === "auto") {
+        applyTheme();
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  });
+
+  function toggleTheme(event: MouseEvent) {
+    if (themeMode === "auto") {
+      themeMode = "light";
+      localStorage.setItem("theme", "light");
+    } else if (themeMode === "light") {
+      themeMode = "dark";
+      localStorage.setItem("theme", "dark");
+    } else {
+      themeMode = "auto";
+      localStorage.removeItem("theme");
+    }
+
+    applyTheme();
+
+    if (event?.currentTarget) {
+      (event.currentTarget as HTMLElement).blur();
+    }
+  }
+
+  let titleText = $derived(
+    themeMode === "auto"
+      ? "Auto theme (following device) - click for light mode"
+      : themeMode === "light"
+        ? "Light mode - click for dark mode"
+        : "Dark mode - click for auto"
+  );
+</script>
+
+<Button
+  variant="alternative"
+  onclick={toggleTheme}
+  class="relative h-10 w-10 overflow-hidden p-0"
+  aria-label="Toggle theme"
+  title={titleText}
+>
+  <span
+    class="text-amber-500 transition-all duration-300 {themeMode === 'light'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <SunIcon size="20" />
+  </span>
+
+  <span
+    class="transition-all duration-300 {themeMode === 'dark'
+      ? 'scale-100 rotate-0 opacity-100'
+      : 'pointer-events-none absolute scale-0 rotate-180 opacity-0'}"
+  >
+    <MoonIcon size="20" color="white" />
+  </span>
+
+  {#if themeMode === "auto"}
+    <div class="absolute inset-0 overflow-hidden rounded-lg">
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-white"
+        style="clip-path: polygon(0 0, 100% 0, 0 100%)"
+      >
+        <span class="-translate-x-1 -translate-y-1 text-amber-500">
+          <SunIcon size="12" />
+        </span>
+      </div>
+      <div
+        class="absolute flex h-full w-full items-center justify-center bg-gray-800"
+        style="clip-path: polygon(100% 0, 100% 100%, 0 100%)"
+      >
+        <span class="translate-x-1 translate-y-1">
+          <MoonIcon size="12" color="white" />
+        </span>
+      </div>
+    </div>
+  {/if}
+</Button>

package/dist/primitives/Drawer/Drawer.spec.js

@@ -14,52 +14,52 @@ describe('Drawer Component', () => {
     document.body.style.overflow = '';
   });
 
-  test('does not render when show is false and hidden is true', () => {
-    const { container } = render(Drawer, { props: { show: false, hidden: true } });
+  test('does not render when open is false', () => {
+    const { container } = render(Drawer, { props: { open: false } });
     expect(container.querySelector('[role="dialog"]')).not.toBeInTheDocument();
   });
 
-  test('renders when show is true', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+  test('renders when open is true', () => {
+    const { container } = render(Drawer, { props: { open: true } });
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
 
-  test('renders when hidden is false', () => {
-    const { container } = render(Drawer, { props: { hidden: false } });
+  test('renders when open is true (explicit)', () => {
+    const { container } = render(Drawer, { props: { open: true } });
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
 
   test('has role="dialog" and aria-modal="true"', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveAttribute('aria-modal', 'true');
   });
 
   test('renders title when provided', () => {
-    render(Drawer, { props: { show: true, title: 'Test Drawer', id: 'test-drawer' } });
+    render(Drawer, { props: { open: true, title: 'Test Drawer', id: 'test-drawer' } });
     expect(screen.getByText('Test Drawer')).toBeInTheDocument();
   });
 
   test('applies custom className', () => {
-    const { container } = render(Drawer, { props: { show: true, class: 'custom-drawer' } });
+    const { container } = render(Drawer, { props: { open: true, class: 'custom-drawer' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('custom-drawer');
   });
 
   test('renders backdrop by default when visible', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const backdrop = container.querySelector('[role="presentation"]');
     expect(backdrop).toBeInTheDocument();
   });
 
   test('does not render backdrop when backdrop is false', () => {
-    const { container } = render(Drawer, { props: { show: true, backdrop: false } });
+    const { container } = render(Drawer, { props: { open: true, backdrop: false } });
     const backdrop = container.querySelector('[role="presentation"]');
     expect(backdrop).not.toBeInTheDocument();
   });
 
   test('passes through id prop', () => {
-    const { container } = render(Drawer, { props: { show: true, id: 'my-drawer' } });
+    const { container } = render(Drawer, { props: { open: true, id: 'my-drawer' } });
     const dialog = container.querySelector('#my-drawer');
     expect(dialog).toBeInTheDocument();
   });
@@ -67,25 +67,25 @@ describe('Drawer Component', () => {
 
 describe('Drawer Placements', () => {
   test('left placement has left-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'left' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'left' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('left-0');
   });
 
   test('right placement has right-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'right' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'right' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('right-0');
   });
 
   test('top placement has top-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'top' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'top' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('top-0');
   });
 
   test('bottom placement has bottom-0 class', () => {
-    const { container } = render(Drawer, { props: { show: true, placement: 'bottom' } });
+    const { container } = render(Drawer, { props: { open: true, placement: 'bottom' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('bottom-0');
   });
@@ -93,25 +93,25 @@ describe('Drawer Placements', () => {
 
 describe('Drawer Widths', () => {
   test('sm width applies w-64', () => {
-    const { container } = render(Drawer, { props: { show: true, width: 'sm' } });
+    const { container } = render(Drawer, { props: { open: true, width: 'sm' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-64');
   });
 
   test('md width applies w-80 (default)', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-80');
   });
 
   test('lg width applies w-96', () => {
-    const { container } = render(Drawer, { props: { show: true, width: 'lg' } });
+    const { container } = render(Drawer, { props: { open: true, width: 'lg' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-96');
   });
 
   test('full width applies w-full', () => {
-    const { container } = render(Drawer, { props: { show: true, width: 'full' } });
+    const { container } = render(Drawer, { props: { open: true, width: 'full' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('w-full');
   });
@@ -119,13 +119,13 @@ describe('Drawer Widths', () => {
 
 describe('Drawer Accessibility', () => {
   test('has tabindex="-1" for focus management', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveAttribute('tabindex', '-1');
   });
 
   test('has aria-labelledby when title and id are provided', () => {
-    const { container } = render(Drawer, { props: { show: true, title: 'Test', id: 'test-drawer' } });
+    const { container } = render(Drawer, { props: { open: true, title: 'Test', id: 'test-drawer' } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveAttribute('aria-labelledby', 'test-drawer-label');
   });
@@ -133,32 +133,32 @@ describe('Drawer Accessibility', () => {
 
 describe('Drawer Styling', () => {
   test('has fixed positioning', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('fixed');
   });
 
   test('has z-40 for stacking', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('z-40');
   });
 
   test('has flex flex-col layout', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('flex');
     expect(dialog).toHaveClass('flex-col');
   });
 
   test('has bg-white background', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('bg-white');
   });
 
   test('has dark mode background', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     const dialog = container.querySelector('[role="dialog"]');
     expect(dialog).toHaveClass('dark:bg-gray-800');
   });
@@ -166,13 +166,13 @@ describe('Drawer Styling', () => {
 
 describe('Drawer Edge Mode', () => {
   test('shows edge trigger when edge=true, placement=bottom, and not visible', () => {
-    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: false, hidden: true } });
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', open: false } });
     const edgeTrigger = container.querySelector('.cursor-pointer');
     expect(edgeTrigger).toBeInTheDocument();
   });
 
   test('hides edge trigger when drawer is visible', () => {
-    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', show: true } });
+    const { container } = render(Drawer, { props: { edge: true, placement: 'bottom', open: true } });
     // Edge trigger should not be visible when drawer is open
     const edgeTriggers = container.querySelectorAll('.cursor-pointer.fixed');
     // The drawer itself might have cursor classes, so check for the specific edge trigger pattern
@@ -184,20 +184,20 @@ describe('Drawer Callbacks', () => {
   test('onclose prop is accepted', () => {
     const onclose = vi.fn();
     const { container } = render(Drawer, {
-      props: { show: true, closeOnBackdropClick: true, onclose }
+      props: { open: true, closeOnBackdropClick: true, onclose }
     });
     // Verify drawer renders with onclose callback
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
 
   test('closeOnBackdropClick prop defaults to true', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     // Drawer renders with default closeOnBackdropClick behavior
     expect(container.querySelector('[role="presentation"]')).toBeInTheDocument();
   });
 
   test('closeOnEscape prop defaults to true', () => {
-    const { container } = render(Drawer, { props: { show: true } });
+    const { container } = render(Drawer, { props: { open: true } });
     // Drawer accepts closeOnEscape prop
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });
@@ -205,7 +205,7 @@ describe('Drawer Callbacks', () => {
   test('onopen prop is accepted', () => {
     const onopen = vi.fn();
     const { container } = render(Drawer, {
-      props: { show: true, onopen }
+      props: { open: true, onopen }
     });
     expect(container.querySelector('[role="dialog"]')).toBeInTheDocument();
   });