{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "api-key-list",
  "type": "registry:ui",
  "title": "Api key list",
  "description": "React settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/badge.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/api-key-list.tsx",
      "type": "registry:ui",
      "target": "components/ui/api-key-list.tsx",
      "content": "\"use client\"\nimport { Button } from \"@/components/ui/button\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { cn } from \"@/lib/utils\"\n\ntype Key = { id?: string; name: string; preview?: string; hint?: string; created?: string }\n\nfunction ApiKeyList({\n  keys,\n  className,\n}: {\n  keys?: Key[]\n  className?: string\n}) {\n  const list = keys ?? [\n    { id: \"1\", name: \"Production\", preview: \"md_live_••••8f2a\", created: \"Aug 12\" },\n    { id: \"2\", name: \"Staging\", preview: \"md_test_••••91c0\", created: \"Sep 1\" },\n  ]\n  return (\n    <div data-slot=\"api-key-list\" className={cn(\"overflow-hidden rounded-2xl border border-border bg-surface shadow-highlight\", className)}>\n      <div className=\"flex items-center justify-between border-b border-border px-4 py-3\">\n        <h3 className=\"text-sm font-medium text-fg\">API keys</h3>\n        <Button size=\"sm\">Create key</Button>\n      </div>\n      <ul>\n        {list.map((k) => (\n          <li key={k.id ?? k.name} className=\"flex flex-wrap items-center justify-between gap-2 border-b border-border px-4 py-3 last:border-b-0\">\n            <div>\n              <p className=\"text-sm font-medium text-fg\">{k.name}</p>\n              <p className=\"font-mono text-xs text-fg-muted\">{k.preview ?? k.hint}</p>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              {k.created ? <Badge variant=\"outline\">{k.created}</Badge> : null}\n              <Button size=\"sm\" variant=\"outline\">Rotate</Button>\n            </div>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\nexport { ApiKeyList }\n"
    }
  ]
}