@getmicdrop/svelte-components 5.21.0 → 5.21.2

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-border 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-border 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-brand-primary border-b-2 border-brand-primary rounded-t-lg active`
+          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-text-secondary hover:border-stroke-primary`;
+      case 'pills':
+        return isActive
+          ? `${base} px-4 py-3 text-white bg-brand-primary rounded-lg active`
+          : `${base} px-4 py-3 rounded-lg hover:text-text-primary hover:bg-muted`;
+      case 'full':
+        return isActive
+          ? `${base} w-full p-4 text-text-primary bg-muted`
+          : `${base} w-full p-4 bg-card hover:text-text-secondary hover:bg-bg-secondary`;
+      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>