@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/input/CHANGELOG.md

@@ -1,29 +1,44 @@
-# Changelog
-
-All notable changes to the `Input` component will be documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
-
-Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Background: `bg-transparent dark:bg-input/30` → `bg-card` — Figma's surface token is `card` (`#ffffff`), which genuinely differs from `--background`/transparent in dark mode, same category of fix already made to `DialogContent`/`HoverCardContent`.
-- Disabled: replaced the blanket `disabled:opacity-50` fade with an explicit `disabled:bg-muted disabled:text-muted-foreground`, matching Figma's actual flat muted-gray disabled treatment (same category of fix as Checkbox's disabled state).
-- Large size: `data-[size=lg]:md:text-base` (16px) → `data-[size=lg]:md:text-sm` (14px) — Figma's Large instance binds the identical 14px font token as Default; only padding/height grow, not font size. **Reverted in the follow-up below** — the three sizes read as visually indistinct with matching font sizes, so the user asked to keep them differentiated.
-- Added a Pressed (`:active`) state: `active:border-ring`, matching Figma's Pressed state (same border-color token as Focus, without Focus's outer glow).
-- Removed dead, redundant unconditional legacy classes (`h-9`, `rounded-md`, `px-2.5 py-1`, `text-base`, `md:text-sm`) that were fully superseded by the newer `data-[size=*]:...` gated system already present in the same class string — same class of cleanup already done on Dialog/HoverCard/TooltipContent.
-
-### Notes (not changed)
-
-- Border color (`border-input`), radius (`rounded-lg`), Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`), and Error/`aria-invalid` styling already matched Figma's tokens exactly — no changes needed.
-- Figma's Hover state isn't implemented, per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma").
-- Figma's two documented sizes — Default (32px) and Large (40px) — correspond exactly to the existing `sm` (`h-8`) and `lg` (`h-10`) tiers. The code's own literal `"default"` tier (`h-9`, 36px) isn't represented in Figma at all — flagging in case you want to rename in Figma, same as was done for Accordion/Checkbox.
-- Lead/Tail/Complex/Wide (icon and toolbar compositions) are already fully covered by the existing `InputGroup` family — no new props added to `Input`. Added storybook examples for all four so they're visibly demonstrated on the Input docs page.
-- Label/Helper/Error-text content variants are already covered by the existing `Field`/`FieldLabel`/`FieldDescription`/`FieldError` primitives (shared across the whole design system, not Input-specific) — no new props added. Added a storybook example combining `Field` + `Input` to demonstrate Helper text, a character counter, and an Error state, since none of these Figma-documented compositions had a visible Input demo before. The small icon Figma shows before Helper/Error text is left as consumer-supplied slot content rather than hardcoded, since `Field` is used well beyond Input.
-- Counter (e.g. "10/100") has no dedicated primitive — it's a plain flex row + a counter `<span>` next to `FieldLabel`, demonstrated in the new storybook example above.
-
-### Fixed (follow-up)
-
-- User correction: the three sizes weren't visually distinct enough with matching font sizes (per Figma's literal token match above). Restored a differentiated type scale across the existing Tailwind tokens: `sm` → `text-xs` (12px, unchanged), `default` → `text-sm` (14px, unchanged), `lg` → `text-base` (16px, reverted from the Figma-matched 14px).
+# Changelog
+
+All notable changes to the `Input` component will be documented in this file.
+
+## 2026-10-06 — OTP Input (ClickLearn Lightning Design Library, node `7650-4177`)
+
+Figma adds an "OTP Input" component set to the Input page with states Default, Focused, Filled, Disabled and Error: six joined 56×40 slots (outer corners `rounded-lg`, shared inner borders, 14px medium centered text), a label above and hint text below.
+
+### Added
+
+- `InputOTP` (exported from `components/input`). Props: `length` (default 6), `name`, `value`, `size` (`sm` | `default` | `lg`; `default` is Figma's 56×40), `mode` (`numeric` | `alphanumeric`), `id` (applied to the first slot so `FieldLabel for` works), `disabled`, `required`, `autofocus`, `aria-invalid`.
+- Joined value is submitted through a hidden input named by `name`.
+- Inline script: auto-advance on type, Backspace to previous slot, arrow-key navigation, paste/OS autofill distributes characters across slots. Emits `input-otp:change` and `input-otp:complete` (`detail.value`).
+
+### Notes
+
+- States reuse Input's tokens exactly: `border-input`, `bg-card`, `shadow-xs`; Focus `border-ring ring-3 ring-ring/50`; Error `aria-invalid:border-destructive` (no outer ring, matching Figma); Disabled `bg-muted text-muted-foreground`. Hover not implemented (standing direction).
+- Label and hint are composed with `Field` / `FieldLabel` / `FieldDescription` / `FieldError`, same as Input, rather than new props.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
+
+Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: `bg-transparent dark:bg-input/30` → `bg-card` — Figma's surface token is `card` (`#ffffff`), which genuinely differs from `--background`/transparent in dark mode, same category of fix already made to `DialogContent`/`HoverCardContent`.
+- Disabled: replaced the blanket `disabled:opacity-50` fade with an explicit `disabled:bg-muted disabled:text-muted-foreground`, matching Figma's actual flat muted-gray disabled treatment (same category of fix as Checkbox's disabled state).
+- Large size: `data-[size=lg]:md:text-base` (16px) → `data-[size=lg]:md:text-sm` (14px) — Figma's Large instance binds the identical 14px font token as Default; only padding/height grow, not font size. **Reverted in the follow-up below** — the three sizes read as visually indistinct with matching font sizes, so the user asked to keep them differentiated.
+- Added a Pressed (`:active`) state: `active:border-ring`, matching Figma's Pressed state (same border-color token as Focus, without Focus's outer glow).
+- Removed dead, redundant unconditional legacy classes (`h-9`, `rounded-md`, `px-2.5 py-1`, `text-base`, `md:text-sm`) that were fully superseded by the newer `data-[size=*]:...` gated system already present in the same class string — same class of cleanup already done on Dialog/HoverCard/TooltipContent.
+
+### Notes (not changed)
+
+- Border color (`border-input`), radius (`rounded-lg`), Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`), and Error/`aria-invalid` styling already matched Figma's tokens exactly — no changes needed.
+- Figma's Hover state isn't implemented, per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma").
+- Figma's two documented sizes — Default (32px) and Large (40px) — correspond exactly to the existing `sm` (`h-8`) and `lg` (`h-10`) tiers. The code's own literal `"default"` tier (`h-9`, 36px) isn't represented in Figma at all — flagging in case you want to rename in Figma, same as was done for Accordion/Checkbox.
+- Lead/Tail/Complex/Wide (icon and toolbar compositions) are already fully covered by the existing `InputGroup` family — no new props added to `Input`. Added storybook examples for all four so they're visibly demonstrated on the Input docs page.
+- Label/Helper/Error-text content variants are already covered by the existing `Field`/`FieldLabel`/`FieldDescription`/`FieldError` primitives (shared across the whole design system, not Input-specific) — no new props added. Added a storybook example combining `Field` + `Input` to demonstrate Helper text, a character counter, and an Error state, since none of these Figma-documented compositions had a visible Input demo before. The small icon Figma shows before Helper/Error text is left as consumer-supplied slot content rather than hardcoded, since `Field` is used well beyond Input.
+- Counter (e.g. "10/100") has no dedicated primitive — it's a plain flex row + a counter `<span>` next to `FieldLabel`, demonstrated in the new storybook example above.
+
+### Fixed (follow-up)
+
+- User correction: the three sizes weren't visually distinct enough with matching font sizes (per Figma's literal token match above). Restored a differentiated type scale across the existing Tailwind tokens: `sm` → `text-xs` (12px, unchanged), `default` → `text-sm` (14px, unchanged), `lg` → `text-base` (16px, reverted from the Figma-matched 14px).

package/src/components/input/Input.astro

@@ -1,130 +1,130 @@
----
-/**
- * @component Input
- * @title Input
- * @description Base input field used in forms.
- * @description A field for collecting user input.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=145-3
- * @status stable
- * @since 0.1.0
- *
- * @preview
- *
- * <Input type="text" placeholder="Enter your name" />
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Input } from '@bejamas/ui/components/input';
- * ---
- * <Input type="email" placeholder="Enter your email" />
- * ```
- *
- * @examples
- *
- * ### Default
- *
- * <Input type="email" placeholder="Enter your email" />
- *
- * ### Disabled
- *
- * <Input type="email" placeholder="Enter your email" disabled />
- *
- * ### Sizes
- *
- * <div class="grid w-full max-w-sm gap-3">
- *   <div class="flex items-center gap-2">
- *     <Input size="sm" placeholder="Small input (h-8)" />
- *     <Button size="sm" variant="outline">
- *       Small
- *     </Button>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <Input placeholder="Default input (h-9)" />
- *     <Button variant="outline">Default</Button>
- *   </div>
- *   <div class="flex items-center gap-2">
- *     <Input size="lg" placeholder="Large input (h-10)" />
- *     <Button size="lg" variant="outline">
- *       Large
- *     </Button>
- *   </div>
- * </div>
- *
- * ### File
- *
- * <div class="grid w-full max-w-sm items-center gap-3">
- *   <Label htmlFor="picture">Picture</Label>
- *   <Input id="picture" type="file" />
- * </div>
- *
- * ### With Label
- *
- * <div class="grid w-full max-w-sm items-center gap-3">
- *   <Label htmlFor="email">Email</Label>
- *   <Input id="email" type="email" placeholder="Enter your email" />
- * </div>
- *
- * ### With Button
- *
- *  <div class="flex w-full max-w-sm items-center gap-2">
- *    <Input type="email" placeholder="Email" />
- *    <Button type="submit" variant="outline">
- *      Subscribe
- *    </Button>
- *  </div>
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import { cva, type VariantProps } from "class-variance-authority";
-import type { HTMLAttributes } from "astro/types";
-
-const inputVariants = cva(
-  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed",
-  {
-    variants: {
-      size: {
-        sm: "data-[size=sm]",
-        default: "data-[size=default]",
-        lg: "data-[size=lg]",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  },
-);
-
-type InputUiSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
-type NativeInputSize = HTMLAttributes<"input">["size"];
-
-interface Props extends Omit<HTMLAttributes<"input">, "size"> {
-  size?: InputUiSize | NativeInputSize;
-  nativeSize?: NativeInputSize;
-}
-
-const {
-  class: className = "",
-  type = "text",
-  size: sizeProp,
-  nativeSize,
-  ...props
-} = Astro.props as Props;
-
-const isUiSize = (value: unknown): value is InputUiSize =>
-  value === "sm" || value === "default" || value === "lg";
-
-const resolvedUiSize = isUiSize(sizeProp) ? sizeProp : "default";
-const resolvedNativeSize =
-  nativeSize ?? (!isUiSize(sizeProp) ? sizeProp : undefined);
----
-
-<input
-  type={type}
-  size={resolvedNativeSize}
-  data-slot={props["data-slot"] ?? "input"}
-  data-size={resolvedUiSize}
-  class={cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 active:border-ring rounded-lg border bg-card shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 disabled:bg-muted disabled:text-muted-foreground data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:py-1 data-[size=sm]:md:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:py-1 data-[size=default]:md:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:py-1.5 data-[size=lg]:md:text-base", inputVariants({ size: resolvedUiSize }), className)}
-  {...props}
-/>
+---
+/**
+ * @component Input
+ * @title Input
+ * @description Base input field used in forms.
+ * @description A field for collecting user input.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=145-3
+ * @status stable
+ * @since 0.1.0
+ *
+ * @preview
+ *
+ * <Input type="text" placeholder="Enter your name" />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Input } from '@bejamas/ui/components/input';
+ * ---
+ * <Input type="email" placeholder="Enter your email" />
+ * ```
+ *
+ * @examples
+ *
+ * ### Default
+ *
+ * <Input type="email" placeholder="Enter your email" />
+ *
+ * ### Disabled
+ *
+ * <Input type="email" placeholder="Enter your email" disabled />
+ *
+ * ### Sizes
+ *
+ * <div class="grid w-full max-w-sm gap-3">
+ *   <div class="flex items-center gap-2">
+ *     <Input size="sm" placeholder="Small input (h-8)" />
+ *     <Button size="sm" variant="outline">
+ *       Small
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <Input placeholder="Default input (h-9)" />
+ *     <Button variant="outline">Default</Button>
+ *   </div>
+ *   <div class="flex items-center gap-2">
+ *     <Input size="lg" placeholder="Large input (h-10)" />
+ *     <Button size="lg" variant="outline">
+ *       Large
+ *     </Button>
+ *   </div>
+ * </div>
+ *
+ * ### File
+ *
+ * <div class="grid w-full max-w-sm items-center gap-3">
+ *   <Label htmlFor="picture">Picture</Label>
+ *   <Input id="picture" type="file" />
+ * </div>
+ *
+ * ### With Label
+ *
+ * <div class="grid w-full max-w-sm items-center gap-3">
+ *   <Label htmlFor="email">Email</Label>
+ *   <Input id="email" type="email" placeholder="Enter your email" />
+ * </div>
+ *
+ * ### With Button
+ *
+ *  <div class="flex w-full max-w-sm items-center gap-2">
+ *    <Input type="email" placeholder="Email" />
+ *    <Button type="submit" variant="outline">
+ *      Subscribe
+ *    </Button>
+ *  </div>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "astro/types";
+
+const inputVariants = cva(
+  "w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed",
+  {
+    variants: {
+      size: {
+        sm: "data-[size=sm]",
+        default: "data-[size=default]",
+        lg: "data-[size=lg]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+type InputUiSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
+type NativeInputSize = HTMLAttributes<"input">["size"];
+
+interface Props extends Omit<HTMLAttributes<"input">, "size"> {
+  size?: InputUiSize | NativeInputSize;
+  nativeSize?: NativeInputSize;
+}
+
+const {
+  class: className = "",
+  type = "text",
+  size: sizeProp,
+  nativeSize,
+  ...props
+} = Astro.props as Props;
+
+const isUiSize = (value: unknown): value is InputUiSize =>
+  value === "sm" || value === "default" || value === "lg";
+
+const resolvedUiSize = isUiSize(sizeProp) ? sizeProp : "default";
+const resolvedNativeSize =
+  nativeSize ?? (!isUiSize(sizeProp) ? sizeProp : undefined);
+---
+
+<input
+  type={type}
+  size={resolvedNativeSize}
+  data-slot={props["data-slot"] ?? "input"}
+  data-size={resolvedUiSize}
+  class={cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 active:border-ring rounded-lg border bg-card shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 disabled:bg-muted disabled:text-muted-foreground data-[size=sm]:h-8 data-[size=sm]:px-2.5 data-[size=sm]:py-1 data-[size=sm]:md:text-xs data-[size=default]:h-9 data-[size=default]:px-2.5 data-[size=default]:py-1 data-[size=default]:md:text-sm data-[size=lg]:h-10 data-[size=lg]:px-3.5 data-[size=lg]:py-1.5 data-[size=lg]:md:text-base", inputVariants({ size: resolvedUiSize }), className)}
+  {...props}
+/>

package/src/components/input/InputOTP.astro

@@ -0,0 +1,211 @@
+---
+/**
+ * @component InputOTP
+ * @title OTP Input
+ * @description A row of single-character slots for entering one-time codes, with auto-advance, backspace and paste support.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=7650-4177
+ * @status stable
+ * @since 0.4.0
+ *
+ * @preview
+ *
+ * <Field class="w-fit">
+ *   <FieldLabel for="otp">Verification code</FieldLabel>
+ *   <InputOTP id="otp" name="code" />
+ *   <FieldDescription>Enter the 6-digit code we sent to your email.</FieldDescription>
+ * </Field>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { InputOTP } from '@cl-light-ds/ui/components/input';
+ * ---
+ * <InputOTP id="otp" name="code" length={6} />
+ * ```
+ *
+ * @api
+ *
+ * ### Events
+ *
+ * | Event | Detail | Description |
+ * |-------|--------|-------------|
+ * | `input-otp:change` | `{ value: string }` | Fired whenever the code changes |
+ * | `input-otp:complete` | `{ value: string }` | Fired when every slot is filled |
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type InputOTPSize = "sm" | "default" | "lg";
+type InputOTPMode = "numeric" | "alphanumeric";
+
+interface Props extends Omit<HTMLAttributes<"div">, "id"> {
+  /** Number of slots. */
+  length?: number;
+  /** Name of the hidden input that carries the joined code on form submit. */
+  name?: string;
+  /** Initial value; characters fill slots from the left. */
+  value?: string;
+  size?: InputOTPSize;
+  /** `numeric` accepts digits only; `alphanumeric` accepts letters and digits. */
+  mode?: InputOTPMode;
+  /** Applied to the first slot so a `<label for>` / `FieldLabel` focuses it. */
+  id?: string;
+  disabled?: boolean;
+  required?: boolean;
+  autofocus?: boolean;
+  "aria-invalid"?: boolean | "true" | "false";
+  class?: string;
+}
+
+const {
+  class: className = "",
+  length = 6,
+  name,
+  value = "",
+  size = "default",
+  mode = "numeric",
+  id,
+  disabled = false,
+  required = false,
+  autofocus = false,
+  "aria-invalid": ariaInvalid,
+  ...rest
+} = Astro.props as Props;
+
+const allowed = mode === "alphanumeric" ? /[a-z0-9]/i : /\d/;
+const chars = [...value].filter((char) => allowed.test(char)).slice(0, length);
+const slots = Array.from({ length }, (_, index) => chars[index] ?? "");
+const invalid = ariaInvalid === true || ariaInvalid === "true";
+---
+
+<div
+  {...rest}
+  role="group"
+  data-slot="input-otp"
+  data-size={size}
+  data-mode={mode}
+  data-length={length}
+  data-disabled={disabled ? "" : undefined}
+  data-invalid={invalid ? "" : undefined}
+  class={cn("flex w-fit items-center", className)}
+>
+  {
+    slots.map((char, index) => (
+      <input
+        type="text"
+        id={index === 0 ? id : undefined}
+        data-slot="input-otp-slot"
+        data-size={size}
+        value={char}
+        inputmode={mode === "numeric" ? "numeric" : "text"}
+        autocomplete={index === 0 ? "one-time-code" : "off"}
+        autocapitalize="off"
+        spellcheck="false"
+        aria-label={`Character ${index + 1} of ${length}`}
+        aria-invalid={invalid ? "true" : undefined}
+        disabled={disabled}
+        autofocus={index === 0 && autofocus}
+        class={cn(
+          "relative -ml-px min-w-0 border border-input bg-card text-center font-medium text-foreground shadow-xs outline-none transition-[color,box-shadow] first:ml-0 first:rounded-l-lg last:rounded-r-lg",
+          "focus-visible:z-10 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:border-ring",
+          "aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 aria-invalid:focus-visible:ring-destructive/20",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+          "data-[size=sm]:h-8 data-[size=sm]:w-10 data-[size=sm]:text-xs",
+          "data-[size=default]:h-10 data-[size=default]:w-14 data-[size=default]:text-sm",
+          "data-[size=lg]:h-12 data-[size=lg]:w-16 data-[size=lg]:text-base",
+        )}
+      />
+    ))
+  }
+  <input
+    type="hidden"
+    data-slot="input-otp-value"
+    name={name}
+    value={chars.join("")}
+    required={required}
+    disabled={disabled}
+  />
+</div>
+
+<script>
+  function initInputOTP(root: HTMLElement) {
+    if (root.dataset.initialized !== undefined) return;
+    root.dataset.initialized = "";
+
+    const slots = Array.from(root.querySelectorAll<HTMLInputElement>('[data-slot="input-otp-slot"]'));
+    const hidden = root.querySelector<HTMLInputElement>('[data-slot="input-otp-value"]');
+    const allowed = root.dataset.mode === "alphanumeric" ? /[a-z0-9]/i : /\d/;
+    const accept = (text: string) => [...text].filter((char) => allowed.test(char));
+
+    function sync() {
+      const value = slots.map((slot) => slot.value).join("");
+      if (hidden) hidden.value = value;
+      root.dispatchEvent(new CustomEvent("input-otp:change", { bubbles: true, detail: { value } }));
+      if (slots.every((slot) => slot.value)) {
+        root.dispatchEvent(new CustomEvent("input-otp:complete", { bubbles: true, detail: { value } }));
+      }
+    }
+
+    // Writes characters into consecutive slots starting at `start`, then focuses the next empty one.
+    function fill(start: number, chars: string[]) {
+      let index = start;
+      for (const char of chars) {
+        const slot = slots[index];
+        if (!slot) break;
+        slot.value = char;
+        index++;
+      }
+      slots[Math.min(index, slots.length - 1)]?.focus();
+      sync();
+    }
+
+    slots.forEach((slot, index) => {
+      slot.addEventListener("focus", () => slot.select());
+
+      let previousValue = slot.value;
+      slot.addEventListener("beforeinput", () => (previousValue = slot.value));
+
+      slot.addEventListener("input", (event) => {
+        const { data: typed, inputType } = event as InputEvent;
+        // Single keystroke: use only the typed character, so typing into a filled slot replaces it.
+        // Anything else (OS autofill, IME) carries the whole string in the value.
+        const chars = accept(typed && typed.length === 1 ? typed : slot.value);
+        if (chars.length) {
+          slot.value = "";
+          fill(index, chars);
+        } else {
+          // Rejected characters leave the slot as it was; deletions clear it.
+          slot.value = inputType.startsWith("insert") ? previousValue : "";
+          sync();
+        }
+      });
+
+      slot.addEventListener("paste", (event) => {
+        event.preventDefault();
+        const chars = accept(event.clipboardData?.getData("text") ?? "");
+        if (chars.length) fill(index, chars);
+      });
+
+      slot.addEventListener("keydown", (event) => {
+        const previous = slots[index - 1];
+        const next = slots[index + 1];
+        if (event.key === "Backspace" && !slot.value && previous) {
+          event.preventDefault();
+          previous.value = "";
+          previous.focus();
+          sync();
+        } else if (event.key === "ArrowLeft" && previous) {
+          event.preventDefault();
+          previous.focus();
+        } else if (event.key === "ArrowRight" && next) {
+          event.preventDefault();
+          next.focus();
+        }
+      });
+    });
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-slot="input-otp"]').forEach(initInputOTP);
+</script>

package/src/components/input/index.ts

@@ -1,2 +1,2 @@
-export { default as Input } from "./Input.astro";
-
+export { default as Input } from "./Input.astro";
+export { default as InputOTP } from "./InputOTP.astro";