51: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"] 52: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"] 53:T3833,"use client"; import { Pipette, Plus } from "lucide-react"; import { useEffect, useId, useRef, useState, useSyncExternalStore } from "react"; import { Label } from "./label"; import { cn } from "./lib/cn"; import "./color-picker.css"; export type ColorSwatch = { value: string; label: string }; type Hsva = { h: number; s: number; v: number; a: number }; type Rgb = { r: number; g: number; b: number; a: number }; type Format = "hex" | "rgb" | "hsl"; function clamp(value: number, min: number, max: number) { return Math.min(max, Math.max(min, value)); } function hexToRgb(input: string): Rgb | null { const raw = input.trim().replace("#", ""); const full = raw.length === 3 || raw.length === 4 ? raw.split("").map((char) => char + char).join("") : raw; if (!/^[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(full)) return null; return { r: Number.parseInt(full.slice(0, 2), 16), g: Number.parseInt(full.slice(2, 4), 16), b: Number.parseInt(full.slice(4, 6), 16), a: full.length === 8 ? Number.parseInt(full.slice(6, 8), 16) / 255 : 1, }; } function rgbToHsva({ r, g, b, a }: Rgb): Hsva { const red = r / 255; const green = g / 255; const blue = b / 255; const max = Math.max(red, green, blue); const min = Math.min(red, green, blue); const delta = max - min; let hue = 0; if (delta) { if (max === red) hue = ((green - blue) / delta) % 6; else if (max === green) hue = (blue - red) / delta + 2; else hue = (red - green) / delta + 4; hue *= 60; if (hue < 0) hue += 360; } return { h: hue, s: max === 0 ? 0 : delta / max, v: max, a }; } function hsvaToRgb({ h, s, v, a }: Hsva): Rgb { const chroma = v * s; const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1)); const m = v - chroma; const sector = Math.floor(h / 60); const channels = [ [chroma, x, 0], [x, chroma, 0], [0, chroma, x], [0, x, chroma], [x, 0, chroma], [chroma, 0, x], ][sector] ?? [0, 0, 0]; return { r: Math.round((channels[0] + m) * 255), g: Math.round((channels[1] + m) * 255), b: Math.round((channels[2] + m) * 255), a }; } function channel(value: number) { return value.toString(16).padStart(2, "0"); } function toHex(rgb: Rgb) { const base = `#${channel(rgb.r)}${channel(rgb.g)}${channel(rgb.b)}`; return rgb.a < 0.999 ? `${base}${channel(Math.round(rgb.a * 255))}` : base; } function formatColor(hsva: Hsva, format: Format) { const rgb = hsvaToRgb(hsva); if (format === "hex") return toHex(rgb).toUpperCase(); if (format === "rgb") return rgb.a < 0.999 ? `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(rgb.a * 100)}%)` : `rgb(${rgb.r} ${rgb.g} ${rgb.b})`; const lightness = hsva.v * (1 - hsva.s / 2); const saturation = lightness === 0 || lightness === 1 ? 0 : (hsva.v - lightness) / Math.min(lightness, 1 - lightness); const alpha = hsva.a < 0.999 ? ` / ${Math.round(hsva.a * 100)}%` : ""; return `hsl(${Math.round(hsva.h)} ${Math.round(saturation * 100)}% ${Math.round(lightness * 100)}%${alpha})`; } function parseColor(input: string): Hsva | null { const hex = hexToRgb(input); if (hex) return rgbToHsva(hex); const match = input.trim().match(/^(rgb|hsl)a?$(.+)$$/i); if (!match) return null; const parts = match[2].split(/[,/\s]+/).map(Number).filter((part) => !Number.isNaN(part)); if (match[1].toLowerCase() === "rgb" && parts.length >= 3) { return rgbToHsva({ r: parts[0], g: parts[1], b: parts[2], a: parts[3] == null ? 1 : parts[3] > 1 ? parts[3] / 100 : parts[3] }); } if (match[1].toLowerCase() === "hsl" && parts.length >= 3) { const s = parts[1] / 100; const l = parts[2] / 100; const a = parts[3] == null ? 1 : parts[3] > 1 ? parts[3] / 100 : parts[3]; const chroma = (1 - Math.abs(2 * l - 1)) * s; const x = chroma * (1 - Math.abs(((parts[0] / 60) % 2) - 1)); const m = l - chroma / 2; const sector = Math.floor(parts[0] / 60); const channels = [[chroma, x, 0], [x, chroma, 0], [0, chroma, x], [0, x, chroma], [x, 0, chroma], [chroma, 0, x]][sector] ?? [0, 0, 0]; return rgbToHsva({ r: Math.round((channels[0] + m) * 255), g: Math.round((channels[1] + m) * 255), b: Math.round((channels[2] + m) * 255), a }); } return null; } function luminance(rgb: Rgb) { const channelLuma = (value: number) => { const scaled = value / 255; return scaled <= 0.03928 ? scaled / 12.92 : ((scaled + 0.055) / 1.055) ** 2.4; }; return 0.2126 * channelLuma(rgb.r) + 0.7152 * channelLuma(rgb.g) + 0.0722 * channelLuma(rgb.b); } function cssColor(color: string): Rgb | null { const match = color.match(/rgba?\(([0-9.]+)[,\s]+([0-9.]+)[,\s]+([0-9.]+)/); if (!match) return null; return { r: Number(match[1]), g: Number(match[2]), b: Number(match[3]), a: 1 }; } function contrastGrade(ratio: number) { if (ratio >= 7) return "AAA"; if (ratio >= 4.5) return "AA"; if (ratio >= 3) return "AA Large"; return "Fail"; } export function ColorPicker({ label, swatches = [], value, defaultValue, onValueChange, background = "#ffffff", name, className, }: { label: string; swatches?: readonly ColorSwatch[]; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; background?: string; name?: string; className?: string; }) { const fieldId = useId(); const root = useRef(null); const area = useRef(null); const [local, setLocal] = useState(defaultValue ?? swatches[0]?.value ?? "#202124"); const [open, setOpen] = useState(false); const [format, setFormat] = useState("hex"); const [draft, setDraft] = useState(null); const [invalid, setInvalid] = useState(false); const [saved, setSaved] = useState([...swatches]); const current = value ?? local; const hsva = rgbToHsva(hexToRgb(current) ?? { r: 32, g: 33, b: 36, a: 1 }); const hueColor = toHex(hsvaToRgb({ ...hsva, s: 1, v: 1, a: 1 })); const [surface, setSurface] = useState(background); const backdrop = hexToRgb(surface) ?? cssColor(surface) ?? { r: 255, g: 255, b: 255, a: 1 }; const ratio = (Math.max(luminance(hsvaToRgb(hsva)), luminance(backdrop)) + 0.05) / (Math.min(luminance(hsvaToRgb(hsva)), luminance(backdrop)) + 0.05); const eyedropper = useSyncExternalStore(() => () => {}, () => "EyeDropper" in window, () => false); function commit(next: string) { const parsed = hexToRgb(next); if (!parsed) return; const hex = toHex(parsed); setDraft(null); setInvalid(false); if (value == null) setLocal(hex); onValueChange?.(hex); } function commitHsva(next: Hsva) { commit(toHex(hsvaToRgb(next))); } function paintArea(clientX: number, clientY: number) { const rect = area.current?.getBoundingClientRect(); if (!rect) return; commitHsva({ ...hsva, s: clamp((clientX - rect.left) / rect.width, 0, 1), v: 1 - clamp((clientY - rect.top) / rect.height, 0, 1) }); } useEffect(() => { if (!open) return; let node = root.current?.parentElement ?? null; while (node) { const color = getComputedStyle(node).backgroundColor; if (color && color !== "rgba(0, 0, 0, 0)" && color !== "transparent") { setSurface(color); break; } node = node.parentElement; } const onPointer = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) setOpen(false); }; const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") setOpen(false); }; document.addEventListener("pointerdown", onPointer); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("pointerdown", onPointer); document.removeEventListener("keydown", onKey); }; }, [open]); return (

{label} {open && ( )} {name ? : null}

); } 54:T4aa,/* color-picker.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="color-thumb"] { position: absolute; width: 0.875rem; height: 0.875rem; border: 2px solid #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--foreground); transform: translate(-50%, -50%); } [data-slot="color-hue"] { appearance: none; border-radius: 999px; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); } [data-slot="color-menu"] input[data-invalid="true"] { animation: caliper-reject var(--duration-travel) var(--ease-out); } [data-slot="color-menu"] { border: 1px solid var(--border); border-radius: var(--radius-overlay); transform-origin: top center; animation: caliper-menu-enter var(--duration-travel) var(--ease-showcase); } } [data-slot="color-menu"] { background-color: var(--elevated-glass); border-color: color-mix(in srgb, var(--edge-light) 45%, var(--border)); backdrop-filter: blur(var(--blur-overlay)); box-shadow: var(--shadow-overlay), 0 0 40px var(--edge-glow), inset 0 1px 0 var(--edge-light); } 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/color-picker.tsx","content":"$53","type":"registry:ui","target":"components/ui/color-picker.tsx"},{"path":"ui/label.tsx","content":"import type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\n\nexport function Label({ className, ...props }: ComponentProps<\"label\">) {\n return (\n \n );\n}\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/color-picker.css","content":"$54","type":"registry:file","target":"components/ui/color-picker.css"}],"className":"h-[70svh] min-h-80"}]]}]