@getmicdrop/svelte-components 5.17.1 → 5.17.3

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

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

package/dist/patterns/chat/ChatStatusBadge.svelte

@@ -1,91 +1,91 @@
-<script lang="ts">
-  /**
-   * ChatStatusBadge - Status indicator for chat activity feeds
-   *
-   * Displays status changes (Confirmed, Declined, Invited, etc.) with
-   * appropriate colors and icons in a pill/badge format.
-   */
-  import type { Snippet, Component } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
-  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
-  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
-
-  type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
-
-  interface Props {
-    /** Status value */
-    status: StatusType;
-    /** Show as outbound style (right-aligned context) */
-    outbound?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Optional custom icon */
-    icon?: Snippet;
-  }
-
-  let {
-    status,
-    outbound = false,
-    className = '',
-    icon,
-  }: Props = $props();
-
-  interface StatusStyle {
-    textColor: string;
-    bgColor: string;
-    icon: Component<{ class?: string }> | null;
-  }
-
-  function getStatusStyle(s: string): StatusStyle {
-    switch (s?.toLowerCase()) {
-      case 'confirmed':
-        return {
-          textColor: 'text-green-600',
-          bgColor: 'bg-green-50 dark:bg-green-900/20',
-          icon: CheckmarkFilled,
-        };
-      case 'declined':
-      case 'canceled':
-        return {
-          textColor: 'text-red-600',
-          bgColor: 'bg-red-50 dark:bg-red-900/20',
-          icon: CloseFilled,
-        };
-      case 'invited':
-        return {
-          textColor: 'text-blue-600',
-          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
-          icon: SendAltFilled,
-        };
-      default:
-        return {
-          textColor: 'text-gray-600',
-          bgColor: 'bg-gray-100 dark:bg-gray-800',
-          icon: null,
-        };
-    }
-  }
-
-  let style = $derived(getStatusStyle(status));
-
-  let badgeClasses = $derived(
-    classNames(
-      'px-4 py-2.5 rounded-2xl text-sm font-medium flex items-center gap-1.5',
-      style.bgColor,
-      style.textColor,
-      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
-      className
-    )
-  );
-</script>
-
-<div class={badgeClasses}>
-  {#if icon}
-    {@render icon()}
-  {:else if style.icon}
-    {@const IconComponent = style.icon}
-    <IconComponent class="w-4 h-4" />
-  {/if}
-  <span class="capitalize">{status}</span>
-</div>
+<script lang="ts">
+  /**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+  import type { Snippet, Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+
+  interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+  }
+
+  let {
+    status,
+    outbound = false,
+    className = '',
+    icon,
+  }: Props = $props();
+
+  interface StatusStyle {
+    textColor: string;
+    bgColor: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(s: string): StatusStyle {
+    switch (s?.toLowerCase()) {
+      case 'confirmed':
+        return {
+          textColor: 'text-green-600',
+          bgColor: 'bg-green-50 dark:bg-green-900/20',
+          icon: CheckmarkFilled,
+        };
+      case 'declined':
+      case 'canceled':
+        return {
+          textColor: 'text-red-600',
+          bgColor: 'bg-red-50 dark:bg-red-900/20',
+          icon: CloseFilled,
+        };
+      case 'invited':
+        return {
+          textColor: 'text-blue-600',
+          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+          icon: SendAltFilled,
+        };
+      default:
+        return {
+          textColor: 'text-gray-600',
+          bgColor: 'bg-gray-100 dark:bg-gray-800',
+          icon: null,
+        };
+    }
+  }
+
+  let style = $derived(getStatusStyle(status));
+
+  let badgeClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm font-medium flex items-center gap-1.5',
+      style.bgColor,
+      style.textColor,
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={badgeClasses}>
+  {#if icon}
+    {@render icon()}
+  {:else if style.icon}
+    {@const IconComponent = style.icon}
+    <IconComponent class="w-4 h-4" />
+  {/if}
+  <span class="capitalize">{status}</span>
+</div>

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

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

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

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

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

@@ -0,0 +1,81 @@
+import { render, screen } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatStatusTransition from './ChatStatusTransition.svelte';
+
+describe('ChatStatusTransition', () => {
+  test('renders from and to status text', () => {
+    render(ChatStatusTransition, { props: { fromStatus: 'invited', toStatus: 'confirmed' } });
+    expect(screen.getByText(/invited/i)).toBeInTheDocument();
+    expect(screen.getByText(/confirmed/i)).toBeInTheDocument();
+  });
+
+  test('renders arrow separator', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed' }
+    });
+    expect(container.textContent).toContain('→');
+  });
+
+  test('confirmed status shows icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('declined status shows icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'declined' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('canceled status shows icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'canceled' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBeGreaterThanOrEqual(1);
+  });
+
+  test('unknown status does not show icon', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'unknown', toStatus: 'unknown' }
+    });
+    const svgs = container.querySelectorAll('svg');
+    expect(svgs.length).toBe(0);
+  });
+
+  test('confirmed from shows green color', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'declined' }
+    });
+    const green = container.querySelector('[class*="green"]');
+    expect(green).toBeInTheDocument();
+  });
+
+  test('declined to shows red color', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'confirmed', toStatus: 'declined' }
+    });
+    const red = container.querySelector('[class*="red"]');
+    expect(red).toBeInTheDocument();
+  });
+
+  test('invited status shows blue color', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed' }
+    });
+    const blue = container.querySelector('[class*="blue"]');
+    expect(blue).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatStatusTransition, {
+      props: { fromStatus: 'invited', toStatus: 'confirmed', className: 'my-transition' }
+    });
+    expect(container.querySelector('.my-transition')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatStatusTransition.svelte

@@ -1,64 +1,64 @@
-<script lang="ts">
-  /**
-   * ChatStatusTransition - Status change display with icons
-   *
-   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
-   * Used in activity notices to show silent status changes.
-   */
-  import type { Component } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
-  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
-  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
-
-  interface Props {
-    /** Original status */
-    fromStatus: string;
-    /** New status */
-    toStatus: string;
-    /** Additional CSS classes */
-    className?: string;
-  }
-
-  let {
-    fromStatus,
-    toStatus,
-    className = '',
-  }: Props = $props();
-
-  interface StatusStyle {
-    color: string;
-    icon: Component<{ class?: string }> | null;
-  }
-
-  function getStatusStyle(status: string): StatusStyle {
-    switch (status?.toLowerCase()) {
-      case 'confirmed':
-        return { color: 'text-green-600', icon: CheckmarkFilled };
-      case 'declined':
-      case 'canceled':
-        return { color: 'text-red-600', icon: CloseFilled };
-      case 'invited':
-        return { color: 'text-blue-600', icon: SendAltFilled };
-      default:
-        return { color: 'text-gray-600', icon: null };
-    }
-  }
-
-  let fromStyle = $derived(getStatusStyle(fromStatus));
-  let toStyle = $derived(getStatusStyle(toStatus));
-</script>
-
-<span class={classNames('text-xs font-medium flex items-center gap-1', className)}>
-  {#if fromStyle.icon}
-    {@const FromIcon = fromStyle.icon}
-    <FromIcon class="w-3 h-3 {fromStyle.color}" />
-  {/if}
-  <span class={fromStyle.color}>{fromStatus}</span>
-  <span class="text-gray-400 mx-1">→</span>
-  {#if toStyle.icon}
-    {@const ToIcon = toStyle.icon}
-    <ToIcon class="w-3 h-3 {toStyle.color}" />
-  {/if}
-  <span class={toStyle.color}>{toStatus}</span>
-</span>
+<script lang="ts">
+  /**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+  import type { Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromStatus,
+    toStatus,
+    className = '',
+  }: Props = $props();
+
+  interface StatusStyle {
+    color: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(status: string): StatusStyle {
+    switch (status?.toLowerCase()) {
+      case 'confirmed':
+        return { color: 'text-green-600', icon: CheckmarkFilled };
+      case 'declined':
+      case 'canceled':
+        return { color: 'text-red-600', icon: CloseFilled };
+      case 'invited':
+        return { color: 'text-blue-600', icon: SendAltFilled };
+      default:
+        return { color: 'text-gray-600', icon: null };
+    }
+  }
+
+  let fromStyle = $derived(getStatusStyle(fromStatus));
+  let toStyle = $derived(getStatusStyle(toStatus));
+</script>
+
+<span class={classNames('text-xs font-medium flex items-center gap-1', className)}>
+  {#if fromStyle.icon}
+    {@const FromIcon = fromStyle.icon}
+    <FromIcon class="w-3 h-3 {fromStyle.color}" />
+  {/if}
+  <span class={fromStyle.color}>{fromStatus}</span>
+  <span class="text-gray-400 mx-1">→</span>
+  {#if toStyle.icon}
+    {@const ToIcon = toStyle.icon}
+    <ToIcon class="w-3 h-3 {toStyle.color}" />
+  {/if}
+  <span class={toStyle.color}>{toStatus}</span>
+</span>

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test } from 'vitest';
+import ChatTextBubble from './ChatTextBubble.svelte';
+
+describe('ChatTextBubble', () => {
+  test('renders with default inbound styling', () => {
+    const { container } = render(ChatTextBubble);
+    expect(container.querySelector('.rounded-bl-sm')).toBeInTheDocument();
+  });
+
+  test('inbound has gray background', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'inbound' } });
+    expect(container.querySelector('[class*="gray"]')).toBeInTheDocument();
+  });
+
+  test('outbound has blue background', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
+    expect(container.querySelector('[class*="blue"]')).toBeInTheDocument();
+  });
+
+  test('outbound has rounded-br-sm', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.rounded-br-sm')).toBeInTheDocument();
+  });
+
+  test('outbound has white text', () => {
+    const { container } = render(ChatTextBubble, { props: { direction: 'outbound' } });
+    expect(container.querySelector('.text-white')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(ChatTextBubble, { props: { className: 'my-text' } });
+    expect(container.querySelector('.my-text')).toBeInTheDocument();
+  });
+});

package/dist/patterns/chat/ChatTextBubble.svelte

@@ -1,41 +1,41 @@
-<script lang="ts">
-  /**
-   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
-   *
-   * Just the bubble itself, for use within ChatMessageGroup or other contexts
-   * where you don't need avatar/timestamp handling.
-   */
-  import type { Snippet } from 'svelte';
-  import { classNames } from '../../utils/utils.js';
-
-  interface Props {
-    /** Direction - inbound (gray) or outbound (blue) */
-    direction?: 'inbound' | 'outbound';
-    /** Additional CSS classes */
-    className?: string;
-    /** Content */
-    children?: Snippet;
-  }
-
-  let {
-    direction = 'inbound',
-    className = '',
-    children,
-  }: Props = $props();
-
-  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={bubbleClasses}>
-  {@render children?.()}
-</div>
+<script lang="ts">
+  /**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'inbound',
+    className = '',
+    children,
+  }: Props = $props();
+
+  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={bubbleClasses}>
+  {@render children?.()}
+</div>

package/dist/patterns/chat/index.js

@@ -1,22 +1,22 @@
-// =============================================================================
-// CHAT PATTERNS - Chat interface components
-// =============================================================================
-
-// Core layout
-export { default as ChatContainer } from './ChatContainer.svelte';
-export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
-
-// Message bubbles
-export { default as ChatBubble } from './ChatBubble.svelte';
-export { default as ChatTextBubble } from './ChatTextBubble.svelte';
-export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
-
-// Status displays
-export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
-export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
-export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
-
-// Dividers and notices
-export { default as ChatDateDivider } from './ChatDateDivider.svelte';
-export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
-export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';
+// =============================================================================
+// CHAT PATTERNS - Chat interface components
+// =============================================================================
+
+// Core layout
+export { default as ChatContainer } from './ChatContainer.svelte';
+export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
+
+// Message bubbles
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as ChatTextBubble } from './ChatTextBubble.svelte';
+export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
+
+// Status displays
+export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
+export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
+export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
+
+// Dividers and notices
+export { default as ChatDateDivider } from './ChatDateDivider.svelte';
+export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
+export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';