{
  "name": "color-picker-inline-demo",
  "type": "registry:example",
  "registryDependencies": [
    "color-picker"
  ],
  "files": [
    {
      "path": "examples/color-picker-inline-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ColorPicker,\n  ColorPickerAlphaSlider,\n  ColorPickerArea,\n  ColorPickerEyeDropper,\n  ColorPickerFormatSelect,\n  ColorPickerHueSlider,\n  ColorPickerInput,\n  ColorPickerSwatch,\n} from \"@/registry/bases/base/ui/color-picker\";\n\nexport default function ColorPickerInlineDemo() {\n  const [color, setColor] = React.useState(\"#f59e0b\");\n\n  return (\n    <ColorPicker\n      value={color}\n      onValueChange={setColor}\n      inline\n      defaultFormat=\"hex\"\n    >\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-3\">\n          <ColorPickerSwatch className=\"size-8\" />\n          <span className=\"font-medium text-sm\">Selected Color</span>\n        </div>\n        <div className=\"flex flex-col gap-4 rounded-lg border p-4\">\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        </div>\n      </div>\n    </ColorPicker>\n  );\n}\n",
      "target": ""
    }
  ]
}