{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-input-variant-demo",
  "type": "registry:component",
  "title": "Color Input Variant Demo",
  "description": "A demo of the color input variant",
  "registryDependencies": [
    "https://ui.ednesdayw.com/r/color-input.json"
  ],
  "files": [
    {
      "path": "src/registry/example/color-input/variant.tsx",
      "content": "import { ColorInput } from \"@/components/ui/color-input\";\nimport { useState } from \"react\";\n\nexport const inputVariants = [\n  \"default\",\n  \"faded\",\n  \"bordered\",\n  \"underline\",\n] as const;\n\nexport const ColorInputVariantExample = () => {\n  const [hex, setHex] = useState(\"#4ec4b8\");\n  const [hexAlpha, setHexAlpha] = useState(\"#4ec4b880\");\n  return (\n    <div className=\"flex flex-col gap-4 w-full max-w-72\">\n      {inputVariants.map((variant, idx) => (\n        <ColorInput\n          key={variant}\n          className=\"rounded-xl\"\n          type={idx % 2 === 0 ? \"hex\" : \"hex-alpha\"}\n          variant={variant}\n          value={idx % 2 === 0 ? hex : hexAlpha}\n          onChange={(value) =>\n            idx % 2 === 0 ? setHex(value) : setHexAlpha(value)\n          }\n        />\n      ))}\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/color-input-variant-demo.tsx"
    }
  ]
}