@getmicdrop/svelte-components 3.0.0 → 4.0.0

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

@@ -0,0 +1,46 @@
+export default Tabs;
+type Tabs = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    tabStyle?: "full" | "underline" | "pills" | undefined;
+    contentClass?: string | undefined;
+    activeTabValue?: string | number | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    tabStyle?: "full" | "underline" | "pills" | undefined;
+    contentClass?: string | undefined;
+    activeTabValue?: string | number | 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=Tabs.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/Tabs.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4HA;;;;qBAhBW,MAAM,GAAC,MAAM,GAAC,SAAS;;;;;;;eAgB0I;sCATtI,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/Toggle.spec.d.ts.map

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

package/dist/primitives/Toggle.stories.svelte

@@ -0,0 +1,92 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import Toggle from './Toggle.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Toggle',
+    component: Toggle,
+    tags: ['autodocs'],
+    argTypes: {
+      checked: { control: 'boolean' },
+      disabled: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+  
+  let toggleState = false;
+  let disabledToggle = true;
+</script>
+
+
+<Story
+  name="Default (Unchecked)"
+  args={{
+    checked: false,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Checked"
+  args={{
+    checked: true,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Disabled Unchecked"
+  args={{
+    checked: false,
+    disabled: true,
+  }}
+/>
+
+<Story
+  name="Disabled Checked"
+  args={{
+    checked: true,
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <div class="space-y-4">
+    <div class="flex items-center gap-3">
+      <Toggle bind:checked={toggleState} />
+      <span class="text-sm">State: {toggleState ? 'On' : 'Off'}</span>
+    </div>
+  </div>
+</Story>
+
+<Story name="Settings List">
+  <div class="max-w-md space-y-4">
+    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+      <div>
+        <div class="font-medium">Email Notifications</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Receive updates via email</div>
+      </div>
+      <Toggle bind:checked={toggleState} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-900 rounded-lg border">
+      <div>
+        <div class="font-medium">Dark Mode</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Use dark color scheme</div>
+      </div>
+      <Toggle checked={false} />
+    </div>
+
+    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border">
+      <div>
+        <div class="font-medium text-gray-500 dark:text-gray-400">Premium Feature</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">Requires subscription</div>
+      </div>
+      <Toggle disabled={true} checked={false} />
+    </div>
+  </div>
+</Story>

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

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

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

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

@@ -0,0 +1,59 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+
+  export let checked = false;
+  export let disabled = false;
+  /** @type {'sm' | 'md' | 'lg'} Size variant */
+  export let size = 'md';
+  /** @type {string} Additional CSS classes */
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  function handleChange(event) {
+    checked = event.target.checked;
+    dispatch('change', { checked });
+  }
+
+  // Flowbite toggle sizes
+  const sizes = {
+    sm: {
+      track: 'w-9 h-5',
+      thumb: 'h-4 w-4 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    },
+    md: {
+      track: 'w-11 h-6',
+      thumb: 'h-5 w-5 after:top-0.5 after:start-0.5',
+      translate: 'peer-checked:after:translate-x-full'
+    },
+    lg: {
+      track: 'w-14 h-7',
+      thumb: 'h-6 w-6 after:top-0.5 after:start-1',
+      translate: 'peer-checked:after:translate-x-full'
+    }
+  };
+
+  $: sizeConfig = sizes[size] || sizes.md;
+</script>
+
+<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}">
+  <input
+    type="checkbox"
+    bind:checked
+    {disabled}
+    on:change={handleChange}
+    class="sr-only peer"
+  />
+  <div
+    class="relative {sizeConfig.track} bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute {sizeConfig.thumb} after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+    role="switch"
+    aria-checked={checked}
+  ></div>
+  {#if $$slots.default}
+    <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
+      <slot />
+    </span>
+  {/if}
+</label>

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

@@ -0,0 +1,50 @@
+export default Toggle;
+type Toggle = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    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=Toggle.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;;;eAA+J;sCATzH,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/Typography/Typography.svelte.d.ts

@@ -0,0 +1,48 @@
+export default Typography;
+type Typography = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    variant?: "h2" | "p" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
+    text?: string | undefined;
+    weight?: "bold" | "semibold" | "medium" | "regular" | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Typography: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    class?: string | undefined;
+    variant?: "h2" | "p" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
+    text?: string | undefined;
+    weight?: "bold" | "semibold" | "medium" | "regular" | 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=Typography.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Typography/Typography.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0EA;;;;;;;;;;;;eAA0K;sCATpI,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/ValidationError.spec.d.ts.map

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

package/dist/primitives/ValidationError.stories.svelte

@@ -0,0 +1,87 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import ValidationError from './ValidationError.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/ValidationError',
+    component: ValidationError,
+    tags: ['autodocs'],
+    argTypes: {
+      error: { control: 'text' },
+      show: { control: 'boolean' },
+    },
+  });
+
+</script>
+
+<script>
+  </script>
+
+
+<Story
+  name="Default"
+  args={{
+    error: 'This field is required',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Email Validation"
+  args={{
+    error: 'Please enter a valid email address',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Password Validation"
+  args={{
+    error: 'Password must be at least 8 characters',
+    show: true,
+  }}
+/>
+
+<Story name="With Input Field">
+  <div class="max-w-md">
+    <label class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      type="email"
+      class="w-full px-3 py-2 border border-red-300 rounded"
+      value="invalid-email"
+    />
+    <ValidationError error="Please enter a valid email address" show={true} />
+  </div>
+</Story>
+
+<Story name="Multiple Validation Errors">
+  <div class="max-w-md space-y-4">
+    <div>
+      <label class="block text-sm font-medium mb-1">Username</label>
+      <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Username is required" show={true} />
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium mb-1">Email</label>
+      <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Invalid email format" show={true} />
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium mb-1">Password</label>
+      <input type="password" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Password must contain at least one number" show={true} />
+    </div>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <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-gray-300 rounded" />
+    <ValidationError error="This error is hidden" show={false} />
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
+  </div>
+</Story>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.stories.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ValidationError.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAyFA;;;;mBAA2H;4BApF7F,0BAA0B;6CA2EX,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/ValidationError.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "./Icons/WarningIcon.svelte";
+
+  export let error = "";
+  export let show = true;
+</script>
+
+{#if error && show}
+  <div
+    transition:slide={{ duration: 300, easing: cubicOut }}
+    class="flex items-center gap-1.5 text-red-600 dark:text-red-500 mt-2"
+    role="alert"
+  >
+    <WarningIcon className="shrink-0" />
+    <p class="text-sm font-medium">{error}</p>
+  </div>
+{/if}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ValidationError.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/ValidationError.svelte.js"],"names":[],"mappings":";;;;;;;;;AAkCA;;;;;mBAA6I;6CAThG,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/CropImage/CropImage.spec.d.ts.map

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

package/dist/recipes/CropImage/CropImage.stories.svelte

@@ -0,0 +1,111 @@
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import CropImage from "./CropImage.svelte";
+  import MicrophoneImage from "../../assets/images/microphone.png";
+
+  const { Story } = defineMeta({
+    title: "Components/CropImage",
+    component: CropImage,
+    argTypes: {
+      showModal: { control: "boolean" },
+      imageSrc: { control: "text" },
+    },
+  });
+
+</script>
+
+<script>
+    import { writable } from "svelte/store";
+
+  let showModal = writable(false);
+  let croppedImage = null;
+
+  function handleSave(image) {
+    croppedImage = image;
+    console.log("Image cropped:", image);
+    alert("Image saved successfully!");
+  }
+
+  function handleCancel() {
+    console.log("Cropping cancelled");
+  }
+
+  function openModal() {
+    $showModal = true;
+  }
+</script>
+
+
+<Story
+  name="Default"
+  args={{
+    imageSrc: MicrophoneImage
+  }}
+/>
+
+<Story name="With Sample Image">
+  <div>
+    <button
+      on:click={() => ($showModal = true)}
+      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+    >
+      Crop Microphone Image
+    </button>
+
+    <CropImage
+      bind:showModal={$showModal}
+      imageSrc={MicrophoneImage}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+
+    {#if croppedImage}
+      <div class="mt-4 p-4 bg-gray-100 rounded">
+        <p class="font-semibold mb-2">Cropped Result:</p>
+        <img src={URL.createObjectURL(croppedImage)} alt="Cropped result" class="max-w-sm border shadow" />
+      </div>
+    {/if}
+  </div>
+</Story>
+
+<Story name="Interactive Demo">
+  <div class="p-6">
+    <h3 class="text-lg font-bold mb-4">Image Cropping Demo</h3>
+    <p class="mb-2 text-gray-600">
+      Click the button below to open the crop modal. You can:
+    </p>
+    <ul class="list-disc ml-6 mt-2 mb-4 text-gray-600">
+      <li>Drag the crop box to reposition it</li>
+      <li>Drag corner handles to resize the crop area (maintains square aspect)</li>
+      <li>Use zoom slider or +/- buttons to zoom in/out</li>
+      <li>Click rotate button to rotate the image 90 degrees</li>
+      <li>Click Save to crop the image or Cancel to close</li>
+    </ul>
+
+    <button
+      on:click={() => ($showModal = true)}
+      class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 font-medium"
+    >
+      Start Cropping
+    </button>
+
+    <CropImage
+      bind:showModal={$showModal}
+      imageSrc={MicrophoneImage}
+      onSave={handleSave}
+      onCancel={handleCancel}
+    />
+
+    {#if croppedImage}
+      <div class="mt-6 p-4 bg-green-50 border border-green-200 rounded-lg">
+        <p class="font-semibold text-green-800 mb-3">Successfully Cropped!</p>
+        <img
+          src={URL.createObjectURL(croppedImage)}
+          alt="Cropped result"
+          class="max-w-xs border-2 border-green-300 rounded shadow-lg"
+        />
+      </div>
+    {/if}
+  </div>
+</Story>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CropImage.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/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"}