{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "create-api-key",
  "type": "registry:ui",
  "title": "Create api key",
  "description": "Inline form to name and create an API key, with a labelled input and a Create key button that passes the name to your handler. Pairs with the key list.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "https://ui.minidev.pro/r/form-field.json",
    "https://ui.minidev.pro/r/input.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/create-api-key.tsx",
      "type": "registry:ui",
      "target": "components/ui/create-api-key.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { FormField } from \"@/components/ui/form-field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nfunction CreateApiKey({ className, onCreate }: { className?: string; onCreate?: (name: string) => void }) {\n  const [name, setName] = React.useState(\"\")\n  return (\n    <div data-slot=\"create-api-key\" className={cn(\"flex flex-wrap items-end gap-2\", className)}>\n      <FormField id=\"key-name\" label=\"Key name\" className=\"min-w-56 flex-1\">\n        <Input id=\"key-name\" value={name} onChange={(e) => setName(e.target.value)} placeholder=\"Production\" />\n      </FormField>\n      <Button onClick={() => onCreate?.(name)}>Create key</Button>\n    </div>\n  )\n}\nexport { CreateApiKey }\n"
    }
  ]
}