@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/patterns/chat/ChatContainer.svelte

@@ -1,46 +1,46 @@
-<script lang="ts">
-  /**
-   * ChatContainer - Layout wrapper for chat interfaces
-   *
-   * Provides a flex column layout with optional header, scrollable message area,
-   * and fixed footer for message input.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Additional CSS classes for the container */
-    className?: string;
-    /** Header content (title, subtitle, etc.) */
-    header?: Snippet;
-    /** Footer content (message input, actions) */
-    footer?: Snippet;
-    /** Main scrollable content */
-    children?: Snippet;
-  }
-
-  let {
-    className = '',
-    header,
-    footer,
-    children,
-  }: Props = $props();
-</script>
-
-<div class={classNames('flex flex-col h-full bg-white dark:bg-gray-900', className)}>
-  {#if header}
-    <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
-      {@render header()}
-    </div>
-  {/if}
-
-  <div class="flex-1 overflow-y-auto px-4 py-4 space-y-3">
-    {@render children?.()}
-  </div>
-
-  {#if footer}
-    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shrink-0">
-      {@render footer()}
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * ChatContainer - Layout wrapper for chat interfaces
+   *
+   * Provides a flex column layout with optional header, scrollable message area,
+   * and fixed footer for message input.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Additional CSS classes for the container */
+    className?: string;
+    /** Header content (title, subtitle, etc.) */
+    header?: Snippet;
+    /** Footer content (message input, actions) */
+    footer?: Snippet;
+    /** Main scrollable content */
+    children?: Snippet;
+  }
+
+  let {
+    className = '',
+    header,
+    footer,
+    children,
+  }: Props = $props();
+</script>
+
+<div class={classNames('flex flex-col h-full bg-card', className)}>
+  {#if header}
+    <div class="px-4 py-3 border-b border-border shrink-0">
+      {@render header()}
+    </div>
+  {/if}
+
+  <div class="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+    {@render children?.()}
+  </div>
+
+  {#if footer}
+    <div class="px-4 py-3 border-t border-border bg-card shrink-0">
+      {@render footer()}
+    </div>
+  {/if}
+</div>

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

@@ -1,30 +1,30 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatDateDivider from './ChatDateDivider.svelte';
-
-describe('ChatDateDivider', () => {
-  test('renders the label', () => {
-    render(ChatDateDivider, { props: { label: 'Today' } });
-    expect(screen.getByText('Today')).toBeInTheDocument();
-  });
-
-  test('renders long date label', () => {
-    render(ChatDateDivider, { props: { label: 'Monday, Jan 15, 2024' } });
-    expect(screen.getByText('Monday, Jan 15, 2024')).toBeInTheDocument();
-  });
-
-  test('has centered text', () => {
-    const { container } = render(ChatDateDivider, { props: { label: 'Today' } });
-    expect(container.querySelector('.text-center')).toBeInTheDocument();
-  });
-
-  test('has pill styling on label', () => {
-    const { container } = render(ChatDateDivider, { props: { label: 'Today' } });
-    expect(container.querySelector('.rounded-full, [class*="rounded"]')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatDateDivider, { props: { label: 'Today', className: 'my-divider' } });
-    expect(container.querySelector('.my-divider')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatDateDivider from './ChatDateDivider.svelte';
+
+describe('ChatDateDivider', () => {
+  test('renders the label', () => {
+    render(ChatDateDivider, { props: { label: 'Today' } });
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+
+  test('renders long date label', () => {
+    render(ChatDateDivider, { props: { label: 'Monday, Jan 15, 2024' } });
+    expect(screen.getByText('Monday, Jan 15, 2024')).toBeInTheDocument();
+  });
+
+  test('has centered text', () => {
+    const { container } = render(ChatDateDivider, { props: { label: 'Today' } });
+    expect(container.querySelector('.text-center')).toBeInTheDocument();
+  });
+
+  test('has pill styling on label', () => {
+    const { container } = render(ChatDateDivider, { props: { label: 'Today' } });
+    expect(container.querySelector('.rounded-full, [class*="rounded"]')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatDateDivider, { props: { label: 'Today', className: 'my-divider' } });
+    expect(container.querySelector('.my-divider')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatDateDivider.svelte

@@ -1,27 +1,27 @@
-<script lang="ts">
-  /**
-   * ChatDateDivider - Date separator for chat messages
-   *
-   * Displays a centered date label (Today, Yesterday, or formatted date)
-   * to separate messages by day.
-   */
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Date label to display (e.g., "Today", "Yesterday", "Monday, Jan 15, 2024") */
-    label: string;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    label,
-    className = '',
-  }: Props = $props();
-</script>
-
-<div class={classNames('text-center py-2', className)}>
-  <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
-    {label}
-  </span>
-</div>
+<script lang="ts">
+  /**
+   * ChatDateDivider - Date separator for chat messages
+   *
+   * Displays a centered date label (Today, Yesterday, or formatted date)
+   * to separate messages by day.
+   */
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Date label to display (e.g., "Today", "Yesterday", "Monday, Jan 15, 2024") */
+    label: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    label,
+    className = '',
+  }: Props = $props();
+</script>
+
+<div class={classNames('text-center py-2', className)}>
+  <span class="text-xs font-semibold text-muted-foreground bg-muted px-3 py-1 rounded-full">
+    {label}
+  </span>
+</div>

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

@@ -1,46 +1,46 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatInvitationBubble from './ChatInvitationBubble.svelte';
-
-describe('ChatInvitationBubble', () => {
-  test('renders performer name', () => {
-    render(ChatInvitationBubble, { props: { performerName: 'Alice' } });
-    expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
-  });
-
-  test('has blue background', () => {
-    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Bob' } });
-    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
-  });
-
-  test('renders invitation icon', () => {
-    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Test' } });
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  test('outbound true applies rounded-br-sm', () => {
-    const { container } = render(ChatInvitationBubble, {
-      props: { performerName: 'Test', outbound: true }
-    });
-    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
-  });
-
-  test('outbound false applies rounded-bl-sm', () => {
-    const { container } = render(ChatInvitationBubble, {
-      props: { performerName: 'Test', outbound: false }
-    });
-    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
-  });
-
-  test('default outbound is true', () => {
-    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Test' } });
-    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatInvitationBubble, {
-      props: { performerName: 'Test', className: 'my-invite' }
-    });
-    expect(container.querySelector('.my-invite')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatInvitationBubble from './ChatInvitationBubble.svelte';
+
+describe('ChatInvitationBubble', () => {
+  test('renders performer name', () => {
+    render(ChatInvitationBubble, { props: { performerName: 'Alice' } });
+    expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
+  });
+
+  test('has brand-primary background', () => {
+    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Bob' } });
+    expect(container.querySelector('[class*="brand-primary"]')).toBeInTheDocument();
+  });
+
+  test('renders invitation icon', () => {
+    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Test' } });
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('outbound true applies rounded-br-sm', () => {
+    const { container } = render(ChatInvitationBubble, {
+      props: { performerName: 'Test', outbound: true }
+    });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('outbound false applies rounded-bl-sm', () => {
+    const { container } = render(ChatInvitationBubble, {
+      props: { performerName: 'Test', outbound: false }
+    });
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('default outbound is true', () => {
+    const { container } = render(ChatInvitationBubble, { props: { performerName: 'Test' } });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatInvitationBubble, {
+      props: { performerName: 'Test', className: 'my-invite' }
+    });
+    expect(container.querySelector('.my-invite')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatInvitationBubble.svelte

@@ -1,46 +1,46 @@
-<script lang="ts">
-  /**
-   * ChatInvitationBubble - Invitation notification bubble
-   *
-   * Shows "Invited {performerName}" with send icon in a blue bubble.
-   */
-  import { classNames } from '../../utils/utils.js';
-  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
-
-  const defaultLabels = {
-    invited: (name: string) => `Invited ${name}`,
-  };
-
-  interface Props {
-    /** Name of the performer who was invited */
-    performerName: string;
-    /** Whether this is outbound (right side) */
-    outbound?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Override user-visible strings */
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    performerName,
-    outbound = true,
-    className = '',
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let bubbleClasses = $derived(
-    classNames(
-      'px-4 py-2.5 rounded-2xl text-sm bg-blue-600 text-white flex items-center gap-1.5',
-      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
-      className
-    )
-  );
-</script>
-
-<div class={bubbleClasses}>
-  <SendAltFilled class="w-4 h-4" />
-  {typeof labels.invited === 'function' ? labels.invited(performerName) : labels.invited}
-</div>
+<script lang="ts">
+  /**
+   * ChatInvitationBubble - Invitation notification bubble
+   *
+   * Shows "Invited {performerName}" with send icon in a blue bubble.
+   */
+  import { classNames } from '../../utils/utils.js';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  const defaultLabels = {
+    invited: (name: string) => `Invited ${name}`,
+  };
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    performerName,
+    outbound = true,
+    className = '',
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm bg-brand-primary text-white flex items-center gap-1.5',
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={bubbleClasses}>
+  <SendAltFilled class="w-4 h-4" />
+  {typeof labels.invited === 'function' ? labels.invited(performerName) : labels.invited}
+</div>

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

@@ -1,32 +1,32 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatInvitationNotice from './ChatInvitationNotice.svelte';
-
-describe('ChatInvitationNotice', () => {
-  test('renders performer name', () => {
-    render(ChatInvitationNotice, { props: { performerName: 'Alice' } });
-    expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
-  });
-
-  test('has blue text color', () => {
-    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Bob' } });
-    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
-  });
-
-  test('renders icon', () => {
-    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Test' } });
-    expect(container.querySelector('svg')).toBeInTheDocument();
-  });
-
-  test('has inline flex layout', () => {
-    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Test' } });
-    expect(container.querySelector('.inline-flex, .flex')).toBeInTheDocument();
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatInvitationNotice, {
-      props: { performerName: 'Test', className: 'my-notice' }
-    });
-    expect(container.querySelector('.my-notice')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatInvitationNotice from './ChatInvitationNotice.svelte';
+
+describe('ChatInvitationNotice', () => {
+  test('renders performer name', () => {
+    render(ChatInvitationNotice, { props: { performerName: 'Alice' } });
+    expect(screen.getByText(/Invited Alice/i)).toBeInTheDocument();
+  });
+
+  test('has brand-primary text color', () => {
+    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Bob' } });
+    expect(container.querySelector('[class*="brand-primary"]')).toBeInTheDocument();
+  });
+
+  test('renders icon', () => {
+    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Test' } });
+    expect(container.querySelector('svg')).toBeInTheDocument();
+  });
+
+  test('has inline flex layout', () => {
+    const { container } = render(ChatInvitationNotice, { props: { performerName: 'Test' } });
+    expect(container.querySelector('.inline-flex, .flex')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatInvitationNotice, {
+      props: { performerName: 'Test', className: 'my-notice' }
+    });
+    expect(container.querySelector('.my-notice')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatInvitationNotice.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-  /**
-   * ChatInvitationNotice - Inline invitation notice
-   *
-   * Shows "Invited {performerName}" with icon for activity notices.
-   * Smaller/subtler than ChatInvitationBubble.
-   */
-  import { classNames } from '../../utils/utils.js';
-  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
-
-  const defaultLabels = {
-    invited: (name: string) => `Invited ${name}`,
-  };
-
-  interface Props {
-    /** Name of the performer who was invited */
-    performerName: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** Override user-visible strings */
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    performerName,
-    className = '',
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-</script>
-
-<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
-  <SendAltFilled class="w-3 h-3" />
-  {typeof labels.invited === 'function' ? labels.invited(performerName) : labels.invited}
-</span>
+<script lang="ts">
+  /**
+   * ChatInvitationNotice - Inline invitation notice
+   *
+   * Shows "Invited {performerName}" with icon for activity notices.
+   * Smaller/subtler than ChatInvitationBubble.
+   */
+  import { classNames } from '../../utils/utils.js';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  const defaultLabels = {
+    invited: (name: string) => `Invited ${name}`,
+  };
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Override user-visible strings */
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    performerName,
+    className = '',
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+</script>
+
+<span class={classNames('text-xs font-medium text-brand-primary flex items-center gap-1', className)}>
+  <SendAltFilled class="w-3 h-3" />
+  {typeof labels.invited === 'function' ? labels.invited(performerName) : labels.invited}
+</span>

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

@@ -1,58 +1,58 @@
-import { render, screen } from '@testing-library/svelte';
-import { expect, describe, test } from 'vitest';
-import ChatMessageGroup from './ChatMessageGroup.svelte';
-
-describe('ChatMessageGroup', () => {
-  test('renders with default inbound direction', () => {
-    const { container } = render(ChatMessageGroup);
-    const el = container.querySelector('.items-start');
-    expect(el).toBeInTheDocument();
-  });
-
-  test('outbound uses flex-row-reverse', () => {
-    const { container } = render(ChatMessageGroup, { props: { direction: 'outbound' } });
-    expect(container.querySelector('.flex-row-reverse')).toBeInTheDocument();
-  });
-
-  test('outbound uses items-end', () => {
-    const { container } = render(ChatMessageGroup, { props: { direction: 'outbound' } });
-    expect(container.querySelector('.items-end')).toBeInTheDocument();
-  });
-
-  test('shows sender name for inbound', () => {
-    render(ChatMessageGroup, { props: { direction: 'inbound', senderName: 'Bob' } });
-    expect(screen.getByText('Bob')).toBeInTheDocument();
-  });
-
-  test('hides sender name for outbound even when provided', () => {
-    const { container } = render(ChatMessageGroup, {
-      props: { direction: 'outbound', senderName: 'Bob' }
-    });
-    // senderName should not appear as standalone element for outbound
-    // but may appear in timestamp area
-    expect(container.firstElementChild).toBeInTheDocument();
-  });
-
-  test('shows timestamp', () => {
-    render(ChatMessageGroup, { props: { timestamp: '3:45 PM' } });
-    expect(screen.getByText(/3:45 PM/)).toBeInTheDocument();
-  });
-
-  test('outbound timestamp includes sender name', () => {
-    const { container } = render(ChatMessageGroup, {
-      props: { direction: 'outbound', senderName: 'Alice', timestamp: '3:45 PM' }
-    });
-    expect(container.textContent).toContain('Alice');
-    expect(container.textContent).toContain('3:45 PM');
-  });
-
-  test('hides timestamp when not provided', () => {
-    const { container } = render(ChatMessageGroup, { props: { direction: 'inbound' } });
-    expect(container.textContent.trim()).toBe('');
-  });
-
-  test('applies custom className', () => {
-    const { container } = render(ChatMessageGroup, { props: { className: 'my-group' } });
-    expect(container.querySelector('.my-group')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatMessageGroup from './ChatMessageGroup.svelte';
+
+describe('ChatMessageGroup', () => {
+  test('renders with default inbound direction', () => {
+    const { container } = render(ChatMessageGroup);
+    const el = container.querySelector('.items-start');
+    expect(el).toBeInTheDocument();
+  });
+
+  test('outbound uses flex-row-reverse', () => {
+    const { container } = render(ChatMessageGroup, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.flex-row-reverse')).toBeInTheDocument();
+  });
+
+  test('outbound uses items-end', () => {
+    const { container } = render(ChatMessageGroup, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.items-end')).toBeInTheDocument();
+  });
+
+  test('shows sender name for inbound', () => {
+    render(ChatMessageGroup, { props: { direction: 'inbound', senderName: 'Bob' } });
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+
+  test('hides sender name for outbound even when provided', () => {
+    const { container } = render(ChatMessageGroup, {
+      props: { direction: 'outbound', senderName: 'Bob' }
+    });
+    // senderName should not appear as standalone element for outbound
+    // but may appear in timestamp area
+    expect(container.firstElementChild).toBeInTheDocument();
+  });
+
+  test('shows timestamp', () => {
+    render(ChatMessageGroup, { props: { timestamp: '3:45 PM' } });
+    expect(screen.getByText(/3:45 PM/)).toBeInTheDocument();
+  });
+
+  test('outbound timestamp includes sender name', () => {
+    const { container } = render(ChatMessageGroup, {
+      props: { direction: 'outbound', senderName: 'Alice', timestamp: '3:45 PM' }
+    });
+    expect(container.textContent).toContain('Alice');
+    expect(container.textContent).toContain('3:45 PM');
+  });
+
+  test('hides timestamp when not provided', () => {
+    const { container } = render(ChatMessageGroup, { props: { direction: 'inbound' } });
+    expect(container.textContent.trim()).toBe('');
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatMessageGroup, { props: { className: 'my-group' } });
+    expect(container.querySelector('.my-group')).toBeInTheDocument();
+  });
+});