{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "color-picker-example",
  "title": "Color Picker",
  "description": "color-picker-example",
  "dependencies": [
    "@react-stately/color"
  ],
  "registryDependencies": [
    "https://intentui.com/r/button",
    "https://intentui.com/r/color-area",
    "https://intentui.com/r/color-field",
    "https://intentui.com/r/color-picker",
    "https://intentui.com/r/color-slider",
    "https://intentui.com/r/color-swatch",
    "https://intentui.com/r/color-thumb",
    "https://intentui.com/r/input",
    "https://intentui.com/r/popover"
  ],
  "files": [
    {
      "path": "src/components/examples/colors/color-picker/color-picker-example.tsx",
      "content": "'use client'\n\nimport { parseColor } from '@react-stately/color'\nimport { useState } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { ColorArea } from '@/components/ui/color-area'\nimport { ColorField } from '@/components/ui/color-field'\nimport { ColorPicker } from '@/components/ui/color-picker'\nimport { ColorSlider, ColorSliderTrack } from '@/components/ui/color-slider'\nimport { ColorSwatch } from '@/components/ui/color-swatch'\nimport { ColorThumb } from '@/components/ui/color-thumb'\nimport { Input } from '@/components/ui/input'\nimport { Popover, PopoverBody, PopoverContent } from '@/components/ui/popover'\n\nexport default function ColorPickerDemo() {\n  const [color, setColor] = useState(parseColor('#0d6efd'))\n  return (\n    <ColorPicker value={color} onChange={setColor} defaultValue=\"rgb(120,140,200)\">\n      <Popover>\n        <Button intent=\"plain\" data-slot=\"control\">\n          <ColorSwatch />\n          Select color\n        </Button>\n        <PopoverContent className=\"[--gutter:--spacing(1)]\">\n          <PopoverBody>\n            <div className=\"space-y-(--gutter)\">\n              <ColorArea\n                colorSpace=\"rgb\"\n                defaultValue=\"rgb(120,140,200)\"\n                xChannel=\"red\"\n                yChannel=\"green\"\n                xName=\"red\"\n                yName=\"green\"\n              />\n              <ColorSlider colorSpace=\"hsb\" channel=\"hue\">\n                <ColorSliderTrack>\n                  <ColorThumb />\n                </ColorSliderTrack>\n              </ColorSlider>\n              <ColorField aria-label=\"Color\">\n                <Input />\n              </ColorField>\n            </div>\n          </PopoverBody>\n        </PopoverContent>\n      </Popover>\n    </ColorPicker>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/color-picker-example/page.tsx"
    }
  ],
  "type": "registry:page"
}