@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/recipes/feedback/ErrorDisplay.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-  import Icon from "../../primitives/Icons/Icon.svelte";
-
-  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
-
-  interface Props {
-    /** Error message to display */
-    error?: string;
-    /** Whether to show the error */
-    show?: boolean;
-    /** Whether to apply shake animation */
-    shake?: boolean;
-    /** Icon to display (from Icon component) */
-    icon?: IconName;
-    /** Size of the icon */
-    iconSize?: string;
-    /** Additional class for the container */
-    className?: string;
-  }
-
-  let {
-    error = '',
-    show = true,
-    shake = false,
-    icon = 'ErrorCircle',
-    iconSize = '16',
-    className = ''
-  }: Props = $props();
-</script>
-
-{#if error && show}
-  <div
-    class="flex items-center gap-1.5 text-red-600 dark:text-red-500 {shake ? 'animate-shake' : ''} {className}"
-  >
-    <Icon name={icon} size={iconSize} />
-    <p class="text-sm font-medium">{error}</p>
-  </div>
-{/if}
+<script lang="ts">
+  import Icon from "../../primitives/Icons/Icon.svelte";
+
+  type IconName = "Home" | "Shows" | "Availability" | "Profile" | "Payment" | "Notification" | "More" | "MoreHori" | "Info" | "ChevronLeft" | "ChevronRight" | "Signout" | "CheckCircle" | "CheckCircleOutline" | "ErrorCircle" | "ArrowLeft" | "ArrowRight" | "Back" | "DownArrow" | "Message" | "Reload" | "Copy" | "Cross";
+
+  interface Props {
+    /** Error message to display */
+    error?: string;
+    /** Whether to show the error */
+    show?: boolean;
+    /** Whether to apply shake animation */
+    shake?: boolean;
+    /** Icon to display (from Icon component) */
+    icon?: IconName;
+    /** Size of the icon */
+    iconSize?: string;
+    /** Additional class for the container */
+    className?: string;
+  }
+
+  let {
+    error = '',
+    show = true,
+    shake = false,
+    icon = 'ErrorCircle',
+    iconSize = '16',
+    className = ''
+  }: Props = $props();
+</script>
+
+{#if error && show}
+  <div
+    class="flex items-center gap-1.5 text-red-600 dark:text-red-500 {shake ? 'animate-shake' : ''} {className}"
+  >
+    <Icon name={icon} size={iconSize} />
+    <p class="text-sm font-medium">{error}</p>
+  </div>
+{/if}

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.js

@@ -1,129 +1,129 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import StatusIndicator from './StatusIndicator.svelte';
-
-describe('StatusIndicator', () => {
-  describe('idle state', () => {
-    it('renders empty container when status is idle', () => {
-      const { container } = render(StatusIndicator, { status: 'idle' });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator).toBeTruthy();
-      expect(indicator.children.length).toBe(0);
-    });
-
-    it('uses default status of idle', () => {
-      const { container } = render(StatusIndicator);
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.children.length).toBe(0);
-    });
-  });
-
-  describe('loading state', () => {
-    it('renders spinner when status is loading', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner).toBeTruthy();
-    });
-
-    it('renders spinner SVG with track and head circles', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.querySelector('svg')).toBeTruthy();
-      expect(spinner.querySelector('.spinner-track')).toBeTruthy();
-      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
-    });
-
-    it('applies size to spinner', () => {
-      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
-      const spinner = container.querySelector('.spinner');
-      expect(spinner.style.width).toBe('64px');
-      expect(spinner.style.height).toBe('64px');
-    });
-  });
-
-  describe('success state', () => {
-    it('renders success circle when status is success', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      const success = container.querySelector('.success-circle');
-      expect(success).toBeTruthy();
-    });
-
-    it('renders success SVG with background and checkmark', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      const success = container.querySelector('.success-circle');
-      expect(success.querySelector('svg')).toBeTruthy();
-      expect(success.querySelector('.success-bg')).toBeTruthy();
-      expect(success.querySelector('.checkmark')).toBeTruthy();
-    });
-
-    it('applies size to success circle', () => {
-      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
-      const success = container.querySelector('.success-circle');
-      expect(success.style.width).toBe('32px');
-      expect(success.style.height).toBe('32px');
-    });
-  });
-
-  describe('error state', () => {
-    it('renders error circle when status is error', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      const error = container.querySelector('.error-circle');
-      expect(error).toBeTruthy();
-    });
-
-    it('renders error SVG with background and X lines', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      const error = container.querySelector('.error-circle');
-      expect(error.querySelector('svg')).toBeTruthy();
-      expect(error.querySelector('.error-bg')).toBeTruthy();
-      const xLines = error.querySelectorAll('.error-x');
-      expect(xLines.length).toBe(2);
-    });
-
-    it('applies size to error circle', () => {
-      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
-      const error = container.querySelector('.error-circle');
-      expect(error.style.width).toBe('24px');
-      expect(error.style.height).toBe('24px');
-    });
-  });
-
-  describe('size prop', () => {
-    it('uses default size of 48px', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.style.width).toBe('48px');
-      expect(indicator.style.height).toBe('48px');
-    });
-
-    it('accepts custom size', () => {
-      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
-      const indicator = container.querySelector('.status-indicator');
-      expect(indicator.style.width).toBe('100px');
-      expect(indicator.style.height).toBe('100px');
-    });
-  });
-
-  describe('state transitions', () => {
-    it('only renders one state at a time - loading', () => {
-      const { container } = render(StatusIndicator, { status: 'loading' });
-      expect(container.querySelector('.spinner')).toBeTruthy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('only renders one state at a time - success', () => {
-      const { container } = render(StatusIndicator, { status: 'success' });
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeTruthy();
-      expect(container.querySelector('.error-circle')).toBeFalsy();
-    });
-
-    it('only renders one state at a time - error', () => {
-      const { container } = render(StatusIndicator, { status: 'error' });
-      expect(container.querySelector('.spinner')).toBeFalsy();
-      expect(container.querySelector('.success-circle')).toBeFalsy();
-      expect(container.querySelector('.error-circle')).toBeTruthy();
-    });
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import StatusIndicator from './StatusIndicator.svelte';
+
+describe('StatusIndicator', () => {
+  describe('idle state', () => {
+    it('renders empty container when status is idle', () => {
+      const { container } = render(StatusIndicator, { status: 'idle' });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator).toBeTruthy();
+      expect(indicator.children.length).toBe(0);
+    });
+
+    it('uses default status of idle', () => {
+      const { container } = render(StatusIndicator);
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.children.length).toBe(0);
+    });
+  });
+
+  describe('loading state', () => {
+    it('renders spinner when status is loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner).toBeTruthy();
+    });
+
+    it('renders spinner SVG with track and head circles', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.querySelector('svg')).toBeTruthy();
+      expect(spinner.querySelector('.spinner-track')).toBeTruthy();
+      expect(spinner.querySelector('.spinner-head')).toBeTruthy();
+    });
+
+    it('applies size to spinner', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 64 });
+      const spinner = container.querySelector('.spinner');
+      expect(spinner.style.width).toBe('64px');
+      expect(spinner.style.height).toBe('64px');
+    });
+  });
+
+  describe('success state', () => {
+    it('renders success circle when status is success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success).toBeTruthy();
+    });
+
+    it('renders success SVG with background and checkmark', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      const success = container.querySelector('.success-circle');
+      expect(success.querySelector('svg')).toBeTruthy();
+      expect(success.querySelector('.success-bg')).toBeTruthy();
+      expect(success.querySelector('.checkmark')).toBeTruthy();
+    });
+
+    it('applies size to success circle', () => {
+      const { container } = render(StatusIndicator, { status: 'success', size: 32 });
+      const success = container.querySelector('.success-circle');
+      expect(success.style.width).toBe('32px');
+      expect(success.style.height).toBe('32px');
+    });
+  });
+
+  describe('error state', () => {
+    it('renders error circle when status is error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error).toBeTruthy();
+    });
+
+    it('renders error SVG with background and X lines', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      const error = container.querySelector('.error-circle');
+      expect(error.querySelector('svg')).toBeTruthy();
+      expect(error.querySelector('.error-bg')).toBeTruthy();
+      const xLines = error.querySelectorAll('.error-x');
+      expect(xLines.length).toBe(2);
+    });
+
+    it('applies size to error circle', () => {
+      const { container } = render(StatusIndicator, { status: 'error', size: 24 });
+      const error = container.querySelector('.error-circle');
+      expect(error.style.width).toBe('24px');
+      expect(error.style.height).toBe('24px');
+    });
+  });
+
+  describe('size prop', () => {
+    it('uses default size of 48px', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.style.width).toBe('48px');
+      expect(indicator.style.height).toBe('48px');
+    });
+
+    it('accepts custom size', () => {
+      const { container } = render(StatusIndicator, { status: 'loading', size: 100 });
+      const indicator = container.querySelector('.status-indicator');
+      expect(indicator.style.width).toBe('100px');
+      expect(indicator.style.height).toBe('100px');
+    });
+  });
+
+  describe('state transitions', () => {
+    it('only renders one state at a time - loading', () => {
+      const { container } = render(StatusIndicator, { status: 'loading' });
+      expect(container.querySelector('.spinner')).toBeTruthy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - success', () => {
+      const { container } = render(StatusIndicator, { status: 'success' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeTruthy();
+      expect(container.querySelector('.error-circle')).toBeFalsy();
+    });
+
+    it('only renders one state at a time - error', () => {
+      const { container } = render(StatusIndicator, { status: 'error' });
+      expect(container.querySelector('.spinner')).toBeFalsy();
+      expect(container.querySelector('.success-circle')).toBeFalsy();
+      expect(container.querySelector('.error-circle')).toBeTruthy();
+    });
+  });
+});

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.svelte

@@ -1,167 +1,167 @@
-<script lang="ts">
-  interface Props {
-    /** Current status: idle, loading, success, or error */
-    status?: "idle" | "loading" | "success" | "error";
-    /** Size in pixels */
-    size?: number;
-  }
-
-  let { status = "idle", size = 48 }: Props = $props();
-</script>
-
-<div
-  class="flex items-center justify-center"
-  style="width: {size}px; height: {size}px;"
->
-  {#if status === "loading"}
-    <div class="spinner" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-gray-200 dark:stroke-gray-600"
-          cx="25"
-          cy="25"
-          r="20"
-          fill="none"
-          stroke-width="4"
-        />
-        <circle
-          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
-          cx="25"
-          cy="25"
-          r="20"
-          fill="none"
-          stroke-width="4"
-        />
-      </svg>
-    </div>
-  {:else if status === "success"}
-    <div class="success-circle" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
-          cx="25"
-          cy="25"
-          r="23"
-          fill="none"
-          stroke-width="2"
-        />
-        <polyline
-          class="checkmark stroke-green-600"
-          points="15,26 22,33 35,18"
-          fill="none"
-          stroke-width="3"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-  {:else if status === "error"}
-    <div class="error-circle" style="width: {size}px; height: {size}px;">
-      <svg viewBox="0 0 50 50">
-        <circle
-          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
-          cx="25"
-          cy="25"
-          r="23"
-          fill="none"
-          stroke-width="2"
-        />
-        <line
-          class="error-x stroke-red-600"
-          x1="17" y1="17" x2="33" y2="33"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-        <line
-          class="error-x error-x-2 stroke-red-600"
-          x1="33" y1="17" x2="17" y2="33"
-          stroke-width="3"
-          stroke-linecap="round"
-        />
-      </svg>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .spinner svg {
-    animation: rotate 1s linear infinite;
-  }
-
-  .spinner-head {
-    stroke-dasharray: 80, 200;
-    stroke-dashoffset: 0;
-    animation: dash 1.2s ease-in-out infinite;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes dash {
-    0% {
-      stroke-dasharray: 1, 200;
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: 80, 200;
-      stroke-dashoffset: -35;
-    }
-    100% {
-      stroke-dasharray: 80, 200;
-      stroke-dashoffset: -125;
-    }
-  }
-
-  .success-circle {
-    animation: pop-in 300ms ease-out;
-  }
-
-  .checkmark {
-    stroke-dasharray: 40;
-    stroke-dashoffset: 40;
-    animation: draw-check 400ms ease-out 100ms forwards;
-  }
-
-  @keyframes pop-in {
-    0% {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    50% {
-      transform: scale(1.05);
-    }
-    100% {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes draw-check {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  .error-circle {
-    animation: pop-in 300ms ease-out;
-  }
-
-  .error-x {
-    stroke-dasharray: 25;
-    stroke-dashoffset: 25;
-    animation: draw-x 300ms ease-out 100ms forwards;
-  }
-
-  .error-x-2 {
-    animation-delay: 200ms;
-  }
-
-  @keyframes draw-x {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-</style>
+<script lang="ts">
+  interface Props {
+    /** Current status: idle, loading, success, or error */
+    status?: "idle" | "loading" | "success" | "error";
+    /** Size in pixels */
+    size?: number;
+  }
+
+  let { status = "idle", size = 48 }: Props = $props();
+</script>
+
+<div
+  class="flex items-center justify-center"
+  style="width: {size}px; height: {size}px;"
+>
+  {#if status === "loading"}
+    <div class="spinner" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-gray-200 dark:stroke-gray-600"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+        <circle
+          class="spinner-head stroke-blue-700 dark:stroke-blue-500"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="4"
+        />
+      </svg>
+    </div>
+  {:else if status === "success"}
+    <div class="success-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-green-600 fill-green-50 dark:fill-green-900/20"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <polyline
+          class="checkmark stroke-green-600"
+          points="15,26 22,33 35,18"
+          fill="none"
+          stroke-width="3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  {:else if status === "error"}
+    <div class="error-circle" style="width: {size}px; height: {size}px;">
+      <svg viewBox="0 0 50 50">
+        <circle
+          class="stroke-red-600 fill-red-50 dark:fill-red-900/20"
+          cx="25"
+          cy="25"
+          r="23"
+          fill="none"
+          stroke-width="2"
+        />
+        <line
+          class="error-x stroke-red-600"
+          x1="17" y1="17" x2="33" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+        <line
+          class="error-x error-x-2 stroke-red-600"
+          x1="33" y1="17" x2="17" y2="33"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spinner svg {
+    animation: rotate 1s linear infinite;
+  }
+
+  .spinner-head {
+    stroke-dasharray: 80, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.2s ease-in-out infinite;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 80, 200;
+      stroke-dashoffset: -125;
+    }
+  }
+
+  .success-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .checkmark {
+    stroke-dasharray: 40;
+    stroke-dashoffset: 40;
+    animation: draw-check 400ms ease-out 100ms forwards;
+  }
+
+  @keyframes pop-in {
+    0% {
+      transform: scale(0.8);
+      opacity: 0;
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes draw-check {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  .error-circle {
+    animation: pop-in 300ms ease-out;
+  }
+
+  .error-x {
+    stroke-dasharray: 25;
+    stroke-dashoffset: 25;
+    animation: draw-x 300ms ease-out 100ms forwards;
+  }
+
+  .error-x-2 {
+    animation-delay: 200ms;
+  }
+
+  @keyframes draw-x {
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+</style>