{
  "name": "color-swatch-sizes-demo",
  "type": "registry:example",
  "registryDependencies": [
    "color-swatch"
  ],
  "files": [
    {
      "path": "examples/color-swatch-sizes-demo.tsx",
      "type": "registry:example",
      "content": "import { ColorSwatch } from \"@/registry/bases/radix/ui/color-swatch\";\n\nconst colors = [\n  \"#ef4444\", // red\n  \"#f97316\", // orange\n  \"#eab308\", // yellow\n  \"#22c55e\", // green\n  \"#3b82f6\", // blue\n];\n\nexport default function ColorSwatchSizesDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm font-medium\">Small (sm)</span>\n        <div className=\"flex gap-2\">\n          {colors.map((color, index) => (\n            <ColorSwatch key={index} color={color} size=\"sm\" />\n          ))}\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm font-medium\">Default</span>\n        <div className=\"flex gap-2\">\n          {colors.map((color, index) => (\n            <ColorSwatch key={index} color={color} size=\"default\" />\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-sm font-medium\">Large (lg)</span>\n        <div className=\"flex gap-2\">\n          {colors.map((color, index) => (\n            <ColorSwatch key={index} color={color} size=\"lg\" />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}