Color Picker

1"use client";
2 
3import { Input as InputPrimitive } from "@base-ui/react/input";
4import { Check, ChevronDown, Copy, Pipette } from "lucide-react";
5import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6import {
7  type ForwardedRef,
8  forwardRef,
9  type HTMLAttributes,
10  type KeyboardEvent as ReactKeyboardEvent,
11  type ReactNode,
12  type RefObject,
13  useCallback,
14  useEffect,
15  useId,
16  useImperativeHandle,
17  useLayoutEffect,
18  useMemo,
19  useRef,
20  useState,
21} from "react";
22import { createPortal } from "react-dom";
23 
24import { cn } from "@/lib/utils";
25 
26// Shared motion tokens — inlined so the registry file is self-contained.
27const EASE_OUT = [0.16, 1, 0.3, 1] as const;
28const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
29const SPRING_PANEL = {
30  type: "spring" as const,
31  stiffness: 420,
32  damping: 40,
33  mass: 0.5,
34};
35 
36const controlCornerClassName =
37  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
38 
39const controlCornerInheritClassName =
40  "rounded-[inherit] supports-[corner-shape:squircle]:[corner-shape:inherit]";
41 
42const FORMAT_OPTIONS = ["HEX", "RGB", "HSL", "OKLCH"] as const;
43const FORMAT_MENU_SOFT_EASE = [0.22, 1, 0.36, 1] as const;
44const HEX_INPUT_SANITIZE_PATTERN = /[^0-9a-fA-F]/g;
45const HEX_HASH_PREFIX = /^#/;
46const HEX_RGB_PATTERN = /^[0-9A-F]{6}$/;
47const HEX_RGBA_PATTERN = /^[0-9A-F]{8}$/;
48 
49const formatMenuPanelClassName =
50  "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)]";
51 
52const formatMenuItemClassName =
53  "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)]";
54 
55const formatMenuHighlightClassName =
56  "absolute inset-0 bg-[color:var(--color-accent)]";
57 
58const formatMenuHighlightTransition = {
59  type: "spring" as const,
60  stiffness: 520,
61  damping: 34,
62  mass: 0.72,
63};
64 
65const formatTriggerTransitionClassName =
66  "transition-[color,background-color,box-shadow] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]";
67 
68const componentThemeClassName =
69// … truncated