{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "title": "Color Picker",
  "author": "Orshot <https://orshot.com>",
  "description": "Color and gradient picker for React: solid colors plus linear, radial and conic gradients, OKLCH, an eyedropper and swatch groups, themed with your shadcn/ui tokens. Takes and returns plain CSS strings. Includes ColorPicker and ColorField (a swatch input that opens the picker in a popover).",
  "dependencies": [
    "@orshot/colorshot"
  ],
  "files": [
    {
      "path": "registry/colorshot/color-picker.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ColorField as ColorshotField,\n  ColorPicker as ColorshotPicker,\n  type ColorFieldProps,\n  type ColorPickerProps,\n} from \"@orshot/colorshot/react\";\nimport \"@orshot/colorshot/styles.css\";\n\n// Colorshot: color and gradient picker (solid, linear, radial and conic) themed with\n// your shadcn/ui tokens. It takes any CSS color or gradient string and gives one back.\n// Docs and every prop: https://orshot.com/open-source/colorshot\n\n// Colorshot variable -> your shadcn/ui token. Set inline, so they win over Colorshot's\n// defaults whatever order the stylesheets load in.\nconst TOKENS = {\n  \"--cs-bg\": \"--popover\",\n  \"--cs-fg\": \"--popover-foreground\",\n  \"--cs-muted\": \"--muted-foreground\",\n  \"--cs-border\": \"--border\",\n  \"--cs-surface\": \"--muted\",\n  \"--cs-surface-hover\": \"--accent\",\n  \"--cs-accent\": \"--ring\",\n};\n\n// Tailwind v4 themes hold full colors (oklch(...)); Tailwind v3 themes hold HSL channels (\"0 0% 100%\")\nconst themeStyle = (format: string) =>\n  Object.fromEntries(Object.entries(TOKENS).map(([cs, token]) => [cs, format.replace(\"%\", token)])) as React.CSSProperties;\nconst v4Style = themeStyle(\"var(%)\");\nconst v3Style = themeStyle(\"hsl(var(%))\");\n\nconst subscribe = (onChange: () => void) => {\n  const observer = new MutationObserver(onChange);\n  observer.observe(document.documentElement, { attributes: true, attributeFilter: [\"class\"] });\n  return () => observer.disconnect();\n};\n\n// shadcn/ui switches dark mode with a .dark class on <html>; follow it instead of the OS\nfunction useShadcnTheme(): \"light\" | \"dark\" | undefined {\n  return React.useSyncExternalStore(\n    subscribe,\n    () => (document.documentElement.classList.contains(\"dark\") ? \"dark\" : \"light\"),\n    () => undefined,\n  );\n}\n\nfunction useThemeStyle(): React.CSSProperties {\n  const v3 = React.useSyncExternalStore(\n    subscribe,\n    () => /^-?[\\d.]+(deg)?\\s/.test(getComputedStyle(document.documentElement).getPropertyValue(\"--popover\").trim()),\n    () => false,\n  );\n  return v3 ? v3Style : v4Style;\n}\n\nfunction ColorPicker({ style, theme, ...props }: ColorPickerProps) {\n  const appTheme = useShadcnTheme();\n  const themeVars = useThemeStyle();\n  return (\n    <ColorshotPicker\n      data-slot=\"color-picker\"\n      theme={theme ?? appTheme}\n      style={{ ...themeVars, ...style }}\n      {...props}\n    />\n  );\n}\n\nfunction ColorField({ style, pickerStyle, theme, ...props }: ColorFieldProps) {\n  const appTheme = useShadcnTheme();\n  const themeVars = useThemeStyle();\n  return (\n    <ColorshotField\n      theme={theme ?? appTheme}\n      style={{ ...themeVars, ...style }}\n      pickerStyle={{ ...themeVars, ...pickerStyle }}\n      {...props}\n    />\n  );\n}\n\nexport { ColorPicker, ColorField };\nexport type { ColorPickerProps, ColorFieldProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Colorshot docs and every prop: https://orshot.com/open-source/colorshot",
  "categories": [
    "color",
    "picker",
    "input",
    "gradient"
  ],
  "type": "registry:ui"
}