color-picker

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { PipetteIcon } from "lucide-react";
5import {
6  Direction as DirectionPrimitive,
7  Slider as SliderPrimitive,
8  Slot as SlotPrimitive,
9} from "radix-ui";
10import * as React from "react";
11import { useComposedRefs } from "@/lib/compose-refs";
12import { cn } from "@/lib/utils";
13import { VisuallyHiddenInput } from "@/registry/bases/radix/components/visually-hidden-input";
14import { useAsRef } from "@/registry/bases/radix/hooks/use-as-ref";
15import { useIsomorphicLayoutEffect } from "@/registry/bases/radix/hooks/use-isomorphic-layout-effect";
16import { useLazyRef } from "@/registry/bases/radix/hooks/use-lazy-ref";
17import { Button } from "@/registry/bases/radix/ui/button";
18import { Input } from "@/registry/bases/radix/ui/input";
19import {
20  Popover,
21  PopoverContent,
22  PopoverTrigger,
23} from "@/registry/bases/radix/ui/popover";
24import {
25  Select,
26  SelectContent,
27  SelectItem,
28  SelectTrigger,
29  SelectValue,
30} from "@/registry/bases/radix/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 extends React.ComponentProps<"div"> {
47  asChild?: boolean;
48}
49 
50type RootElement = React.ComponentRef<typeof ColorPicker>;
51type AreaElement = React.ComponentRef<typeof ColorPickerArea>;
52type InputElement = React.ComponentRef<typeof ColorPickerInput>;
53 
54type ColorFormat = (typeof colorFormats)[number];
55 
56/**
57 * @see https://gist.github.com/bkrmendy/f4582173f50fab209ddfef1377ab31e3
58 */
59interface EyeDropper {
60  open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }>;
61}
62 
63declare global {
64  interface Window {
65    EyeDropper?: {
66      new (): EyeDropper;
67    };
68  }
69}
70 
71interface ColorValue {
72  r: number;
73  g: number;
74  b: number;
75  a: number;
76}
77 
78interface HSVColorValue {
79  h: number;
80  s: number;
81  v: number;
82  a: number;
83}
84 
85function hexToRgb(hex: string, alpha?: number): ColorValue {
86  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
87  return result
88// … truncated