@getmicdrop/svelte-components 5.19.0 → 5.20.0

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

@@ -1,97 +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();
-  });
-});
+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}

package/dist/primitives/NumberInput/NumberInput.svelte

@@ -1,113 +1,113 @@
-<script>
-  /**
-   * NumberInput Component - Flowbite Native (Pure Tailwind)
-   * Quantity stepper with increment/decrement buttons
-   *
-   * Matches Figma design:
-   * - Buttons: bg-gray-100, border-gray-300, outer corners rounded
-   * - Display: bg-gray-50, border-gray-300
-   * - Height: 37px
-   * - Icons: 10x10px
-   */
-  import { twMerge } from 'tailwind-merge';
-
-  const defaultLabels = {
-    decreaseQuantity: 'Decrease quantity',
-    increaseQuantity: 'Increase quantity',
-  };
-
-  /** @type {{
-    value?: number,
-    min?: number,
-    max?: number,
-    disabled?: boolean,
-    onchange?: (value: number) => void,
-    class?: string,
-  }} */
-  let {
-    value = 0,
-    min = 0,
-    max = Infinity,
-    disabled = false,
-    onchange,
-    class: className = "",
-    labels: userLabels = {},
-    ...restProps
-  } = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  function increment() {
-    if (value < max && !disabled) {
-      const newValue = value + 1;
-      onchange?.(newValue);
-    }
-  }
-
-  function decrement() {
-    if (value > min && !disabled) {
-      const newValue = value - 1;
-      onchange?.(newValue);
-    }
-  }
-
-  let isMinDisabled = $derived(disabled || value <= min);
-  let isMaxDisabled = $derived(disabled || value >= max);
-
-  // Button base classes matching Figma spec
-  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-gray-100 border border-gray-300 transition-colors dark:bg-gray-700 dark:border-gray-600";
-  const buttonHover = "hover:bg-gray-200 dark:hover:bg-gray-600";
-  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700";
-
-  let decrementClasses = $derived(twMerge(
-    buttonBase,
-    buttonHover,
-    buttonDisabled,
-    "rounded-l-lg"
-  ));
-
-  let incrementClasses = $derived(twMerge(
-    buttonBase,
-    buttonHover,
-    buttonDisabled,
-    "rounded-r-lg"
-  ));
-
-  // Display classes matching Figma spec
-  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-gray-500 text-sm bg-gray-50 border-y border-gray-300 -mx-px dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600";
-
-  let containerClasses = $derived(twMerge(
-    "inline-flex items-center",
-    className
-  ));
-</script>
-
-<div class={containerClasses} {...restProps}>
-  <button
-    type="button"
-    class={decrementClasses}
-    onclick={decrement}
-    disabled={isMinDisabled}
-    aria-label={labels.decreaseQuantity}
-  >
-    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 2">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
-    </svg>
-  </button>
-
-  <span class={displayClasses}>
-    {value}
-  </span>
-
-  <button
-    type="button"
-    class={incrementClasses}
-    onclick={increment}
-    disabled={isMaxDisabled}
-    aria-label={labels.increaseQuantity}
-  >
-    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 18">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
-    </svg>
-  </button>
-</div>
+<script>
+  /**
+   * NumberInput Component - Flowbite Native (Pure Tailwind)
+   * Quantity stepper with increment/decrement buttons
+   *
+   * Matches Figma design:
+   * - Buttons: bg-gray-100, border-gray-300, outer corners rounded
+   * - Display: bg-gray-50, border-gray-300
+   * - Height: 37px
+   * - Icons: 10x10px
+   */
+  import { twMerge } from 'tailwind-merge';
+
+  const defaultLabels = {
+    decreaseQuantity: 'Decrease quantity',
+    increaseQuantity: 'Increase quantity',
+  };
+
+  /** @type {{
+    value?: number,
+    min?: number,
+    max?: number,
+    disabled?: boolean,
+    onchange?: (value: number) => void,
+    class?: string,
+  }} */
+  let {
+    value = 0,
+    min = 0,
+    max = Infinity,
+    disabled = false,
+    onchange,
+    class: className = "",
+    labels: userLabels = {},
+    ...restProps
+  } = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  function increment() {
+    if (value < max && !disabled) {
+      const newValue = value + 1;
+      onchange?.(newValue);
+    }
+  }
+
+  function decrement() {
+    if (value > min && !disabled) {
+      const newValue = value - 1;
+      onchange?.(newValue);
+    }
+  }
+
+  let isMinDisabled = $derived(disabled || value <= min);
+  let isMaxDisabled = $derived(disabled || value >= max);
+
+  // Button base classes matching Figma spec
+  const buttonBase = "h-[37px] px-3 flex items-center justify-center bg-gray-100 border border-gray-300 transition-colors dark:bg-gray-700 dark:border-gray-600";
+  const buttonHover = "hover:bg-gray-200 dark:hover:bg-gray-600";
+  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-gray-100 dark:disabled:hover:bg-gray-700";
+
+  let decrementClasses = $derived(twMerge(
+    buttonBase,
+    buttonHover,
+    buttonDisabled,
+    "rounded-l-lg"
+  ));
+
+  let incrementClasses = $derived(twMerge(
+    buttonBase,
+    buttonHover,
+    buttonDisabled,
+    "rounded-r-lg"
+  ));
+
+  // Display classes matching Figma spec
+  const displayClasses = "h-[37px] px-4 flex items-center justify-center text-gray-500 text-sm bg-gray-50 border-y border-gray-300 -mx-px dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600";
+
+  let containerClasses = $derived(twMerge(
+    "inline-flex items-center",
+    className
+  ));
+</script>
+
+<div class={containerClasses} {...restProps}>
+  <button
+    type="button"
+    class={decrementClasses}
+    onclick={decrement}
+    disabled={isMinDisabled}
+    aria-label={labels.decreaseQuantity}
+  >
+    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 2">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h16"/>
+    </svg>
+  </button>
+
+  <span class={displayClasses}>
+    {value}
+  </span>
+
+  <button
+    type="button"
+    class={incrementClasses}
+    onclick={increment}
+    disabled={isMaxDisabled}
+    aria-label={labels.increaseQuantity}
+  >
+    <svg class="w-3 h-3 text-gray-800 dark:text-white" fill="none" viewBox="0 0 18 18">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
+    </svg>
+  </button>
+</div>

package/dist/primitives/Pagination/DotIndicator.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  interface Props {
+    /** Total number of items */
+    count: number;
+    /** Currently active index (0-based) */
+    activeIndex?: number;
+    /** Dot size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color scheme */
+    variant?: 'light' | 'dark';
+    /** Called when a dot is clicked */
+    onselect?: (index: number) => void;
+    /** Additional CSS classes on the container */
+    class?: string;
+  }
+
+  let {
+    count,
+    activeIndex = 0,
+    size = 'md',
+    variant = 'dark',
+    onselect,
+    class: className = '',
+  }: Props = $props();
+
+  const sizeClasses: Record<string, { dot: string; active: string }> = {
+    sm: { dot: 'h-1.5 w-1.5', active: 'scale-125' },
+    md: { dot: 'h-2.5 w-2.5', active: 'scale-125' },
+    lg: { dot: 'h-3 w-3', active: 'scale-125' },
+  };
+
+  const variantClasses: Record<string, { active: string; inactive: string; hover: string }> = {
+    light: {
+      active: 'bg-white',
+      inactive: 'bg-white/30',
+      hover: 'hover:bg-white/50',
+    },
+    dark: {
+      active: 'bg-gray-900 dark:bg-white',
+      inactive: 'bg-gray-300 dark:bg-gray-600',
+      hover: 'hover:bg-gray-400 dark:hover:bg-gray-500',
+    },
+  };
+
+  let sizeConfig = $derived(sizeClasses[size] || sizeClasses.md);
+  let variantConfig = $derived(variantClasses[variant] || variantClasses.dark);
+</script>
+
+<div
+  class="flex items-center gap-2 {className}"
+  role="tablist"
+  aria-label="Item selector"
+>
+  {#each { length: count } as _, i}
+    <button
+      type="button"
+      class="rounded-full transition-all {sizeConfig.dot} {i === activeIndex
+        ? `${sizeConfig.active} ${variantConfig.active}`
+        : `${variantConfig.inactive} ${variantConfig.hover}`}"
+      role="tab"
+      aria-selected={i === activeIndex}
+      aria-label="Item {i + 1} of {count}"
+      onclick={() => onselect?.(i)}
+    ></button>
+  {/each}
+</div>

package/dist/primitives/Pagination/DotIndicator.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    /** Total number of items */
+    count: number;
+    /** Currently active index (0-based) */
+    activeIndex?: number;
+    /** Dot size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Color scheme */
+    variant?: 'light' | 'dark';
+    /** Called when a dot is clicked */
+    onselect?: (index: number) => void;
+    /** Additional CSS classes on the container */
+    class?: string;
+}
+declare const DotIndicator: import("svelte").Component<Props, {}, "">;
+type DotIndicator = ReturnType<typeof DotIndicator>;
+export default DotIndicator;
+//# sourceMappingURL=DotIndicator.svelte.d.ts.map

package/dist/primitives/Pagination/DotIndicator.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/DotIndicator.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8CH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}