"use client" import * as React from "react" import { Popover as InlinePopover } from "@base-ui/react/popover" import { clamp, cuspColorForHue, formatColorValue, formatCssColor, getOklchPlanePixels, hslToRgb, hsvToHsl, normalizeHue, oklchPlaneToRgb, oklchToRgb, parseColorInput, rgbaToHex, rgbToHsv, rgbToOklch, rgbToOklchPlane, type ColorFormat, type ColorParts, type HslColor, type HsvColor, type OklchColor, type RgbColor, } from "@/lib/color-picker-utils" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Popover, PopoverTrigger } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, } from "@/components/ui/select" import { Tooltip, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip" import { IconPlaceholder } from "@/components/icon-placeholder" const cossInputKeyboardFocusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background" const cossInputWrapperFocusRing = "focus-within:border-input-focus focus-within:ring-1 focus-within:ring-input-focus/24 focus-within:ring-offset-0 dark:focus-within:border-input-focus dark:focus-within:ring-input-focus/24" const cossOutlineEdge = "before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit]" const cossOutlineEdgeHighlight = "before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]" interface HsvaColor { h: number s: number v: number a: number } type EyeDropperConstructor = new () => { open: () => Promise<{ sRGBHex: string }> } declare global { interface Window { EyeDropper?: EyeDropperConstructor } } const COLOR_FORMAT_OPTIONS: Array<{ value: ColorFormat label: string }> = [ { value: "oklch", label: "OKLCH" }, { value: "hsl", label: "HSL" }, { value: "rgb", label: "RGB" }, { value: "hex", label: "Hex" }, ] const OK_HUE_TRACK = `linear-gradient(to bottom, ${Array.from({ length: 25 }, (_, i) => rgbaToHex(cuspColorForHue(i * 15))).join(", ")})` // Ignore hue noise from RGB round trips. function withHueContinuity< T extends { h: number }, >(next: T, previousHue: number, chromaFraction: number): T { const delta = Math.abs(next.h - previousHue) % 360 const angular = Math.min(delta, 360 - delta) const tolerance = Math.min(10, 1.5 / Math.max(chromaFraction, 0.15)) return angular < tolerance ? { ...next, h: previousHue } : next } const triggerGroupClass = "relative flex h-10 w-full min-w-0 items-center rounded-md border border-input bg-popover not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-input-focus/32 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] not-has-disabled:not-has-focus-visible:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:border-input-focus has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible]:shadow-none dark:bg-input/32 dark:ring-input-focus/32 dark:has-focus-visible:border-input-focus dark:not-has-focus-visible:border-white/[0.08] dark:not-has-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-has-disabled:not-has-focus-visible:before:shadow-[0_-1px_--theme(--color-white/6%)]" const fieldSurfaceClass = cn( "relative rounded-md border border-input bg-popover text-foreground shadow-xs/5 transition-shadow not-dark:bg-clip-padding dark:border-white/[0.08] dark:bg-input/32", cossOutlineEdge, cossOutlineEdgeHighlight, cossInputWrapperFocusRing ) const channelInputClass = "h-full w-full min-w-0 border-0 bg-transparent px-1 py-0 text-center text-sm leading-none tabular-nums text-foreground outline-none [transition:background-color_5000000s_ease-in-out_0s] placeholder:text-muted-foreground/72 focus:border-0 focus:outline-none focus:ring-0" const thumbShadow = "shadow-[0_0_0_1px_rgb(0_0_0/24%),0_1px_2px_rgb(0_0_0/32%)]" function Checkerboard({ className, size = 8, }: { className?: string size?: number }) { return ( ) } interface DraftInputProps extends Omit< React.InputHTMLAttributes, "value" | "onChange" > { value: string onCommitText: (text: string) => void onStep?: (direction: 1 | -1, big: boolean) => void copyValue?: () => string inputRef?: React.MutableRefObject } function DraftInput({ value, onCommitText, onStep, copyValue, inputRef, ...props }: DraftInputProps) { const [draft, setDraft] = React.useState(null) const internalRef = React.useRef(null) // Keep mouseup from clearing the focus selection. const keepSelectionRef = React.useRef(false) const setRefs = (node: HTMLInputElement | null) => { internalRef.current = node if (inputRef) inputRef.current = node } const commitDraft = () => { if (draft !== null && draft.trim() !== value) onCommitText(draft) setDraft(null) } const reselect = () => { requestAnimationFrame(() => internalRef.current?.select()) } return ( { setDraft(event.currentTarget.value) event.currentTarget.select() keepSelectionRef.current = true }} onMouseUp={(event) => { if (keepSelectionRef.current) { event.preventDefault() keepSelectionRef.current = false } }} onChange={(event) => setDraft(event.target.value)} onBlur={commitDraft} onCopy={(event) => { if (!copyValue) return const input = event.currentTarget const fullySelected = input.value.length > 0 && input.selectionStart === 0 && input.selectionEnd === input.value.length if (!fullySelected) return event.preventDefault() event.clipboardData.setData("text/plain", copyValue()) }} onKeyDown={(event) => { if (event.key === "Enter") { commitDraft() reselect() } else if (event.key === "Escape") { if (draft !== null) { event.stopPropagation() setDraft(null) } } else if ( onStep && (event.key === "ArrowUp" || event.key === "ArrowDown") ) { event.preventDefault() setDraft(null) onStep(event.key === "ArrowUp" ? 1 : -1, event.shiftKey) reselect() } }} /> ) } interface ChannelSpec { key: string label: string ariaLabel: string value: string numericValue: number step: number bigStep: number commit: (next: number) => void } function parseChannelText(text: string): number | null { const numeric = Number.parseFloat(text.replace(/[%°]/g, "").trim()) return Number.isFinite(numeric) ? numeric : null } function ChannelGroup({ channels, copyValue, disabled, }: { channels: ChannelSpec[] copyValue: string disabled?: boolean }) { return (

{channels.map((channel) => ( { const numeric = parseChannelText(text) if (numeric !== null) channel.commit(numeric) }} onStep={(direction, big) => channel.commit( channel.numericValue + direction * (big ? channel.bigStep : channel.step) ) } /> ))}

{channels.map((channel) => ( {channel.label} ))}

) } function SaturationValueArea({ hue, s, v, color, onMove, }: { hue: number s: number v: number color: string onMove: (s: number, v: number) => void }) { const canvasRef = React.useRef(null) // Avoid redraws for imperceptible hue changes. const quantizedHue = Math.round(normalizeHue(hue) * 2) / 2 React.useEffect(() => { const canvas = canvasRef.current const context = canvas?.getContext("2d") if (!canvas || !context) return const image = context.createImageData(canvas.width, canvas.height) image.data.set( getOklchPlanePixels(canvas.width, canvas.height, quantizedHue) ) context.putImageData(image, 0, 0) }, [quantizedHue]) const update = (event: React.PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect() const inset = 7 onMove( clamp( ((event.clientX - rect.left - inset) / (rect.width - inset * 2)) * 100, 0, 100 ), clamp( 100 - ((event.clientY - rect.top - inset) / (rect.height - inset * 2)) * 100, 0, 100 ) ) } return ( ) } function VerticalSlider({ ariaLabel, ariaValueMax, ariaValueNow, ariaValueText, fraction, onFraction, onStep, track, }: { ariaLabel: string ariaValueMax: number ariaValueNow: number ariaValueText?: string fraction: number onFraction: (fraction: number) => void onStep: (direction: 1 | -1, big: boolean) => void track: React.ReactNode }) { const update = (event: React.PointerEvent) => { const rect = event.currentTarget.getBoundingClientRect() const inset = 2.5 onFraction( clamp( (event.clientY - rect.top - inset) / (rect.height - inset * 2), 0, 1 ) ) } return ( ) } function CopyColorButton({ text, label = "Copy color", }: { text: string label?: string }) { const [copied, setCopied] = React.useState(false) const handleCopy = async () => { try { await navigator.clipboard.writeText(text) setCopied(true) window.setTimeout(() => setCopied(false), 1200) } catch { // Clipboard access can be unavailable outside secure browser contexts. } } return ( } > {copied ? ( ) : ( )} {copied ? "Copied" : "Copy"} ) } function AlphaScrubField({ alphaPercent, disabled, onCommit, scrubbable = true, className, inputClassName, suffixClassName, }: { alphaPercent: number disabled?: boolean onCommit: (percent: number) => void scrubbable?: boolean className?: string inputClassName?: string suffixClassName?: string }) { const inputRef = React.useRef(null) const scrubRef = React.useRef<{ startX: number startPercent: number scrubbed: boolean } | null>(null) const rounded = Math.round(alphaPercent) const scrubHandlers: React.HTMLAttributes = scrubbable ? { onPointerDown: (event) => { if (disabled) return if (document.activeElement === inputRef.current) return event.preventDefault() event.currentTarget.setPointerCapture(event.pointerId) scrubRef.current = { startX: event.clientX, startPercent: alphaPercent, scrubbed: false, } }, onPointerMove: (event) => { const scrub = scrubRef.current if (!scrub || (event.buttons & 1) === 0) return const dx = event.clientX - scrub.startX if (!scrub.scrubbed && Math.abs(dx) < 3) return scrub.scrubbed = true onCommit(clamp(scrub.startPercent + dx / 2, 0, 100)) }, onPointerUp: () => { const scrub = scrubRef.current scrubRef.current = null if (scrub && !scrub.scrubbed) inputRef.current?.focus() }, onPointerCancel: () => { scrubRef.current = null }, } : {} return (

{ const numeric = parseChannelText(text) if (numeric !== null) onCommit(clamp(numeric, 0, 100)) }} onStep={(direction, big) => onCommit(clamp(alphaPercent + direction * (big ? 10 : 1), 0, 100)) } /> %

) } export type ColorPickerProps = { value?: string color?: string onChange?: (value: string) => void label?: string disabled?: boolean showAlpha?: boolean defaultFormat?: ColorFormat variant?: "input" | "swatch" | "panel" className?: string icon?: React.ComponentType rainbowTrigger?: boolean onTriggerMouseDown?: React.MouseEventHandler onTriggerPointerDown?: React.PointerEventHandler } export function ColorPicker({ value: valueProp, color, onChange, label = "Choose color", disabled = false, showAlpha = false, defaultFormat = "hex", variant, className, icon: IconComponent, rainbowTrigger = false, onTriggerMouseDown, onTriggerPointerDown, }: ColorPickerProps) { const value = valueProp ?? color ?? "#111827" const resolvedVariant = variant ?? (color !== undefined ? "swatch" : "input") const [open, setOpen] = React.useState(false) // Keep drag coordinates independent from exact typed RGB values. const [picker, setPicker] = React.useState<{ plane: HsvColor rgb: RgbColor a: number }>(() => { const parsed = parseColorInput(value, "hex") if (!parsed) return { plane: { h: 0, s: 0, v: 0 }, rgb: { r: 0, g: 0, b: 0 }, a: 1 } return { plane: rgbToOklchPlane(parsed.rgb), rgb: parsed.rgb, a: showAlpha ? (parsed.alpha ?? 1) : 1, } }) const [format, setFormat] = React.useState(defaultFormat) const [controlledValue, setControlledValue] = React.useState({ value, showAlpha, pending: [] as string[], }) const triggerGroupRef = React.useRef(null) if ( controlledValue.value !== value || controlledValue.showAlpha !== showAlpha ) { const parsed = value ? parseColorInput(value, "hex") : null const alpha = showAlpha ? (parsed?.alpha ?? picker.a) : 1 const incoming = parsed ? rgbaToHex(parsed.rgb, alpha) : null const echoIndex = incoming === null ? -1 : controlledValue.pending.lastIndexOf(incoming) setControlledValue({ value, showAlpha, pending: echoIndex < 0 ? [] : controlledValue.pending.slice(echoIndex + 1), }) if ( parsed && (echoIndex < 0 || echoIndex === controlledValue.pending.length - 1 || controlledValue.showAlpha !== showAlpha) ) { if (rgbaToHex(picker.rgb, picker.a) !== incoming) { const derived = rgbToOklchPlane(parsed.rgb, picker.plane.h) setPicker({ plane: withHueContinuity(derived, picker.plane.h, derived.s / 100), rgb: parsed.rgb, a: alpha, }) } } } const applyState = (next: { plane: HsvColor; rgb: RgbColor; a: number }) => { setPicker(next) const hex = rgbaToHex(next.rgb, next.a) if ((valueProp !== undefined || color !== undefined) && onChange) { setControlledValue((current) => ({ ...current, pending: [...current.pending, hex], })) } onChange?.(hex) } const commitHsva = (next: HsvaColor) => { const plane: HsvColor = { h: clamp(next.h, 0, 360), s: clamp(next.s, 0, 100), v: clamp(next.v, 0, 100), } applyState({ plane, rgb: oklchPlaneToRgb(plane), a: showAlpha ? clamp(next.a, 0, 1) : 1, }) } const hsva: HsvaColor = { ...picker.plane, a: picker.a } const rgb = picker.rgb // Preserve hue for achromatic colors. const [srgbHue, setSrgbHue] = React.useState(0) const displayHsv = rgbToHsv(rgb, srgbHue) if (srgbHue !== displayHsv.h) setSrgbHue(displayHsv.h) const hsl = hsvToHsl(displayHsv) const rawOklch = rgbToOklch(rgb, hsva.h) const oklch = withHueContinuity(rawOklch, hsva.h, rawOklch.c / 0.33) const parts: ColorParts = { rgb, hsl, oklch, alpha: hsva.a } const opaqueColor = `rgb(${Math.round(rgb.r)} ${Math.round(rgb.g)} ${Math.round(rgb.b)})` const currentColor = `rgb(${Math.round(rgb.r)} ${Math.round(rgb.g)} ${Math.round(rgb.b)} / ${hsva.a})` const commitRgb = ( nextRgb: RgbColor, alpha?: number | null, intendedHue?: number ) => { const exact: RgbColor = { r: clamp(nextRgb.r, 0, 255), g: clamp(nextRgb.g, 0, 255), b: clamp(nextRgb.b, 0, 255), } const targetHue = intendedHue ?? picker.plane.h const derived = rgbToOklchPlane(exact, targetHue) applyState({ plane: withHueContinuity(derived, targetHue, derived.s / 100), rgb: exact, a: showAlpha ? clamp(alpha ?? picker.a, 0, 1) : 1, }) } const commitHsl = (nextHsl: HslColor) => commitRgb(hslToRgb(nextHsl)) const commitOklch = (nextOklch: OklchColor) => commitRgb(oklchToRgb(nextOklch), undefined, normalizeHue(nextOklch.h)) const commitText = (text: string) => { const parsed = parseColorInput(text, format) if (!parsed) return if (parsed.format && parsed.format !== format) setFormat(parsed.format) commitRgb(parsed.rgb, parsed.alpha) } const cssColor = formatCssColor(format, parts, { includeAlpha: showAlpha }) const supportsEyeDropper = typeof window !== "undefined" && window.EyeDropper !== undefined const handleEyeDropper = () => { const eyeDropperCtor = window.EyeDropper if (!eyeDropperCtor) return new eyeDropperCtor() .open() .then((result) => { const parsed = parseColorInput(result.sRGBHex, "hex") if (parsed) commitRgb(parsed.rgb) }) .catch(() => {}) } const oklchChannels: ChannelSpec[] = [ { key: "l", label: "L", ariaLabel: "OKLCH lightness", value: (oklch.l * 100).toFixed(1), numericValue: oklch.l * 100, step: 1, bigStep: 10, commit: (next) => commitOklch({ ...oklch, l: clamp(next, 0, 100) / 100 }), }, { key: "c", label: "C", ariaLabel: "OKLCH chroma", value: oklch.c.toFixed(3), numericValue: oklch.c, step: 0.01, bigStep: 0.05, commit: (next) => commitOklch({ ...oklch, c: Math.max(0, next) }), }, { key: "h", label: "H", ariaLabel: "OKLCH hue", value: oklch.h.toFixed(1), numericValue: oklch.h, step: 1, bigStep: 10, commit: (next) => commitOklch({ ...oklch, h: normalizeHue(next) }), }, ] const hslChannels: ChannelSpec[] = [ { key: "h", label: "H", ariaLabel: "HSL hue", value: hsl.h.toFixed(1), numericValue: hsl.h, step: 1, bigStep: 10, commit: (next) => commitHsl({ ...hsl, h: normalizeHue(next) }), }, { key: "s", label: "S", ariaLabel: "HSL saturation", value: hsl.s.toFixed(1), numericValue: hsl.s, step: 1, bigStep: 10, commit: (next) => commitHsl({ ...hsl, s: clamp(next, 0, 100) }), }, { key: "l", label: "L", ariaLabel: "HSL lightness", value: hsl.l.toFixed(1), numericValue: hsl.l, step: 1, bigStep: 10, commit: (next) => commitHsl({ ...hsl, l: clamp(next, 0, 100) }), }, ] const rgbChannels: ChannelSpec[] = (["r", "g", "b"] as const).map( (channel) => ({ key: channel, label: channel.toUpperCase(), ariaLabel: { r: "Red", g: "Green", b: "Blue" }[channel], value: String(Math.round(rgb[channel])), numericValue: rgb[channel], step: 1, bigStep: 10, commit: (next) => commitRgb({ ...rgb, [channel]: clamp(next, 0, 255) }), }) ) const panel = (

commitHsva({ ...hsva, s, v })} />

{showAlpha && ( commitHsva({ ...hsva, a: 1 - fraction }) } onStep={(direction, big) => commitHsva({ ...hsva, a: clamp(hsva.a + direction * (big ? 0.1 : 0.01), 0, 1), }) } track={ <> } /> )} commitHsva({ ...hsva, h: fraction * 360 }) } onStep={(direction, big) => commitHsva({ ...hsva, h: clamp(hsva.h - direction * (big ? 10 : 1), 0, 360), }) } track={ } />

{supportsEyeDropper ? ( } > Pick color from screen ) : null}

cssColor} value={formatColorValue(format, parts)} onCommitText={commitText} /> {showAlpha && ( commitHsva({ ...hsva, a: percent / 100 }) } /> )}

) if (resolvedVariant === "panel") return panel return ( {resolvedVariant === "swatch" ? ( } > {rainbowTrigger ? ( ) : (

} > cssColor} disabled={disabled} value={formatColorValue(format, parts)} onCommitText={commitText} /> {showAlpha && ( commitHsva({ ...hsva, a: percent / 100 })} /> )}

)} {panel} ) } export function ColorPickerPanel({ className, color, label, onChange, showAlpha = false, }: { className?: string color: string label: string onChange: (color: string) => void showAlpha?: boolean }) { return ( ) } function InlineColorPopoverContent({ anchor, align, sideOffset, className, ...props }: InlinePopover.Popup.Props & Pick) { return ( ) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number }