{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker-demo",
  "type": "registry:component",
  "registryDependencies": [
    "color-picker"
  ],
  "files": [
    {
      "path": "registry/default/example/color-picker-demo.tsx",
      "content": "\"use client\"\n\nimport React, { useCallback, useState } from \"react\"\nimport { Check, Copy, Lock, LockOpen, Palette, RefreshCw } from \"lucide-react\"\nimport { motion } from \"motion/react\"\nimport { Poline, positionFunctions } from \"poline\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nimport ColorPicker from \"../ui/color-picker\"\n\ntype ColorScheme = {\n  [key: string]: string\n}\n\nexport default function ColorPickerDemo() {\n  const [colorScheme, setColorScheme] = useState<ColorScheme>({\n    background: \"0 0% 100%\",\n    foreground: \"240 10% 3.9%\",\n    card: \"0 0% 100%\",\n    \"card-foreground\": \"240 10% 3.9%\",\n    popover: \"0 0% 100%\",\n    \"popover-foreground\": \"240 10% 3.9%\",\n    primary: \"240 5.9% 10%\",\n    \"primary-foreground\": \"0 0% 98%\",\n    secondary: \"240 4.8% 95.9%\",\n    \"secondary-foreground\": \"240 5.9% 10%\",\n    muted: \"240 4.8% 95.9%\",\n    \"muted-foreground\": \"240 3.8% 46.1%\",\n    accent: \"240 4.8% 95.9%\",\n    \"accent-foreground\": \"240 5.9% 10%\",\n    destructive: \"0 84.2% 60.2%\",\n    \"destructive-foreground\": \"0 0% 98%\",\n    border: \"240 5.9% 90%\",\n    input: \"240 5.9% 90%\",\n    ring: \"240 5.9% 10%\",\n  })\n  const [lockedColor, setLockedColor] = useState<string | null>(null)\n  const [copied, setCopied] = useState(false)\n\n  const generateHarmoniousColors = useCallback(() => {\n    let anchorColors: [number, number, number][] = []\n\n    if (lockedColor) {\n      const [h, s, l] = colorScheme[lockedColor].split(\" \").map(parseFloat)\n      anchorColors.push([h, s / 100, l / 100])\n    }\n\n    while (anchorColors.length < 3) {\n      anchorColors.push([Math.random() * 360, 0.7, 0.5])\n    }\n\n    const poline = new Poline({\n      numPoints: 20,\n      anchorColors,\n      positionFunctionX: positionFunctions.sinusoidalPosition,\n      positionFunctionY: positionFunctions.quadraticPosition,\n      positionFunctionZ: positionFunctions.linearPosition,\n    })\n\n    const newColorScheme = { ...colorScheme }\n    const colors = poline.colorsCSS\n\n    Object.keys(newColorScheme).forEach((key, index) => {\n      if (key !== lockedColor) {\n        const color = colors[index % colors.length]\n        const [h, s, l] = color.match(/\\d+(\\.\\d+)?/g)?.map(Number) || [0, 0, 0]\n\n        let adjustedLightness = l\n        if (key.includes(\"foreground\")) {\n          adjustedLightness = Math.min(l - 30, 20)\n        } else if (key === \"background\") {\n          adjustedLightness = Math.max(l + 30, 90)\n        } else if (key === \"border\" || key === \"input\") {\n          adjustedLightness = Math.min(Math.max(l, 70), 90)\n        }\n\n        newColorScheme[key] = `${h.toFixed(1)} ${s.toFixed(\n          1\n        )}% ${adjustedLightness.toFixed(1)}%`\n      }\n    })\n\n    setColorScheme(newColorScheme)\n  }, [colorScheme, lockedColor])\n\n  const resetColors = useCallback(() => {\n    setColorScheme({\n      background: \"0 0% 100%\",\n      foreground: \"240 10% 3.9%\",\n      card: \"0 0% 100%\",\n      \"card-foreground\": \"240 10% 3.9%\",\n      popover: \"0 0% 100%\",\n      \"popover-foreground\": \"240 10% 3.9%\",\n      primary: \"240 5.9% 10%\",\n      \"primary-foreground\": \"0 0% 98%\",\n      secondary: \"240 4.8% 95.9%\",\n      \"secondary-foreground\": \"240 5.9% 10%\",\n      muted: \"240 4.8% 95.9%\",\n      \"muted-foreground\": \"240 3.8% 46.1%\",\n      accent: \"240 4.8% 95.9%\",\n      \"accent-foreground\": \"240 5.9% 10%\",\n      destructive: \"0 84.2% 60.2%\",\n      \"destructive-foreground\": \"0 0% 98%\",\n      border: \"240 5.9% 90%\",\n      input: \"240 5.9% 90%\",\n      ring: \"240 5.9% 10%\",\n    })\n    setLockedColor(null)\n  }, [])\n\n  const copyColorScheme = useCallback(() => {\n    const cssVariables = Object.entries(colorScheme)\n      .map(([key, value]) => `--${key}: ${value};`)\n      .join(\"\\n    \")\n\n    const fullCss = `@layer base {\n  :root {\n    ${cssVariables}\n  }\n}`\n\n    navigator.clipboard.writeText(fullCss)\n    setCopied(true)\n    setTimeout(() => setCopied(false), 2000)\n  }, [colorScheme])\n\n  const getContrastColor = useCallback((color: string) => {\n    const [, , lightness] = color.split(\" \").map(parseFloat)\n    return lightness > 50 ? \"0 0% 0%\" : \"0 0% 100%\"\n  }, [])\n\n  const toggleLock = useCallback((key: string) => {\n    setLockedColor((prev) => (prev === key ? null : key))\n  }, [])\n\n  return (\n    <div className=\"mx-auto w-full max-w-4xl\">\n      <CardContent className=\"space-y-6 p-6\">\n        <div className=\"grid gap-6 md:grid-cols-1\">\n          <div className=\"space-y-4\">\n            <div className=\"flex flex-col gap-4 md:flex-row md:justify-between\">\n              <Button\n                variant=\"outline\"\n                onClick={generateHarmoniousColors}\n                className=\"text-sm\"\n              >\n                Generate Harmonious Colors\n              </Button>\n              <Button\n                variant=\"outline\"\n                onClick={resetColors}\n                className=\"text-sm\"\n              >\n                <RefreshCw className=\"mr-2 h-4 w-4\" />\n                Reset Colors\n              </Button>\n            </div>\n            <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3\">\n              {Object.entries(colorScheme).map(([key, value]) => (\n                <div key={key} className=\"relative\">\n                  <div className=\"flex items-center justify-between\">\n                    <label className=\"text-muted-foreground mb-2 block text-sm font-medium\">\n                      {key}\n                    </label>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      className=\"ml-2\"\n                      onClick={() => toggleLock(key)}\n                    >\n                      {lockedColor === key ? (\n                        <Lock className=\"h-4 w-4\" />\n                      ) : (\n                        <LockOpen className=\"h-4 w-4\" />\n                      )}\n                    </Button>\n                  </div>\n                  <div className=\"flex items-center\">\n                    <ColorPicker\n                      color={`hsl(${value})`}\n                      onChange={(newColor) => {\n                        const [h, s, l] = newColor\n                          .match(/\\d+(\\.\\d+)?/g)\n                          ?.map(Number) || [0, 0, 0]\n                        setColorScheme({\n                          ...colorScheme,\n                          [key]: `${h.toFixed(1)} ${s.toFixed(1)}% ${l.toFixed(\n                            1\n                          )}%`,\n                        })\n                      }}\n                    />\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n          <motion.div\n            className=\"h-full min-h-[24rem] w-full overflow-hidden rounded-lg p-6 shadow-lg transition-colors duration-300 ease-in-out\"\n            style={{\n              backgroundColor: `hsl(${colorScheme.background})`,\n              color: `hsl(${colorScheme.foreground})`,\n              borderColor: `hsl(${colorScheme.border})`,\n              borderWidth: 2,\n              borderStyle: \"solid\",\n            }}\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.5 }}\n          >\n            <h3 className=\"mb-4 text-xl font-semibold\">Color Preview</h3>\n            <p className=\"mb-4 text-sm\">\n              Experience your color palette in action. This preview showcases\n              your selected colors.\n            </p>\n            <div className=\"space-y-2\">\n              {Object.entries(colorScheme).map(([key, value]) => (\n                <div\n                  key={key}\n                  className=\"flex flex-col justify-between gap-4 md:flex-row md:items-center\"\n                >\n                  <span>{key}</span>\n                  <TooltipProvider>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <Button\n                          variant=\"outline\"\n                          size=\"sm\"\n                          className=\"font-mono\"\n                          onClick={() => {\n                            navigator.clipboard.writeText(`--${key}: ${value};`)\n                            setCopied(true)\n                            setTimeout(() => setCopied(false), 2000)\n                          }}\n                          style={{\n                            backgroundColor: `hsl(${value})`,\n                            color: `hsl(${getContrastColor(value)})`,\n                            borderColor: `hsl(${colorScheme.border})`,\n                          }}\n                        >\n                          {value}\n                          {copied ? (\n                            <Check className=\"ml-2 h-4 w-4\" />\n                          ) : (\n                            <Copy className=\"ml-2 h-4 w-4\" />\n                          )}\n                        </Button>\n                      </TooltipTrigger>\n                      <TooltipContent>\n                        <p>Click to copy</p>\n                      </TooltipContent>\n                    </Tooltip>\n                  </TooltipProvider>\n                </div>\n              ))}\n            </div>\n          </motion.div>\n          <Button onClick={copyColorScheme} className=\"w-full\">\n            Copy Full Color Scheme\n          </Button>\n        </div>\n      </CardContent>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}