@getmicdrop/svelte-components 5.17.0 → 5.17.3

package/dist/primitives/LandingButton/LandingButton.svelte

@@ -1,92 +1,92 @@
-<script lang="ts">
-  /**
-   * LandingButton Component
-   * Hero/landing page CTA buttons with shadow and prominent styling.
-   *
-   * Replaces: Button variant="landing" and variant="landing-secondary"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonSizes } from '../../tokens/sizing.js';
-
-  interface Props {
-    /** Visual style: primary (blue) or secondary (outline) */
-    variant?: 'primary' | 'secondary';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Loading state */
-    loading?: boolean;
-    /** Link href (renders as <a> if provided) */
-    href?: string | null;
-    /** Content */
-    children?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    variant = 'primary',
-    disabled = false,
-    loading = false,
-    href = null,
-    children,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  let effectiveDisabled = $derived(disabled || loading);
-
-  const baseClasses = 'inline-flex items-center justify-center rounded-xl font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none no-underline hover:no-underline shadow hover:shadow-md';
-
-  const variantClasses = {
-    primary: 'text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700',
-    secondary: 'text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100',
-  };
-
-  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed shadow-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
-
-  // Landing size from tokens
-  let sizeClass = $derived(buttonSizes.landing);
-
-  let variantClass = $derived(() => {
-    if (effectiveDisabled) return disabledClasses;
-    return variantClasses[variant] || variantClasses.primary;
-  });
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    sizeClass,
-    variantClass(),
-    effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
-    className
-  ));
-</script>
-
-{#if href}
-  <a
-    {href}
-    class={classes}
-    {onclick}
-    {...restProps}
-  >
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-  </a>
-{:else}
-  <button
-    type="button"
-    class={classes}
-    disabled={effectiveDisabled}
-    {onclick}
-    {...restProps}
-  >
-    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
-      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-    </span>
-  </button>
-{/if}
+<script lang="ts">
+  /**
+   * LandingButton Component
+   * Hero/landing page CTA buttons with shadow and prominent styling.
+   *
+   * Replaces: Button variant="landing" and variant="landing-secondary"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Visual style: primary (blue) or secondary (outline) */
+    variant?: 'primary' | 'secondary';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Link href (renders as <a> if provided) */
+    href?: string | null;
+    /** Content */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    variant = 'primary',
+    disabled = false,
+    loading = false,
+    href = null,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  let effectiveDisabled = $derived(disabled || loading);
+
+  const baseClasses = 'inline-flex items-center justify-center rounded-xl font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none no-underline hover:no-underline shadow hover:shadow-md';
+
+  const variantClasses = {
+    primary: 'text-white bg-blue-600 border border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:border-blue-600 dark:hover:bg-blue-700',
+    secondary: 'text-gray-700 bg-white border border-gray-200 hover:border-gray-400 hover:text-gray-900 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:text-gray-100',
+  };
+
+  const disabledClasses = 'bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed shadow-none dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500';
+
+  // Landing size from tokens
+  let sizeClass = $derived(buttonSizes.landing);
+
+  let variantClass = $derived(() => {
+    if (effectiveDisabled) return disabledClasses;
+    return variantClasses[variant] || variantClasses.primary;
+  });
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    variantClass(),
+    effectiveDisabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={classes}
+    {onclick}
+    {...restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+  </a>
+{:else}
+  <button
+    type="button"
+    class={classes}
+    disabled={effectiveDisabled}
+    {onclick}
+    {...restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading}>
+      {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+    </span>
+  </button>
+{/if}

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

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

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

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

package/dist/primitives/MenuItem/MenuItem.spec.js

@@ -0,0 +1,130 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import { expect, describe, test, vi } from 'vitest';
+import MenuItem from './MenuItem.svelte';
+
+function textSnippet(text) {
+  return createRawSnippet(() => ({
+    render: () => `<span>${text}</span>`
+  }));
+}
+
+describe('MenuItem', () => {
+  test('renders a button element', () => {
+    const { container } = render(MenuItem);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('button has type="button"', () => {
+    const { container } = render(MenuItem);
+    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
+  });
+
+  test('has full width styling', () => {
+    const { container } = render(MenuItem);
+    const button = container.querySelector('button');
+    expect(button.className).toContain('w-full');
+  });
+
+  test('applies default (non-danger) styling', () => {
+    const { container } = render(MenuItem);
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-gray-900');
+  });
+
+  test('applies danger styling', () => {
+    const { container } = render(MenuItem, { props: { danger: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-red-600');
+  });
+
+  test('applies active styling', () => {
+    const { container } = render(MenuItem, { props: { active: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('bg-blue-50');
+  });
+
+  test('applies disabled state', () => {
+    const { container } = render(MenuItem, { props: { disabled: true } });
+    const button = container.querySelector('button');
+    expect(button).toBeDisabled();
+    expect(button.className).toContain('cursor-not-allowed');
+  });
+
+  test('onclick handler', async () => {
+    const onclick = vi.fn();
+    const { container } = render(MenuItem, { props: { onclick } });
+    await fireEvent.click(container.querySelector('button'));
+    expect(onclick).toHaveBeenCalled();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(MenuItem, { props: { class: 'my-menu-item' } });
+    expect(container.querySelector('.my-menu-item')).toBeInTheDocument();
+  });
+
+  test('renders children content when provided', () => {
+    const { container } = render(MenuItem, {
+      props: { children: textSnippet('Menu option') }
+    });
+    const span = container.querySelector('span');
+    expect(span.textContent).toBe('Menu option');
+  });
+
+  test('renders empty span when no children provided', () => {
+    const { container } = render(MenuItem);
+    const span = container.querySelector('button > span');
+    expect(span.textContent.trim()).toBe('');
+  });
+
+  test('renders trailing content when provided', () => {
+    const { container } = render(MenuItem, {
+      props: {
+        children: textSnippet('Item'),
+        trailing: textSnippet('Badge')
+      }
+    });
+    expect(container.querySelector('button').textContent).toContain('Badge');
+  });
+
+  test('does not render trailing when not provided', () => {
+    const { container } = render(MenuItem, {
+      props: { children: textSnippet('Item') }
+    });
+    // Button should contain only the children span content
+    const button = container.querySelector('button');
+    expect(button.textContent).toContain('Item');
+    expect(button.textContent).not.toContain('Badge');
+  });
+
+  test('size sm applies smaller padding', () => {
+    const { container } = render(MenuItem, { props: { size: 'sm' } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('py-2');
+  });
+
+  test('size lg applies larger padding', () => {
+    const { container } = render(MenuItem, { props: { size: 'lg' } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('py-4');
+  });
+
+  test('passes through additional props', () => {
+    const { container } = render(MenuItem, { props: { 'data-testid': 'my-item' } });
+    expect(container.querySelector('[data-testid="my-item"]')).toBeInTheDocument();
+  });
+
+  test('danger + active combination applies danger active styling', () => {
+    const { container } = render(MenuItem, { props: { danger: true, active: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-red-600');
+    expect(button.className).toContain('bg-blue-50');
+  });
+
+  test('unknown size falls back to md sizing', () => {
+    const { container } = render(MenuItem, { props: { size: 'unknown' } });
+    const button = container.querySelector('button');
+    // Falls back to md via || operator
+    expect(button.className).toContain('py-3');
+  });
+});

package/dist/primitives/MenuItem/MenuItem.svelte

@@ -1,85 +1,85 @@
-<script lang="ts">
-  /**
-   * MenuItem Component
-   * For dropdown menus, action sheets, and sidebar navigation items.
-   *
-   * Replaces: Button variant="menu-item" and variant="menu-item-danger"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
-
-  interface Props {
-    /** Destructive/danger styling (red text) */
-    danger?: boolean;
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg' | 'nav';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Active/selected state */
-    active?: boolean;
-    /** Content */
-    children?: Snippet;
-    /** Trailing content (icons, badges) */
-    trailing?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    danger = false,
-    size = 'md',
-    disabled = false,
-    active = false,
-    children,
-    trailing,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses = 'w-full text-left whitespace-nowrap bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
-
-  const variantClasses = {
-    default: 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
-    danger: 'text-red-600 hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600',
-  };
-
-  const activeClasses = 'bg-blue-50 dark:bg-gray-700';
-  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
-
-  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
-
-  let variantClass = $derived(() => {
-    if (disabled) return disabledClasses;
-    if (active) return `${variantClasses[danger ? 'danger' : 'default']} ${activeClasses}`;
-    return variantClasses[danger ? 'danger' : 'default'];
-  });
-
-  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
-    sizeClass,
-    variantClass(),
-    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
-    className
-  ));
-</script>
-
-<button
-  type="button"
-  class={classes}
-  {disabled}
-  {onclick}
-  {...restProps}
->
-  <span class="inline-flex items-center gap-1.5">
-    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-  </span>
-  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
-</button>
+<script lang="ts">
+  /**
+   * MenuItem Component
+   * For dropdown menus, action sheets, and sidebar navigation items.
+   *
+   * Replaces: Button variant="menu-item" and variant="menu-item-danger"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonMenuItemSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Destructive/danger styling (red text) */
+    danger?: boolean;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg' | 'nav';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Active/selected state */
+    active?: boolean;
+    /** Content */
+    children?: Snippet;
+    /** Trailing content (icons, badges) */
+    trailing?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    danger = false,
+    size = 'md',
+    disabled = false,
+    active = false,
+    children,
+    trailing,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'w-full text-left whitespace-nowrap bg-transparent border-transparent rounded-lg font-medium leading-none focus:outline-hidden transition-all duration-150 ease-out select-none';
+
+  const variantClasses = {
+    default: 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600',
+    danger: 'text-red-600 hover:bg-red-50 dark:text-red-500 dark:hover:bg-gray-600',
+  };
+
+  const activeClasses = 'bg-blue-50 dark:bg-gray-700';
+  const disabledClasses = 'text-gray-400 cursor-not-allowed dark:text-gray-500';
+
+  let sizeClass = $derived(buttonMenuItemSizes[size] || buttonMenuItemSizes.md);
+
+  let variantClass = $derived(() => {
+    if (disabled) return disabledClasses;
+    if (active) return `${variantClasses[danger ? 'danger' : 'default']} ${activeClasses}`;
+    return variantClasses[danger ? 'danger' : 'default'];
+  });
+
+  let hasTrailing = $derived(typeof trailing === 'function' || trailing);
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    hasTrailing ? 'flex items-center justify-between' : 'flex items-center justify-start',
+    sizeClass,
+    variantClass(),
+    disabled ? 'cursor-not-allowed' : 'cursor-pointer active:scale-[0.97] active:opacity-90',
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  <span class="inline-flex items-center gap-1.5">
+    {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+  </span>
+  {#if typeof trailing === 'function'}{@render trailing()}{:else if trailing}{trailing}{/if}
+</button>