@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/LandingButton/LandingButton.spec.js

@@ -1,61 +1,61 @@
-import { render } from '@testing-library/svelte';
-import { expect, describe, test, vi } from 'vitest';
-import LandingButton from './LandingButton.svelte';
-
-describe('LandingButton', () => {
-  test('renders a button by default', () => {
-    const { container } = render(LandingButton);
-    expect(container.querySelector('button')).toBeInTheDocument();
-  });
-
-  test('button has type="button"', () => {
-    const { container } = render(LandingButton);
-    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
-  });
-
-  test('renders an anchor when href is provided', () => {
-    const { container } = render(LandingButton, { props: { href: '/page' } });
-    expect(container.querySelector('a')).toBeInTheDocument();
-    expect(container.querySelector('a')).toHaveAttribute('href', '/page');
-  });
-
-  test('no button when href is provided', () => {
-    const { container } = render(LandingButton, { props: { href: '/page' } });
-    expect(container.querySelector('button')).not.toBeInTheDocument();
-  });
-
-  test('disabled state', () => {
-    const { container } = render(LandingButton, { props: { disabled: true } });
-    const btn = container.querySelector('button');
-    expect(btn).toBeDisabled();
-  });
-
-  test('loading state disables button', () => {
-    const { container } = render(LandingButton, { props: { loading: true } });
-    const btn = container.querySelector('button');
-    expect(btn).toBeDisabled();
-  });
-
-  test('primary variant is default', () => {
-    const { container } = render(LandingButton);
-    // Should render without issues
-    expect(container.querySelector('button')).toBeInTheDocument();
-  });
-
-  test('secondary variant renders', () => {
-    const { container } = render(LandingButton, { props: { variant: 'secondary' } });
-    expect(container.querySelector('button')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(LandingButton, { props: { class: 'my-landing-btn' } });
-    const btn = container.querySelector('button');
-    expect(btn).toHaveClass('my-landing-btn');
-  });
-
-  test('anchor with disabled state', () => {
-    const { container } = render(LandingButton, { props: { href: '/page', disabled: true } });
-    const a = container.querySelector('a');
-    expect(a).toBeInTheDocument();
-  });
-});
+import { render } from '@testing-library/svelte';
+import { expect, describe, test, vi } from 'vitest';
+import LandingButton from './LandingButton.svelte';
+
+describe('LandingButton', () => {
+  test('renders a button by default', () => {
+    const { container } = render(LandingButton);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('button has type="button"', () => {
+    const { container } = render(LandingButton);
+    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
+  });
+
+  test('renders an anchor when href is provided', () => {
+    const { container } = render(LandingButton, { props: { href: '/page' } });
+    expect(container.querySelector('a')).toBeInTheDocument();
+    expect(container.querySelector('a')).toHaveAttribute('href', '/page');
+  });
+
+  test('no button when href is provided', () => {
+    const { container } = render(LandingButton, { props: { href: '/page' } });
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  test('disabled state', () => {
+    const { container } = render(LandingButton, { props: { disabled: true } });
+    const btn = container.querySelector('button');
+    expect(btn).toBeDisabled();
+  });
+
+  test('loading state disables button', () => {
+    const { container } = render(LandingButton, { props: { loading: true } });
+    const btn = container.querySelector('button');
+    expect(btn).toBeDisabled();
+  });
+
+  test('primary variant is default', () => {
+    const { container } = render(LandingButton);
+    // Should render without issues
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('secondary variant renders', () => {
+    const { container } = render(LandingButton, { props: { variant: 'secondary' } });
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(LandingButton, { props: { class: 'my-landing-btn' } });
+    const btn = container.querySelector('button');
+    expect(btn).toHaveClass('my-landing-btn');
+  });
+
+  test('anchor with disabled state', () => {
+    const { container } = render(LandingButton, { props: { href: '/page', disabled: true } });
+    const a = container.querySelector('a');
+    expect(a).toBeInTheDocument();
+  });
+});

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-brand-primary border border-brand-primary hover:bg-brand-primary',
+    secondary: 'text-text-secondary bg-card border border-border hover:border-stroke-primary hover:text-text-primary',
+  };
+
+  const disabledClasses = 'bg-bg-tertiary border-border text-muted-foreground cursor-not-allowed shadow-none';
+
+  // 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.js

@@ -1,130 +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');
-  });
-});
+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-text-primary');
+  });
+
+  test('applies danger styling', () => {
+    const { container } = render(MenuItem, { props: { danger: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('text-accent-danger');
+  });
+
+  test('applies active styling', () => {
+    const { container } = render(MenuItem, { props: { active: true } });
+    const button = container.querySelector('button');
+    expect(button.className).toContain('bg-status-info-bg');
+  });
+
+  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-accent-danger');
+    expect(button.className).toContain('bg-status-info-bg');
+  });
+
+  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');
+  });
+});