@getmicdrop/svelte-components 5.4.1 → 5.4.2

package/dist/recipes/feedback/ErrorDisplay.stories.svelte

@@ -1,112 +1,113 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import ErrorDisplay from './ErrorDisplay.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/ErrorDisplay',
-    component: ErrorDisplay,
-    tags: ['autodocs'],
-    argTypes: {
-      error: {
-        control: 'text',
-        description: 'Error message to display',
-      },
-      show: {
-        control: 'boolean',
-        description: 'Controls visibility',
-      },
-      shake: {
-        control: 'boolean',
-        description: 'Enable shake animation',
-      },
-      icon: {
-        control: 'text',
-        description: 'Icon name from Icon component',
-      },
-      iconSize: {
-        control: 'text',
-        description: 'Size of the icon',
-      },
-    },
-  });
-</script>
-
-<script>
-  let showShakeDemo = $state(false);
-  function triggerShake() {
-    showShakeDemo = false;
-    setTimeout(() => {
-      showShakeDemo = true;
-    }, 10);
-  }
-</script>
-
-
-<Story
-  name="Default"
-  args={{
-    error: 'This is an error message',
-    show: true,
-    shake: false,
-  }}
-/>
-
-<Story
-  name="With Shake Animation"
-  args={{
-    error: 'Invalid input detected',
-    show: true,
-    shake: true,
-  }}
-/>
-
-<Story name="Interactive Shake">
-  <div class="space-y-4">
-    <button
-      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
-      onclick={triggerShake}
-    >
-      Trigger Error Shake
-    </button>
-    <ErrorDisplay
-      error="Form validation failed"
-      show={showShakeDemo}
-      shake={showShakeDemo}
-    />
-  </div>
-</Story>
-
-<Story
-  name="Different Icons"
->
-  <div class="space-y-4">
-    <ErrorDisplay error="Error with default icon" />
-    <ErrorDisplay error="Warning message" icon="Warning" />
-    <ErrorDisplay error="Info message" icon="Info" />
-  </div>
-</Story>
-
-<Story
-  name="In Form Context"
->
-  <div class="max-w-md">
-    <label class="block text-sm font-medium mb-1">Email</label>
-    <input
-      type="email"
-      class="w-full px-3 py-2 border border-red-500 rounded"
-      value="invalid-email"
-    />
-    <div class="mt-1">
-      <ErrorDisplay error="Please enter a valid email address" shake={true} />
-    </div>
-  </div>
-</Story>
-
-<Story
-  name="Hidden State"
-  args={{
-    error: 'This error is hidden',
-    show: false,
-  }}
-/>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import ErrorDisplay from './ErrorDisplay.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/ErrorDisplay',
+    component: ErrorDisplay,
+    tags: ['autodocs'],
+    argTypes: {
+      error: {
+        control: 'text',
+        description: 'Error message to display',
+      },
+      show: {
+        control: 'boolean',
+        description: 'Controls visibility',
+      },
+      shake: {
+        control: 'boolean',
+        description: 'Enable shake animation',
+      },
+      icon: {
+        control: 'text',
+        description: 'Icon name from Icon component',
+      },
+      iconSize: {
+        control: 'text',
+        description: 'Size of the icon',
+      },
+    },
+  });
+</script>
+
+<script>
+  let showShakeDemo = $state(false);
+  function triggerShake() {
+    showShakeDemo = false;
+    setTimeout(() => {
+      showShakeDemo = true;
+    }, 10);
+  }
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    error: 'This is an error message',
+    show: true,
+    shake: false,
+  }}
+/>
+
+<Story
+  name="With Shake Animation"
+  args={{
+    error: 'Invalid input detected',
+    show: true,
+    shake: true,
+  }}
+/>
+
+<Story name="Interactive Shake">
+  <div class="space-y-4">
+    <button
+      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
+      onclick={triggerShake}
+    >
+      Trigger Error Shake
+    </button>
+    <ErrorDisplay
+      error="Form validation failed"
+      show={showShakeDemo}
+      shake={showShakeDemo}
+    />
+  </div>
+</Story>
+
+<Story
+  name="Different Icons"
+>
+  <div class="space-y-4">
+    <ErrorDisplay error="Error with default icon" />
+    <ErrorDisplay error="Warning message" icon="Warning" />
+    <ErrorDisplay error="Info message" icon="Info" />
+  </div>
+</Story>
+
+<Story
+  name="In Form Context"
+>
+  <div class="max-w-md">
+    <label for="error-display-email" class="block text-sm font-medium mb-1">Email</label>
+    <input
+      id="error-display-email"
+      type="email"
+      class="w-full px-3 py-2 border border-red-500 rounded"
+      value="invalid-email"
+    />
+    <div class="mt-1">
+      <ErrorDisplay error="Please enter a valid email address" shake={true} />
+    </div>
+  </div>
+</Story>
+
+<Story
+  name="Hidden State"
+  args={{
+    error: 'This error is hidden',
+    show: false,
+  }}
+/>

package/dist/recipes/feedback/ErrorDisplay.svelte

@@ -1,38 +1,67 @@
-<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 type { Snippet } from 'svelte';
+  import Icon from "../../primitives/Icons/Icon.svelte";
+  import { typography } from '../../tokens/typography';
+
+  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 {
+    /** Title of the error */
+    title?: string;
+    /** Error message to display */
+    error?: string;
+    /** Message (alias for error) */
+    message?: 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;
+    /** Optional action content (buttons, links, etc.) */
+    children?: Snippet;
+  }
+
+  let {
+    title = '',
+    error = '',
+    message = '',
+    show = true,
+    shake = false,
+    icon = 'ErrorCircle',
+    iconSize = '16',
+    className = '',
+    children
+  }: Props = $props();
+  
+  // Support both naming conventions
+  let displayMessage = $derived(error || message);
+</script>
+
+{#if (displayMessage || title) && show}
+  <div
+    class="flex flex-col items-center justify-center px-6 py-10 text-center {shake ? 'animate-shake' : ''} {className}"
+  >
+    <div class="w-14 h-14 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-4">
+      <Icon name={icon} size="28" class="text-red-600 dark:text-red-400" />
+    </div>
+    
+    {#if title}
+      <h3 class={typography.h3}>{title}</h3>
+    {/if}
+    
+    {#if displayMessage}
+      <p class={`${typography.smMuted} mt-1`}>{displayMessage}</p>
+    {/if}
+    
+    {#if children}
+      <div class="mt-4">
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+{/if}

package/dist/recipes/feedback/ErrorDisplay.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { Snippet } from '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 {
+    /** Title of the error */
+    title?: string;
     /** Error message to display */
     error?: string;
+    /** Message (alias for error) */
+    message?: string;
     /** Whether to show the error */
     show?: boolean;
     /** Whether to apply shake animation */
@@ -12,6 +17,8 @@ interface Props {
     iconSize?: string;
     /** Additional class for the container */
     className?: string;
+    /** Optional action content (buttons, links, etc.) */
+    children?: Snippet;
 }
 declare const ErrorDisplay: import("svelte").Component<Props, {}, "">;
 type ErrorDisplay = ReturnType<typeof ErrorDisplay>;

package/dist/recipes/feedback/ErrorDisplay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/feedback/ErrorDisplay.svelte.ts"],"names":[],"mappings":"AAME,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5T,UAAU,KAAK;IACb,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/feedback/ErrorDisplay.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,KAAK,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,oBAAoB,GAAG,aAAa,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5T,UAAU,KAAK;IACb,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgDH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

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