{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "color-picker",
  "type": "registry:block",
  "title": "Color picker",
  "description": "Color picker",
  "files": [
    {
      "path": "components/usages/colorpickerusage.tsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\n\nimport { CardContent } from \"@/registry/open-source/cards\";\nimport ColorPicker from \"@/registry/open-source/color-picker\";\nimport { motion } from \"motion/react\";\nimport { Poline, positionFunctions } from \"poline\";\n\nimport { Button } from \"../ui/button\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"../ui/tooltip\";\n\nexport default function Usage() {\n\tconst [colorScheme, setColorScheme] = useState<any>({\n\t\tbackground: \"0 0% 100%\",\n\t\tforeground: \"240 10% 3.9%\",\n\t\tcard: \"0 0% 100%\",\n\t\t\"card-foreground\": \"240 10% 3.9%\",\n\t\tpopover: \"0 0% 100%\",\n\t\t\"popover-foreground\": \"240 10% 3.9%\",\n\t\tprimary: \"240 5.9% 10%\",\n\t\t\"primary-foreground\": \"0 0% 98%\",\n\t\tsecondary: \"240 4.8% 95.9%\",\n\t\t\"secondary-foreground\": \"240 5.9% 10%\",\n\t\tmuted: \"240 4.8% 95.9%\",\n\t\t\"muted-foreground\": \"240 3.8% 46.1%\",\n\t\taccent: \"240 4.8% 95.9%\",\n\t\t\"accent-foreground\": \"240 5.9% 10%\",\n\t\tdestructive: \"0 84.2% 60.2%\",\n\t\t\"destructive-foreground\": \"0 0% 98%\",\n\t\tborder: \"240 5.9% 90%\",\n\t\tinput: \"240 5.9% 90%\",\n\t\tring: \"240 5.9% 10%\",\n\t});\n\tconst [lockedColor, setLockedColor] = useState<string | null>(null);\n\tconst [copied, setCopied] = useState(false);\n\tconst [value, setValue] = useState(100);\n\n\tconst generateHarmoniousColors = useCallback(() => {\n\t\tlet anchorColors: [number, number, number][] = [];\n\n\t\tif (lockedColor) {\n\t\t\tconst [h, s, l] = colorScheme[lockedColor].split(\" \").map(parseFloat);\n\t\t\tanchorColors.push([h, s / 100, l / 100]);\n\t\t}\n\n\t\twhile (anchorColors.length < 3) {\n\t\t\tanchorColors.push([Math.random() * 360, 0.7, 0.5]);\n\t\t}\n\n\t\tconst poline = new Poline({\n\t\t\tnumPoints: 20,\n\t\t\tanchorColors,\n\t\t\tpositionFunctionX: positionFunctions.sinusoidalPosition,\n\t\t\tpositionFunctionY: positionFunctions.quadraticPosition,\n\t\t\tpositionFunctionZ: positionFunctions.linearPosition,\n\t\t});\n\n\t\tconst newColorScheme = { ...colorScheme };\n\t\tconst colors = poline.colorsCSS;\n\n\t\tObject.keys(newColorScheme).forEach((key, index) => {\n\t\t\tif (key !== lockedColor) {\n\t\t\t\tconst color = colors[index % colors.length];\n\t\t\t\tconst [h, s, l] = color.match(/\\d+(\\.\\d+)?/g)?.map(Number) || [\n\t\t\t\t\t0, 0, 0,\n\t\t\t\t];\n\n\t\t\t\tlet adjustedLightness = l;\n\t\t\t\tif (key.includes(\"foreground\")) {\n\t\t\t\t\tadjustedLightness = Math.min(l - 30, 20);\n\t\t\t\t} else if (key === \"background\") {\n\t\t\t\t\tadjustedLightness = Math.max(l + 30, 90);\n\t\t\t\t} else if (key === \"border\" || key === \"input\") {\n\t\t\t\t\tadjustedLightness = Math.min(Math.max(l, 70), 90);\n\t\t\t\t}\n\n\t\t\t\tnewColorScheme[key] = `${h.toFixed(1)} ${s.toFixed(\n\t\t\t\t\t1\n\t\t\t\t)}% ${adjustedLightness.toFixed(1)}%`;\n\t\t\t}\n\t\t});\n\n\t\tsetColorScheme(newColorScheme);\n\t}, [colorScheme, lockedColor]);\n\n\tconst resetColors = useCallback(() => {\n\t\tsetColorScheme({\n\t\t\tbackground: \"0 0% 100%\",\n\t\t\tforeground: \"240 10% 3.9%\",\n\t\t\tcard: \"0 0% 100%\",\n\t\t\t\"card-foreground\": \"240 10% 3.9%\",\n\t\t\tpopover: \"0 0% 100%\",\n\t\t\t\"popover-foreground\": \"240 10% 3.9%\",\n\t\t\tprimary: \"240 5.9% 10%\",\n\t\t\t\"primary-foreground\": \"0 0% 98%\",\n\t\t\tsecondary: \"240 4.8% 95.9%\",\n\t\t\t\"secondary-foreground\": \"240 5.9% 10%\",\n\t\t\tmuted: \"240 4.8% 95.9%\",\n\t\t\t\"muted-foreground\": \"240 3.8% 46.1%\",\n\t\t\taccent: \"240 4.8% 95.9%\",\n\t\t\t\"accent-foreground\": \"240 5.9% 10%\",\n\t\t\tdestructive: \"0 84.2% 60.2%\",\n\t\t\t\"destructive-foreground\": \"0 0% 98%\",\n\t\t\tborder: \"240 5.9% 90%\",\n\t\t\tinput: \"240 5.9% 90%\",\n\t\t\tring: \"240 5.9% 10%\",\n\t\t});\n\t\tsetLockedColor(null);\n\t}, []);\n\n\tconst copyColorScheme = useCallback(() => {\n\t\tconst cssVariables = Object.entries(colorScheme)\n\t\t\t.map(([key, value]) => `--${key}: ${value};`)\n\t\t\t.join(\"\\n    \");\n\n\t\tconst fullCss = `@layer base {\n\t  :root {\n\t\t${cssVariables}\n\t  }\n\t}`;\n\n\t\tnavigator.clipboard.writeText(fullCss);\n\t\tsetCopied(true);\n\t\tsetTimeout(() => setCopied(false), 2000);\n\t}, [colorScheme]);\n\n\tconst getContrastColor = useCallback((color: string) => {\n\t\tconst [, , lightness] = color.split(\" \").map(parseFloat);\n\t\treturn lightness > 50 ? \"0 0% 0%\" : \"0 0% 100%\";\n\t}, []);\n\n\tconst toggleLock = useCallback((key: string) => {\n\t\tsetLockedColor((prev) => (prev === key ? null : key));\n\t}, []);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"w-full max-w-4xl mx-auto \">\n\t\t\t\t<CardContent className=\"p-6 space-y-6\">\n\t\t\t\t\t<div className=\"grid md:grid-cols-1 gap-6\">\n\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t<div className=\"flex flex-col md:flex-row gap-4 md:justify-between\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonClick={generateHarmoniousColors}\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tGenerate Harmonious Colors\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonClick={resetColors}\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset Colors\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4\">\n\t\t\t\t\t\t\t\t{Object.entries(colorScheme).map(([key, value]) => (\n\t\t\t\t\t\t\t\t\t<div key={key} className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t\t\t\t<label className=\"text-sm font-medium text-muted-foreground mb-2 block\">\n\t\t\t\t\t\t\t\t\t\t\t\t{key}\n\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"ml-2 text-secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => toggleLock(key)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{lockedColor === key\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"unlocked\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"locked\"}\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={`hsl(${value})`}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(newColor) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst [h, s, l] = newColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.match(/\\d+(\\.\\d+)?/g)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.map(Number) || [0, 0, 0];\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetColorScheme({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...colorScheme,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[key]: `${h.toFixed(1)} ${s.toFixed(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}% ${l.toFixed(1)}%`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tclassName=\"w-full h-full min-h-96 rounded-lg p-6 shadow-lg transition-colors duration-300 ease-in-out overflow-hidden\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `hsl(${colorScheme.background})`,\n\t\t\t\t\t\t\t\tcolor: `hsl(${colorScheme.foreground})`,\n\t\t\t\t\t\t\t\tborderColor: `hsl(${colorScheme.border})`,\n\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\tborderStyle: \"solid\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\ttransition={{ duration: 0.5 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h3 className=\"text-xl font-semibold mb-4\">\n\t\t\t\t\t\t\t\tColor Preview\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<p className=\"text-sm mb-4\">\n\t\t\t\t\t\t\t\tExperience your color palette in action. This preview\n\t\t\t\t\t\t\t\tshowcases your selected colors.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t{Object.entries(colorScheme).map(([key, value]) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex flex-col md:flex-row gap-4 md:items-center justify-between\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>{key}</span>\n\t\t\t\t\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-mono\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigator.clipboard.writeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t`--${key}: ${value};`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCopied(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetTimeout(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t() => setCopied(false),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t2000\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: `hsl(${value})`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: `hsl(${getContrastColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)})`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tborderColor: `hsl(${colorScheme.border})`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{copied ? \"check\" : \"copy\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Click to copy</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<Button onClick={copyColorScheme} className=\"w-full\">\n\t\t\t\t\t\t\tCopy Full Color Scheme\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</CardContent>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/colorpickerusage.tsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\n\nimport { CardContent } from \"@/registry/open-source/cards\";\nimport ColorPicker from \"@/registry/open-source/color-picker\";\nimport { motion } from \"motion/react\";\nimport { Poline, positionFunctions } from \"poline\";\n\nimport { Button } from \"../ui/button\";\nimport {\n\tTooltip,\n\tTooltipContent,\n\tTooltipProvider,\n\tTooltipTrigger,\n} from \"../ui/tooltip\";\n\nexport default function Usage() {\n\tconst [colorScheme, setColorScheme] = useState<any>({\n\t\tbackground: \"0 0% 100%\",\n\t\tforeground: \"240 10% 3.9%\",\n\t\tcard: \"0 0% 100%\",\n\t\t\"card-foreground\": \"240 10% 3.9%\",\n\t\tpopover: \"0 0% 100%\",\n\t\t\"popover-foreground\": \"240 10% 3.9%\",\n\t\tprimary: \"240 5.9% 10%\",\n\t\t\"primary-foreground\": \"0 0% 98%\",\n\t\tsecondary: \"240 4.8% 95.9%\",\n\t\t\"secondary-foreground\": \"240 5.9% 10%\",\n\t\tmuted: \"240 4.8% 95.9%\",\n\t\t\"muted-foreground\": \"240 3.8% 46.1%\",\n\t\taccent: \"240 4.8% 95.9%\",\n\t\t\"accent-foreground\": \"240 5.9% 10%\",\n\t\tdestructive: \"0 84.2% 60.2%\",\n\t\t\"destructive-foreground\": \"0 0% 98%\",\n\t\tborder: \"240 5.9% 90%\",\n\t\tinput: \"240 5.9% 90%\",\n\t\tring: \"240 5.9% 10%\",\n\t});\n\tconst [lockedColor, setLockedColor] = useState<string | null>(null);\n\tconst [copied, setCopied] = useState(false);\n\tconst [value, setValue] = useState(100);\n\n\tconst generateHarmoniousColors = useCallback(() => {\n\t\tlet anchorColors: [number, number, number][] = [];\n\n\t\tif (lockedColor) {\n\t\t\tconst [h, s, l] = colorScheme[lockedColor].split(\" \").map(parseFloat);\n\t\t\tanchorColors.push([h, s / 100, l / 100]);\n\t\t}\n\n\t\twhile (anchorColors.length < 3) {\n\t\t\tanchorColors.push([Math.random() * 360, 0.7, 0.5]);\n\t\t}\n\n\t\tconst poline = new Poline({\n\t\t\tnumPoints: 20,\n\t\t\tanchorColors,\n\t\t\tpositionFunctionX: positionFunctions.sinusoidalPosition,\n\t\t\tpositionFunctionY: positionFunctions.quadraticPosition,\n\t\t\tpositionFunctionZ: positionFunctions.linearPosition,\n\t\t});\n\n\t\tconst newColorScheme = { ...colorScheme };\n\t\tconst colors = poline.colorsCSS;\n\n\t\tObject.keys(newColorScheme).forEach((key, index) => {\n\t\t\tif (key !== lockedColor) {\n\t\t\t\tconst color = colors[index % colors.length];\n\t\t\t\tconst [h, s, l] = color.match(/\\d+(\\.\\d+)?/g)?.map(Number) || [\n\t\t\t\t\t0, 0, 0,\n\t\t\t\t];\n\n\t\t\t\tlet adjustedLightness = l;\n\t\t\t\tif (key.includes(\"foreground\")) {\n\t\t\t\t\tadjustedLightness = Math.min(l - 30, 20);\n\t\t\t\t} else if (key === \"background\") {\n\t\t\t\t\tadjustedLightness = Math.max(l + 30, 90);\n\t\t\t\t} else if (key === \"border\" || key === \"input\") {\n\t\t\t\t\tadjustedLightness = Math.min(Math.max(l, 70), 90);\n\t\t\t\t}\n\n\t\t\t\tnewColorScheme[key] = `${h.toFixed(1)} ${s.toFixed(\n\t\t\t\t\t1\n\t\t\t\t)}% ${adjustedLightness.toFixed(1)}%`;\n\t\t\t}\n\t\t});\n\n\t\tsetColorScheme(newColorScheme);\n\t}, [colorScheme, lockedColor]);\n\n\tconst resetColors = useCallback(() => {\n\t\tsetColorScheme({\n\t\t\tbackground: \"0 0% 100%\",\n\t\t\tforeground: \"240 10% 3.9%\",\n\t\t\tcard: \"0 0% 100%\",\n\t\t\t\"card-foreground\": \"240 10% 3.9%\",\n\t\t\tpopover: \"0 0% 100%\",\n\t\t\t\"popover-foreground\": \"240 10% 3.9%\",\n\t\t\tprimary: \"240 5.9% 10%\",\n\t\t\t\"primary-foreground\": \"0 0% 98%\",\n\t\t\tsecondary: \"240 4.8% 95.9%\",\n\t\t\t\"secondary-foreground\": \"240 5.9% 10%\",\n\t\t\tmuted: \"240 4.8% 95.9%\",\n\t\t\t\"muted-foreground\": \"240 3.8% 46.1%\",\n\t\t\taccent: \"240 4.8% 95.9%\",\n\t\t\t\"accent-foreground\": \"240 5.9% 10%\",\n\t\t\tdestructive: \"0 84.2% 60.2%\",\n\t\t\t\"destructive-foreground\": \"0 0% 98%\",\n\t\t\tborder: \"240 5.9% 90%\",\n\t\t\tinput: \"240 5.9% 90%\",\n\t\t\tring: \"240 5.9% 10%\",\n\t\t});\n\t\tsetLockedColor(null);\n\t}, []);\n\n\tconst copyColorScheme = useCallback(() => {\n\t\tconst cssVariables = Object.entries(colorScheme)\n\t\t\t.map(([key, value]) => `--${key}: ${value};`)\n\t\t\t.join(\"\\n    \");\n\n\t\tconst fullCss = `@layer base {\n\t  :root {\n\t\t${cssVariables}\n\t  }\n\t}`;\n\n\t\tnavigator.clipboard.writeText(fullCss);\n\t\tsetCopied(true);\n\t\tsetTimeout(() => setCopied(false), 2000);\n\t}, [colorScheme]);\n\n\tconst getContrastColor = useCallback((color: string) => {\n\t\tconst [, , lightness] = color.split(\" \").map(parseFloat);\n\t\treturn lightness > 50 ? \"0 0% 0%\" : \"0 0% 100%\";\n\t}, []);\n\n\tconst toggleLock = useCallback((key: string) => {\n\t\tsetLockedColor((prev) => (prev === key ? null : key));\n\t}, []);\n\n\treturn (\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\n\t\t\t<div className=\"w-full max-w-4xl mx-auto \">\n\t\t\t\t<CardContent className=\"p-6 space-y-6\">\n\t\t\t\t\t<div className=\"grid md:grid-cols-1 gap-6\">\n\t\t\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t\t\t<div className=\"flex flex-col md:flex-row gap-4 md:justify-between\">\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonClick={generateHarmoniousColors}\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tGenerate Harmonious Colors\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tonClick={resetColors}\n\t\t\t\t\t\t\t\t\tclassName=\"text-sm\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReset Colors\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4\">\n\t\t\t\t\t\t\t\t{Object.entries(colorScheme).map(([key, value]) => (\n\t\t\t\t\t\t\t\t\t<div key={key} className=\"relative\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t\t\t\t\t\t\t\t<label className=\"text-sm font-medium text-muted-foreground mb-2 block\">\n\t\t\t\t\t\t\t\t\t\t\t\t{key}\n\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"ml-2 text-secondary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => toggleLock(key)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{lockedColor === key\n\t\t\t\t\t\t\t\t\t\t\t\t\t? \"unlocked\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t: \"locked\"}\n\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={`hsl(${value})`}\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(newColor) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst [h, s, l] = newColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.match(/\\d+(\\.\\d+)?/g)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.map(Number) || [0, 0, 0];\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetColorScheme({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...colorScheme,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t[key]: `${h.toFixed(1)} ${s.toFixed(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}% ${l.toFixed(1)}%`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tclassName=\"w-full h-full min-h-96 rounded-lg p-6 shadow-lg transition-colors duration-300 ease-in-out overflow-hidden\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tbackgroundColor: `hsl(${colorScheme.background})`,\n\t\t\t\t\t\t\t\tcolor: `hsl(${colorScheme.foreground})`,\n\t\t\t\t\t\t\t\tborderColor: `hsl(${colorScheme.border})`,\n\t\t\t\t\t\t\t\tborderWidth: 2,\n\t\t\t\t\t\t\t\tborderStyle: \"solid\",\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, y: 20 }}\n\t\t\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\n\t\t\t\t\t\t\ttransition={{ duration: 0.5 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h3 className=\"text-xl font-semibold mb-4\">\n\t\t\t\t\t\t\t\tColor Preview\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<p className=\"text-sm mb-4\">\n\t\t\t\t\t\t\t\tExperience your color palette in action. This preview\n\t\t\t\t\t\t\t\tshowcases your selected colors.\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t<div className=\"space-y-2\">\n\t\t\t\t\t\t\t\t{Object.entries(colorScheme).map(([key, value]) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex flex-col md:flex-row gap-4 md:items-center justify-between\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>{key}</span>\n\t\t\t\t\t\t\t\t\t\t<TooltipProvider>\n\t\t\t\t\t\t\t\t\t\t\t<Tooltip>\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipTrigger asChild>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-mono\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnavigator.clipboard.writeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t`--${key}: ${value};`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCopied(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetTimeout(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t() => setCopied(false),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t2000\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: `hsl(${value})`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: `hsl(${getContrastColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)})`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tborderColor: `hsl(${colorScheme.border})`,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{copied ? \"check\" : \"copy\"}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipTrigger>\n\t\t\t\t\t\t\t\t\t\t\t\t<TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p>Click to copy</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</TooltipContent>\n\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t\t\t\t</TooltipProvider>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<Button onClick={copyColorScheme} className=\"w-full\">\n\t\t\t\t\t\t\tCopy Full Color Scheme\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</CardContent>\n\t\t\t</div>{\" \"}\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/cards.tsx",
      "content": "import React, { forwardRef } from \"react\";\n\nimport Link from \"next/link\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nconst CardContainer = ({ children, className }) => {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"group basis-64 xl:basis-[355px] leading-tight lg:grow\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative h-full transition-all duration-500 transform-3d\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<AnimatePresence mode=\"popLayout\" initial={false}>\n\t\t\t\t\t{children}\n\t\t\t\t</AnimatePresence>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nconst CardHeader = ({ children }) => {\n\treturn (\n\t\t<div className=\"bg-backgroundSecondary text-foreground justify-center flex items-center\">\n\t\t\t<span className=\"sm:min-w-[290px] mx-auto py-4 lg:px-6 lg:py-8 text-center text-balance\">\n\t\t\t\t{children}\n\t\t\t</span>\n\t\t</div>\n\t);\n};\n\nconst CardHr = () => (\n\t<hr className=\"w-[140px] my-2 mx-auto border-background border-b-2\" />\n);\n\n/** Custom component note: When using popLayout mode, any immediate child of AnimatePresence that's a custom component must be wrapped in React's forwardRef function, forwarding the provided ref to the DOM node you wish to pop out of the layout. */\nconst CardContent = forwardRef(({ children, key }, ref) => {\n\treturn (\n\t\t<motion.div\n\t\t\tref={ref}\n\t\t\tkey={key}\n\t\t\tinitial={{ rotateY: 180 }}\n\t\t\tanimate={{ rotateY: 0 }}\n\t\t\texit={{ rotateY: -180 }}\n\t\t\ttransition={{ duration: 0.5 }}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col w-full backface-hidden rounded-xl min-h-[400px] lg:min-h-[500px] overflow-hidden shadow-lg bg-background\"\n\t\t\t)}\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n});\n\n/** Custom component note: When using popLayout mode, any immediate child of AnimatePresence that's a custom component must be wrapped in React's forwardRef function, forwarding the provided ref to the DOM node you wish to pop out of the layout. */\nconst FlipCardBackContent = forwardRef(({ children, key }, ref) => {\n\treturn (\n\t\t<motion.div\n\t\t\tref={ref}\n\t\t\tkey={key}\n\t\t\tinitial={{ rotateY: 180 }}\n\t\t\tanimate={{ rotateY: 0 }}\n\t\t\texit={{ rotateY: -180 }}\n\t\t\ttransition={{ duration: 0.5 }}\n\t\t\tclassName={cn(\n\t\t\t\t\"w-full rounded-xl backface-hidden overflow-hidden shadow-lg \"\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"flex flex-col gap-2 rounded-xl min-h-[400px] lg:min-h-[500px]\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n});\n\nconst FlipCardButton = ({ children, onClick }) => {\n\treturn (\n\t\t<button\n\t\t\tclassName=\"button red-to-background my-6 mx-auto\"\n\t\t\tonClick={() => onClick()}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n};\n\nconst LinkCardButton = ({ children, url, target }) => {\n\treturn (\n\t\t<Link\n\t\t\tclassName=\"button red-to-background my-6 mx-auto\"\n\t\t\thref={url || \"\"}\n\t\t\ttarget={target}\n\t\t\treferrerPolicy={target && \"no-referrer\"}\n\t\t>\n\t\t\t{children}\n\t\t</Link>\n\t);\n};\n\nexport {\n\tCardContainer,\n\tCardHeader,\n\tCardHr,\n\tCardContent,\n\tFlipCardBackContent,\n\tFlipCardButton,\n\tLinkCardButton,\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/color-picker.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { useEffect, useState } from \"react\";\r\n\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n\tPopover,\r\n\tPopoverContent,\r\n\tPopoverTrigger,\r\n} from \"@/components/ui/popover\";\r\nimport { Check, ChevronDown } from \"lucide-react\";\r\nimport { AnimatePresence, motion } from \"motion/react\";\r\n\r\n// Credit:\r\n// https://www.cult-ui.com/docs/components/color-picker\r\n\r\n// Helper functions for color conversion\r\nconst hslToHex = (h: number, s: number, l: number) => {\r\n\tl /= 100;\r\n\tconst a = (s * Math.min(l, 1 - l)) / 100;\r\n\tconst f = (n: number) => {\r\n\t\tconst k = (n + h / 30) % 12;\r\n\t\tconst color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\r\n\t\treturn Math.round(255 * color)\r\n\t\t\t.toString(16)\r\n\t\t\t.padStart(2, \"0\");\r\n\t};\r\n\treturn `#${f(0)}${f(8)}${f(4)}`;\r\n};\r\n\r\nconst hexToHsl = (hex: string): [number, number, number] => {\r\n\tconst result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\r\n\tif (!result) return [0, 0, 0];\r\n\r\n\tlet r = parseInt(result[1], 16) / 255;\r\n\tlet g = parseInt(result[2], 16) / 255;\r\n\tlet b = parseInt(result[3], 16) / 255;\r\n\r\n\tconst max = Math.max(r, g, b);\r\n\tconst min = Math.min(r, g, b);\r\n\tlet h = 0;\r\n\tlet s = 0;\r\n\tlet l = (max + min) / 2;\r\n\r\n\tif (max !== min) {\r\n\t\tconst d = max - min;\r\n\t\ts = l > 0.5 ? d / (2 - max - min) : d / (max + min);\r\n\t\tswitch (max) {\r\n\t\t\tcase r:\r\n\t\t\t\th = (g - b) / d + (g < b ? 6 : 0);\r\n\t\t\t\tbreak;\r\n\t\t\tcase g:\r\n\t\t\t\th = (b - r) / d + 2;\r\n\t\t\t\tbreak;\r\n\t\t\tcase b:\r\n\t\t\t\th = (r - g) / d + 4;\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t\th /= 6;\r\n\t}\r\n\r\n\treturn [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];\r\n};\r\n\r\nconst normalizeColor = (color: string): string => {\r\n\tif (color.startsWith(\"#\")) {\r\n\t\treturn color.toUpperCase();\r\n\t} else if (color.startsWith(\"hsl\")) {\r\n\t\tconst [h, s, l] = color.match(/\\d+(\\.\\d+)?/g)?.map(Number) || [0, 0, 0];\r\n\t\treturn `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`;\r\n\t}\r\n\treturn color;\r\n};\r\n\r\nconst trimColorString = (color: string, maxLength: number = 20): string => {\r\n\tif (color.length <= maxLength) return color;\r\n\treturn `${color.slice(0, maxLength - 3)}...`;\r\n};\r\n\r\nconst ColorPicker = ({\r\n\tcolor,\r\n\tonChange,\r\n}: {\r\n\tcolor: string;\r\n\tonChange: (color: string) => void;\r\n}) => {\r\n\tconst [hsl, setHsl] = useState<[number, number, number]>([0, 0, 0]);\r\n\tconst [colorInput, setColorInput] = useState(color);\r\n\tconst [isOpen, setIsOpen] = useState(false);\r\n\r\n\tuseEffect(() => {\r\n\t\thandleColorChange(color);\r\n\t}, [color]);\r\n\r\n\tconst handleColorChange = (newColor: string) => {\r\n\t\tconst normalizedColor = normalizeColor(newColor);\r\n\t\tsetColorInput(normalizedColor);\r\n\r\n\t\tlet h, s, l;\r\n\t\tif (normalizedColor.startsWith(\"#\")) {\r\n\t\t\t[h, s, l] = hexToHsl(normalizedColor);\r\n\t\t} else {\r\n\t\t\t[h, s, l] = normalizedColor.match(/\\d+(\\.\\d+)?/g)?.map(Number) || [\r\n\t\t\t\t0, 0, 0,\r\n\t\t\t];\r\n\t\t}\r\n\r\n\t\tsetHsl([h, s, l]);\r\n\t\tonChange(`hsl(${h.toFixed(1)}, ${s?.toFixed(1) || 0}%, ${l?.toFixed(1) || 0}%)`);\r\n\t};\r\n\r\n\tconst handleHueChange = (hue: number) => {\r\n\t\tconst newHsl: [number, number, number] = [hue, hsl[1], hsl[2]];\r\n\t\tsetHsl(newHsl);\r\n\t\thandleColorChange(`hsl(${newHsl[0]}, ${newHsl[1]}%, ${newHsl[2]}%)`);\r\n\t};\r\n\r\n\tconst handleSaturationLightnessChange = (\r\n\t\tevent: React.MouseEvent<HTMLDivElement>\r\n\t) => {\r\n\t\tconst rect = event.currentTarget.getBoundingClientRect();\r\n\t\tconst x = event.clientX - rect.left;\r\n\t\tconst y = event.clientY - rect.top;\r\n\t\tconst s = Math.round((x / rect.width) * 100);\r\n\t\tconst l = Math.round(100 - (y / rect.height) * 100);\r\n\t\tconst newHsl: [number, number, number] = [hsl[0], s, l];\r\n\t\tsetHsl(newHsl);\r\n\t\thandleColorChange(`hsl(${newHsl[0]}, ${newHsl[1]}%, ${newHsl[2]}%)`);\r\n\t};\r\n\r\n\tconst handleColorInputChange = (\r\n\t\tevent: React.ChangeEvent<HTMLInputElement>\r\n\t) => {\r\n\t\tconst newColor = event.target.value;\r\n\t\tsetColorInput(newColor);\r\n\t\tif (\r\n\t\t\t/^#[0-9A-Fa-f]{6}$/.test(newColor) ||\r\n\t\t\t/^hsl$$\\d+,\\s*\\d+%,\\s*\\d+%$$$/.test(newColor)\r\n\t\t) {\r\n\t\t\thandleColorChange(newColor);\r\n\t\t}\r\n\t};\r\n\r\n\tconst colorPresets = [\r\n\t\t\"#FF3B30\",\r\n\t\t\"#FF9500\",\r\n\t\t\"#FFCC00\",\r\n\t\t\"#4CD964\",\r\n\t\t\"#5AC8FA\",\r\n\t\t\"#007AFF\",\r\n\t\t\"#5856D6\",\r\n\t\t\"#FF2D55\",\r\n\t\t\"#8E8E93\",\r\n\t\t\"#EFEFF4\",\r\n\t\t\"#E5E5EA\",\r\n\t\t\"#D1D1D6\",\r\n\t];\r\n\r\n\treturn (\r\n\t\t<Popover open={isOpen} onOpenChange={setIsOpen}>\r\n\t\t\t<PopoverTrigger asChild>\r\n\t\t\t\t<Button\r\n\t\t\t\t\tvariant=\"outline\"\r\n\t\t\t\t\tclassName=\"w-[200px] justify-start text-left font-normal\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclassName=\"w-4 h-4 rounded-full mr-2 shadow-xs\"\r\n\t\t\t\t\t\tstyle={{ backgroundColor: colorInput }}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<span className=\"grow\">{trimColorString(colorInput)}</span>\r\n\t\t\t\t\t<ChevronDown className=\"h-4 w-4 opacity-50\" />\r\n\t\t\t\t</Button>\r\n\t\t\t</PopoverTrigger>\r\n\t\t\t<PopoverContent className=\"w-[240px] p-3\">\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tinitial={{ opacity: 0, scale: 0.95 }}\r\n\t\t\t\t\tanimate={{ opacity: 1, scale: 1 }}\r\n\t\t\t\t\texit={{ opacity: 0, scale: 0.95 }}\r\n\t\t\t\t\ttransition={{ duration: 0.2 }}\r\n\t\t\t\t\tclassName=\"space-y-3\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\tclassName=\"w-full h-40 rounded-lg cursor-crosshair relative overflow-hidden\"\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\tbackground: `\r\n                linear-gradient(to top, rgba(0, 0, 0, 1), transparent),\r\n                linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 0, 0, 0)),\r\n                hsl(${hsl[0]}, 100%, 50%)\r\n              `,\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tonClick={handleSaturationLightnessChange}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\tclassName=\"w-4 h-4 rounded-full border-2 border-white absolute shadow-md\"\r\n\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\tleft: `${hsl[1]}%`,\r\n\t\t\t\t\t\t\t\ttop: `${100 - hsl[2]}%`,\r\n\t\t\t\t\t\t\t\tbackgroundColor: `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`,\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\twhileHover={{ scale: 1.2 }}\r\n\t\t\t\t\t\t\twhileTap={{ scale: 0.9 }}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</motion.div>\r\n\t\t\t\t\t<motion.input\r\n\t\t\t\t\t\ttype=\"range\"\r\n\t\t\t\t\t\tmin=\"0\"\r\n\t\t\t\t\t\tmax=\"360\"\r\n\t\t\t\t\t\tvalue={hsl[0]}\r\n\t\t\t\t\t\tonChange={(e) => handleHueChange(Number(e.target.value))}\r\n\t\t\t\t\t\tclassName=\"w-full h-3 rounded-full appearance-none cursor-pointer\"\r\n\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\tbackground: `linear-gradient(to right, \r\n                hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), \r\n                hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%)\r\n              )`,\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\twhileHover={{ scale: 1.05 }}\r\n\t\t\t\t\t\twhileTap={{ scale: 0.95 }}\r\n\t\t\t\t\t/>\r\n\t\t\t\t\t<div className=\"flex items-center space-x-2\">\r\n\t\t\t\t\t\t<Label htmlFor=\"color-input\" className=\"sr-only\">\r\n\t\t\t\t\t\t\tColor\r\n\t\t\t\t\t\t</Label>\r\n\t\t\t\t\t\t<Input\r\n\t\t\t\t\t\t\tid=\"color-input\"\r\n\t\t\t\t\t\t\ttype=\"text\"\r\n\t\t\t\t\t\t\tvalue={colorInput}\r\n\t\t\t\t\t\t\tonChange={handleColorInputChange}\r\n\t\t\t\t\t\t\tclassName=\"grow bg-background border border-gray-300 rounded-md text-sm h-8 px-2\"\r\n\t\t\t\t\t\t\tplaceholder=\"#RRGGBB or hsl(h, s%, l%)\"\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\tclassName=\"w-8 h-8 rounded-md shadow-xs\"\r\n\t\t\t\t\t\t\tstyle={{ backgroundColor: colorInput }}\r\n\t\t\t\t\t\t\twhileHover={{ scale: 1.1 }}\r\n\t\t\t\t\t\t\twhileTap={{ scale: 0.9 }}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"grid grid-cols-6 gap-2\">\r\n\t\t\t\t\t\t<AnimatePresence>\r\n\t\t\t\t\t\t\t{colorPresets.map((preset) => (\r\n\t\t\t\t\t\t\t\t<motion.button\r\n\t\t\t\t\t\t\t\t\tkey={preset}\r\n\t\t\t\t\t\t\t\t\tclassName=\"w-8 h-8 rounded-full relative\"\r\n\t\t\t\t\t\t\t\t\tstyle={{ backgroundColor: preset }}\r\n\t\t\t\t\t\t\t\t\tonClick={() => handleColorChange(preset)}\r\n\t\t\t\t\t\t\t\t\twhileHover={{ scale: 1.2, zIndex: 1 }}\r\n\t\t\t\t\t\t\t\t\twhileTap={{ scale: 0.9 }}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{colorInput === preset && (\r\n\t\t\t\t\t\t\t\t\t\t<motion.div\r\n\t\t\t\t\t\t\t\t\t\t\tinitial={{ scale: 0 }}\r\n\t\t\t\t\t\t\t\t\t\t\tanimate={{ scale: 1 }}\r\n\t\t\t\t\t\t\t\t\t\t\texit={{ scale: 0 }}\r\n\t\t\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.2 }}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t<Check className=\"w-4 h-4 text-foreground absolute inset-0 m-auto\" />\r\n\t\t\t\t\t\t\t\t\t\t</motion.div>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</motion.button>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</AnimatePresence>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</motion.div>\r\n\t\t\t</PopoverContent>\r\n\t\t</Popover>\r\n\t);\r\n};\r\n\r\nexport default ColorPicker;\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/button.tsx",
      "content": "import * as React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\n\r\nconst buttonVariants = cva(\r\n\t\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm text-white hover:text-gray-400 font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\r\n\t{\r\n\t\tvariants: {\r\n\t\t\tvariant: {\r\n\t\t\t\tsimple:\r\n\t\t\t\t\t\"bg-secondary relative z-10 bg-transparent hover:border-secondary hover:bg-secondary/50  border border-transparent dark:text-white text-sm md:text-sm transition font-medium duration-200  rounded-md px-4 py-2  flex items-center justify-center\",\r\n\t\t\t\tdefault: \"bg-primary text-primary-foreground hover:bg-primary/90\",\r\n\t\t\t\tdestructive:\r\n\t\t\t\t\t\"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\r\n\t\t\t\toutline:\r\n\t\t\t\t\t\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\r\n\t\t\t\tsecondary:\r\n\t\t\t\t\t\"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n\t\t\t\tghost: \"hover:bg-accent hover:text-black hover:stroke-black dark:text-white text-black\",\r\n\t\t\t\tlink: \"text-primary underline-offset-4 hover:underline\",\r\n\t\t\t},\r\n\t\t\tsize: {\r\n\t\t\t\tdefault: \"h-10 px-4 py-2\",\r\n\t\t\t\tsm: \"h-9 rounded-md px-3\",\r\n\t\t\t\tlg: \"h-11 rounded-md px-8\",\r\n\t\t\t\ticon: \"h-10 w-10\",\r\n\t\t\t},\r\n\t\t},\r\n\t\tdefaultVariants: {\r\n\t\t\tvariant: \"default\",\r\n\t\t\tsize: \"default\",\r\n\t\t},\r\n\t}\r\n);\r\n\r\nexport interface ButtonProps\r\n\textends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n\t\tVariantProps<typeof buttonVariants> {\r\n\tasChild?: boolean;\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n\t({ className, variant, size, asChild = false, ...props }, ref) => {\r\n\t\tconst Comp = asChild ? Slot : \"button\";\r\n\t\treturn (\r\n\t\t\t<Comp\r\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, className }))}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\nButton.displayName = \"Button\";\r\n\r\nexport { Button, buttonVariants };\r\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/input.tsx",
      "content": "// SHADCN UI GENERATED CODE\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\nexport interface InputProps\n\textends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
      "type": "registry:ui"
    },
    {
      "path": "components/ui/label.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n);\n\nconst Label = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n\t\tVariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n\t<LabelPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(labelVariants(), className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = LabelPrimitive.Root.displayName;\n\nexport { Label };\n",
      "type": "registry:ui"
    }
  ]
}