'use client'; import type { PopoverContentProps } from '@radix-ui/react-popover'; import { type HexColor, hexToHsva, type HslaColor, hslaToHsva, type HsvaColor, hsvaToHex, hsvaToHsla, hsvaToHslString, hsvaToRgba, type RgbaColor, rgbaToHsva, } from '@uiw/color-convert'; import Hue from '@uiw/react-color-hue'; import Saturation from '@uiw/react-color-saturation'; import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react'; import React from 'react'; import { Badge, type BadgeProps } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { Input } from '@/components/ui/input'; import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'; import { Separator } from '@/components/ui/separator'; import { cn } from '@/lib/utils'; function getColorAsHsva(color: `#${string}` | HsvaColor | HslaColor | RgbaColor): HsvaColor { if (typeof color === 'string') { return hexToHsva(color); } else if ('h' in color && 's' in color && 'v' in color) { return color; } else if ('r' in color) { return rgbaToHsva(color); } else { return hslaToHsva(color); } } type ColorPickerValue = { hex: string; hsl: HslaColor; rgb: RgbaColor; }; type ColorPickerProps = { value?: `#${string}` | HsvaColor | HslaColor | RgbaColor; type?: 'hsl' | 'rgb' | 'hex'; swatches?: HexColor[]; hideContrastRatio?: boolean; hideDefaultSwatches?: boolean; className?: string; onValueChange?: (value: ColorPickerValue) => void; } & PopoverContentProps; function ColorPicker({ value, children, type = 'hsl', swatches = [], hideContrastRatio, hideDefaultSwatches, onValueChange, className, ...props }: ColorPickerProps) { const [colorType, setColorType] = React.useState(type); const [colorHsv, setColorHsv] = React.useState(value ? getColorAsHsva(value) : { h: 0, s: 0, v: 0, a: 1 }); const handleValueChange = (color: HsvaColor) => { onValueChange?.({ hex: hsvaToHex(colorHsv), hsl: hsvaToHsla(colorHsv), rgb: hsvaToRgba(colorHsv), }); setColorHsv(color); }; return ( {children}

{ handleValueChange(newColor); }} style={{ width: '100%', height: 'auto', aspectRatio: '4/2', borderRadius: '0.3rem', }} className="border border-border" /> { handleValueChange({ ...colorHsv, ...newHue }); }} className="[&>div:first-child]:overflow-hidden [&>div:first-child]:!rounded" style={ { width: '100%', height: '0.9rem', borderRadius: '0.3rem', '--alpha-pointer-background-color': 'hsl(var(--foreground))', } as React.CSSProperties } />

setColorType('hex')}> HEX setColorType('hsl')}> HSL setColorType('rgb')}> RGB

{colorType === 'hsl' && ( { setColorHsv(hslaToHsva(value)); }} /> )} {colorType === 'rgb' && ( { setColorHsv(rgbaToHsva(value)); }} /> )} {colorType === 'hex' && ( { setColorHsv(hexToHsva(e.target.value)); }} /> )}

{swatches.length > 0 || (!hideDefaultSwatches && )} {!hideDefaultSwatches && (

{['#F8371A', '#F97C1B', '#FAC81C', '#3FD0B6', '#2CADF6', '#6462FC', ...swatches] .sort((a, b) => hexToHsva(a).h - hexToHsva(b).h) .map((color) => (

)} {!hideContrastRatio && ( <> )}

); } type ContrastRatioProps = { color: HsvaColor; }; function ContrastRatio({ color }: ContrastRatioProps) { const [darkModeContrastRatio, setDarkModeContrastValue] = React.useState(0); const [lightModeContrastValue, setLightModeContrastValue] = React.useState(0); React.useEffect(() => { const rgb = hsvaToRgba(color); const toSRGB = (c: number) => { const channel = c / 255; return channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4; }; const r = toSRGB(rgb.r); const g = toSRGB(rgb.g); const b = toSRGB(rgb.b); const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; const darkModeRatio = (1.0 + 0.05) / (luminance + 0.05); const lightModeRatio = (luminance + 0.05) / 0.05; setDarkModeContrastValue(Number(darkModeRatio.toFixed(2))); setLightModeContrastValue(Number(lightModeRatio.toFixed(2))); }, [color]); const ValidationBadge = ({ ratio, ratioLimit, className, children, ...props }: { ratio: number; ratioLimit: number; } & Omit) => ( ratioLimit && 'border-transparent bg-emerald-500/20 text-emerald-700 dark:text-emerald-400', className, )} {...props} > {ratio > 4.5 ? : } {children} ); return (

Contrast Ratio {darkModeContrastRatio} {lightModeContrastValue}

AA AAA AA AAA

); } type ObjectColorInputProps = | { label: 'hsl'; value: HslaColor; onValueChange?: (value: HslaColor) => void; } | { label: 'rgb'; value: RgbaColor; onValueChange?: (value: RgbaColor) => void; }; function ObjectColorInput({ value, label, onValueChange }: ObjectColorInputProps) { function handleChange(val: HslaColor | RgbaColor) { if (onValueChange) { label === 'hsl' ? onValueChange({ ...value, ...val, }) : onValueChange({ ...value, ...val, }); } } return (

handleChange({ ...value, [label === 'hsl' ? 'h' : 'r']: e.target.value, }) } />

handleChange({ ...value, [label === 'hsl' ? 's' : 'g']: e.target.value, }) } />

handleChange({ ...value, [label === 'hsl' ? 'l' : 'b']: e.target.value, }) } />

); } export { ColorPicker }; export type { ColorPickerProps, ColorPickerValue };