{
  "name": "color-swatch-demo",
  "type": "registry:example",
  "registryDependencies": [
    "color-swatch"
  ],
  "files": [
    {
      "path": "examples/color-swatch-demo.tsx",
      "type": "registry:example",
      "content": "import { ColorSwatch } from \"@/registry/bases/base/ui/color-swatch\";\n\nexport default function ColorSwatchDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <ColorSwatch color=\"#3b82f6\" />\n        <span className=\"font-medium text-sm\">Primary Blue</span>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <ColorSwatch color=\"#ef4444\" size=\"sm\" />\n        <ColorSwatch color=\"#ef4444\" size=\"default\" />\n        <ColorSwatch color=\"#ef4444\" size=\"lg\" />\n        <span className=\"font-medium text-sm\">Different Sizes</span>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <ColorSwatch color=\"rgba(59, 130, 246, 0.5)\" />\n        <span className=\"font-medium text-sm\">Semi-transparent Blue</span>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <span className=\"font-medium text-sm\">Color Palette</span>\n        <div className=\"flex gap-2\">\n          <ColorSwatch color=\"#ef4444\" />\n          <ColorSwatch color=\"#f97316\" />\n          <ColorSwatch color=\"#eab308\" />\n          <ColorSwatch color=\"#22c55e\" />\n          <ColorSwatch color=\"#3b82f6\" />\n          <ColorSwatch color=\"#8b5cf6\" />\n          <ColorSwatch color=\"#ec4899\" />\n        </div>\n      </div>\n      <div className=\"flex items-center gap-3\">\n        <ColorSwatch color=\"#ef4444\" disabled />\n        <span className=\"font-medium text-sm\">Disabled</span>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}