"use client" import React, { useEffect, useState } from "react" import { Check, ChevronDown } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" // Helper functions for color conversion const hslToHex = (h: number, s: number, l: number) => { l /= 100 const a = (s * Math.min(l, 1 - l)) / 100 const f = (n: number) => { const k = (n + h / 30) % 12 const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1) return Math.round(255 * color) .toString(16) .padStart(2, "0") } return `#${f(0)}${f(8)}${f(4)}` } const hexToHsl = (hex: string): [number, number, number] => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) if (!result) return [0, 0, 0] let r = parseInt(result[1], 16) / 255 let g = parseInt(result[2], 16) / 255 let b = parseInt(result[3], 16) / 255 const max = Math.max(r, g, b) const min = Math.min(r, g, b) let h = 0 let s = 0 let l = (max + min) / 2 if (max !== min) { const d = max - min s = l > 0.5 ? d / (2 - max - min) : d / (max + min) switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0) break case g: h = (b - r) / d + 2 break case b: h = (r - g) / d + 4 break } h /= 6 } return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)] } const normalizeColor = (color: string): string => { if (color.startsWith("#")) { return color.toUpperCase() } else if (color.startsWith("hsl")) { const [h, s, l] = color.match(/\d+(\.\d+)?/g)?.map(Number) || [0, 0, 0] return `hsl(${Math.round(h)}, ${Math.round(s)}%, ${Math.round(l)}%)` } return color } const trimColorString = (color: string, maxLength: number = 20): string => { if (color.length <= maxLength) return color return `${color.slice(0, maxLength - 3)}...` } export function ColorPicker({ color, onChange, }: { color: string onChange: (color: string) => void }) { const [hsl, setHsl] = useState<[number, number, number]>([0, 0, 0]) const [colorInput, setColorInput] = useState(color) const [isOpen, setIsOpen] = useState(false) useEffect(() => { handleColorChange(color) }, [color]) const handleColorChange = (newColor: string) => { const normalizedColor = normalizeColor(newColor) setColorInput(normalizedColor) let h, s, l if (normalizedColor.startsWith("#")) { ;[h, s, l] = hexToHsl(normalizedColor) } else { ;[h, s, l] = normalizedColor.match(/\d+(\.\d+)?/g)?.map(Number) || [ 0, 0, 0, ] } setHsl([h, s, l]) onChange(`hsl(${h.toFixed(1)}, ${s.toFixed(1)}%, ${l.toFixed(1)}%)`) } const handleHueChange = (hue: number) => { const newHsl: [number, number, number] = [hue, hsl[1], hsl[2]] setHsl(newHsl) handleColorChange(`hsl(${newHsl[0]}, ${newHsl[1]}%, ${newHsl[2]}%)`) } const handleSaturationLightnessChange = ( event: React.MouseEvent ) => { const rect = event.currentTarget.getBoundingClientRect() const x = event.clientX - rect.left const y = event.clientY - rect.top const s = Math.round((x / rect.width) * 100) const l = Math.round(100 - (y / rect.height) * 100) const newHsl: [number, number, number] = [hsl[0], s, l] setHsl(newHsl) handleColorChange(`hsl(${newHsl[0]}, ${newHsl[1]}%, ${newHsl[2]}%)`) } const handleColorInputChange = ( event: React.ChangeEvent ) => { const newColor = event.target.value setColorInput(newColor) if ( /^#[0-9A-Fa-f]{6}$/.test(newColor) || /^hsl$$\d+,\s*\d+%,\s*\d+%$$$/.test(newColor) ) { handleColorChange(newColor) } } const colorPresets = [ "#FF3B30", "#FF9500", "#FFCC00", "#4CD964", "#5AC8FA", "#007AFF", "#5856D6", "#FF2D55", "#8E8E93", "#EFEFF4", "#E5E5EA", "#D1D1D6", ] return ( handleHueChange(Number(e.target.value))} className="w-full h-3 rounded-full appearance-none cursor-pointer" style={{ background: `linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%) )`, }} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />

Color

{colorPresets.map((preset) => ( handleColorChange(preset)} whileHover={{ scale: 1.2, zIndex: 1 }} whileTap={{ scale: 0.9 }} > {colorInput === preset && ( )} ))}

) } export default ColorPicker

Color Picker

Instalação

Dependências