@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/patterns/chat/ChatMessageGroup.svelte

@@ -1,57 +1,57 @@
-<script lang="ts">
-  /**
-   * ChatMessageGroup - Groups multiple items from the same sender
-   *
-   * Wraps avatar, sender name, multiple content items, and timestamp
-   * for when a user sends multiple things at once (status change + message).
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Sender name */
-    senderName?: string;
-    /** Timestamp to display */
-    timestamp?: string;
-    /** Direction - inbound (left) or outbound (right) */
-    direction?: 'inbound' | 'outbound';
-    /** Additional CSS classes */
-    className?: string;
-    /** Avatar slot */
-    avatar?: Snippet;
-    /** Content items (status badges, messages, etc.) */
-    children?: Snippet;
-  }
-
-  let {
-    senderName,
-    timestamp,
-    direction = 'inbound',
-    className = '',
-    avatar,
-    children,
-  }: Props = $props();
-
-  let isOutbound = $derived(direction === 'outbound');
-</script>
-
-<div class={classNames('flex', isOutbound ? 'justify-end' : 'justify-start', className)}>
-  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
-    {#if avatar && !isOutbound}
-      {@render avatar()}
-    {/if}
-    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
-      {#if senderName && !isOutbound}
-        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
-      {/if}
-      <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'} gap-1">
-        {@render children?.()}
-      </div>
-      {#if timestamp}
-        <span class="text-[10px] text-gray-400 mt-0.5 px-2">
-          {#if isOutbound && senderName}{senderName} · {/if}{timestamp}
-        </span>
-      {/if}
-    </div>
-  </div>
-</div>
+<script lang="ts">
+  /**
+   * ChatMessageGroup - Groups multiple items from the same sender
+   *
+   * Wraps avatar, sender name, multiple content items, and timestamp
+   * for when a user sends multiple things at once (status change + message).
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Sender name */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Direction - inbound (left) or outbound (right) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Avatar slot */
+    avatar?: Snippet;
+    /** Content items (status badges, messages, etc.) */
+    children?: Snippet;
+  }
+
+  let {
+    senderName,
+    timestamp,
+    direction = 'inbound',
+    className = '',
+    avatar,
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+</script>
+
+<div class={classNames('flex', isOutbound ? 'justify-end' : 'justify-start', className)}>
+  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
+    {#if avatar && !isOutbound}
+      {@render avatar()}
+    {/if}
+    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
+      {#if senderName && !isOutbound}
+        <span class="text-xs text-muted-foreground mb-1 px-2">{senderName}</span>
+      {/if}
+      <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'} gap-1">
+        {@render children?.()}
+      </div>
+      {#if timestamp}
+        <span class="text-[10px] text-muted-foreground mt-0.5 px-2">
+          {#if isOutbound && senderName}{senderName} · {/if}{timestamp}
+        </span>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/patterns/chat/ChatSlotUpdate.spec.js

@@ -1,65 +1,65 @@
-import { render } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatSlotUpdate from './ChatSlotUpdate.svelte';
-
-describe('ChatSlotUpdate', () => {
-  test('renders fromValue and toValue', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: '8:00 PM', toValue: '9:00 PM' }
-    });
-    expect(container.textContent).toContain('8:00 PM');
-    expect(container.textContent).toContain('9:00 PM');
-  });
-
-  test('renders arrow between values', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'Slot A', toValue: 'Slot B' }
-    });
-    expect(container.textContent).toContain('→');
-  });
-
-  test('bubble variant has rounded styling', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'A', toValue: 'B', variant: 'bubble' }
-    });
-    const el = container.querySelector('[class*="rounded"]');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('bubble variant inbound has rounded-bl-sm', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'A', toValue: 'B', variant: 'bubble', outbound: false }
-    });
-    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
-  });
-
-  test('bubble variant outbound has rounded-br-sm', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'A', toValue: 'B', variant: 'bubble', outbound: true }
-    });
-    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
-  });
-
-  test('inline variant has smaller styling', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'A', toValue: 'B', variant: 'inline' }
-    });
-    const el = container.querySelector('.text-xs');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('default variant is bubble', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'A', toValue: 'B' }
-    });
-    const el = container.querySelector('[class*="rounded"]');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatSlotUpdate, {
-      props: { fromValue: 'A', toValue: 'B', className: 'custom-slot' }
-    });
-    expect(container.querySelector('.custom-slot')).toBeInTheDocument();
-  });
-});
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatSlotUpdate from './ChatSlotUpdate.svelte';
+
+describe('ChatSlotUpdate', () => {
+  test('renders fromValue and toValue', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: '8:00 PM', toValue: '9:00 PM' }
+    });
+    expect(container.textContent).toContain('8:00 PM');
+    expect(container.textContent).toContain('9:00 PM');
+  });
+
+  test('renders arrow between values', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'Slot A', toValue: 'Slot B' }
+    });
+    expect(container.textContent).toContain('→');
+  });
+
+  test('bubble variant has rounded styling', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'bubble' }
+    });
+    const el = container.querySelector('[class*="rounded"]');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('bubble variant inbound has rounded-bl-sm', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'bubble', outbound: false }
+    });
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('bubble variant outbound has rounded-br-sm', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'bubble', outbound: true }
+    });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('inline variant has smaller styling', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', variant: 'inline' }
+    });
+    const el = container.querySelector('.text-xs');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('default variant is bubble', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B' }
+    });
+    const el = container.querySelector('[class*="rounded"]');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatSlotUpdate, {
+      props: { fromValue: 'A', toValue: 'B', className: 'custom-slot' }
+    });
+    expect(container.querySelector('.custom-slot')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatSlotUpdate.svelte

@@ -1,46 +1,46 @@
-<script lang="ts">
-  /**
-   * ChatSlotUpdate - Slot/role change display
-   *
-   * Shows "{fromValue} → {toValue}" for role or slot changes.
-   */
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Original value */
-    fromValue: string;
-    /** New value */
-    toValue: string;
-    /** Style variant - bubble (in message context) or inline (in notice) */
-    variant?: 'bubble' | 'inline';
-    /** Whether this is outbound (right side) */
-    outbound?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    fromValue,
-    toValue,
-    variant = 'bubble',
-    outbound = false,
-    className = '',
-  }: Props = $props();
-
-  let classes = $derived(
-    variant === 'bubble'
-      ? classNames(
-          'px-4 py-2.5 rounded-2xl text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
-          outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
-          className
-        )
-      : classNames(
-          'text-xs font-medium text-gray-500 dark:text-gray-400',
-          className
-        )
-  );
-</script>
-
-<span class={classes}>
-  {fromValue} → {toValue}
-</span>
+<script lang="ts">
+  /**
+   * ChatSlotUpdate - Slot/role change display
+   *
+   * Shows "{fromValue} → {toValue}" for role or slot changes.
+   */
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Original value */
+    fromValue: string;
+    /** New value */
+    toValue: string;
+    /** Style variant - bubble (in message context) or inline (in notice) */
+    variant?: 'bubble' | 'inline';
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromValue,
+    toValue,
+    variant = 'bubble',
+    outbound = false,
+    className = '',
+  }: Props = $props();
+
+  let classes = $derived(
+    variant === 'bubble'
+      ? classNames(
+          'px-4 py-2.5 rounded-2xl text-sm bg-muted text-text-secondary',
+          outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+          className
+        )
+      : classNames(
+          'text-xs font-medium text-muted-foreground',
+          className
+        )
+  );
+</script>
+
+<span class={classes}>
+  {fromValue} → {toValue}
+</span>

package/dist/patterns/chat/ChatStatusBadge.spec.js

@@ -1,79 +1,79 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatStatusBadge from './ChatStatusBadge.svelte';
-
-describe('ChatStatusBadge', () => {
-  test('renders confirmed status with green styling', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
-    expect(screen.getByText(/confirmed/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="green"]');
-    expect(badge).toBeInTheDocument();
-  });
-
-  test('renders declined status with red styling', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
-    expect(screen.getByText(/declined/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="red"]');
-    expect(badge).toBeInTheDocument();
-  });
-
-  test('renders canceled status with red styling', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'canceled' } });
-    expect(screen.getByText(/canceled/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="red"]');
-    expect(badge).toBeInTheDocument();
-  });
-
-  test('renders invited status with blue styling', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
-    expect(screen.getByText(/invited/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="blue"]');
-    expect(badge).toBeInTheDocument();
-  });
-
-  test('renders unknown status with gray styling', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'pending' } });
-    expect(screen.getByText(/pending/i)).toBeInTheDocument();
-    const badge = container.querySelector('[class*="gray"]');
-    expect(badge).toBeInTheDocument();
-  });
-
-  test('outbound applies rounded-br-sm', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', outbound: true } });
-    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
-  });
-
-  test('inbound applies rounded-bl-sm', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', outbound: false } });
-    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', className: 'my-badge' } });
-    expect(container.querySelector('.my-badge')).toBeInTheDocument();
-  });
-
-  test('renders icon for confirmed status', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  test('renders icon for declined status', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  test('renders icon for invited status', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  test('no icon for unknown status', () => {
-    const { container } = render(ChatStatusBadge, { props: { status: 'something-else' } });
-    const svg = container.querySelector('svg');
-    expect(svg).toBeNull();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatStatusBadge from './ChatStatusBadge.svelte';
+
+describe('ChatStatusBadge', () => {
+  test('renders confirmed status with success styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
+    expect(screen.getByText(/confirmed/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="accent-success"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders declined status with danger styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
+    expect(screen.getByText(/declined/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="accent-danger"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders canceled status with danger styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'canceled' } });
+    expect(screen.getByText(/canceled/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="accent-danger"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders invited status with brand styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
+    expect(screen.getByText(/invited/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="brand-primary"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('renders unknown status with muted styling', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'pending' } });
+    expect(screen.getByText(/pending/i)).toBeInTheDocument();
+    const badge = container.querySelector('[class*="bg-muted"]');
+    expect(badge).toBeInTheDocument();
+  });
+
+  test('outbound applies rounded-br-sm', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', outbound: true } });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('inbound applies rounded-bl-sm', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', outbound: false } });
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed', className: 'my-badge' } });
+    expect(container.querySelector('.my-badge')).toBeInTheDocument();
+  });
+
+  test('renders icon for confirmed status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'confirmed' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('renders icon for declined status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'declined' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('renders icon for invited status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'invited' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+  });
+
+  test('no icon for unknown status', () => {
+    const { container } = render(ChatStatusBadge, { props: { status: 'something-else' } });
+    const svg = container.querySelector('svg');
+    expect(svg).toBeNull();
+  });
+});