@getmicdrop/svelte-components 3.0.0 → 4.0.0

package/dist/primitives/Button/Button.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Button;
+type Button = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Button: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Button from "./Button.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=Button.stories.svelte.d.ts.map

package/dist/primitives/Button/Button.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA2HA;;;;mBAAkH;mBAvH7F,iBAAiB;6CA8GO,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/primitives/Button/Button.svelte

@@ -0,0 +1,156 @@
+<script>
+  /**
+   * Button Component - Flowbite Native (Pure Tailwind)
+   *
+   * Variants (Flowbite naming):
+   *   - default: Primary blue button
+   *   - alternative: Gray outline button
+   *   - outline: Blue outline button
+   *   - red: Destructive solid button
+   *   - red-outline: Destructive outline button
+   *   - ghost: Text-only button
+   *   - ghost-red: Destructive text button
+   *   - icon: Icon-only button
+   *   - toggle: Toggle/pill button
+   *
+   * Sizes (Flowbite native): xs, sm, md, lg, xl
+   */
+  import Spinner from '../Spinner/Spinner.svelte';
+  import { CheckOutline } from '../Icons';
+
+  // Flowbite-native API
+  export let variant = "default";
+  export let size = "md";
+  export let disabled = false;
+  export let loading = false;
+  export let success = false;
+  export let successText = "";
+  export let active = false;
+  export let href = null;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  // Legacy variant name mapping
+  const variantMap = {
+    "blue-solid": "default",
+    "gray-outline": "alternative",
+    "blue-outline": "outline",
+    "red-solid": "red",
+    "red-text": "ghost-red",
+    "gray-text": "ghost",
+  };
+
+  // Resolve legacy names
+  $: resolvedVariant = variantMap[variant] || variant;
+  $: effectiveDisabled = disabled || loading || success;
+
+  // Size classes - Flowbite native sizing
+  const sizeClasses = {
+    xs: "px-3 py-1.5 text-xs",
+    sm: "px-3 py-2 text-sm",
+    md: "px-4 py-2.5 text-sm",
+    lg: "px-5 py-3 text-base",
+    xl: "px-6 py-3.5 text-base",
+    full: "w-full px-5 py-3 text-base",
+  };
+
+  // Icon variant sizes
+  const iconSizes = {
+    xs: "p-1.5",
+    sm: "p-2",
+    md: "p-2.5",
+    lg: "p-3",
+  };
+
+  // Variant classes with all states in Tailwind
+  const variantClasses = {
+    default: "text-white bg-blue-700 border border-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800",
+    alternative: "text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-gray-100 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700",
+    outline: "text-blue-700 bg-transparent border border-blue-700 hover:text-white hover:bg-blue-800 focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-500",
+    red: "text-white bg-red-700 border border-red-700 hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900",
+    "red-outline": "text-red-700 bg-transparent border border-red-700 hover:text-white hover:bg-red-800 focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600",
+    ghost: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-900 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white",
+    "ghost-red": "text-red-700 bg-transparent border-transparent hover:bg-red-100 hover:text-red-900 focus:ring-red-200 dark:text-red-500 dark:hover:bg-red-900/50 dark:hover:text-red-400",
+    link: "text-blue-700 bg-transparent border-transparent hover:underline focus:ring-0 dark:text-blue-500",
+    icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
+    toggle: "text-gray-500 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-600",
+    success: "text-white bg-green-600 border border-green-600",
+  };
+
+  // Active state classes for ghost and toggle
+  const activeClasses = {
+    ghost: "text-blue-700 bg-blue-50 dark:text-white dark:bg-gray-900",
+    toggle: "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700",
+  };
+
+  // Disabled classes
+  const disabledClasses = "bg-gray-200 border-gray-200 text-gray-400 cursor-not-allowed dark:bg-gray-700 dark:border-gray-700 dark:text-gray-500";
+
+  $: sizeClass = resolvedVariant === "icon"
+    ? (iconSizes[size] || iconSizes.sm)
+    : resolvedVariant === "link"
+    ? "text-sm"
+    : (sizeClasses[size] || sizeClasses.md);
+
+  $: variantClass = (() => {
+    if (success) return variantClasses.success;
+    if (disabled && !loading && !success) return disabledClasses;
+    if (active && (resolvedVariant === "ghost" || resolvedVariant === "toggle")) {
+      return activeClasses[resolvedVariant];
+    }
+    return variantClasses[resolvedVariant] || variantClasses.default;
+  })();
+
+  $: buttonClasses = [
+    "inline-flex items-center justify-center",
+    "rounded-lg",
+    "font-medium leading-none",
+    "focus:outline-none focus:ring-4",
+    "transition-colors duration-150",
+    "select-none",
+    sizeClass,
+    variantClass,
+    effectiveDisabled ? "cursor-not-allowed" : "cursor-pointer",
+    className
+  ].filter(Boolean).join(" ");
+</script>
+
+{#if href}
+  <a
+    {href}
+    class={buttonClasses}
+    on:click
+    {...$$restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
+      <slot />
+    </span>
+    {#if loading}
+      <span class="absolute inset-0 flex items-center justify-center">
+        <Spinner size="sm" color="white" />
+      </span>
+    {/if}
+  </a>
+{:else}
+  <button
+    class={buttonClasses}
+    disabled={effectiveDisabled}
+    on:click
+    {...$$restProps}
+  >
+    <span class="inline-flex items-center gap-1.5" class:invisible={loading || success}>
+      <slot />
+    </span>
+    {#if loading}
+      <span class="absolute inset-0 flex items-center justify-center">
+        <Spinner size="sm" color="white" />
+      </span>
+    {:else if success}
+      <span class="absolute inset-0 flex items-center justify-center gap-2">
+        <CheckOutline class="w-5 h-5" />
+        {#if successText}<span class="font-medium">{successText}</span>{/if}
+      </span>
+    {/if}
+  </button>
+{/if}

package/dist/primitives/Button/Button.svelte.d.ts

@@ -0,0 +1,62 @@
+export default Button;
+type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    size?: string | undefined;
+    success?: boolean | undefined;
+    variant?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    successText?: string | undefined;
+    active?: boolean | undefined;
+    href?: null | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    size?: string | undefined;
+    success?: boolean | undefined;
+    variant?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    successText?: string | undefined;
+    active?: boolean | undefined;
+    href?: null | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Button.svelte.d.ts.map

package/dist/primitives/Button/Button.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/Button.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2KA;;;;;;;;;;;;;;;;;;;eAA0N;sCATpL,KAAK,EAAE,KAAK;;;;;6CALL,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/primitives/Button/ButtonSaveDemo.spec.d.ts.map

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

package/dist/primitives/Button/ButtonSaveDemo.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Button from "./Button.svelte";
+
+  let loading = false;
+  let success = false;
+
+  function handleSave() {
+    if (loading || success) return;
+    loading = true;
+    setTimeout(() => {
+      loading = false;
+      success = true;
+    }, 1000);
+  }
+
+  function resetState() {
+    success = false;
+  }
+</script>
+
+<div class="flex gap-4 items-center">
+  <Button on:click={handleSave} {loading} {success}>Save</Button>
+  <button class="text-sm text-gray-500 dark:text-gray-400 underline" on:click={resetState}>Reset (simulates user edit)</button>
+</div>

package/dist/primitives/Button/ButtonSaveDemo.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonSaveDemo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Button/ButtonSaveDemo.svelte.js"],"names":[],"mappings":";;;;;;;;AAyCA;;;;mBAA0H;6CAT7E,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/primitives/Card.spec.d.ts.map

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

package/dist/primitives/Card.spec.js

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import Card from "./Card.svelte";
+
+describe("Card Component Tests", () => {
+  test("Renders card div element", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toBeInTheDocument();
+  });
+
+  test("Applies base classes", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("bg-white");
+    expect(card).toHaveClass("rounded-lg");
+    expect(card).toHaveClass("shadow");
+  });
+
+  test("Applies custom className", () => {
+    const { container } = render(Card, { props: { class: "custom-class mt-4" } });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("custom-class");
+    expect(card).toHaveClass("mt-4");
+  });
+
+  test("Has padding by default", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("p-6");
+  });
+
+  test("No padding when padding=false", () => {
+    const { container } = render(Card, { props: { padding: false } });
+    const card = container.querySelector("div");
+    expect(card).not.toHaveClass("p-6");
+  });
+
+  test("Has border when border=true", () => {
+    const { container } = render(Card, { props: { border: true } });
+    const card = container.querySelector("div");
+    expect(card).toHaveClass("border");
+  });
+
+  test("Renders slot content", () => {
+    const { container } = render(Card, { props: {} });
+    expect(container.querySelector("div")).toBeInTheDocument();
+  });
+});

package/dist/primitives/Card.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+    import Card from "./Card.svelte";
+
+  const { Story } = defineMeta({
+    title: "Components/Card",
+    component: Card,
+    argTypes: {
+      className: { control: "text" },
+    },
+  });
+
+</script>
+
+
+<Story name="Default Card">
+  <Card>
+    <h3 class="text-lg font-semibold mb-2">Default Card</h3>
+    <p class="text-gray-600">A default card with standard styling. Use className prop to customize.</p>
+  </Card>
+</Story>

package/dist/primitives/Card.stories.svelte.d.ts

@@ -0,0 +1,28 @@
+export default Card;
+type Card = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Card: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import Card from "./Card.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=Card.stories.svelte.d.ts.map

package/dist/primitives/Card.stories.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Card.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAoCA;;;;mBAAgH;iBA/B3F,eAAe;6CAsBS,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/primitives/Card.svelte

@@ -0,0 +1,17 @@
+<script>
+  /** @type {boolean} Add padding to the card */
+  export let padding = true;
+  /** @type {boolean} Add border to the card */
+  export let border = false;
+  /** @type {'default' | 'horizontal'} Card layout */
+  export let horizontal = false;
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+</script>
+
+<div
+  class="bg-white dark:bg-gray-800 rounded-lg shadow {border ? 'border border-gray-200 dark:border-gray-700' : ''} {padding ? 'p-6' : ''} {horizontal ? 'flex flex-row' : ''} {className}"
+>
+  <slot />
+</div>

package/dist/primitives/Card.svelte.d.ts

@@ -0,0 +1,46 @@
+export default Card;
+type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    border?: boolean | undefined;
+    horizontal?: "default" | "horizontal" | undefined;
+    padding?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    border?: boolean | undefined;
+    horizontal?: "default" | "horizontal" | undefined;
+    padding?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Card.svelte.d.ts.map

package/dist/primitives/Card.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuCA;;;;;;;;;;;eAAiK;sCAT3H,KAAK,EAAE,KAAK;;;;;6CALL,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/primitives/Checkbox/Checkbox.svelte

@@ -0,0 +1,69 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {boolean} Whether the checkbox is checked */
+  export let checked = false;
+  /** @type {string} The value attribute */
+  export let value = "";
+  /** @type {string} Name attribute for form submission */
+  export let name = "";
+  /** @type {boolean} Whether the checkbox is disabled */
+  export let disabled = false;
+  /** @type {'blue' | 'red' | 'green' | 'purple' | 'orange' | 'yellow'} Color variant */
+  export let color = "blue";
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch("change", { checked, value });
+  }
+
+  // Flowbite color classes
+  const colorClasses = {
+    blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600",
+    red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
+    green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
+    purple: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600",
+    orange: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600",
+    yellow: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
+  };
+
+  $: colorClass = colorClasses[color] || colorClasses.blue;
+
+  $: inputClasses = [
+    "w-4 h-4 rounded",
+    "bg-gray-100 border-gray-300",
+    "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
+    "focus:ring-2",
+    colorClass,
+    disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" ");
+</script>
+
+<label
+  class="inline-flex items-center gap-2 {disabled ? 'cursor-not-allowed' : 'cursor-pointer'} select-none {className}"
+>
+  <input
+    type="checkbox"
+    {name}
+    {value}
+    {disabled}
+    bind:checked
+    on:change={handleChange}
+    on:click
+    on:focus
+    on:blur
+    on:keydown
+    on:keyup
+    class={inputClasses}
+  />
+  {#if $$slots.default}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      <slot />
+    </span>
+  {/if}
+</label>

package/dist/primitives/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,64 @@
+export default Checkbox;
+type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: "red" | "blue" | "purple" | "green" | "orange" | "yellow" | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/primitives/Checkbox/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,KAAK,EAAE,KAAK;;;;;6CALL,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/primitives/DarkModeToggle.spec.d.ts.map

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

package/dist/primitives/DarkModeToggle.stories.svelte

@@ -0,0 +1,57 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import DarkModeToggle from './DarkModeToggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/DarkModeToggle',
+    component: DarkModeToggle,
+    tags: ['autodocs'],
+  });
+
+</script>
+
+<script>
+  </script>
+
+<Story name="Default">
+  <div class="flex flex-col gap-4 p-4">
+    <h3 class="text-lg font-semibold">Theme Toggle (3-State)</h3>
+    <p class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+      Cycles through: Auto → Light → Dark → Auto
+    </p>
+    <DarkModeToggle />
+    <p class="text-xs text-gray-500 dark:text-gray-400">
+      Click the toggle to cycle through theme modes. In auto mode, it follows system preferences.
+    </p>
+  </div>
+</Story>
+
+<Story name="In Header">
+  <div class="bg-white dark:bg-gray-900 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 rounded-lg">
+    <div class="flex items-center justify-between">
+      <h2 class="text-xl font-bold text-gray-900 dark:text-white dark:text-white">Application Header</h2>
+      <DarkModeToggle />
+    </div>
+  </div>
+</Story>
+
+<Story name="Theme States Demo">
+  <div class="space-y-4 p-4">
+    <div class="bg-white dark:bg-gray-900 dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white dark:text-white mb-2">
+        Current Theme Demo
+      </h3>
+      <p class="text-gray-500 dark:text-gray-400 dark:text-gray-300 mb-4">
+        This content changes appearance based on the selected theme mode.
+      </p>
+      <DarkModeToggle />
+    </div>
+
+    <div class="text-sm text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
+      <p><strong>Auto Mode:</strong> Follows system preferences</p>
+      <p><strong>Light Mode:</strong> Forces light theme</p>
+      <p><strong>Dark Mode:</strong> Forces dark theme</p>
+    </div>
+  </div>
+</Story>