@getmicdrop/svelte-components 5.17.1 → 5.17.4

package/dist/primitives/Toggle.spec.js

@@ -1,6 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, fireEvent } from '@testing-library/svelte';
 import Toggle from './Toggle.svelte';
+import ToggleTestWrapper from './ToggleTestWrapper.svelte';
+
+// Mock the haptic module so we can verify it's called
+vi.mock('$lib/utils/haptic.js', () => ({
+  triggerHaptic: vi.fn(),
+}));
 
 describe('Toggle Component', () => {
   it('renders a toggle with label element', () => {
@@ -144,3 +150,72 @@ describe('Toggle Component', () => {
     expect(switchEl).toHaveClass('peer-checked:bg-blue-600');
   });
 });
+
+describe('Toggle Haptic Feedback (line 40)', () => {
+  it('calls triggerHaptic when haptic=true and not disabled', async () => {
+    const { triggerHaptic } = await import('../utils/haptic.js');
+    triggerHaptic.mockClear();
+
+    const { container } = render(Toggle, { haptic: true, disabled: false });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(triggerHaptic).toHaveBeenCalledWith('selection');
+  });
+
+  it('does not call triggerHaptic when haptic=false', async () => {
+    const { triggerHaptic } = await import('../utils/haptic.js');
+    triggerHaptic.mockClear();
+
+    const { container } = render(Toggle, { haptic: false });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    await fireEvent.click(input);
+
+    expect(triggerHaptic).not.toHaveBeenCalled();
+  });
+
+  it('does not call triggerHaptic when disabled', async () => {
+    const { triggerHaptic } = await import('../utils/haptic.js');
+    triggerHaptic.mockClear();
+
+    const { container } = render(Toggle, { haptic: true, disabled: true });
+    const input = container.querySelector('input[type="checkbox"]');
+
+    // Force-fire change on disabled input
+    await fireEvent.change(input, { target: { checked: true } });
+
+    expect(triggerHaptic).not.toHaveBeenCalled();
+  });
+});
+
+describe('Toggle Children Rendering (line 60)', () => {
+  it('renders children snippet with label text', () => {
+    const { container } = render(ToggleTestWrapper, {
+      showLabel: true,
+      label: 'My Toggle'
+    });
+
+    const span = container.querySelector('span.ms-3');
+    expect(span).toBeInTheDocument();
+    expect(span.textContent).toContain('My Toggle');
+  });
+
+  it('does not render label span when no children provided', () => {
+    const { container } = render(Toggle);
+    const span = container.querySelector('span.ms-3');
+    expect(span).not.toBeInTheDocument();
+  });
+
+  it('renders label span with correct styling', () => {
+    const { container } = render(ToggleTestWrapper, {
+      showLabel: true,
+      label: 'Styled Label'
+    });
+
+    const span = container.querySelector('span.ms-3');
+    expect(span).toHaveClass('text-sm');
+    expect(span).toHaveClass('font-medium');
+  });
+});

package/dist/primitives/ToggleTestWrapper.svelte

@@ -0,0 +1,30 @@
+<script>
+  import Toggle from "./Toggle.svelte";
+
+  /** @type {{
+    checked?: boolean,
+    disabled?: boolean,
+    size?: 'sm' | 'md' | 'lg',
+    haptic?: boolean,
+    class?: string,
+    onchange?: (detail: { checked: boolean }) => void,
+    label?: string,
+    showLabel?: boolean,
+  }} */
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    haptic = true,
+    class: className = '',
+    onchange,
+    label = 'Toggle Label',
+    showLabel = false,
+  } = $props();
+</script>
+
+<Toggle bind:checked {disabled} {size} {haptic} class={className} {onchange}>
+  {#if showLabel}
+    <span>{label}</span>
+  {/if}
+</Toggle>

package/dist/primitives/ToggleTestWrapper.svelte.d.ts

@@ -0,0 +1,29 @@
+export default ToggleTestWrapper;
+type ToggleTestWrapper = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        haptic?: boolean | undefined;
+        class?: string | undefined;
+        onchange?: ((detail: {
+            checked: boolean;
+        }) => void) | undefined;
+        label?: string | undefined;
+        showLabel?: boolean | undefined;
+    }>): void;
+};
+declare const ToggleTestWrapper: import("svelte").Component<{
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    haptic?: boolean;
+    class?: string;
+    onchange?: (detail: {
+        checked: boolean;
+    }) => void;
+    label?: string;
+    showLabel?: boolean;
+}, {}, "checked">;
+//# sourceMappingURL=ToggleTestWrapper.svelte.d.ts.map

package/dist/primitives/ToggleTestWrapper.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleTestWrapper.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ToggleTestWrapper.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+CA;cATc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;aAChB,OAAO;YACR,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;YACzC,MAAM;gBACF,OAAO;kBAEyC"}

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

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

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

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

package/dist/primitives/Tooltip/Tooltip.spec.js

@@ -0,0 +1,126 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test } from 'vitest';
+import Tooltip from './Tooltip.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('Tooltip', () => {
+  test('renders wrapper div with role tooltip', () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    expect(container.querySelector('[role="tooltip"]')).toBeInTheDocument();
+  });
+
+  test('tooltip popup is hidden by default', () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    expect(container.querySelector('.z-50')).not.toBeInTheDocument();
+  });
+
+  test('shows tooltip on mouseenter', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.textContent).toContain('Help text');
+  });
+
+  test('mouseenter then mouseleave fires handlers', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Help text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.querySelector('.z-50')).toBeInTheDocument();
+    // mouseleave triggers hide; transition may keep element but handler fires
+    await fireEvent.mouseLeave(wrapper);
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('shows tooltip on focus', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Focus text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.focus(wrapper);
+    expect(container.textContent).toContain('Focus text');
+  });
+
+  test('blur fires hide handler', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Blur text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.focus(wrapper);
+    expect(container.querySelector('.z-50')).toBeInTheDocument();
+    await fireEvent.blur(wrapper);
+    // Handler is invoked, wrapper still in DOM
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('does not show tooltip when content is empty', async () => {
+    const { container } = render(Tooltip, { props: { content: '' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.querySelector('.z-50')).not.toBeInTheDocument();
+  });
+
+  test('applies custom className to tooltip popup', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Test', class: 'my-tip' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    expect(container.querySelector('.my-tip')).toBeInTheDocument();
+  });
+
+  test('has relative inline-block wrapper', () => {
+    const { container } = render(Tooltip, { props: { content: 'Text' } });
+    expect(container.querySelector('.relative.inline-block')).toBeInTheDocument();
+  });
+
+  test('tooltip has arrow element', async () => {
+    const { container } = render(Tooltip, { props: { content: 'Arrow test' } });
+    await fireEvent.mouseEnter(container.querySelector('[role="tooltip"]'));
+    expect(container.querySelector('.border-4')).toBeInTheDocument();
+  });
+
+  test('renders children trigger content when provided', () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Tip text', children: textSnippet('Hover me') }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    expect(wrapper.textContent).toContain('Hover me');
+  });
+
+  test('renders empty trigger area when no children provided', () => {
+    const { container } = render(Tooltip, { props: { content: 'Tip text' } });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    // Whitespace may be present from template formatting
+    expect(wrapper.textContent.trim()).toBe('');
+  });
+
+  test('placement bottom applies correct positioning', async () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Bottom tip', placement: 'bottom' }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    const popup = container.querySelector('.z-50');
+    expect(popup.className).toContain('top-full');
+  });
+
+  test('placement left applies correct positioning', async () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Left tip', placement: 'left' }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    const popup = container.querySelector('.z-50');
+    expect(popup.className).toContain('right-full');
+  });
+
+  test('placement right applies correct positioning', async () => {
+    const { container } = render(Tooltip, {
+      props: { content: 'Right tip', placement: 'right' }
+    });
+    const wrapper = container.querySelector('[role="tooltip"]');
+    await fireEvent.mouseEnter(wrapper);
+    const popup = container.querySelector('.z-50');
+    expect(popup.className).toContain('left-full');
+  });
+});

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

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { expect, describe, test, vi } from 'vitest';
 import Search from './Search.svelte';
 
 describe('Search Component', () => {
@@ -175,3 +175,67 @@ describe('Search Combinations', () => {
     expect(input).toBeDisabled();
   });
 });
+
+describe('Search Events', () => {
+  test('calls oninput when typing', async () => {
+    const oninput = vi.fn();
+    const { container } = render(Search, { props: { oninput } });
+    const input = container.querySelector('input');
+    await fireEvent.input(input, { target: { value: 'hello' } });
+    expect(oninput).toHaveBeenCalled();
+  });
+
+  test('calls onchange when changed', async () => {
+    const onchange = vi.fn();
+    const { container } = render(Search, { props: { onchange } });
+    const input = container.querySelector('input');
+    await fireEvent.change(input, { target: { value: 'test' } });
+    expect(onchange).toHaveBeenCalled();
+  });
+
+  test('calls onkeydown on key press', async () => {
+    const onkeydown = vi.fn();
+    const { container } = render(Search, { props: { onkeydown } });
+    const input = container.querySelector('input');
+    await fireEvent.keyDown(input, { key: 'Enter' });
+    expect(onkeydown).toHaveBeenCalled();
+  });
+
+  test('calls onkeyup on key release', async () => {
+    const onkeyup = vi.fn();
+    const { container } = render(Search, { props: { onkeyup } });
+    const input = container.querySelector('input');
+    await fireEvent.keyUp(input, { key: 'a' });
+    expect(onkeyup).toHaveBeenCalled();
+  });
+
+  test('calls onfocus when input gains focus', async () => {
+    const onfocus = vi.fn();
+    const { container } = render(Search, { props: { onfocus } });
+    const input = container.querySelector('input');
+    await fireEvent.focus(input);
+    expect(onfocus).toHaveBeenCalled();
+  });
+
+  test('calls onblur when input loses focus', async () => {
+    const onblur = vi.fn();
+    const { container } = render(Search, { props: { onblur } });
+    const input = container.querySelector('input');
+    await fireEvent.blur(input);
+    expect(onblur).toHaveBeenCalled();
+  });
+
+  test('updates value on input event', async () => {
+    const { container } = render(Search, { props: { value: '' } });
+    const input = container.querySelector('input');
+    await fireEvent.input(input, { target: { value: 'search term' } });
+    expect(input.value).toBe('search term');
+  });
+
+  test('handles invalid size gracefully (falls back to lg)', () => {
+    const { container } = render(Search, { props: { size: 'invalid' } });
+    const wrapper = container.firstElementChild;
+    // Falls back to lg size
+    expect(wrapper).toHaveClass('h-11');
+  });
+});

package/dist/recipes/modals/ConfirmationModal.spec.js

@@ -1,7 +1,14 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import { expect, describe, test, vi } from "vitest";
+
+// Mock haptic utility before importing component
+vi.mock('$lib/utils/haptic.js', () => ({
+  triggerHaptic: vi.fn()
+}));
+
 import ConfirmationModal from "./ConfirmationModal.svelte";
+import { triggerHaptic } from '../../utils/haptic.js';
 
 const defaultActions = [
   { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
@@ -203,4 +210,187 @@ describe("ConfirmationModal Component Tests", () => {
     expect(desc).toHaveClass("text-gray-500");
     expect(desc).toHaveClass("text-sm");
   });
+
+  test("Does not render title when title is empty", () => {
+    setupTest({ title: "" });
+    const headings = document.querySelectorAll("h2");
+    expect(headings.length).toBe(0);
+  });
+
+  test("Triggers haptic with 'medium' for non-danger action when haptic is enabled", async () => {
+    vi.clearAllMocks();
+    const clickFn = vi.fn();
+    const actions = [{ label: "Save", onClick: clickFn, variant: "default" }];
+    const { user } = setupTest({ actions, haptic: true });
+
+    await user.click(screen.getAllByText("Save")[0]);
+
+    expect(triggerHaptic).toHaveBeenCalledWith('medium');
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  test("Triggers haptic with 'heavy' for danger action when haptic is enabled", async () => {
+    vi.clearAllMocks();
+    const clickFn = vi.fn();
+    const actions = [{ label: "Remove", onClick: clickFn, variant: "red" }];
+    const { user } = setupTest({ actions, haptic: true });
+
+    await user.click(screen.getAllByText("Remove")[0]);
+
+    expect(triggerHaptic).toHaveBeenCalledWith('heavy');
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  test("Does not trigger haptic on action click when haptic is disabled", async () => {
+    const clickFn = vi.fn();
+    const actions = [{ label: "OK", onClick: clickFn }];
+    const { user } = setupTest({ actions, haptic: false });
+
+    // Clear mocks after render to ignore Modal's own open haptic
+    vi.clearAllMocks();
+
+    await user.click(screen.getAllByText("OK")[0]);
+
+    // triggerHaptic should NOT have been called for the action click
+    expect(triggerHaptic).not.toHaveBeenCalled();
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  test("Does not call action onClick when disabled is true", async () => {
+    const clickFn = vi.fn();
+    const actions = [{ label: "Submit", onClick: clickFn }];
+    const { user } = setupTest({ actions, disabled: true });
+
+    await user.click(screen.getAllByText("Submit")[0]);
+
+    expect(clickFn).not.toHaveBeenCalled();
+  });
+
+  test("Does not call action onClick when loading is true", async () => {
+    const clickFn = vi.fn();
+    const actions = [{ label: "Submit", onClick: clickFn }];
+    const { user } = setupTest({ actions, loading: true });
+
+    await user.click(screen.getAllByText("Submit")[0]);
+
+    expect(clickFn).not.toHaveBeenCalled();
+  });
+
+  test("handleClose does not close when disabled is true", async () => {
+    const onclose = vi.fn();
+    setupTest({ closeBtn: true, disabled: true, onclose });
+
+    // Find the close button (the X button)
+    const closeImg = document.querySelector('img[alt="Close"]');
+    const closeBtn = closeImg.closest('button');
+    await fireEvent.click(closeBtn);
+
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test("handleClose calls onclose and sets open to false when not disabled", async () => {
+    const onclose = vi.fn();
+    setupTest({ closeBtn: true, disabled: false, loading: false, onclose });
+
+    const closeImg = document.querySelector('img[alt="Close"]');
+    const closeBtn = closeImg.closest('button');
+    await fireEvent.click(closeBtn);
+
+    expect(onclose).toHaveBeenCalled();
+  });
+
+  test("Uses customIcon over icon when both provided", () => {
+    setupTest({ icon: "/icon.svg", customIcon: "/custom-icon.svg" });
+    const img = document.querySelector('img[alt=""]');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute("src", "/custom-icon.svg");
+  });
+
+  test("Maps strokebtn without other flags to outline variant", () => {
+    const actions = [{ label: "Outline", onClick: vi.fn(), strokebtn: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Outline")[0].closest("button, a");
+    expect(button).toHaveClass("text-blue-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-blue-700");
+  });
+
+  test("Maps btnDanger to red variant", () => {
+    const actions = [{ label: "Danger", onClick: vi.fn(), btnDanger: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Danger")[0].closest("button, a");
+    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("text-white");
+  });
+
+  test("Maps btnDanger + strokebtn to red-outline variant", () => {
+    const actions = [{ label: "OutlineDanger", onClick: vi.fn(), btnDanger: true, strokebtn: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("OutlineDanger")[0].closest("button, a");
+    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-red-700");
+  });
+
+  test("Builds actions from primaryButtonText and secondaryButtonText props", async () => {
+    const onconfirm = vi.fn();
+    const oncancel = vi.fn();
+    setupTest({
+      actions: [],
+      primaryButtonText: "Yes, Delete",
+      secondaryButtonText: "No, Keep",
+      onconfirm,
+      oncancel
+    });
+
+    expect(screen.getAllByText("Yes, Delete").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("No, Keep").length).toBeGreaterThan(0);
+  });
+
+  test("Built primary action calls onconfirm callback", async () => {
+    const onconfirm = vi.fn();
+    const { user } = setupTest({
+      actions: [],
+      primaryButtonText: "Confirm",
+      onconfirm
+    });
+
+    await user.click(screen.getAllByText("Confirm")[0]);
+    expect(onconfirm).toHaveBeenCalled();
+  });
+
+  test("Built secondary action calls oncancel callback", async () => {
+    const oncancel = vi.fn();
+    const { user } = setupTest({
+      actions: [],
+      secondaryButtonText: "Cancel",
+      oncancel
+    });
+
+    await user.click(screen.getAllByText("Cancel")[0]);
+    expect(oncancel).toHaveBeenCalled();
+  });
+
+  test("Danger variant uses red variant for primary button", () => {
+    setupTest({
+      actions: [],
+      primaryButtonText: "Delete",
+      variant: "danger"
+    });
+    const button = screen.getAllByText("Delete")[0].closest("button, a");
+    expect(button).toHaveClass("bg-red-700");
+  });
+
+  test("Does not render description when empty", () => {
+    setupTest({ description: "" });
+    // No <p> with muted style should exist in the body area for description
+    const bodyArea = document.querySelectorAll('p.text-gray-500');
+    expect(bodyArea.length).toBe(0);
+  });
+
+  test("Does not render warningText when empty", () => {
+    setupTest({ warningText: "" });
+    const warnings = document.querySelectorAll('.text-red-600');
+    expect(warnings.length).toBe(0);
+  });
 });

package/dist/schemas/__tests__/auth.test.d.ts

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

package/dist/schemas/__tests__/auth.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth.test.d.ts","sourceRoot":"","sources":["../../../src/lib/schemas/__tests__/auth.test.ts"],"names":[],"mappings":""}