@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Tabs/Tabs.svelte

@@ -1,129 +1,129 @@
-<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 }>>([]);
-
-  // Keep activeTabValue in sync with store
-  $effect(() => {
-    if (activeTabValue !== undefined) {
-      activeTab.set(activeTabValue);
-    }
-  });
-
-  $effect(() => {
-    const unsubscribe = activeTab.subscribe(value => {
-      activeTabValue = value;
-    });
-    return unsubscribe;
-  });
-
+<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 }>>([]);
+
+  // Keep activeTabValue in sync with store
+  $effect(() => {
+    if (activeTabValue !== undefined) {
+      activeTab.set(activeTabValue);
+    }
+  });
+
+  $effect(() => {
+    const unsubscribe = activeTab.subscribe(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>
+    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>

package/dist/primitives/Tabs/TabsWithItems.test.svelte

@@ -0,0 +1,18 @@
+<script>
+  import Tabs from './Tabs.svelte';
+  import TabItem from './TabItem.svelte';
+
+  let { activeTabValue = $bindable(), tabStyle = 'underline', withOpen = false } = $props();
+</script>
+
+<Tabs bind:activeTabValue {tabStyle}>
+  <TabItem title="First Tab" value="tab1" open={withOpen}>
+    <div data-testid="tab1-content">First Tab Content</div>
+  </TabItem>
+  <TabItem title="Second Tab" value="tab2">
+    <div data-testid="tab2-content">Second Tab Content</div>
+  </TabItem>
+  <TabItem title="Third Tab" value="tab3">
+    <div data-testid="tab3-content">Third Tab Content</div>
+  </TabItem>
+</Tabs>

package/dist/primitives/Tabs/TabsWithItems.test.svelte.d.ts

@@ -0,0 +1,16 @@
+export default TabsWithItems;
+type TabsWithItems = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TabsWithItems: import("svelte").Component<{
+    activeTabValue?: any;
+    tabStyle?: string;
+    withOpen?: boolean;
+}, {}, "activeTabValue">;
+type $$ComponentProps = {
+    activeTabValue?: any;
+    tabStyle?: string;
+    withOpen?: boolean;
+};
+//# sourceMappingURL=TabsWithItems.test.svelte.d.ts.map

package/dist/primitives/Tabs/TabsWithItems.test.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsWithItems.test.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/TabsWithItems.test.svelte.js"],"names":[],"mappings":";;;;;AA2BA;qBAjBsC,GAAG;eAAa,MAAM;eAAa,OAAO;yBAiBpB;wBAjBzC;IAAE,cAAc,CAAC,EAAE,GAAG,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE"}

package/dist/primitives/Toggle.spec.js

@@ -1,127 +1,143 @@
-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 button', () => {
-    const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button).toBeTruthy();
-    expect(button.getAttribute('role')).toBe('switch');
-  });
-
-  it('has aria-checked false by default', () => {
-    const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('has aria-checked true when checked', () => {
-    const { container } = render(Toggle, { props: { checked: true } });
-    const button = container.querySelector('button');
-    expect(button.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('toggles checked state on click', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.click(button);
-
-    expect(onchange).toHaveBeenCalledWith({ checked: true });
-    expect(button.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('toggles from checked to unchecked on click', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { checked: true, onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.click(button);
-
-    expect(onchange).toHaveBeenCalledWith({ checked: false });
-    expect(button.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('does not toggle when disabled', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { disabled: true, onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.click(button);
-
-    expect(onchange).not.toHaveBeenCalled();
-    expect(button.getAttribute('aria-checked')).toBe('false');
-  });
-
-  it('has toggle-checked class when checked', () => {
-    const { container } = render(Toggle, { props: { checked: true } });
-    const button = container.querySelector('button');
-    expect(button.classList.contains('toggle-checked')).toBe(true);
-  });
-
-  it('does not have toggle-checked class when unchecked', () => {
-    const { container } = render(Toggle, { props: { checked: false } });
-    const button = container.querySelector('button');
-    expect(button.classList.contains('toggle-checked')).toBe(false);
-  });
-
-  it('has toggle-disabled class when disabled', () => {
-    const { container } = render(Toggle, { props: { disabled: true } });
-    const button = container.querySelector('button');
-    expect(button.classList.contains('toggle-disabled')).toBe(true);
-  });
-
-  it('has toggle-thumb element', () => {
-    const { container } = render(Toggle);
-    const thumb = container.querySelector('.toggle-thumb');
-    expect(thumb).toBeTruthy();
-  });
-
-  it('toggles on Enter key press', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.keyDown(button, { key: 'Enter' });
-
-    expect(onchange).toHaveBeenCalledWith({ checked: true });
-  });
-
-  it('toggles on Space key press', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.keyDown(button, { key: ' ' });
-
-    expect(onchange).toHaveBeenCalledWith({ checked: true });
-  });
-
-  it('does not toggle on other key press', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.keyDown(button, { key: 'Tab' });
-
-    expect(onchange).not.toHaveBeenCalled();
-  });
-
-  it('does not toggle on keypress when disabled', async () => {
-    const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { disabled: true, onchange } });
-    const button = container.querySelector('button');
-
-    await fireEvent.keyDown(button, { key: 'Enter' });
-
-    expect(onchange).not.toHaveBeenCalled();
-  });
-
-  it('has type="button" attribute', () => {
-    const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button.getAttribute('type')).toBe('button');
-  });
-});
+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');
+  });
+});