@getmicdrop/svelte-components 5.9.6 → 5.10.1

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-none";
-
-    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>

package/dist/primitives/Toggle.spec.js

@@ -1,143 +1,146 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/svelte';
-import Toggle from './Toggle.svelte';
-
-describe('Toggle Component', () => {
-  it('renders a toggle with label element', () => {
-    const { container } = render(Toggle);
-    const label = container.querySelector('label');
-    expect(label).toBeTruthy();
-    expect(label).toHaveClass('inline-flex');
-    expect(label).toHaveClass('items-center');
-  });
-
-  it('renders a hidden checkbox input', () => {
-    const { container } = render(Toggle);
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input).toBeTruthy();
-    expect(input).toHaveClass('sr-only');
-    expect(input).toHaveClass('peer');
-  });
-
-  it('renders switch element with role switch', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toBeTruthy();
-  });
-
-  it('has aria-checked false by default', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('has aria-checked true when checked', () => {
-    const { container } = render(Toggle, { checked: true });
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('checkbox reflects checked state', () => {
-    const { container } = render(Toggle, { checked: true });
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input.checked).toBe(true);
-  });
-
-  it('checkbox reflects unchecked state', () => {
-    const { container } = render(Toggle, { checked: false });
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input.checked).toBe(false);
-  });
-
-  it('toggles checked state on change', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { onchange });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    await fireEvent.click(input);
-
-    expect(onchange).toHaveBeenCalledWith({ checked: true });
-  });
-
-  it('toggles from checked to unchecked', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { checked: true, onchange });
-    const input = container.querySelector('input[type="checkbox"]');
-
-    await fireEvent.click(input);
-
-    expect(onchange).toHaveBeenCalledWith({ checked: false });
-  });
-
-  it('has disabled attribute when disabled', () => {
-    const { container } = render(Toggle, { disabled: true });
-    const input = container.querySelector('input[type="checkbox"]');
-    expect(input.disabled).toBe(true);
-  });
-
-  it('has disabled styling on label when disabled', () => {
-    const { container } = render(Toggle, { disabled: true });
-    const label = container.querySelector('label');
-    expect(label).toHaveClass('cursor-not-allowed');
-    expect(label).toHaveClass('opacity-50');
-  });
-
-  it('has pointer cursor when not disabled', () => {
-    const { container } = render(Toggle, { disabled: false });
-    const label = container.querySelector('label');
-    expect(label).toHaveClass('cursor-pointer');
-  });
-
-  it('has switch element with rounded-full class', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('rounded-full');
-  });
-
-  it('has default md size track dimensions', () => {
-    const { container } = render(Toggle, { size: 'md' });
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('w-11');
-    expect(switchEl).toHaveClass('h-6');
-  });
-
-  it('has sm size track dimensions', () => {
-    const { container } = render(Toggle, { size: 'sm' });
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('w-9');
-    expect(switchEl).toHaveClass('h-5');
-  });
-
-  it('has lg size track dimensions', () => {
-    const { container } = render(Toggle, { size: 'lg' });
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('w-14');
-    expect(switchEl).toHaveClass('h-7');
-  });
-
-  it('has dark mode classes', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('dark:bg-gray-700');
-    expect(switchEl).toHaveClass('dark:peer-focus:ring-blue-800');
-  });
-
-  it('accepts custom class', () => {
-    const { container } = render(Toggle, { class: 'custom-class' });
-    const label = container.querySelector('label');
-    expect(label).toHaveClass('custom-class');
-  });
-
-  it('has peer focus ring classes', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('peer-focus:ring-4');
-    expect(switchEl).toHaveClass('peer-focus:ring-blue-300');
-  });
-
-  it('has blue background when checked', () => {
-    const { container } = render(Toggle);
-    const switchEl = container.querySelector('[role="switch"]');
-    expect(switchEl).toHaveClass('peer-checked:bg-blue-600');
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import Toggle from './Toggle.svelte';
+
+describe('Toggle Component', () => {
+  it('renders a toggle with label element', () => {
+    const { container } = render(Toggle);
+    const label = container.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label).toHaveClass('inline-flex');
+    expect(label).toHaveClass('items-center');
+  });
+
+  it('renders a hidden checkbox input', () => {
+    const { container } = render(Toggle);
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).toBeTruthy();
+    expect(input).toHaveClass('sr-only');
+    expect(input).toHaveClass('peer');
+  });
+
+  it('renders switch element with role switch', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toBeTruthy();
+  });
+
+  it('has aria-checked false by default', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl.getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('has aria-checked true when checked', () => {
+    const { container } = render(Toggle, { checked: true });
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('checkbox reflects checked state', () => {
+    const { container } = render(Toggle, { checked: true });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.checked).toBe(true);
+  });
+
+  it('checkbox reflects unchecked state', () => {
+    const { container } = render(Toggle, { checked: false });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.checked).toBe(false);
+  });
+
+  it('toggles checked state on change', async () => {
+    const onchange = vi.fn();
+    const { container } = render(Toggle, { onchange });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(onchange).toHaveBeenCalledWith({ checked: true });
+  });
+
+  it('toggles from checked to unchecked', async () => {
+    const onchange = vi.fn();
+    const { container } = render(Toggle, { checked: true, onchange });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(onchange).toHaveBeenCalledWith({ checked: false });
+  });
+
+  it('has disabled attribute when disabled', () => {
+    const { container } = render(Toggle, { disabled: true });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.disabled).toBe(true);
+  });
+
+  it('has disabled styling on label when disabled', () => {
+    const { container } = render(Toggle, { disabled: true });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-not-allowed');
+    expect(label).toHaveClass('opacity-50');
+  });
+
+  it('has pointer cursor when not disabled', () => {
+    const { container } = render(Toggle, { disabled: false });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-pointer');
+  });
+
+  it('has switch element with rounded-full class', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('rounded-full');
+  });
+
+  it('has default md size track dimensions', () => {
+    const { container } = render(Toggle, { size: 'md' });
+    const switchEl = container.querySelector('[role="switch"]');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-md');
+  });
+
+  it('has sm size track dimensions', () => {
+    const { container } = render(Toggle, { size: 'sm' });
+    const switchEl = container.querySelector('[role="switch"]');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-sm');
+  });
+
+  it('has lg size track dimensions', () => {
+    const { container } = render(Toggle, { size: 'lg' });
+    const switchEl = container.querySelector('[role="switch"]');
+    // Uses CSS classes instead of Tailwind for Tailwind v4 compatibility
+    expect(switchEl).toHaveClass('toggle-track');
+    expect(switchEl).toHaveClass('toggle-lg');
+  });
+
+  it('has dark mode classes', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('dark:bg-gray-700');
+    expect(switchEl).toHaveClass('dark:peer-focus:ring-blue-800');
+  });
+
+  it('accepts custom class', () => {
+    const { container } = render(Toggle, { class: 'custom-class' });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-class');
+  });
+
+  it('has peer focus ring classes', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('peer-focus:ring-4');
+    expect(switchEl).toHaveClass('peer-focus:ring-blue-300');
+  });
+
+  it('has blue background when checked', () => {
+    const { container } = render(Toggle);
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('peer-checked:bg-blue-600');
+  });
+});