@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/recipes/fields/ToggleField.spec.js

@@ -0,0 +1,153 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ToggleField from './ToggleField.svelte';
+
+describe('ToggleField Component', () => {
+  test('renders a wrapper div', () => {
+    const { container } = render(ToggleField);
+    expect(container.querySelector('div')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ToggleField, { props: { class: 'custom-toggle-field' } });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-toggle-field');
+  });
+
+  test('renders a toggle switch', () => {
+    const { container } = render(ToggleField);
+    const toggle = container.querySelector('[role="switch"]');
+    expect(toggle).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Label', () => {
+  test('no label renders no label text', () => {
+    render(ToggleField);
+    expect(screen.queryByText(/test/i)).not.toBeInTheDocument();
+  });
+
+  test('label prop displays label text', () => {
+    render(ToggleField, { props: { label: 'Enable notifications' } });
+    expect(screen.getByText('Enable notifications')).toBeInTheDocument();
+  });
+
+  test('error state applies error styling to label', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test', error: 'Required' } });
+    const labelSpan = container.querySelector('span');
+    expect(labelSpan).toHaveClass('text-red-500');
+  });
+});
+
+describe('ToggleField Description', () => {
+  test('no description renders no description text', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const spans = container.querySelectorAll('span');
+    expect(spans.length).toBe(1); // Just the label
+  });
+
+  test('description prop displays description text', () => {
+    render(ToggleField, { props: { description: 'Get daily updates' } });
+    expect(screen.getByText('Get daily updates')).toBeInTheDocument();
+  });
+
+  test('label and description together', () => {
+    render(ToggleField, { props: { label: 'Notifications', description: 'Stay informed' } });
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+    expect(screen.getByText('Stay informed')).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Error', () => {
+  test('no error shows no validation message', () => {
+    const { container } = render(ToggleField);
+    const errorDiv = container.querySelector('.text-red-600');
+    expect(errorDiv).not.toBeInTheDocument();
+  });
+
+  test('error prop shows validation message', () => {
+    render(ToggleField, { props: { error: 'Please enable this option' } });
+    expect(screen.getByText('Please enable this option')).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Disabled', () => {
+  test('disabled prop disables toggle', () => {
+    const { container } = render(ToggleField, { props: { disabled: true } });
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).toBeDisabled();
+  });
+
+  test('not disabled by default', () => {
+    const { container } = render(ToggleField);
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).not.toBeDisabled();
+  });
+});
+
+describe('ToggleField Size', () => {
+  test('default size is md', () => {
+    const { container } = render(ToggleField);
+    expect(container.querySelector('[role="switch"]')).toBeInTheDocument();
+  });
+
+  test('size sm works', () => {
+    const { container } = render(ToggleField, { props: { size: 'sm' } });
+    expect(container.querySelector('[role="switch"]')).toBeInTheDocument();
+  });
+
+  test('size lg works', () => {
+    const { container } = render(ToggleField, { props: { size: 'lg' } });
+    expect(container.querySelector('[role="switch"]')).toBeInTheDocument();
+  });
+});
+
+describe('ToggleField Layout', () => {
+  test('has flex container for label and toggle', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toBeInTheDocument();
+  });
+
+  test('has justify-between', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toHaveClass('justify-between');
+  });
+
+  test('has gap-4', () => {
+    const { container } = render(ToggleField, { props: { label: 'Test' } });
+    const flexDiv = container.querySelector('.flex.items-start');
+    expect(flexDiv).toHaveClass('gap-4');
+  });
+});
+
+describe('ToggleField Combinations', () => {
+  test('label and description with toggle', () => {
+    render(ToggleField, {
+      props: { label: 'Dark mode', description: 'Use dark color scheme' }
+    });
+    expect(screen.getByText('Dark mode')).toBeInTheDocument();
+    expect(screen.getByText('Use dark color scheme')).toBeInTheDocument();
+  });
+
+  test('all props together', () => {
+    const { container } = render(ToggleField, {
+      props: {
+        label: 'Settings',
+        description: 'Configure options',
+        error: 'Please select',
+        disabled: true,
+        size: 'lg',
+        class: 'custom-class'
+      }
+    });
+    const wrapper = container.firstElementChild;
+    expect(wrapper).toHaveClass('custom-class');
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    expect(screen.getByText('Configure options')).toBeInTheDocument();
+    expect(screen.getByText('Please select')).toBeInTheDocument();
+    const input = container.querySelector('input[type="checkbox"]');
+    expect(input).toBeDisabled();
+  });
+});

package/dist/recipes/inputs/MultiSelect.spec.js

@@ -117,16 +117,17 @@ describe("MultiSelect Component Tests", () => {
   });
 
   test("Dispatches change event on selection", async () => {
-    const { user, component } = setupTest();
     const changeSpy = vi.fn();
-    component.$on("change", changeSpy);
+    const { user } = setupTest({
+      onchange: changeSpy,
+    });
 
     const trigger = screen.getByRole("button", { name: /select options/i });
     await user.click(trigger);
     await user.click(screen.getByText("Option 2"));
 
     expect(changeSpy).toHaveBeenCalled();
-    expect(changeSpy.mock.calls[0][0].detail.value).toContain("opt2");
+    expect(changeSpy.mock.calls[0][0].value).toContain("opt2");
   });
 
   test("Shows required indicator when required", () => {

package/dist/recipes/inputs/MultiSelect.svelte

@@ -18,6 +18,7 @@
     id = "",
     /** @type {'sm' | 'md' | 'lg'} */
     size = "md",
+    animateFocus = true, // Show focus animation
     // Callbacks
     onchange,
   } = $props();
@@ -27,7 +28,12 @@
   let dropdownElement = $state();
   let focusedIndex = $state(-1);
 
-  // Ensure value is always an array
+  // Ensure value is always an array (initialize immediately)
+  if (!Array.isArray(value)) {
+    value = [];
+  }
+
+  // Keep value as array
   $effect(() => {
     if (!Array.isArray(value)) {
       value = [];
@@ -159,7 +165,8 @@
       {name}
       class="flex items-center justify-between gap-2 w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer text-left transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
         {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 focus:border-blue-500 dark:focus:border-blue-500'}
-        {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+        {disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        {animateFocus ? 'multiselect-animate-focus' : ''}"
       {disabled}
       aria-haspopup="listbox"
       aria-expanded={isOpen}
@@ -231,7 +238,7 @@
               <input
                 type="checkbox"
                 checked={value.includes(item.value)}
-                class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
+                class="multiselect-checkbox w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500 {value.includes(item.value) ? 'multiselect-checkbox-checked' : ''}"
                 tabindex="-1"
                 onclick={(e) => { e.stopPropagation(); toggleItem(item); }}
               />

package/dist/recipes/inputs/MultiSelect.svelte.d.ts

@@ -17,6 +17,7 @@ declare const MultiSelect: import("svelte").Component<{
     name?: string;
     id?: string;
     size?: string;
+    animateFocus?: boolean;
     onchange: any;
 }, {}, "value">;
 type $$ComponentProps = {
@@ -33,6 +34,7 @@ type $$ComponentProps = {
     name?: string;
     id?: string;
     size?: string;
+    animateFocus?: boolean;
     onchange: any;
 };
 //# sourceMappingURL=MultiSelect.svelte.d.ts.map

package/dist/recipes/inputs/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;AAwNA;YA7M6B,GAAG,EAAE;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;gBAAc,OAAO;qBAAmB,OAAO;mBAAiB,OAAO;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;cAAY,GAAG;gBA6MtN;wBA7MvC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/inputs/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;AA+NA;YApN6B,GAAG,EAAE;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;gBAAc,OAAO;qBAAmB,OAAO;mBAAiB,OAAO;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;mBAAiB,OAAO;cAAY,GAAG;gBAoN9O;wBApNvC;IAAE,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE"}

package/dist/recipes/inputs/OTPInput.spec.js

@@ -50,33 +50,37 @@ describe('OTPInput Component', () => {
   });
 
   it('accepts digit input', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
     let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
+    const { container } = render(OTPInput, {
+      props: {
+        onchange: (e) => {
+          changeEvent = e;
+        },
+      },
     });
+    const inputs = container.querySelectorAll('input');
 
     await fireEvent.input(inputs[0], { target: { value: '5' } });
 
     expect(changeEvent).toBeTruthy();
-    expect(changeEvent.detail.value[0]).toBe('5');
+    expect(changeEvent.value[0]).toBe('5');
   });
 
   it('rejects non-digit input', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
     let changeEvent = null;
-    component.$on('change', (e) => {
-      changeEvent = e;
+    const { container } = render(OTPInput, {
+      props: {
+        onchange: (e) => {
+          changeEvent = e;
+        },
+      },
     });
+    const inputs = container.querySelectorAll('input');
 
     await fireEvent.input(inputs[0], { target: { value: 'a' } });
 
     // Change event should not include the non-digit
-    expect(changeEvent?.detail?.value[0] || '').toBe('');
+    expect(changeEvent?.value[0] || '').toBe('');
   });
 
   it('auto-advances to next input on valid digit', async () => {
@@ -91,13 +95,15 @@ describe('OTPInput Component', () => {
   });
 
   it('dispatches complete event when all digits entered', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
     let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
     });
+    const inputs = container.querySelectorAll('input');
 
     // Fill all inputs
     for (let i = 0; i < 6; i++) {
@@ -105,7 +111,7 @@ describe('OTPInput Component', () => {
     }
 
     expect(completeEvent).toBeTruthy();
-    expect(completeEvent.detail.code).toBe('123456');
+    expect(completeEvent.code).toBe('123456');
   });
 
   it('moves focus back on backspace when current input is empty', async () => {
@@ -139,13 +145,15 @@ describe('OTPInput Component', () => {
 
   it('handles paste of complete code', async () => {
     vi.useFakeTimers();
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
     let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
     });
+    const inputs = container.querySelectorAll('input');
 
     await fireEvent.paste(inputs[0], {
       clipboardData: { getData: () => '123456' },
@@ -154,18 +162,20 @@ describe('OTPInput Component', () => {
     vi.advanceTimersByTime(150);
 
     expect(completeEvent).toBeTruthy();
-    expect(completeEvent.detail.code).toBe('123456');
+    expect(completeEvent.code).toBe('123456');
     vi.useRealTimers();
   });
 
   it('ignores paste if code length does not match', async () => {
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
     let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
     });
+    const inputs = container.querySelectorAll('input');
 
     await fireEvent.paste(inputs[0], {
       clipboardData: { getData: () => '12345' }, // Only 5 digits
@@ -176,13 +186,15 @@ describe('OTPInput Component', () => {
 
   it('strips non-digits from pasted content', async () => {
     vi.useFakeTimers();
-    const { container, component } = render(OTPInput);
-    const inputs = container.querySelectorAll('input');
-
     let completeEvent = null;
-    component.$on('complete', (e) => {
-      completeEvent = e;
+    const { container } = render(OTPInput, {
+      props: {
+        oncomplete: (e) => {
+          completeEvent = e;
+        },
+      },
     });
+    const inputs = container.querySelectorAll('input');
 
     await fireEvent.paste(inputs[0], {
       clipboardData: { getData: () => '1-2-3-4-5-6' }, // Code with dashes
@@ -191,7 +203,7 @@ describe('OTPInput Component', () => {
     vi.advanceTimersByTime(150);
 
     expect(completeEvent).toBeTruthy();
-    expect(completeEvent.detail.code).toBe('123456');
+    expect(completeEvent.code).toBe('123456');
     vi.useRealTimers();
   });
 
@@ -217,13 +229,14 @@ describe('OTPInput Component', () => {
     expect(instructions.classList.contains('sr-only')).toBe(true);
   });
 
-  it('initializes value array when length changes', () => {
-    const { container, component } = render(OTPInput, { props: { length: 4 } });
+  it('initializes value array when length changes', async () => {
+    const { container, rerender } = render(OTPInput, { props: { length: 4 } });
     let inputs = container.querySelectorAll('input');
     expect(inputs.length).toBe(4);
 
-    component.$set({ length: 8 });
-    // Trigger reactivity
+    await rerender({ length: 8 });
+    inputs = container.querySelectorAll('input');
+    expect(inputs.length).toBe(8);
   });
 
   it('exposes focus method', () => {

package/dist/recipes/inputs/PasswordInput.spec.d.ts

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

package/dist/recipes/inputs/PasswordInput.spec.d.ts.map

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