Color Picker

1"use client";
2 
3import {
4  Popover,
5  PopoverContent,
6  PopoverTrigger,
7} from "@/components/ui/popover";
8import { sanitizeHex } from "@/lib/colors";
9import { cn } from "@/lib/utils";
10import { Button } from "@/components/ui/button";
11import type * as PopoverPrimitive from "@radix-ui/react-popover";
12import type React from "react";
13import { useMemo } from "react";
14import { HexAlphaColorPicker, HexColorPicker } from "react-colorful";
15 
16interface ColorPickerProps
17  extends Omit<
18    React.ComponentProps<typeof PopoverPrimitive.Content>,
19    "value" | "onChange"
20  > {
21  disabled?: boolean;
22  type?: "hex" | "hex-alpha";
23  value: string;
24  onChange: (value: string) => void;
25  onBlur?: () => void;
26}
27 
28const ColorPicker = ({
29  disabled,
30  className,
31  value = "#4ec4b8",
32  type = "hex",
33  onChange,
34  onBlur,
35  ...props
36}: ColorPickerProps) => {
37  const parsedValue = useMemo(() => sanitizeHex(value), [value]);
38 
39  return (
40    <Popover>
41      <PopoverTrigger asChild disabled={disabled} onBlur={onBlur}>
42        <Button
43          type="button"
44          className={cn("size-8", className)}
45          style={{
46            backgroundColor: parsedValue,
47            backgroundImage: !parsedValue
48              ? `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".15"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`
49              : undefined,
50          }}
51          size="icon"
52          variant="ghost"
53          disabled={disabled}
54        />
55      </PopoverTrigger>
56      <PopoverContent
57        {...props}
58        className="w-fit p-0 bg-transparent border-none shadow-none"
59      >
60        {type === "hex" ? (
61          <HexColorPicker
62            color={parsedValue ?? "#000000"}
63            onChange={onChange}
64          />
65        ) : (
66          <HexAlphaColorPicker
67            color={parsedValue ?? "#000000"}
68            onChange={onChange}
69          />
70        )}
71      </PopoverContent>
72    </Popover>
73  );
74};
75 
76export { ColorPicker, type ColorPickerProps };