@getmicdrop/svelte-components 5.3.14 → 5.4.0

package/dist/primitives/Badges/Badge.spec.js

@@ -1,103 +1,103 @@
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { describe, test, expect, vi } from 'vitest';
-import Badge from './Badge.svelte';
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const onClick = vi.fn();
-  const { component, container } = render(Badge, { props: { ...args } });
-  component.$on('click', onClick);
-  const badge = container.querySelector('div');
-  return {
-    user,
-    badge,
-    onClick,
-  };
-}
-
-describe('Badge Component Tests', () => {
-  test('Renders with default props', () => {
-    const { badge } = setupTest();
-    expect(badge).toBeInTheDocument();
-    expect(badge).toHaveClass('badge');
-  });
-
-  test('Renders with different sizes', () => {
-    const { badge: smallBadge } = setupTest({ size: 'small' });
-    expect(smallBadge).toHaveClass('badge-sm');
-
-    const { badge: mediumBadge } = setupTest({ size: 'medium' });
-    expect(mediumBadge).toHaveClass('badge-md');
-
-    const { badge: largeBadge } = setupTest({ size: 'large' });
-    expect(largeBadge).toHaveClass('badge-lg');
-  });
-
-  test('Handles role variant props for colors', () => {
-    const { badge: hostBadge } = setupTest({ variant: 'host' });
-    expect(hostBadge).toHaveClass('badge-host');
-
-    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
-    expect(headlinerBadge).toHaveClass('badge-headliner');
-
-    const { badge: featureBadge } = setupTest({ variant: 'feature' });
-    expect(featureBadge).toHaveClass('badge-feature');
-
-    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
-    expect(specialGuestBadge).toHaveClass('badge-special-guest');
-
-    const { badge: openerBadge } = setupTest({ variant: 'opener' });
-    expect(openerBadge).toHaveClass('badge-opener');
-
-    const { badge: guestBadge } = setupTest({ variant: 'guest' });
-    expect(guestBadge).toHaveClass('badge-guest');
-
-    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
-    expect(teacherBadge).toHaveClass('badge-teacher');
-
-    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
-    expect(assistantBadge).toHaveClass('badge-assistant');
-  });
-
-  test('Handles status variant props for colors', () => {
-    const { badge: successBadge } = setupTest({ variant: 'success' });
-    expect(successBadge).toHaveClass('badge-success');
-
-    const { badge: warningBadge } = setupTest({ variant: 'warning' });
-    expect(warningBadge).toHaveClass('badge-warning');
-
-    const { badge: errorBadge } = setupTest({ variant: 'error' });
-    expect(errorBadge).toHaveClass('badge-error');
-
-    const { badge: infoBadge } = setupTest({ variant: 'info' });
-    expect(infoBadge).toHaveClass('badge-info');
-
-    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
-    expect(neutralBadge).toHaveClass('badge-neutral');
-  });
-
-  test('Falls back to neutral variant for unknown variants', () => {
-    const { badge } = setupTest({ variant: 'unknown' });
-    expect(badge).toHaveClass('badge-neutral');
-  });
-
-  test('Handles case-insensitive variants', () => {
-    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
-    expect(upperBadge).toHaveClass('badge-host');
-
-    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
-    expect(mixedBadge).toHaveClass('badge-headliner');
-  });
-
-  test('Falls back to medium size for unknown sizes', () => {
-    const { badge } = setupTest({ size: 'unknown' });
-    expect(badge).toHaveClass('badge-md');
-  });
-
-  test('Dispatches click event', async () => {
-    const { user, badge, onClick } = setupTest();
-    await user.click(badge);
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-});
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, test, expect, vi } from 'vitest';
+import Badge from './Badge.svelte';
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const onClick = vi.fn();
+  const { component, container } = render(Badge, { props: { ...args } });
+  component.$on('click', onClick);
+  const badge = container.querySelector('div');
+  return {
+    user,
+    badge,
+    onClick,
+  };
+}
+
+describe('Badge Component Tests', () => {
+  test('Renders with default props', () => {
+    const { badge } = setupTest();
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveClass('badge');
+  });
+
+  test('Renders with different sizes', () => {
+    const { badge: smallBadge } = setupTest({ size: 'small' });
+    expect(smallBadge).toHaveClass('badge-sm');
+
+    const { badge: mediumBadge } = setupTest({ size: 'medium' });
+    expect(mediumBadge).toHaveClass('badge-md');
+
+    const { badge: largeBadge } = setupTest({ size: 'large' });
+    expect(largeBadge).toHaveClass('badge-lg');
+  });
+
+  test('Handles role variant props for colors', () => {
+    const { badge: hostBadge } = setupTest({ variant: 'host' });
+    expect(hostBadge).toHaveClass('badge-host');
+
+    const { badge: headlinerBadge } = setupTest({ variant: 'headliner' });
+    expect(headlinerBadge).toHaveClass('badge-headliner');
+
+    const { badge: featureBadge } = setupTest({ variant: 'feature' });
+    expect(featureBadge).toHaveClass('badge-feature');
+
+    const { badge: specialGuestBadge } = setupTest({ variant: 'special-guest' });
+    expect(specialGuestBadge).toHaveClass('badge-special-guest');
+
+    const { badge: openerBadge } = setupTest({ variant: 'opener' });
+    expect(openerBadge).toHaveClass('badge-opener');
+
+    const { badge: guestBadge } = setupTest({ variant: 'guest' });
+    expect(guestBadge).toHaveClass('badge-guest');
+
+    const { badge: teacherBadge } = setupTest({ variant: 'teacher' });
+    expect(teacherBadge).toHaveClass('badge-teacher');
+
+    const { badge: assistantBadge } = setupTest({ variant: 'assistant' });
+    expect(assistantBadge).toHaveClass('badge-assistant');
+  });
+
+  test('Handles status variant props for colors', () => {
+    const { badge: successBadge } = setupTest({ variant: 'success' });
+    expect(successBadge).toHaveClass('badge-success');
+
+    const { badge: warningBadge } = setupTest({ variant: 'warning' });
+    expect(warningBadge).toHaveClass('badge-warning');
+
+    const { badge: errorBadge } = setupTest({ variant: 'error' });
+    expect(errorBadge).toHaveClass('badge-error');
+
+    const { badge: infoBadge } = setupTest({ variant: 'info' });
+    expect(infoBadge).toHaveClass('badge-info');
+
+    const { badge: neutralBadge } = setupTest({ variant: 'neutral' });
+    expect(neutralBadge).toHaveClass('badge-neutral');
+  });
+
+  test('Falls back to neutral variant for unknown variants', () => {
+    const { badge } = setupTest({ variant: 'unknown' });
+    expect(badge).toHaveClass('badge-neutral');
+  });
+
+  test('Handles case-insensitive variants', () => {
+    const { badge: upperBadge } = setupTest({ variant: 'HOST' });
+    expect(upperBadge).toHaveClass('badge-host');
+
+    const { badge: mixedBadge } = setupTest({ variant: 'Headliner' });
+    expect(mixedBadge).toHaveClass('badge-headliner');
+  });
+
+  test('Falls back to medium size for unknown sizes', () => {
+    const { badge } = setupTest({ size: 'unknown' });
+    expect(badge).toHaveClass('badge-md');
+  });
+
+  test('Dispatches click event', async () => {
+    const { user, badge, onClick } = setupTest();
+    await user.click(badge);
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});

package/dist/primitives/Badges/Badge.stories.svelte

@@ -1,86 +1,86 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  
-  import Badge from "./Badge.svelte";
-
-  const { Story } = defineMeta({
-    title: "Components/Badge",
-    component: Badge,
-    argTypes: {
-      size: { control: "select", options: ["small", "medium", "large"] },
-      variant: {
-        control: "select",
-        options: [
-          "host",
-          "headliner",
-          "feature",
-          "special-guest",
-          "opener",
-          "guest",
-          "teacher",
-          "assistant",
-          "success",
-          "warning",
-          "error",
-          "info",
-          "neutral",
-        ],
-      },
-      className: { control: "text" },
-    },
-  });
-
-</script>
-
-
-<!-- Size Variants -->
-<Story name="Small Badge">
-  <Badge size="small" variant="info">Small</Badge>
-</Story>
-
-<Story name="Medium Badge">
-  <Badge size="medium" variant="info">Medium</Badge>
-</Story>
-
-<Story name="Large Badge">
-  <Badge size="large" variant="info">Large</Badge>
-</Story>
-
-<!-- Status Variants -->
-<Story name="Success Status">
-  <Badge size="large" variant="success">Feb 1, 2024</Badge>
-</Story>
-
-<Story name="Warning Status">
-  <Badge size="large" variant="warning">Pending</Badge>
-</Story>
-
-<Story name="Error Status">
-  <Badge size="large" variant="error">Declined</Badge>
-</Story>
-
-<!-- Role Variants -->
-<Story name="Role Variants">
-  <div class="flex gap-2 flex-wrap">
-    <Badge variant="host">Host</Badge>
-    <Badge variant="headliner">Headliner</Badge>
-    <Badge variant="feature">Feature</Badge>
-    <Badge variant="special-guest">Special Guest</Badge>
-    <Badge variant="opener">Opener</Badge>
-    <Badge variant="guest">Guest</Badge>
-    <Badge variant="teacher">Teacher</Badge>
-    <Badge variant="assistant">Assistant</Badge>
-  </div>
-</Story>
-
-<!-- All Status Variants -->
-<Story name="All Status Variants">
-  <div class="flex gap-2 flex-wrap">
-    <Badge variant="success">Success</Badge>
-    <Badge variant="warning">Warning</Badge>
-    <Badge variant="error">Error</Badge>
-    <Badge variant="info">Info</Badge>
-    <Badge variant="neutral">Neutral</Badge>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  
+  import Badge from "./Badge.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Badge",
+    component: Badge,
+    argTypes: {
+      size: { control: "select", options: ["small", "medium", "large"] },
+      variant: {
+        control: "select",
+        options: [
+          "host",
+          "headliner",
+          "feature",
+          "special-guest",
+          "opener",
+          "guest",
+          "teacher",
+          "assistant",
+          "success",
+          "warning",
+          "error",
+          "info",
+          "neutral",
+        ],
+      },
+      className: { control: "text" },
+    },
+  });
+
+</script>
+
+
+<!-- Size Variants -->
+<Story name="Small Badge">
+  <Badge size="small" variant="info">Small</Badge>
+</Story>
+
+<Story name="Medium Badge">
+  <Badge size="medium" variant="info">Medium</Badge>
+</Story>
+
+<Story name="Large Badge">
+  <Badge size="large" variant="info">Large</Badge>
+</Story>
+
+<!-- Status Variants -->
+<Story name="Success Status">
+  <Badge size="large" variant="success">Feb 1, 2024</Badge>
+</Story>
+
+<Story name="Warning Status">
+  <Badge size="large" variant="warning">Pending</Badge>
+</Story>
+
+<Story name="Error Status">
+  <Badge size="large" variant="error">Declined</Badge>
+</Story>
+
+<!-- Role Variants -->
+<Story name="Role Variants">
+  <div class="flex gap-2 flex-wrap">
+    <Badge variant="host">Host</Badge>
+    <Badge variant="headliner">Headliner</Badge>
+    <Badge variant="feature">Feature</Badge>
+    <Badge variant="special-guest">Special Guest</Badge>
+    <Badge variant="opener">Opener</Badge>
+    <Badge variant="guest">Guest</Badge>
+    <Badge variant="teacher">Teacher</Badge>
+    <Badge variant="assistant">Assistant</Badge>
+  </div>
+</Story>
+
+<!-- All Status Variants -->
+<Story name="All Status Variants">
+  <div class="flex gap-2 flex-wrap">
+    <Badge variant="success">Success</Badge>
+    <Badge variant="warning">Warning</Badge>
+    <Badge variant="error">Error</Badge>
+    <Badge variant="info">Info</Badge>
+    <Badge variant="neutral">Neutral</Badge>
+  </div>
+</Story>

package/dist/primitives/Badges/Badge.svelte

@@ -1,142 +1,142 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { classNames } from "./../../utils/utils.js";
-
-  type Size = "xs" | "sm" | "md" | "lg" | "small" | "medium" | "large";
-  type Variant = "neutral" | "success" | "warning" | "error" | "danger" | "info" |
-    "red" | "blue" | "purple" | "green" | "orange" | "yellow" | "gray" | "pink" | "indigo" | "cyan" | "notification";
-
-  interface Props {
-    /** Size variant */
-    size?: Size;
-    /** Additional CSS classes */
-    className?: string;
-    /** Semantic or color variant */
-    variant?: Variant;
-    /** Custom text color (hex) - overrides variant */
-    textColor?: string | null;
-    /** Custom background color (hex or rgba) - overrides variant */
-    bgColor?: string | null;
-    /** Show status dot before text (uses variant color) */
-    showDot?: boolean;
-    /** Pill mode for counts/notifications (circular, minimal padding) */
-    pill?: boolean;
-    /** Border radius style - default or full pill */
-    shape?: "rounded" | "pill";
-    /** Large size (Flowbite API compatibility) */
-    large?: boolean;
-    /** Click handler callback */
-    onclick?: (e: MouseEvent) => void;
-    /** Left icon slot */
-    leftIcon?: Snippet;
-    /** Child content */
-    children?: Snippet;
-  }
-
-  let {
-    size = "md",
-    className = '',
-    variant = "neutral",
-    textColor = null,
-    bgColor = null,
-    showDot = false,
-    pill = false,
-    shape = "rounded",
-    large = false,
-    onclick,
-    leftIcon,
-    children
-  }: Props = $props();
-
-  const sizeMap: Record<string, string> = { "small": "sm", "medium": "md", "large": "lg" };
-  
-  let resolvedSize = $derived(large ? "lg" : (sizeMap[size] || size));
-
-  let sizeClasses = $derived((() => {
-    switch (resolvedSize) {
-      case "xs":
-        return "text-xs px-1.5 py-0.5 font-medium";
-      case "sm":
-        return "text-xs px-2 py-0.5 font-medium";
-      case "md":
-        return "text-xs px-2.5 py-0.5 font-medium";
-      case "lg":
-        return "text-sm px-3 py-0.5 font-medium";
-      default:
-        return "text-xs px-2.5 py-0.5 font-medium";
-    }
-  })());
-
-  let shapeClasses = $derived((() => {
-    if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
-    return shape === "pill" ? "rounded-full" : "rounded";
-  })());
-
-  let normalizedVariant = $derived(String(variant).toLowerCase());
-
-  let variantClasses = $derived((() => {
-    switch (normalizedVariant) {
-      case "success":
-        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
-      case "warning":
-        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
-      case "error":
-      case "danger":
-        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
-      case "info":
-        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
-      case "red":
-        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
-      case "blue":
-        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
-      case "purple":
-        return "text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300";
-      case "green":
-        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
-      case "orange":
-        return "text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300";
-      case "yellow":
-        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
-      case "gray":
-        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
-      case "pink":
-        return "text-pink-800 bg-pink-100 dark:bg-pink-900 dark:text-pink-300";
-      case "indigo":
-        return "text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300";
-      case "cyan":
-        return "text-cyan-800 bg-cyan-100 dark:bg-cyan-900 dark:text-cyan-300";
-      case "notification":
-        return "text-white bg-red-500 dark:bg-red-600";
-      case "neutral":
-      default:
-        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
-    }
-  })());
-
-  let customStyle = $derived((() => {
-    const styles: string[] = [];
-    if (textColor) styles.push(`color: ${textColor}`);
-    if (bgColor) styles.push(`background-color: ${bgColor}`);
-    return styles.length > 0 ? styles.join("; ") : undefined;
-  })());
-</script>
-
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class={classNames(
-    "inline-flex items-center gap-1.5",
-    sizeClasses,
-    variantClasses,
-    shapeClasses,
-    className
-  )}
-  style={customStyle}
-  onclick={(e) => onclick?.(e)}
->
-  {#if showDot}
-    <span class="w-1.5 h-1.5 rounded-full bg-current flex-shrink-0"></span>
-  {/if}
-  {@render leftIcon?.()}
-  {@render children?.()}
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { classNames } from "./../../utils/utils.js";
+
+  type Size = "xs" | "sm" | "md" | "lg" | "small" | "medium" | "large";
+  type Variant = "neutral" | "success" | "warning" | "error" | "danger" | "info" |
+    "red" | "blue" | "purple" | "green" | "orange" | "yellow" | "gray" | "pink" | "indigo" | "cyan" | "notification";
+
+  interface Props {
+    /** Size variant */
+    size?: Size;
+    /** Additional CSS classes */
+    className?: string;
+    /** Semantic or color variant */
+    variant?: Variant;
+    /** Custom text color (hex) - overrides variant */
+    textColor?: string | null;
+    /** Custom background color (hex or rgba) - overrides variant */
+    bgColor?: string | null;
+    /** Show status dot before text (uses variant color) */
+    showDot?: boolean;
+    /** Pill mode for counts/notifications (circular, minimal padding) */
+    pill?: boolean;
+    /** Border radius style - default or full pill */
+    shape?: "rounded" | "pill";
+    /** Large size (Flowbite API compatibility) */
+    large?: boolean;
+    /** Click handler callback */
+    onclick?: (e: MouseEvent) => void;
+    /** Left icon slot */
+    leftIcon?: Snippet;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    size = "md",
+    className = '',
+    variant = "neutral",
+    textColor = null,
+    bgColor = null,
+    showDot = false,
+    pill = false,
+    shape = "rounded",
+    large = false,
+    onclick,
+    leftIcon,
+    children
+  }: Props = $props();
+
+  const sizeMap: Record<string, string> = { "small": "sm", "medium": "md", "large": "lg" };
+  
+  let resolvedSize = $derived(large ? "lg" : (sizeMap[size] || size));
+
+  let sizeClasses = $derived((() => {
+    switch (resolvedSize) {
+      case "xs":
+        return "text-xs px-1.5 py-0.5 font-medium";
+      case "sm":
+        return "text-xs px-2 py-0.5 font-medium";
+      case "md":
+        return "text-xs px-2.5 py-0.5 font-medium";
+      case "lg":
+        return "text-sm px-3 py-0.5 font-medium";
+      default:
+        return "text-xs px-2.5 py-0.5 font-medium";
+    }
+  })());
+
+  let shapeClasses = $derived((() => {
+    if (pill) return "rounded-full min-w-5 h-5 px-1.5 justify-center";
+    return shape === "pill" ? "rounded-full" : "rounded";
+  })());
+
+  let normalizedVariant = $derived(String(variant).toLowerCase());
+
+  let variantClasses = $derived((() => {
+    switch (normalizedVariant) {
+      case "success":
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
+      case "warning":
+        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
+      case "error":
+      case "danger":
+        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
+      case "info":
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
+      case "red":
+        return "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
+      case "blue":
+        return "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
+      case "purple":
+        return "text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300";
+      case "green":
+        return "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
+      case "orange":
+        return "text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300";
+      case "yellow":
+        return "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
+      case "gray":
+        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
+      case "pink":
+        return "text-pink-800 bg-pink-100 dark:bg-pink-900 dark:text-pink-300";
+      case "indigo":
+        return "text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300";
+      case "cyan":
+        return "text-cyan-800 bg-cyan-100 dark:bg-cyan-900 dark:text-cyan-300";
+      case "notification":
+        return "text-white bg-red-500 dark:bg-red-600";
+      case "neutral":
+      default:
+        return "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
+    }
+  })());
+
+  let customStyle = $derived((() => {
+    const styles: string[] = [];
+    if (textColor) styles.push(`color: ${textColor}`);
+    if (bgColor) styles.push(`background-color: ${bgColor}`);
+    return styles.length > 0 ? styles.join("; ") : undefined;
+  })());
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class={classNames(
+    "inline-flex items-center gap-1.5",
+    sizeClasses,
+    variantClasses,
+    shapeClasses,
+    className
+  )}
+  style={customStyle}
+  onclick={(e) => onclick?.(e)}
+>
+  {#if showDot}
+    <span class="w-1.5 h-1.5 rounded-full bg-current flex-shrink-0"></span>
+  {/if}
+  {@render leftIcon?.()}
+  {@render children?.()}
+</div>