{
  "name": "key-value-paste-demo",
  "type": "registry:example",
  "registryDependencies": [
    "key-value"
  ],
  "files": [
    {
      "path": "examples/key-value-paste-demo.tsx",
      "type": "registry:example",
      "content": "import { ClipboardIcon } from \"lucide-react\";\n\nimport {\n  KeyValue,\n  KeyValueAdd,\n  KeyValueItem,\n  KeyValueKeyInput,\n  KeyValueList,\n  KeyValueRemove,\n  KeyValueValueInput,\n} from \"@/registry/bases/radix/ui/key-value\";\n\nexport default function KeyValuePasteDemo() {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-2 rounded-lg border bg-muted/50 p-4\">\n        <div className=\"flex items-center gap-2\">\n          <ClipboardIcon className=\"size-4\" />\n          <p className=\"text-sm font-medium\">Paste Support</p>\n        </div>\n        <p className=\"text-xs text-muted-foreground\">\n          Try pasting multiple lines in any of these formats:\n        </p>\n        <pre className=\"rounded bg-background p-2 text-xs\">\n          {`API_KEY=sk-1234567890\n            DATABASE_URL=postgresql://localhost\n            PORT=3000`}\n        </pre>\n      </div>\n      <KeyValue keyPlaceholder=\"KEY\" valuePlaceholder=\"value\">\n        <KeyValueList>\n          <KeyValueItem>\n            <KeyValueKeyInput className=\"font-mono\" />\n            <KeyValueValueInput className=\"font-mono\" />\n            <KeyValueRemove />\n          </KeyValueItem>\n        </KeyValueList>\n        <KeyValueAdd />\n      </KeyValue>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}