"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
/* ---------------------------------------------------------------- color math */
type Hsv = [h: number, s: number, v: number]
const clamp01 = (n: number) => Math.min(1, Math.max(0, n))
function hsvToRgb(h: number, s: number, v: number): [number, number, number] {
const c = v * s
const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
const m = v - c
let r = 0
let g = 0
let b = 0
if (h < 60) [r, g, b] = [c, x, 0]
else if (h < 120) [r, g, b] = [x, c, 0]
else if (h < 180) [r, g, b] = [0, c, x]
else if (h < 240) [r, g, b] = [0, x, c]
else if (h < 300) [r, g, b] = [x, 0, c]
else [r, g, b] = [c, 0, x]
return [
Math.round((r + m) * 255),
Math.round((g + m) * 255),
Math.round((b + m) * 255),
]
}
function rgbToHex(r: number, g: number, b: number): string {
return (
"#" +
[r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("")
)
}
function hexToHsv(hex: string): Hsv | null {
const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim())
if (!m) return null
const int = parseInt(m[1], 16)
let r = (int >> 16) & 255
let g = (int >> 8) & 255
let b = int & 255
r /= 255
g /= 255
b /= 255
const max = Math.max(r, g, b)
const min = Math.min(r, g, b)
const d = max - min
let h = 0
if (d) {
if (max === r) h = ((g - b) / d) % 6
else if (max === g) h = (b - r) / d + 2
else h = (r - g) / d + 4
h *= 60
if (h < 0) h += 360
}
return [h, max === 0 ? 0 : d / max, max]
}
const hsvToHex = ([h, s, v]: Hsv) => rgbToHex(...hsvToRgb(h, s, v))
/* ------------------------------------------------------------------ component */
export interface ColorPickerProps
extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
/** Current color as a `#rrggbb` hex string (controlled). */
value?: string
defaultValue?: string
onValueChange?: (hex: string) => void
}
/**
* A self-contained HSV color picker: a saturation/value area, a hue slider and
* a hex input. Controlled via `value`/`onValueChange` or uncontrolled via
* `defaultValue`. Emits `#rrggbb`. Zero dependencies.
*/
function ColorPicker({
className,
value,
defaultValue,
onValueChange,
...props
}: ColorPickerProps) {
const [hsv, setHsv] = React.useState<Hsv>(
() => hexToHsv(value ?? defaultValue ?? "#000000") ?? [0, 0, 0]
)
const hex = hsvToHex(hsv)
const lastEmit = React.useRef(hex)
const [hexDraft, setHexDraft] = React.useState(hex)
// Sync from a controlled value that changed outside our own emissions.
React.useEffect(() => {
if (value && value.toLowerCase() !== lastEmit.current.toLowerCase()) {
const parsed = hexToHsv(value)
if (parsed) {
setHsv(parsed)
setHexDraft(hsvToHex(parsed))
}
}
}, [value])
const commit = (next: Hsv) => {
setHsv(next)
const h = hsvToHex(next)
setHexDraft(h)
lastEmit.current = h
onValueChange?.(h)
}
const [hue, sat, val] = hsv
const svRef = React.useRef<HTMLDivElement>(null)
const hueRef = React.useRef<HTMLDivElement>(null)
const moveSv = (e: React.PointerEvent) => {
const rect = svRef.current?.getBoundingClientRect()
if (!rect) return
commit([
hue,
clamp01((e.clientX - rect.left) / rect.width),
clamp01(1 - (e.clientY - rect.top) / rect.height),
])
}
const moveHue = (e: React.PointerEvent) => {
const rect = hueRef.current?.getBoundingClientRect()
if (!rect) return
commit([clamp01((e.clientX - rect.left) / rect.width) * 360, sat, val])
}
const startDrag =
(handler: (e: React.PointerEvent) => void) => (e: React.PointerEvent) => {
e.currentTarget.setPointerCapture(e.pointerId)
handler(e)
}
const hueHex = hsvToHex([hue, 1, 1])
return (
<div
data-slot="color-picker"
className={cn("flex w-56 flex-col gap-3", className)}
{...props}
>
{/* Saturation / value area */}
<div
ref={svRef}
data-slot="color-picker-area"
onPointerDown={startDrag(moveSv)}
onPointerMove={(e) => e.buttons === 1 && moveSv(e)}
className="relative h-40 w-full cursor-crosshair touch-none overflow-hidden rounded-md border"
style={{
backgroundColor: hueHex,
backgroundImage:
"linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)",
}}
>
<span
className="pointer-events-none absolute size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm ring-1 ring-black/30"
style={{ left: `${sat * 100}%`, top: `${(1 - val) * 100}%` }}
/>
</div>
{/* Hue slider */}
<div
ref={hueRef}
data-slot="color-picker-hue"
onPointerDown={startDrag(moveHue)}
onPointerMove={(e) => e.buttons === 1 && moveHue(e)}
className="relative h-3 w-full cursor-pointer touch-none rounded-full border"
style={{
backgroundImage:
"linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00)",
}}
>
<span
className="pointer-events-none absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm ring-1 ring-black/30"
style={{ left: `${(hue / 360) * 100}%` }}
/>
</div>
{/* Swatch + hex input */}
<div className="flex items-center gap-2">
<span
data-slot="color-picker-swatch"
className="size-8 shrink-0 rounded-md border"
style={{ backgroundColor: hex }}
/>
<input
data-slot="color-picker-hex"
aria-label="Hex color"
value={hexDraft}
spellCheck={false}
onChange={(e) => {
const next = e.target.value
setHexDraft(next)
const parsed = hexToHsv(next)
if (parsed) commit(parsed)
}}
onBlur={() => setHexDraft(hex)}
className={cn(
"border-input h-8 w-full min-w-0 rounded-md border bg-transparent px-2 font-mono text-sm uppercase shadow-xs outline-none",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
)}
/>
</div>
</div>
)
}
export { ColorPicker }