@getmicdrop/svelte-components 5.20.2 → 5.21.0

package/dist/recipes/inputs/OTPInput.stories.svelte

@@ -1,162 +1,162 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import OTPInput from './OTPInput.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/Input/OTPInput',
-    component: OTPInput,
-    tags: ['autodocs'],
-    argTypes: {
-      length: {
-        control: { type: 'number', min: 4, max: 8 },
-        description: 'Number of digits in the OTP',
-      },
-      disabled: {
-        control: 'boolean',
-        description: 'Disable all inputs',
-      },
-    },
-  });
-</script>
-
-<script>
-  let code = $state(['', '', '', '', '', '']);
-  let code4 = $state(['', '', '', '']);
-  let code8 = $state(['', '', '', '', '', '', '', '']);
-  let completedCode = $state('');
-  let otpRef = $state(null);
-
-  function handleComplete(event) {
-    completedCode = event.code;
-    console.log('OTP Complete:', event.code);
-  }
-</script>
-
-
-<Story
-  name="Default (6 digits)"
-  args={{
-    value: ['', '', '', '', '', ''],
-    length: 6,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Four Digits"
-  args={{
-    value: ['', '', '', ''],
-    length: 4,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Eight Digits"
-  args={{
-    value: ['', '', '', '', '', '', '', ''],
-    length: 8,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Pre-filled"
-  args={{
-    value: ['1', '2', '3', '4', '5', '6'],
-    length: 6,
-    disabled: false,
-  }}
-/>
-
-<Story
-  name="Disabled"
-  args={{
-    value: ['1', '2', '3', '4', '5', '6'],
-    length: 6,
-    disabled: true,
-  }}
-/>
-
-<Story name="Interactive">
-  <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-500 dark:text-gray-400 mb-4">
-        Enter the 6-digit code sent to your phone
-      </p>
-      <OTPInput
-        bind:value={code}
-        bind:this={otpRef}
-        oncomplete={handleComplete}
-        onchange={(e) => console.log('Changed:', e.code)}
-      />
-    </div>
-
-    {#if completedCode}
-      <div class="p-4 bg-green-50 border border-green-200 rounded">
-        <p class="text-sm font-medium text-green-800">
-          Code entered: {completedCode}
-        </p>
-      </div>
-    {/if}
-
-    <div class="flex gap-2">
-      <button
-        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
-        onclick={() => otpRef?.focus()}
-      >
-        Focus First Input
-      </button>
-      <button
-        class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
-        onclick={() => {
-          otpRef?.clear();
-          completedCode = '';
-        }}
-      >
-        Clear
-      </button>
-    </div>
-  </div>
-</Story>
-
-<Story name="Verification Flow">
-  <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-500 dark:text-gray-400">
-        We've sent a 4-digit code to<br />
-        <span class="font-medium">+1 (555) 123-4567</span>
-      </p>
-    </div>
-
-    <div class="mb-6">
-      <OTPInput
-        bind:value={code4}
-        length={4}
-        oncomplete={(e) => alert(`Verifying code: ${e.code}`)}
-      />
-    </div>
-
-    <p class="text-center text-sm text-gray-500 dark:text-gray-400">
-      Didn't receive a code?
-      <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-500 dark:text-gray-400 mb-4">
-      Code will auto-submit when all digits are entered
-    </p>
-    <OTPInput
-      value={['', '', '', '', '', '']}
-      oncomplete={(e) => {
-        alert(`Auto-submitting code: ${e.code}`);
-      }}
-    />
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import OTPInput from './OTPInput.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Input/OTPInput',
+    component: OTPInput,
+    tags: ['autodocs'],
+    argTypes: {
+      length: {
+        control: { type: 'number', min: 4, max: 8 },
+        description: 'Number of digits in the OTP',
+      },
+      disabled: {
+        control: 'boolean',
+        description: 'Disable all inputs',
+      },
+    },
+  });
+</script>
+
+<script>
+  let code = $state(['', '', '', '', '', '']);
+  let code4 = $state(['', '', '', '']);
+  let code8 = $state(['', '', '', '', '', '', '', '']);
+  let completedCode = $state('');
+  let otpRef = $state(null);
+
+  function handleComplete(event) {
+    completedCode = event.code;
+    console.log('OTP Complete:', event.code);
+  }
+</script>
+
+
+<Story
+  name="Default (6 digits)"
+  args={{
+    value: ['', '', '', '', '', ''],
+    length: 6,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Four Digits"
+  args={{
+    value: ['', '', '', ''],
+    length: 4,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Eight Digits"
+  args={{
+    value: ['', '', '', '', '', '', '', ''],
+    length: 8,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Pre-filled"
+  args={{
+    value: ['1', '2', '3', '4', '5', '6'],
+    length: 6,
+    disabled: false,
+  }}
+/>
+
+<Story
+  name="Disabled"
+  args={{
+    value: ['1', '2', '3', '4', '5', '6'],
+    length: 6,
+    disabled: true,
+  }}
+/>
+
+<Story name="Interactive">
+  <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-500 dark:text-gray-400 mb-4">
+        Enter the 6-digit code sent to your phone
+      </p>
+      <OTPInput
+        bind:value={code}
+        bind:this={otpRef}
+        oncomplete={handleComplete}
+        onchange={(e) => console.log('Changed:', e.code)}
+      />
+    </div>
+
+    {#if completedCode}
+      <div class="p-4 bg-green-50 border border-green-200 rounded">
+        <p class="text-sm font-medium text-green-800">
+          Code entered: {completedCode}
+        </p>
+      </div>
+    {/if}
+
+    <div class="flex gap-2">
+      <button
+        class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-primary"
+        onclick={() => otpRef?.focus()}
+      >
+        Focus First Input
+      </button>
+      <button
+        class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600"
+        onclick={() => {
+          otpRef?.clear();
+          completedCode = '';
+        }}
+      >
+        Clear
+      </button>
+    </div>
+  </div>
+</Story>
+
+<Story name="Verification Flow">
+  <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-500 dark:text-gray-400">
+        We've sent a 4-digit code to<br />
+        <span class="font-medium">+1 (555) 123-4567</span>
+      </p>
+    </div>
+
+    <div class="mb-6">
+      <OTPInput
+        bind:value={code4}
+        length={4}
+        oncomplete={(e) => alert(`Verifying code: ${e.code}`)}
+      />
+    </div>
+
+    <p class="text-center text-sm text-gray-500 dark:text-gray-400">
+      Didn't receive a code?
+      <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-500 dark:text-gray-400 mb-4">
+      Code will auto-submit when all digits are entered
+    </p>
+    <OTPInput
+      value={['', '', '', '', '', '']}
+      oncomplete={(e) => {
+        alert(`Auto-submitting code: ${e.code}`);
+      }}
+    />
+  </div>
+</Story>

package/dist/recipes/inputs/OTPInput.svelte

@@ -1,128 +1,128 @@
-<script lang="ts">
-  interface CompleteEvent {
-    code: string;
-  }
-  interface ChangeEvent {
-    value: string[];
-    code: string;
-  }
-
-  const defaultLabels = {
-    enterCode: (len: number) => `Enter ${len}-digit verification code`,
-    instructions: (len: number) => `Enter one digit per box. Use backspace to navigate back. You can also paste a ${len}-digit code.`,
-    digitLabel: (index: number, total: number) => `Digit ${index + 1} of ${total}`,
-  };
-
-  interface Props {
-    value?: string[];
-    length?: number;
-    disabled?: boolean;
-    oncomplete?: (event: CompleteEvent) => void;
-    onchange?: (event: ChangeEvent) => void;
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    value = $bindable(["", "", "", "", "", ""]),
-    length = 6,
-    disabled = false,
-    oncomplete,
-    onchange,
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  let inputs = $state<HTMLInputElement[]>([]);
-
-  // Initialize value array if needed
-  $effect(() => {
-    if (value.length !== length) {
-      value = Array(length).fill("");
-    }
-  });
-
-  function handleInput(index: number, event: Event) {
-    const target = event.target as HTMLInputElement;
-    const inputValue = target.value;
-
-    // Only allow digits
-    if (!/^\d$/.test(inputValue) && inputValue !== "") {
-      target.value = "";
-      return;
-    }
-
-    value[index] = inputValue;
-    value = [...value];
-
-    // Auto-advance to next input
-    if (inputValue && index < length - 1) {
-      inputs[index + 1]?.focus();
-    }
-
-    // Check if complete
-    if (value.every((digit) => digit !== "")) {
-      oncomplete?.({ code: value.join("") });
-    }
-
-    onchange?.({ value, code: value.join("") });
-  }
-
-  function handleKeyDown(index: number, event: KeyboardEvent) {
-    if (event.key === "Backspace" && !value[index] && index > 0) {
-      inputs[index - 1]?.focus();
-    }
-  }
-
-  function handlePaste(event: ClipboardEvent) {
-    event.preventDefault();
-    const pastedData = event.clipboardData?.getData("text").replace(/\D/g, "") || "";
-
-    if (pastedData.length === length) {
-      value = pastedData.split("");
-      value = [...value];
-
-      inputs[length - 1]?.focus();
-
-      setTimeout(() => {
-        oncomplete?.({ code: value.join("") });
-      }, 100);
-    }
-  }
-
-  export function focus() {
-    inputs[0]?.focus();
-  }
-
-  export function clear() {
-    value = Array(length).fill("");
-    inputs[0]?.focus();
-  }
-</script>
-
-<div
-  class="flex justify-between gap-2 md:gap-3"
-  role="group"
-  aria-label={typeof labels.enterCode === 'function' ? labels.enterCode(length) : labels.enterCode}
->
-  <span id="otp-instructions" class="sr-only">
-    {typeof labels.instructions === 'function' ? labels.instructions(length) : labels.instructions}
-  </span>
-  {#each value as digit, index}
-    <input
-      bind:this={inputs[index]}
-      type="text"
-      inputmode="numeric"
-      autocomplete="one-time-code"
-      maxlength="1"
-      value={digit}
-      {disabled}
-      aria-label={labels.digitLabel(index, length)}
-      aria-describedby="otp-instructions"
-      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-hidden 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"
-      oninput={(e) => handleInput(index, e)}
-      onkeydown={(e) => handleKeyDown(index, e)}
-      onpaste={handlePaste}
-    />
-  {/each}
-</div>
+<script lang="ts">
+  interface CompleteEvent {
+    code: string;
+  }
+  interface ChangeEvent {
+    value: string[];
+    code: string;
+  }
+
+  const defaultLabels = {
+    enterCode: (len: number) => `Enter ${len}-digit verification code`,
+    instructions: (len: number) => `Enter one digit per box. Use backspace to navigate back. You can also paste a ${len}-digit code.`,
+    digitLabel: (index: number, total: number) => `Digit ${index + 1} of ${total}`,
+  };
+
+  interface Props {
+    value?: string[];
+    length?: number;
+    disabled?: boolean;
+    oncomplete?: (event: CompleteEvent) => void;
+    onchange?: (event: ChangeEvent) => void;
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    value = $bindable(["", "", "", "", "", ""]),
+    length = 6,
+    disabled = false,
+    oncomplete,
+    onchange,
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  let inputs = $state<HTMLInputElement[]>([]);
+
+  // Initialize value array if needed
+  $effect(() => {
+    if (value.length !== length) {
+      value = Array(length).fill("");
+    }
+  });
+
+  function handleInput(index: number, event: Event) {
+    const target = event.target as HTMLInputElement;
+    const inputValue = target.value;
+
+    // Only allow digits
+    if (!/^\d$/.test(inputValue) && inputValue !== "") {
+      target.value = "";
+      return;
+    }
+
+    value[index] = inputValue;
+    value = [...value];
+
+    // Auto-advance to next input
+    if (inputValue && index < length - 1) {
+      inputs[index + 1]?.focus();
+    }
+
+    // Check if complete
+    if (value.every((digit) => digit !== "")) {
+      oncomplete?.({ code: value.join("") });
+    }
+
+    onchange?.({ value, code: value.join("") });
+  }
+
+  function handleKeyDown(index: number, event: KeyboardEvent) {
+    if (event.key === "Backspace" && !value[index] && index > 0) {
+      inputs[index - 1]?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pastedData = event.clipboardData?.getData("text").replace(/\D/g, "") || "";
+
+    if (pastedData.length === length) {
+      value = pastedData.split("");
+      value = [...value];
+
+      inputs[length - 1]?.focus();
+
+      setTimeout(() => {
+        oncomplete?.({ code: value.join("") });
+      }, 100);
+    }
+  }
+
+  export function focus() {
+    inputs[0]?.focus();
+  }
+
+  export function clear() {
+    value = Array(length).fill("");
+    inputs[0]?.focus();
+  }
+</script>
+
+<div
+  class="flex justify-between gap-2 md:gap-3"
+  role="group"
+  aria-label={typeof labels.enterCode === 'function' ? labels.enterCode(length) : labels.enterCode}
+>
+  <span id="otp-instructions" class="sr-only">
+    {typeof labels.instructions === 'function' ? labels.instructions(length) : labels.instructions}
+  </span>
+  {#each value as digit, index}
+    <input
+      bind:this={inputs[index]}
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      maxlength="1"
+      value={digit}
+      {disabled}
+      aria-label={labels.digitLabel(index, length)}
+      aria-describedby="otp-instructions"
+      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-hidden 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"
+      oninput={(e) => handleInput(index, e)}
+      onkeydown={(e) => handleKeyDown(index, e)}
+      onpaste={handlePaste}
+    />
+  {/each}
+</div>