{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "title": "Color Picker",
  "description": "Color picker with a saturation/hue area and hex input in a popover.",
  "dependencies": [
    "react-colorful@^5.6.1"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/input.json",
    "https://rdf.dev.360online.com/r/popover.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/color-picker/color-picker.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\nimport { Input } from '@/components/ui/input'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\n\ntype ColorPickerContextValue = {\n\tvalue: string\n\tsetValue: (value: string) => void\n\tonBlur?: () => void\n\tdisabled?: boolean\n}\n\nconst ColorPickerContext = React.createContext<ColorPickerContextValue>({\n\tvalue: '#000000',\n\tsetValue: () => {},\n\tdisabled: false,\n})\n\ntype ColorPickerProps = React.ComponentProps<typeof Popover> & {\n\tvalue?: string\n\tonValueChange?: (value: string) => void\n\tdefaultValue?: string\n\n\tonBlur?: () => void\n\n\tdisabled?: boolean\n}\n\nfunction ColorPicker({\n\topen,\n\n\tvalue: valueProp,\n\tonValueChange,\n\tdefaultValue,\n\n\tonBlur,\n\n\tdisabled,\n\n\t...props\n}: ColorPickerProps) {\n\tconst [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? '#000000')\n\tconst value = valueProp ?? uncontrolledValue\n\n\tconst setValue = React.useCallback(\n\t\t(next: string) => {\n\t\t\tif (valueProp === undefined) setUncontrolledValue(next)\n\t\t\tonValueChange?.(next)\n\t\t},\n\t\t[valueProp, onValueChange],\n\t)\n\n\tconst context = React.useMemo(() => ({ value, setValue, disabled, onBlur }), [value, setValue, disabled, onBlur])\n\n\treturn (\n\t\t<ColorPickerContext.Provider value={context}>\n\t\t\t<Popover open={disabled ? false : open} {...props} />\n\t\t</ColorPickerContext.Provider>\n\t)\n}\n\nfunction ColorPickerInput({\n\tdisabled: disabledProp,\n\tonChange,\n\tonBlur: onBlurProp,\n\t...props\n}: React.ComponentProps<typeof Input>) {\n\tconst { value, setValue, disabled, onBlur } = React.useContext(ColorPickerContext)\n\n\treturn (\n\t\t<Input\n\t\t\tdata-slot=\"color-picker-input\"\n\t\t\tvalue={value}\n\t\t\tdisabled={disabledProp ?? disabled}\n\t\t\tonChange={(event) => {\n\t\t\t\tonChange?.(event)\n\t\t\t\tif (!event.defaultPrevented) setValue(event.target.value)\n\t\t\t}}\n\t\t\tonBlur={(event) => {\n\t\t\t\tonBlurProp?.(event)\n\t\t\t\tif (!event.defaultPrevented) onBlur?.()\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction ColorPickerTrigger({\n\tclassName,\n\tdisabled: disabledProp,\n\tchildren,\n\tstyle,\n\t...props\n}: React.ComponentProps<typeof PopoverTrigger>) {\n\tconst { value, disabled } = React.useContext(ColorPickerContext)\n\n\treturn (\n\t\t<PopoverTrigger\n\t\t\tdata-slot=\"color-picker-trigger\"\n\t\t\tclassName={cn(\n\t\t\t\t'relative aspect-square size-10 shrink-0 rounded-lg border border-input bg-background bg-clip-padding transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ backgroundColor: value, ...style }}\n\t\t\tdisabled={disabledProp ?? disabled}\n\t\t\taria-disabled={disabledProp ?? disabled}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"sr-only\">Pick a color</span>\n\t\t\t{children}\n\t\t</PopoverTrigger>\n\t)\n}\n\nfunction ColorPickerContent({ className, children, ...props }: React.ComponentProps<typeof PopoverContent>) {\n\tconst { value, setValue } = React.useContext(ColorPickerContext)\n\n\treturn (\n\t\t<PopoverContent data-slot=\"color-picker-content\" className={cn('w-auto p-2', className)} {...props}>\n\t\t\t<HexColorPicker color={value} onChange={setValue} />\n\t\t\t{children}\n\t\t</PopoverContent>\n\t)\n}\n\nexport { ColorPicker, ColorPickerInput, ColorPickerTrigger, ColorPickerContent }\nexport type { ColorPickerProps }\n",
      "type": "registry:ui",
      "target": "components/ui/color-picker.tsx"
    }
  ],
  "type": "registry:ui"
}