50: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"] 51: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"] 52:Ta87b,"use client"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "cn"; import { Direction as DirectionPrimitive, Slider as SliderPrimitive, Slot as SlotPrimitive, } from "radix-ui"; import * as React from "react"; import { useComposedRefs } from "@/lib/compose-refs"; import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input"; import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref"; import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect"; import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref"; import { Button } from "@/registry/bases/radix/ui/button"; import { Input } from "@/registry/bases/radix/ui/input"; import { Popover, PopoverContent, PopoverTrigger, } from "@/registry/bases/radix/ui/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/registry/bases/radix/ui/select"; import { IconPlaceholder } from "@/registry/icons/icon-placeholder"; const ROOT_NAME = "ColorPicker"; const ROOT_IMPL_NAME = "ColorPickerImpl"; const TRIGGER_NAME = "ColorPickerTrigger"; const CONTENT_NAME = "ColorPickerContent"; const AREA_NAME = "ColorPickerArea"; const HUE_SLIDER_NAME = "ColorPickerHueSlider"; const ALPHA_SLIDER_NAME = "ColorPickerAlphaSlider"; const SWATCH_NAME = "ColorPickerSwatch"; const EYE_DROPPER_NAME = "ColorPickerEyeDropper"; const FORMAT_SELECT_NAME = "ColorPickerFormatSelect"; const INPUT_NAME = "ColorPickerInput"; const colorFormats = ["hex", "rgb", "hsl", "hsb"] as const; interface DivProps extends React.ComponentProps<"div"> { asChild?: boolean; } type RootElement = React.ComponentRef; type AreaElement = React.ComponentRef; type InputElement = React.ComponentRef; type ColorFormat = (typeof colorFormats)[number]; /** * @see https://gist.github.com/bkrmendy/f4582173f50fab209ddfef1377ab31e3 */ interface EyeDropper { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>; } declare global { interface Window { EyeDropper?: { new (): EyeDropper; }; } } interface ColorValue { r: number; g: number; b: number; a: number; } interface HSVColorValue { h: number; s: number; v: number; a: number; } function hexToRgb(hex: string, alpha?: number): ColorValue { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: Number.parseInt(result[1] ?? "0", 16), g: Number.parseInt(result[2] ?? "0", 16), b: Number.parseInt(result[3] ?? "0", 16), a: alpha ?? 1, } : { r: 0, g: 0, b: 0, a: alpha ?? 1 }; } function rgbToHex(color: ColorValue): string { const toHex = (n: number) => { const hex = Math.round(n).toString(16); return hex.length === 1 ? `0${hex}` : hex; }; return `#${toHex(color.r)}${toHex(color.g)}${toHex(color.b)}`; } function rgbToHsv(color: ColorValue): HSVColorValue { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; let h = 0; if (diff !== 0) { switch (max) { case r: h = ((g - b) / diff) % 6; break; case g: h = (b - r) / diff + 2; break; case b: h = (r - g) / diff + 4; break; } } h = Math.round(h * 60); if (h < 0) h += 360; const s = max === 0 ? 0 : diff / max; const v = max; return { h, s: Math.round(s * 100), v: Math.round(v * 100), a: color.a, }; } function hsvToRgb(hsv: HSVColorValue): ColorValue { const h = hsv.h / 360; const s = hsv.s / 100; const v = hsv.v / 100; const i = Math.floor(h * 6); const f = h * 6 - i; const p = v * (1 - s); const q = v * (1 - f * s); const t = v * (1 - (1 - f) * s); let r: number; let g: number; let b: number; switch (i % 6) { case 0: { r = v; g = t; b = p; break; } case 1: { r = q; g = v; b = p; break; } case 2: { r = p; g = v; b = t; break; } case 3: { r = p; g = q; b = v; break; } case 4: { r = t; g = p; b = v; break; } case 5: { r = v; g = p; b = q; break; } default: { r = 0; g = 0; b = 0; } } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: hsv.a, }; } function colorToString(color: ColorValue, format: ColorFormat = "hex"): string { switch (format) { case "hex": return rgbToHex(color); case "rgb": return color.a < 1 ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})` : `rgb(${color.r}, ${color.g}, ${color.b})`; case "hsl": { const hsl = rgbToHsl(color); return color.a < 1 ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${color.a})` : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`; } case "hsb": { const hsv = rgbToHsv(color); return color.a < 1 ? `hsba(${hsv.h}, ${hsv.s}%, ${hsv.v}%, ${color.a})` : `hsb(${hsv.h}, ${hsv.s}%, ${hsv.v}%)`; } default: return rgbToHex(color); } } function rgbToHsl(color: ColorValue) { const r = color.r / 255; const g = color.g / 255; const b = color.b / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; const sum = max + min; const l = sum / 2; let h = 0; let s = 0; if (diff !== 0) { s = l > 0.5 ? diff / (2 - sum) : diff / sum; if (max === r) { h = (g - b) / diff + (g < b ? 6 : 0); } else if (max === g) { h = (b - r) / diff + 2; } else if (max === b) { h = (r - g) / diff + 4; } h /= 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100), }; } function hslToRgb( hsl: { h: number; s: number; l: number }, alpha = 1, ): ColorValue { const h = hsl.h / 360; const s = hsl.s / 100; const l = hsl.l / 100; const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs(((h * 6) % 2) - 1)); const m = l - c / 2; let r = 0; let g = 0; let b = 0; if (h >= 0 && h < 1 / 6) { r = c; g = x; b = 0; } else if (h >= 1 / 6 && h < 2 / 6) { r = x; g = c; b = 0; } else if (h >= 2 / 6 && h < 3 / 6) { r = 0; g = c; b = x; } else if (h >= 3 / 6 && h < 4 / 6) { r = 0; g = x; b = c; } else if (h >= 4 / 6 && h < 5 / 6) { r = x; g = 0; b = c; } else if (h >= 5 / 6 && h < 1) { r = c; g = 0; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255), a: alpha, }; } function parseColorString(value: string): ColorValue | null { const trimmed = value.trim(); // Parse hex colors if (trimmed.startsWith("#")) { const hexMatch = trimmed.match(/^#([a-fA-F0-9]{3}|[a-fA-F0-9]{6})$/); if (hexMatch) { return hexToRgb(trimmed); } } // Parse rgb/rgba colors const rgbMatch = trimmed.match( /^rgba?$\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*$$/, ); if (rgbMatch) { return { r: Number.parseInt(rgbMatch[1] ?? "0", 10), g: Number.parseInt(rgbMatch[2] ?? "0", 10), b: Number.parseInt(rgbMatch[3] ?? "0", 10), a: rgbMatch[4] ? Number.parseFloat(rgbMatch[4]) : 1, }; } // Parse hsl/hsla colors const hslMatch = trimmed.match( /^hsla?$\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*$$/, ); if (hslMatch) { const h = Number.parseInt(hslMatch[1] ?? "0", 10); const s = Number.parseInt(hslMatch[2] ?? "0", 10) / 100; const l = Number.parseInt(hslMatch[3] ?? "0", 10) / 100; const a = hslMatch[4] ? Number.parseFloat(hslMatch[4]) : 1; // Convert HSL to RGB const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); const m = l - c / 2; let r = 0; let g = 0; let b = 0; if (h >= 0 && h < 60) { r = c; g = x; b = 0; } else if (h >= 60 && h < 120) { r = x; g = c; b = 0; } else if (h >= 120 && h < 180) { r = 0; g = c; b = x; } else if (h >= 180 && h < 240) { r = 0; g = x; b = c; } else if (h >= 240 && h < 300) { r = x; g = 0; b = c; } else if (h >= 300 && h < 360) { r = c; g = 0; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255), a, }; } // Parse hsb/hsba colors const hsbMatch = trimmed.match( /^hsba?$\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*$$/, ); if (hsbMatch) { const h = Number.parseInt(hsbMatch[1] ?? "0", 10); const s = Number.parseInt(hsbMatch[2] ?? "0", 10); const v = Number.parseInt(hsbMatch[3] ?? "0", 10); const a = hsbMatch[4] ? Number.parseFloat(hsbMatch[4]) : 1; return hsvToRgb({ h, s, v, a }); } return null; } type Direction = "ltr" | "rtl"; interface StoreState { color: ColorValue; hsv: HSVColorValue; open: boolean; format: ColorFormat; } interface Store { subscribe: (cb: () => void) => () => void; getState: () => StoreState; setColor: (value: ColorValue) => void; setHsv: (value: HSVColorValue) => void; setOpen: (value: boolean) => void; setFormat: (value: ColorFormat) => void; notify: () => void; } const StoreContext = React.createContext(null); function useStoreContext(consumerName: string) { const context = React.useContext(StoreContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } function useStore(selector: (state: StoreState) => U): U { const store = useStoreContext("useStore"); const getSnapshot = React.useCallback( () => selector(store.getState()), [store, selector], ); return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot); } interface ColorPickerContextValue { dir: Direction; disabled?: boolean; inline?: boolean; readOnly?: boolean; required?: boolean; } const ColorPickerContext = React.createContext( null, ); function useColorPickerContext(consumerName: string) { const context = React.useContext(ColorPickerContext); if (!context) { throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``); } return context; } interface ColorPickerProps extends Omit, Pick< React.ComponentProps, "defaultOpen" | "open" | "onOpenChange" | "modal" > { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; dir?: Direction; format?: ColorFormat; defaultFormat?: ColorFormat; onFormatChange?: (format: ColorFormat) => void; name?: string; asChild?: boolean; disabled?: boolean; inline?: boolean; readOnly?: boolean; required?: boolean; } function ColorPicker(props: ColorPickerProps) { const { value: valueProp, defaultValue = "#000000", onValueChange, format: formatProp, defaultFormat = "hex", onFormatChange, defaultOpen, open: openProp, onOpenChange, name, disabled, inline, readOnly, required, ...rootProps } = props; const listenersRef = useLazyRef(() => new Set<() => void>()); const stateRef = useLazyRef(() => { const colorString = valueProp ?? defaultValue; const color = hexToRgb(colorString); return { color, hsv: rgbToHsv(color), open: openProp ?? defaultOpen ?? false, format: formatProp ?? defaultFormat, }; }); const propsRef = useAsRef({ onValueChange, onOpenChange, onFormatChange, }); const store = React.useMemo(() => { return { subscribe: (cb) => { listenersRef.current.add(cb); return () => listenersRef.current.delete(cb); }, getState: () => stateRef.current, setColor: (value: ColorValue) => { if (Object.is(stateRef.current.color, value)) return; const prevState = { ...stateRef.current }; stateRef.current.color = value; if (propsRef.current.onValueChange) { const colorString = colorToString(value, prevState.format); propsRef.current.onValueChange(colorString); } store.notify(); }, setHsv: (value: HSVColorValue) => { if (Object.is(stateRef.current.hsv, value)) return; const prevState = { ...stateRef.current }; stateRef.current.hsv = value; if (propsRef.current.onValueChange) { const colorValue = hsvToRgb(value); const colorString = colorToString(colorValue, prevState.format); propsRef.current.onValueChange(colorString); } store.notify(); }, setOpen: (value: boolean) => { if (Object.is(stateRef.current.open, value)) return; stateRef.current.open = value; if (propsRef.current.onOpenChange) { propsRef.current.onOpenChange(value); } store.notify(); }, setFormat: (value: ColorFormat) => { if (Object.is(stateRef.current.format, value)) return; stateRef.current.format = value; if (propsRef.current.onFormatChange) { propsRef.current.onFormatChange(value); } store.notify(); }, notify: () => { for (const cb of listenersRef.current) { cb(); } }, }; }, [listenersRef, stateRef, propsRef]); return ( ); } interface ColorPickerImplProps extends Omit< ColorPickerProps, | "defaultValue" | "onValueChange" | "onOpenChange" | "format" | "defaultFormat" | "onFormatChange" > {} function ColorPickerImpl(props: ColorPickerImplProps) { const { value: valueProp, dir: dirProp, defaultOpen, open: openProp, name, ref, asChild, disabled, inline, modal, readOnly, required, ...rootProps } = props; const store = useStoreContext(ROOT_IMPL_NAME); const dir = DirectionPrimitive.useDirection(dirProp); const [formTrigger, setFormTrigger] = React.useState( null, ); const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node)); const isFormControl = formTrigger ? !!formTrigger.closest("form") : true; useIsomorphicLayoutEffect(() => { if (valueProp !== undefined) { const currentState = store.getState(); const color = hexToRgb(valueProp, currentState.color.a); const hsv = rgbToHsv(color); store.setColor(color); store.setHsv(hsv); } }, [valueProp]); useIsomorphicLayoutEffect(() => { if (openProp !== undefined) { store.setOpen(openProp); } }, [openProp]); const contextValue = React.useMemo( () => ({ dir, disabled, inline, readOnly, required, }), [dir, disabled, inline, readOnly, required], ); const value = useStore((state) => rgbToHex(state.color)); const open = useStore((state) => state.open); const RootPrimitive = asChild ? SlotPrimitive.Slot : "div"; if (inline) { return ( {isFormControl && ( )} ); } return ( {isFormControl && ( )} ); } function ColorPickerTrigger( props: React.ComponentProps, ) { const { asChild, disabled, ...triggerProps } = props; const context = useColorPickerContext(TRIGGER_NAME); const isDisabled = disabled || context.disabled; const TriggerPrimitive = asChild ? SlotPrimitive.Slot : Button; return ( ); } function ColorPickerContent( props: React.ComponentProps, ) { const { asChild, className, children, ...popoverContentProps } = props; const context = useColorPickerContext(CONTENT_NAME); if (context.inline) { const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( {children} ); } return ( {children} ); } function ColorPickerArea(props: DivProps) { const { asChild, onPointerDown: onPointerDownProp, onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, className, ref, ...areaProps } = props; const propsRef = useAsRef({ onPointerDown: onPointerDownProp, onPointerMove: onPointerMoveProp, onPointerUp: onPointerUpProp, }); const context = useColorPickerContext(AREA_NAME); const store = useStoreContext(AREA_NAME); const hsv = useStore((state) => state.hsv); const isDraggingRef = React.useRef(false); const areaRef = React.useRef(null); const composedRef = useComposedRefs(ref, areaRef); const updateColorFromPosition = React.useCallback( (clientX: number, clientY: number) => { if (!areaRef.current) return; const rect = areaRef.current.getBoundingClientRect(); const x = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width)); const y = Math.max( 0, Math.min(1, 1 - (clientY - rect.top) / rect.height), ); const newHsv: HSVColorValue = { h: hsv?.h ?? 0, s: Math.round(x * 100), v: Math.round(y * 100), a: hsv?.a ?? 1, }; store.setHsv(newHsv); store.setColor(hsvToRgb(newHsv)); }, [hsv, store], ); const onPointerDown = React.useCallback( (event: React.PointerEvent) => { if (context.disabled) return; propsRef.current.onPointerDown?.(event); if (event.defaultPrevented) return; isDraggingRef.current = true; areaRef.current?.setPointerCapture(event.pointerId); updateColorFromPosition(event.clientX, event.clientY); }, [context.disabled, updateColorFromPosition, propsRef], ); const onPointerMove = React.useCallback( (event: React.PointerEvent) => { propsRef.current.onPointerMove?.(event); if (event.defaultPrevented) return; if (isDraggingRef.current) { updateColorFromPosition(event.clientX, event.clientY); } }, [updateColorFromPosition, propsRef], ); const onPointerUp = React.useCallback( (event: React.PointerEvent) => { propsRef.current.onPointerUp?.(event); if (event.defaultPrevented) return; isDraggingRef.current = false; areaRef.current?.releasePointerCapture(event.pointerId); }, [propsRef], ); const hue = hsv?.h ?? 0; const backgroundHue = hsvToRgb({ h: hue, s: 100, v: 100, a: 1 }); const AreaPrimitive = asChild ? SlotPrimitive.Slot : "div"; return (

); } function ColorPickerHueSlider( props: React.ComponentProps, ) { const { className, ...sliderProps } = props; const context = useColorPickerContext(HUE_SLIDER_NAME); const store = useStoreContext(HUE_SLIDER_NAME); const hsv = useStore((state) => state.hsv); const onValueChange = React.useCallback( (values: number[]) => { const newHsv: HSVColorValue = { h: values[0] ?? 0, s: hsv?.s ?? 0, v: hsv?.v ?? 0, a: hsv?.a ?? 1, }; store.setHsv(newHsv); store.setColor(hsvToRgb(newHsv)); }, [hsv, store], ); return ( ); } function ColorPickerAlphaSlider( props: React.ComponentProps, ) { const { className, ...sliderProps } = props; const context = useColorPickerContext(ALPHA_SLIDER_NAME); const store = useStoreContext(ALPHA_SLIDER_NAME); const color = useStore((state) => state.color); const hsv = useStore((state) => state.hsv); const onValueChange = React.useCallback( (values: number[]) => { const alpha = (values[0] ?? 0) / 100; const newColor = { ...color, a: alpha }; const newHsv = { ...hsv, a: alpha }; store.setColor(newColor); store.setHsv(newHsv); }, [color, hsv, store], ); const gradientColor = `rgb(${color?.r ?? 0}, ${color?.g ?? 0}, ${color?.b ?? 0})`; return (

); } function ColorPickerSwatch(props: DivProps) { const { asChild, className, ...swatchProps } = props; const context = useColorPickerContext(SWATCH_NAME); const color = useStore((state) => state.color); const format = useStore((state) => state.format); const backgroundStyle = React.useMemo(() => { if (!color) { return { background: "linear-gradient(to bottom right, transparent calc(50% - 1px), hsl(var(--destructive)) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) no-repeat", }; } const colorString = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`; if (color.a < 1) { return { background: `linear-gradient(${colorString}, ${colorString}), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0% 50% / 8px 8px`, }; } return { backgroundColor: colorString, }; }, [color]); const ariaLabel = !color ? "No color selected" : `Current color: ${colorToString(color, format)}`; const SwatchPrimitive = asChild ? SlotPrimitive.Slot : "div"; return ( ); } function ColorPickerEyeDropper(props: React.ComponentProps) { const { size: sizeProp, children, disabled, ...buttonProps } = props; const context = useColorPickerContext(EYE_DROPPER_NAME); const store = useStoreContext(EYE_DROPPER_NAME); const color = useStore((state) => state.color); const isDisabled = disabled || context.disabled; const onEyeDropper = React.useCallback(async () => { if (!window.EyeDropper) return; try { const eyeDropper = new window.EyeDropper(); const result = await eyeDropper.open(); if (result.sRGBHex) { const currentAlpha = color?.a ?? 1; const newColor = hexToRgb(result.sRGBHex, currentAlpha); const newHsv = rgbToHsv(newColor); store.setColor(newColor); store.setHsv(newHsv); } } catch (error) { console.warn("EyeDropper error:", error); } }, [color, store]); const hasEyeDropper = typeof window !== "undefined" && !!window.EyeDropper; if (!hasEyeDropper) return null; const size = sizeProp ?? (children ? "default" : "icon"); return ( ); } interface ColorPickerFormatSelectProps extends Omit, "value" | "onValueChange">, Pick, "size" | "className"> {} function ColorPickerFormatSelect(props: ColorPickerFormatSelectProps) { const { size, disabled, className, ...selectProps } = props; const context = useColorPickerContext(FORMAT_SELECT_NAME); const store = useStoreContext(FORMAT_SELECT_NAME); const isDisabled = disabled || context.disabled; const format = useStore((state) => state.format); const onFormatChange = React.useCallback( (value: ColorFormat) => { store.setFormat(value); }, [store], ); return ( ); } interface ColorPickerInputProps extends Omit< React.ComponentProps, "value" | "onChange" | "color" > { withoutAlpha?: boolean; } function ColorPickerInput(props: ColorPickerInputProps) { const store = useStoreContext(INPUT_NAME); const context = useColorPickerContext(INPUT_NAME); const color = useStore((state) => state.color); const format = useStore((state) => state.format); const hsv = useStore((state) => state.hsv); const onColorChange = React.useCallback( (newColor: ColorValue) => { const newHsv = rgbToHsv(newColor); store.setColor(newColor); store.setHsv(newHsv); }, [store], ); if (format === "hex") { return ( ); } if (format === "rgb") { return ( ); } if (format === "hsl") { return ( ); } if (format === "hsb") { return ( ); } } const inputGroupItemVariants = cva( "h-8 [-moz-appearance:textfield] focus-visible:z-10 focus-visible:ring-1 [&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none", { variants: { position: { first: "rounded-e-none", middle: "-ms-px rounded-none border-l-0", last: "-ms-px rounded-s-none border-l-0", isolated: "", }, }, defaultVariants: { position: "isolated", }, }, ); interface InputGroupItemProps extends React.ComponentProps, VariantProps {} function InputGroupItem({ className, position, ...props }: InputGroupItemProps) { return ( ); } interface FormatInputProps extends ColorPickerInputProps { color: ColorValue; onColorChange: (color: ColorValue) => void; context: ColorPickerContextValue; } function HexInput(props: FormatInputProps) { const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const hexValue = rgbToHex(color); const alphaValue = Math.round((color?.a ?? 1) * 100); const onHexChange = React.useCallback( (event: React.ChangeEvent) => { const value = event.target.value; const parsedColor = parseColorString(value); if (parsedColor) { onColorChange({ ...parsedColor, a: color?.a ?? 1 }); } }, [color, onColorChange], ); const onAlphaChange = React.useCallback( (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= 100) { onColorChange({ ...color, a: value / 100 }); } }, [color, onColorChange], ); if (withoutAlpha) { return ( ); } return (

); } function RgbInput(props: FormatInputProps) { const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const rValue = Math.round(color?.r ?? 0); const gValue = Math.round(color?.g ?? 0); const bValue = Math.round(color?.b ?? 0); const alphaValue = Math.round((color?.a ?? 1) * 100); const onChannelChange = React.useCallback( (channel: "r" | "g" | "b" | "a", max: number, isAlpha = false) => (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= max) { const newValue = isAlpha ? value / 100 : value; onColorChange({ ...color, [channel]: newValue }); } }, [color, onColorChange], ); return (

{!withoutAlpha && ( )}

); } function HslInput(props: FormatInputProps) { const { color, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const hsl = React.useMemo(() => rgbToHsl(color), [color]); const alphaValue = Math.round((color?.a ?? 1) * 100); const onHslChannelChange = React.useCallback( (channel: "h" | "s" | "l", max: number) => (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= max) { const newHsl = { ...hsl, [channel]: value }; const newColor = hslToRgb(newHsl, color?.a ?? 1); onColorChange(newColor); } }, [hsl, color, onColorChange], ); const onAlphaChange = React.useCallback( (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= 100) { onColorChange({ ...color, a: value / 100 }); } }, [color, onColorChange], ); return (

{!withoutAlpha && ( )}

); } interface HsbInputProps extends Omit { hsv: HSVColorValue; } function HsbInput(props: HsbInputProps) { const { hsv, onColorChange, context, withoutAlpha, className, ...inputProps } = props; const alphaValue = Math.round((hsv?.a ?? 1) * 100); const onHsvChannelChange = React.useCallback( (channel: "h" | "s" | "v", max: number) => (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= max) { const newHsv = { ...hsv, [channel]: value }; const newColor = hsvToRgb(newHsv); onColorChange(newColor); } }, [hsv, onColorChange], ); const onAlphaChange = React.useCallback( (event: React.ChangeEvent) => { const value = Number.parseInt(event.target.value, 10); if (!Number.isNaN(value) && value >= 0 && value <= 100) { const currentColor = hsvToRgb(hsv); onColorChange({ ...currentColor, a: value / 100 }); } }, [hsv, onColorChange], ); return (

{!withoutAlpha && ( )}

); } export { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerContent, ColorPickerEyeDropper, ColorPickerFormatSelect, ColorPickerHueSlider, ColorPickerInput, type ColorPickerProps, ColorPickerSwatch, ColorPickerTrigger, useStore as useColorPicker, }; 53:Tfef,"use client"; import * as React from "react"; type InputValue = string[] | string; interface VisuallyHiddenInputProps extends Omit< React.InputHTMLAttributes, "value" | "checked" | "onReset" > { value?: T; checked?: boolean; control: HTMLElement | null; bubbles?: boolean; } function VisuallyHiddenInput( props: VisuallyHiddenInputProps, ) { const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props; const isCheckInput = React.useMemo( () => type === "checkbox" || type === "radio" || type === "switch", [type], ); const inputRef = React.useRef(null); const prevValueRef = React.useRef<{ value: T | boolean | undefined; previous: T | boolean | undefined; }>({ value: isCheckInput ? checked : value, previous: isCheckInput ? checked : value, }); const prevValue = React.useMemo(() => { const currentValue = isCheckInput ? checked : value; if (prevValueRef.current.value !== currentValue) { prevValueRef.current.previous = prevValueRef.current.value; prevValueRef.current.value = currentValue; } return prevValueRef.current.previous; }, [isCheckInput, value, checked]); const [controlSize, setControlSize] = React.useState<{ width?: number; height?: number; }>({}); React.useLayoutEffect(() => { if (!control) { setControlSize({}); return; } setControlSize({ width: control.offsetWidth, height: control.offsetHeight, }); if (typeof window === "undefined") return; const resizeObserver = new ResizeObserver((entries) => { if (!Array.isArray(entries) || !entries.length) return; const entry = entries[0]; if (!entry) return; let width: number; let height: number; if ("borderBoxSize" in entry) { const borderSizeEntry = entry.borderBoxSize; const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry; width = borderSize.inlineSize; height = borderSize.blockSize; } else { width = control.offsetWidth; height = control.offsetHeight; } setControlSize({ width, height }); }); resizeObserver.observe(control, { box: "border-box" }); return () => { resizeObserver.disconnect(); }; }, [control]); React.useEffect(() => { const input = inputRef.current; if (!input) return; const inputProto = window.HTMLInputElement.prototype; const propertyKey = isCheckInput ? "checked" : "value"; const eventType = isCheckInput ? "click" : "input"; const currentValue = isCheckInput ? checked : value; const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value; const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey); const setter = descriptor?.set; if (prevValue !== currentValue && setter) { const event = new Event(eventType, { bubbles }); setter.call(input, serializedCurrentValue); input.dispatchEvent(event); } }, [prevValue, value, checked, bubbles, isCheckInput]); const composedStyle = React.useMemo(() => { return { ...style, ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}), border: 0, clip: "rect(0 0 0 0)", clipPath: "inset(50%)", height: "1px", margin: "-1px", overflow: "hidden", padding: 0, position: "absolute", whiteSpace: "nowrap", width: "1px", }; }, [style, controlSize]); return ( ); } export { VisuallyHiddenInput }; 54:T76f,/** * @see https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/compose-refs.tsx */ import * as React from "react"; type PossibleRef = React.Ref | undefined; /** * Set a given ref to a given value * This utility takes care of different types of refs: callback refs and RefObject(s) */ function setRef(ref: PossibleRef, value: T) { if (typeof ref === "function") { return ref(value); } if (ref !== null && ref !== undefined) { ref.current = value; } } /** * A utility to compose multiple refs together * Accepts callback refs and RefObject(s) */ function composeRefs(...refs: PossibleRef[]): React.RefCallback { return (node) => { let hasCleanup = false; const cleanups = refs.map((ref) => { const cleanup = setRef(ref, node); if (!hasCleanup && typeof cleanup === "function") { hasCleanup = true; } return cleanup; }); // React <19 will log an error to the console if a callback ref returns a // value. We don't use ref cleanups internally so this will only happen if a // user's ref callback returns a value, which we only expect if they are // using the cleanup functionality added in React 19. if (hasCleanup) { return () => { for (let i = 0; i < cleanups.length; i++) { const cleanup = cleanups[i]; if (typeof cleanup === "function") { cleanup(); } else { setRef(refs[i], null); } } }; } }; } /** * A custom hook that composes multiple refs * Accepts callback refs and RefObject(s) */ function useComposedRefs(...refs: PossibleRef[]): React.RefCallback { // oxlint-disable-next-line react/exhaustive-deps -- we want to memoize by all values return React.useCallback(composeRefs(...refs), refs); } export { composeRefs, useComposedRefs }; 4f:["$","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","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["button","input","popover","select","@diceui/use-as-ref","@diceui/use-isomorphic-layout-effect","@diceui/use-lazy-ref"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/color-picker.tsx","content":"$52","type":"registry:ui","target":""},{"path":"components/visually-hidden-input.tsx","content":"$53","type":"registry:component","target":""},{"path":"lib/compose-refs.ts","content":"$54","type":"registry:lib","target":""}],"className":"h-[70svh] min-h-80"}]]}]