52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1298,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" 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@whiskeyjack","registryDependencies":["https://whiskeyjack.net/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"components/ui/color-input.tsx","content":"$54","type":"registry:ui","target":"components/ui/color-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]