@getmicdrop/svelte-components 5.21.0 → 5.21.2

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-muted-foreground');
+  });
+
+  test('applies active styling', () => {
+    const { container } = render(NavItem, { props: { active: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-brand-primary');
+  });
+
+  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-muted-foreground hover:text-brand-primary';
+  const activeClasses = 'text-brand-primary';
+  const disabledClasses = 'text-muted-foreground cursor-not-allowed';
+
+  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.spec.js

@@ -146,54 +146,54 @@ describe('NumberInput Styling', () => {
     expect(incrementBtn).toHaveClass('rounded-r-lg');
   });
 
-  test('buttons have bg-gray-100 background', () => {
+  test('buttons have bg-muted background', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('bg-gray-100');
+    expect(decrementBtn).toHaveClass('bg-muted');
   });
 
-  test('buttons have border-gray-300 border', () => {
+  test('buttons have border-stroke-primary border', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('border-gray-300');
+    expect(decrementBtn).toHaveClass('border-stroke-primary');
   });
 
-  test('display has bg-gray-50 background', () => {
+  test('display has bg-bg-secondary background', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('bg-gray-50');
+    expect(display).toHaveClass('bg-bg-secondary');
   });
 
-  test('display has text-gray-500 color', () => {
+  test('display has text-muted-foreground color', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('text-gray-500');
+    expect(display).toHaveClass('text-muted-foreground');
   });
 });
 
-describe('NumberInput Dark Mode', () => {
-  test('buttons have dark mode background', () => {
+describe('NumberInput Token-Based Styling', () => {
+  test('buttons have token-based background', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('dark:bg-gray-700');
+    expect(decrementBtn).toHaveClass('bg-muted');
   });
 
-  test('buttons have dark mode border', () => {
+  test('buttons have token-based border', () => {
     const { container } = render(NumberInput);
     const decrementBtn = container.querySelector('[aria-label="Decrease quantity"]');
-    expect(decrementBtn).toHaveClass('dark:border-gray-600');
+    expect(decrementBtn).toHaveClass('border-stroke-primary');
   });
 
-  test('display has dark mode background', () => {
+  test('display has token-based background', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('dark:bg-gray-800');
+    expect(display).toHaveClass('bg-bg-secondary');
   });
 
-  test('display has dark mode text color', () => {
+  test('display has token-based text color', () => {
     const { container } = render(NumberInput);
     const display = container.querySelector('span');
-    expect(display).toHaveClass('dark:text-gray-400');
+    expect(display).toHaveClass('text-muted-foreground');
   });
 });
 

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-muted, border-stroke-primary, outer corners rounded
+   * - Display: bg-bg-secondary, border-stroke-primary
+   * - 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-muted border border-stroke-primary transition-colors";
+  const buttonHover = "hover:bg-bg-tertiary";
+  const buttonDisabled = "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-muted:hover:bg-bg-secondary";
+
+  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-muted-foreground text-sm bg-bg-secondary border-y border-stroke-primary -mx-px";
+
+  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-text-primary" 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-text-primary" 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>