{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "verification-input",
  "type": "registry:ui",
  "title": "Verification Input",
  "description": "iOS 26 liquid-glass verification code input — dual-theme cells with spring-animated digit entry and haptic sound.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/verification-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\n/* ── sound ── */\nlet _a: AudioContext, _b: AudioBuffer;\nconst tick = () => {\n  if (typeof window === \"undefined\") return;\n  if (!_a) {\n    _a = new AudioContext();\n    _b = _a.createBuffer(1, (_a.sampleRate * 0.003) | 0, _a.sampleRate);\n    const d = _b.getChannelData(0);\n    for (let i = 0; i < d.length; i++)\n      d[i] = (Math.random() * 2 - 1) * (1 - i / d.length) ** 4;\n  }\n  const s = _a.createBufferSource();\n  s.buffer = _b;\n  const g = _a.createGain();\n  g.gain.value = 0.04;\n  s.connect(g).connect(_a.destination);\n  s.start();\n};\n\n/* ── theme ── */\nconst CSS = `\n.vi{\n  --vi-dim:rgba(0,0,0,0.42);\n  --vi-mid:rgba(0,0,0,0.55);\n  --vi-hi:rgba(0,0,0,0.88);\n  --vi-cell:rgba(0,0,0,0.02);\n  --vi-cell-border:rgba(0,0,0,0.06);\n  --vi-cell-active:rgba(0,0,0,0.12);\n  --vi-cursor:rgba(0,0,0,0.2);\n  --vi-filled:rgba(0,0,0,0.6);\n  --vi-complete:rgba(0,0,0,0.85)\n}\n.dark .vi,[data-theme=\"dark\"] .vi{\n  --vi-dim:rgba(255,255,255,0.28);\n  --vi-mid:rgba(255,255,255,0.5);\n  --vi-hi:rgba(255,255,255,0.88);\n  --vi-cell:rgba(255,255,255,0.02);\n  --vi-cell-border:rgba(255,255,255,0.06);\n  --vi-cell-active:rgba(255,255,255,0.15);\n  --vi-cursor:rgba(255,255,255,0.2);\n  --vi-filled:rgba(255,255,255,0.6);\n  --vi-complete:rgba(255,255,255,0.85)\n}`;\n\nconst CELL = 46;\nconst CELL_H = 56;\nconst GAP = 8;\nconst GROUP_GAP = 16;\nconst MONO =\n  \"ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace\";\n\n/* ── types ── */\nexport interface VerificationInputProps {\n  length?: number;\n  onComplete?: (code: string) => void;\n  onResend?: () => void;\n  sound?: boolean;\n  style?: React.CSSProperties;\n}\n\n/* ── component ── */\nexport function VerificationInput({\n  length = 6,\n  onComplete,\n  onResend,\n  sound = true,\n  style,\n}: VerificationInputProps) {\n  const [value, setValue] = React.useState(\"\");\n  const [focused, setFocused] = React.useState(false);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const digits = value.split(\"\");\n  const activeIndex = value.length;\n  const completed = value.length >= length;\n  const group = Math.floor(length / 2);\n\n  React.useEffect(() => {\n    const t = setTimeout(() => inputRef.current?.focus(), 80);\n    return () => clearTimeout(t);\n  }, []);\n\n  const handleChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value.replace(/\\D/g, \"\").slice(0, length);\n      if (raw.length > value.length && sound) tick();\n      setValue(raw);\n      if (raw.length >= length) onComplete?.(raw);\n    },\n    [length, value.length, sound, onComplete],\n  );\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === \"Backspace\" && sound && value.length > 0) tick();\n    },\n    [sound, value.length],\n  );\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: CSS }} />\n      <motion.div\n        className=\"vi\"\n        initial={{ opacity: 0, y: 8 }}\n        animate={{ opacity: 1, y: 0 }}\n        transition={{ duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }}\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          gap: 20,\n          ...style,\n        }}\n      >\n        {/* label */}\n        <span\n          style={{\n            fontSize: 11,\n            fontWeight: 500,\n            letterSpacing: \"0.08em\",\n            textTransform: \"uppercase\" as const,\n            color: \"var(--vi-dim)\",\n            userSelect: \"none\" as const,\n          }}\n        >\n          Verification code\n        </span>\n\n        {/* cells */}\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: GAP,\n            cursor: \"text\",\n            position: \"relative\",\n          }}\n          onClick={() => inputRef.current?.focus()}\n        >\n          <input\n            ref={inputRef}\n            type=\"text\"\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            value={value}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            onFocus={() => setFocused(true)}\n            onBlur={() => setFocused(false)}\n            style={{\n              position: \"absolute\",\n              opacity: 0,\n              width: 1,\n              height: 1,\n              pointerEvents: \"none\",\n            }}\n            aria-label=\"Verification code\"\n          />\n\n          {Array.from({ length }, (_, i) => {\n            const digit = digits[i] || \"\";\n            const isActive = focused && i === activeIndex && !completed;\n            const isFilled = digit !== \"\";\n\n            return (\n              <React.Fragment key={i}>\n                {i === group && <div style={{ width: GROUP_GAP - GAP }} />}\n                <motion.div\n                  animate={{\n                    borderColor: isActive\n                      ? \"var(--vi-cell-active)\"\n                      : \"var(--vi-cell-border)\",\n                  }}\n                  transition={{ duration: 0.15 }}\n                  style={{\n                    position: \"relative\",\n                    width: CELL,\n                    height: CELL_H,\n                    borderRadius: 12,\n                    background: \"var(--vi-cell)\",\n                    border: \"1px solid var(--vi-cell-border)\",\n                    display: \"flex\",\n                    alignItems: \"center\",\n                    justifyContent: \"center\",\n                  }}\n                >\n                  <AnimatePresence mode=\"popLayout\">\n                    {isFilled && (\n                      <motion.span\n                        key={digit + i}\n                        initial={{ opacity: 0, scale: 0.6 }}\n                        animate={{ opacity: 1, scale: 1 }}\n                        exit={{ opacity: 0, scale: 0.6 }}\n                        transition={{\n                          type: \"spring\",\n                          stiffness: 500,\n                          damping: 30,\n                        }}\n                        style={{\n                          fontSize: 22,\n                          fontWeight: 500,\n                          fontFamily: MONO,\n                          fontVariantNumeric: \"tabular-nums\",\n                          color: completed\n                            ? \"var(--vi-complete)\"\n                            : \"var(--vi-filled)\",\n                          userSelect: \"none\" as const,\n                        }}\n                      >\n                        {digit}\n                      </motion.span>\n                    )}\n                  </AnimatePresence>\n\n                  {isActive && (\n                    <motion.div\n                      layoutId=\"vi-cursor\"\n                      style={{\n                        position: \"absolute\",\n                        bottom: 10,\n                        left: \"50%\",\n                        transform: \"translateX(-50%)\",\n                        width: 16,\n                        height: 1.5,\n                        borderRadius: 1,\n                        background: \"var(--vi-cursor)\",\n                      }}\n                    />\n                  )}\n                </motion.div>\n              </React.Fragment>\n            );\n          })}\n        </div>\n\n        {/* resend */}\n        <button\n          onClick={onResend}\n          style={{\n            fontSize: 12,\n            color: \"var(--vi-dim)\",\n            background: \"transparent\",\n            border: \"none\",\n            cursor: onResend ? \"pointer\" : \"default\",\n            transition: \"color 0.15s\",\n            opacity: onResend ? 1 : 0,\n            pointerEvents: onResend ? \"auto\" : \"none\",\n          }}\n          onMouseEnter={(e) => {\n            if (onResend) e.currentTarget.style.color = \"var(--vi-mid)\";\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.color = \"var(--vi-dim)\";\n          }}\n          tabIndex={onResend ? 0 : -1}\n        >\n          Resend code\n        </button>\n      </motion.div>\n    </>\n  );\n}\n\nexport default VerificationInput;\n",
      "type": "registry:ui",
      "target": "components/ruixen/verification-input.tsx"
    }
  ]
}