banhaten 0.1.0 → 0.1.2

package/registry/components/input-otp.tsx

@@ -0,0 +1,574 @@
+import * as React from "react"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+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: {
+      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 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 = dir === "rtl" ? "ArrowRight" : "ArrowLeft"
+      const nextKey = dir === "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}
+        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 }