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/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"] 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/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"] 52:T1372a,"use client"; import { Input as InputPrimitive } from "@base-ui/react/input"; import { Check, ChevronDown, Copy, Pipette } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ForwardedRef, forwardRef, type HTMLAttributes, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type RefObject, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; // Shared motion tokens — inlined so the registry file is self-contained. const EASE_OUT = [0.16, 1, 0.3, 1] as const; const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; const SPRING_PANEL = { type: "spring" as const, stiffness: 420, damping: 40, mass: 0.5, }; const controlCornerClassName = "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]"; const controlCornerInheritClassName = "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]"; const FORMAT_OPTIONS = ["HEX", "RGB", "HSL", "OKLCH"] as const; const FORMAT_MENU_SOFT_EASE = [0.22, 1, 0.36, 1] as const; const HEX_INPUT_SANITIZE_PATTERN = /[^0-9a-fA-F]/g; const HEX_HASH_PREFIX = /^#/; const HEX_RGB_PATTERN = /^[0-9A-F]{6}$/; const HEX_RGBA_PATTERN = /^[0-9A-F]{8}$/; const formatMenuPanelClassName = "absolute top-full left-0 z-50 mt-1.5 w-28 overflow-hidden border border-[color:var(--color-border)] bg-[color:var(--color-card)] p-1 text-[color:var(--color-card-foreground)] shadow-[0_10px_28px_-20px_rgba(15,23,42,0.28)] dark:shadow-[0_12px_32px_-22px_rgba(0,0,0,0.5)]"; const formatMenuItemClassName = "relative w-full px-3 py-1.5 text-left text-sm outline-none transition-[color,transform] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"; const formatMenuHighlightClassName = "absolute inset-0 bg-[color:var(--color-accent)]"; const formatMenuHighlightTransition = { type: "spring" as const, stiffness: 520, damping: 34, mass: 0.72, }; const formatTriggerTransitionClassName = "transition-[color,background-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]"; const componentThemeClassName = "[--ic-background:#ffffff] [--ic-foreground:#111111] [--ic-primary:#111111] [--ic-secondary:#646b75] [--ic-surface-border:#e9edf2] [--ic-border:#e3e7ec] [--ic-card:#ffffff] [--ic-card-foreground:#111111] [--ic-muted:#f5f7fa] [--ic-muted-foreground:#6d7480] [--ic-accent:#f3f5f8] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--ic-accent-foreground:#111111] [--ic-input:#e3e7ec] [--ic-ring:rgba(17,17,17,0.16)] [--ic-destructive:#dc2626] [--ic-paper:#fcfcfd] [--ic-popover-foreground:#111111] [--ic-brand:#0ea5e9] [--ic-brand-soft:#bae6fd] [--ic-shadow-soft:0_18px_38px_-24px_rgba(15,23,42,0.35)] [--ic-chart-1:oklch(0.52_0.19_254)] [--ic-chart-2:oklch(0.74_0.11_232)] [--ic-chart-3:oklch(0.42_0.16_262)] [--ic-chart-4:oklch(0.84_0.07_228)] [--ic-chart-5:oklch(0.62_0.14_240)] [--color-background:var(--ic-background)] [--color-foreground:var(--ic-foreground)] [--color-primary:var(--ic-primary)] [--color-secondary:var(--ic-secondary)] [--color-border:var(--ic-border)] [--color-card:var(--ic-card)] [--color-card-foreground:var(--ic-card-foreground)] [--color-muted:var(--ic-muted)] [--color-muted-foreground:var(--ic-muted-foreground)] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] [--color-input:var(--ic-input)] [--color-ring:var(--ic-ring)] [--color-destructive:var(--ic-destructive)] [--color-paper:var(--ic-paper)] [--color-popover-foreground:var(--ic-popover-foreground)] [--color-brand:var(--ic-brand)] [--color-brand-soft:var(--ic-brand-soft)] [--color-chart-1:var(--ic-chart-1)] [--color-chart-2:var(--ic-chart-2)] [--color-chart-3:var(--ic-chart-3)] [--color-chart-4:var(--ic-chart-4)] [--color-chart-5:var(--ic-chart-5)] dark:[--ic-background:#111111] dark:[--ic-foreground:#f6f3ec] dark:[--ic-primary:#f6f3ec] dark:[--ic-secondary:#cbc6bb] dark:[--ic-surface-border:#2a2a25] dark:[--ic-border:#2b2a25] dark:[--ic-card:#111111] dark:[--ic-card-foreground:#f6f3ec] dark:[--ic-muted:#171716] dark:[--ic-muted-foreground:#9a958a] dark:[--ic-accent:#1a1a18] [--color-accent:var(--ic-accent)] [--color-accent-foreground:var(--ic-accent-foreground)] dark:[--ic-accent-foreground:#f6f3ec] dark:[--ic-input:#2b2a25] dark:[--ic-ring:rgba(246,243,236,0.18)] dark:[--ic-destructive:#f87171] dark:[--ic-paper:#171716] dark:[--ic-popover-foreground:#f6f3ec] dark:[--ic-brand:#38bdf8] dark:[--ic-brand-soft:#0c4a6e] dark:[--ic-shadow-soft:0_20px_44px_-28px_rgba(0,0,0,0.6)] dark:[--ic-chart-1:oklch(0.68_0.17_250)] dark:[--ic-chart-2:oklch(0.82_0.09_225)] dark:[--ic-chart-3:oklch(0.58_0.15_260)] dark:[--ic-chart-4:oklch(0.75_0.12_235)] dark:[--ic-chart-5:oklch(0.88_0.06_220)]"; const alphaCheckerClassName = "bg-[repeating-conic-gradient(var(--color-muted)_0%_25%,transparent_0%_50%)] bg-[length:10px_10px]"; function ColorSwatch({ alpha = 100, className, color, shape = "default", }: { alpha?: number; className?: string; color: string; shape?: ColorPickerSwatchShape; }) { const hasTransparency = alpha < 100; const shapeClassName = shape === "circle" ? "rounded-full" : controlCornerClassName; return ( ); } const colorPickerShellWidthClassName = "w-[300px] max-w-full"; const popoverTriggerClassName = cn( "flex h-10 items-center gap-2.5 border border-border bg-card px-3 text-left text-foreground text-sm transition-colors hover:border-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)]", colorPickerShellWidthClassName, controlCornerClassName ); const swatchTriggerClassName = cn( "inline-flex shrink-0 transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--color-ring)]", controlCornerClassName ); type Format = (typeof FORMAT_OPTIONS)[number]; type Rgb = { r: number; g: number; b: number }; type ParsedHexColor = Rgb & { alpha?: number }; export type ColorPickerFormat = Format; export type ColorPickerSwatchShape = "default" | "circle"; export type ColorPickerChangeDetail = { alpha: number; hex: string; hsl: string; oklch: string; rgb: string; }; export interface ColorPickerProps { /** Accessible label when the picker is not labelled by an external element. */ "aria-label"?: string; /** ID of an external label element. */ "aria-labelledby"?: string; /** Merged onto the outer picker shell. */ className?: string; /** Starting alpha percentage (0–100) when `defaultValue` has no alpha channel. */ defaultAlpha?: number; /** Initial color format for the readout row. */ defaultFormat?: ColorPickerFormat; /** Starting color for uncontrolled usage (3-, 6-, or 8-digit hex, with or without `#`). */ defaultValue?: string; /** Uncontrolled initial open state for `variant="popover"`. */ defaultOpen?: boolean; /** Disables interaction and lowers opacity. */ disabled?: boolean; /** Root element id. */ id?: string; /** Hidden input name for native form submission. */ name?: string; /** Called when the selected color changes. Emits `#RRGGBB` or `#RRGGBBAA` when alpha is below 100%. */ onChange?: (color: string, detail: ColorPickerChangeDetail) => void; /** Fires when EyeDropper is unavailable (no `window.alert` is shown). */ onEyedropperUnsupported?: () => void; /** Controlled open state for `variant="popover"`. */ onOpenChange?: (open: boolean) => void; /** Called when the color settles (pointer up, blur, or Enter). */ onValueCommit?: (color: string, detail: ColorPickerChangeDetail) => void; /** Controlled open state for `variant="popover"`. */ open?: boolean; /** Placeholder for the popover trigger when no color is selected. */ placeholder?: string; /** Quick-select swatches shown above the saturation field. */ presets?: string[]; /** Shows a copy-to-clipboard control in the footer row. */ showCopy?: boolean; /** Corner style for swatch triggers and preset chips. */ swatchShape?: ColorPickerSwatchShape; /** Hides alpha controls when false and keeps output opaque. */ showAlpha?: boolean; /** Hides the pipette control when false. */ showEyedropper?: boolean; /** Controlled hex color (3-, 6-, or 8-digit, with or without `#`). */ value?: string; /** Inline panel, field popover trigger, or swatch popover trigger. */ variant?: "inline" | "popover" | "swatch"; } /** @deprecated Use ColorPicker instead. */ export type FluidColorPickerProps = ColorPickerProps; function getFormatMenuMotion() { return { animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: -6 }, initial: { opacity: 0, scale: 0.94, y: -8 }, transition: { duration: 0.26, ease: FORMAT_MENU_SOFT_EASE }, }; } function getFormatItemMotion(index: number) { return { animate: { opacity: 1, x: 0 }, initial: { opacity: 0, x: -8 }, transition: { delay: 0.04 + index * 0.035, duration: 0.22, ease: FORMAT_MENU_SOFT_EASE, }, }; } function hsvToRgb(h: number, s: number, v: number) { const saturation = s / 100; const brightness = v / 100; const chroma = brightness * saturation; const intermediate = chroma * (1 - Math.abs(((h / 60) % 2) - 1)); const minimum = brightness - chroma; let red = 0; let green = 0; let blue = 0; if (h < 60) { red = chroma; green = intermediate; } else if (h < 120) { red = intermediate; green = chroma; } else if (h < 180) { green = chroma; blue = intermediate; } else if (h < 240) { green = intermediate; blue = chroma; } else if (h < 300) { red = intermediate; blue = chroma; } else { red = chroma; blue = intermediate; } return { r: Math.round((red + minimum) * 255), g: Math.round((green + minimum) * 255), b: Math.round((blue + minimum) * 255), }; } function toHex(value: number) { return value.toString(16).padStart(2, "0").toUpperCase(); } function rgbToHex(red: number, green: number, blue: number) { return `${toHex(red)}${toHex(green)}${toHex(blue)}`; } function rgbToHsv(red: number, green: number, blue: number) { const normalizedRed = red / 255; const normalizedGreen = green / 255; const normalizedBlue = blue / 255; const max = Math.max(normalizedRed, normalizedGreen, normalizedBlue); const min = Math.min(normalizedRed, normalizedGreen, normalizedBlue); const delta = max - min; let hue = 0; if (delta !== 0) { if (max === normalizedRed) { hue = ((normalizedGreen - normalizedBlue) / delta) % 6; } else if (max === normalizedGreen) { hue = (normalizedBlue - normalizedRed) / delta + 2; } else { hue = (normalizedRed - normalizedGreen) / delta + 4; } hue *= 60; if (hue < 0) { hue += 360; } } return { h: hue, s: max === 0 ? 0 : (delta / max) * 100, v: max * 100, }; } function rgbToHsl(red: number, green: number, blue: number) { const normalizedRed = red / 255; const normalizedGreen = green / 255; const normalizedBlue = blue / 255; const max = Math.max(normalizedRed, normalizedGreen, normalizedBlue); const min = Math.min(normalizedRed, normalizedGreen, normalizedBlue); const lightness = (max + min) / 2; let hue = 0; let saturation = 0; if (max !== min) { const delta = max - min; saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min); if (max === normalizedRed) { hue = ((normalizedGreen - normalizedBlue) / delta) % 6; } else if (max === normalizedGreen) { hue = (normalizedBlue - normalizedRed) / delta + 2; } else { hue = (normalizedRed - normalizedGreen) / delta + 4; } hue *= 60; if (hue < 0) { hue += 360; } } return { h: Math.round(hue), s: Math.round(saturation * 100), l: Math.round(lightness * 100), }; } function srgbToLinear(channel: number) { const normalized = channel / 255; return normalized <= 0.040_45 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4; } function rgbToOklch(red: number, green: number, blue: number) { const linearRed = srgbToLinear(red); const linearGreen = srgbToLinear(green); const linearBlue = srgbToLinear(blue); const lightnessCandidate = 0.412_221_470_8 * linearRed + 0.536_332_536_3 * linearGreen + 0.051_445_992_9 * linearBlue; const mediumCandidate = 0.211_903_498_2 * linearRed + 0.680_699_545_1 * linearGreen + 0.107_396_956_6 * linearBlue; const shortCandidate = 0.088_302_461_9 * linearRed + 0.281_718_837_6 * linearGreen + 0.629_978_700_5 * linearBlue; const lightness = 0.210_454_255_3 * lightnessCandidate ** (1 / 3) + 0.793_617_785 * mediumCandidate ** (1 / 3) - 0.004_072_046_8 * shortCandidate ** (1 / 3); const axisA = 1.977_998_495_1 * lightnessCandidate ** (1 / 3) - 2.428_592_205 * mediumCandidate ** (1 / 3) + 0.450_593_709_9 * shortCandidate ** (1 / 3); const axisB = 0.025_904_037_1 * lightnessCandidate ** (1 / 3) + 0.782_771_766_2 * mediumCandidate ** (1 / 3) - 0.808_675_766 * shortCandidate ** (1 / 3); const chroma = Math.hypot(axisA, axisB); let hue = (Math.atan2(axisB, axisA) * 180) / Math.PI; if (hue < 0) { hue += 360; } return { l: lightness, c: chroma, h: hue }; } function clampPercent(value: number) { return Math.max(0, Math.min(100, Math.round(value))); } function normalizeHue(hue: number) { const normalized = hue % 360; return normalized < 0 ? normalized + 360 : normalized; } function clampChannel(value: number, min = 0, max = 255) { return Math.max(min, Math.min(max, Math.round(value))); } function linearToSrgb(channel: number) { const absolute = Math.abs(channel); if (absolute > 0.003_130_8) { return Math.sign(channel) * (1.055 * absolute ** (1 / 2.4) - 0.055); } return 12.92 * channel; } function hslToRgb(hue: number, saturation: number, lightness: number) { const saturationNormalized = saturation / 100; const lightnessNormalized = lightness / 100; const chroma = (1 - Math.abs(2 * lightnessNormalized - 1)) * saturationNormalized; const intermediate = chroma * (1 - Math.abs(((hue / 60) % 2) - 1)); const minimum = lightnessNormalized - chroma / 2; let red = 0; let green = 0; let blue = 0; if (hue < 60) { red = chroma; green = intermediate; } else if (hue < 120) { red = intermediate; green = chroma; } else if (hue < 180) { green = chroma; blue = intermediate; } else if (hue < 240) { green = intermediate; blue = chroma; } else if (hue < 300) { red = intermediate; blue = chroma; } else { red = chroma; blue = intermediate; } return { r: clampChannel((red + minimum) * 255), g: clampChannel((green + minimum) * 255), b: clampChannel((blue + minimum) * 255), }; } function oklchToRgb(lightness: number, chroma: number, hue: number) { const hueRadians = (hue * Math.PI) / 180; const axisA = chroma * Math.cos(hueRadians); const axisB = chroma * Math.sin(hueRadians); const lightnessPrime = lightness + 0.396_337_777_4 * axisA + 0.215_803_757_3 * axisB; const mediumPrime = lightness - 0.105_561_345_8 * axisA - 0.063_854_172_8 * axisB; const shortPrime = lightness - 0.089_484_177_5 * axisA - 1.291_485_548 * axisB; const linearRed = 4.076_741_662_1 * lightnessPrime ** 3 - 3.307_711_591_3 * mediumPrime ** 3 + 0.230_969_929_2 * shortPrime ** 3; const linearGreen = -1.268_438_004_6 * lightnessPrime ** 3 + 2.609_757_401_1 * mediumPrime ** 3 - 0.341_319_396_5 * shortPrime ** 3; const linearBlue = -0.004_196_086_3 * lightnessPrime ** 3 - 0.703_418_614_7 * mediumPrime ** 3 + 1.707_614_701 * shortPrime ** 3; return { r: clampChannel(linearToSrgb(linearRed) * 255), g: clampChannel(linearToSrgb(linearGreen) * 255), b: clampChannel(linearToSrgb(linearBlue) * 255), }; } function expandShortHex(normalized: string) { if (normalized.length === 3) { return normalized .split("") .map((character) => `${character}${character}`) .join(""); } if (normalized.length === 4) { return normalized .split("") .map((character) => `${character}${character}`) .join(""); } return normalized; } function parseHexColor(input?: string): ParsedHexColor | null { if (!input) { return null; } const normalized = expandShortHex( input.trim().replace(HEX_HASH_PREFIX, "").toUpperCase() ); if (HEX_RGB_PATTERN.test(normalized)) { return { r: Number.parseInt(normalized.slice(0, 2), 16), g: Number.parseInt(normalized.slice(2, 4), 16), b: Number.parseInt(normalized.slice(4, 6), 16), }; } if (HEX_RGBA_PATTERN.test(normalized)) { const alphaChannel = Number.parseInt(normalized.slice(6, 8), 16); return { r: Number.parseInt(normalized.slice(0, 2), 16), g: Number.parseInt(normalized.slice(2, 4), 16), b: Number.parseInt(normalized.slice(4, 6), 16), alpha: Math.round((alphaChannel / 255) * 100), }; } return null; } function formatColorValue(rgb: Rgb, alpha: number) { const hex = `#${rgbToHex(rgb.r, rgb.g, rgb.b)}`; if (alpha >= 100) { return hex; } const alphaChannel = Math.max( 0, Math.min(255, Math.round((alpha / 100) * 255)) ); return `${hex}${toHex(alphaChannel)}`; } function formatRgbString(rgb: Rgb, alpha: number) { if (alpha >= 100) { return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; } const normalizedAlpha = Math.round((alpha / 100) * 100) / 100; return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${normalizedAlpha})`; } function formatHslString(rgb: Rgb, alpha: number) { const { h, s, l } = rgbToHsl(rgb.r, rgb.g, rgb.b); if (alpha >= 100) { return `hsl(${h}, ${s}%, ${l}%)`; } const normalizedAlpha = Math.round((alpha / 100) * 100) / 100; return `hsla(${h}, ${s}%, ${l}%, ${normalizedAlpha})`; } function formatOklchString(rgb: Rgb, alpha: number) { const { l, c, h } = rgbToOklch(rgb.r, rgb.g, rgb.b); const roundedLightness = Math.round(l * 1000) / 1000; const roundedChroma = Math.round(c * 1000) / 1000; const roundedHue = Math.round(h); if (alpha >= 100) { return `oklch(${roundedLightness} ${roundedChroma} ${roundedHue})`; } const normalizedAlpha = Math.round((alpha / 100) * 100) / 100; return `oklch(${roundedLightness} ${roundedChroma} ${roundedHue} / ${normalizedAlpha})`; } function buildChangeDetail(rgb: Rgb, alpha: number): ColorPickerChangeDetail { return { alpha, hex: formatColorValue(rgb, alpha), hsl: formatHslString(rgb, alpha), oklch: formatOklchString(rgb, alpha), rgb: formatRgbString(rgb, alpha), }; } function getInitialAlpha(color: string | undefined, fallbackAlpha: number) { const parsed = parseHexColor(color); if (parsed?.alpha !== undefined) { return clampPercent(parsed.alpha); } return clampPercent(fallbackAlpha); } const DEFAULT_RGB: Rgb = { r: 59, g: 130, b: 246 }; function getInitialRgb(color?: string): Rgb { const parsed = parseHexColor(color); if (!parsed) { return DEFAULT_RGB; } return { r: parsed.r, g: parsed.g, b: parsed.b }; } function normalizeColorValue(color: string, alphaFallback = 100) { const parsed = parseHexColor(color); if (!parsed) { return null; } const { alpha, ...rgb } = parsed; return formatColorValue(rgb, alpha ?? alphaFallback); } function getPickerHsv(rgb: Rgb) { const { h, s, v } = rgbToHsv(rgb.r, rgb.g, rgb.b); return { h, s: Math.round(s), v: Math.round(v), }; } function getMaxOklchChroma(lightness: number, hue: number) { let max = 0; for (let chroma = 0; chroma <= 0.5; chroma += 0.002) { const rgb = oklchToRgb(lightness, chroma, hue); const roundTrip = rgbToOklch(rgb.r, rgb.g, rgb.b); if (roundTrip.c >= chroma - 0.006) { max = chroma; } else { break; } } return Math.max(0.001, Math.round(max * 1000) / 1000); } function getDisplayHex(rgb: Rgb, alpha: number, showAlpha: boolean) { const hex = rgbToHex(rgb.r, rgb.g, rgb.b); if (!showAlpha || alpha >= 100) { return hex; } const alphaChannel = Math.max( 0, Math.min(255, Math.round((alpha / 100) * 255)) ); return `${hex}${toHex(alphaChannel)}`; } type ColorEmitMode = "none" | "change" | "commit"; function buildNormalizedColor( nextRgb: Rgb, nextAlpha: number, showAlpha: boolean ) { const resolvedAlpha = showAlpha ? clampPercent(nextAlpha) : 100; const normalized = formatColorValue(nextRgb, resolvedAlpha); const detail = buildChangeDetail(nextRgb, resolvedAlpha); return { detail, normalized, resolvedAlpha }; } function useControllableOpen( openProp: boolean | undefined, defaultOpen: boolean, onOpenChange?: (open: boolean) => void ) { const [internalOpen, setInternalOpen] = useState(defaultOpen); const isControlled = openProp !== undefined; const open = isControlled ? openProp : internalOpen; const setOpen = useCallback( (next: boolean) => { if (!isControlled) { setInternalOpen(next); } onOpenChange?.(next); }, [isControlled, onOpenChange] ); return [open, setOpen] as const; } type ColorPickerController = ReturnType; function useColorPickerController({ defaultAlpha = 100, defaultFormat = "HEX", defaultValue = "#3B82F6", onChange, onValueCommit, showAlpha = true, value, }: Pick< ColorPickerProps, | "defaultAlpha" | "defaultFormat" | "defaultValue" | "onChange" | "onValueCommit" | "showAlpha" | "value" >) { const resolvedDefaultAlpha = clampPercent(defaultAlpha); const initialRgb = getInitialRgb(value ?? defaultValue); const initialAlpha = showAlpha ? getInitialAlpha(value ?? defaultValue, resolvedDefaultAlpha) : 100; const initialPickerHsv = getPickerHsv(initialRgb); const [rgb, setRgb] = useState(initialRgb); const [pickerHue, setPickerHue] = useState(initialPickerHsv.h); const [pickerSat, setPickerSat] = useState(initialPickerHsv.s); const [pickerVal, setPickerVal] = useState(initialPickerHsv.v); const [alpha, setAlpha] = useState(initialAlpha); const [format, setFormat] = useState(defaultFormat); const [hexInput, setHexInput] = useState(""); const [hexFocused, setHexFocused] = useState(false); const [hexInvalid, setHexInvalid] = useState(false); const onChangeRef = useRef(onChange); const onValueCommitRef = useRef(onValueCommit); const rgbRef = useRef(initialRgb); const pickerHueRef = useRef(initialPickerHsv.h); const pickerSatRef = useRef(initialPickerHsv.s); const pickerValRef = useRef(initialPickerHsv.v); const alphaRef = useRef(initialAlpha); const showAlphaRef = useRef(showAlpha); const lastSyncedColorRef = useRef( normalizeColorValue( value ?? defaultValue, showAlpha ? resolvedDefaultAlpha : 100 ) ?? formatColorValue(initialRgb, initialAlpha) ); const lastNotifiedColorRef = useRef(lastSyncedColorRef.current); const lastCommittedColorRef = useRef(lastSyncedColorRef.current); const isEditingRef = useRef(false); const isDraggingSvRef = useRef(false); const isDraggingHueRef = useRef(false); const isDraggingAlphaRef = useRef(false); onChangeRef.current = onChange; onValueCommitRef.current = onValueCommit; rgbRef.current = rgb; alphaRef.current = alpha; pickerHueRef.current = pickerHue; pickerSatRef.current = pickerSat; pickerValRef.current = pickerVal; showAlphaRef.current = showAlpha; const effectiveAlpha = showAlpha ? alpha : 100; const colorValue = formatColorValue(rgb, effectiveAlpha); const hex = rgbToHex(rgb.r, rgb.g, rgb.b); const hueColor = hsvToRgb(pickerHue, 100, 100); const hueHex = rgbToHex(hueColor.r, hueColor.g, hueColor.b); const hsl = useMemo( () => rgbToHsl(rgb.r, rgb.g, rgb.b), [rgb.b, rgb.g, rgb.r] ); const oklch = useMemo( () => rgbToOklch(rgb.r, rgb.g, rgb.b), [rgb.b, rgb.g, rgb.r] ); const oklchMaxChroma = useMemo( () => getMaxOklchChroma(oklch.l, oklch.h), [oklch.h, oklch.l] ); const syncPickerFromRgb = useCallback((nextRgb: Rgb) => { const nextPickerHsv = getPickerHsv(nextRgb); const nextHue = nextPickerHsv.s === 0 ? pickerHueRef.current : nextPickerHsv.h; pickerHueRef.current = nextHue; pickerSatRef.current = nextPickerHsv.s; pickerValRef.current = nextPickerHsv.v; setPickerHue(nextHue); setPickerSat(nextPickerHsv.s); setPickerVal(nextPickerHsv.v); }, []); const notifyChange = useCallback( (nextRgb: Rgb, nextAlpha = alphaRef.current) => { const { detail, normalized } = buildNormalizedColor( nextRgb, nextAlpha, showAlphaRef.current ); if (normalized === lastNotifiedColorRef.current) { return; } lastNotifiedColorRef.current = normalized; lastSyncedColorRef.current = normalized; onChangeRef.current?.(normalized, detail); }, [] ); const commitChange = useCallback( (nextRgb: Rgb, nextAlpha = alphaRef.current) => { const { detail, normalized } = buildNormalizedColor( nextRgb, nextAlpha, showAlphaRef.current ); if (normalized !== lastNotifiedColorRef.current) { lastNotifiedColorRef.current = normalized; lastSyncedColorRef.current = normalized; onChangeRef.current?.(normalized, detail); } if (normalized !== lastCommittedColorRef.current) { lastCommittedColorRef.current = normalized; onValueCommitRef.current?.(normalized, detail); } }, [] ); const emitColor = useCallback( ( nextRgb: Rgb, nextAlpha = alphaRef.current, mode: ColorEmitMode = "commit" ) => { if (mode === "none") { return; } if (mode === "change") { notifyChange(nextRgb, nextAlpha); return; } commitChange(nextRgb, nextAlpha); }, [commitChange, notifyChange] ); const applyColorState = useCallback( ( nextRgb: Rgb, nextAlpha: number, { emitMode = "none", syncPicker = true, }: { emitMode?: ColorEmitMode; syncPicker?: boolean } = {} ) => { const resolvedAlpha = showAlphaRef.current ? clampPercent(nextAlpha) : 100; rgbRef.current = nextRgb; setRgb(nextRgb); if (syncPicker) { syncPickerFromRgb(nextRgb); } alphaRef.current = resolvedAlpha; setAlpha(resolvedAlpha); emitColor(nextRgb, resolvedAlpha, emitMode); }, [emitColor, syncPickerFromRgb] ); const applyAlpha = useCallback( (nextAlpha: number, emitMode: ColorEmitMode = "none") => { if (!showAlphaRef.current) { return; } const clampedAlpha = clampPercent(nextAlpha); alphaRef.current = clampedAlpha; setAlpha(clampedAlpha); emitColor(rgbRef.current, clampedAlpha, emitMode); }, [emitColor] ); const applyRgb = useCallback( (nextRgb: Rgb, emitMode: ColorEmitMode = "none", syncPicker = true) => { rgbRef.current = nextRgb; setRgb(nextRgb); if (syncPicker) { syncPickerFromRgb(nextRgb); } emitColor(nextRgb, alphaRef.current, emitMode); }, [emitColor, syncPickerFromRgb] ); const applyPickerHsv = useCallback( ( nextHue: number, nextSaturation: number, nextValue: number, emitMode: ColorEmitMode = "none" ) => { const normalizedHue = normalizeHue(nextHue); const roundedSaturation = Math.max( 0, Math.min(100, Math.round(nextSaturation)) ); const roundedValue = Math.max(0, Math.min(100, Math.round(nextValue))); const nextRgb = hsvToRgb(normalizedHue, roundedSaturation, roundedValue); pickerHueRef.current = normalizedHue; pickerSatRef.current = roundedSaturation; pickerValRef.current = roundedValue; setPickerHue(normalizedHue); setPickerSat(roundedSaturation); setPickerVal(roundedValue); applyRgb(nextRgb, emitMode, false); }, [applyRgb] ); const setFromHex = useCallback( (nextValue: string, emitMode: ColorEmitMode = "commit") => { const parsed = parseHexColor(nextValue); if (!parsed) { return false; } const { alpha: parsedAlpha, ...nextRgb } = parsed; const nextAlpha = parsedAlpha !== undefined && showAlphaRef.current ? parsedAlpha : showAlphaRef.current ? alphaRef.current : 100; applyColorState(nextRgb, nextAlpha, { emitMode, syncPicker: true }); return true; }, [applyColorState] ); const setFromHsl = useCallback( (nextHue: number, nextSaturation: number, nextLightness: number) => { applyRgb(hslToRgb(nextHue, nextSaturation, nextLightness), "commit"); }, [applyRgb] ); const setFromOklch = useCallback( (nextLightness: number, nextChroma: number, nextHue: number) => { applyRgb(oklchToRgb(nextLightness, nextChroma, nextHue), "commit"); }, [applyRgb] ); const commitHexInput = useCallback( (rawValue: string, emitMode: ColorEmitMode = "commit") => { const normalized = rawValue .trim() .replace(HEX_HASH_PREFIX, "") .toUpperCase(); if (normalized.length === 8) { return setFromHex(normalized, emitMode); } if (normalized.length === 6) { return setFromHex(normalized, emitMode); } if (normalized.length === 3 || normalized.length === 4) { return setFromHex(expandShortHex(normalized), emitMode); } return false; }, [setFromHex] ); useEffect(() => { if ( !value || isEditingRef.current || hexFocused || isDraggingSvRef.current || isDraggingHueRef.current || isDraggingAlphaRef.current ) { return; } const normalizedValue = normalizeColorValue( value, showAlpha ? resolvedDefaultAlpha : 100 ); if (!normalizedValue || normalizedValue === lastSyncedColorRef.current) { return; } const parsed = parseHexColor(normalizedValue); if (!parsed) { return; } const { alpha: parsedAlpha, ...nextRgb } = parsed; const nextAlpha = showAlpha ? (parsedAlpha ?? resolvedDefaultAlpha) : 100; lastSyncedColorRef.current = normalizedValue; lastNotifiedColorRef.current = normalizedValue; lastCommittedColorRef.current = normalizedValue; rgbRef.current = nextRgb; alphaRef.current = nextAlpha; setRgb(nextRgb); setAlpha(nextAlpha); syncPickerFromRgb(nextRgb); }, [hexFocused, resolvedDefaultAlpha, showAlpha, syncPickerFromRgb, value]); useEffect(() => { if (!showAlpha && alpha !== 100) { applyAlpha(100, "none"); } }, [alpha, applyAlpha, showAlpha]); return { alpha, applyAlpha, applyPickerHsv, applyRgb, colorValue, commitChange, commitHexInput, effectiveAlpha, format, hex, hexFocused, hexInput, hexInvalid, hsl, hueHex, isDraggingAlphaRef, isDraggingHueRef, isDraggingSvRef, isEditingRef, oklch, oklchMaxChroma, pickerHue, pickerSat, pickerVal, rgb, setFormat, setFromHsl, setFromOklch, setFromHex, setHexFocused, setHexInput, setHexInvalid, }; } function PresetSwatches({ disabled, onSelect, presets, swatchShape = "default", }: { disabled?: boolean; onSelect: (color: string) => void; presets: string[]; swatchShape?: ColorPickerSwatchShape; }) { if (presets.length === 0) { return null; } const validPresets = presets.filter( (preset) => parseHexColor(preset) !== null ); if (validPresets.length === 0) { return null; } return (

); } // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: panel coordinates SV/hue/alpha drags, format menu, and readouts in one shell. function ColorPickerPanel({ ariaLabel, ariaLabelledBy, controller, disabled, fillWidth = false, formatMenuId, formatTriggerId, id, onEyedropperUnsupported, panelRef, presets, showAlpha, showCopy, showEyedropper, svFieldId, swatchShape = "default", }: { ariaLabel?: string; ariaLabelledBy?: string; controller: ColorPickerController; disabled?: boolean; fillWidth?: boolean; formatMenuId: string; formatTriggerId: string; id?: string; onEyedropperUnsupported?: () => void; panelRef?: RefObject; presets?: string[]; showAlpha: boolean; showCopy: boolean; showEyedropper: boolean; svFieldId: string; swatchShape?: ColorPickerSwatchShape; }) { const { alpha, applyAlpha, applyPickerHsv, applyRgb, colorValue, commitChange, commitHexInput, effectiveAlpha, format, hexFocused, hexInput, hexInvalid, hsl, hueHex, isDraggingAlphaRef, isDraggingHueRef, isDraggingSvRef, isEditingRef, oklch, oklchMaxChroma, pickerHue, pickerSat, pickerVal, rgb, setFormat, setFromHsl, setFromOklch, setFromHex, setHexFocused, setHexInput, setHexInvalid, } = controller; const { r, g, b } = rgb; const svRef = useRef(null); const dragRef = useRef(null); const formatMenuRef = useRef(null); const rgbRef = useRef(rgb); const alphaRef = useRef(alpha); const pickerHueRef = useRef(pickerHue); const pickerSatRef = useRef(pickerSat); const pickerValRef = useRef(pickerVal); const [formatOpen, setFormatOpen] = useState(false); const [hoveredFormat, setHoveredFormat] = useState(null); const [copied, setCopied] = useState(false); const copyTimeoutRef = useRef(null); const formatMenuMotion = getFormatMenuMotion(); useEffect( () => () => { if (copyTimeoutRef.current !== null) { window.clearTimeout(copyTimeoutRef.current); } }, [] ); rgbRef.current = rgb; alphaRef.current = alpha; pickerHueRef.current = pickerHue; pickerSatRef.current = pickerSat; pickerValRef.current = pickerVal; const updateSV = useCallback( ( event: { clientX: number; clientY: number }, emitMode: ColorEmitMode = "none" ) => { const element = svRef.current; if (!element) { return; } const rect = element.getBoundingClientRect(); if (rect.width <= 0 || rect.height <= 0) { return; } 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) ); applyPickerHsv( pickerHueRef.current, Math.round(x * 100), Math.round((1 - y) * 100), emitMode ); }, [applyPickerHsv] ); useEffect(() => { const move = (event: PointerEvent) => { if (dragRef.current === "sv") { updateSV(event, "none"); } }; const up = () => { if ( dragRef.current === "sv" || dragRef.current === "hue" || dragRef.current === "alpha" ) { commitChange(rgbRef.current, alphaRef.current); } dragRef.current = null; isDraggingSvRef.current = false; isDraggingHueRef.current = false; isDraggingAlphaRef.current = false; }; window.addEventListener("pointermove", move); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, [ commitChange, isDraggingAlphaRef, isDraggingHueRef, isDraggingSvRef, updateSV, ]); useEffect(() => { if (!formatOpen) { return; } const handlePointerDown = (event: PointerEvent) => { const target = event.target as Node; if (formatMenuRef.current?.contains(target)) { return; } setFormatOpen(false); setHoveredFormat(null); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.stopPropagation(); setFormatOpen(false); setHoveredFormat(null); } }; window.addEventListener("pointerdown", handlePointerDown); window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("pointerdown", handlePointerDown); window.removeEventListener("keydown", handleKeyDown); }; }, [formatOpen]); useEffect(() => { if (!formatOpen) { setHoveredFormat(null); } }, [formatOpen]); const pickWithEyedropper = useCallback(async () => { const browserWindow = window as Window & { EyeDropper?: new () => { open: () => Promise<{ sRGBHex: string }> }; }; if (!browserWindow.EyeDropper) { onEyedropperUnsupported?.(); return; } try { const result = await new browserWindow.EyeDropper().open(); setFromHex(result.sRGBHex); } catch { // User cancelled the picker. } }, [onEyedropperUnsupported, setFromHex]); const copyCurrentColor = useCallback(async () => { const detail = buildChangeDetail(rgb, effectiveAlpha); const copyValue = format === "RGB" ? detail.rgb : format === "HSL" ? detail.hsl : format === "OKLCH" ? detail.oklch : detail.hex; try { await navigator.clipboard.writeText(copyValue); setCopied(true); if (copyTimeoutRef.current !== null) { window.clearTimeout(copyTimeoutRef.current); } copyTimeoutRef.current = window.setTimeout(() => { setCopied(false); copyTimeoutRef.current = null; }, 1500); } catch { // Clipboard unavailable. } }, [effectiveAlpha, format, rgb]); const handleSvKeyDown = (event: ReactKeyboardEvent) => { const step = event.shiftKey ? 5 : 1; let nextSat = pickerSatRef.current; let nextVal = pickerValRef.current; switch (event.key) { case "ArrowLeft": event.preventDefault(); nextSat = Math.max(0, nextSat - step); break; case "ArrowRight": event.preventDefault(); nextSat = Math.min(100, nextSat + step); break; case "ArrowUp": event.preventDefault(); nextVal = Math.min(100, nextVal + step); break; case "ArrowDown": event.preventDefault(); nextVal = Math.max(0, nextVal - step); break; default: return; } applyPickerHsv(pickerHueRef.current, nextSat, nextVal, "commit"); }; const handleFormatTriggerKeyDown = (event: ReactKeyboardEvent) => { if (event.key === "Escape" && formatOpen) { event.preventDefault(); setFormatOpen(false); return; } if (!formatOpen && (event.key === "ArrowDown" || event.key === "Enter")) { event.preventDefault(); setFormatOpen(true); return; } if (!formatOpen) { return; } const currentIndex = FORMAT_OPTIONS.indexOf(format); if (event.key === "ArrowDown") { event.preventDefault(); setFormat(FORMAT_OPTIONS[(currentIndex + 1) % FORMAT_OPTIONS.length]); } if (event.key === "ArrowUp") { event.preventDefault(); setFormat( FORMAT_OPTIONS[ (currentIndex - 1 + FORMAT_OPTIONS.length) % FORMAT_OPTIONS.length ] ); } }; const displayHex = getDisplayHex(rgb, effectiveAlpha, showAlpha); return (

{presets && presets.length > 0 ? ( setFromHex(color)} presets={presets} swatchShape={swatchShape} /> ) : null}

{ if (disabled) { return; } dragRef.current = "sv"; isDraggingSvRef.current = true; event.currentTarget.setPointerCapture(event.pointerId); updateSV(event, "none"); }} ref={svRef} role="application" style={{ backgroundColor: `#${hueHex}` }} tabIndex={disabled ? -1 : 0} >

{ applyPickerHsv( Number(event.target.value), pickerSatRef.current, pickerValRef.current, "none" ); }} onPointerDown={(event) => { dragRef.current = "hue"; isDraggingHueRef.current = true; event.currentTarget.setPointerCapture(event.pointerId); }} step={1} type="range" value={pickerHue} />

{showAlpha ? (

{ applyAlpha(Number(event.target.value), "none"); }} onPointerDown={(event) => { dragRef.current = "alpha"; isDraggingAlphaRef.current = true; event.currentTarget.setPointerCapture(event.pointerId); }} step={1} type="range" value={alpha} />

) : null}

{formatOpen ? ( ) : null}

{showCopy ? ( ) : null} {showEyedropper ? ( ) : null}

{format === "HEX" ? ( <>

# { isEditingRef.current = false; setHexFocused(false); const committed = commitHexInput(hexInput, "commit"); setHexInvalid(!committed && hexInput.trim().length > 0); }} onFocus={() => { isEditingRef.current = true; setHexInput(displayHex); setHexFocused(true); setHexInvalid(false); }} onKeyDown={(event) => { if (event.key === "Enter") { event.currentTarget.blur(); } }} onValueChange={(nextValue) => { const maxLength = showAlpha ? 8 : 6; const sanitized = nextValue .replace(HEX_INPUT_SANITIZE_PATTERN, "") .slice(0, maxLength) .toUpperCase(); setHexInput(sanitized); setHexInvalid(false); if ( sanitized.length === 6 || (showAlpha && sanitized.length === 8) ) { commitHexInput(sanitized, "change"); } }} spellCheck={false} value={hexFocused ? hexInput : displayHex} />

{hexInvalid ? (

Enter a valid hex color.

) : null}

{showAlpha ? ( applyAlpha(nextAlpha, "commit")} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} suffix="%" value={alpha} /> ) : null} ) : null} {format === "RGB" ? ( <> applyRgb({ r: nextRed, g, b }, "commit")} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={r} /> applyRgb({ r, g: nextGreen, b }, "commit") } onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={g} /> applyRgb({ r, g, b: nextBlue }, "commit") } onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={b} /> {showAlpha ? ( applyAlpha(nextAlpha, "commit")} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} suffix="%" value={alpha} /> ) : null} ) : null} {format === "HSL" ? ( <> setFromHsl(nextHue, hsl.s, hsl.l)} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={hsl.h} /> setFromHsl(hsl.h, nextSaturation, hsl.l) } onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={hsl.s} /> setFromHsl(hsl.h, hsl.s, nextLightness) } onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={hsl.l} /> {showAlpha ? ( applyAlpha(nextAlpha, "commit")} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} suffix="%" value={alpha} /> ) : null} ) : null} {format === "OKLCH" ? ( <> setFromOklch(nextLightness, oklch.c, oklch.h) } onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} step={0.01} value={Math.round(oklch.l * 100) / 100} /> setFromOklch(oklch.l, nextChroma, oklch.h) } onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} step={0.001} value={Math.round(oklch.c * 1000) / 1000} /> setFromOklch(oklch.l, oklch.c, nextHue)} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} value={Math.round(oklch.h)} /> {showAlpha ? ( applyAlpha(nextAlpha, "commit")} onEditEnd={() => { isEditingRef.current = false; }} onEditStart={() => { isEditingRef.current = true; }} suffix="%" value={alpha} /> ) : null} ) : null}

); } function getPopoverPanelOffset(placement: "top" | "bottom") { return placement === "bottom" ? -10 : 10; } function getPopoverPanelMotion( placement: "top" | "bottom", reducedMotion: boolean ) { if (reducedMotion) { return { animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: 0.12 } }, initial: { opacity: 0 }, transition: { duration: 0.12 }, }; } const enterOffset = getPopoverPanelOffset(placement); const exitOffset = placement === "bottom" ? -5 : 5; return { animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.97, y: exitOffset, transition: { opacity: { duration: 0.2, ease: EASE_IN_OUT }, scale: { duration: 0.2, ease: EASE_IN_OUT }, y: { duration: 0.2, ease: EASE_IN_OUT }, }, }, initial: { opacity: 0, scale: 0.94, y: enterOffset }, transition: { opacity: { duration: 0.26, ease: EASE_OUT }, scale: SPRING_PANEL, y: SPRING_PANEL, }, }; } const POPOVER_VIEWPORT_PADDING = 12; const POPOVER_GAP = 8; function getColorPickerPopoverPosition({ align, anchorRect, matchAnchorWidth, panelRect, }: { align: "center" | "start"; anchorRect: DOMRect; matchAnchorWidth: boolean; panelRect: DOMRect; }) { const panelWidth = matchAnchorWidth ? anchorRect.width : panelRect.width; let placement: "bottom" | "top" = "bottom"; let top = anchorRect.bottom + POPOVER_GAP; let left = align === "center" ? anchorRect.left + anchorRect.width / 2 - panelWidth / 2 : anchorRect.left; if (left + panelWidth > window.innerWidth - POPOVER_VIEWPORT_PADDING) { left = window.innerWidth - panelWidth - POPOVER_VIEWPORT_PADDING; } if (left < POPOVER_VIEWPORT_PADDING) { left = POPOVER_VIEWPORT_PADDING; } if (top + panelRect.height > window.innerHeight - POPOVER_VIEWPORT_PADDING) { top = anchorRect.top - panelRect.height - POPOVER_GAP; placement = "top"; } return { left: Math.round(left), placement, top: Math.round(top), width: matchAnchorWidth ? Math.round(anchorRect.width) : undefined, }; } function ColorPickerPopoverLayer({ align = "start", anchorRef, children, matchAnchorWidth = false, onClose, open, panelId, triggerId, }: { align?: "center" | "start"; anchorRef: RefObject; children: ReactNode; matchAnchorWidth?: boolean; onClose: () => void; open: boolean; panelId: string; triggerId: string; }) { const floatingRef = useRef(null); const reducedMotion = useReducedMotion(); const [position, setPosition] = useState({ left: 0, placement: "bottom" as "bottom" | "top", top: 0, width: undefined as number | undefined, }); const [isPositioned, setIsPositioned] = useState(false); const [mounted, setMounted] = useState(false); const panelMotion = getPopoverPanelMotion( position.placement, reducedMotion ?? false ); const handleClose = useCallback(() => { onClose(); anchorRef.current?.focus({ preventScroll: true }); }, [anchorRef, onClose]); useEffect(() => { setMounted(true); }, []); useLayoutEffect(() => { if (!open) { setIsPositioned(false); return; } const updatePosition = () => { const anchor = anchorRef.current; const panel = floatingRef.current; if (!(anchor && panel)) { return; } const anchorRect = anchor.getBoundingClientRect(); const panelRect = panel.getBoundingClientRect(); setPosition( getColorPickerPopoverPosition({ align, anchorRect, matchAnchorWidth, panelRect, }) ); setIsPositioned(true); }; updatePosition(); const raf = window.requestAnimationFrame(updatePosition); window.addEventListener("resize", updatePosition); window.addEventListener("scroll", updatePosition, true); return () => { window.cancelAnimationFrame(raf); window.removeEventListener("resize", updatePosition); window.removeEventListener("scroll", updatePosition, true); }; }, [align, anchorRef, matchAnchorWidth, open]); useEffect(() => { if (!(open && isPositioned)) { return; } const panel = floatingRef.current; const raf = window.requestAnimationFrame(() => { const focusTarget = panel?.querySelector( '[role="application"][tabindex="0"], button:not([disabled]), input:not([disabled])' ); focusTarget?.focus({ preventScroll: true }); }); return () => { window.cancelAnimationFrame(raf); }; }, [isPositioned, open]); useEffect(() => { if (!open) { return; } const handlePointerDown = (event: PointerEvent) => { const target = event.target as Node; if ( anchorRef.current?.contains(target) || floatingRef.current?.contains(target) ) { return; } handleClose(); }; const handleKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { handleClose(); } }; window.addEventListener("pointerdown", handlePointerDown); window.addEventListener("keydown", handleKeyDown); return () => { window.removeEventListener("pointerdown", handlePointerDown); window.removeEventListener("keydown", handleKeyDown); }; }, [anchorRef, handleClose, open]); if (!mounted) { return null; } return createPortal( {open ? ( ) : null} , document.body ); } // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: picker shell coordinates SV/hue/alpha drags, format menu, and variant layouts in one place. export const ColorPicker = forwardRef(function ColorPicker( { "aria-label": ariaLabel = "Color picker", "aria-labelledby": ariaLabelledBy, className, defaultAlpha = 100, defaultFormat = "HEX", defaultOpen = false, defaultValue = "#3B82F6", disabled = false, id: idProp, name, onChange, onEyedropperUnsupported, onOpenChange, onValueCommit, open: openProp, placeholder = "Pick a color", presets, showAlpha = true, showCopy = false, showEyedropper = true, swatchShape = "default", value, variant = "inline", }: ColorPickerProps, ref: ForwardedRef ) { const generatedId = useId(); const rootId = idProp ?? generatedId; const panelId = `${rootId}-panel`; const triggerId = `${rootId}-trigger`; const formatMenuId = `${rootId}-format-menu`; const formatTriggerId = `${rootId}-format-trigger`; const svFieldId = `${rootId}-sv-field`; const rootRef = useRef(null); const triggerRef = useRef(null); const [open, setOpen] = useControllableOpen( openProp, defaultOpen, onOpenChange ); useImperativeHandle(ref, () => rootRef.current as HTMLDivElement); const controller = useColorPickerController({ defaultAlpha, defaultFormat, defaultValue, onChange, onValueCommit, showAlpha, value, }); const hiddenInput = name ? ( ( )} tabIndex={-1} value={controller.colorValue} /> ) : null; if (variant === "popover" || variant === "swatch") { const detail = buildChangeDetail(controller.rgb, controller.effectiveAlpha); const activeFormat = controller.format; const triggerLabel = activeFormat === "HEX" ? detail.hex : activeFormat === "RGB" ? detail.rgb : activeFormat === "HSL" ? detail.hsl : detail.oklch; const swatchTriggerLabel = controller.colorValue ? `${ariaLabel}: ${detail.hex}` : ariaLabel; return (

{hiddenInput} {variant === "popover" ? ( ) : ( )} setOpen(false)} open={open} panelId={panelId} triggerId={triggerId} >

); } return ( // biome-ignore lint/a11y/useSemanticElements: fieldset styling would fight inline layout; panel is already a fieldset.

{hiddenInput}

); }); ColorPicker.displayName = "ColorPicker"; function ColorPickerTextInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, className, disabled, inputMode, onBlur, onFocus, onKeyDown, onValueChange, spellCheck, value, }: { "aria-describedby"?: string; "aria-invalid"?: boolean; "aria-label": string; className?: string; disabled?: boolean; inputMode?: HTMLAttributes["inputMode"]; onBlur?: () => void; onFocus?: () => void; onKeyDown?: (event: ReactKeyboardEvent) => void; onValueChange: (value: string) => void; spellCheck?: boolean; value: string; }) { return ( { const { className: primitiveClassName, ref: _ref, ...resolvedInputProps } = inputProps; return ( ); }} value={value} /> ); } function ChannelInput({ value, min, max, step: _step = 1, suffix, label, disabled, onChange, onEditEnd, onEditStart, }: { value: number; min: number; max: number; step?: number; suffix?: string; label: string; disabled?: boolean; onChange: (value: number) => void; onEditEnd?: () => void; onEditStart?: () => void; }) { const [local, setLocal] = useState(String(value)); const [focused, setFocused] = useState(false); const displayValue = focused ? local : String(value); useEffect(() => { if (!focused) { setLocal(String(value)); } }, [focused, value]); const commit = () => { const parsed = Number(local); if (Number.isNaN(parsed) || local.trim() === "") { setLocal(String(value)); return; } onChange(Math.max(min, Math.min(max, parsed))); }; return (

{ setFocused(false); onEditEnd?.(); commit(); }} onFocus={() => { onEditStart?.(); setLocal(String(value)); setFocused(true); }} onKeyDown={(event) => { if (event.key === "Escape") { setLocal(String(value)); setFocused(false); onEditEnd?.(); event.currentTarget.blur(); return; } if (event.key === "Enter") { event.currentTarget.blur(); } }} onValueChange={setLocal} value={displayValue} /> {suffix ? ( {suffix} ) : null}

{label}

); } export { ColorPicker as FluidColorPicker }; export default ColorPicker; 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@iconiq","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"color-picker.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]