color-picker

1"use client"
2 
3import React, { useEffect, useState } from "react"
4import { Check, ChevronDown } from "lucide-react"
5import { AnimatePresence, motion } from "motion/react"
6 
7import { Button } from "@/components/ui/button"
8import { Input } from "@/components/ui/input"
9import { Label } from "@/components/ui/label"
10import {
11  Popover,
12  PopoverContent,
13  PopoverTrigger,
14} from "@/components/ui/popover"
15 
16// Helper functions for color conversion
17const hslToHex = (h: number, s: number, l: number) => {
18  l /= 100
19  const a = (s * Math.min(l, 1 - l)) / 100
20  const f = (n: number) => {
21    const k = (n + h / 30) % 12
22    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
23    return Math.round(255 * color)
24      .toString(16)
25      .padStart(2, "0")
26  }
27  return `#${f(0)}${f(8)}${f(4)}`
28}
29 
30const hexToHsl = (hex: string): [number, number, number] => {
31  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
32  if (!result) return [0, 0, 0]
33 
34  let r = parseInt(result[1], 16) / 255
35  let g = parseInt(result[2], 16) / 255
36  let b = parseInt(result[3], 16) / 255
37 
38  const max = Math.max(r, g, b)
39  const min = Math.min(r, g, b)
40  let h = 0
41  let s = 0
42  let l = (max + min) / 2
43 
44  if (max !== min) {
45    const d = max - min
46    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
47    switch (max) {
48      case r:
49        h = (g - b) / d + (g < b ? 6 : 0)
50        break
51      case g:
52        h = (b - r) / d + 2
53        break
54      case b:
55        h = (r - g) / d + 4
56        break
57    }
58    h /= 6
59  }
60 
61  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)]
62}
63 
64const normalizeColor = (color: string): string => {
65  if (color.startsWith("#")) {
66    return color.toUpperCase()
67  } else if (color.startsWith("hsl")) {
68    const [h, s, l] = color.match(/\d+(\.\d+)?/g)?.map(Number) || [0, 0, 0]
69    return `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)`
70  }
71  return color
72}
73 
74const trimColorString = (color: string, maxLength: number = 20): string => {
75  if (color.length <= maxLength) return color
76  return `${color.slice(0, maxLength - 3)}...`
77}
78 
79export function ColorPicker({
80  color,
81  onChange,
82}: {
83  color: string
84  onChange: (color: string) => void
85}) {
86  const [hsl, setHsl] = useState<[number, number, number]>([0, 0, 0])
87  const [colorInput, setColorInput] = useState(color)
88  const [isOpen, setIsOpen] = useState(false)
89 
90  useEffect(() => {
91    handleColorChange(color)
92  }, [color])
93 
94  const handleColorChange = (newColor: string) => {
95// … truncated