{
  "name": "color-picker-controlled-demo",
  "type": "registry:example",
  "registryDependencies": [
    "color-picker",
    "button"
  ],
  "files": [
    {
      "path": "examples/color-picker-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button } from \"@/registry/bases/base/ui/button\";\nimport {\n  ColorPicker,\n  ColorPickerAlphaSlider,\n  ColorPickerArea,\n  ColorPickerContent,\n  ColorPickerEyeDropper,\n  ColorPickerFormatSelect,\n  ColorPickerHueSlider,\n  ColorPickerInput,\n  ColorPickerSwatch,\n  ColorPickerTrigger,\n} from \"@/registry/bases/base/ui/color-picker\";\n\nconst presetColors = [\n  \"#ef4444\", // red\n  \"#f97316\", // orange\n  \"#eab308\", // yellow\n  \"#22c55e\", // green\n  \"#3b82f6\", // blue\n  \"#8b5cf6\", // violet\n  \"#ec4899\", // pink\n  \"#64748b\", // gray\n];\n\nexport default function ColorPickerControlledDemo() {\n  const [color, setColor] = React.useState(\"#3b82f6\");\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  const onReset = React.useCallback(() => {\n    setColor(\"#000000\");\n    setIsOpen(false);\n  }, []);\n\n  const onPresetSelect = React.useCallback((presetColor: string) => {\n    setColor(presetColor);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex items-center gap-3\">\n        <ColorPicker\n          value={color}\n          onValueChange={setColor}\n          open={isOpen}\n          onOpenChange={setIsOpen}\n          defaultFormat=\"hex\"\n        >\n          <ColorPickerTrigger\n            render={\n              <Button variant=\"outline\" className=\"flex items-center gap-2\">\n                <ColorPickerSwatch className=\"size-4\" />\n                Pick Color\n              </Button>\n            }\n          />\n          <ColorPickerContent>\n            <ColorPickerArea />\n            <div className=\"flex items-center gap-2\">\n              <ColorPickerEyeDropper />\n              <div className=\"flex flex-1 flex-col gap-2\">\n                <ColorPickerHueSlider />\n                <ColorPickerAlphaSlider />\n              </div>\n            </div>\n            <div className=\"flex items-center gap-2\">\n              <ColorPickerFormatSelect />\n              <ColorPickerInput />\n            </div>\n          </ColorPickerContent>\n        </ColorPicker>\n\n        <Button variant=\"outline\" onClick={onReset}>\n          Reset\n        </Button>\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <h4 className=\"font-medium text-sm\">Preset Colors</h4>\n        <div className=\"flex flex-wrap gap-2\">\n          {presetColors.map((presetColor) => (\n            <button\n              key={presetColor}\n              type=\"button\"\n              className=\"size-8 rounded border-2 border-transparent hover:border-border focus:border-ring focus:outline-none\"\n              style={{ backgroundColor: presetColor }}\n              onClick={() => onPresetSelect(presetColor)}\n              aria-label={`Select color ${presetColor}`}\n            />\n          ))}\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div>\n          <span className=\"font-medium\">Current color:</span>\n          <code className=\"ml-2 font-mono\">{color}</code>\n        </div>\n        <div>\n          <span className=\"font-medium\">Picker state:</span>\n          <span className=\"ml-2\">{isOpen ? \"Open\" : \"Closed\"}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}