color-picker

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import type { Popover as PopoverPrimitive } from "@base-ui/react/popover";
5import { Slider as SliderPrimitive } from "@base-ui/react/slider";
6import { useRender } from "@base-ui/react/use-render";
7import { cva, type VariantProps } from "class-variance-authority";
8import { PipetteIcon } from "lucide-react";
9import * as React from "react";
10import { cn } from "@/lib/utils";
11import { VisuallyHiddenInput } from "@/registry/bases/base/components/visually-hidden-input";
12import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
13import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
14import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
15import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
16import { Button } from "@/registry/bases/base/ui/button";
17import { useDirection } from "@/registry/bases/base/ui/direction";
18import { Input } from "@/registry/bases/base/ui/input";
19import {
20  Popover,
21  PopoverContent,
22  PopoverTrigger,
23} from "@/registry/bases/base/ui/popover";
24import {
25  Select,
26  SelectContent,
27  SelectItem,
28  SelectTrigger,
29  SelectValue,
30} from "@/registry/bases/base/ui/select";
31 
32const ROOT_NAME = "ColorPicker";
33const ROOT_IMPL_NAME = "ColorPickerImpl";
34const TRIGGER_NAME = "ColorPickerTrigger";
35const CONTENT_NAME = "ColorPickerContent";
36const AREA_NAME = "ColorPickerArea";
37const HUE_SLIDER_NAME = "ColorPickerHueSlider";
38const ALPHA_SLIDER_NAME = "ColorPickerAlphaSlider";
39const SWATCH_NAME = "ColorPickerSwatch";
40const EYE_DROPPER_NAME = "ColorPickerEyeDropper";
41const FORMAT_SELECT_NAME = "ColorPickerFormatSelect";
42const INPUT_NAME = "ColorPickerInput";
43 
44const colorFormats = ["hex", "rgb", "hsl", "hsb"] as const;
45 
46interface DivProps
47  extends React.ComponentProps<"div">,
48    useRender.ComponentProps<"div"> {}
49 
50type RootElement = HTMLDivElement;
51type AreaElement = HTMLDivElement;
52type InputElement = HTMLInputElement;
53 
54type PopoverChangeEventDetails = PopoverPrimitive.Root.ChangeEventDetails;
55 
56type ColorFormat = (typeof colorFormats)[number];
57 
58/**
59 * @see https://gist.github.com/bkrmendy/f4582173f50fab209ddfef1377ab31e3
60 */
61interface EyeDropper {
62  open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>;
63}
64 
65declare global {
66  interface Window {
67    EyeDropper?: {
68      new (): EyeDropper;
69    };
70  }
71}
72 
73interface ColorValue {
74  r: number;
75  g: number;
76  b: number;
77  a: number;
78}
79 
80// … truncated