4f: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/1o6_421saitt-.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"] 50: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/1o6_421saitt-.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"] 51:T328c,"use client"; import Color from "color"; import { PipetteIcon } from "lucide-react"; import { Slider } from "radix-ui"; import { type ComponentProps, createContext, type HTMLAttributes, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { cn } from "@/lib/utils"; type ColorPickerContextValue = { hue: number; saturation: number; lightness: number; alpha: number; mode: string; setHue: (hue: number) => void; setSaturation: (saturation: number) => void; setLightness: (lightness: number) => void; setAlpha: (alpha: number) => void; setMode: (mode: string) => void; }; const ColorPickerContext = createContext( undefined ); export const useColorPicker = () => { const context = useContext(ColorPickerContext); if (!context) { throw new Error("useColorPicker must be used within a ColorPickerProvider"); } return context; }; export type ColorPickerProps = HTMLAttributes & { value?: Parameters[0]; defaultValue?: Parameters[0]; onChange?: (value: Parameters[0]) => void; }; export const ColorPicker = ({ value, defaultValue = "#000000", onChange, className, ...props }: ColorPickerProps) => { const selectedColor = Color(value); const defaultColor = Color(defaultValue); const [hue, setHue] = useState( selectedColor.hue() || defaultColor.hue() || 0 ); const [saturation, setSaturation] = useState( selectedColor.saturationl() || defaultColor.saturationl() || 100 ); const [lightness, setLightness] = useState( selectedColor.lightness() || defaultColor.lightness() || 50 ); const [alpha, setAlpha] = useState( selectedColor.alpha() * 100 || defaultColor.alpha() * 100 ); const [mode, setMode] = useState("hex"); // Update color when controlled value changes useEffect(() => { if (value) { const color = Color.rgb(value).rgb().object(); setHue(color.r); setSaturation(color.g); setLightness(color.b); setAlpha(color.a); } }, [value]); // Notify parent of changes useEffect(() => { if (onChange) { const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100); const rgba = color.rgb().array(); onChange([rgba[0], rgba[1], rgba[2], alpha / 100]); } }, [hue, saturation, lightness, alpha, onChange]); return (

); }; export type ColorPickerSelectionProps = HTMLAttributes; export const ColorPickerSelection = memo( ({ className, ...props }: ColorPickerSelectionProps) => { const containerRef = useRef(null); const [isDragging, setIsDragging] = useState(false); const [positionX, setPositionX] = useState(0); const [positionY, setPositionY] = useState(0); const { hue, setSaturation, setLightness } = useColorPicker(); const backgroundGradient = useMemo(() => { return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)), hsl(${hue}, 100%, 50%)`; }, [hue]); const handlePointerMove = useCallback( (event: PointerEvent) => { if (!(isDragging && containerRef.current)) { return; } const rect = containerRef.current.getBoundingClientRect(); const x = Math.max( 0, Math.min(1, (event.clientX - rect.left) / rect.width) ); const y = Math.max( 0, Math.min(1, (event.clientY - rect.top) / rect.height) ); setPositionX(x); setPositionY(y); setSaturation(x * 100); const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x); const lightness = topLightness * (1 - y); setLightness(lightness); }, [isDragging, setSaturation, setLightness] ); useEffect(() => { const handlePointerUp = () => setIsDragging(false); if (isDragging) { window.addEventListener("pointermove", handlePointerMove); window.addEventListener("pointerup", handlePointerUp); } return () => { window.removeEventListener("pointermove", handlePointerMove); window.removeEventListener("pointerup", handlePointerUp); }; }, [isDragging, handlePointerMove]); return (

{ e.preventDefault(); setIsDragging(true); handlePointerMove(e.nativeEvent); }} ref={containerRef} style={{ background: backgroundGradient, }} {...props} >

); } ); ColorPickerSelection.displayName = "ColorPickerSelection"; export type ColorPickerHueProps = ComponentProps; export const ColorPickerHue = ({ className, ...props }: ColorPickerHueProps) => { const { hue, setHue } = useColorPicker(); return ( setHue(hue)} step={1} value={[hue]} {...props} > ); }; export type ColorPickerAlphaProps = ComponentProps; export const ColorPickerAlpha = ({ className, ...props }: ColorPickerAlphaProps) => { const { alpha, setAlpha } = useColorPicker(); return ( setAlpha(alpha)} step={1} value={[alpha]} {...props} >

); }; export type ColorPickerEyeDropperProps = ComponentProps; export const ColorPickerEyeDropper = ({ className, ...props }: ColorPickerEyeDropperProps) => { const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker(); const handleEyeDropper = async () => { try { // @ts-expect-error - EyeDropper API is experimental const eyeDropper = new EyeDropper(); const result = await eyeDropper.open(); const color = Color(result.sRGBHex); const [h, s, l] = color.hsl().array(); setHue(h); setSaturation(s); setLightness(l); setAlpha(100); } catch (error) { console.error("EyeDropper failed:", error); } }; return ( ); }; export type ColorPickerOutputProps = ComponentProps; const formats = ["hex", "rgb", "css", "hsl"]; export const ColorPickerOutput = ({ className, ...props }: ColorPickerOutputProps) => { const { mode, setMode } = useColorPicker(); return ( ); }; type PercentageInputProps = ComponentProps; const PercentageInput = ({ className, ...props }: PercentageInputProps) => { return (

); }; export type ColorPickerFormatProps = HTMLAttributes; export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProps) => { const { hue, saturation, lightness, alpha, mode } = useColorPicker(); const color = Color.hsl(hue, saturation, lightness, alpha / 100); if (mode === "hex") { const hex = color.hex(); return (

); } if (mode === "rgb") { const rgb = color .rgb() .array() .map((value) => Math.round(value)); return (

{rgb.map((value, index) => ( ))}

); } if (mode === "css") { const rgb = color .rgb() .array() .map((value) => Math.round(value)); return (

); } if (mode === "hsl") { const hsl = color .hsl() .array() .map((value) => Math.round(value)); return (

{hsl.map((value, index) => ( ))}

); } return null; }; 4e:["$","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","color",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/color","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":"color"}]]}]}],["$","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"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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":"radix-ui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["button","input","select"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"index.tsx","content":"$51","type":"registry:ui","target":"components/kibo-ui/color-picker/index.tsx"}],"className":"h-[70svh] min-h-80"}]]}]