@getmicdrop/svelte-components 5.17.3 → 5.18.0

package/dist/primitives/Tabs/TabItem.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { getContext, onMount } from "svelte";
-  import type { Writable } from "svelte/store";
-
-  interface Props {
-    title?: string;
-    open?: boolean;
-    value?: string | number | undefined;
-    disabled?: boolean;
-    class?: string;
-    onclick?: () => void;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    title = "",
-    open = false,
-    value = undefined,
-    disabled = false,
-    class: className = "",
-    onclick,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const { activeTab, registerTab } = getContext<{
-    activeTab: Writable<string | number | undefined>;
-    registerTab: (id: string | number, title: string, open: boolean) => string | number;
-  }>("tabs");
-
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { getContext, onMount } from "svelte";
+  import type { Writable } from "svelte/store";
+
+  interface Props {
+    title?: string;
+    open?: boolean;
+    value?: string | number | undefined;
+    disabled?: boolean;
+    class?: string;
+    onclick?: () => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    title = "",
+    open = false,
+    value = undefined,
+    disabled = false,
+    class: className = "",
+    onclick,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const { activeTab, registerTab } = getContext<{
+    activeTab: Writable<string | number | undefined>;
+    registerTab: (id: string | number, title: string, open: boolean) => string | number;
+  }>("tabs");
+
   // Generate unique ID - uses value prop or generates random ID once
   const generatedId = `tab-${Math.random().toString(36).substring(2, 9)}`;
   let tabId = $derived(value ?? generatedId);
-
-  onMount(() => {
-    registerTab(tabId, title, open);
-  });
-
-  let isActive = $derived($activeTab === tabId);
-
-  function handleClick() {
-    onclick?.();
-  }
-</script>
-
-{#if isActive}
-  <div class={className} role="tabpanel" onclick={handleClick} {...restProps}>
-    {#if children}{@render children()}{/if}
-  </div>
-{/if}
+
+  onMount(() => {
+    registerTab(tabId, title, open);
+  });
+
+  let isActive = $derived($activeTab === tabId);
+
+  function handleClick() {
+    onclick?.();
+  }
+</script>
+
+{#if isActive}
+  <div class={className} role="tabpanel" onclick={handleClick} {...restProps}>
+    {#if children}{@render children()}{/if}
+  </div>
+{/if}

package/dist/primitives/Tabs/Tabs.stories.svelte

@@ -1,112 +1,112 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Tabs from './Tabs.svelte';
-  import TabItem from './TabItem.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Tabs',
-    component: Tabs,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Tabbed content navigation component. Use TabItem children for each tab panel.',
-        },
-      },
-    },
-  });
-
-  let activeTab = $state(0);
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <Tabs>
-      <TabItem title="Profile">
-        <div class="p-4">
-          <h3 class="font-medium mb-2">Profile Settings</h3>
-          <p class="text-gray-600">Manage your profile information and preferences.</p>
-        </div>
-      </TabItem>
-      <TabItem title="Account">
-        <div class="p-4">
-          <h3 class="font-medium mb-2">Account Settings</h3>
-          <p class="text-gray-600">Manage your account security and billing.</p>
-        </div>
-      </TabItem>
-      <TabItem title="Notifications">
-        <div class="p-4">
-          <h3 class="font-medium mb-2">Notification Settings</h3>
-          <p class="text-gray-600">Configure how you receive notifications.</p>
-        </div>
-      </TabItem>
-    </Tabs>
-  {/snippet}
-</Story>
-
-<Story name="Controlled">
-  {#snippet template()}
-    <div>
-      <p class="text-sm text-gray-500 mb-4">Active tab: {activeTab}</p>
-      <Tabs bind:activeTab={activeTab}>
-        <TabItem title="Tab 1">
-          <div class="p-4">Content for Tab 1</div>
-        </TabItem>
-        <TabItem title="Tab 2">
-          <div class="p-4">Content for Tab 2</div>
-        </TabItem>
-        <TabItem title="Tab 3">
-          <div class="p-4">Content for Tab 3</div>
-        </TabItem>
-      </Tabs>
-      <div class="mt-4 flex gap-2">
-        <button
-          class="px-3 py-1 bg-gray-200 rounded text-sm"
-          onclick={() => activeTab = 0}
-        >Go to Tab 1</button>
-        <button
-          class="px-3 py-1 bg-gray-200 rounded text-sm"
-          onclick={() => activeTab = 2}
-        >Go to Tab 3</button>
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Icons">
-  {#snippet template()}
-    <Tabs>
-      <TabItem title="🏠 Home">
-        <div class="p-4">Home tab content</div>
-      </TabItem>
-      <TabItem title="⚙️ Settings">
-        <div class="p-4">Settings tab content</div>
-      </TabItem>
-      <TabItem title="👤 Profile">
-        <div class="p-4">Profile tab content</div>
-      </TabItem>
-    </Tabs>
-  {/snippet}
-</Story>
-
-<Story name="Many Tabs">
-  {#snippet template()}
-    <Tabs>
-      <TabItem title="Overview">
-        <div class="p-4">Overview content</div>
-      </TabItem>
-      <TabItem title="Analytics">
-        <div class="p-4">Analytics content</div>
-      </TabItem>
-      <TabItem title="Reports">
-        <div class="p-4">Reports content</div>
-      </TabItem>
-      <TabItem title="Notifications">
-        <div class="p-4">Notifications content</div>
-      </TabItem>
-      <TabItem title="Settings">
-        <div class="p-4">Settings content</div>
-      </TabItem>
-    </Tabs>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Tabs from './Tabs.svelte';
+  import TabItem from './TabItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Tabbed content navigation component. Use TabItem children for each tab panel.',
+        },
+      },
+    },
+  });
+
+  let activeTab = $state(0);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="Profile">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Profile Settings</h3>
+          <p class="text-gray-600">Manage your profile information and preferences.</p>
+        </div>
+      </TabItem>
+      <TabItem title="Account">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Account Settings</h3>
+          <p class="text-gray-600">Manage your account security and billing.</p>
+        </div>
+      </TabItem>
+      <TabItem title="Notifications">
+        <div class="p-4">
+          <h3 class="font-medium mb-2">Notification Settings</h3>
+          <p class="text-gray-600">Configure how you receive notifications.</p>
+        </div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>
+
+<Story name="Controlled">
+  {#snippet template()}
+    <div>
+      <p class="text-sm text-gray-500 mb-4">Active tab: {activeTab}</p>
+      <Tabs bind:activeTab={activeTab}>
+        <TabItem title="Tab 1">
+          <div class="p-4">Content for Tab 1</div>
+        </TabItem>
+        <TabItem title="Tab 2">
+          <div class="p-4">Content for Tab 2</div>
+        </TabItem>
+        <TabItem title="Tab 3">
+          <div class="p-4">Content for Tab 3</div>
+        </TabItem>
+      </Tabs>
+      <div class="mt-4 flex gap-2">
+        <button
+          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          onclick={() => activeTab = 0}
+        >Go to Tab 1</button>
+        <button
+          class="px-3 py-1 bg-gray-200 rounded text-sm"
+          onclick={() => activeTab = 2}
+        >Go to Tab 3</button>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Icons">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="🏠 Home">
+        <div class="p-4">Home tab content</div>
+      </TabItem>
+      <TabItem title="⚙️ Settings">
+        <div class="p-4">Settings tab content</div>
+      </TabItem>
+      <TabItem title="👤 Profile">
+        <div class="p-4">Profile tab content</div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>
+
+<Story name="Many Tabs">
+  {#snippet template()}
+    <Tabs>
+      <TabItem title="Overview">
+        <div class="p-4">Overview content</div>
+      </TabItem>
+      <TabItem title="Analytics">
+        <div class="p-4">Analytics content</div>
+      </TabItem>
+      <TabItem title="Reports">
+        <div class="p-4">Reports content</div>
+      </TabItem>
+      <TabItem title="Notifications">
+        <div class="p-4">Notifications content</div>
+      </TabItem>
+      <TabItem title="Settings">
+        <div class="p-4">Settings content</div>
+      </TabItem>
+    </Tabs>
+  {/snippet}
+</Story>

package/dist/primitives/Tabs/Tabs.svelte

@@ -1,137 +1,137 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-  import { typography } from "../../tokens/typography";
-
-  interface Props {
-    tabStyle?: 'underline' | 'pills' | 'full';
-    contentClass?: string;
-    activeTabValue?: string | number | undefined;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    tabStyle = "underline",
-    contentClass = "",
-    activeTabValue = $bindable(undefined),
-    class: className = "",
-    children,
-    ...restProps
-  }: Props = $props();
-
-  // Create a store for the active tab
-  const activeTab = writable<string | number | undefined>(activeTabValue);
-  const tabItems = writable<Array<{ id: string | number; title: string }>>([]);
-
-  // Track the last synced value to prevent infinite loops
-  let lastSyncedValue: string | number | undefined = activeTabValue;
-
-  // Keep activeTabValue in sync with store (external prop -> store)
-  $effect(() => {
-    if (activeTabValue !== undefined && activeTabValue !== lastSyncedValue) {
-      lastSyncedValue = activeTabValue;
-      activeTab.set(activeTabValue);
-    }
-  });
-
-  // Keep store in sync with activeTabValue (store -> external prop)
-  $effect(() => {
-    const unsubscribe = activeTab.subscribe(value => {
-      if (value !== lastSyncedValue) {
-        lastSyncedValue = value;
-        activeTabValue = value;
-      }
-    });
-    return unsubscribe;
-  });
-
-  // Provide context to TabItem children
-  // Note: tabStyle is captured once at initialization - style changes require remount
-  setContext("tabs", {
-    activeTab,
-    tabItems,
-    get tabStyle() { return tabStyle; },
-    registerTab: (id: string | number, title: string, open: boolean) => {
-      tabItems.update(items => {
-        // Avoid duplicates
-        if (items.find(item => item.id === id)) return items;
-        return [...items, { id, title }];
-      });
-      // If this tab has open prop and no active tab set, make it active
-      let currentActive: string | number | undefined;
-      activeTab.subscribe(v => currentActive = v)();
-      if (open && currentActive === undefined) {
-        activeTab.set(id);
-      }
-      return id;
-    },
-    setActiveTab: (id: string | number) => {
-      activeTab.set(id);
-    }
-  });
-
-  // Ensure first tab is selected if none selected
-  $effect(() => {
-    const items = $tabItems;
-    const active = $activeTab;
-    if (items.length > 0 && active === undefined) {
-      activeTab.set(items[0].id);
-    }
-  });
-
-  // Tab list classes by style
-  const tabListClasses = {
-    underline: `flex flex-wrap -mb-px ${typography.sm} font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none`,
-    pills: `flex flex-wrap ${typography.smMuted} font-medium text-center gap-2`,
-    full: `flex flex-wrap ${typography.smMuted} font-medium text-center divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden`
-  };
-
-  // Tab button classes by style
-  function getTabClasses(isActive: boolean) {
-    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-hidden";
-
-    switch (tabStyle) {
-      case 'underline':
-        return isActive
-          ? `${base} p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500`
-          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300`;
-      case 'pills':
-        return isActive
-          ? `${base} px-4 py-3 text-white bg-blue-600 rounded-lg active`
-          : `${base} px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white`;
-      case 'full':
-        return isActive
-          ? `${base} w-full p-4 text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white`
-          : `${base} w-full p-4 bg-white hover:text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700`;
-      default:
-        return base;
-    }
-  }
-
-  let tabListClass = $derived(tabListClasses[tabStyle] || tabListClasses.underline);
-</script>
-
-<div class="flex flex-col {className}" {...restProps}>
-  <ul class="{tabListClass}" role="tablist">
-    {#each $tabItems as tab (tab.id)}
-      <li class={tabStyle === 'underline' ? 'me-2' : ''} role="presentation">
-        <button
-          type="button"
-          role="tab"
-          class={getTabClasses($activeTab === tab.id)}
-          aria-selected={$activeTab === tab.id}
-          tabindex={$activeTab === tab.id ? 0 : -1}
-          onclick={() => activeTab.set(tab.id)}
-        >
-          {tab.title}
-        </button>
-      </li>
-    {/each}
-  </ul>
-  <div class="pt-4 {contentClass}">
-    {#if children}{@render children()}{/if}
-  </div>
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { typography } from "../../tokens/typography";
+
+  interface Props {
+    tabStyle?: 'underline' | 'pills' | 'full';
+    contentClass?: string;
+    activeTabValue?: string | number | undefined;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    tabStyle = "underline",
+    contentClass = "",
+    activeTabValue = $bindable(undefined),
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Create a store for the active tab
+  const activeTab = writable<string | number | undefined>(activeTabValue);
+  const tabItems = writable<Array<{ id: string | number; title: string }>>([]);
+
+  // Track the last synced value to prevent infinite loops
+  let lastSyncedValue: string | number | undefined = activeTabValue;
+
+  // Keep activeTabValue in sync with store (external prop -> store)
+  $effect(() => {
+    if (activeTabValue !== undefined && activeTabValue !== lastSyncedValue) {
+      lastSyncedValue = activeTabValue;
+      activeTab.set(activeTabValue);
+    }
+  });
+
+  // Keep store in sync with activeTabValue (store -> external prop)
+  $effect(() => {
+    const unsubscribe = activeTab.subscribe(value => {
+      if (value !== lastSyncedValue) {
+        lastSyncedValue = value;
+        activeTabValue = value;
+      }
+    });
+    return unsubscribe;
+  });
+
+  // Provide context to TabItem children
+  // Note: tabStyle is captured once at initialization - style changes require remount
+  setContext("tabs", {
+    activeTab,
+    tabItems,
+    get tabStyle() { return tabStyle; },
+    registerTab: (id: string | number, title: string, open: boolean) => {
+      tabItems.update(items => {
+        // Avoid duplicates
+        if (items.find(item => item.id === id)) return items;
+        return [...items, { id, title }];
+      });
+      // If this tab has open prop and no active tab set, make it active
+      let currentActive: string | number | undefined;
+      activeTab.subscribe(v => currentActive = v)();
+      if (open && currentActive === undefined) {
+        activeTab.set(id);
+      }
+      return id;
+    },
+    setActiveTab: (id: string | number) => {
+      activeTab.set(id);
+    }
+  });
+
+  // Ensure first tab is selected if none selected
+  $effect(() => {
+    const items = $tabItems;
+    const active = $activeTab;
+    if (items.length > 0 && active === undefined) {
+      activeTab.set(items[0].id);
+    }
+  });
+
+  // Tab list classes by style
+  const tabListClasses = {
+    underline: `flex flex-wrap -mb-px ${typography.sm} font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none`,
+    pills: `flex flex-wrap ${typography.smMuted} font-medium text-center gap-2`,
+    full: `flex flex-wrap ${typography.smMuted} font-medium text-center divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden`
+  };
+
+  // Tab button classes by style
+  function getTabClasses(isActive: boolean) {
+    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-hidden";
+
+    switch (tabStyle) {
+      case 'underline':
+        return isActive
+          ? `${base} p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500`
+          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300`;
+      case 'pills':
+        return isActive
+          ? `${base} px-4 py-3 text-white bg-blue-600 rounded-lg active`
+          : `${base} px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white`;
+      case 'full':
+        return isActive
+          ? `${base} w-full p-4 text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white`
+          : `${base} w-full p-4 bg-white hover:text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700`;
+      default:
+        return base;
+    }
+  }
+
+  let tabListClass = $derived(tabListClasses[tabStyle] || tabListClasses.underline);
+</script>
+
+<div class="flex flex-col {className}" {...restProps}>
+  <ul class="{tabListClass}" role="tablist">
+    {#each $tabItems as tab (tab.id)}
+      <li class={tabStyle === 'underline' ? 'me-2' : ''} role="presentation">
+        <button
+          type="button"
+          role="tab"
+          class={getTabClasses($activeTab === tab.id)}
+          aria-selected={$activeTab === tab.id}
+          tabindex={$activeTab === tab.id ? 0 : -1}
+          onclick={() => activeTab.set(tab.id)}
+        >
+          {tab.title}
+        </button>
+      </li>
+    {/each}
+  </ul>
+  <div class="pt-4 {contentClass}">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>