{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "secret-reveal",
  "type": "registry:ui",
  "title": "Secret reveal",
  "description": "Masked secret field for API keys with an eye toggle to reveal or hide the value and a copy button for the full key. Monospace, compact, built with Tailwind.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/copy-button.json",
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/secret-reveal.tsx",
      "type": "registry:ui",
      "target": "components/ui/secret-reveal.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\nimport { CopyButton } from \"@/components/ui/copy-button\"\n\nfunction SecretReveal({\n  value = \"md_live_••••••••9f2a\",\n  revealedValue = \"md_live_8k2m9f2a\",\n  className,\n}: {\n  value?: string\n  revealedValue?: string\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(false)\n  return (\n    <div data-slot=\"secret-reveal\" className={cn(\"flex items-center gap-2 rounded-lg border border-border bg-sunken px-2 py-1.5\", className)}>\n      <code className=\"flex-1 truncate font-mono text-xs text-fg\">{open ? revealedValue : value}</code>\n      <IconButton type=\"button\" size=\"icon-sm\" variant=\"ghost\" aria-label={open ? \"Hide secret\" : \"Reveal secret\"} onClick={() => setOpen((v) => !v)}>\n        {open ? <EyeOffIcon /> : <EyeIcon />}\n      </IconButton>\n      <CopyButton value={revealedValue} aria-label=\"Copy secret\" />\n    </div>\n  )\n}\nexport { SecretReveal }\n"
    }
  ]
}