@getmicdrop/svelte-components 5.4.1 → 5.4.2

package/dist/primitives/Avatar/Avatar.stories.svelte

@@ -1,94 +1,94 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Avatar from './Avatar.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Avatar',
-    component: Avatar,
-    tags: ['autodocs'],
-    argTypes: {
-      size: {
-        control: 'select',
-        options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      },
-      src: { control: 'text' },
-      alt: { control: 'text' },
-      initials: { control: 'text' },
-    },
-    parameters: {
-      docs: {
-        description: {
-          component: 'User profile picture component with fallback to initials.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <Avatar />
-  {/snippet}
-</Story>
-
-<Story name="With Initials" args={{ initials: 'JD' }}>
-  {#snippet template(args)}
-    <Avatar {...args} />
-  {/snippet}
-</Story>
-
-<Story name="With Image" args={{ src: 'https://i.pravatar.cc/150?img=3', alt: 'User avatar' }}>
-  {#snippet template(args)}
-    <Avatar {...args} />
-  {/snippet}
-</Story>
-
-<Story name="All Sizes">
-  {#snippet template()}
-    <div class="flex items-end gap-4">
-      <div class="text-center">
-        <Avatar size="xs" initials="XS" />
-        <p class="text-xs text-gray-500 mt-1">xs</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="sm" initials="SM" />
-        <p class="text-xs text-gray-500 mt-1">sm</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="md" initials="MD" />
-        <p class="text-xs text-gray-500 mt-1">md</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="lg" initials="LG" />
-        <p class="text-xs text-gray-500 mt-1">lg</p>
-      </div>
-      <div class="text-center">
-        <Avatar size="xl" initials="XL" />
-        <p class="text-xs text-gray-500 mt-1">xl</p>
-      </div>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Image Sizes">
-  {#snippet template()}
-    <div class="flex items-end gap-4">
-      <Avatar size="xs" src="https://i.pravatar.cc/150?img=1" />
-      <Avatar size="sm" src="https://i.pravatar.cc/150?img=2" />
-      <Avatar size="md" src="https://i.pravatar.cc/150?img=3" />
-      <Avatar size="lg" src="https://i.pravatar.cc/150?img=4" />
-      <Avatar size="xl" src="https://i.pravatar.cc/150?img=5" />
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Group">
-  {#snippet template()}
-    <div class="flex -space-x-4">
-      <Avatar src="https://i.pravatar.cc/150?img=1" class="ring-2 ring-white" />
-      <Avatar src="https://i.pravatar.cc/150?img=2" class="ring-2 ring-white" />
-      <Avatar src="https://i.pravatar.cc/150?img=3" class="ring-2 ring-white" />
-      <Avatar initials="+5" class="ring-2 ring-white" />
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Avatar from './Avatar.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Avatar',
+    component: Avatar,
+    tags: ['autodocs'],
+    argTypes: {
+      size: {
+        control: 'select',
+        options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      },
+      src: { control: 'text' },
+      alt: { control: 'text' },
+      initials: { control: 'text' },
+    },
+    parameters: {
+      docs: {
+        description: {
+          component: 'User profile picture component with fallback to initials.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Avatar />
+  {/snippet}
+</Story>
+
+<Story name="With Initials" args={{ initials: 'JD' }}>
+  {#snippet template(args)}
+    <Avatar {...args} />
+  {/snippet}
+</Story>
+
+<Story name="With Image" args={{ src: 'https://i.pravatar.cc/150?img=3', alt: 'User avatar' }}>
+  {#snippet template(args)}
+    <Avatar {...args} />
+  {/snippet}
+</Story>
+
+<Story name="All Sizes">
+  {#snippet template()}
+    <div class="flex items-end gap-4">
+      <div class="text-center">
+        <Avatar size="xs" initials="XS" />
+        <p class="text-xs text-gray-500 mt-1">xs</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="sm" initials="SM" />
+        <p class="text-xs text-gray-500 mt-1">sm</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="md" initials="MD" />
+        <p class="text-xs text-gray-500 mt-1">md</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="lg" initials="LG" />
+        <p class="text-xs text-gray-500 mt-1">lg</p>
+      </div>
+      <div class="text-center">
+        <Avatar size="xl" initials="XL" />
+        <p class="text-xs text-gray-500 mt-1">xl</p>
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Image Sizes">
+  {#snippet template()}
+    <div class="flex items-end gap-4">
+      <Avatar size="xs" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar size="sm" src="https://i.pravatar.cc/150?img=2" />
+      <Avatar size="md" src="https://i.pravatar.cc/150?img=3" />
+      <Avatar size="lg" src="https://i.pravatar.cc/150?img=4" />
+      <Avatar size="xl" src="https://i.pravatar.cc/150?img=5" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Group">
+  {#snippet template()}
+    <div class="flex -space-x-4">
+      <Avatar src="https://i.pravatar.cc/150?img=1" class="ring-2 ring-white" />
+      <Avatar src="https://i.pravatar.cc/150?img=2" class="ring-2 ring-white" />
+      <Avatar src="https://i.pravatar.cc/150?img=3" class="ring-2 ring-white" />
+      <Avatar initials="+5" class="ring-2 ring-white" />
+    </div>
+  {/snippet}
+</Story>

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-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}

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

@@ -1,103 +1,103 @@
-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';
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component, container } = render(Badge, { props: { ...args } });
-  component.$on('click', onClick);
-  const badge = container.querySelector('div');
-  return {
-    user,
-    badge,
-    onClick,
-  };
-}
-
-describe('Badge Component Tests', () => {
-  test('Renders with default props', () => {
-    const { badge } = setupTest();
-    expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass('badge');
-  });
-
-  test('Renders with different sizes', () => {
-    const { badge: smallBadge } = setupTest({ size: 'small' });
-    expect(smallBadge).toHaveClass('badge-sm');
-
-    const { badge: mediumBadge } = setupTest({ size: 'medium' });
-    expect(mediumBadge).toHaveClass('badge-md');
-
-    const { badge: largeBadge } = setupTest({ size: 'large' });
-    expect(largeBadge).toHaveClass('badge-lg');
-  });
-
-  test('Handles role variant props for colors', () => {
-    const { badge: hostBadge } = setupTest({ variant: 'host' });
-    expect(hostBadge).toHaveClass('badge-host');
-
-    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
-    expect(headlinerBadge).toHaveClass('badge-headliner');
-
-    const { badge: featureBadge } = setupTest({ variant: 'feature' });
-    expect(featureBadge).toHaveClass('badge-feature');
-
-    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
-    expect(specialGuestBadge).toHaveClass('badge-special-guest');
-
-    const { badge: openerBadge } = setupTest({ variant: 'opener' });
-    expect(openerBadge).toHaveClass('badge-opener');
-
-    const { badge: guestBadge } = setupTest({ variant: 'guest' });
-    expect(guestBadge).toHaveClass('badge-guest');
-
-    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
-    expect(teacherBadge).toHaveClass('badge-teacher');
-
-    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
-    expect(assistantBadge).toHaveClass('badge-assistant');
-  });
-
-  test('Handles status variant props for colors', () => {
-    const { badge: successBadge } = setupTest({ variant: 'success' });
-    expect(successBadge).toHaveClass('badge-success');
-
-    const { badge: warningBadge } = setupTest({ variant: 'warning' });
-    expect(warningBadge).toHaveClass('badge-warning');
-
-    const { badge: errorBadge } = setupTest({ variant: 'error' });
-    expect(errorBadge).toHaveClass('badge-error');
-
-    const { badge: infoBadge } = setupTest({ variant: 'info' });
-    expect(infoBadge).toHaveClass('badge-info');
-
-    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
-    expect(neutralBadge).toHaveClass('badge-neutral');
-  });
-
-  test('Falls back to neutral variant for unknown variants', () => {
-    const { badge } = setupTest({ variant: 'unknown' });
-    expect(badge).toHaveClass('badge-neutral');
-  });
-
-  test('Handles case-insensitive variants', () => {
-    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
-    expect(upperBadge).toHaveClass('badge-host');
-
-    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
-    expect(mixedBadge).toHaveClass('badge-headliner');
-  });
-
-  test('Falls back to medium size for unknown sizes', () => {
-    const { badge } = setupTest({ size: 'unknown' });
-    expect(badge).toHaveClass('badge-md');
-  });
-
-  test('Dispatches click event', async () => {
-    const { user, badge, onClick } = setupTest();
-    await user.click(badge);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-});
+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';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component, container } = render(Badge, { props: { ...args } });
+  component.$on('click', onClick);
+  const badge = container.querySelector('div');
+  return {
+    user,
+    badge,
+    onClick,
+  };
+}
+
+describe('Badge Component Tests', () => {
+  test('Renders with default props', () => {
+    const { badge } = setupTest();
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass('badge');
+  });
+
+  test('Renders with different sizes', () => {
+    const { badge: smallBadge } = setupTest({ size: 'small' });
+    expect(smallBadge).toHaveClass('badge-sm');
+
+    const { badge: mediumBadge } = setupTest({ size: 'medium' });
+    expect(mediumBadge).toHaveClass('badge-md');
+
+    const { badge: largeBadge } = setupTest({ size: 'large' });
+    expect(largeBadge).toHaveClass('badge-lg');
+  });
+
+  test('Handles role variant props for colors', () => {
+    const { badge: hostBadge } = setupTest({ variant: 'host' });
+    expect(hostBadge).toHaveClass('badge-host');
+
+    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
+    expect(headlinerBadge).toHaveClass('badge-headliner');
+
+    const { badge: featureBadge } = setupTest({ variant: 'feature' });
+    expect(featureBadge).toHaveClass('badge-feature');
+
+    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
+    expect(specialGuestBadge).toHaveClass('badge-special-guest');
+
+    const { badge: openerBadge } = setupTest({ variant: 'opener' });
+    expect(openerBadge).toHaveClass('badge-opener');
+
+    const { badge: guestBadge } = setupTest({ variant: 'guest' });
+    expect(guestBadge).toHaveClass('badge-guest');
+
+    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
+    expect(teacherBadge).toHaveClass('badge-teacher');
+
+    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
+    expect(assistantBadge).toHaveClass('badge-assistant');
+  });
+
+  test('Handles status variant props for colors', () => {
+    const { badge: successBadge } = setupTest({ variant: 'success' });
+    expect(successBadge).toHaveClass('badge-success');
+
+    const { badge: warningBadge } = setupTest({ variant: 'warning' });
+    expect(warningBadge).toHaveClass('badge-warning');
+
+    const { badge: errorBadge } = setupTest({ variant: 'error' });
+    expect(errorBadge).toHaveClass('badge-error');
+
+    const { badge: infoBadge } = setupTest({ variant: 'info' });
+    expect(infoBadge).toHaveClass('badge-info');
+
+    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
+    expect(neutralBadge).toHaveClass('badge-neutral');
+  });
+
+  test('Falls back to neutral variant for unknown variants', () => {
+    const { badge } = setupTest({ variant: 'unknown' });
+    expect(badge).toHaveClass('badge-neutral');
+  });
+
+  test('Handles case-insensitive variants', () => {
+    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
+    expect(upperBadge).toHaveClass('badge-host');
+
+    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
+    expect(mixedBadge).toHaveClass('badge-headliner');
+  });
+
+  test('Falls back to medium size for unknown sizes', () => {
+    const { badge } = setupTest({ size: 'unknown' });
+    expect(badge).toHaveClass('badge-md');
+  });
+
+  test('Dispatches click event', async () => {
+    const { user, badge, onClick } = setupTest();
+    await user.click(badge);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});