51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T2087,"use client" import React, { useEffect, useState } from "react" import { Check, ChevronDown } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" // Helper functions for color conversion const hslToHex = (h: number, s: number, l: number) => { l /= 100 const a = (s * Math.min(l, 1 - l)) / 100 const f = (n: number) => { const k = (n + h / 30) % 12 const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1) return Math.round(255 * color) .toString(16) .padStart(2, "0") } return `#${f(0)}${f(8)}${f(4)}` } const hexToHsl = (hex: string): [number, number, number] => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) if (!result) return [0, 0, 0] let r = parseInt(result[1], 16) / 255 let g = parseInt(result[2], 16) / 255 let b = parseInt(result[3], 16) / 255 const max = Math.max(r, g, b) const min = Math.min(r, g, b) let h = 0 let s = 0 let l = (max + min) / 2 if (max !== min) { const d = max - min s = l > 0.5 ? d / (2 - max - min) : d / (max + min) switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0) break case g: h = (b - r) / d + 2 break case b: h = (r - g) / d + 4 break } h /= 6 } return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)] } const normalizeColor = (color: string): string => { if (color.startsWith("#")) { return color.toUpperCase() } else if (color.startsWith("hsl")) { const [h, s, l] = color.match(/\d+(\.\d+)?/g)?.map(Number) || [0, 0, 0] return `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)` } return color } const trimColorString = (color: string, maxLength: number = 20): string => { if (color.length <= maxLength) return color return `${color.slice(0, maxLength - 3)}...` } export function ColorPicker({ color, onChange, }: { color: string onChange: (color: string) => void }) { const [hsl, setHsl] = useState<[number, number, number]>([0, 0, 0]) const [colorInput, setColorInput] = useState(color) const [isOpen, setIsOpen] = useState(false) useEffect(() => { handleColorChange(color) }, [color]) const handleColorChange = (newColor: string) => { const normalizedColor = normalizeColor(newColor) setColorInput(normalizedColor) let h, s, l if (normalizedColor.startsWith("#")) { ;[h, s, l] = hexToHsl(normalizedColor) } else { ;[h, s, l] = normalizedColor.match(/\d+(\.\d+)?/g)?.map(Number) || [ 0, 0, 0, ] } setHsl([h, s, l]) onChange(`hsl(${h.toFixed(1)}, ${s.toFixed(1)}%, ${l.toFixed(1)}%)`) } const handleHueChange = (hue: number) => { const newHsl: [number, number, number] = [hue, hsl[1], hsl[2]] setHsl(newHsl) handleColorChange(`hsl(${newHsl[0]}, ${newHsl[1]}%, ${newHsl[2]}%)`) } const handleSaturationLightnessChange = ( event: React.MouseEvent ) => { const rect = event.currentTarget.getBoundingClientRect() const x = event.clientX - rect.left const y = event.clientY - rect.top const s = Math.round((x / rect.width) * 100) const l = Math.round(100 - (y / rect.height) * 100) const newHsl: [number, number, number] = [hsl[0], s, l] setHsl(newHsl) handleColorChange(`hsl(${newHsl[0]}, ${newHsl[1]}%, ${newHsl[2]}%)`) } const handleColorInputChange = ( event: React.ChangeEvent ) => { const newColor = event.target.value setColorInput(newColor) if ( /^#[0-9A-Fa-f]{6}$/.test(newColor) || /^hsl$$\d+,\s*\d+%,\s*\d+%$$$/.test(newColor) ) { handleColorChange(newColor) } } const colorPresets = [ "#FF3B30", "#FF9500", "#FFCC00", "#4CD964", "#5AC8FA", "#007AFF", "#5856D6", "#FF2D55", "#8E8E93", "#EFEFF4", "#E5E5EA", "#D1D1D6", ] return ( handleHueChange(Number(e.target.value))} className="h-3 w-full cursor-pointer appearance-none rounded-full" style={{ background: `linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%) )`, }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />

Color

{colorPresets.map((preset) => ( handleColorChange(preset)} whileHover={{ scale: 1.2, zIndex: 1 }} whileTap={{ scale: 0.9 }} > {colorInput === preset && ( )} ))}

) } export default ColorPicker 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@cult-ui","registryDependencies":["button","input","label","popover"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/color-picker.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]