import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { cn } from '@/lib/utils'; import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'; import Color from 'color'; import { PipetteIcon } from 'lucide-react'; import { type ChangeEventHandler, type ComponentProps, type HTMLAttributes, useCallback, useEffect, useRef, useState, } from 'react'; import { createContext, useContext } from 'react'; interface ColorPickerContextValue { hue: number; saturation: number; lightness: number; alpha: number; mode: string; setHue: (hue: number) => void; setSaturation: (saturation: number) => void; setLightness: (lightness: number) => void; setAlpha: (alpha: number) => void; setMode: (mode: string) => void; } const ColorPickerContext = createContext( undefined ); export const useColorPicker = () => { const context = useContext(ColorPickerContext); if (!context) { throw new Error('useColorPicker must be used within a ColorPickerProvider'); } return context; }; export type ColorPickerProps = HTMLAttributes & { value?: Parameters[0]; defaultValue?: Parameters[0]; onChange?: (value: Parameters[0]) => void; }; export const ColorPicker = ({ value, defaultValue = '#000000', onChange, className, ...props }: ColorPickerProps) => { const selectedColor = Color(value); const defaultColor = Color(defaultValue); const [hue, setHue] = useState( selectedColor.hue() || defaultColor.hue() || 0 ); const [saturation, setSaturation] = useState( selectedColor.saturationl() || defaultColor.saturationl() || 100 ); const [lightness, setLightness] = useState( selectedColor.lightness() || defaultColor.lightness() || 50 ); const [alpha, setAlpha] = useState( selectedColor.alpha() * 100 || defaultColor.alpha() * 100 ); const [mode, setMode] = useState('hex'); // Update color when controlled value changes useEffect(() => { if (value) { const color = Color.rgb(value).rgb().object(); setHue(color.r); setSaturation(color.g); setLightness(color.b); setAlpha(color.a); } }, [value]); // Notify parent of changes useEffect(() => { if (onChange) { const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100); const rgba = color.rgb().array(); onChange([rgba[0], rgba[1], rgba[2], alpha / 100]); } }, [hue, saturation, lightness, alpha, onChange]); return (

); }; export type ColorPickerSelectionProps = HTMLAttributes; export const ColorPickerSelection = ({ className, ...props }: ColorPickerSelectionProps) => { const containerRef = useRef(null); const [isDragging, setIsDragging] = useState(false); const [position, setPosition] = useState({ x: 0, y: 0 }); const { hue, setSaturation } = useColorPicker(); const handlePointerMove = useCallback( (event: PointerEvent) => { if (!isDragging || !containerRef.current) { return; } const rect = containerRef.current.getBoundingClientRect(); const x = Math.max( 0, Math.min(1, (event.clientX - rect.left) / rect.width) ); const y = Math.max( 0, Math.min(1, (event.clientY - rect.top) / rect.height) ); setPosition({ x, y }); setSaturation((1 - y) * 100); }, [isDragging, setSaturation] ); useEffect(() => { if (isDragging) { window.addEventListener('pointermove', handlePointerMove); window.addEventListener('pointerup', () => setIsDragging(false)); } return () => { window.removeEventListener('pointermove', handlePointerMove); window.removeEventListener('pointerup', () => setIsDragging(false)); }; }, [isDragging, handlePointerMove]); return (

{ e.preventDefault(); setIsDragging(true); handlePointerMove(e.nativeEvent); }} {...props} >

); }; export type ColorPickerHueProps = HTMLAttributes; export const ColorPickerHue = ({ className, ...props }: ColorPickerHueProps) => { const { hue, setHue } = useColorPicker(); return ( setHue(hue)} {...props} > ); }; export type ColorPickerAlphaProps = HTMLAttributes; export const ColorPickerAlpha = ({ className, ...props }: ColorPickerAlphaProps) => { const { alpha, setAlpha } = useColorPicker(); return ( setAlpha(alpha)} {...props} >

); }; export type ColorPickerEyeDropperProps = ComponentProps; export const ColorPickerEyeDropper = ({ className, ...props }: ColorPickerEyeDropperProps) => { const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker(); const handleEyeDropper = async () => { try { // @ts-ignore - EyeDropper API is experimental const eyeDropper = new EyeDropper(); const result = await eyeDropper.open(); const color = Color(result.sRGBHex); const [h, s, l] = color.hsl().array(); setHue(h); setSaturation(s); setLightness(l); setAlpha(100); } catch (error) { console.error('EyeDropper failed:', error); } }; return ( ); }; export type ColorPickerOutputProps = ComponentProps; const formats = ['hex', 'rgb', 'css', 'hsl']; export const ColorPickerOutput = ({ className, ...props }: ColorPickerOutputProps) => { const { mode, setMode } = useColorPicker(); return ( ); }; type PercentageInputProps = ComponentProps; const PercentageInput = ({ className, ...props }: PercentageInputProps) => { return (

); }; export type ColorPickerFormatProps = HTMLAttributes; export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProps) => { const { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha, } = useColorPicker(); const color = Color.hsl(hue, saturation, lightness, alpha / 100); if (mode === 'hex') { const hex = color.hex(); const handleChange: ChangeEventHandler = (event) => { try { const newColor = Color(event.target.value); setHue(newColor.hue()); setSaturation(newColor.saturationl()); setLightness(newColor.lightness()); setAlpha(newColor.alpha() * 100); } catch (error) { console.error('Invalid hex color:', error); } }; return (

); } if (mode === 'rgb') { const rgb = color .rgb() .array() .map((value) => Math.round(value)); return (

{rgb.map((value, index) => ( ))}

); } if (mode === 'css') { const rgb = color .rgb() .array() .map((value) => Math.round(value)); return (

); } if (mode === 'hsl') { const hsl = color .hsl() .array() .map((value) => Math.round(value)); return (

{hsl.map((value, index) => ( ))}

); } return null; };