@getmicdrop/svelte-components 5.21.0 → 5.21.1

package/dist/primitives/Icons/Icon.svelte

@@ -1,79 +1,79 @@
-<script lang="ts">
-  import Home from "./Home.svelte";
-  import Shows from "./Shows.svelte";
-  import Availability from "./Availability.svelte";
-  import Profile from "./Profile.svelte";
-  import Payment from "./Payment.svelte";
-  import Notification from "./Notification.svelte";
-  import Signout from "./Signout.svelte";
-  import More from "./More.svelte";
-  import Info from "./Info.svelte";
-
-  import ChevronLeft from "./ChevronLeft.svelte";
-  import ChevronRight from "./ChevronRight.svelte";
-  import CheckCircle from "./CheckCircle.svelte";
-  import ErrorCircle from "./ErrorCircle.svelte";
-  import ArrowLeft from "./ArrowLeft.svelte";
-  import Back from "./Back.svelte";
-  import DownArrow from "./DownArrow.svelte";
-  import Message from "./Message.svelte";
-  import ArrowRight from "./ArrowRight.svelte";
-  import Reload from "./Reload.svelte";
-  import CheckCircleOutline from "./CheckCircleOutline.svelte";
-  import Copy from "./Copy.svelte";
-  import Cross from "./Cross.svelte";
-  import MoreHori from "./MoreHori.svelte";
-
-  const iconMap = {
-    Home,
-    Shows,
-    Availability,
-    Profile,
-    Payment,
-    Notification,
-    More,
-    MoreHori,
-    Info,
-    ChevronLeft,
-    ChevronRight,
-    Signout,
-    CheckCircle,
-    CheckCircleOutline,
-    ErrorCircle,
-    ArrowLeft,
-    ArrowRight,
-    Back,
-    DownArrow,
-    Message,
-    Reload,
-    Copy,
-    Cross,
-  };
-
-  type IconName = keyof typeof iconMap;
-  
-  let { name, size = "24", color = "currentColor", class: className = "" }: { name: string; size?: string; color?: string; class?: string } = $props();
-
-  // Support both lowercase and PascalCase icon names
-  function getIcon(iconName: string) {
-    // If already in iconMap, use directly
-    if (iconName in iconMap) {
-      return iconMap[iconName as IconName];
-    }
-    // Try PascalCase conversion (e.g., 'home' -> 'Home')
-    const pascalCase = iconName.charAt(0).toUpperCase() + iconName.slice(1);
-    if (pascalCase in iconMap) {
-      return iconMap[pascalCase as IconName];
-    }
-    return null;
-  }
-
-  let Component = $derived(getIcon(name));
-</script>
-
-{#if Component}
-  {@const IconComponent = Component}
-  <IconComponent {size} {color} class={className} />
-{:else}
-  <span>Icon "{name}" not found.</span>
-{/if}
+<script lang="ts">
+  import Home from "./Home.svelte";
+  import Shows from "./Shows.svelte";
+  import Availability from "./Availability.svelte";
+  import Profile from "./Profile.svelte";
+  import Payment from "./Payment.svelte";
+  import Notification from "./Notification.svelte";
+  import Signout from "./Signout.svelte";
+  import More from "./More.svelte";
+  import Info from "./Info.svelte";
+
+  import ChevronLeft from "./ChevronLeft.svelte";
+  import ChevronRight from "./ChevronRight.svelte";
+  import CheckCircle from "./CheckCircle.svelte";
+  import ErrorCircle from "./ErrorCircle.svelte";
+  import ArrowLeft from "./ArrowLeft.svelte";
+  import Back from "./Back.svelte";
+  import DownArrow from "./DownArrow.svelte";
+  import Message from "./Message.svelte";
+  import ArrowRight from "./ArrowRight.svelte";
+  import Reload from "./Reload.svelte";
+  import CheckCircleOutline from "./CheckCircleOutline.svelte";
+  import Copy from "./Copy.svelte";
+  import Cross from "./Cross.svelte";
+  import MoreHori from "./MoreHori.svelte";
+
+  const iconMap = {
+    Home,
+    Shows,
+    Availability,
+    Profile,
+    Payment,
+    Notification,
+    More,
+    MoreHori,
+    Info,
+    ChevronLeft,
+    ChevronRight,
+    Signout,
+    CheckCircle,
+    CheckCircleOutline,
+    ErrorCircle,
+    ArrowLeft,
+    ArrowRight,
+    Back,
+    DownArrow,
+    Message,
+    Reload,
+    Copy,
+    Cross,
+  };
+
+  type IconName = keyof typeof iconMap;
+  
+  let { name, size = "24", color = "currentColor", class: className = "" }: { name: string; size?: string; color?: string; class?: string } = $props();
+
+  // Support both lowercase and PascalCase icon names
+  function getIcon(iconName: string) {
+    // If already in iconMap, use directly
+    if (iconName in iconMap) {
+      return iconMap[iconName as IconName];
+    }
+    // Try PascalCase conversion (e.g., 'home' -> 'Home')
+    const pascalCase = iconName.charAt(0).toUpperCase() + iconName.slice(1);
+    if (pascalCase in iconMap) {
+      return iconMap[pascalCase as IconName];
+    }
+    return null;
+  }
+
+  let Component = $derived(getIcon(name));
+</script>
+
+{#if Component}
+  {@const IconComponent = Component}
+  <IconComponent {size} {color} class={className} />
+{:else}
+  <span>Icon "{name}" not found.</span>
+{/if}

package/dist/primitives/Icons/IconGallery.stories.svelte

@@ -1,235 +1,235 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  const { Story } = defineMeta({
-    title: 'Components/Icons/Gallery',
-    tags: ['autodocs'],
-  });
-
-</script>
-
-<script>
-    import ArrowLeft from './ArrowLeft.svelte';
-  import ArrowRight from './ArrowRight.svelte';
-  import Availability from './Availability.svelte';
-  import Back from './Back.svelte';
-  import CheckCircle from './CheckCircle.svelte';
-  import CheckCircleOutline from './CheckCircleOutline.svelte';
-  import ChevronLeft from './ChevronLeft.svelte';
-  import ChevronRight from './ChevronRight.svelte';
-  import Copy from './Copy.svelte';
-  import Cross from './Cross.svelte';
-  import DownArrow from './DownArrow.svelte';
-  import ErrorCircle from './ErrorCircle.svelte';
-  import FacebookIcon from './FacebookIcon.svelte';
-  import Home from './Home.svelte';
-  import Icon from './Icon.svelte';
-  import Info from './Info.svelte';
-  import InstagramIcon from './InstagramIcon.svelte';
-  import Message from './Message.svelte';
-  import MoonIcon from './MoonIcon.svelte';
-  import More from './More.svelte';
-  import MoreHori from './MoreHori.svelte';
-  import Notification from './Notification.svelte';
-  import Payment from './Payment.svelte';
-  import Profile from './Profile.svelte';
-  import Reload from './Reload.svelte';
-  import Shows from './Shows.svelte';
-  import Signout from './Signout.svelte';
-  import SunIcon from './SunIcon.svelte';
-  import TiktokIcon from './TiktokIcon.svelte';
-  import TwitterIcon from './TwitterIcon.svelte';
-  import WarningIcon from './WarningIcon.svelte';
-
-  const icons = [
-    { name: 'ArrowLeft', component: ArrowLeft },
-    { name: 'ArrowRight', component: ArrowRight },
-    { name: 'Availability', component: Availability },
-    { name: 'Back', component: Back },
-    { name: 'CheckCircle', component: CheckCircle },
-    { name: 'CheckCircleOutline', component: CheckCircleOutline },
-    { name: 'ChevronLeft', component: ChevronLeft },
-    { name: 'ChevronRight', component: ChevronRight },
-    { name: 'Copy', component: Copy },
-    { name: 'Cross', component: Cross },
-    { name: 'DownArrow', component: DownArrow },
-    { name: 'ErrorCircle', component: ErrorCircle },
-    { name: 'FacebookIcon', component: FacebookIcon },
-    { name: 'Home', component: Home },
-    { name: 'Info', component: Info },
-    { name: 'InstagramIcon', component: InstagramIcon },
-    { name: 'Message', component: Message },
-    { name: 'MoonIcon', component: MoonIcon },
-    { name: 'More', component: More },
-    { name: 'MoreHori', component: MoreHori },
-    { name: 'Notification', component: Notification },
-    { name: 'Payment', component: Payment },
-    { name: 'Profile', component: Profile },
-    { name: 'Reload', component: Reload },
-    { name: 'Shows', component: Shows },
-    { name: 'Signout', component: Signout },
-    { name: 'SunIcon', component: SunIcon },
-    { name: 'TiktokIcon', component: TiktokIcon },
-    { name: 'TwitterIcon', component: TwitterIcon },
-    { name: 'WarningIcon', component: WarningIcon },
-  ];
-</script>
-
-<Story name="All Icons">
-  <div class="p-8">
-    <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
-    <p class="text-gray-500 dark:text-gray-400 mb-8">All available icons in the component library</p>
-
-    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-      {#each icons as { name, component }}
-        <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <svelte:component this={component} />
-          </div>
-          <span class="text-sm text-center text-gray-500 dark:text-gray-400 font-medium">{name}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-</Story>
-
-<Story name="Icon Sizes">
-  <div class="p-8 space-y-8">
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Navigation Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Home />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Home</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Shows />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Shows</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Availability />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Availability</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Profile />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Profile</span>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-green-600 dark:text-green-400">
-            <CheckCircle />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Success</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-red-600 dark:text-red-400">
-            <ErrorCircle />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Error</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-amber-500 dark:text-amber-400">
-            <WarningIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Warning</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-blue-500">
-            <Info />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Info</span>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Social Media Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <FacebookIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Facebook</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <InstagramIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Instagram</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <TwitterIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Twitter</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <TiktokIcon />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">TikTok</span>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-2xl font-bold mb-4">Action Icons</h2>
-      <div class="flex gap-6 items-end">
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Copy />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Copy</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Reload />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Reload</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <Cross />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">Close</span>
-        </div>
-        <div class="text-center">
-          <div class="w-12 h-12 flex items-center justify-center mb-2">
-            <More />
-          </div>
-          <span class="text-xs text-gray-500 dark:text-gray-400">More</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</Story>
-
-<Story name="Dark Mode Icons">
-  <div class="bg-gray-900 p-8">
-    <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
-
-    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
-      {#each icons.slice(0, 12) as { name, component }}
-        <div class="flex flex-col items-center p-4 border border-gray-700 rounded-lg hover:bg-gray-800 transition-colors">
-          <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
-            <svelte:component this={component} />
-          </div>
-          <span class="text-sm text-center text-gray-300 font-medium">{name}</span>
-        </div>
-      {/each}
-    </div>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  const { Story } = defineMeta({
+    title: 'Components/Icons/Gallery',
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+    import ArrowLeft from './ArrowLeft.svelte';
+  import ArrowRight from './ArrowRight.svelte';
+  import Availability from './Availability.svelte';
+  import Back from './Back.svelte';
+  import CheckCircle from './CheckCircle.svelte';
+  import CheckCircleOutline from './CheckCircleOutline.svelte';
+  import ChevronLeft from './ChevronLeft.svelte';
+  import ChevronRight from './ChevronRight.svelte';
+  import Copy from './Copy.svelte';
+  import Cross from './Cross.svelte';
+  import DownArrow from './DownArrow.svelte';
+  import ErrorCircle from './ErrorCircle.svelte';
+  import FacebookIcon from './FacebookIcon.svelte';
+  import Home from './Home.svelte';
+  import Icon from './Icon.svelte';
+  import Info from './Info.svelte';
+  import InstagramIcon from './InstagramIcon.svelte';
+  import Message from './Message.svelte';
+  import MoonIcon from './MoonIcon.svelte';
+  import More from './More.svelte';
+  import MoreHori from './MoreHori.svelte';
+  import Notification from './Notification.svelte';
+  import Payment from './Payment.svelte';
+  import Profile from './Profile.svelte';
+  import Reload from './Reload.svelte';
+  import Shows from './Shows.svelte';
+  import Signout from './Signout.svelte';
+  import SunIcon from './SunIcon.svelte';
+  import TiktokIcon from './TiktokIcon.svelte';
+  import TwitterIcon from './TwitterIcon.svelte';
+  import WarningIcon from './WarningIcon.svelte';
+
+  const icons = [
+    { name: 'ArrowLeft', component: ArrowLeft },
+    { name: 'ArrowRight', component: ArrowRight },
+    { name: 'Availability', component: Availability },
+    { name: 'Back', component: Back },
+    { name: 'CheckCircle', component: CheckCircle },
+    { name: 'CheckCircleOutline', component: CheckCircleOutline },
+    { name: 'ChevronLeft', component: ChevronLeft },
+    { name: 'ChevronRight', component: ChevronRight },
+    { name: 'Copy', component: Copy },
+    { name: 'Cross', component: Cross },
+    { name: 'DownArrow', component: DownArrow },
+    { name: 'ErrorCircle', component: ErrorCircle },
+    { name: 'FacebookIcon', component: FacebookIcon },
+    { name: 'Home', component: Home },
+    { name: 'Info', component: Info },
+    { name: 'InstagramIcon', component: InstagramIcon },
+    { name: 'Message', component: Message },
+    { name: 'MoonIcon', component: MoonIcon },
+    { name: 'More', component: More },
+    { name: 'MoreHori', component: MoreHori },
+    { name: 'Notification', component: Notification },
+    { name: 'Payment', component: Payment },
+    { name: 'Profile', component: Profile },
+    { name: 'Reload', component: Reload },
+    { name: 'Shows', component: Shows },
+    { name: 'Signout', component: Signout },
+    { name: 'SunIcon', component: SunIcon },
+    { name: 'TiktokIcon', component: TiktokIcon },
+    { name: 'TwitterIcon', component: TwitterIcon },
+    { name: 'WarningIcon', component: WarningIcon },
+  ];
+</script>
+
+<Story name="All Icons">
+  <div class="p-8">
+    <h1 class="text-3xl font-bold mb-6">Icon Gallery</h1>
+    <p class="text-muted-foreground mb-8">All available icons in the component library</p>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+      {#each icons as { name, component }}
+        <div class="flex flex-col items-center p-4 border rounded-lg hover:bg-bg-secondary transition-colors">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <svelte:component this={component} />
+          </div>
+          <span class="text-sm text-center text-muted-foreground font-medium">{name}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Story>
+
+<Story name="Icon Sizes">
+  <div class="p-8 space-y-8">
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Navigation Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Home />
+          </div>
+          <span class="text-xs text-muted-foreground">Home</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Shows />
+          </div>
+          <span class="text-xs text-muted-foreground">Shows</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Availability />
+          </div>
+          <span class="text-xs text-muted-foreground">Availability</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Profile />
+          </div>
+          <span class="text-xs text-muted-foreground">Profile</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Status Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-accent-success">
+            <CheckCircle />
+          </div>
+          <span class="text-xs text-muted-foreground">Success</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-accent-danger">
+            <ErrorCircle />
+          </div>
+          <span class="text-xs text-muted-foreground">Error</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-accent-warning">
+            <WarningIcon />
+          </div>
+          <span class="text-xs text-muted-foreground">Warning</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-brand-primary">
+            <Info />
+          </div>
+          <span class="text-xs text-muted-foreground">Info</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Social Media Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <FacebookIcon />
+          </div>
+          <span class="text-xs text-muted-foreground">Facebook</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <InstagramIcon />
+          </div>
+          <span class="text-xs text-muted-foreground">Instagram</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <TwitterIcon />
+          </div>
+          <span class="text-xs text-muted-foreground">Twitter</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <TiktokIcon />
+          </div>
+          <span class="text-xs text-muted-foreground">TikTok</span>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="text-2xl font-bold mb-4">Action Icons</h2>
+      <div class="flex gap-6 items-end">
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Copy />
+          </div>
+          <span class="text-xs text-muted-foreground">Copy</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Reload />
+          </div>
+          <span class="text-xs text-muted-foreground">Reload</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <Cross />
+          </div>
+          <span class="text-xs text-muted-foreground">Close</span>
+        </div>
+        <div class="text-center">
+          <div class="w-12 h-12 flex items-center justify-center mb-2">
+            <More />
+          </div>
+          <span class="text-xs text-muted-foreground">More</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</Story>
+
+<Story name="Dark Mode Icons">
+  <div class="bg-bg-primary p-8">
+    <h1 class="text-3xl font-bold mb-6 text-white">Icons in Dark Mode</h1>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
+      {#each icons.slice(0, 12) as { name, component }}
+        <div class="flex flex-col items-center p-4 border border-stroke-primary rounded-lg hover:bg-bg-secondary transition-colors">
+          <div class="w-12 h-12 flex items-center justify-center mb-2 text-white">
+            <svelte:component this={component} />
+          </div>
+          <span class="text-sm text-center text-muted-foreground font-medium">{name}</span>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Story>