@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/primitives/Modal/Modal.svelte

@@ -1,181 +1,181 @@
-<script>
-  /**
-   * Modal Component - Flowbite Native
-   * Migrated to Svelte 5 runes
-   *
-   * Haptic Feedback:
-   *   - Light haptic on modal open (subtle attention cue)
-   */
-  import { onDestroy } from "svelte";
-  import { fade, fly } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import { portal } from "../../utils/portal.js";
-  import { triggerHaptic } from "../../utils/haptic.js";
-
-  /** @type {{
-    open?: boolean,
-    isProcessing?: boolean,
-    isSuccess?: boolean,
-    size?: 'sm' | 'md' | 'lg' | 'xl',
-    persistent?: boolean,
-    haptic?: boolean,
-    oncancel?: () => void,
-    header?: import('svelte').Snippet,
-    body?: import('svelte').Snippet,
-    footer?: import('svelte').Snippet,
-    class?: string,
-  }} */
-  let {
-    open = $bindable(false),
-    isProcessing: _isProcessing = false,
-    isSuccess: _isSuccess = false,
-    size = "md",
-    persistent = false,
-    haptic = true,
-    oncancel,
-    header,
-    body,
-    footer,
-    class: _className,
-    ...restProps
-  } = $props();
-
-  // Store scroll position for iOS scroll lock
-  let scrollY = $state(0);
-
-  // Track previous open state to detect open transitions
-  let prevOpen = $state(false);
-
-  // Trigger haptic on modal open (QOL Bible)
-  $effect(() => {
-    if (open && !prevOpen && haptic) {
-      triggerHaptic('light');
-    }
-    prevOpen = open;
-  });
-
-  // Handle escape key
-  function handleKeydown(event) {
-    if (event.key === "Escape" && open && !persistent) {
-      resetModal();
-    }
-  }
-
-  const resetModal = () => {
-    oncancel?.();
-    open = false;
-  };
-
-  // Size classes for desktop modal (xs/sm/md/lg/xl scale)
-  const sizeClasses = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-xl",
-    xl: "max-w-2xl"
-  };
-
-  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.md);
-
-  // iOS-compatible scroll lock using position:fixed approach
-  // Also compensates for scrollbar width to prevent layout shift
-  $effect(() => {
-    if (typeof document !== "undefined") {
-      if (open) {
-        scrollY = window.scrollY;
-        // Calculate scrollbar width before hiding it
-        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        document.body.style.position = "fixed";
-        document.body.style.top = `-${scrollY}px`;
-        document.body.style.left = "0";
-        document.body.style.right = "0";
-        document.body.style.overflow = "hidden";
-        // Add padding to compensate for scrollbar disappearing
-        document.body.style.paddingRight = `${scrollbarWidth}px`;
-      } else {
-        document.body.style.position = "";
-        document.body.style.top = "";
-        document.body.style.left = "";
-        document.body.style.right = "";
-        document.body.style.overflow = "";
-        document.body.style.paddingRight = "";
-        window.scrollTo(0, scrollY);
-      }
-    }
-  });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.position = "";
-      document.body.style.top = "";
-      document.body.style.left = "";
-      document.body.style.right = "";
-      document.body.style.overflow = "";
-      document.body.style.paddingRight = "";
-    }
-  });
-</script>
-
-<svelte:window onkeydown={handleKeydown} />
-
-{#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
-  <div
-    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
-    onmousedown={(e) => {
-      // Only track direct clicks on backdrop, not drags that end on backdrop
-      if (e.target === e.currentTarget && !persistent) {
-        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
-      }
-    }}
-    onmouseup={(e) => {
-      // Only close if both mousedown and mouseup were on the backdrop
-      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
-        resetModal();
-      }
-      delete e.currentTarget.dataset.clickStartedOnBackdrop;
-    }}
-    transition:fade={{ duration: 300 }}
-    role="dialog"
-    aria-modal="true"
-    use:portal
-    {...restProps}
-  >
-    <!-- Mobile: Bottom sheet -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
-    >
-      <!-- Handle bar -->
-      <div class="flex justify-center pt-3 pb-1 shrink-0">
-        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
-      </div>
-
-      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
-        {#if header}{@render header()}{/if}
-        {#if body}{@render body()}{/if}
-        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
-          {#if footer}{@render footer()}{/if}
-        </div>
-      </div>
-    </div>
-
-    <!-- Desktop: Centered modal -->
-    <!-- svelte-ignore a11y_click_events_have_key_events -->
-    <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div
-      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
-      onclick={(e) => e.stopPropagation()}
-      transition:fly={{ y: 20, duration: 200 }}
-    >
-      {#if header}{@render header()}{/if}
-      {#if body}{@render body()}{/if}
-      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
-        {#if footer}{@render footer()}{/if}
-      </div>
-    </div>
-  </div>
-{/if}
+<script>
+  /**
+   * Modal Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   *
+   * Haptic Feedback:
+   *   - Light haptic on modal open (subtle attention cue)
+   */
+  import { onDestroy } from "svelte";
+  import { fade, fly } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import { portal } from "../../utils/portal.js";
+  import { triggerHaptic } from "../../utils/haptic.js";
+
+  /** @type {{
+    open?: boolean,
+    isProcessing?: boolean,
+    isSuccess?: boolean,
+    size?: 'sm' | 'md' | 'lg' | 'xl',
+    persistent?: boolean,
+    haptic?: boolean,
+    oncancel?: () => void,
+    header?: import('svelte').Snippet,
+    body?: import('svelte').Snippet,
+    footer?: import('svelte').Snippet,
+    class?: string,
+  }} */
+  let {
+    open = $bindable(false),
+    isProcessing: _isProcessing = false,
+    isSuccess: _isSuccess = false,
+    size = "md",
+    persistent = false,
+    haptic = true,
+    oncancel,
+    header,
+    body,
+    footer,
+    class: _className,
+    ...restProps
+  } = $props();
+
+  // Store scroll position for iOS scroll lock
+  let scrollY = $state(0);
+
+  // Track previous open state to detect open transitions
+  let prevOpen = $state(false);
+
+  // Trigger haptic on modal open (QOL Bible)
+  $effect(() => {
+    if (open && !prevOpen && haptic) {
+      triggerHaptic('light');
+    }
+    prevOpen = open;
+  });
+
+  // Handle escape key
+  function handleKeydown(event) {
+    if (event.key === "Escape" && open && !persistent) {
+      resetModal();
+    }
+  }
+
+  const resetModal = () => {
+    oncancel?.();
+    open = false;
+  };
+
+  // Size classes for desktop modal (xs/sm/md/lg/xl scale)
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-xl",
+    xl: "max-w-2xl"
+  };
+
+  let modalSizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+
+  // iOS-compatible scroll lock using position:fixed approach
+  // Also compensates for scrollbar width to prevent layout shift
+  $effect(() => {
+    if (typeof document !== "undefined") {
+      if (open) {
+        scrollY = window.scrollY;
+        // Calculate scrollbar width before hiding it
+        const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+        document.body.style.position = "fixed";
+        document.body.style.top = `-${scrollY}px`;
+        document.body.style.left = "0";
+        document.body.style.right = "0";
+        document.body.style.overflow = "hidden";
+        // Add padding to compensate for scrollbar disappearing
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      } else {
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.left = "";
+        document.body.style.right = "";
+        document.body.style.overflow = "";
+        document.body.style.paddingRight = "";
+        window.scrollTo(0, scrollY);
+      }
+    }
+  });
+
+  onDestroy(() => {
+    if (typeof document !== "undefined") {
+      document.body.style.position = "";
+      document.body.style.top = "";
+      document.body.style.left = "";
+      document.body.style.right = "";
+      document.body.style.overflow = "";
+      document.body.style.paddingRight = "";
+    }
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
+    onmousedown={(e) => {
+      // Only track direct clicks on backdrop, not drags that end on backdrop
+      if (e.target === e.currentTarget && !persistent) {
+        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
+      }
+    }}
+    onmouseup={(e) => {
+      // Only close if both mousedown and mouseup were on the backdrop
+      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
+        resetModal();
+      }
+      delete e.currentTarget.dataset.clickStartedOnBackdrop;
+    }}
+    transition:fade={{ duration: 300 }}
+    role="dialog"
+    aria-modal="true"
+    use:portal
+    {...restProps}
+  >
+    <!-- Mobile: Bottom sheet -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="md:hidden bg-white dark:bg-gray-800 rounded-t-3xl w-full max-h-[90vh] max-h-[90dvh] overflow-hidden flex flex-col shadow-[0_-10px_40px_rgba(0,0,0,0.15)] touch-pan-y overscroll-contain"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
+    >
+      <!-- Handle bar -->
+      <div class="flex justify-center pt-3 pb-1 shrink-0">
+        <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-xs"></div>
+      </div>
+
+      <div class="p-6 pb-[calc(5rem+env(safe-area-inset-bottom,0px))] overflow-y-auto flex-1">
+        {#if header}{@render header()}{/if}
+        {#if body}{@render body()}{/if}
+        <div class="w-full flex flex-col gap-3 mt-6 empty:hidden empty:mt-0">
+          {#if footer}{@render footer()}{/if}
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop: Centered modal -->
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="hidden md:block bg-white dark:bg-gray-800 p-6 rounded-lg {modalSizeClass} w-full max-h-[calc(100vh-4rem)] overflow-y-auto shadow-2xl"
+      onclick={(e) => e.stopPropagation()}
+      transition:fly={{ y: 20, duration: 200 }}
+    >
+      {#if header}{@render header()}{/if}
+      {#if body}{@render body()}{/if}
+      <div class="w-full flex flex-col md:flex-row md:justify-end gap-3 mt-6 empty:hidden empty:mt-0">
+        {#if footer}{@render footer()}{/if}
+      </div>
+    </div>
+  </div>
+{/if}

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

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

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

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

package/dist/primitives/NavItem/NavItem.spec.js

@@ -0,0 +1,97 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test, vi } from 'vitest';
+import NavItem from './NavItem.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('NavItem', () => {
+  test('renders a button by default', () => {
+    const { container } = render(NavItem);
+    expect(container.querySelector('button')).toBeInTheDocument();
+    expect(container.querySelector('a')).not.toBeInTheDocument();
+  });
+
+  test('renders an anchor when href is provided', () => {
+    const { container } = render(NavItem, { props: { href: '/home' } });
+    expect(container.querySelector('a')).toBeInTheDocument();
+    expect(container.querySelector('a')).toHaveAttribute('href', '/home');
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  test('button has type="button"', () => {
+    const { container } = render(NavItem);
+    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
+  });
+
+  test('applies default (inactive) styling', () => {
+    const { container } = render(NavItem);
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-gray-500');
+  });
+
+  test('applies active styling', () => {
+    const { container } = render(NavItem, { props: { active: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-blue-600');
+  });
+
+  test('applies disabled styling', () => {
+    const { container } = render(NavItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toBeDisabled();
+    expect(button.className).toContain('cursor-not-allowed');
+  });
+
+  test('onclick handler on button', async () => {
+    const onclick = vi.fn();
+    const { container } = render(NavItem, { props: { onclick } });
+    await fireEvent.click(container.querySelector('button'));
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('onclick handler on anchor', async () => {
+    const onclick = vi.fn();
+    const { container } = render(NavItem, { props: { href: '/page', onclick } });
+    await fireEvent.click(container.querySelector('a'));
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(NavItem, { props: { class: 'my-nav' } });
+    expect(container.querySelector('.my-nav')).toBeInTheDocument();
+  });
+
+  test('renders children content in button mode', () => {
+    const { container } = render(NavItem, {
+      props: { children: textSnippet('Nav label') }
+    });
+    expect(container.querySelector('button').textContent).toBe('Nav label');
+  });
+
+  test('renders children content in anchor mode', () => {
+    const { container } = render(NavItem, {
+      props: { href: '/page', children: textSnippet('Link label') }
+    });
+    expect(container.querySelector('a').textContent).toBe('Link label');
+  });
+
+  test('renders empty button when no children provided', () => {
+    const { container } = render(NavItem);
+    expect(container.querySelector('button').textContent).toBe('');
+  });
+
+  test('renders empty anchor when no children provided', () => {
+    const { container } = render(NavItem, { props: { href: '/page' } });
+    expect(container.querySelector('a').textContent).toBe('');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(NavItem, { props: { 'data-testid': 'my-nav-item' } });
+    expect(container.querySelector('[data-testid="my-nav-item"]')).toBeInTheDocument();
+  });
+});

package/dist/primitives/NavItem/NavItem.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-  /**
-   * NavItem Component
-   * Bottom navigation item with vertical layout.
-   *
-   * Replaces: Button variant="nav"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Active/selected state */
-    active?: boolean;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Link href (renders as <a> if provided) */
-    href?: string | null;
-    /** Content (icon + label) */
-    children?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    active = false,
-    disabled = false,
-    href = null,
-    children,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses = 'flex flex-col items-center justify-center h-full py-2 bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-  const defaultClasses = 'text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500';
-  const activeClasses = 'text-blue-600 dark:text-blue-500';
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
-
-  let variantClass = $derived(() => {
-    if (disabled) return disabledClasses;
-    if (active) return activeClasses;
-    return defaultClasses;
-  });
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    variantClass(),
-    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-    className
-  ));
-</script>
-
-{#if href}
-  <a
-    {href}
-    class={classes}
-    {onclick}
-    {...restProps}
-  >
-    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-  </a>
-{:else}
-  <button
-    type="button"
-    class={classes}
-    {disabled}
-    {onclick}
-    {...restProps}
-  >
-    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-  </button>
-{/if}
+<script lang="ts">
+  /**
+   * NavItem Component
+   * Bottom navigation item with vertical layout.
+   *
+   * Replaces: Button variant="nav"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Active/selected state */
+    active?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content (icon + label) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    active = false,
+    disabled = false,
+    href = null,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'flex flex-col items-center justify-center h-full py-2 bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+  const defaultClasses = 'text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-500';
+  const activeClasses = 'text-blue-600 dark:text-blue-500';
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (active) return activeClasses;
+    return defaultClasses;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    {onclick}
+    {...restProps}
+  >
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    {disabled}
+    {onclick}
+    {...restProps}
+  >
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </button>
+{/if}