@getmicdrop/svelte-components 5.3.10 → 5.3.13

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts

@@ -26,6 +26,8 @@ interface Props {
     acceptedTypes?: string[];
     /** Label shown when empty */
     emptyLabel?: string;
+    /** Constraints text shown inside dropzone (e.g., "Max 10MB, 2160px") */
+    constraintsText?: string;
     /** Helper text shown below dropzone */
     helperText?: string;
     /** Callback when image is uploaded - receives File, optionally returns URL

package/dist/recipes/ImageUploader/ImageUploader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAU5E,KAAK,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;sEAEkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAumBH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ImageUploader.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/ImageUploader/ImageUploader.svelte.ts"],"names":[],"mappings":"AAoBA,OAAO,gCAAgC,CAAC;AACxC,OAAO,sEAAsE,CAAC;AAW5E,KAAK,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC/B,KAAK,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAC3D,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/B,UAAU,KAAK;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wBAAwB;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;sEAEkE;IAClE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;IAChE,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,4EAA4E;IAC5E,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsoBH,QAAA,MAAM,aAAa,iDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/recipes/Toaster/Toaster.stories.svelte

@@ -1,62 +1,62 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import { Toaster } from "svelte-sonner";
-  import { showToast } from "../../stores/toaster";
-
-  const { Story } = defineMeta({
-    title: "Components/Toaster",
-  });
-
-  function showSuccessToast() {
-    showToast("Action completed successfully!", "success");
-  }
-
-  function showErrorToast() {
-    showToast("An error occurred. Please try again.", "error");
-  }
-</script>
-
-<Story name="Trigger Success Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showSuccessToast}
-      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
-    >
-      Show Success Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
-  </div>
-</Story>
-
-<Story name="Trigger Error Toast">
-  <div class="p-8">
-    <Toaster
-      position="bottom-right"
-      toastOptions={{
-        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
-        classes: {
-          error: "text-red-600 dark:text-red-400",
-          success: "text-green-600 dark:text-green-400",
-        },
-      }}
-    />
-    <button
-      onclick={showErrorToast}
-      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
-    >
-      Show Error Toast
-    </button>
-    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import { Toaster } from "svelte-sonner";
+  import { showToast } from "../../stores/toaster";
+
+  const { Story } = defineMeta({
+    title: "Components/Toaster",
+  });
+
+  function showSuccessToast() {
+    showToast("Action completed successfully!", "success");
+  }
+
+  function showErrorToast() {
+    showToast("An error occurred. Please try again.", "error");
+  }
+</script>
+
+<Story name="Trigger Success Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showSuccessToast}
+      class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+    >
+      Show Success Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see a success toast notification</p>
+  </div>
+</Story>
+
+<Story name="Trigger Error Toast">
+  <div class="p-8">
+    <Toaster
+      position="bottom-right"
+      toastOptions={{
+        class: "text-sm bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700",
+        classes: {
+          error: "text-red-600 dark:text-red-400",
+          success: "text-green-600 dark:text-green-400",
+        },
+      }}
+    />
+    <button
+      onclick={showErrorToast}
+      class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700"
+    >
+      Show Error Toast
+    </button>
+    <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">Click the button to see an error toast notification</p>
+  </div>
+</Story>

package/dist/recipes/feedback/EmptyState/EmptyState.svelte

@@ -1,47 +1,47 @@
-<script lang="ts">
-  import type { Component } from 'svelte';
-  import { typography } from '../../../tokens/typography';
-
-  interface Props {
-    /** Main message to display */
-    message?: string;
-    /** Secondary descriptive text */
-    subtext?: string;
-    /** Icon component (when iconType='component') */
-    icon?: Component<any> | null;
-    /** Image path (when iconType='image') */
-    imageSrc?: string;
-    /** Type of icon provided */
-    iconType?: 'component' | 'image';
-    /** Size classes for the icon */
-    iconSize?: string;
-    /** Additional CSS classes */
-    class?: string;
-  }
-
-  let {
-    message = 'No results found',
-    subtext = '',
-    icon = null,
-    imageSrc = '',
-    iconType = 'component',
-    iconSize = 'w-20 h-20',
-    class: className = ''
-  }: Props = $props();
-</script>
-
-<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
-  {#if icon || imageSrc}
-    {#if iconType === 'component' && icon}
-      {@const IconComponent = icon}
-      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
-    {:else if iconType === 'image' && imageSrc}
-      <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
-    {/if}
-  {/if}
-
-  <h3 class={typography.h3}>{message}</h3>
-  {#if subtext}
-    <p class={`${typography.smMuted} mt-1`}>{subtext}</p>
-  {/if}
-</div>
+<script lang="ts">
+  import type { Component } from 'svelte';
+  import { typography } from '../../../tokens/typography';
+
+  interface Props {
+    /** Main message to display */
+    message?: string;
+    /** Secondary descriptive text */
+    subtext?: string;
+    /** Icon component (when iconType='component') */
+    icon?: Component<any> | null;
+    /** Image path (when iconType='image') */
+    imageSrc?: string;
+    /** Type of icon provided */
+    iconType?: 'component' | 'image';
+    /** Size classes for the icon */
+    iconSize?: string;
+    /** Additional CSS classes */
+    class?: string;
+  }
+
+  let {
+    message = 'No results found',
+    subtext = '',
+    icon = null,
+    imageSrc = '',
+    iconType = 'component',
+    iconSize = 'w-20 h-20',
+    class: className = ''
+  }: Props = $props();
+</script>
+
+<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
+  {#if icon || imageSrc}
+    {#if iconType === 'component' && icon}
+      {@const IconComponent = icon}
+      <IconComponent class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
+    {:else if iconType === 'image' && imageSrc}
+      <img src={imageSrc} alt="" class="mb-3 {iconSize}" />
+    {/if}
+  {/if}
+
+  <h3 class={typography.h3}>{message}</h3>
+  {#if subtext}
+    <p class={`${typography.smMuted} mt-1`}>{subtext}</p>
+  {/if}
+</div>

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

@@ -1,69 +1,69 @@
-import { render, screen } from "@testing-library/svelte";
-import { expect, describe, test } from "vitest";
-import ErrorDisplay from "./ErrorDisplay.svelte";
-
-describe("ErrorDisplay Component Tests", () => {
-  test("Shows error message when error and show are true", () => {
-    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
-    expect(screen.getByText("Invalid input")).toBeInTheDocument();
-  });
-
-  test("Does not show when error is empty", () => {
-    render(ErrorDisplay, { props: { error: "", show: true } });
-    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
-  });
-
-  test("Does not show when show is false", () => {
-    render(ErrorDisplay, { props: { error: "Error message", show: false } });
-    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
-  });
-
-  test("Has error text color", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("text-red-600");
-  });
-
-  test("Has shake class when shake is true", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("animate-shake");
-  });
-
-  test("Does not have shake class when shake is false", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, shake: false },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).not.toHaveClass("animate-shake");
-  });
-
-  test("Contains icon element", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const svg = container.querySelector("svg");
-    expect(svg).toBeInTheDocument();
-  });
-
-  test("Has flex layout", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("flex");
-    expect(wrapper).toHaveClass("items-center");
-  });
-
-  test("Applies custom className", () => {
-    const { container } = render(ErrorDisplay, {
-      props: { error: "Error", show: true, className: "mt-2" },
-    });
-    const wrapper = container.firstChild;
-    expect(wrapper).toHaveClass("mt-2");
-  });
-});
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import ErrorDisplay from "./ErrorDisplay.svelte";
+
+describe("ErrorDisplay Component Tests", () => {
+  test("Shows error message when error and show are true", () => {
+    render(ErrorDisplay, { props: { error: "Invalid input", show: true } });
+    expect(screen.getByText("Invalid input")).toBeInTheDocument();
+  });
+
+  test("Does not show when error is empty", () => {
+    render(ErrorDisplay, { props: { error: "", show: true } });
+    expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+  });
+
+  test("Does not show when show is false", () => {
+    render(ErrorDisplay, { props: { error: "Error message", show: false } });
+    expect(screen.queryByText("Error message")).not.toBeInTheDocument();
+  });
+
+  test("Has error text color", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("text-red-600");
+  });
+
+  test("Has shake class when shake is true", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("animate-shake");
+  });
+
+  test("Does not have shake class when shake is false", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, shake: false },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).not.toHaveClass("animate-shake");
+  });
+
+  test("Contains icon element", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has flex layout", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("flex");
+    expect(wrapper).toHaveClass("items-center");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(ErrorDisplay, {
+      props: { error: "Error", show: true, className: "mt-2" },
+    });
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveClass("mt-2");
+  });
+});

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

@@ -1,112 +1,112 @@
-<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 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,
+  }}
+/>