@smicolon/fasla-ui 0.6.0 → 0.7.0

package/registry/ui/input-otp/input-otp.test.tsx

@@ -0,0 +1,299 @@
+import * as React from "react"
+import { afterEach, describe, it, expect, vi } from "vitest"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { REGEXP_ONLY_DIGITS } from "input-otp"
+import { inputBoxVariants } from "../input/input"
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputOTPProps } from "./input-otp"
+
+/**
+ * What these tests can and cannot prove.
+ *
+ * jsdom has no layout engine and no caret movement of its own, so nothing
+ * here proves slot sizes, where the ring falls or how a browser moves the
+ * caret. Those were measured in Chrome, Safari (WebKit) and Firefox in both
+ * directions: 36px slots, shared borders, the 24px separator, the slots
+ * filling from the right in Arabic and every arrow moving the way it points.
+ * The visual tests below assert the classes only.
+ */
+
+/** Figma's Simple type: two groups of three with a separator between. */
+function Simple(props: Omit<InputOTPProps, "maxLength" | "children" | "render">) {
+  return (
+    <InputOTP maxLength={6} aria-label="Verification code" {...props}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  )
+}
+
+const input = () => screen.getByRole("textbox", { name: "Verification code" }) as HTMLInputElement
+const slots = () => [...document.querySelectorAll<HTMLElement>("[data-slot=input-otp-slot]")]
+const slotText = () => slots().map((slot) => slot.textContent)
+
+describe("InputOTP — semantics", () => {
+  it("is one text field for the whole code, asking for the SMS code and the numeric keyboard", () => {
+    render(<Simple />)
+    expect(screen.getAllByRole("textbox")).toHaveLength(1)
+    expect(input()).toHaveAttribute("autocomplete", "one-time-code")
+    expect(input()).toHaveAttribute("inputmode", "numeric")
+    expect(input()).toHaveAttribute("maxlength", "6")
+  })
+
+  it("hides the slots and the separator from assistive tech, so the code is read once", () => {
+    render(<Simple defaultValue="123" />)
+    for (const slot of slots()) expect(slot).toHaveAttribute("aria-hidden", "true")
+    expect(document.querySelector("[data-slot=input-otp-separator]")).toHaveAttribute("aria-hidden", "true")
+    expect(document.querySelector("[data-slot=input-otp-separator]")).not.toHaveAttribute("role")
+  })
+
+  it("shows each character of the value in its slot", () => {
+    render(<Simple defaultValue="1234" />)
+    expect(slotText()).toEqual(["1", "2", "3", "4", "", ""])
+  })
+
+  it("passes the ref to the input", () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(
+      <InputOTP ref={ref} maxLength={2} aria-label="Verification code">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    expect(ref.current).toBe(input())
+  })
+})
+
+describe("InputOTP — value", () => {
+  it("calls onChange with each new code, and onComplete once the last slot is filled", () => {
+    const onChange = vi.fn()
+    const onComplete = vi.fn()
+    render(<Simple onChange={onChange} onComplete={onComplete} />)
+    fireEvent.change(input(), { target: { value: "12345" } })
+    expect(onChange).toHaveBeenLastCalledWith("12345")
+    expect(onComplete).not.toHaveBeenCalled()
+    fireEvent.change(input(), { target: { value: "123456" } })
+    expect(onComplete).toHaveBeenCalledWith("123456")
+  })
+
+  it("follows a controlled value", () => {
+    const { rerender } = render(<Simple value="12" onChange={() => {}} />)
+    expect(slotText()).toEqual(["1", "2", "", "", "", ""])
+    rerender(<Simple value="9876" onChange={() => {}} />)
+    expect(slotText()).toEqual(["9", "8", "7", "6", "", ""])
+  })
+
+  it("ignores a change that fails the pattern", () => {
+    const onChange = vi.fn()
+    render(<Simple pattern={REGEXP_ONLY_DIGITS} onChange={onChange} />)
+    fireEvent.change(input(), { target: { value: "12a" } })
+    expect(onChange).not.toHaveBeenCalled()
+    expect(input().value).toBe("")
+  })
+
+  it("stores Arabic-Indic digits as Western digits, and lets them pass a digits pattern", () => {
+    const onChange = vi.fn()
+    render(<Simple pattern={REGEXP_ONLY_DIGITS} onChange={onChange} />)
+    fireEvent.change(input(), { target: { value: "١٢٣۴" } })
+    expect(onChange).toHaveBeenLastCalledWith("1234")
+    expect(input().value).toBe("1234")
+    expect(slotText()).toEqual(["1", "2", "3", "4", "", ""])
+  })
+
+  it("shows a controlled value's Arabic-Indic digits as Western digits", () => {
+    render(<Simple value="١٢" onChange={() => {}} />)
+    expect(input().value).toBe("12")
+    expect(slotText()).toEqual(["1", "2", "", "", "", ""])
+  })
+
+  it("keeps the caller's pattern on the input for native validation", () => {
+    render(<Simple pattern={REGEXP_ONLY_DIGITS} />)
+    expect(input()).toHaveAttribute("pattern", REGEXP_ONLY_DIGITS)
+  })
+})
+
+describe("InputOTP — states", () => {
+  it("marks the input and every slot invalid with aria-invalid", () => {
+    render(<Simple aria-invalid />)
+    expect(input()).toHaveAttribute("aria-invalid", "true")
+    for (const slot of slots()) expect(slot).toHaveAttribute("data-invalid")
+  })
+
+  it("reads aria-invalid as ARIA does: false and \"false\" are valid", () => {
+    const { rerender } = render(<Simple aria-invalid={false} />)
+    for (const slot of slots()) expect(slot).not.toHaveAttribute("data-invalid")
+    rerender(<Simple aria-invalid="false" />)
+    for (const slot of slots()) expect(slot).not.toHaveAttribute("data-invalid")
+  })
+
+  it("lets one slot be marked invalid on its own", () => {
+    render(
+      <InputOTP maxLength={2} aria-label="Verification code">
+        <InputOTPGroup>
+          <InputOTPSlot index={0} />
+          <InputOTPSlot index={1} aria-invalid />
+        </InputOTPGroup>
+      </InputOTP>
+    )
+    expect(slots()[0]).not.toHaveAttribute("data-invalid")
+    expect(slots()[1]).toHaveAttribute("data-invalid")
+  })
+
+  it("disables the input, and dims the whole field through the container", () => {
+    render(<Simple disabled />)
+    expect(input()).toBeDisabled()
+    expect(input().closest("[data-input-otp-container]")).toHaveClass("has-[:disabled]:opacity-50")
+  })
+
+  it("marks the slot the next character goes into as active while focused", () => {
+    render(<Simple defaultValue="12" />)
+    expect(slots().some((slot) => slot.hasAttribute("data-active"))).toBe(false)
+    fireEvent.focus(input())
+    expect(slots()[2]).toHaveAttribute("data-active")
+  })
+})
+
+describe("InputOTP — direction", () => {
+  /**
+   * jsdom does not inherit `direction`, so a right-to-left field is one whose
+   * computed style says so, as a browser's would under `dir="rtl"`.
+   */
+  const rtl = () => {
+    const computed = window.getComputedStyle
+    return vi.spyOn(window, "getComputedStyle").mockImplementation((element, pseudo) => {
+      const style = computed(element, pseudo)
+      if (!(element instanceof HTMLInputElement)) return style
+      return new Proxy(style, {
+        get: (target, key) => {
+          if (key === "direction") return "rtl"
+          const value = Reflect.get(target, key)
+          return typeof value === "function" ? value.bind(target) : value
+        },
+      })
+    })
+  }
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  /** Puts a collapsed caret at `at`, presses `key`, and returns where the caret is. */
+  const press = (key: string, at: number) => {
+    input().setSelectionRange(at, at)
+    fireEvent.keyDown(input(), { key })
+    return input().selectionStart
+  }
+
+  it("moves the caret the way each arrow points in a right-to-left field", () => {
+    rtl()
+    render(<Simple defaultValue="1234" />)
+    expect(press("ArrowLeft", 2)).toBe(3)
+    expect(press("ArrowRight", 2)).toBe(1)
+    expect(press("ArrowLeft", 4)).toBe(4)
+    expect(press("ArrowRight", 0)).toBe(0)
+  })
+
+  it("leaves a left-to-right field's arrows to the browser", () => {
+    render(<Simple defaultValue="1234" />)
+    expect(press("ArrowLeft", 2)).toBe(2)
+    expect(press("ArrowRight", 2)).toBe(2)
+  })
+
+  it("lets the caller's onKeyDown prevent the move", () => {
+    rtl()
+    render(<Simple defaultValue="1234" onKeyDown={(event) => event.preventDefault()} />)
+    expect(press("ArrowLeft", 2)).toBe(2)
+    expect(press("ArrowLeft", 2)).toBe(2)
+  })
+
+  it("leaves Shift and the other modified arrows to the browser", () => {
+    rtl()
+    render(<Simple defaultValue="1234" />)
+    input().setSelectionRange(2, 2)
+    fireEvent.keyDown(input(), { key: "ArrowLeft", shiftKey: true })
+    expect(input().selectionStart).toBe(2)
+  })
+})
+
+describe("InputOTP — look", () => {
+  it("draws Figma's 36px slot: 1px input border, SM text, no fill", () => {
+    render(<Simple />)
+    expect(slots()[0]).toHaveClass("size-9", "border-y", "border-e", "border-input", "text-sm", "text-foreground")
+    expect(slots()[0]!.className).not.toMatch(/\bbg-/)
+  })
+
+  it("shares borders inside a group and rounds only the group's ends, on logical sides", () => {
+    render(<Simple />)
+    expect(slots()[0]).toHaveClass("first:border-s", "first:rounded-s-lg", "last:rounded-e-lg")
+    expect(slots()[0]!.className).not.toMatch(/rounded-(l|r)-|border-(l|r)\b/)
+  })
+
+  /** Input's classes after a variant prefix, such as `focus-within:` → `ring-ring/50`. */
+  const inputClasses = (variant: string) =>
+    inputBoxVariants()
+      .split(" ")
+      .filter((cls) => cls.startsWith(variant))
+      .map((cls) => cls.slice(variant.length))
+
+  it("draws Active with Input's focus classes: a ring border and a 3px ring/50 halo", () => {
+    render(<Simple />)
+    // Input's resting shadow has no counterpart here: the slot has no shadow to remove.
+    const focus = inputClasses("focus-within:").filter((cls) => cls !== "shadow-none")
+    expect(focus).toEqual(["border-ring", "ring-[3px]", "ring-ring/50"])
+    expect(slots()[0]).toHaveClass("data-[active]:z-10", ...focus.map((cls) => `data-[active]:${cls}`))
+  })
+
+  it("closes an Active slot's border on its start side without moving anything", () => {
+    render(<Simple />)
+    expect(slots()[1]).toHaveClass(
+      "data-[active]:border-s",
+      "data-[active]:[&:not(:first-child)]:-ms-px",
+      "data-[active]:[&:not(:first-child)]:w-[37px]"
+    )
+  })
+
+  it("draws Destructive with Input's invalid classes, 40% in Dark", () => {
+    render(<Simple />)
+    const invalid = inputClasses("group-data-[invalid]/input:")
+    const invalidDark = inputClasses("dark:group-data-[invalid]/input:")
+    expect(invalid).toEqual(["border-destructive", "ring-destructive/20"])
+    expect(invalidDark).toEqual(["ring-destructive/40"])
+    // Important, so they win over Active's ring colours as Input's do.
+    expect(slots()[0]).toHaveClass(
+      ...invalid.map((cls) => `data-[invalid]:!${cls}`),
+      ...invalidDark.map((cls) => `dark:data-[invalid]:!${cls}`)
+    )
+  })
+
+  it("draws the separator as a 20px, 1px line in a 24px box", () => {
+    render(<Simple />)
+    const separator = document.querySelector("[data-slot=input-otp-separator]")!
+    expect(separator).toHaveClass("size-6", "text-foreground")
+    expect(separator.firstElementChild).toHaveClass("h-px", "w-5", "rounded-full", "bg-current")
+  })
+
+  it("keeps the hidden input's text transparent in forced colors", () => {
+    render(<Simple />)
+    expect(input()).toHaveClass("[forced-color-adjust:none]")
+  })
+
+  it("spaces every type 8px, and takes containerClassName over it", () => {
+    const { unmount } = render(<Simple />)
+    expect(input().closest("[data-input-otp-container]")).toHaveClass("gap-2")
+    unmount()
+    render(<Simple containerClassName="gap-3" />)
+    const container = input().closest("[data-input-otp-container]")!
+    expect(container).toHaveClass("gap-3")
+    expect(container).not.toHaveClass("gap-2")
+  })
+})

package/registry/ui/input-otp/input-otp.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+import * as React from "react"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: OTP Input (40465:54984), 8 variants, and its slot, Otp Input Item
+ * (15097:22526), 5 states.
+ *
+ * Built on input-otp, as shadcn's Input OTP is. One real `<input>` lies over
+ * the slots and owns the behaviour: typing, pasting, deleting, the one-time
+ * code autofill (`autocomplete="one-time-code"`), the numeric keyboard and
+ * form submission. The slots only draw what it holds. This file owns the
+ * look, with shadcn's four parts: `InputOTP`, `InputOTPGroup`,
+ * `InputOTPSlot` and `InputOTPSeparator`.
+ *
+ * Figma axis → code:
+ *  - `Type` → how the parts are composed, never a prop:
+ *     - Simple: two groups of three slots, a separator between.
+ *     - Digits only: one group of six slots.
+ *     - With Separator: three groups of two slots, separators between.
+ *     - With Spacing: six groups of one slot, so every slot has its own
+ *       border and corners.
+ *    Every type is 8px between its groups and separators.
+ *  - `Direction` → the page's `dir`, never a prop. In Arabic the first slot
+ *    is on the right, and the arrow keys move the way they point.
+ *  - Otp Input Item `State`:
+ *     - Default → nothing.
+ *     - Active → the slot the next character goes into, while the field has
+ *       focus.
+ *     - Destructive Default / Destructive Active → `aria-invalid` on
+ *       `InputOTP`, as on Input.
+ *     - Disabled → `disabled` on `InputOTP`: the whole field at 50%.
+ */
+
+/** Arabic-Indic (٠–٩) and Extended Arabic-Indic (۰–۹) digits, as Western digits. */
+function toLatinDigits(text: string) {
+  return text.replace(/[\u0660-\u0669\u06F0-\u06F9]/g, (digit) =>
+    String((digit.charCodeAt(0) - 0x0660) % 0x90)
+  )
+}
+
+/** Whether an `aria-invalid` value marks the field invalid: any value but `false`, as ARIA reads it. */
+const saysInvalid = (value: React.AriaAttributes["aria-invalid"]) =>
+  value !== undefined && value !== false && value !== "false"
+
+/** Whether the field is invalid, for the slots: `aria-invalid` on `InputOTP`. */
+const InputOTPInvalidContext = React.createContext(false)
+
+/**
+ * In Arabic the slots run from the right, so the left arrow must move to the
+ * next slot and the right arrow to the previous one. Browsers disagree on
+ * digits in a right-to-left field: Chrome moves that way, but Safari and
+ * Firefox move through the digits left to right, so their left arrow steps
+ * back to the slot on the right. So in a right-to-left field the caret is
+ * moved here, in every browser: exactly as the browser moves it for the
+ * other arrow in English, and input-otp then selects the slot as it always
+ * does.
+ */
+function moveCaretVisually(event: React.KeyboardEvent<HTMLInputElement>) {
+  if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
+  if (event.shiftKey || event.altKey || event.metaKey || event.ctrlKey) return
+  const input = event.currentTarget
+  if (getComputedStyle(input).direction !== "rtl") return
+  event.preventDefault()
+  const start = input.selectionStart ?? 0
+  const end = input.selectionEnd ?? start
+  const forward = event.key === "ArrowLeft"
+  const caret = forward
+    ? start === end
+      ? Math.min(end + 1, input.value.length)
+      : end
+    : start === end
+      ? Math.max(start - 1, 0)
+      : start
+  input.setSelectionRange(caret, caret)
+}
+
+type OTPInputProps = React.ComponentPropsWithoutRef<typeof OTPInput>
+
+export type InputOTPProps = Omit<OTPInputProps, "value" | "defaultValue" | "onChange" | "pattern"> & {
+  /** The code, for a controlled field. */
+  value?: string
+  /** The code the field starts with, for an uncontrolled field. */
+  defaultValue?: string
+  /** Called with the new code on every change. Arabic-Indic digits arrive as Western digits. */
+  onChange?: (value: string) => void
+  /**
+   * A regular expression every character must match, such as input-otp's
+   * `REGEXP_ONLY_DIGITS`. A typed or pasted value that fails it is ignored.
+   * Arabic-Indic digits are read as Western digits before the test.
+   */
+  pattern?: string
+  /** Classes for the row that holds the groups and separators. */
+  containerClassName?: string
+  /** Classes for the hidden `<input>`. */
+  className?: string
+}
+
+/**
+ * The field: one `<input>` and the row of groups drawn under it, 8px
+ * between its groups and separators in every Figma type (`spacing/2`).
+ *
+ * `aria-invalid` goes to the input, so a screen reader hears the field is
+ * invalid, and turns every slot `destructive`. `disabled` dims the whole
+ * field to 50%, as on Input.
+ *
+ * Digits typed or pasted in Arabic-Indic form (٠١٢…) are stored as Western
+ * digits, so the code reads the same in every locale and passes a digits
+ * pattern. The ref is the input's.
+ *
+ * The input keeps input-otp's transparent text in forced colors (Windows
+ * high contrast): the browser would otherwise paint it, and the whole code
+ * would show piled up over the first slot.
+ */
+const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onChange,
+      pattern,
+      containerClassName,
+      className,
+      onKeyDown,
+      "aria-invalid": ariaInvalid,
+      ...props
+    },
+    ref
+  ) => {
+    const [uncontrolled, setUncontrolled] = React.useState(() => toLatinDigits(defaultValue ?? ""))
+    const code = value === undefined ? uncontrolled : toLatinDigits(value)
+
+    // input-otp tests each change against the pattern before it reaches
+    // `onChange`, so the test itself reads Arabic-Indic digits as Western.
+    // `source` stays the caller's, for the input's own `pattern` attribute.
+    const regexp = React.useMemo(() => {
+      if (!pattern) return undefined
+      const rule = new RegExp(pattern)
+      const accepting = new RegExp(pattern)
+      accepting.test = (text: string) => rule.test(toLatinDigits(text))
+      return accepting
+    }, [pattern])
+
+    const handleChange = (next: string) => {
+      const latin = toLatinDigits(next)
+      if (value === undefined) setUncontrolled(latin)
+      onChange?.(latin)
+    }
+
+    return (
+      <InputOTPInvalidContext.Provider value={saysInvalid(ariaInvalid)}>
+        <OTPInput
+          ref={ref}
+          data-slot="input-otp"
+          value={code}
+          onChange={handleChange}
+          // input-otp also takes a RegExp here; its types only say string.
+          pattern={regexp as unknown as string | undefined}
+          aria-invalid={ariaInvalid}
+          containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+          className={cn("[forced-color-adjust:none] disabled:cursor-not-allowed", className)}
+          onKeyDown={(event) => {
+            onKeyDown?.(event)
+            if (!event.defaultPrevented) moveCaretVisually(event)
+          }}
+          {...(props as OTPInputProps)}
+        />
+      </InputOTPInvalidContext.Provider>
+    )
+  }
+)
+InputOTP.displayName = "InputOTP"
+
+/**
+ * A group: slots that touch and share their borders, Figma's `Simple` frame.
+ * Only the ends of a group are rounded, so a group of one slot (With
+ * Spacing) is rounded all round.
+ */
+const InputOTPGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-slot="input-otp-group" className={cn("flex items-center", className)} {...props} />
+  )
+)
+InputOTPGroup.displayName = "InputOTPGroup"
+
+/**
+ * A slot: Figma's Otp Input Item. 36 × 36px, the character in SM Regular
+ * `foreground`, a 1px `input` border and no fill.
+ *
+ * In a group the slots share their borders: each draws its top, bottom and
+ * end edges, and only the first draws its start edge. The first slot rounds
+ * its start corners and the last its end corners, by Figma's
+ * `border radius/lg` (10px): `rounded-lg`, the project's `--radius`, as Tabs
+ * and Accordion use for the same step. Logical sides, so in Arabic the
+ * first slot is the one on the right.
+ *
+ * Active: the slot the next character goes into, while the field has focus.
+ * It draws Input's focus exactly, with Input's classes: a `ring` border and
+ * a 3px `ring/50` halo outside it. It rises over its neighbours so the halo
+ * is never covered. A slot inside a group has no start edge of its own, so
+ * while Active it draws one and moves 1px back over its neighbour's edge,
+ * 1px wider: the border is whole on all four sides, as Input's is, and the
+ * character and the slots after it stay where they were.
+ *
+ * Destructive: Input's invalid state, with Input's classes. The border turns
+ * `destructive`, and the Active halo is `destructive` at 20%, 40% in Dark.
+ * They must win over Active's `ring` colours, as Input's do. Input wins with
+ * group selectors that out-rank its focus; a slot's two states are
+ * attributes of equal weight, so the invalid ones carry `!` and win
+ * whatever order Tailwind writes them in. Set by `aria-invalid` on
+ * `InputOTP`, or on one slot.
+ *
+ * In forced colors (Windows high contrast), where rings are not painted, the
+ * Active slot gets a 2px system `Highlight` outline instead.
+ *
+ * The slot is hidden from assistive tech: the input already holds the code,
+ * so a screen reader would read every character twice.
+ */
+const inputOTPSlotClasses = cn(
+  "relative flex size-9 items-center justify-center border-y border-e border-input text-sm text-foreground",
+  "first:rounded-s-lg first:border-s last:rounded-e-lg",
+  "transition-[color,border-color,box-shadow] motion-reduce:transition-none",
+  "data-[active]:z-10 data-[active]:border-ring data-[active]:ring-[3px] data-[active]:ring-ring/50",
+  "data-[active]:border-s data-[active]:[&:not(:first-child)]:-ms-px data-[active]:[&:not(:first-child)]:w-[37px]",
+  "data-[invalid]:!border-destructive data-[invalid]:!ring-destructive/20 dark:data-[invalid]:!ring-destructive/40",
+  "forced-colors:data-[active]:[outline:2px_solid_Highlight]"
+)
+
+type InputOTPSlotProps = React.ComponentPropsWithoutRef<"div"> & {
+  /** Which character of the code this slot shows, from 0. */
+  index: number
+}
+
+const InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(
+  ({ index, className, "aria-invalid": ariaInvalid, ...props }, ref) => {
+    const context = React.useContext(OTPInputContext)
+    const fieldInvalid = React.useContext(InputOTPInvalidContext)
+    const { char, isActive } = context?.slots?.[index] ?? {}
+    const invalid = ariaInvalid === undefined ? fieldInvalid : saysInvalid(ariaInvalid)
+    return (
+      <div
+        ref={ref}
+        data-slot="input-otp-slot"
+        data-active={isActive ? "" : undefined}
+        data-invalid={invalid ? "" : undefined}
+        aria-hidden
+        className={cn(inputOTPSlotClasses, className)}
+        {...props}
+      >
+        {char}
+      </div>
+    )
+  }
+)
+InputOTPSlot.displayName = "InputOTPSlot"
+
+/**
+ * The separator between groups: Figma's 24px `Seprator` frame, a 20px line
+ * 1px thick in `foreground`, with round ends. Decorative, like the slots.
+ * Pass children to draw something else in the same 24px box.
+ */
+const InputOTPSeparator = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="input-otp-separator"
+      aria-hidden
+      className={cn("flex size-6 shrink-0 items-center justify-center text-foreground", className)}
+      {...props}
+    >
+      {children ?? <span className="h-px w-5 rounded-full bg-current" />}
+    </div>
+  )
+)
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/registry/ui/pagination/index.ts

@@ -0,0 +1,12 @@
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  type PaginationProps,
+  type PaginationLinkProps,
+  type PaginationStepProps,
+} from "./pagination"