Color Picker

1"use client";
2 
3import {
4  createContext,
5  forwardRef,
6  useContext,
7  useRef,
8  useState,
9  useEffect,
10  useCallback,
11  useMemo,
12  type CSSProperties,
13  type HTMLAttributes,
14  type ReactNode,
15} from "react";
16import { motion, AnimatePresence } from "framer-motion";
17import { Popover } from "@base-ui/react/popover";
18import { Menu } from "@base-ui/react/menu";
19import { NumberField } from "@base-ui/react/number-field";
20import { cn } from "@/lib/utils";
21import { spring } from "@/lib/springs";
22import { fontWeights } from "@/lib/font-weight";
23import { useShape, shapeMap } from "@/lib/shape-context";
24import { useSurface, SurfaceProvider } from "@/lib/surface-context";
25import { surfaceClasses } from "@/lib/surface-classes";
26import { useIcon } from "@/lib/icon-context";
27import { useProximityHover } from "@/hooks/use-proximity-hover";
28import { Elevated } from "@/lib/elevated";
29import { Slider } from "@/registry/radix/slider";
30import { Tooltip } from "@/registry/radix/tooltip";
31 
32// ---------------------------------------------------------------------------
33// Types
34// ---------------------------------------------------------------------------
35 
36type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
37 
38// Allows consumers (e.g. the /demo carousel) to portal popups inside a
39// CSS-scaled ancestor so menu/popover layers visually scale with the picker.
40const ColorPickerPortalContainerContext = createContext<HTMLElement | null>(null);
41 
42function ColorPickerPortalContainer({
43  value,
44  children,
45}: {
46  value: HTMLElement | null;
47  children: ReactNode;
48}) {
49  return (
50    <ColorPickerPortalContainerContext.Provider value={value}>
51      {children}
52    </ColorPickerPortalContainerContext.Provider>
53  );
54}
55 
56interface ParsedColor {
57  // HSV (canonical, 0..360 / 0..1 / 0..1)
58  h: number;
59  s: number;
60  v: number;
61  a: number;
62  // sRGB 0..255
63  r: number;
64  g: number;
65  b: number;
66  // Formatted strings
67  hex: string;
68  rgb: string;
69  hsl: string;
70  oklch: string;
71}
72 
73interface ColorPickerProps
74  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
75  value?: string;
76  defaultValue?: string;
77  onValueChange?: (value: string, parsed: ParsedColor) => void;
78  format?: ColorFormat;
79  defaultFormat?: ColorFormat;
80  onFormatChange?: (format: ColorFormat) => void;
81  swatches?: string[];
82  hideEyedropper?: boolean;
83  /** Controls the format dropdown's open state. When provided, the dropdown
84   *  is fully controlled and ignores user toggles. */
85  formatOpen?: boolean;
86// … truncated