@getmicdrop/svelte-components 5.17.1 → 5.17.3

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>