{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/color-picker.tsx",
      "content": "'use client';\n\nimport { Button } from '@/components/website/ui/button';\nimport { Input } from '@/components/website/ui/input';\nimport { Label } from '@/components/website/ui/label';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/website/ui/popover';\nimport { cn } from '@/lib/utils';\nimport { Copy, Pipette } from 'lucide-react';\nimport { HexColorPicker } from 'react-colorful';\nimport { toast } from 'sonner';\n\ninterface ColorPickerProps {\n  color: string;\n  onChange: (color: string) => void;\n  label: string;\n  isEyeDroppper?: boolean;\n  className?: string;\n}\n\nexport function ColorPicker({\n  color,\n  onChange,\n  label,\n  isEyeDroppper = false,\n  className,\n}: ColorPickerProps) {\n  function copyToClipboard() {\n    navigator.clipboard.writeText(color);\n    toast('Copied!', {\n      description: `${color} copied to clipboard`,\n      duration: 2000,\n    });\n  }\n\n  async function useEyeDropper() {\n    if (!('EyeDropper' in window)) {\n      toast.error('Not supported', {\n        description: 'Eyedropper is not supported in your browser',\n        duration: 3000,\n      });\n      return;\n    }\n\n    try {\n      // @ts-expect-error - EyeDropper is not in the TypeScript DOM types yet\n      const eyeDropper = new window.EyeDropper();\n      const result = await eyeDropper.open();\n      onChange(result.sRGBHex);\n    } catch (e) {\n      console.error('Error using eyedropper', e);\n    }\n  }\n\n  return (\n    <div className={cn('flex items-center gap-2', className)}>\n      <Label className='w-24'>{label}</Label>\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button\n            variant='outline'\n            className='h-8 w-12 border-2 p-0'\n            style={{ backgroundColor: color }}\n          >\n            <span className='sr-only'>Pick a color</span>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className='w-full p-3 bg-primary-foreground'>\n          <HexColorPicker color={color} onChange={onChange} className='w-full!' />\n          <div className='mt-2 flex w-full gap-2'>\n            <Input\n              value={color}\n              onChange={(e) => onChange(e.target.value)}\n              className='h-10 w-full'\n            />\n            <Button\n              variant='outline'\n              size='icon'\n              onClick={copyToClipboard}\n              className='h-10 w-12 shrink border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-200'\n              style={{ borderRadius: '6px' }}\n            >\n              <Copy className='h-4 w-4' />\n              <span className='sr-only'>Copy color</span>\n            </Button>\n          </div>\n\n          {isEyeDroppper && (\n            <div className='mt-2 flex gap-2'>\n              <Button\n                variant='outline'\n                size='icon'\n                onClick={useEyeDropper}\n                className='h-10 w-10 border-neutral-300 bg-neutral-100 text-neutral-900 hover:bg-neutral-200'\n                style={{ borderRadius: '6px' }}\n              >\n                <Pipette className='h-4 w-4' />\n                <span className='sr-only'>Pick color</span>\n              </Button>\n\n              <div\n                className='h-10 flex-1'\n                style={{ backgroundColor: color, borderRadius: '6px' }}\n              />\n            </div>\n          )}\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}