@getmicdrop/svelte-components 5.21.0 → 5.21.2

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

@@ -1,59 +1,59 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatActivityNotice from './ChatActivityNotice.svelte';
-
-describe('ChatActivityNotice', () => {
-  test('renders without crashing', () => {
-    const { container } = render(ChatActivityNotice);
-    expect(container.firstElementChild).toBeInTheDocument();
-  });
-
-  test('shows actor name', () => {
-    render(ChatActivityNotice, { props: { actorName: 'John' } });
-    expect(screen.getByText('John')).toBeInTheDocument();
-  });
-
-  test('shows timestamp', () => {
-    render(ChatActivityNotice, { props: { timestamp: '2:00 PM' } });
-    expect(screen.getByText('2:00 PM')).toBeInTheDocument();
-  });
-
-  test('shows dot separator when both actorName and timestamp', () => {
-    const { container } = render(ChatActivityNotice, {
-      props: { actorName: 'John', timestamp: '2:00 PM' }
-    });
-    expect(container.textContent).toContain('·');
-  });
-
-  test('no separator when only actorName', () => {
-    const { container } = render(ChatActivityNotice, {
-      props: { actorName: 'John' }
-    });
-    expect(container.textContent).not.toContain('·');
-  });
-
-  test('no separator when only timestamp', () => {
-    const { container } = render(ChatActivityNotice, {
-      props: { timestamp: '2:00 PM' }
-    });
-    expect(container.textContent).not.toContain('·');
-  });
-
-  test('hides metadata line when neither actorName nor timestamp', () => {
-    const { container } = render(ChatActivityNotice);
-    // No actor or timestamp text should appear
-    const metaText = container.textContent.trim();
-    expect(metaText).toBe('');
-  });
-
-  test('renders decorative lines', () => {
-    const { container } = render(ChatActivityNotice, { props: { actorName: 'Test' } });
-    const lines = container.querySelectorAll('.bg-gray-200, [class*="h-px"]');
-    expect(lines.length).toBeGreaterThanOrEqual(1);
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatActivityNotice, { props: { className: 'my-notice' } });
-    expect(container.querySelector('.my-notice')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatActivityNotice from './ChatActivityNotice.svelte';
+
+describe('ChatActivityNotice', () => {
+  test('renders without crashing', () => {
+    const { container } = render(ChatActivityNotice);
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+
+  test('shows actor name', () => {
+    render(ChatActivityNotice, { props: { actorName: 'John' } });
+    expect(screen.getByText('John')).toBeInTheDocument();
+  });
+
+  test('shows timestamp', () => {
+    render(ChatActivityNotice, { props: { timestamp: '2:00 PM' } });
+    expect(screen.getByText('2:00 PM')).toBeInTheDocument();
+  });
+
+  test('shows dot separator when both actorName and timestamp', () => {
+    const { container } = render(ChatActivityNotice, {
+      props: { actorName: 'John', timestamp: '2:00 PM' }
+    });
+    expect(container.textContent).toContain('·');
+  });
+
+  test('no separator when only actorName', () => {
+    const { container } = render(ChatActivityNotice, {
+      props: { actorName: 'John' }
+    });
+    expect(container.textContent).not.toContain('·');
+  });
+
+  test('no separator when only timestamp', () => {
+    const { container } = render(ChatActivityNotice, {
+      props: { timestamp: '2:00 PM' }
+    });
+    expect(container.textContent).not.toContain('·');
+  });
+
+  test('hides metadata line when neither actorName nor timestamp', () => {
+    const { container } = render(ChatActivityNotice);
+    // No actor or timestamp text should appear
+    const metaText = container.textContent.trim();
+    expect(metaText).toBe('');
+  });
+
+  test('renders decorative lines', () => {
+    const { container } = render(ChatActivityNotice, { props: { actorName: 'Test' } });
+    const lines = container.querySelectorAll('.bg-bg-tertiary, [class*="h-px"]');
+    expect(lines.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatActivityNotice, { props: { className: 'my-notice' } });
+    expect(container.querySelector('.my-notice')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatActivityNotice.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-  /**
-   * ChatActivityNotice - Centered notice for silent/background activity
-   *
-   * Displays activity that happened without notification (e.g., admin status changes)
-   * in a subtle centered format with decorative lines.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Actor name who performed the action */
-    actorName?: string;
-    /** Timestamp of the action */
-    timestamp?: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Content to display (status changes, etc.) */
-    children?: Snippet;
-  }
-
-  let {
-    actorName,
-    timestamp,
-    className = '',
-    children,
-  }: Props = $props();
-</script>
-
-<div class={classNames('flex items-center justify-center gap-3 py-3', className)}>
-  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
-  <div class="flex flex-col items-center gap-1">
-    {@render children?.()}
-    {#if actorName || timestamp}
-      <span class="text-[10px] text-gray-400">
-        {#if actorName}{actorName}{/if}{#if actorName && timestamp} · {/if}{#if timestamp}{timestamp}{/if}
-      </span>
-    {/if}
-  </div>
-  <div class="h-px bg-gray-200 dark:bg-gray-700 w-12"></div>
-</div>
+<script lang="ts">
+  /**
+   * ChatActivityNotice - Centered notice for silent/background activity
+   *
+   * Displays activity that happened without notification (e.g., admin status changes)
+   * in a subtle centered format with decorative lines.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Actor name who performed the action */
+    actorName?: string;
+    /** Timestamp of the action */
+    timestamp?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Content to display (status changes, etc.) */
+    children?: Snippet;
+  }
+
+  let {
+    actorName,
+    timestamp,
+    className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div class={classNames('flex items-center justify-center gap-3 py-3', className)}>
+  <div class="h-px bg-bg-tertiary w-12"></div>
+  <div class="flex flex-col items-center gap-1">
+    {@render children?.()}
+    {#if actorName || timestamp}
+      <span class="text-[10px] text-muted-foreground">
+        {#if actorName}{actorName}{/if}{#if actorName && timestamp} · {/if}{#if timestamp}{timestamp}{/if}
+      </span>
+    {/if}
+  </div>
+  <div class="h-px bg-bg-tertiary w-12"></div>
+</div>

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

@@ -1,91 +1,91 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { expect, describe, test, vi } from 'vitest';
-import ChatBubble from './ChatBubble.svelte';
-
-describe('ChatBubble', () => {
-  test('renders with default inbound direction', () => {
-    const { container } = render(ChatBubble);
-    const bubble = container.querySelector('.rounded-bl-sm');
-    expect(bubble).toBeInTheDocument();
-  });
-
-  test('renders outbound direction', () => {
-    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
-    const bubble = container.querySelector('.rounded-br-sm');
-    expect(bubble).toBeInTheDocument();
-  });
-
-  test('outbound uses flex-row-reverse', () => {
-    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
-    const wrapper = container.querySelector('.flex-row-reverse');
-    expect(wrapper).toBeInTheDocument();
-  });
-
-  test('outbound uses items-end', () => {
-    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
-    const el = container.querySelector('.items-end');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('inbound uses items-start', () => {
-    const { container } = render(ChatBubble);
-    const el = container.querySelector('.items-start');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('shows sender name for inbound', () => {
-    render(ChatBubble, { props: { direction: 'inbound', senderName: 'Alice' } });
-    expect(screen.getByText('Alice')).toBeInTheDocument();
-  });
-
-  test('hides sender name for outbound', () => {
-    render(ChatBubble, { props: { direction: 'outbound', senderName: 'Alice' } });
-    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
-  });
-
-  test('shows timestamp when not failed', () => {
-    render(ChatBubble, { props: { timestamp: '2:30 PM' } });
-    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
-  });
-
-  test('shows failed indicator', () => {
-    const { container } = render(ChatBubble, { props: { failed: true } });
-    const redIndicator = container.querySelector('.text-red-500, .bg-red-500, [class*="red"]');
-    expect(redIndicator).toBeInTheDocument();
-  });
-
-  test('shows error message when failed with errorMessage', () => {
-    render(ChatBubble, { props: { failed: true, errorMessage: 'Send failed' } });
-    expect(screen.getByText('Send failed')).toBeInTheDocument();
-  });
-
-  test('shows timestamp even when failed (below error)', () => {
-    render(ChatBubble, { props: { failed: true, timestamp: '2:30 PM' } });
-    // timestamp still renders; error indicator shown alongside
-    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
-  });
-
-  test('shows retry button when failed with onretry', async () => {
-    const onretry = vi.fn();
-    const { container } = render(ChatBubble, {
-      props: { failed: true, errorMessage: 'Error', onretry }
-    });
-    const button = container.querySelector('button');
-    expect(button).toBeInTheDocument();
-    await userEvent.click(button);
-    expect(onretry).toHaveBeenCalled();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatBubble, { props: { className: 'my-bubble' } });
-    const el = container.querySelector('.my-bubble');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('no sender name when not provided for inbound', () => {
-    const { container } = render(ChatBubble, { props: { direction: 'inbound' } });
-    // Should not crash and should render
-    expect(container.firstElementChild).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, describe, test, vi } from 'vitest';
+import ChatBubble from './ChatBubble.svelte';
+
+describe('ChatBubble', () => {
+  test('renders with default inbound direction', () => {
+    const { container } = render(ChatBubble);
+    const bubble = container.querySelector('.rounded-bl-sm');
+    expect(bubble).toBeInTheDocument();
+  });
+
+  test('renders outbound direction', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
+    const bubble = container.querySelector('.rounded-br-sm');
+    expect(bubble).toBeInTheDocument();
+  });
+
+  test('outbound uses flex-row-reverse', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
+    const wrapper = container.querySelector('.flex-row-reverse');
+    expect(wrapper).toBeInTheDocument();
+  });
+
+  test('outbound uses items-end', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'outbound' } });
+    const el = container.querySelector('.items-end');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('inbound uses items-start', () => {
+    const { container } = render(ChatBubble);
+    const el = container.querySelector('.items-start');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('shows sender name for inbound', () => {
+    render(ChatBubble, { props: { direction: 'inbound', senderName: 'Alice' } });
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  test('hides sender name for outbound', () => {
+    render(ChatBubble, { props: { direction: 'outbound', senderName: 'Alice' } });
+    expect(screen.queryByText('Alice')).not.toBeInTheDocument();
+  });
+
+  test('shows timestamp when not failed', () => {
+    render(ChatBubble, { props: { timestamp: '2:30 PM' } });
+    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
+  });
+
+  test('shows failed indicator', () => {
+    const { container } = render(ChatBubble, { props: { failed: true } });
+    const redIndicator = container.querySelector('.text-accent-danger, .bg-accent-danger, [class*="red"]');
+    expect(redIndicator).toBeInTheDocument();
+  });
+
+  test('shows error message when failed with errorMessage', () => {
+    render(ChatBubble, { props: { failed: true, errorMessage: 'Send failed' } });
+    expect(screen.getByText('Send failed')).toBeInTheDocument();
+  });
+
+  test('shows timestamp even when failed (below error)', () => {
+    render(ChatBubble, { props: { failed: true, timestamp: '2:30 PM' } });
+    // timestamp still renders; error indicator shown alongside
+    expect(screen.getByText('2:30 PM')).toBeInTheDocument();
+  });
+
+  test('shows retry button when failed with onretry', async () => {
+    const onretry = vi.fn();
+    const { container } = render(ChatBubble, {
+      props: { failed: true, errorMessage: 'Error', onretry }
+    });
+    const button = container.querySelector('button');
+    expect(button).toBeInTheDocument();
+    await userEvent.click(button);
+    expect(onretry).toHaveBeenCalled();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatBubble, { props: { className: 'my-bubble' } });
+    const el = container.querySelector('.my-bubble');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('no sender name when not provided for inbound', () => {
+    const { container } = render(ChatBubble, { props: { direction: 'inbound' } });
+    // Should not crash and should render
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatBubble.svelte

@@ -1,103 +1,103 @@
-<script lang="ts">
-  /**
-   * ChatBubble - Message bubble for chat interfaces
-   *
-   * Displays inbound (left) or outbound (right) messages with optional
-   * error state, timestamp, and sender name.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-  import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
-
-  const defaultLabels = {
-    retry: 'retry',
-  };
-
-  interface Props {
-    /** Message direction - inbound (from other) or outbound (from us) */
-    direction?: 'inbound' | 'outbound';
-    /** Sender name (shown for inbound messages) */
-    senderName?: string;
-    /** Timestamp to display */
-    timestamp?: string;
-    /** Whether delivery failed */
-    failed?: boolean;
-    /** Error message when failed */
-    errorMessage?: string;
-    /** Callback when retry is clicked */
-    onretry?: () => void;
-    /** Additional CSS classes for the bubble */
-    className?: string;
-    /** Avatar snippet (for inbound messages) */
-    avatar?: Snippet;
-    /** Message content */
-    children?: Snippet;
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    direction = 'inbound',
-    senderName,
-    timestamp,
-    failed = false,
-    errorMessage,
-    onretry,
-    className = '',
-    avatar,
-    children,
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let isOutbound = $derived(direction === 'outbound');
-
-  let bubbleClasses = $derived(
-    classNames(
-      'px-4 py-2.5 rounded-2xl text-sm',
-      isOutbound
-        ? 'bg-blue-600 text-white rounded-br-sm'
-        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
-      className
-    )
-  );
-</script>
-
-<div class="flex {isOutbound ? 'justify-end' : 'justify-start'}">
-  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
-    {#if !isOutbound && avatar}
-      {@render avatar()}
-    {/if}
-    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
-      {#if !isOutbound && senderName}
-        <span class="text-xs text-gray-500 mb-1 px-2">{senderName}</span>
-      {/if}
-      <div class="flex items-center gap-2 {isOutbound ? 'flex-row-reverse' : ''}">
-        <div class={bubbleClasses}>
-          {@render children?.()}
-        </div>
-        {#if failed}
-          <div class="flex items-center justify-center w-5 h-5 bg-red-500 rounded-full shrink-0">
-            <span class="text-white text-xs font-bold leading-none">!</span>
-          </div>
-        {/if}
-      </div>
-      {#if failed && errorMessage}
-        <div class="flex items-center gap-1 mt-0.5 px-2">
-          <span class="text-[9px] text-red-400">{errorMessage}</span>
-          {#if onretry}
-            <button
-              class="text-[9px] text-red-400 hover:text-red-500 flex items-center gap-0.5 opacity-75 hover:opacity-100"
-              onclick={onretry}
-            >
-              <Renew class="w-2 h-2" />
-              {labels.retry}
-            </button>
-          {/if}
-        </div>
-      {:else if timestamp}
-        <span class="text-[10px] text-gray-400 mt-0.5 px-2">{timestamp}</span>
-      {/if}
-    </div>
-  </div>
-</div>
+<script lang="ts">
+  /**
+   * ChatBubble - Message bubble for chat interfaces
+   *
+   * Displays inbound (left) or outbound (right) messages with optional
+   * error state, timestamp, and sender name.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import Renew from 'carbon-icons-svelte/lib/Renew.svelte';
+
+  const defaultLabels = {
+    retry: 'retry',
+  };
+
+  interface Props {
+    /** Message direction - inbound (from other) or outbound (from us) */
+    direction?: 'inbound' | 'outbound';
+    /** Sender name (shown for inbound messages) */
+    senderName?: string;
+    /** Timestamp to display */
+    timestamp?: string;
+    /** Whether delivery failed */
+    failed?: boolean;
+    /** Error message when failed */
+    errorMessage?: string;
+    /** Callback when retry is clicked */
+    onretry?: () => void;
+    /** Additional CSS classes for the bubble */
+    className?: string;
+    /** Avatar snippet (for inbound messages) */
+    avatar?: Snippet;
+    /** Message content */
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    direction = 'inbound',
+    senderName,
+    timestamp,
+    failed = false,
+    errorMessage,
+    onretry,
+    className = '',
+    avatar,
+    children,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let isOutbound = $derived(direction === 'outbound');
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm',
+      isOutbound
+        ? 'bg-brand-primary text-white rounded-br-sm'
+        : 'bg-muted text-text-primary rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class="flex {isOutbound ? 'justify-end' : 'justify-start'}">
+  <div class="flex items-end gap-2 max-w-[75%] {isOutbound ? 'flex-row-reverse' : ''}">
+    {#if !isOutbound && avatar}
+      {@render avatar()}
+    {/if}
+    <div class="flex flex-col {isOutbound ? 'items-end' : 'items-start'}">
+      {#if !isOutbound && senderName}
+        <span class="text-xs text-muted-foreground mb-1 px-2">{senderName}</span>
+      {/if}
+      <div class="flex items-center gap-2 {isOutbound ? 'flex-row-reverse' : ''}">
+        <div class={bubbleClasses}>
+          {@render children?.()}
+        </div>
+        {#if failed}
+          <div class="flex items-center justify-center w-5 h-5 bg-accent-danger rounded-full shrink-0">
+            <span class="text-white text-xs font-bold leading-none">!</span>
+          </div>
+        {/if}
+      </div>
+      {#if failed && errorMessage}
+        <div class="flex items-center gap-1 mt-0.5 px-2">
+          <span class="text-[9px] text-accent-danger">{errorMessage}</span>
+          {#if onretry}
+            <button
+              class="text-[9px] text-accent-danger hover:text-accent-danger flex items-center gap-0.5 opacity-75 hover:opacity-100"
+              onclick={onretry}
+            >
+              <Renew class="w-2 h-2" />
+              {labels.retry}
+            </button>
+          {/if}
+        </div>
+      {:else if timestamp}
+        <span class="text-[10px] text-muted-foreground mt-0.5 px-2">{timestamp}</span>
+      {/if}
+    </div>
+  </div>
+</div>

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

@@ -1,30 +1,30 @@
-import { render } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatContainer from './ChatContainer.svelte';
-
-describe('ChatContainer', () => {
-  test('renders without crashing', () => {
-    const { container } = render(ChatContainer);
-    expect(container.firstElementChild).toBeInTheDocument();
-  });
-
-  test('has flex column layout', () => {
-    const { container } = render(ChatContainer);
-    expect(container.querySelector('.flex-col, .flex')).toBeInTheDocument();
-  });
-
-  test('has scrollable content area', () => {
-    const { container } = render(ChatContainer);
-    expect(container.querySelector('.overflow-y-auto, [class*="overflow"]')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatContainer, { props: { className: 'my-container' } });
-    expect(container.querySelector('.my-container')).toBeInTheDocument();
-  });
-
-  test('has white background', () => {
-    const { container } = render(ChatContainer);
-    expect(container.querySelector('[class*="bg-white"]')).toBeInTheDocument();
-  });
-});
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatContainer from './ChatContainer.svelte';
+
+describe('ChatContainer', () => {
+  test('renders without crashing', () => {
+    const { container } = render(ChatContainer);
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+
+  test('has flex column layout', () => {
+    const { container } = render(ChatContainer);
+    expect(container.querySelector('.flex-col, .flex')).toBeInTheDocument();
+  });
+
+  test('has scrollable content area', () => {
+    const { container } = render(ChatContainer);
+    expect(container.querySelector('.overflow-y-auto, [class*="overflow"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatContainer, { props: { className: 'my-container' } });
+    expect(container.querySelector('.my-container')).toBeInTheDocument();
+  });
+
+  test('has white background', () => {
+    const { container } = render(ChatContainer);
+    expect(container.querySelector('[class*="bg-card"]')).toBeInTheDocument();
+  });
+});