@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/primitives/Tabs/Tabs.spec.js

@@ -0,0 +1,295 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import Tabs from './Tabs.svelte';
+import TabsWithItems from './TabsWithItems.test.svelte';
+
+describe('Tabs Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('div.flex.flex-col')).toBeInTheDocument();
+  });
+
+  test('renders a tablist ul', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('ul[role="tablist"]')).toBeInTheDocument();
+  });
+
+  test('renders content area with pt-4 padding', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('.pt-4')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(Tabs, { props: { class: 'custom-tabs' } });
+    const wrapper = container.querySelector('div.flex.flex-col');
+    expect(wrapper).toHaveClass('custom-tabs');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(Tabs, { props: { 'data-testid': 'my-tabs' } });
+    const wrapper = container.querySelector('[data-testid="my-tabs"]');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('applies contentClass to content div', () => {
+    const { container } = render(Tabs, { props: { contentClass: 'custom-content' } });
+    expect(container.querySelector('.custom-content')).toBeInTheDocument();
+  });
+});
+
+describe('Tabs Styles - Underline', () => {
+  test('underline style has border-b class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('border-b');
+    expect(tablist).toHaveClass('border-gray-200');
+  });
+
+  test('underline style has -mb-px class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('-mb-px');
+  });
+
+  test('underline is default style', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('border-b');
+  });
+});
+
+describe('Tabs Styles - Pills', () => {
+  test('pills style has gap-2 class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'pills' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('gap-2');
+  });
+
+  test('pills style does not have border-b', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'pills' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).not.toHaveClass('border-b');
+  });
+});
+
+describe('Tabs Styles - Full', () => {
+  test('full style has divide-x class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('divide-x');
+    expect(tablist).toHaveClass('divide-gray-200');
+  });
+
+  test('full style has rounded-lg class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('rounded-lg');
+  });
+
+  test('full style has shadow class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('shadow');
+  });
+
+  test('full style has overflow-hidden', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('overflow-hidden');
+  });
+});
+
+describe('Tabs Common Styling', () => {
+  test('tablist has flex class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('flex');
+  });
+
+  test('tablist has flex-wrap class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('flex-wrap');
+  });
+
+  test('tablist has text-center class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('text-center');
+  });
+
+  test('tablist has font-medium class', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('font-medium');
+  });
+});
+
+describe('Tabs Props', () => {
+  test('tabStyle defaults to underline', () => {
+    const { container } = render(Tabs);
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('border-b');
+  });
+
+  test('contentClass is applied to content div', () => {
+    const { container } = render(Tabs, { props: { contentClass: 'my-content-class' } });
+    expect(container.querySelector('.my-content-class')).toBeInTheDocument();
+  });
+
+  test('activeTabValue can be set', () => {
+    const { container } = render(Tabs, { props: { activeTabValue: 'tab1' } });
+    // Component accepts the prop without error
+    expect(container.querySelector('div.flex.flex-col')).toBeInTheDocument();
+  });
+});
+
+describe('Tabs Accessibility', () => {
+  test('tablist has role="tablist"', () => {
+    const { container } = render(Tabs);
+    expect(container.querySelector('[role="tablist"]')).toBeInTheDocument();
+  });
+});
+
+describe('Tabs Dark Mode', () => {
+  test('underline has dark mode border class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'underline' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('dark:border-gray-700');
+  });
+
+  test('full style has dark mode divide class', () => {
+    const { container } = render(Tabs, { props: { tabStyle: 'full' } });
+    const tablist = container.querySelector('ul[role="tablist"]');
+    expect(tablist).toHaveClass('dark:divide-gray-700');
+  });
+});
+
+describe('Tabs with TabItems - registerTab functionality', () => {
+  test('auto-selects first tab when no active tab is set', async () => {
+    const { container } = render(TabsWithItems);
+
+    // Wait for tabs to register and render
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // First tab content should be visible
+    expect(screen.getByTestId('tab1-content')).toBeInTheDocument();
+
+    // First tab button should be active
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[0]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('respects open prop on TabItem', async () => {
+    const { container } = render(TabsWithItems, { props: { withOpen: true } });
+
+    // Wait for tabs to register
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // First tab with open=true should be active
+    expect(screen.getByTestId('tab1-content')).toBeInTheDocument();
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[0]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('registerTab prevents duplicate tab registration', async () => {
+    const { container } = render(TabsWithItems);
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Should only have 3 tabs, not duplicates
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons).toHaveLength(3);
+  });
+
+  test('can switch between tabs', async () => {
+    const { container } = render(TabsWithItems);
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Click second tab
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    buttons[1].click();
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Second tab content should be visible
+    expect(screen.getByTestId('tab2-content')).toBeInTheDocument();
+    expect(buttons[1]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('activeTabValue can be set to specific tab', async () => {
+    const { container } = render(TabsWithItems, {
+      props: {
+        activeTabValue: 'tab2'
+      }
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Second tab should be active
+    expect(screen.getByTestId('tab2-content')).toBeInTheDocument();
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[1]).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('renders tab titles correctly', async () => {
+    const { container } = render(TabsWithItems);
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+    expect(buttons[0]).toHaveTextContent('First Tab');
+    expect(buttons[1]).toHaveTextContent('Second Tab');
+    expect(buttons[2]).toHaveTextContent('Third Tab');
+  });
+
+  test('pills style applies correct active classes', async () => {
+    const { container } = render(TabsWithItems, { props: { tabStyle: 'pills' } });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+
+    // Active tab should have pills active classes
+    expect(buttons[0]).toHaveClass('bg-blue-600');
+    expect(buttons[0]).toHaveClass('text-white');
+    expect(buttons[0]).toHaveClass('rounded-lg');
+
+    // Inactive tabs should have pills inactive classes
+    expect(buttons[1]).toHaveClass('rounded-lg');
+    expect(buttons[1]).not.toHaveClass('bg-blue-600');
+  });
+
+  test('pills style inactive tab hover state', async () => {
+    const { container } = render(TabsWithItems, { props: { tabStyle: 'pills' } });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+
+    // Check that inactive button has hover classes in its className
+    const inactiveButton = buttons[1];
+    expect(inactiveButton.className).toContain('hover:text-gray-900');
+    expect(inactiveButton.className).toContain('hover:bg-gray-100');
+  });
+
+  test('full style applies correct classes', async () => {
+    const { container } = render(TabsWithItems, { props: { tabStyle: 'full' } });
+
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    const buttons = container.querySelectorAll('button[role="tab"]');
+
+    // Active tab should have full active classes
+    expect(buttons[0]).toHaveClass('w-full');
+    expect(buttons[0]).toHaveClass('bg-gray-100');
+    expect(buttons[0]).toHaveClass('text-gray-900');
+
+    // Inactive tabs should have full inactive classes
+    expect(buttons[1]).toHaveClass('w-full');
+    expect(buttons[1]).toHaveClass('bg-white');
+  });
+});

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

@@ -3,125 +3,141 @@ import { render, fireEvent } from '@testing-library/svelte';
 import Toggle from './Toggle.svelte';
 
 describe('Toggle Component', () => {
-  it('renders a toggle button', () => {
+  it('renders a toggle with label element', () => {
     const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button).toBeTruthy();
-    expect(button.getAttribute('role')).toBe('switch');
+    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 button = container.querySelector('button');
-    expect(button.getAttribute('aria-checked')).toBe('false');
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl.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');
+    const { container } = render(Toggle, { checked: true });
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl.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);
+  it('checkbox reflects checked state', () => {
+    const { container } = render(Toggle, { checked: true });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.checked).toBe(true);
+  });
 
-    expect(onchange).toHaveBeenCalledWith({ checked: true });
-    expect(button.getAttribute('aria-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 from checked to unchecked on click', async () => {
+  it('toggles checked state on change', async () => {
     const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { checked: true, onchange } });
-    const button = container.querySelector('button');
+    const { container } = render(Toggle, { onchange });
+    const input = container.querySelector('input[type="checkbox"]');
 
-    await fireEvent.click(button);
+    await fireEvent.click(input);
 
-    expect(onchange).toHaveBeenCalledWith({ checked: false });
-    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(onchange).toHaveBeenCalledWith({ checked: true });
   });
 
-  it('does not toggle when disabled', async () => {
+  it('toggles from checked to unchecked', async () => {
     const onchange = vi.fn();
-    const { container } = render(Toggle, { props: { disabled: true, onchange } });
-    const button = container.querySelector('button');
+    const { container } = render(Toggle, { checked: true, onchange });
+    const input = container.querySelector('input[type="checkbox"]');
 
-    await fireEvent.click(button);
+    await fireEvent.click(input);
 
-    expect(onchange).not.toHaveBeenCalled();
-    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(onchange).toHaveBeenCalledWith({ checked: 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('has disabled attribute when disabled', () => {
+    const { container } = render(Toggle, { disabled: true });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input.disabled).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 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 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 pointer cursor when not disabled', () => {
+    const { container } = render(Toggle, { disabled: false });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('cursor-pointer');
   });
 
-  it('has toggle-thumb element', () => {
+  it('has switch element with rounded-full class', () => {
     const { container } = render(Toggle);
-    const thumb = container.querySelector('.toggle-thumb');
-    expect(thumb).toBeTruthy();
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('rounded-full');
   });
 
-  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('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('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('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('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('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('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');
+  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');
+  });
 
-    await fireEvent.keyDown(button, { key: 'Enter' });
+  it('accepts custom class', () => {
+    const { container } = render(Toggle, { class: 'custom-class' });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('custom-class');
+  });
 
-    expect(onchange).not.toHaveBeenCalled();
+  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 type="button" attribute', () => {
+  it('has blue background when checked', () => {
     const { container } = render(Toggle);
-    const button = container.querySelector('button');
-    expect(button.getAttribute('type')).toBe('button');
+    const switchEl = container.querySelector('[role="switch"]');
+    expect(switchEl).toHaveClass('peer-checked:bg-blue-600');
   });
 });

package/dist/primitives/Typography/Typography.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Typography.spec.d.ts.map

package/dist/primitives/Typography/Typography.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Typography/Typography.spec.js"],"names":[],"mappings":""}