@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Calendar/MiniMonthCalendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwxBA;;;;;;;;;;;;;;;;;mBAAwR;6CAT3O,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"}
+{"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6xBA;;;;;;;;;;;;;;;;;mBAAwR;6CAT3O,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/components/Card.spec.js

@@ -3,45 +3,47 @@ import { expect, describe, test } from "vitest";
 import Card from "./Card.svelte";
 
 describe("Card Component Tests", () => {
-  test("Renders card section element", () => {
-    render(Card, { props: {} });
-    const section = document.querySelector("section");
-    expect(section).toBeInTheDocument();
+  test("Renders card div element", () => {
+    const { container } = render(Card, { props: {} });
+    const card = container.querySelector("div");
+    expect(card).toBeInTheDocument();
   });
 
   test("Applies base classes", () => {
-    render(Card, { props: {} });
-    const section = document.querySelector("section");
-    expect(section).toHaveClass("w-full");
-    expect(section).toHaveClass("bg-bg-primary");
+    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", () => {
-    render(Card, { props: { className: "custom-class mt-4" } });
-    const section = document.querySelector("section");
-    expect(section).toHaveClass("custom-class");
-    expect(section).toHaveClass("mt-4");
+    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("Has responsive padding classes", () => {
-    render(Card, { props: {} });
-    const section = document.querySelector("section");
-    // Check for responsive padding classes
-    expect(section.className).toMatch(/p-3\.5/);
-    expect(section.className).toMatch(/sm:p-4/);
-    expect(section.className).toMatch(/md:p-5/);
+  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 shadow and rounded on medium screens", () => {
-    render(Card, { props: {} });
-    const section = document.querySelector("section");
-    expect(section.className).toMatch(/md:shadow/);
-    expect(section.className).toMatch(/md:rounded-lg/);
+  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", () => {
-    // Use a custom component with slot content
     const { container } = render(Card, { props: {} });
-    expect(container.querySelector("section")).toBeInTheDocument();
+    expect(container.querySelector("div")).toBeInTheDocument();
   });
 });

package/dist/components/Card.stories.svelte

@@ -1,22 +1,18 @@
-<script context="module">
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import Card from "./Card.svelte";
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
 
-  export const meta = {
+    import Card from "./Card.svelte";
+
+  const { Story } = defineMeta({
     title: "Components/Card",
     component: Card,
     argTypes: {
       className: { control: "text" },
     },
-  };
+  });
+
 </script>
 
-<Template let:args>
-  <Card {...args}>
-    <h3 class="text-lg font-semibold mb-2">Card Title</h3>
-    <p class="text-gray-600">This is the card content. Cards are used to group related information together.</p>
-  </Card>
-</Template>
 
 <Story name="Default Card">
   <Card>

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

@@ -1,12 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { Card as component };
-    export namespace argTypes {
-        namespace className {
-            let control: string;
-        }
-    }
-}
 export default Card;
 type Card = SvelteComponent<{
     [x: string]: never;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwCA;;;;mBAAgH;iBApC7F,eAAe;6CA2BW,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"}
+{"version":3,"file":"Card.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/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/components/Card.svelte

@@ -1,9 +1,17 @@
 <script>
-  export let className = '';
+  /** @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>
 
-<section
-  class={`w-full bg-bg-primary p-6 shadow rounded-[16px] ${className}`}
+<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 />
-</section>
+</div>

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

@@ -1,6 +1,9 @@
 export default Card;
 type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    className?: string | undefined;
+    class?: string | undefined;
+    border?: boolean | undefined;
+    horizontal?: "default" | "horizontal" | undefined;
+    padding?: boolean | undefined;
 }, {
     default: {};
 }>, {
@@ -11,7 +14,10 @@ type Card = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const Card: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    className?: string | undefined;
+    class?: string | undefined;
+    border?: boolean | undefined;
+    horizontal?: "default" | "horizontal" | undefined;
+    padding?: boolean | undefined;
 }, {
     default: {};
 }>, {

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Card.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;AA2BA;;;;;;;;eAAqI;sCAT/F,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"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/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/components/Checkbox/Checkbox.svelte

@@ -1,120 +1,69 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
+<script>
+  import { createEventDispatcher } from "svelte";
 
-  interface Props {
-    /** Whether the checkbox is checked */
-    checked?: boolean;
-    /** The value attribute */
-    value?: string;
-    /** Name attribute for form submission */
-    name?: string;
-    /** Whether the checkbox is disabled */
-    disabled?: boolean;
-    /** Color variant */
-    color?: 'primary' | 'red' | 'green' | 'blue';
-    /** Additional CSS classes */
-    class?: string;
-    /** Change event callback */
-    onchange?: (data: { checked: boolean; value: string }) => void;
-    /** Click event callback */
-    onclick?: (e: MouseEvent) => void;
-    /** Focus event callback */
-    onfocus?: (e: FocusEvent) => void;
-    /** Blur event callback */
-    onblur?: (e: FocusEvent) => void;
-    /** Keydown event callback */
-    onkeydown?: (e: KeyboardEvent) => void;
-    /** Keyup event callback */
-    onkeyup?: (e: KeyboardEvent) => void;
-    /** Slot content */
-    children?: Snippet;
-  }
+  /** @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();
 
-  let {
-    checked = $bindable(false),
-    value = '',
-    name = '',
-    disabled = false,
-    color = 'primary',
-    class: className = '',
-    onchange,
-    onclick,
-    onfocus,
-    onblur,
-    onkeydown,
-    onkeyup,
-    children
-  }: Props = $props();
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch("change", { checked, value });
+  }
 
-  // Color classes matching flowbite-svelte
-  const colorClasses: Record<string, string> = {
-    primary: 'text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-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',
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600'
+  // 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"
   };
 
-  let inputClasses = $derived([
-    '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',
-    colorClasses[color] || colorClasses.primary,
-    disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-  ].join(' '));
+  $: colorClass = colorClasses[color] || colorClasses.blue;
 
-  function handleChange(event: Event) {
-    const target = event.target as HTMLInputElement;
-    checked = target.checked;
-    onchange?.({ checked, value });
-  }
+  $: 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="checkbox {className}" class:checkbox--disabled={disabled}>
+<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
-    onchange={handleChange}
-    onclick={onclick}
-    onfocus={onfocus}
-    onblur={onblur}
-    onkeydown={onkeydown}
-    onkeyup={onkeyup}
+    on:change={handleChange}
+    on:click
+    on:focus
+    on:blur
+    on:keydown
+    on:keyup
     class={inputClasses}
   />
-  {#if children}
-    <span class="checkbox__label">
-      {@render children()}
+  {#if $$slots.default}
+    <span class="text-sm font-medium text-gray-900 dark:text-gray-300">
+      <slot />
     </span>
   {/if}
 </label>
-
-<style>
-  .checkbox {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-
-  .checkbox--disabled {
-    cursor: not-allowed;
-  }
-
-  .checkbox__label {
-    font-size: 0.875rem;
-    line-height: 1.5;
-    color: var(--text-primary, #1f2937);
-  }
-
-  :global(.dark) .checkbox__label,
-  :global(.micdrop.dark) .checkbox__label {
-    color: #f3f4f6;
-  }
-</style>

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

@@ -1,36 +1,64 @@
-import type { Snippet } from 'svelte';
-interface Props {
-    /** Whether the checkbox is checked */
-    checked?: boolean;
-    /** The value attribute */
-    value?: string;
-    /** Name attribute for form submission */
-    name?: string;
-    /** Whether the checkbox is disabled */
-    disabled?: boolean;
-    /** Color variant */
-    color?: 'primary' | 'red' | 'green' | 'blue';
-    /** Additional CSS classes */
-    class?: string;
-    /** Change event callback */
-    onchange?: (data: {
-        checked: boolean;
-        value: string;
-    }) => void;
-    /** Click event callback */
-    onclick?: (e: MouseEvent) => void;
-    /** Focus event callback */
-    onfocus?: (e: FocusEvent) => void;
-    /** Blur event callback */
-    onblur?: (e: FocusEvent) => void;
-    /** Keydown event callback */
-    onkeydown?: (e: KeyboardEvent) => void;
-    /** Keyup event callback */
-    onkeyup?: (e: KeyboardEvent) => void;
-    /** Slot content */
-    children?: Snippet;
-}
-declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
-type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;
+type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    color?: "blue" | "green" | "red" | "yellow" | "purple" | "orange" | 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?: "blue" | "green" | "red" | "yellow" | "purple" | "orange" | 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/components/Checkbox/Checkbox.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0BAA0B;IAC1B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACrC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0DH,QAAA,MAAM,QAAQ,kDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/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/components/CropImage/CropImage.stories.svelte

@@ -1,20 +1,22 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import CropImage from "./CropImage.svelte";
   import MicrophoneImage from "../../assets/images/microphone.png";
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: "Components/CropImage",
     component: CropImage,
     argTypes: {
       showModal: { control: "boolean" },
       imageSrc: { control: "text" },
     },
-  };
+  });
+
 </script>
 
 <script>
-  import { Story, Template } from "@storybook/addon-svelte-csf";
-  import { writable } from "svelte/store";
+    import { writable } from "svelte/store";
 
   let showModal = writable(false);
   let croppedImage = null;
@@ -34,30 +36,6 @@
   }
 </script>
 
-<Template let:args>
-  <div>
-    <button
-      on:click={openModal}
-      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-    >
-      Open Crop Image Modal
-    </button>
-
-    <CropImage
-      bind:showModal={$showModal}
-      imageSrc={args.imageSrc}
-      onSave={handleSave}
-      onCancel={handleCancel}
-    />
-
-    {#if croppedImage}
-      <div class="mt-4">
-        <p class="font-semibold">Cropped Image:</p>
-        <img src={URL.createObjectURL(croppedImage)} alt="Cropped result" class="max-w-md mt-2 border" />
-      </div>
-    {/if}
-  </div>
-</Template>
 
 <Story
   name="Default"

package/dist/components/CropImage/CropImage.stories.svelte.d.ts

@@ -1,16 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { CropImage as component };
-    export namespace argTypes {
-        namespace showModal {
-            let control: string;
-        }
-        namespace imageSrc {
-            let control_1: string;
-            export { control_1 as control };
-        }
-    }
-}
 export default CropImage;
 type CropImage = SvelteComponent<{
     [x: string]: never;

package/dist/components/CropImage/CropImage.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CropImage.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAyHA;;;;mBAAqH;sBAtH7F,oBAAoB;6CA6GC,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"}
+{"version":3,"file":"CropImage.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/CropImage/CropImage.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AA0GA;;;;mBAAqH;sBArG7F,oBAAoB;6CA4FC,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"}