{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "type": "registry:ui",
  "title": "Color Picker",
  "description": "A color picker component",
  "dependencies": [
    "react-colorful"
  ],
  "registryDependencies": [
    "popover",
    "https://ui.ednesdayw.com/r/button.json",
    "https://ui.ednesdayw.com/r/colors.json"
  ],
  "files": [
    {
      "path": "src/registry/ui/color-picker.tsx",
      "content": "\"use client\";\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { sanitizeHex } from \"@/lib/colors\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport type * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport { HexAlphaColorPicker, HexColorPicker } from \"react-colorful\";\n\ninterface ColorPickerProps\n  extends Omit<\n    React.ComponentProps<typeof PopoverPrimitive.Content>,\n    \"value\" | \"onChange\"\n  > {\n  disabled?: boolean;\n  type?: \"hex\" | \"hex-alpha\";\n  value: string;\n  onChange: (value: string) => void;\n  onBlur?: () => void;\n}\n\nconst ColorPicker = ({\n  disabled,\n  className,\n  value = \"#4ec4b8\",\n  type = \"hex\",\n  onChange,\n  onBlur,\n  ...props\n}: ColorPickerProps) => {\n  const parsedValue = useMemo(() => sanitizeHex(value), [value]);\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild disabled={disabled} onBlur={onBlur}>\n        <Button\n          type=\"button\"\n          className={cn(\"size-8\", className)}\n          style={{\n            backgroundColor: parsedValue,\n            backgroundImage: !parsedValue\n              ? `url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".15\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')`\n              : undefined,\n          }}\n          size=\"icon\"\n          variant=\"ghost\"\n          disabled={disabled}\n        />\n      </PopoverTrigger>\n      <PopoverContent\n        {...props}\n        className=\"w-fit p-0 bg-transparent border-none shadow-none\"\n      >\n        {type === \"hex\" ? (\n          <HexColorPicker\n            color={parsedValue ?? \"#000000\"}\n            onChange={onChange}\n          />\n        ) : (\n          <HexAlphaColorPicker\n            color={parsedValue ?? \"#000000\"}\n            onChange={onChange}\n          />\n        )}\n      </PopoverContent>\n    </Popover>\n  );\n};\n\nexport { ColorPicker, type ColorPickerProps };\n",
      "type": "registry:ui",
      "target": "components/wed/color-picker.tsx"
    }
  ]
}