@getmicdrop/svelte-components 5.17.0 → 5.17.3

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-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-3 py-1 rounded-full">
+    {label}
+  </span>
+</div>

package/dist/patterns/chat/ChatInvitationBubble.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatInvitationBubble.spec.d.ts.map

package/dist/patterns/chat/ChatInvitationBubble.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInvitationBubble.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatInvitationBubble.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +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();
+  });
+});

package/dist/patterns/chat/ChatInvitationBubble.svelte

@@ -1,37 +1,37 @@
-<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';
-
-  interface Props {
-    /** Name of the performer who was invited */
-    performerName: string;
-    /** Whether this is outbound (right side) */
-    outbound?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    performerName,
-    outbound = true,
-    className = '',
-  }: Props = $props();
-
-  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" />
-  Invited {performerName}
-</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';
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    performerName,
+    outbound = true,
+    className = '',
+  }: Props = $props();
+
+  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" />
+  Invited {performerName}
+</div>

package/dist/patterns/chat/ChatInvitationNotice.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatInvitationNotice.spec.d.ts.map

package/dist/patterns/chat/ChatInvitationNotice.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInvitationNotice.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatInvitationNotice.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +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();
+  });
+});

package/dist/patterns/chat/ChatInvitationNotice.svelte

@@ -1,27 +1,27 @@
-<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';
-
-  interface Props {
-    /** Name of the performer who was invited */
-    performerName: string;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    performerName,
-    className = '',
-  }: Props = $props();
-</script>
-
-<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
-  <SendAltFilled class="w-3 h-3" />
-  Invited {performerName}
-</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';
+
+  interface Props {
+    /** Name of the performer who was invited */
+    performerName: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    performerName,
+    className = '',
+  }: Props = $props();
+</script>
+
+<span class={classNames('text-xs font-medium text-blue-600 flex items-center gap-1', className)}>
+  <SendAltFilled class="w-3 h-3" />
+  Invited {performerName}
+</span>

package/dist/patterns/chat/ChatMessageGroup.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatMessageGroup.spec.d.ts.map

package/dist/patterns/chat/ChatMessageGroup.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageGroup.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatMessageGroup.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +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();
+  });
+});

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

package/dist/patterns/chat/ChatSlotUpdate.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatSlotUpdate.spec.d.ts.map

package/dist/patterns/chat/ChatSlotUpdate.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSlotUpdate.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatSlotUpdate.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +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();
+  });
+});

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

package/dist/patterns/chat/ChatStatusBadge.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatStatusBadge.spec.d.ts.map

package/dist/patterns/chat/ChatStatusBadge.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusBadge.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusBadge.spec.js"],"names":[],"mappings":""}