import * as React from "react"; import { cn } from "@/lib/utils"; export interface ColorInputProps { /** Current color as a hex string (`#RRGGBB`). */ value: string; /** Fired with the new hex when the user picks a color. */ onChange: (hex: string) => void; /** Accessible label (required) -- callers pass a translated string. */ "aria-label": string; /** Show the hex value as monospace text beside the swatch. Default false. */ showHex?: boolean; /** Disable interaction (e.g. an auto-computed color). Default false. */ disabled?: boolean; /** Swatch size: `md` (32px, default) or `sm` (28px). */ size?: "sm" | "md"; /** * Icon centered over the swatch -- e.g. a paint brush to mark this as a * free "pick any color" control rather than a fixed swatch. The icon stays * legible over the chosen color (its tint flips with the swatch's luminance). */ icon?: React.ReactNode; /** * Render the swatch with a transparent (card) background instead of `value`, * for a "no custom color chosen yet" state. The picker still opens at `value`, * and once the user picks, drop `unset` so the swatch fills with their color. */ unset?: boolean; /** Mark as the active selection -- draws the same neutral ring as a chosen swatch. */ selected?: boolean; className?: string; /** Inline styles for the root element. */ style?: React.CSSProperties; } /** WCAG-ish readable icon tint over a solid hex background. */ function readableOn(hex: string): string { const m = /^#?([0-9a-f]{6})$/i.exec(hex.trim()); if (!m) return "#ffffff"; const n = parseInt(m[1], 16); const lin = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((v) => { const s = v / 255; return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4); }); const L = 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2]; return L > 0.4 ? "#1d1d1d" : "#ffffff"; } /** * A color swatch that opens the OS-native color picker (a hidden * `` triggered by the swatch button). Shared by Icon Stack * (solid/gradient stops) and Chip Away (custom accent). Presentational and * i18n-agnostic -- pass a translated `aria-label`. The button is the single * focusable control (with a focus ring); the input is inert to AT. */ export const ColorInput = React.forwardRef(function ColorInput({ value, onChange, "aria-label": ariaLabel, showHex = false, disabled = false, size = "md", icon, unset = false, selected = false, className, style, }, ref) { const inputRef = React.useRef(null); const swatch = size === "sm" ? "w-7 h-7" : "w-8 h-8"; return (

{showHex && ( {value} )} onChange(e.target.value)} disabled={disabled} className="sr-only" aria-hidden="true" tabIndex={-1} />

); }); ColorInput.displayName = "ColorInput"