{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "secret-input",
  "type": "registry:ui",
  "title": "SecretInput",
  "description": "Masked credential display input with reveal toggle and one-click copy feedback.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/secret-input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SecretInputProps {\n  value: string;\n  label?: string;\n  helperText?: string;\n  maskByDefault?: boolean;\n  allowCopy?: boolean;\n  onCopy?: () => void;\n  className?: string;\n  id?: string;\n}\n\nexport function SecretInput({\n  value,\n  label,\n  helperText,\n  maskByDefault = true,\n  allowCopy = true,\n  onCopy,\n  className,\n  id,\n}: SecretInputProps) {\n  const [isMasked, setIsMasked] = React.useState(maskByDefault);\n  const [copied, setCopied] = React.useState(false);\n\n  const inputId = id || (label ? `secret-${label.toLowerCase().replace(/\\s+/g, \"-\")}` : undefined);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5 w-full\", className)}>\n      {label && (\n        <label htmlFor={inputId} className=\"text-xs font-medium text-foreground\">\n          {label}\n        </label>\n      )}\n\n      <div className=\"relative flex items-center rounded-md border border-input bg-background shadow-xs focus-within:ring-1 focus-within:ring-ring\">\n        <input\n          id={inputId}\n          type={isMasked ? \"password\" : \"text\"}\n          readOnly\n          value={value}\n          className=\"flex h-9 w-full bg-transparent px-3 py-1 font-mono text-sm outline-hidden\"\n          spellCheck=\"false\"\n        />\n\n        <div className=\"flex items-center gap-1 pr-2\">\n          <button\n            type=\"button\"\n            className=\"inline-flex h-7 w-7 items-center justify-center rounded-xs text-muted-foreground hover:text-foreground hover:bg-muted\"\n            onClick={() => setIsMasked(!isMasked)}\n            aria-label={isMasked ? \"Reveal secret\" : \"Hide secret\"}\n          >\n            {isMasked ? \"👁\" : \"🔒\"}\n          </button>\n\n          {allowCopy && (\n            <button\n              type=\"button\"\n              className={cn(\n                \"inline-flex h-7 items-center gap-1 rounded-xs px-2 text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\",\n                copied && \"text-emerald-600 dark:text-emerald-400 font-semibold\"\n              )}\n              onClick={handleCopy}\n            >\n              {copied ? \"✓ Copied\" : \"Copy\"}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {helperText && (\n        <p className=\"text-xs text-muted-foreground mt-0.5\">{helperText}</p>\n      )}\n    </div>\n  );\n}\n\nexport const CopyInput = SecretInput;\n",
      "type": "registry:ui"
    }
  ]
}