{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-colorpicker",
  "type": "registry:ui",
  "title": "ColorPicker",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-colorswatch.json",
    "https://react-aria.adobe.com/registry/tailwind-colorarea.json",
    "https://react-aria.adobe.com/registry/tailwind-colorslider.json",
    "https://react-aria.adobe.com/registry/tailwind-colorfield.json",
    "https://react-aria.adobe.com/registry/tailwind-dialog.json",
    "https://react-aria.adobe.com/registry/tailwind-popover.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/ColorPicker.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {Button} from 'react-aria-components/Button';\nimport {\n  ColorPicker as AriaColorPicker,\n  type ColorPickerProps as AriaColorPickerProps\n} from 'react-aria-components/ColorPicker';\nimport {DialogTrigger} from 'react-aria-components/Dialog';\nimport {ColorSwatch} from '@/registry/react-aria/ui/ColorSwatch';\nimport {ColorArea} from '@/registry/react-aria/ui/ColorArea';\nimport {ColorSlider} from '@/registry/react-aria/ui/ColorSlider';\nimport {ColorField} from '@/registry/react-aria/ui/ColorField';\nimport {Dialog} from '@/registry/react-aria/ui/Dialog';\nimport {Popover} from '@/registry/react-aria/ui/Popover';\nimport {tv} from 'tailwind-variants';\nimport {focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nconst buttonStyles = tv({\n  extend: focusRing,\n  base: 'border-0 bg-transparent flex gap-2 items-center cursor-default rounded-xs font-sans text-sm text-neutral-800 dark:text-neutral-200 [-webkit-tap-highlight-color:transparent]'\n});\n\nexport interface ColorPickerProps extends Omit<AriaColorPickerProps, 'children'> {\n  label?: string;\n  children?: React.ReactNode;\n}\n\nexport function ColorPicker({label, children, ...props}: ColorPickerProps) {\n  return (\n    <AriaColorPicker {...props}>\n      <DialogTrigger>\n        <Button className={buttonStyles}>\n          <ColorSwatch />\n          <span>{label}</span>\n        </Button>\n        <Popover placement=\"bottom start\">\n          <Dialog className=\"flex flex-col gap-2\">\n            {children || (\n              <>\n                <ColorArea colorSpace=\"hsb\" xChannel=\"saturation\" yChannel=\"brightness\" />\n                <ColorSlider colorSpace=\"hsb\" channel=\"hue\" />\n                <ColorField label=\"Hex\" />\n              </>\n            )}\n          </Dialog>\n        </Popover>\n      </DialogTrigger>\n    </AriaColorPicker>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}