@getmicdrop/svelte-components 3.0.0 → 3.1.0

package/dist/components/Input/MultiSelect.svelte.d.ts

@@ -1,112 +1,51 @@
 export default MultiSelect;
-type MultiSelect = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const MultiSelect: import("svelte").Component<{
-    /**
-     * - Array of selected values
-     */
+type MultiSelect = SvelteComponent<{
+    size?: "sm" | "md" | "lg" | undefined;
+    name?: string | undefined;
+    error?: string | undefined;
+    disabled?: boolean | undefined;
     value?: any[] | undefined;
-    /**
-     * - Options
-     */
-    items?: {
-        name: string;
-        value: any;
-    }[] | undefined;
-    /**
-     * - Placeholder text
-     */
-    placeholder?: string | undefined;
-    /**
-     * - Label text
-     */
     label?: string | undefined;
-    /**
-     * - Whether required
-     */
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    items?: any[] | undefined;
     required?: boolean | undefined;
-    /**
-     * - Whether disabled
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Error message
-     */
-    error?: string | undefined;
-    /**
-     * - Hide clear button
-     */
     hideClear?: boolean | undefined;
-    /**
-     * - Input name
-     */
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MultiSelect: $$__sveltets_2_IsomorphicComponent<{
+    size?: "sm" | "md" | "lg" | undefined;
     name?: string | undefined;
-    /**
-     * - Input id
-     */
-    id?: string | undefined;
-    /**
-     * - Enable focus animation
-     */
-    animateFocus?: boolean | undefined;
-    /**
-     * - Change callback
-     */
-    onchange?: Function | undefined;
-}, {}, "value">;
-type Props = {
-    /**
-     * - Array of selected values
-     */
+    error?: string | undefined;
+    disabled?: boolean | undefined;
     value?: any[] | undefined;
-    /**
-     * - Options
-     */
-    items?: {
-        name: string;
-        value: any;
-    }[] | undefined;
-    /**
-     * - Placeholder text
-     */
-    placeholder?: string | undefined;
-    /**
-     * - Label text
-     */
     label?: string | undefined;
-    /**
-     * - Whether required
-     */
+    id?: string | undefined;
+    placeholder?: string | undefined;
+    items?: any[] | undefined;
     required?: boolean | undefined;
-    /**
-     * - Whether disabled
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Error message
-     */
-    error?: string | undefined;
-    /**
-     * - Hide clear button
-     */
     hideClear?: boolean | undefined;
-    /**
-     * - Input name
-     */
-    name?: string | undefined;
-    /**
-     * - Input id
-     */
-    id?: string | undefined;
-    /**
-     * - Enable focus animation
-     */
-    animateFocus?: boolean | undefined;
-    /**
-     * - Change callback
-     */
-    onchange?: Function | undefined;
-};
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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=MultiSelect.svelte.d.ts.map

package/dist/components/Input/MultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;AAgOA;;;;;;;;;cArN6B,MAAM;eAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAqNW;;;;;;;;;;cArN7B,MAAM;eAAS,GAAG"}
+{"version":3,"file":"MultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/MultiSelect.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAsNA;;;;;;;;;;;;;;;;mBAA6N;6CAThL,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/Input/OTPInput.stories.svelte

@@ -1,7 +1,9 @@
-<script context="module">
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
   import OTPInput from './OTPInput.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Input/OTPInput',
     component: OTPInput,
     tags: ['autodocs'],
@@ -15,12 +17,12 @@
         description: 'Disable all inputs',
       },
     },
-  };
+  });
+
 </script>
 
 <script>
-  import { Story, Template } from '@storybook/addon-svelte-csf';
-
+  
   let code = ['', '', '', '', '', ''];
   let code4 = ['', '', '', ''];
   let code8 = ['', '', '', '', '', '', '', ''];
@@ -33,11 +35,6 @@
   }
 </script>
 
-<Template let:args>
-  <div class="max-w-md">
-    <OTPInput {...args} />
-  </div>
-</Template>
 
 <Story
   name="Default (6 digits)"
@@ -49,7 +46,7 @@
 />
 
 <Story
-  name="4 Digits"
+  name="Four Digits"
   args={{
     value: ['', '', '', ''],
     length: 4,
@@ -58,7 +55,7 @@
 />
 
 <Story
-  name="8 Digits"
+  name="Eight Digits"
   args={{
     value: ['', '', '', '', '', '', '', ''],
     length: 8,
@@ -88,7 +85,7 @@
   <div class="max-w-md space-y-6">
     <div>
       <h3 class="text-lg font-semibold mb-2">Enter Verification Code</h3>
-      <p class="text-sm text-gray-600 mb-4">
+      <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
         Enter the 6-digit code sent to your phone
       </p>
       <OTPInput
@@ -109,13 +106,13 @@
 
     <div class="flex gap-2">
       <button
-        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
         on:click={() => otpRef?.focus()}
       >
         Focus First Input
       </button>
       <button
-        class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
+        class="px-4 py-2 bg-gray-50 dark:bg-gray-8000 text-white rounded hover:bg-gray-600"
         on:click={() => {
           otpRef?.clear();
           completedCode = '';
@@ -128,10 +125,10 @@
 </Story>
 
 <Story name="Verification Flow">
-  <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg">
+  <div class="max-w-md mx-auto p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
     <div class="text-center mb-6">
       <h2 class="text-2xl font-bold mb-2">Verify Your Phone</h2>
-      <p class="text-gray-600">
+      <p class="text-gray-500 dark:text-gray-400">
         We've sent a 4-digit code to<br />
         <span class="font-medium">+1 (555) 123-4567</span>
       </p>
@@ -145,16 +142,16 @@
       />
     </div>
 
-    <p class="text-center text-sm text-gray-600">
+    <p class="text-center text-sm text-gray-500 dark:text-gray-400">
       Didn't receive a code?
-      <button class="text-blue-600 hover:underline">Resend</button>
+      <button class="text-primary hover:underline">Resend</button>
     </p>
   </div>
 </Story>
 
 <Story name="With Auto-Submit">
   <div class="max-w-md">
-    <p class="text-sm text-gray-600 mb-4">
+    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
       Code will auto-submit when all digits are entered
     </p>
     <OTPInput

package/dist/components/Input/OTPInput.stories.svelte.d.ts

@@ -1,24 +1,3 @@
-export namespace meta {
-    export let title: string;
-    export { OTPInput as component };
-    export let tags: string[];
-    export namespace argTypes {
-        namespace length {
-            namespace control {
-                let type: string;
-                let min: number;
-                let max: number;
-            }
-            let description: string;
-        }
-        namespace disabled {
-            let control_1: string;
-            export { control_1 as control };
-            let description_1: string;
-            export { description_1 as description };
-        }
-    }
-}
 export default OTPInput;
 type OTPInput = SvelteComponent<{
     [x: string]: never;

package/dist/components/Input/OTPInput.stories.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/OTPInput.stories.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;;;;mBAAoH;qBArJ7F,mBAAmB;6CA4IG,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":"OTPInput.stories.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/OTPInput.stories.svelte.js"],"names":[],"mappings":";;;;;;;;AAkJA;;;;mBAAoH;qBA7I7F,mBAAmB;6CAoIG,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/Input/OTPInput.svelte

@@ -1,30 +1,17 @@
 <script>
-  /**
-   * @typedef {Object} Props
-   * @property {string[]} [value] - Array of digit values
-   * @property {number} [length] - Number of digits
-   * @property {boolean} [disabled] - Whether the input is disabled
-   * @property {Function} [oncomplete] - Callback when all digits entered
-   * @property {Function} [onchange] - Callback when value changes
-   */
-
-  /** @type {Props} */
-  let {
-    value = $bindable(["", "", "", "", "", ""]),
-    length = 6,
-    disabled = false,
-    oncomplete,
-    onchange
-  } = $props();
-
-  let inputs = $state([]);
+  import { createEventDispatcher } from "svelte";
+
+  export let value = ["", "", "", "", "", ""];
+  export let length = 6;
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher();
+  let inputs = [];
 
   // Initialize value array if needed
-  $effect(() => {
-    if (value.length !== length) {
-      value = Array(length).fill("");
-    }
-  });
+  $: if (value.length !== length) {
+    value = Array(length).fill("");
+  }
 
   function handleInput(index, event) {
     const inputValue = event.target.value;
@@ -45,10 +32,10 @@
 
     // Check if complete
     if (value.every((digit) => digit !== "")) {
-      oncomplete?.({ code: value.join("") });
+      dispatch("complete", { code: value.join("") });
     }
 
-    onchange?.({ value, code: value.join("") });
+    dispatch("change", { value, code: value.join("") });
   }
 
   function handleKeyDown(index, event) {
@@ -68,7 +55,7 @@
       inputs[length - 1]?.focus();
 
       setTimeout(() => {
-        oncomplete?.({ code: value.join("") });
+        dispatch("complete", { code: value.join("") });
       }, 100);
     }
   }
@@ -102,29 +89,10 @@
       {disabled}
       aria-label="Digit {index + 1} of {length}"
       aria-describedby="otp-instructions"
-      class="otp-input w-12 h-12 md:w-14 md:h-14 text-center text-xl md:text-2xl text-text-primary font-semibold border-2 border-stroke-secondary rounded-xl focus:border-brand-primary focus:outline-none transition-colors bg-bg-tertiary disabled:bg-bg-quaternary disabled:cursor-not-allowed"
-      oninput={(e) => handleInput(index, e)}
-      onkeydown={(e) => handleKeyDown(index, e)}
-      onpaste={handlePaste}
+      class="h-12 w-12 border-2 border-gray-300 bg-gray-50 p-0 text-center text-xl font-semibold leading-none text-gray-900 transition-colors focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500 dark:disabled:bg-gray-600 md:h-14 md:w-14 md:text-2xl rounded-lg"
+      on:input={(e) => handleInput(index, e)}
+      on:keydown={(e) => handleKeyDown(index, e)}
+      on:paste={handlePaste}
     />
   {/each}
 </div>
-
-<style>
-  .sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .otp-input {
-    line-height: 1;
-    padding: 0;
-  }
-</style>

package/dist/components/Input/OTPInput.svelte.d.ts

@@ -1,56 +1,47 @@
 export default OTPInput;
-type OTPInput = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
+type OTPInput = SvelteComponent<{
+    length?: number | undefined;
+    focus?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    value?: string[] | undefined;
+    clear?: (() => void) | undefined;
+}, {
+    complete: CustomEvent<any>;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
 } & {
     focus: () => void;
     clear: () => void;
 };
-declare const OTPInput: import("svelte").Component<{
-    /**
-     * - Array of digit values
-     */
-    value?: string[] | undefined;
-    /**
-     * - Number of digits
-     */
+declare const OTPInput: $$__sveltets_2_IsomorphicComponent<{
     length?: number | undefined;
-    /**
-     * - Whether the input is disabled
-     */
+    focus?: (() => void) | undefined;
     disabled?: boolean | undefined;
-    /**
-     * - Callback when all digits entered
-     */
-    oncomplete?: Function | undefined;
-    /**
-     * - Callback when value changes
-     */
-    onchange?: Function | undefined;
+    value?: string[] | undefined;
+    clear?: (() => void) | undefined;
 }, {
+    complete: CustomEvent<any>;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
     focus: () => void;
     clear: () => void;
-}, "value">;
-type Props = {
-    /**
-     * - Array of digit values
-     */
-    value?: string[] | undefined;
-    /**
-     * - Number of digits
-     */
-    length?: number | undefined;
-    /**
-     * - Whether the input is disabled
-     */
-    disabled?: boolean | undefined;
-    /**
-     * - Callback when all digits entered
-     */
-    oncomplete?: Function | undefined;
-    /**
-     * - Callback when value changes
-     */
-    onchange?: Function | undefined;
-};
+}, string>;
+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=OTPInput.svelte.d.ts.map

package/dist/components/Input/OTPInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OTPInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/OTPInput.svelte.js"],"names":[],"mappings":";;;;;;;;AAqGA;;;;;;;;;;;;;;;;;;;;;;;;YAAuD"}
+{"version":3,"file":"OTPInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/OTPInput.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiGA;;;;;;;;;;;;;;WAAmK;6CATtH,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"}