{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "pin-code-vault-input",
  "type": "registry:ui",
  "title": "Tactile Vault Keypad Input",
  "description": "Security tumbler combination lock keypad with tactile key states, masked pin indicators, and lockout status.",
  "category": "forms",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/forms/pin-code-vault-input/pin-code-vault-input.tsx",
      "type": "registry:ui",
      "target": "components/ui/pin-code-vault-input.tsx",
      "content": "import React, { useState, useEffect } from 'react';\nimport { LockKey, LockSimpleOpen } from '@phosphor-icons/react';\n\nexport const PinCodeVaultInput: React.FC = () => {\n  const [pin, setPin] = useState('');\n  const [isError, setIsError] = useState(false);\n  const targetPin = '7429';\n\n  const pressDigit = (digit: string) => {\n    if (pin.length < 4) {\n      const next = pin + digit;\n      setPin(next);\n      if (next.length === 4 && next !== targetPin) {\n        setIsError(true);\n        setTimeout(() => {\n          setPin('');\n          setIsError(false);\n        }, 600);\n      }\n    }\n  };\n\n  const deleteDigit = () => {\n    setPin((prev) => prev.slice(0, -1));\n    setIsError(false);\n  };\n\n  const clear = () => {\n    setPin('');\n    setIsError(false);\n  };\n\n  const isUnlocked = pin === targetPin;\n\n  return (\n    <div className=\"w-56 p-4 rounded-2xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-xl font-mono text-xs flex flex-col items-center\">\n      <div className=\"flex items-center gap-1.5 mb-3 text-[11px] font-bold text-zinc-600 dark:text-zinc-300\">\n        {isUnlocked ? (\n          <LockSimpleOpen size={14} className=\"text-emerald-500\" />\n        ) : (\n          <LockKey size={14} className={isError ? 'text-rose-500 animate-bounce' : 'text-zinc-400'} />\n        )}\n        <span className={isError ? 'text-rose-500' : ''}>\n          {isUnlocked ? 'VAULT UNLOCKED' : isError ? 'INCORRECT PIN' : 'ENTER 4-DIGIT PIN'}\n        </span>\n      </div>\n\n      {/* Pin Dots */}\n      <div className=\"flex gap-2.5 mb-4\">\n        {[0, 1, 2, 3].map((i) => (\n          <div\n            key={i}\n            className={`w-3.5 h-3.5 rounded-full border transition-all ${\n              pin.length > i\n                ? isUnlocked\n                  ? 'bg-emerald-500 border-emerald-400'\n                  : isError\n                  ? 'bg-rose-500 border-rose-400 scale-110'\n                  : 'bg-indigo-600 border-indigo-500'\n                : 'border-zinc-300 dark:border-white/20'\n            }`}\n          />\n        ))}\n      </div>\n\n      {/* Keypad */}\n      <div className=\"grid grid-cols-3 gap-2 w-full\">\n        {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((n) => (\n          <button\n            key={n}\n            onClick={() => pressDigit(n)}\n            className=\"h-9 rounded-xl bg-zinc-100 dark:bg-white/5 text-zinc-900 dark:text-white font-bold hover:bg-zinc-200 dark:hover:bg-white/10 active:scale-95 transition-all cursor-pointer\"\n          >\n            {n}\n          </button>\n        ))}\n        <button\n          onClick={clear}\n          className=\"h-9 rounded-xl text-[10px] text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors cursor-pointer\"\n        >\n          CLR\n        </button>\n        <button\n          onClick={() => pressDigit('0')}\n          className=\"h-9 rounded-xl bg-zinc-100 dark:bg-white/5 text-zinc-900 dark:text-white font-bold hover:bg-zinc-200 dark:hover:bg-white/10 active:scale-95 transition-all cursor-pointer\"\n        >\n          0\n        </button>\n        <button\n          onClick={deleteDigit}\n          className=\"h-9 rounded-xl text-[10px] text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors cursor-pointer\"\n        >\n          DEL\n        </button>\n      </div>\n\n      <span className=\"text-[9px] text-zinc-400 mt-3\">(Demo PIN: 7429)</span>\n    </div>\n  );\n};\n"
    }
  ]
}