@getmicdrop/svelte-components 3.0.0 → 4.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"SuperLogin.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/SuperLogin.svelte.js"],"names":[],"mappings":";;;;;AAy9BA;iBA76BkC,MAAM;cAAY,MAAM;cAAY,MAAM;kBAAgB,MAAM;kBAAgB,OAAO;gBAAc,MAAM;gBAAc,MAAM;iBAAe,MAAM;0BAAwB,MAAM;wBAAsB,MAAM;aAAW,MAAM;;;;;yBAAoI,OAAO;mBAAiB,MAAM;WA66B1W;wBA76BtC;IAAE,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,WAAW;IAAC,eAAe,CAAC,WAAW;IAAC,UAAU,CAAC,WAAW;IAAC,kBAAkB,CAAC,WAAW;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE"}

package/dist/recipes/SuperLogin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/SuperLogin/index.js"],"names":[],"mappings":""}

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

@@ -0,0 +1,63 @@
+<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
+      on:click={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
+      on:click={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/Toaster/Toaster.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Toaster;
+type Toaster = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Toaster: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import { Toaster } from "svelte-sonner";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Toaster.stories.svelte.d.ts.map

package/dist/recipes/Toaster/Toaster.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/Toaster/Toaster.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAiEA;;;;mBAAmH;wBA5DvF,eAAe;6CAmDE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,39 @@
+<script>
+  /**
+   * EmptyState - Display an empty state message with optional icon
+   * Follows Flowbite card/alert pattern for empty states
+   *
+   * @example
+   * <EmptyState message="No results found" />
+   * <EmptyState message="No events" subtext="Create your first event to get started" />
+   */
+
+  /** @type {string} Main message to display */
+  export let message = 'No results found';
+  /** @type {string} Secondary descriptive text */
+  export let subtext = '';
+  /** @type {any} Icon component or image path */
+  export let icon = null;
+  /** @type {'component' | 'image'} Type of icon provided */
+  export let iconType = 'component';
+  /** @type {string} Size classes for the icon */
+  export let iconSize = 'w-20 h-20';
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class="flex flex-col items-center justify-center px-6 py-10 text-center {className}">
+  {#if icon}
+    {#if iconType === 'component'}
+      <svelte:component this={icon} class="mb-3 text-gray-400 dark:text-gray-500 {iconSize}" />
+    {:else if iconType === 'image'}
+      <img src={icon} alt="" class="mb-3 {iconSize}" />
+    {/if}
+  {/if}
+
+  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{message}</h3>
+  {#if subtext}
+    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{subtext}</p>
+  {/if}
+</div>

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/EmptyState/EmptyState.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA4DA;;;WAbW,GAAG;;;;;;mBAaoK;6CATrI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

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

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

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

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

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

@@ -0,0 +1,114 @@
+<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 = 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"
+      on:click={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,
+  }}
+/>

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

@@ -0,0 +1,28 @@
+export default ErrorDisplay;
+type ErrorDisplay = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ErrorDisplay: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ErrorDisplay from './ErrorDisplay.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=ErrorDisplay.stories.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplay.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/feedback/ErrorDisplay.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyGA;;;;mBAAwH;yBApG7F,uBAAuB;6CA2FL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,eAAe,QAAQ,CAAC"}

package/dist/recipes/feedback/ErrorDisplay.svelte

@@ -0,0 +1,30 @@
+<script>
+  import Icon from "./Icons/Icon.svelte";
+
+  /** Error message to display */
+  export let error = "";
+
+  /** Whether to show the error */
+  export let show = true;
+
+  /** Whether to apply shake animation */
+  export let shake = false;
+
+  /** Icon to display (from Icon component) */
+  export let icon = "ErrorCircle";
+
+  /** Size of the icon */
+  export let iconSize = "16";
+
+  /** Additional class for the container */
+  export let className = "";
+</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/ErrorDisplay.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDisplay.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/feedback/ErrorDisplay.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AAmDA;;;;;;;;;mBAAgL;6CATnI,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/feedback/StatusIndicator/StatusIndicator.spec.d.ts.map

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

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

@@ -0,0 +1,172 @@
+<script>
+  /**
+   * StatusIndicator - Animated spinner/checkmark/error indicator
+   *
+   * Shows loading spinner, success checkmark, or error X with smooth animations.
+   * Used in modals to show action progress and result.
+   *
+   * Flowbite-native: Uses Tailwind colors with minimal animation styles
+   */
+  export let status = "idle"; // "idle" | "loading" | "success" | "error"
+  export let size = 48; // Size in pixels
+</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 animation - cannot be expressed in Tailwind */
+  .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 animation */
+  .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 animation */
+  .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>

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/recipes/feedback/StatusIndicator/StatusIndicator.svelte.js"],"names":[],"mappings":";;;;;;;;;AA+DA;;;;;mBAA8I;6CATjG,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}

package/dist/recipes/fields/CheckboxField.svelte

@@ -0,0 +1,81 @@
+<script>
+  /**
+   * CheckboxField - Checkbox with label, description, and error support
+   *
+   * Wraps the Checkbox primitive with form field features.
+   *
+   * @example
+   * <CheckboxField
+   *   label="Accept terms"
+   *   description="You agree to our terms of service"
+   *   bind:checked={acceptTerms}
+   *   error={$errors.acceptTerms}
+   *   required
+   * />
+   */
+  import Checkbox from '../../primitives/Checkbox/Checkbox.svelte';
+  import ValidationError from '../../primitives/ValidationError.svelte';
+
+  /** Whether the checkbox is checked */
+  export let checked = false;
+
+  /** The value attribute */
+  export let value = '';
+
+  /** Name attribute for form submission */
+  export let name = '';
+
+  /** Whether the checkbox is disabled */
+  export let disabled = false;
+
+  /** Color variant */
+  export let color = 'blue';
+
+  /** Label text displayed next to the checkbox */
+  export let label = '';
+
+  /** Description text shown below the label */
+  export let description = '';
+
+  /** Error message to display */
+  export let error = '';
+
+  /** Show required indicator */
+  export let required = false;
+
+  /** Additional class for the wrapper div */
+  let className = '';
+  export { className as class };
+</script>
+
+<div class={className}>
+  <div class="flex items-start gap-3">
+    <div class="flex items-center h-5 mt-0.5">
+      <Checkbox
+        {name}
+        {value}
+        {disabled}
+        {color}
+        bind:checked
+        on:change
+        on:click
+        on:focus
+        on:blur
+      />
+    </div>
+    {#if label || description}
+      <div class="flex flex-col">
+        {#if label}
+          <span class="text-sm font-medium text-gray-900 dark:text-white {error ? 'text-red-500' : ''}">
+            {label}{#if required}<span class="text-red-500 ml-0.5">*</span>{/if}
+          </span>
+        {/if}
+        {#if description}
+          <span class="text-sm text-gray-500 dark:text-gray-400">{description}</span>
+        {/if}
+      </div>
+    {/if}
+  </div>
+
+  <ValidationError {error} />
+</div>