color-picker

1"use client";
2 
3import Color from "color";
4import { PipetteIcon } from "lucide-react";
5import { Slider } from "radix-ui";
6import {
7  type ComponentProps,
8  createContext,
9  type HTMLAttributes,
10  memo,
11  useCallback,
12  useContext,
13  useEffect,
14  useMemo,
15  useRef,
16  useState,
17} from "react";
18import { Button } from "@/components/ui/button";
19import { Input } from "@/components/ui/input";
20import {
21  Select,
22  SelectContent,
23  SelectItem,
24  SelectTrigger,
25  SelectValue,
26} from "@/components/ui/select";
27import { cn } from "@/lib/utils";
28 
29type ColorPickerContextValue = {
30  hue: number;
31  saturation: number;
32  lightness: number;
33  alpha: number;
34  mode: string;
35  setHue: (hue: number) => void;
36  setSaturation: (saturation: number) => void;
37  setLightness: (lightness: number) => void;
38  setAlpha: (alpha: number) => void;
39  setMode: (mode: string) => void;
40};
41 
42const ColorPickerContext = createContext<ColorPickerContextValue | undefined>(
43  undefined
44);
45 
46export const useColorPicker = () => {
47  const context = useContext(ColorPickerContext);
48 
49  if (!context) {
50    throw new Error("useColorPicker must be used within a ColorPickerProvider");
51  }
52 
53  return context;
54};
55 
56export type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
57  value?: Parameters<typeof Color>[0];
58  defaultValue?: Parameters<typeof Color>[0];
59  onChange?: (value: Parameters<typeof Color.rgb>[0]) => void;
60};
61 
62export const ColorPicker = ({
63  value,
64  defaultValue = "#000000",
65  onChange,
66  className,
67  ...props
68}: ColorPickerProps) => {
69  const selectedColor = Color(value);
70  const defaultColor = Color(defaultValue);
71 
72  const [hue, setHue] = useState(
73    selectedColor.hue() || defaultColor.hue() || 0
74  );
75  const [saturation, setSaturation] = useState(
76    selectedColor.saturationl() || defaultColor.saturationl() || 100
77  );
78  const [lightness, setLightness] = useState(
79    selectedColor.lightness() || defaultColor.lightness() || 50
80  );
81  const [alpha, setAlpha] = useState(
82    selectedColor.alpha() * 100 || defaultColor.alpha() * 100
83  );
84  const [mode, setMode] = useState("hex");
85 
86  // Update color when controlled value changes
87  useEffect(() => {
88    if (value) {
89      const color = Color.rgb(value).rgb().object();
90 
91      setHue(color.r);
92      setSaturation(color.g);
93      setLightness(color.b);
94      setAlpha(color.a);
95    }
96  }, [value]);
97 
98  // Notify parent of changes
99  useEffect(() => {
100    if (onChange) {
101      const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100);
102// … truncated