@getmicdrop/svelte-components 2.8.1 → 3.1.0

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

@@ -89,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"
+      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.map

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

package/dist/components/Input/Search.svelte

@@ -1,5 +1,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
+  import { SearchOutline } from "../Icons";
 
   const dispatch = createEventDispatcher();
 
@@ -49,20 +50,9 @@
   }
 </script>
 
-<div class="search-wrapper {sizeConfig.wrapper} {className}">
-  <div class="search-icon-wrapper">
-    <svg
-      class="search-icon {sizeConfig.icon}"
-      fill="currentColor"
-      viewBox="0 0 20 20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-        clip-rule="evenodd"
-      />
-    </svg>
+<div class="relative w-full {sizeConfig.wrapper} {className}">
+  <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+    <SearchOutline class="text-gray-500 dark:text-gray-400 {sizeConfig.icon}" />
   </div>
   <input
     type="search"
@@ -70,7 +60,7 @@
     {name}
     {placeholder}
     {disabled}
-    class="search-input {sizeConfig.input}"
+    class="w-full pr-3 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white font-medium border border-gray-300 dark:border-gray-600 rounded-lg transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 focus:border-blue-500 hover:border-blue-500 placeholder-gray-500 dark:placeholder-gray-400 [&::-webkit-search-cancel-button]:appearance-none {sizeConfig.input} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
     bind:value
     on:input={handleInput}
     on:change={handleChange}
@@ -81,93 +71,8 @@
     {...$$restProps}
   />
   {#if $$slots.default}
-    <div class="search-actions">
+    <div class="absolute inset-y-0 right-0 flex items-center text-gray-500 dark:text-gray-400">
       <slot />
     </div>
   {/if}
 </div>
-
-<style>
-  .search-wrapper {
-    --search-bg: #f9fafb;
-    --search-text: #0d1526;
-    --search-text-placeholder: #6b7280;
-    --search-border: #e5e7eb;
-    --search-focus-ring: #3b82f6;
-    --search-icon-color: #6b7280;
-    position: relative;
-    width: 100%;
-  }
-
-  .search-icon-wrapper {
-    position: absolute;
-    inset-y: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    padding-left: 0.75rem;
-    pointer-events: none;
-  }
-
-  .search-icon {
-    color: var(--search-icon-color);
-  }
-
-  .search-input {
-    width: 100%;
-    padding-right: 0.75rem;
-    background-color: var(--search-bg);
-    color: var(--search-text);
-    font-weight: 500;
-    border: 1px solid var(--search-border);
-    border-radius: 0.5rem;
-    transition: border-color 0.15s ease, box-shadow 0.15s ease;
-  }
-
-  .search-input:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--search-focus-ring);
-    border-color: var(--search-focus-ring);
-  }
-
-  .search-input:hover:not(:focus):not(:disabled) {
-    border-color: var(--search-focus-ring);
-  }
-
-  .search-input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .search-input::-moz-placeholder {
-    color: var(--search-text-placeholder);
-  }
-
-  .search-input::placeholder {
-    color: var(--search-text-placeholder);
-  }
-
-  /* Hide browser's default clear button on search inputs */
-  .search-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-    appearance: none;
-  }
-
-  .search-actions {
-    position: absolute;
-    inset-y: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    color: var(--search-icon-color);
-  }
-
-  /* Dark mode overrides */
-  :global(.dark) .search-wrapper {
-    --search-bg: #111827;
-    --search-text: #f7f7f8;
-    --search-text-placeholder: #9ca3af;
-    --search-border: #374151;
-    --search-icon-color: #9ca3af;
-  }
-</style>

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

@@ -3,9 +3,9 @@ type Search = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     [x: string]: any;
     class?: string | undefined;
     size?: string | undefined;
+    name?: string | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
-    name?: string | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
 }, {
@@ -28,9 +28,9 @@ declare const Search: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     [x: string]: any;
     class?: string | undefined;
     size?: string | undefined;
+    name?: string | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
-    name?: string | undefined;
     id?: string | undefined;
     placeholder?: string | undefined;
 }, {

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

@@ -1 +1 @@
-{"version":3,"file":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,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":"Search.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Search.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA;;;;;;;;;;;;;;;;;;;;;;eAAgM;sCAT1J,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"}