@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Avatar/Avatar.svelte

@@ -1,66 +1,66 @@
-<script lang="ts">
-  /**
-   * Avatar Component - Flowbite-style native implementation
-   *
-   * Displays a user avatar image with optional fallback initials
-   */
-
-  interface Props {
-    /** Image source URL */
-    src?: string;
-    /** Alt text for the image */
-    alt?: string;
-    /** Whether to use rounded (circle) shape */
-    rounded?: boolean;
-    /** Size variant */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /** Fallback initials when no image */
-    initials?: string;
-    /** Additional CSS classes */
-    class?: string;
-  }
-
-  let {
-    src = '',
-    alt = '',
-    rounded = false,
-    size = 'md',
-    initials = '',
-    class: className = ''
-  }: Props = $props();
-
-  // Size classes
-  const sizeClasses: Record<string, string> = {
-    xs: 'w-6 h-6 text-xs',
-    sm: 'w-8 h-8 text-xs',
-    md: 'w-10 h-10 text-sm',
-    lg: 'w-14 h-14 text-base',
-    xl: 'w-20 h-20 text-lg'
-  };
-
-  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
-  let roundedClass = $derived(rounded ? 'rounded-full' : 'rounded');
-</script>
-
-{#if src}
-  <img
-    {src}
-    {alt}
-    class="object-cover {sizeClass} {roundedClass} {className}"
-  />
-{:else if initials}
-  <div
-    class="flex items-center justify-center font-medium text-gray-600 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 {sizeClass} {roundedClass} {className}"
-  >
-    {initials}
-  </div>
-{:else}
-  <!-- Default placeholder -->
-  <div
-    class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 {sizeClass} {roundedClass} {className}"
-  >
-    <svg class="w-1/2 h-1/2 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
-    </svg>
-  </div>
-{/if}
+<script lang="ts">
+  /**
+   * Avatar Component - Flowbite-style native implementation
+   *
+   * Displays a user avatar image with optional fallback initials
+   */
+
+  interface Props {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Whether to use rounded (circle) shape */
+    rounded?: boolean;
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Fallback initials when no image */
+    initials?: string;
+    /** Additional CSS classes */
+    class?: string;
+  }
+
+  let {
+    src = '',
+    alt = '',
+    rounded = false,
+    size = 'md',
+    initials = '',
+    class: className = ''
+  }: Props = $props();
+
+  // Size classes
+  const sizeClasses: Record<string, string> = {
+    xs: 'w-6 h-6 text-xs',
+    sm: 'w-8 h-8 text-xs',
+    md: 'w-10 h-10 text-sm',
+    lg: 'w-14 h-14 text-base',
+    xl: 'w-20 h-20 text-lg'
+  };
+
+  let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
+  let roundedClass = $derived(rounded ? 'rounded-full' : 'rounded');
+</script>
+
+{#if src}
+  <img
+    {src}
+    {alt}
+    class="object-cover {sizeClass} {roundedClass} {className}"
+  />
+{:else if initials}
+  <div
+    class="flex items-center justify-center font-medium text-text-secondary bg-bg-tertiary {sizeClass} {roundedClass} {className}"
+  >
+    {initials}
+  </div>
+{:else}
+  <!-- Default placeholder -->
+  <div
+    class="flex items-center justify-center bg-bg-tertiary {sizeClass} {roundedClass} {className}"
+  >
+    <svg class="w-1/2 h-1/2 text-muted-foreground" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+    </svg>
+  </div>
+{/if}

package/dist/primitives/AvatarButton/AvatarButton.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  /**
-   * AvatarButton Component
-   * Clickable avatar/image trigger with opacity hover effect.
-   *
-   * Replaces: Button variant="avatar"
-   */
-  import { twMerge } from 'tailwind-merge';
-  import type { Snippet } from 'svelte';
-  import { buttonAvatarSizes } from '../../tokens/sizing.js';
-
-  interface Props {
-    /** Size variant */
-    size?: 'sm' | 'md' | 'lg';
-    /** Disabled state */
-    disabled?: boolean;
-    /** Content (typically an Avatar component or image) */
-    children?: Snippet;
-    /** Additional classes */
-    class?: string;
-    /** Click handler */
-    onclick?: (e: MouseEvent) => void;
-    [key: string]: unknown;
-  }
-
-  let {
-    size = 'md',
-    disabled = false,
-    children,
-    class: className = '',
-    onclick,
-    ...restProps
-  }: Props = $props();
-
-  const baseClasses = 'bg-transparent border-transparent rounded-lg focus:outline-hidden transition-all duration-150 ease-out select-none inline-flex items-center justify-center';
-  const hoverClasses = 'hover:opacity-80';
-  const disabledClasses = 'opacity-50 cursor-not-allowed';
-
-  let sizeClass = $derived(buttonAvatarSizes[size] || buttonAvatarSizes.md);
-
-  let classes = $derived(twMerge(
-    baseClasses,
-    sizeClass,
-    disabled ? disabledClasses : `${hoverClasses} cursor-pointer active:scale-[0.97] active:opacity-90`,
-    className
-  ));
-</script>
-
-<button
-  type="button"
-  class={classes}
-  {disabled}
-  {onclick}
-  {...restProps}
->
-  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
-</button>
+<script lang="ts">
+  /**
+   * AvatarButton Component
+   * Clickable avatar/image trigger with opacity hover effect.
+   *
+   * Replaces: Button variant="avatar"
+   */
+  import { twMerge } from 'tailwind-merge';
+  import type { Snippet } from 'svelte';
+  import { buttonAvatarSizes } from '../../tokens/sizing.js';
+
+  interface Props {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Disabled state */
+    disabled?: boolean;
+    /** Content (typically an Avatar component or image) */
+    children?: Snippet;
+    /** Additional classes */
+    class?: string;
+    /** Click handler */
+    onclick?: (e: MouseEvent) => void;
+    [key: string]: unknown;
+  }
+
+  let {
+    size = 'md',
+    disabled = false,
+    children,
+    class: className = '',
+    onclick,
+    ...restProps
+  }: Props = $props();
+
+  const baseClasses = 'bg-transparent border-transparent rounded-lg focus:outline-hidden transition-all duration-150 ease-out select-none inline-flex items-center justify-center';
+  const hoverClasses = 'hover:opacity-80';
+  const disabledClasses = 'opacity-50 cursor-not-allowed';
+
+  let sizeClass = $derived(buttonAvatarSizes[size] || buttonAvatarSizes.md);
+
+  let classes = $derived(twMerge(
+    baseClasses,
+    sizeClass,
+    disabled ? disabledClasses : `${hoverClasses} cursor-pointer active:scale-[0.97] active:opacity-90`,
+    className
+  ));
+</script>
+
+<button
+  type="button"
+  class={classes}
+  {disabled}
+  {onclick}
+  {...restProps}
+>
+  {#if typeof children === 'function'}{@render children()}{:else if children}{children}{/if}
+</button>

package/dist/primitives/Badges/Badge.spec.js

@@ -1,144 +1,144 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, test, expect, vi } from 'vitest';
-import Badge from './Badge.svelte';
-
-describe('Badge Component Tests', () => {
-  test('Renders with default props', () => {
-    const { container } = render(Badge);
-    const badge = container.querySelector('div');
-    expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass('inline-flex');
-    expect(badge).toHaveClass('items-center');
-  });
-
-  test('Renders with size prop', () => {
-    // Default md size renders with text classes
-    const { container: mdContainer } = render(Badge, { size: 'md' });
-    const mdBadge = mdContainer.querySelector('div');
-    expect(mdBadge).toHaveClass('font-medium');
-  });
-
-  test('Accepts size prop without error', () => {
-    // Test that various sizes render without errors
-    expect(() => render(Badge, { size: 'xs' })).not.toThrow();
-    expect(() => render(Badge, { size: 'sm' })).not.toThrow();
-    expect(() => render(Badge, { size: 'md' })).not.toThrow();
-    expect(() => render(Badge, { size: 'lg' })).not.toThrow();
-  });
-
-  test('Accepts large prop without error', () => {
-    expect(() => render(Badge, { large: true })).not.toThrow();
-  });
-
-  test('Handles variant props for colors', () => {
-    // neutral variant (default)
-    const { container: neutralContainer } = render(Badge, { variant: 'neutral' });
-    const neutralBadge = neutralContainer.querySelector('div');
-    expect(neutralBadge).toHaveClass('bg-gray-100');
-
-    // success variant
-    const { container: successContainer } = render(Badge, { variant: 'success' });
-    const successBadge = successContainer.querySelector('div');
-    expect(successBadge).toHaveClass('bg-green-100');
-
-    // warning variant
-    const { container: warningContainer } = render(Badge, { variant: 'warning' });
-    const warningBadge = warningContainer.querySelector('div');
-    expect(warningBadge).toHaveClass('bg-yellow-100');
-
-    // error variant
-    const { container: errorContainer } = render(Badge, { variant: 'error' });
-    const errorBadge = errorContainer.querySelector('div');
-    expect(errorBadge).toHaveClass('bg-red-100');
-
-    // info variant
-    const { container: infoContainer } = render(Badge, { variant: 'info' });
-    const infoBadge = infoContainer.querySelector('div');
-    expect(infoBadge).toHaveClass('bg-blue-100');
-  });
-
-  test('Handles case-insensitive variants', () => {
-    const { container: upperContainer } = render(Badge, { variant: 'SUCCESS' });
-    const upperBadge = upperContainer.querySelector('div');
-    expect(upperBadge).toHaveClass('bg-green-100');
-
-    const { container: mixedContainer } = render(Badge, { variant: 'Warning' });
-    const mixedBadge = mixedContainer.querySelector('div');
-    expect(mixedBadge).toHaveClass('bg-yellow-100');
-  });
-
-  test('Falls back to neutral variant for unknown variants', () => {
-    const { container } = render(Badge, { variant: 'unknown' });
-    const badge = container.querySelector('div');
-    expect(badge).toHaveClass('bg-gray-100');
-  });
-
-  test('Shows status dot when showDot is true', () => {
-    const { container } = render(Badge, { showDot: true });
-    const dot = container.querySelector('span.rounded-full');
-    expect(dot).toBeInTheDocument();
-    expect(dot).toHaveClass('w-1.5');
-    expect(dot).toHaveClass('h-1.5');
-  });
-
-  test('Does not show status dot by default', () => {
-    const { container } = render(Badge, { showDot: false });
-    const dot = container.querySelector('span.rounded-full');
-    expect(dot).not.toBeInTheDocument();
-  });
-
-  test('Renders as pill shape', () => {
-    const { container } = render(Badge, { pill: true });
-    const badge = container.querySelector('div');
-    expect(badge).toHaveClass('rounded-full');
-    expect(badge).toHaveClass('min-w-5');
-  });
-
-  test('Renders with rounded shape by default', () => {
-    const { container } = render(Badge, { shape: 'rounded' });
-    const badge = container.querySelector('div');
-    expect(badge).toHaveClass('rounded');
-  });
-
-  test('Renders with pill shape option', () => {
-    const { container } = render(Badge, { shape: 'pill' });
-    const badge = container.querySelector('div');
-    expect(badge).toHaveClass('rounded-full');
-  });
-
-  test('Applies custom className', () => {
-    const { container } = render(Badge, { className: 'custom-class' });
-    const badge = container.querySelector('div');
-    expect(badge).toHaveClass('custom-class');
-  });
-
-  test('Applies custom text color', () => {
-    const { container } = render(Badge, { textColor: '#ff0000' });
-    const badge = container.querySelector('div');
-    // Browser may convert hex to rgb
-    expect(badge.style.color).toBeTruthy();
-  });
-
-  test('Applies custom background color', () => {
-    const { container } = render(Badge, { bgColor: '#00ff00' });
-    const badge = container.querySelector('div');
-    // Browser may convert hex to rgb
-    expect(badge.style.backgroundColor).toBeTruthy();
-  });
-
-  test('Dispatches click event', async () => {
-    const user = userEvent.setup();
-    const onClickMock = vi.fn();
-    const { container } = render(Badge, { onclick: onClickMock });
-    const badge = container.querySelector('div');
-    await user.click(badge);
-    expect(onClickMock).toHaveBeenCalledOnce();
-  });
-
-  test('Gap class is present for icon spacing', () => {
-    const { container } = render(Badge);
-    const badge = container.querySelector('div');
-    expect(badge).toHaveClass('gap-1.5');
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import Badge from './Badge.svelte';
+
+describe('Badge Component Tests', () => {
+  test('Renders with default props', () => {
+    const { container } = render(Badge);
+    const badge = container.querySelector('div');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass('inline-flex');
+    expect(badge).toHaveClass('items-center');
+  });
+
+  test('Renders with size prop', () => {
+    // Default md size renders with text classes
+    const { container: mdContainer } = render(Badge, { size: 'md' });
+    const mdBadge = mdContainer.querySelector('div');
+    expect(mdBadge).toHaveClass('font-medium');
+  });
+
+  test('Accepts size prop without error', () => {
+    // Test that various sizes render without errors
+    expect(() => render(Badge, { size: 'xs' })).not.toThrow();
+    expect(() => render(Badge, { size: 'sm' })).not.toThrow();
+    expect(() => render(Badge, { size: 'md' })).not.toThrow();
+    expect(() => render(Badge, { size: 'lg' })).not.toThrow();
+  });
+
+  test('Accepts large prop without error', () => {
+    expect(() => render(Badge, { large: true })).not.toThrow();
+  });
+
+  test('Handles variant props for colors', () => {
+    // neutral variant (default)
+    const { container: neutralContainer } = render(Badge, { variant: 'neutral' });
+    const neutralBadge = neutralContainer.querySelector('div');
+    expect(neutralBadge).toHaveClass('bg-muted');
+
+    // success variant
+    const { container: successContainer } = render(Badge, { variant: 'success' });
+    const successBadge = successContainer.querySelector('div');
+    expect(successBadge).toHaveClass('bg-status-success-bg');
+
+    // warning variant
+    const { container: warningContainer } = render(Badge, { variant: 'warning' });
+    const warningBadge = warningContainer.querySelector('div');
+    expect(warningBadge).toHaveClass('bg-status-warning-bg');
+
+    // error variant
+    const { container: errorContainer } = render(Badge, { variant: 'error' });
+    const errorBadge = errorContainer.querySelector('div');
+    expect(errorBadge).toHaveClass('bg-status-error-bg');
+
+    // info variant
+    const { container: infoContainer } = render(Badge, { variant: 'info' });
+    const infoBadge = infoContainer.querySelector('div');
+    expect(infoBadge).toHaveClass('bg-status-info-bg');
+  });
+
+  test('Handles case-insensitive variants', () => {
+    const { container: upperContainer } = render(Badge, { variant: 'SUCCESS' });
+    const upperBadge = upperContainer.querySelector('div');
+    expect(upperBadge).toHaveClass('bg-status-success-bg');
+
+    const { container: mixedContainer } = render(Badge, { variant: 'Warning' });
+    const mixedBadge = mixedContainer.querySelector('div');
+    expect(mixedBadge).toHaveClass('bg-status-warning-bg');
+  });
+
+  test('Falls back to neutral variant for unknown variants', () => {
+    const { container } = render(Badge, { variant: 'unknown' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('bg-muted');
+  });
+
+  test('Shows status dot when showDot is true', () => {
+    const { container } = render(Badge, { showDot: true });
+    const dot = container.querySelector('span.rounded-full');
+    expect(dot).toBeInTheDocument();
+    expect(dot).toHaveClass('w-1.5');
+    expect(dot).toHaveClass('h-1.5');
+  });
+
+  test('Does not show status dot by default', () => {
+    const { container } = render(Badge, { showDot: false });
+    const dot = container.querySelector('span.rounded-full');
+    expect(dot).not.toBeInTheDocument();
+  });
+
+  test('Renders as pill shape', () => {
+    const { container } = render(Badge, { pill: true });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('rounded-full');
+    expect(badge).toHaveClass('min-w-5');
+  });
+
+  test('Renders with rounded shape by default', () => {
+    const { container } = render(Badge, { shape: 'rounded' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('rounded');
+  });
+
+  test('Renders with pill shape option', () => {
+    const { container } = render(Badge, { shape: 'pill' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('rounded-full');
+  });
+
+  test('Applies custom className', () => {
+    const { container } = render(Badge, { className: 'custom-class' });
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('custom-class');
+  });
+
+  test('Applies custom text color', () => {
+    const { container } = render(Badge, { textColor: 'hsl(var(--accent-danger))' });
+    const badge = container.querySelector('div');
+    // Browser may convert hex to rgb
+    expect(badge.style.color).toBeTruthy();
+  });
+
+  test('Applies custom background color', () => {
+    const { container } = render(Badge, { bgColor: 'hsl(var(--accent-success))' });
+    const badge = container.querySelector('div');
+    // Browser may convert hex to rgb
+    expect(badge.style.backgroundColor).toBeTruthy();
+  });
+
+  test('Dispatches click event', async () => {
+    const user = userEvent.setup();
+    const onClickMock = vi.fn();
+    const { container } = render(Badge, { onclick: onClickMock });
+    const badge = container.querySelector('div');
+    await user.click(badge);
+    expect(onClickMock).toHaveBeenCalledOnce();
+  });
+
+  test('Gap class is present for icon spacing', () => {
+    const { container } = render(Badge);
+    const badge = container.querySelector('div');
+    expect(badge).toHaveClass('gap-1.5');
+  });
+});