Aurora ColorPicker

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6// --- color math -------------------------------------------------------------
7 
8interface Hsv {
9  h: number // 0..360
10  s: number // 0..1
11  v: number // 0..1
12}
13 
14function clamp(n: number, min: number, max: number): number {
15  return Math.min(max, Math.max(min, n))
16}
17 
18function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
19  const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim())
20  if (!m) return null
21  const int = parseInt(m[1], 16)
22  return { r: (int >> 16) & 255, g: (int >> 8) & 255, b: int & 255 }
23}
24 
25function rgbToHex(r: number, g: number, b: number): string {
26  const to = (n: number) => clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0")
27  return `#${to(r)}${to(g)}${to(b)}`
28}
29 
30function rgbToHsv(r: number, g: number, b: number): Hsv {
31  const rr = r / 255
32  const gg = g / 255
33  const bb = b / 255
34  const max = Math.max(rr, gg, bb)
35  const min = Math.min(rr, gg, bb)
36  const d = max - min
37  let h = 0
38  if (d !== 0) {
39    if (max === rr) h = ((gg - bb) / d) % 6
40    else if (max === gg) h = (bb - rr) / d + 2
41    else h = (rr - gg) / d + 4
42    h *= 60
43    if (h < 0) h += 360
44  }
45  const s = max === 0 ? 0 : d / max
46  return { h, s, v: max }
47}
48 
49function hsvToRgb({ h, s, v }: Hsv): { r: number; g: number; b: number } {
50  const c = v * s
51  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
52  const m = v - c
53  let r = 0
54  let g = 0
55  let b = 0
56  if (h < 60) [r, g, b] = [c, x, 0]
57  else if (h < 120) [r, g, b] = [x, c, 0]
58  else if (h < 180) [r, g, b] = [0, c, x]
59  else if (h < 240) [r, g, b] = [0, x, c]
60  else if (h < 300) [r, g, b] = [x, 0, c]
61  else [r, g, b] = [c, 0, x]
62  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }
63}
64 
65function hexToHsv(hex: string): Hsv | null {
66  const rgb = hexToRgb(hex)
67  if (!rgb) return null
68  return rgbToHsv(rgb.r, rgb.g, rgb.b)
69}
70 
71function hsvToHex(hsv: Hsv): string {
72  const { r, g, b } = hsvToRgb(hsv)
73  return rgbToHex(r, g, b)
74}
75 
76// Pure-hue hex (full saturation + value) for the saturation/value plane bg.
77function hueHex(h: number): string {
78  return hsvToHex({ h, s: 1, v: 1 })
79}
80 
81// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
82 
83// --- component --------------------------------------------------------------
84 
85export interface ColorPickerProps
86  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
87  /** Caption rendered above the picker (uppercased). */
88// … truncated