{
  "name": "color-swatch-transparency-demo",
  "type": "registry:example",
  "registryDependencies": [
    "color-swatch"
  ],
  "files": [
    {
      "path": "examples/color-swatch-transparency-demo.tsx",
      "type": "registry:example",
      "content": "import { ColorSwatch } from \"@/registry/bases/base/ui/color-swatch\";\n\nexport default function ColorSwatchTransparencyDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"font-medium text-sm\">Alpha Transparency</span>\n        <div className=\"flex gap-2\">\n          <ColorSwatch color=\"rgba(59, 130, 246, 1)\" />\n          <ColorSwatch color=\"rgba(59, 130, 246, 0.8)\" />\n          <ColorSwatch color=\"rgba(59, 130, 246, 0.6)\" />\n          <ColorSwatch color=\"rgba(59, 130, 246, 0.4)\" />\n          <ColorSwatch color=\"rgba(59, 130, 246, 0.2)\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"font-medium text-sm\">HSLA Colors</span>\n        <div className=\"flex gap-2\">\n          <ColorSwatch color=\"hsla(220, 91%, 60%, 1)\" />\n          <ColorSwatch color=\"hsla(220, 91%, 60%, 0.75)\" />\n          <ColorSwatch color=\"hsla(220, 91%, 60%, 0.5)\" />\n          <ColorSwatch color=\"hsla(220, 91%, 60%, 0.25)\" />\n          <ColorSwatch color=\"hsla(220, 91%, 60%, 0.1)\" />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"font-medium text-sm\">\n          Without Transparency Pattern\n        </span>\n        <div className=\"flex gap-2\">\n          <ColorSwatch color=\"rgba(239, 68, 68, 0.8)\" withoutTransparency />\n          <ColorSwatch color=\"rgba(34, 197, 94, 0.6)\" withoutTransparency />\n          <ColorSwatch color=\"rgba(139, 92, 246, 0.4)\" withoutTransparency />\n        </div>\n      </div>\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"font-medium text-sm\">\n          With Transparency Pattern (Default)\n        </span>\n        <div className=\"flex gap-2\">\n          <ColorSwatch color=\"rgba(239, 68, 68, 0.8)\" />\n          <ColorSwatch color=\"rgba(34, 197, 94, 0.6)\" />\n          <ColorSwatch color=\"rgba(139, 92, 246, 0.4)\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}