banhaten 0.4.0 → 0.5.0

package/registry/components/input-otp.tsx

@@ -1,584 +1,584 @@
-import * as React from "react"
-import { cva } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { useResolvedDirection } from "@/hooks/use-direction"
-import {
-  inputControl,
-  inputRoot,
-  inputSurface,
-  type InputSize,
-  type InputVariant,
-  type InputVisualState,
-} from "./input"
-
-type InputOTPState = InputVisualState
-
-type InputOTPNativeProps = Omit<
-  React.ComponentProps<"input">,
-  | "children"
-  | "className"
-  | "defaultValue"
-  | "dir"
-  | "disabled"
-  | "maxLength"
-  | "name"
-  | "onChange"
-  | "readOnly"
-  | "size"
-  | "type"
-  | "value"
->
-
-type InputOTPProps = InputOTPNativeProps & {
-  className?: string
-  controlClassName?: string
-  defaultValue?: string
-  dir?: "ltr" | "rtl" | "auto"
-  disabled?: boolean
-  errorMessage?: React.ReactNode
-  groupClassName?: string
-  groupSize?: number
-  hasHelperText?: boolean
-  hasLabel?: boolean
-  isOptional?: boolean
-  isRequired?: boolean
-  label?: React.ReactNode
-  labelClassName?: string
-  length?: number
-  mask?: boolean
-  message?: React.ReactNode
-  name?: string
-  onComplete?: (value: string) => void
-  onValueChange?: (value: string) => void
-  optionalText?: React.ReactNode
-  readOnly?: boolean
-  separator?: React.ReactNode
-  size?: InputSize
-  slotClassName?: string
-  state?: InputOTPState
-  value?: string
-  variant?: InputVariant
-}
-
-const inputOtpGroup = cva(
-  "flex w-[var(--bh-input-otp-width)] max-w-full flex-wrap items-center gap-[var(--bh-input-otp-group-gap)]"
-)
-
-const inputOtpSlotGroup = cva(
-  "flex min-w-0 items-center gap-[var(--bh-input-otp-slot-gap)]"
-)
-
-const inputOtpSlot = cva("shrink-0", {
-  variants: {
-    size: {
-      comfortable: "w-[var(--bh-input-otp-slot-comfortable-width)]",
-      md: "w-[var(--bh-input-otp-slot-md-width)]",
-      lg: "w-[var(--bh-input-otp-slot-lg-width)]",
-    },
-  },
-  defaultVariants: {
-    size: "lg",
-  },
-})
-
-const inputOtpControl = cva(
-  [
-    "h-full w-full flex-none min-w-[var(--bh-space-none)] p-[var(--bh-space-none)] text-center",
-    "font-[var(--bh-text-body-md-medium-font-weight)] caret-[var(--bh-content-default)]",
-    "selection:bg-[var(--bh-bg-brand-soft)]",
-  ]
-)
-
-const inputOtpSeparator = cva(
-  "flex h-[var(--bh-input-lg-height)] w-[var(--bh-input-otp-separator-width)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]"
-)
-
-const inputOtpSeparatorMark = cva(
-  "block h-[var(--bh-input-otp-separator-height)] w-full rounded-[var(--bh-radius-full)] bg-[var(--bh-border-default)]"
-)
-
-const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
-  (
-    {
-      "aria-describedby": ariaDescribedBy,
-      "aria-label": ariaLabel,
-      autoComplete = "one-time-code",
-      className,
-      controlClassName,
-      defaultValue,
-      dir,
-      disabled,
-      errorMessage,
-      groupClassName,
-      groupSize = 3,
-      hasHelperText,
-      hasLabel,
-      id,
-      inputMode = "numeric",
-      isOptional = false,
-      isRequired = false,
-      label,
-      labelClassName,
-      length = 6,
-      mask = false,
-      message,
-      name,
-      onBlur,
-      onComplete,
-      onFocus,
-      onKeyDown,
-      onPaste,
-      onValueChange,
-      optionalText,
-      pattern = "[0-9]*",
-      placeholder,
-      readOnly,
-      required,
-      separator = <InputOTPSeparator />,
-      size = "lg",
-      slotClassName,
-      state = "default",
-      value,
-      variant = "default",
-      ...slotProps
-    },
-    ref
-  ) => {
-    const generatedId = React.useId()
-    const inputId = id || generatedId
-    const labelId = `${inputId}-label`
-    const helperId = `${inputId}-helper`
-    const slotCount = normalizeCount(length, 6)
-    const normalizedGroupSize = normalizeCount(groupSize, slotCount)
-    const isControlled = value !== undefined
-    const [internalValue, setInternalValue] = React.useState(
-      normalizeValue(defaultValue, slotCount)
-    )
-    const slotRefs = React.useRef<Array<HTMLInputElement | null>>([])
-    const rootRef = React.useRef<HTMLDivElement | null>(null)
-    const resolvedDirection = useResolvedDirection(
-      dir === "ltr" || dir === "rtl" ? dir : undefined,
-      rootRef
-    )
-    const currentValue = normalizeValue(
-      isControlled ? value : internalValue,
-      slotCount
-    )
-    const valueChars = valueToSlots(currentValue, slotCount)
-    const visualState = disabled ? "disabled" : state
-    const isDisabled = visualState === "disabled"
-    const isInvalid = visualState === "error" && !isDisabled
-    const isComplete = valueChars.every(Boolean)
-    const shouldRenderLabel = hasLabel ?? hasRenderableContent(label)
-    const helperText = isInvalid ? errorMessage : message
-    const shouldRenderHelperText =
-      hasHelperText ?? hasRenderableContent(helperText)
-    const describedBy = [ariaDescribedBy, shouldRenderHelperText ? helperId : ""]
-      .filter(Boolean)
-      .join(" ") || undefined
-    const groups = groupSlots(slotCount, normalizedGroupSize)
-    const slotPlaceholder = getFirstCharacter(placeholder)
-
-    function commitSlots(nextSlots: string[], focusIndex?: number) {
-      const nextValue = slotsToValue(nextSlots, slotCount)
-
-      if (!isControlled) {
-        setInternalValue(nextValue)
-      }
-
-      onValueChange?.(nextValue)
-
-      if (nextValue.length === slotCount) {
-        onComplete?.(nextValue)
-      }
-
-      if (focusIndex !== undefined) {
-        focusSlot(focusIndex)
-      }
-    }
-
-    function focusSlot(index: number) {
-      const nextIndex = Math.max(0, Math.min(slotCount - 1, index))
-
-      window.requestAnimationFrame(() => {
-        const slot = slotRefs.current[nextIndex]
-        slot?.focus()
-        slot?.select()
-      })
-    }
-
-    function setSlotRef(index: number, node: HTMLInputElement | null) {
-      slotRefs.current[index] = node
-
-      if (index === 0) {
-        assignRef(ref, node)
-      }
-    }
-
-    function updateSlot(index: number, nextInputValue: string) {
-      if (isDisabled || readOnly) return
-
-      const nextCharacters = toCharacters(nextInputValue, slotCount - index)
-      const nextSlots = [...valueChars]
-
-      if (nextCharacters.length === 0) {
-        nextSlots[index] = ""
-        commitSlots(nextSlots, index)
-        return
-      }
-
-      for (let offset = 0; offset < nextCharacters.length; offset += 1) {
-        nextSlots[index + offset] = nextCharacters[offset]
-      }
-
-      commitSlots(nextSlots, index + nextCharacters.length)
-    }
-
-    function handleSlotKeyDown(
-      event: React.KeyboardEvent<HTMLInputElement>,
-      index: number
-    ) {
-      onKeyDown?.(event)
-      if (event.defaultPrevented) return
-
-      const previousKey =
-        resolvedDirection === "rtl" ? "ArrowRight" : "ArrowLeft"
-      const nextKey =
-        resolvedDirection === "rtl" ? "ArrowLeft" : "ArrowRight"
-
-      if (event.key === previousKey) {
-        event.preventDefault()
-        focusSlot(index - 1)
-        return
-      }
-
-      if (event.key === nextKey) {
-        event.preventDefault()
-        focusSlot(index + 1)
-        return
-      }
-
-      if (event.key === "Home") {
-        event.preventDefault()
-        focusSlot(0)
-        return
-      }
-
-      if (event.key === "End") {
-        event.preventDefault()
-        focusSlot(slotCount - 1)
-        return
-      }
-
-      if (event.key !== "Backspace" || readOnly || isDisabled) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (valueChars[index]) {
-        const nextSlots = [...valueChars]
-        nextSlots[index] = ""
-        commitSlots(nextSlots, index)
-        return
-      }
-
-      if (index > 0) {
-        const nextSlots = [...valueChars]
-        nextSlots[index - 1] = ""
-        commitSlots(nextSlots, index - 1)
-      }
-    }
-
-    function handleSlotPaste(
-      event: React.ClipboardEvent<HTMLInputElement>,
-      index: number
-    ) {
-      onPaste?.(event)
-      if (event.defaultPrevented || readOnly || isDisabled) return
-
-      event.preventDefault()
-      updateSlot(index, event.clipboardData.getData("text"))
-    }
-
-    return (
-      <div
-        aria-label={shouldRenderLabel ? undefined : ariaLabel}
-        aria-labelledby={shouldRenderLabel ? labelId : undefined}
-        data-complete={isComplete ? "true" : undefined}
-        data-size={size}
-        data-slot="input-otp-root"
-        data-state={visualState}
-        data-variant={variant}
-        dir={dir === "auto" ? "auto" : resolvedDirection}
-        ref={rootRef}
-        role="group"
-        className={cn(
-          inputRoot(),
-          "[--bh-input-width:var(--bh-input-otp-width)]",
-          className
-        )}
-      >
-        {shouldRenderLabel ? (
-          <InputOTPLabel
-            className={labelClassName}
-            htmlFor={`${inputId}-0`}
-            id={labelId}
-            isOptional={isOptional}
-            isRequired={isRequired || Boolean(required)}
-            label={label}
-            optionalText={optionalText}
-          />
-        ) : null}
-
-        <div
-          data-slot="input-otp-body"
-          className={cn(
-            "grid",
-            shouldRenderLabel && "mt-[var(--bh-input-label-gap)]",
-            "gap-[var(--bh-input-helper-gap)]"
-          )}
-        >
-          <div data-slot="input-otp-group" className={cn(inputOtpGroup(), groupClassName)}>
-            {groups.map((group, groupIndex) => (
-              <React.Fragment key={`group-${group[0]}`}>
-                {groupIndex > 0 && separator ? separator : null}
-                <div data-slot="input-otp-slot-group" className={cn(inputOtpSlotGroup())}>
-                  {group.map((slotIndex) => (
-                    <span
-                      aria-disabled={isDisabled || undefined}
-                      data-filled={valueChars[slotIndex] ? "true" : undefined}
-                      data-slot="input-otp-slot"
-                      data-state={visualState}
-                      key={slotIndex}
-                      className={cn(
-                        inputSurface({ size, state: visualState, variant }),
-                        inputOtpSlot({ size }),
-                        slotClassName
-                      )}
-                      onClick={() => focusSlot(slotIndex)}
-                    >
-                      <input
-                        aria-describedby={describedBy}
-                        aria-invalid={isInvalid || undefined}
-                        aria-label={getSlotAriaLabel(slotIndex, slotCount)}
-                        autoComplete={slotIndex === 0 ? autoComplete : "off"}
-                        data-slot="input-otp-control"
-                        data-state={visualState}
-                        disabled={isDisabled}
-                        id={`${inputId}-${slotIndex}`}
-                        inputMode={inputMode}
-                        maxLength={1}
-                        pattern={pattern}
-                        placeholder={slotPlaceholder}
-                        readOnly={readOnly}
-                        ref={(node) => setSlotRef(slotIndex, node)}
-                        required={required}
-                        type={mask ? "password" : "text"}
-                        value={valueChars[slotIndex] || ""}
-                        className={cn(inputControl(), inputOtpControl(), controlClassName)}
-                        onBlur={onBlur}
-                        onChange={(event) => updateSlot(slotIndex, event.currentTarget.value)}
-                        onFocus={(event) => {
-                          onFocus?.(event)
-                          event.currentTarget.select()
-                        }}
-                        onKeyDown={(event) => handleSlotKeyDown(event, slotIndex)}
-                        onPaste={(event) => handleSlotPaste(event, slotIndex)}
-                        {...slotProps}
-                      />
-                    </span>
-                  ))}
-                </div>
-              </React.Fragment>
-            ))}
-          </div>
-
-          {name ? (
-            <input
-              data-slot="input-otp-hidden-control"
-              disabled={isDisabled}
-              name={name}
-              type="hidden"
-              value={currentValue}
-            />
-          ) : null}
-
-          {shouldRenderHelperText ? (
-            <InputOTPHelperText
-              id={helperId}
-              invalid={isInvalid}
-            >
-              {helperText}
-            </InputOTPHelperText>
-          ) : null}
-        </div>
-      </div>
-    )
-  }
-)
-InputOTP.displayName = "InputOTP"
-
-function InputOTPSeparator({ className }: { className?: string }) {
-  return (
-    <span
-      aria-hidden="true"
-      data-slot="input-otp-separator"
-      className={cn(inputOtpSeparator(), className)}
-    >
-      <span data-slot="input-otp-separator-mark" className={cn(inputOtpSeparatorMark())} />
-    </span>
-  )
-}
-
-function InputOTPLabel({
-  className,
-  htmlFor,
-  id,
-  isOptional,
-  isRequired,
-  label,
-  optionalText,
-}: {
-  className?: string
-  htmlFor: string
-  id: string
-  isOptional: boolean
-  isRequired: boolean
-  label: React.ReactNode
-  optionalText: React.ReactNode
-}) {
-  return (
-    <label
-      data-slot="input-otp-label"
-      htmlFor={htmlFor}
-      id={id}
-      className={cn(
-        "flex w-full items-center gap-[var(--bh-input-inline-gap)] text-start",
-        className
-      )}
-    >
-      <span
-        data-slot="input-otp-label-text"
-        dir="auto"
-        className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]"
-      >
-        {label}
-      </span>
-      {isRequired ? (
-        <span
-          aria-hidden="true"
-          data-slot="input-otp-label-required"
-          className="shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-danger-default)]"
-        >
-          *
-        </span>
-      ) : null}
-      {isOptional && hasRenderableContent(optionalText) ? (
-        <span
-          data-slot="input-otp-label-optional"
-          dir="auto"
-          className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-        >
-          {optionalText}
-        </span>
-      ) : null}
-    </label>
-  )
-}
-
-function InputOTPHelperText({
-  children,
-  id,
-  invalid,
-}: {
-  children: React.ReactNode
-  id: string
-  invalid: boolean
-}) {
-  return (
-    <p
-      data-slot="input-otp-helper-text"
-      id={id}
-      className={cn(
-        "m-0 w-full text-start text-[length:var(--bh-text-body-xs-regular-font-size)]",
-        "font-[var(--bh-text-body-xs-regular-font-weight)]",
-        "leading-[var(--bh-text-body-xs-regular-line-height)]",
-        "tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
-        invalid ? "text-[var(--bh-content-danger-default)]" : "text-[var(--bh-content-subtle)]"
-      )}
-    >
-      <span data-slot="input-otp-helper-label" dir="auto" className="min-w-0">
-        {children}
-      </span>
-    </p>
-  )
-}
-
-function assignRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
-  if (typeof ref === "function") {
-    ref(value)
-  } else if (ref) {
-    ref.current = value
-  }
-}
-
-function getFirstCharacter(value?: string) {
-  return value ? Array.from(value)[0] : undefined
-}
-
-function getSlotAriaLabel(index: number, total: number) {
-  return `One-time code character ${index + 1} of ${total}`
-}
-
-function groupSlots(slotCount: number, groupSize: number) {
-  const groups: number[][] = []
-
-  for (let index = 0; index < slotCount; index += groupSize) {
-    groups.push(
-      Array.from(
-        { length: Math.min(groupSize, slotCount - index) },
-        (_, offset) => index + offset
-      )
-    )
-  }
-
-  return groups
-}
-
-function hasRenderableContent(content: React.ReactNode) {
-  return (
-    content !== undefined &&
-    content !== null &&
-    content !== false &&
-    content !== ""
-  )
-}
-
-function normalizeCount(value: number | undefined, fallback: number) {
-  if (!Number.isFinite(value)) return fallback
-
-  return Math.max(1, Math.floor(value || fallback))
-}
-
-function normalizeValue(value: string | undefined, maxLength: number) {
-  return toCharacters(value || "", maxLength).join("")
-}
-
-function slotsToValue(slots: string[], maxLength: number) {
-  return slots.slice(0, maxLength).join("")
-}
-
-function toCharacters(value: string, maxLength: number) {
-  return Array.from(value.replace(/\s/g, "")).slice(0, maxLength)
-}
-
-function valueToSlots(value: string, slotCount: number) {
-  const characters = toCharacters(value, slotCount)
-
-  return Array.from({ length: slotCount }, (_, index) => characters[index] || "")
-}
-
-export { InputOTP, InputOTPSeparator }
-export type { InputOTPProps, InputOTPState }
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { useResolvedDirection } from "@/hooks/use-direction"
+import {
+  inputControl,
+  inputRoot,
+  inputSurface,
+  type InputSize,
+  type InputVariant,
+  type InputVisualState,
+} from "./input"
+
+type InputOTPState = InputVisualState
+
+type InputOTPNativeProps = Omit<
+  React.ComponentProps<"input">,
+  | "children"
+  | "className"
+  | "defaultValue"
+  | "dir"
+  | "disabled"
+  | "maxLength"
+  | "name"
+  | "onChange"
+  | "readOnly"
+  | "size"
+  | "type"
+  | "value"
+>
+
+type InputOTPProps = InputOTPNativeProps & {
+  className?: string
+  controlClassName?: string
+  defaultValue?: string
+  dir?: "ltr" | "rtl" | "auto"
+  disabled?: boolean
+  errorMessage?: React.ReactNode
+  groupClassName?: string
+  groupSize?: number
+  hasHelperText?: boolean
+  hasLabel?: boolean
+  isOptional?: boolean
+  isRequired?: boolean
+  label?: React.ReactNode
+  labelClassName?: string
+  length?: number
+  mask?: boolean
+  message?: React.ReactNode
+  name?: string
+  onComplete?: (value: string) => void
+  onValueChange?: (value: string) => void
+  optionalText?: React.ReactNode
+  readOnly?: boolean
+  separator?: React.ReactNode
+  size?: InputSize
+  slotClassName?: string
+  state?: InputOTPState
+  value?: string
+  variant?: InputVariant
+}
+
+const inputOtpGroup = cva(
+  "flex w-[var(--bh-input-otp-width)] max-w-full flex-wrap items-center gap-[var(--bh-input-otp-group-gap)]"
+)
+
+const inputOtpSlotGroup = cva(
+  "flex min-w-0 items-center gap-[var(--bh-input-otp-slot-gap)]"
+)
+
+const inputOtpSlot = cva("shrink-0", {
+  variants: {
+    size: {
+      comfortable: "w-[var(--bh-input-otp-slot-comfortable-width)]",
+      md: "w-[var(--bh-input-otp-slot-md-width)]",
+      lg: "w-[var(--bh-input-otp-slot-lg-width)]",
+    },
+  },
+  defaultVariants: {
+    size: "lg",
+  },
+})
+
+const inputOtpControl = cva(
+  [
+    "h-full w-full flex-none min-w-[var(--bh-space-none)] p-[var(--bh-space-none)] text-center",
+    "font-[var(--bh-text-body-md-medium-font-weight)] caret-[var(--bh-content-default)]",
+    "selection:bg-[var(--bh-bg-brand-soft)]",
+  ]
+)
+
+const inputOtpSeparator = cva(
+  "flex h-[var(--bh-input-lg-height)] w-[var(--bh-input-otp-separator-width)] shrink-0 items-center justify-center text-[var(--bh-content-muted)]"
+)
+
+const inputOtpSeparatorMark = cva(
+  "block h-[var(--bh-input-otp-separator-height)] w-full rounded-[var(--bh-radius-full)] bg-[var(--bh-border-default)]"
+)
+
+const InputOTP = React.forwardRef<HTMLInputElement, InputOTPProps>(
+  (
+    {
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel,
+      autoComplete = "one-time-code",
+      className,
+      controlClassName,
+      defaultValue,
+      dir,
+      disabled,
+      errorMessage,
+      groupClassName,
+      groupSize = 3,
+      hasHelperText,
+      hasLabel,
+      id,
+      inputMode = "numeric",
+      isOptional = false,
+      isRequired = false,
+      label,
+      labelClassName,
+      length = 6,
+      mask = false,
+      message,
+      name,
+      onBlur,
+      onComplete,
+      onFocus,
+      onKeyDown,
+      onPaste,
+      onValueChange,
+      optionalText,
+      pattern = "[0-9]*",
+      placeholder,
+      readOnly,
+      required,
+      separator = <InputOTPSeparator />,
+      size = "lg",
+      slotClassName,
+      state = "default",
+      value,
+      variant = "default",
+      ...slotProps
+    },
+    ref
+  ) => {
+    const generatedId = React.useId()
+    const inputId = id || generatedId
+    const labelId = `${inputId}-label`
+    const helperId = `${inputId}-helper`
+    const slotCount = normalizeCount(length, 6)
+    const normalizedGroupSize = normalizeCount(groupSize, slotCount)
+    const isControlled = value !== undefined
+    const [internalValue, setInternalValue] = React.useState(
+      normalizeValue(defaultValue, slotCount)
+    )
+    const slotRefs = React.useRef<Array<HTMLInputElement | null>>([])
+    const rootRef = React.useRef<HTMLDivElement | null>(null)
+    const resolvedDirection = useResolvedDirection(
+      dir === "ltr" || dir === "rtl" ? dir : undefined,
+      rootRef
+    )
+    const currentValue = normalizeValue(
+      isControlled ? value : internalValue,
+      slotCount
+    )
+    const valueChars = valueToSlots(currentValue, slotCount)
+    const visualState = disabled ? "disabled" : state
+    const isDisabled = visualState === "disabled"
+    const isInvalid = visualState === "error" && !isDisabled
+    const isComplete = valueChars.every(Boolean)
+    const shouldRenderLabel = hasLabel ?? hasRenderableContent(label)
+    const helperText = isInvalid ? errorMessage : message
+    const shouldRenderHelperText =
+      hasHelperText ?? hasRenderableContent(helperText)
+    const describedBy = [ariaDescribedBy, shouldRenderHelperText ? helperId : ""]
+      .filter(Boolean)
+      .join(" ") || undefined
+    const groups = groupSlots(slotCount, normalizedGroupSize)
+    const slotPlaceholder = getFirstCharacter(placeholder)
+
+    function commitSlots(nextSlots: string[], focusIndex?: number) {
+      const nextValue = slotsToValue(nextSlots, slotCount)
+
+      if (!isControlled) {
+        setInternalValue(nextValue)
+      }
+
+      onValueChange?.(nextValue)
+
+      if (nextValue.length === slotCount) {
+        onComplete?.(nextValue)
+      }
+
+      if (focusIndex !== undefined) {
+        focusSlot(focusIndex)
+      }
+    }
+
+    function focusSlot(index: number) {
+      const nextIndex = Math.max(0, Math.min(slotCount - 1, index))
+
+      window.requestAnimationFrame(() => {
+        const slot = slotRefs.current[nextIndex]
+        slot?.focus()
+        slot?.select()
+      })
+    }
+
+    function setSlotRef(index: number, node: HTMLInputElement | null) {
+      slotRefs.current[index] = node
+
+      if (index === 0) {
+        assignRef(ref, node)
+      }
+    }
+
+    function updateSlot(index: number, nextInputValue: string) {
+      if (isDisabled || readOnly) return
+
+      const nextCharacters = toCharacters(nextInputValue, slotCount - index)
+      const nextSlots = [...valueChars]
+
+      if (nextCharacters.length === 0) {
+        nextSlots[index] = ""
+        commitSlots(nextSlots, index)
+        return
+      }
+
+      for (let offset = 0; offset < nextCharacters.length; offset += 1) {
+        nextSlots[index + offset] = nextCharacters[offset]
+      }
+
+      commitSlots(nextSlots, index + nextCharacters.length)
+    }
+
+    function handleSlotKeyDown(
+      event: React.KeyboardEvent<HTMLInputElement>,
+      index: number
+    ) {
+      onKeyDown?.(event)
+      if (event.defaultPrevented) return
+
+      const previousKey =
+        resolvedDirection === "rtl" ? "ArrowRight" : "ArrowLeft"
+      const nextKey =
+        resolvedDirection === "rtl" ? "ArrowLeft" : "ArrowRight"
+
+      if (event.key === previousKey) {
+        event.preventDefault()
+        focusSlot(index - 1)
+        return
+      }
+
+      if (event.key === nextKey) {
+        event.preventDefault()
+        focusSlot(index + 1)
+        return
+      }
+
+      if (event.key === "Home") {
+        event.preventDefault()
+        focusSlot(0)
+        return
+      }
+
+      if (event.key === "End") {
+        event.preventDefault()
+        focusSlot(slotCount - 1)
+        return
+      }
+
+      if (event.key !== "Backspace" || readOnly || isDisabled) {
+        return
+      }
+
+      event.preventDefault()
+
+      if (valueChars[index]) {
+        const nextSlots = [...valueChars]
+        nextSlots[index] = ""
+        commitSlots(nextSlots, index)
+        return
+      }
+
+      if (index > 0) {
+        const nextSlots = [...valueChars]
+        nextSlots[index - 1] = ""
+        commitSlots(nextSlots, index - 1)
+      }
+    }
+
+    function handleSlotPaste(
+      event: React.ClipboardEvent<HTMLInputElement>,
+      index: number
+    ) {
+      onPaste?.(event)
+      if (event.defaultPrevented || readOnly || isDisabled) return
+
+      event.preventDefault()
+      updateSlot(index, event.clipboardData.getData("text"))
+    }
+
+    return (
+      <div
+        aria-label={shouldRenderLabel ? undefined : ariaLabel}
+        aria-labelledby={shouldRenderLabel ? labelId : undefined}
+        data-complete={isComplete ? "true" : undefined}
+        data-size={size}
+        data-slot="input-otp-root"
+        data-state={visualState}
+        data-variant={variant}
+        dir={dir === "auto" ? "auto" : resolvedDirection}
+        ref={rootRef}
+        role="group"
+        className={cn(
+          inputRoot(),
+          "[--bh-input-width:var(--bh-input-otp-width)]",
+          className
+        )}
+      >
+        {shouldRenderLabel ? (
+          <InputOTPLabel
+            className={labelClassName}
+            htmlFor={`${inputId}-0`}
+            id={labelId}
+            isOptional={isOptional}
+            isRequired={isRequired || Boolean(required)}
+            label={label}
+            optionalText={optionalText}
+          />
+        ) : null}
+
+        <div
+          data-slot="input-otp-body"
+          className={cn(
+            "grid",
+            shouldRenderLabel && "mt-[var(--bh-input-label-gap)]",
+            "gap-[var(--bh-input-helper-gap)]"
+          )}
+        >
+          <div data-slot="input-otp-group" className={cn(inputOtpGroup(), groupClassName)}>
+            {groups.map((group, groupIndex) => (
+              <React.Fragment key={`group-${group[0]}`}>
+                {groupIndex > 0 && separator ? separator : null}
+                <div data-slot="input-otp-slot-group" className={cn(inputOtpSlotGroup())}>
+                  {group.map((slotIndex) => (
+                    <span
+                      aria-disabled={isDisabled || undefined}
+                      data-filled={valueChars[slotIndex] ? "true" : undefined}
+                      data-slot="input-otp-slot"
+                      data-state={visualState}
+                      key={slotIndex}
+                      className={cn(
+                        inputSurface({ size, state: visualState, variant }),
+                        inputOtpSlot({ size }),
+                        slotClassName
+                      )}
+                      onClick={() => focusSlot(slotIndex)}
+                    >
+                      <input
+                        aria-describedby={describedBy}
+                        aria-invalid={isInvalid || undefined}
+                        aria-label={getSlotAriaLabel(slotIndex, slotCount)}
+                        autoComplete={slotIndex === 0 ? autoComplete : "off"}
+                        data-slot="input-otp-control"
+                        data-state={visualState}
+                        disabled={isDisabled}
+                        id={`${inputId}-${slotIndex}`}
+                        inputMode={inputMode}
+                        maxLength={1}
+                        pattern={pattern}
+                        placeholder={slotPlaceholder}
+                        readOnly={readOnly}
+                        ref={(node) => setSlotRef(slotIndex, node)}
+                        required={required}
+                        type={mask ? "password" : "text"}
+                        value={valueChars[slotIndex] || ""}
+                        className={cn(inputControl(), inputOtpControl(), controlClassName)}
+                        onBlur={onBlur}
+                        onChange={(event) => updateSlot(slotIndex, event.currentTarget.value)}
+                        onFocus={(event) => {
+                          onFocus?.(event)
+                          event.currentTarget.select()
+                        }}
+                        onKeyDown={(event) => handleSlotKeyDown(event, slotIndex)}
+                        onPaste={(event) => handleSlotPaste(event, slotIndex)}
+                        {...slotProps}
+                      />
+                    </span>
+                  ))}
+                </div>
+              </React.Fragment>
+            ))}
+          </div>
+
+          {name ? (
+            <input
+              data-slot="input-otp-hidden-control"
+              disabled={isDisabled}
+              name={name}
+              type="hidden"
+              value={currentValue}
+            />
+          ) : null}
+
+          {shouldRenderHelperText ? (
+            <InputOTPHelperText
+              id={helperId}
+              invalid={isInvalid}
+            >
+              {helperText}
+            </InputOTPHelperText>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+)
+InputOTP.displayName = "InputOTP"
+
+function InputOTPSeparator({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="input-otp-separator"
+      className={cn(inputOtpSeparator(), className)}
+    >
+      <span data-slot="input-otp-separator-mark" className={cn(inputOtpSeparatorMark())} />
+    </span>
+  )
+}
+
+function InputOTPLabel({
+  className,
+  htmlFor,
+  id,
+  isOptional,
+  isRequired,
+  label,
+  optionalText,
+}: {
+  className?: string
+  htmlFor: string
+  id: string
+  isOptional: boolean
+  isRequired: boolean
+  label: React.ReactNode
+  optionalText: React.ReactNode
+}) {
+  return (
+    <label
+      data-slot="input-otp-label"
+      htmlFor={htmlFor}
+      id={id}
+      className={cn(
+        "flex w-full items-center gap-[var(--bh-input-inline-gap)] text-start",
+        className
+      )}
+    >
+      <span
+        data-slot="input-otp-label-text"
+        dir="auto"
+        className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]"
+      >
+        {label}
+      </span>
+      {isRequired ? (
+        <span
+          aria-hidden="true"
+          data-slot="input-otp-label-required"
+          className="shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-danger-default)]"
+        >
+          *
+        </span>
+      ) : null}
+      {isOptional && hasRenderableContent(optionalText) ? (
+        <span
+          data-slot="input-otp-label-optional"
+          dir="auto"
+          className="min-w-0 shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+        >
+          {optionalText}
+        </span>
+      ) : null}
+    </label>
+  )
+}
+
+function InputOTPHelperText({
+  children,
+  id,
+  invalid,
+}: {
+  children: React.ReactNode
+  id: string
+  invalid: boolean
+}) {
+  return (
+    <p
+      data-slot="input-otp-helper-text"
+      id={id}
+      className={cn(
+        "m-0 w-full text-start text-[length:var(--bh-text-body-xs-regular-font-size)]",
+        "font-[var(--bh-text-body-xs-regular-font-weight)]",
+        "leading-[var(--bh-text-body-xs-regular-line-height)]",
+        "tracking-[var(--bh-text-body-xs-regular-letter-spacing)]",
+        invalid ? "text-[var(--bh-content-danger-default)]" : "text-[var(--bh-content-subtle)]"
+      )}
+    >
+      <span data-slot="input-otp-helper-label" dir="auto" className="min-w-0">
+        {children}
+      </span>
+    </p>
+  )
+}
+
+function assignRef<T>(ref: React.ForwardedRef<T>, value: T | null) {
+  if (typeof ref === "function") {
+    ref(value)
+  } else if (ref) {
+    ref.current = value
+  }
+}
+
+function getFirstCharacter(value?: string) {
+  return value ? Array.from(value)[0] : undefined
+}
+
+function getSlotAriaLabel(index: number, total: number) {
+  return `One-time code character ${index + 1} of ${total}`
+}
+
+function groupSlots(slotCount: number, groupSize: number) {
+  const groups: number[][] = []
+
+  for (let index = 0; index < slotCount; index += groupSize) {
+    groups.push(
+      Array.from(
+        { length: Math.min(groupSize, slotCount - index) },
+        (_, offset) => index + offset
+      )
+    )
+  }
+
+  return groups
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+function normalizeCount(value: number | undefined, fallback: number) {
+  if (!Number.isFinite(value)) return fallback
+
+  return Math.max(1, Math.floor(value || fallback))
+}
+
+function normalizeValue(value: string | undefined, maxLength: number) {
+  return toCharacters(value || "", maxLength).join("")
+}
+
+function slotsToValue(slots: string[], maxLength: number) {
+  return slots.slice(0, maxLength).join("")
+}
+
+function toCharacters(value: string, maxLength: number) {
+  return Array.from(value.replace(/\s/g, "")).slice(0, maxLength)
+}
+
+function valueToSlots(value: string, slotCount: number) {
+  const characters = toCharacters(value, slotCount)
+
+  return Array.from({ length: slotCount }, (_, index) => characters[index] || "")
+}
+
+export { InputOTP, InputOTPSeparator }
+export type { InputOTPProps, InputOTPState }