@hex-core/components 1.3.1 → 1.5.0

package/dist/code-block-copy.js

@@ -0,0 +1,108 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var RESET_DELAY_MS = 1500;
+function CodeBlockCopy({ code, className, ...props }) {
+  const [state, setState] = React.useState("idle");
+  React.useEffect(() => {
+    if (state === "idle") return;
+    const id = window.setTimeout(() => setState("idle"), RESET_DELAY_MS);
+    return () => window.clearTimeout(id);
+  }, [state]);
+  async function handleClick() {
+    try {
+      await navigator.clipboard.writeText(code);
+      setState("copied");
+    } catch {
+      setState("error");
+    }
+  }
+  const ariaLabel = state === "copied" ? "Copied" : state === "error" ? "Copy failed" : "Copy code";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": ariaLabel,
+      title: ariaLabel,
+      className: cn(
+        "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground",
+        "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        "hover:bg-foreground/10 hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      ...props,
+      children: state === "copied" ? /* @__PURE__ */ jsx(CheckGlyph, {}) : state === "error" ? /* @__PURE__ */ jsx(ErrorGlyph, {}) : /* @__PURE__ */ jsx(CopyGlyph, {})
+    }
+  );
+}
+function CopyGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 16 16",
+      width: "13",
+      height: "13",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M11 5V3.5A1.5 1.5 0 0 0 9.5 2h-6A1.5 1.5 0 0 0 2 3.5v6A1.5 1.5 0 0 0 3.5 11H5" })
+      ]
+    }
+  );
+}
+function CheckGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 16 16",
+      width: "13",
+      height: "13",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "text-emerald-500",
+      children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 5" })
+    }
+  );
+}
+function ErrorGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 16 16",
+      width: "13",
+      height: "13",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "text-destructive",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 5v3.5M8 11v.01" })
+      ]
+    }
+  );
+}
+
+export { CodeBlockCopy };
+//# sourceMappingURL=code-block-copy.js.map
+//# sourceMappingURL=code-block-copy.js.map

package/dist/code-block-copy.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/ai/code-block/code-block-copy.tsx"],"names":[],"mappings":"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","file":"code-block-copy.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst RESET_DELAY_MS = 1500;\n\n/**\n * Copy-to-clipboard button for the `CodeBlock` header. Lives in a\n * client-only file so the surrounding `CodeBlock` (an async Server\n * Component) can render server-side while this island hydrates on the\n * client for `navigator.clipboard` access.\n *\n * @example\n * <CodeBlockCopy code={code} />\n */\nexport interface CodeBlockCopyProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\t/** The code text to copy. Must be plain text (not the highlighted HTML). */\n\tcode: string;\n}\n\n/**\n * Renders the copy button. Switches to a check icon for ~1.5s after a\n * successful copy.\n *\n * @param props - the raw code string\n * @returns A button that copies on click\n */\ntype CopyState = \"idle\" | \"copied\" | \"error\";\n\nfunction CodeBlockCopy({ code, className, ...props }: CodeBlockCopyProps) {\n\tconst [state, setState] = React.useState<CopyState>(\"idle\");\n\n\tReact.useEffect(() => {\n\t\tif (state === \"idle\") return;\n\t\tconst id = window.setTimeout(() => setState(\"idle\"), RESET_DELAY_MS);\n\t\treturn () => window.clearTimeout(id);\n\t}, [state]);\n\n\tasync function handleClick() {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetState(\"copied\");\n\t\t} catch {\n\t\t\tsetState(\"error\");\n\t\t}\n\t}\n\n\tconst ariaLabel =\n\t\tstate === \"copied\" ? \"Copied\" : state === \"error\" ? \"Copy failed\" : \"Copy code\";\n\n\treturn (\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tonClick={handleClick}\n\t\t\taria-label={ariaLabel}\n\t\t\ttitle={ariaLabel}\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground\",\n\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\"hover:bg-foreground/10 hover:text-foreground\",\n\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{state === \"copied\" ? <CheckGlyph /> : state === \"error\" ? <ErrorGlyph /> : <CopyGlyph />}\n\t\t</button>\n\t);\n}\n\nfunction CopyGlyph() {\n\treturn (\n\t\t<svg\n\t\t\taria-hidden\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\twidth=\"13\"\n\t\t\theight=\"13\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t>\n\t\t\t<rect x=\"5\" y=\"5\" width=\"9\" height=\"9\" rx=\"1.5\" />\n\t\t\t<path d=\"M11 5V3.5A1.5 1.5 0 0 0 9.5 2h-6A1.5 1.5 0 0 0 2 3.5v6A1.5 1.5 0 0 0 3.5 11H5\" />\n\t\t</svg>\n\t);\n}\n\nfunction CheckGlyph() {\n\treturn (\n\t\t<svg\n\t\t\taria-hidden\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\twidth=\"13\"\n\t\t\theight=\"13\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"text-emerald-500\"\n\t\t>\n\t\t\t<path d=\"M3 8l3.5 3.5L13 5\" />\n\t\t</svg>\n\t);\n}\n\nfunction ErrorGlyph() {\n\treturn (\n\t\t<svg\n\t\t\taria-hidden\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\twidth=\"13\"\n\t\t\theight=\"13\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"text-destructive\"\n\t\t>\n\t\t\t<circle cx=\"8\" cy=\"8\" r=\"6.5\" />\n\t\t\t<path d=\"M8 5v3.5M8 11v.01\" />\n\t\t</svg>\n\t);\n}\n\nexport { CodeBlockCopy };\n"]}

package/dist/code-block.d.ts

@@ -0,0 +1,3 @@
+export { SupportedLang_alias_1 as SupportedLang } from './_tsup-dts-rollup.js';
+export { CodeBlockProps_alias_1 as CodeBlockProps } from './_tsup-dts-rollup.js';
+export { CodeBlock_alias_1 as CodeBlock } from './_tsup-dts-rollup.js';

package/dist/code-block.js

@@ -0,0 +1,90 @@
+import { cache } from 'react';
+import { codeToHtml } from 'shiki';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { CodeBlockCopy } from './code-block-copy.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/ai/code-block/code-block.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LABEL_TO_LANG = {
+  pnpm: "bash",
+  npm: "bash",
+  yarn: "bash",
+  bun: "bash",
+  bash: "bash",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  ts: "ts",
+  typescript: "ts",
+  tsx: "tsx",
+  js: "js",
+  javascript: "js",
+  jsx: "jsx",
+  json: "json",
+  css: "css",
+  html: "html",
+  md: "md",
+  markdown: "md",
+  py: "py",
+  python: "py",
+  text: "text",
+  prompt: "text",
+  plain: "text"
+};
+var DEFAULT_THEMES = { light: "github-light", dark: "github-dark" };
+var cachedCodeToHtml = cache(
+  async (code, lang, themesKey, themes) => {
+    return codeToHtml(code, { lang, themes, defaultColor: false });
+  }
+);
+function resolveLang(label, language) {
+  if (language) return language;
+  if (label) {
+    const fromLabel = LABEL_TO_LANG[label.toLowerCase()];
+    if (fromLabel) return fromLabel;
+  }
+  return "text";
+}
+async function CodeBlock({
+  code,
+  label,
+  language,
+  themes = DEFAULT_THEMES,
+  className
+}) {
+  const lang = resolveLang(label, language);
+  const themesKey = `${themes.light}|${themes.dark}`;
+  const html = await cachedCodeToHtml(code, lang, themesKey, themes);
+  const displayLabel = label ?? lang;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-hidden rounded-lg border bg-card text-card-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b bg-muted/40 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs font-medium text-muted-foreground", children: displayLabel }),
+          /* @__PURE__ */ jsx(CodeBlockCopy, { code })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-shiki": "",
+            className: "overflow-x-auto p-4 font-mono text-sm [&_pre]:!bg-transparent",
+            dangerouslySetInnerHTML: { __html: html }
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CodeBlock };
+//# sourceMappingURL=code-block.js.map
+//# sourceMappingURL=code-block.js.map

package/dist/code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/ai/code-block/code-block.tsx"],"names":[],"mappings":"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","file":"code-block.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\nimport { cache } from \"react\";\nimport { codeToHtml } from \"shiki\";\nimport { cn } from \"../../lib/utils.js\";\nimport { CodeBlockCopy } from \"./code-block-copy.js\";\n\n/**\n * Languages we surface in the prop type. Plain literal union of real\n * Shiki grammar IDs — kept literal (not `Extract<BundledLanguage, …>`)\n * because Shiki's full bundled-language union is 600+ literals, and\n * deriving from it forced the rollup-dts pass past a 4GB heap. The\n * literals here are all standard Shiki grammar IDs; if Shiki removes\n * one upstream, `codeToHtml` will throw at runtime — acceptable trade.\n */\nexport type SupportedLang =\n\t| \"bash\"\n\t| \"ts\"\n\t| \"tsx\"\n\t| \"js\"\n\t| \"jsx\"\n\t| \"json\"\n\t| \"css\"\n\t| \"html\"\n\t| \"md\"\n\t| \"py\"\n\t| \"text\";\n\nconst LABEL_TO_LANG: Record<string, SupportedLang> = {\n\tpnpm: \"bash\",\n\tnpm: \"bash\",\n\tyarn: \"bash\",\n\tbun: \"bash\",\n\tbash: \"bash\",\n\tsh: \"bash\",\n\tshell: \"bash\",\n\tzsh: \"bash\",\n\tts: \"ts\",\n\ttypescript: \"ts\",\n\ttsx: \"tsx\",\n\tjs: \"js\",\n\tjavascript: \"js\",\n\tjsx: \"jsx\",\n\tjson: \"json\",\n\tcss: \"css\",\n\thtml: \"html\",\n\tmd: \"md\",\n\tmarkdown: \"md\",\n\tpy: \"py\",\n\tpython: \"py\",\n\ttext: \"text\",\n\tprompt: \"text\",\n\tplain: \"text\",\n};\n\nconst DEFAULT_THEMES = { light: \"github-light\", dark: \"github-dark\" } as const;\n\n/**\n * Per-render-tree memoization of `codeToHtml`. React's `cache()` dedupes\n * identical (code, lang, theme) combos within a single RSC render pass —\n * useful when a page renders many copies of the same install snippet.\n * Shiki itself caches grammars/themes per process, so this layer only\n * eliminates duplicate parse + tokenize work within one request.\n */\nconst cachedCodeToHtml = cache(\n\tasync (code: string, lang: SupportedLang, themesKey: string, themes: { light: string; dark: string }) => {\n\t\tvoid themesKey;\n\t\treturn codeToHtml(code, { lang, themes, defaultColor: false });\n\t},\n);\n\nfunction resolveLang(label?: string, language?: SupportedLang): SupportedLang {\n\tif (language) return language;\n\tif (label) {\n\t\tconst fromLabel = LABEL_TO_LANG[label.toLowerCase()];\n\t\tif (fromLabel) return fromLabel;\n\t}\n\treturn \"text\";\n}\n\n/**\n * Syntax-highlighted code block with a language-label header and a copy\n * button. Highlighting runs server-side via Shiki using a dual-theme\n * (default: github-light / github-dark) so the same HTML flips on\n * `data-theme`/`prefers-color-scheme` without client-side rehydration.\n *\n * Async Server Component — render inside RSC trees or pre-render in\n * static contexts. For client-side streaming code blocks, plug Streamdown's\n * built-in code rendering via `Markdown components={{ pre: … }}` instead.\n *\n * @example\n * <CodeBlock label=\"pnpm\" code=\"pnpm add @hex-core/components\" />\n * @example\n * <CodeBlock language=\"tsx\" code={src} />\n */\nexport interface CodeBlockProps {\n\tcode: string;\n\t/** Optional header label (e.g. \"pnpm\", \"tsx\"). Inferred from `language` if omitted. */\n\tlabel?: string;\n\t/** Explicit Shiki grammar key. Overrides inference from `label`. */\n\tlanguage?: SupportedLang;\n\t/** Override the default github-light / github-dark theme pair. */\n\tthemes?: { light: string; dark: string };\n\tclassName?: string;\n}\n\n/**\n * Async Server Component that highlights `code` server-side and emits the\n * resulting HTML with a header + copy island.\n *\n * @param props - code, optional label/language/themes\n * @returns A bordered card wrapping the highlighted code\n */\nasync function CodeBlock({\n\tcode,\n\tlabel,\n\tlanguage,\n\tthemes = DEFAULT_THEMES,\n\tclassName,\n}: CodeBlockProps) {\n\tconst lang = resolveLang(label, language);\n\tconst themesKey = `${themes.light}|${themes.dark}`;\n\tconst html = await cachedCodeToHtml(code, lang, themesKey, themes);\n\tconst displayLabel = label ?? lang;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"group relative overflow-hidden rounded-lg border bg-card text-card-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"flex items-center justify-between border-b bg-muted/40 px-3 py-1.5\">\n\t\t\t\t<span className=\"font-mono text-xs font-medium text-muted-foreground\">{displayLabel}</span>\n\t\t\t\t<CodeBlockCopy code={code} />\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tdata-shiki=\"\"\n\t\t\t\tclassName=\"overflow-x-auto p-4 font-mono text-sm [&_pre]:!bg-transparent\"\n\t\t\t\t// biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki output is trusted server-rendered HTML\n\t\t\t\tdangerouslySetInnerHTML={{ __html: html }}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { CodeBlock };\n"]}

package/dist/collapsible.d.ts

@@ -0,0 +1,3 @@
+export { Collapsible_alias_1 as Collapsible } from './_tsup-dts-rollup.js';
+export { CollapsibleTrigger_alias_1 as CollapsibleTrigger } from './_tsup-dts-rollup.js';
+export { CollapsibleContent_alias_1 as CollapsibleContent } from './_tsup-dts-rollup.js';

package/dist/collapsible.js

@@ -0,0 +1,10 @@
+"use client";
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger };
+//# sourceMappingURL=collapsible.js.map
+//# sourceMappingURL=collapsible.js.map

package/dist/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collapsible/collapsible.tsx"],"names":["CollapsibleTrigger","CollapsibleContent"],"mappings":";;AAKA,IAAM,WAAA,GAAmC,oBAAA,CAAA;AAGzC,IAAMA,mBAAAA,GAA0C,oBAAA,CAAA;AAGhD,IAAMC,mBAAAA,GAA0C,oBAAA,CAAA","file":"collapsible.js","sourcesContent":["\"use client\";\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\n/** Root container controlling the expanded state of the content. */\nconst Collapsible = CollapsiblePrimitive.Root;\n\n/** The element that toggles the Collapsible open/closed. */\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\n/** The collapsible content shown/hidden by the trigger. */\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"]}

package/dist/color-picker.d.ts

@@ -0,0 +1,2 @@
+export { ColorPickerProps_alias_1 as ColorPickerProps } from './_tsup-dts-rollup.js';
+export { ColorPicker_alias_1 as ColorPicker } from './_tsup-dts-rollup.js';

package/dist/color-picker.js

@@ -0,0 +1,321 @@
+"use client";
+import * as React5 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/color.ts
+function parseHslTriplet(triplet) {
+  const parts = triplet.trim().split(/\s+/);
+  return {
+    h: Number.parseFloat(parts[0]) || 0,
+    s: Number.parseFloat(parts[1]) || 0,
+    l: Number.parseFloat(parts[2]) || 0
+  };
+}
+function formatHslTriplet({ h, s, l }) {
+  const round = (n) => Math.abs(n - Math.round(n)) < 1e-6 ? `${Math.round(n)}` : n.toFixed(1);
+  return `${Math.round(h)} ${round(s)}% ${round(l)}%`;
+}
+function hslToRgb(h, s, l) {
+  const sN = s / 100;
+  const lN = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sN * Math.min(lN, 1 - lN);
+  const f = (n) => lN - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4))
+  };
+}
+function rgbToHsl(r, g, b) {
+  const rN = r / 255;
+  const gN = g / 255;
+  const bN = b / 255;
+  const max = Math.max(rN, gN, bN);
+  const min = Math.min(rN, gN, bN);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === rN) h = (gN - bN) / d + (gN < bN ? 6 : 0);
+    else if (max === gN) h = (bN - rN) / d + 2;
+    else h = (rN - gN) / d + 4;
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslTripletToHex(triplet) {
+  const { h, s, l } = parseHslTriplet(triplet);
+  const { r, g, b } = hslToRgb(h, s, l);
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToHslTriplet(hex) {
+  const clean = hex.trim().replace(/^#/, "");
+  let normalized;
+  if (/^[0-9a-fA-F]{3}$/.test(clean)) {
+    normalized = clean.split("").map((c) => c + c).join("");
+  } else if (/^[0-9a-fA-F]{6}$/.test(clean)) {
+    normalized = clean;
+  } else {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  return formatHslTriplet(rgbToHsl(r, g, b));
+}
+var Input = React5.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          // inset-ring gives a self-borne edge so the input field is visible on flat
+          // surfaces (token border alone is too low-contrast on bg-background=white).
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "focus-visible:shadow-md focus-visible:border-ring/50",
+          "hover:border-ring/30 hover:shadow-md",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
+var Slider = React5.forwardRef(({ className, thumbLabels, ...props }, ref) => {
+  const values = props.value ?? props.defaultValue ?? [0];
+  const rootLabel = props["aria-label"];
+  const rootLabelledBy = props["aria-labelledby"];
+  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && thumbLabels && thumbLabels.length !== values.length) {
+    console.warn(
+      `Slider: thumbLabels.length (${thumbLabels.length}) does not match value.length (${values.length}). Missing labels fall back to indexed names; extra labels are ignored.`
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: cn("relative flex w-full touch-none select-none items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        values.map((_, i) => {
+          const explicit = thumbLabels?.[i];
+          const fallback = values.length === 1 ? rootLabel : rootLabel ? `${rootLabel} (${i + 1} of ${values.length})` : void 0;
+          return /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": explicit ?? fallback,
+              "aria-labelledby": explicit || fallback ? void 0 : rootLabelledBy,
+              className: cn(
+                "block h-5 w-5 rounded-full border-2 border-primary bg-background",
+                "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-md",
+                "hover:shadow-lg hover:scale-110",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "disabled:pointer-events-none disabled:opacity-50"
+              )
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+var INTEGER_EPSILON = 1e-6;
+var looksInteger = (n) => Math.abs(n - Math.round(n)) < INTEGER_EPSILON;
+function ColorPicker({
+  value,
+  onChange,
+  disabled,
+  "aria-label": ariaLabel = "Pick color",
+  className
+}) {
+  const hsl = React5.useMemo(() => parseHslTriplet(value), [value]);
+  const hex = React5.useMemo(() => hslTripletToHex(value), [value]);
+  const update = React5.useCallback(
+    (patch) => {
+      onChange(formatHslTriplet({ ...hsl, ...patch }));
+    },
+    [hsl, onChange]
+  );
+  const hexInputRef = React5.useRef(null);
+  const [hexBuffer, setHexBuffer] = React5.useState(hex);
+  React5.useEffect(() => {
+    if (typeof document === "undefined" || document.activeElement !== hexInputRef.current) {
+      setHexBuffer(hex);
+    }
+  }, [hex]);
+  const handleHexChange = (e) => {
+    const next = e.target.value;
+    setHexBuffer(next);
+    const triplet = hexToHslTriplet(next);
+    if (triplet !== null) onChange(triplet);
+  };
+  const hexId = React5.useId();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm shadow-sm",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "hover:shadow-md disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "h-5 w-5 rounded-sm border border-border",
+              style: { backgroundColor: `hsl(${value})` }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase", children: hex })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-4", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SliderRow,
+        {
+          label: "Hue",
+          suffix: "\xB0",
+          value: hsl.h,
+          max: 360,
+          step: 1,
+          onChange: (h) => update({ h })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SliderRow,
+        {
+          label: "Saturation",
+          suffix: "%",
+          value: hsl.s,
+          max: 100,
+          step: 0.1,
+          onChange: (s) => update({ s })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SliderRow,
+        {
+          label: "Lightness",
+          suffix: "%",
+          value: hsl.l,
+          max: 100,
+          step: 0.1,
+          onChange: (l) => update({ l })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: hexId, className: "text-xs", children: "Hex" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: hexId,
+              ref: hexInputRef,
+              value: hexBuffer,
+              onChange: handleHexChange,
+              className: "font-mono text-xs uppercase",
+              spellCheck: false,
+              autoComplete: "off"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "h-9 w-9 shrink-0 rounded-md border border-border",
+            style: { backgroundColor: `hsl(${value})` }
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function SliderRow({ label, suffix, value, max, step, onChange }) {
+  const display = looksInteger(value) ? `${Math.round(value)}` : value.toFixed(1);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: [
+        display,
+        suffix
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value: [value],
+        min: 0,
+        max,
+        step,
+        "aria-label": label,
+        onValueChange: (values) => onChange(values[0] ?? 0)
+      }
+    )
+  ] });
+}
+
+export { ColorPicker };
+//# sourceMappingURL=color-picker.js.map
+//# sourceMappingURL=color-picker.js.map

package/dist/color-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/lib/color.ts","../src/primitives/input/input.tsx","../src/primitives/label/label.tsx","../src/primitives/slider/slider.tsx","../src/components/popover/popover.tsx","../src/components/color-picker/color-picker.tsx"],"names":["React","React2","jsx","React3","React4","jsxs"],"mappings":"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","file":"color-picker.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","/**\n * Color conversion utilities for the HSL-triplet token format used across\n * `@hex-core/tokens` themes (`H S% L%`, e.g. `\"240 5.9% 10%\"` — no `hsl()`\n * wrapper, no commas).\n *\n * The triplet is the round-trip-safe serialization for Hex UI: tokens flow\n * triplet → CSS `hsl(var(--token))` → rendered color, and the ColorPicker\n * component edits triplets directly. Hex/RGB conversions are display\n * adapters, not the source of truth.\n */\n\n/** Parsed HSL components. `h` is degrees (0–360); `s` and `l` are percentages (0–100). */\nexport interface HslTriplet {\n\th: number;\n\ts: number;\n\tl: number;\n}\n\n/** Parsed RGB components. Each channel is 0–255. */\nexport interface RgbColor {\n\tr: number;\n\tg: number;\n\tb: number;\n}\n\n/**\n * Parse an HSL triplet string into numeric components.\n *\n * Note: malformed input silently coerces to `{0,0,0}` (pure black) rather than\n * returning an error signal. Callers that need to distinguish \"user typed\n * black\" from \"user typed garbage\" should validate the input format first.\n * `hexToHslTriplet` returns `null` for malformed hex; this asymmetry is\n * intentional — triplets feed CSS variables where any non-color value would\n * already break rendering.\n *\n * @param triplet - String in the form `\"<H> <S>% <L>%\"` (e.g. `\"240 5.9% 10%\"`).\n * @returns Numeric components, or `{0,0,0}` if the input is malformed.\n */\nexport function parseHslTriplet(triplet: string): HslTriplet {\n\tconst parts = triplet.trim().split(/\\s+/);\n\treturn {\n\t\th: Number.parseFloat(parts[0]) || 0,\n\t\ts: Number.parseFloat(parts[1]) || 0,\n\t\tl: Number.parseFloat(parts[2]) || 0,\n\t};\n}\n\n/**\n * Format HSL components into an HSL triplet string (the canonical token format).\n * @param hsl - Numeric components.\n * @returns Triplet in the form `\"<H> <S>% <L>%\"`.\n */\nexport function formatHslTriplet({ h, s, l }: HslTriplet): string {\n\t// Tolerant integer check: rgbToHsl can produce values like 5.0000000001 due\n\t// to float arithmetic; format those as \"5\" rather than \"5.0\".\n\tconst round = (n: number) =>\n\t\tMath.abs(n - Math.round(n)) < 1e-6 ? `${Math.round(n)}` : n.toFixed(1);\n\treturn `${Math.round(h)} ${round(s)}% ${round(l)}%`;\n}\n\n/**\n * Convert HSL components to RGB.\n * @param h - Hue (0–360).\n * @param s - Saturation (0–100).\n * @param l - Lightness (0–100).\n * @returns RGB channels (0–255, rounded).\n */\nexport function hslToRgb(h: number, s: number, l: number): RgbColor {\n\tconst sN = s / 100;\n\tconst lN = l / 100;\n\tconst k = (n: number) => (n + h / 30) % 12;\n\tconst a = sN * Math.min(lN, 1 - lN);\n\tconst f = (n: number) => lN - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));\n\treturn {\n\t\tr: Math.round(255 * f(0)),\n\t\tg: Math.round(255 * f(8)),\n\t\tb: Math.round(255 * f(4)),\n\t};\n}\n\n/**\n * Convert RGB components to HSL.\n * @param r - Red (0–255).\n * @param g - Green (0–255).\n * @param b - Blue (0–255).\n * @returns HSL components (h: 0–360, s: 0–100, l: 0–100).\n */\nexport function rgbToHsl(r: number, g: number, b: number): HslTriplet {\n\tconst rN = r / 255;\n\tconst gN = g / 255;\n\tconst bN = b / 255;\n\tconst max = Math.max(rN, gN, bN);\n\tconst min = Math.min(rN, gN, bN);\n\tlet h = 0;\n\tlet s = 0;\n\tconst l = (max + min) / 2;\n\tif (max !== min) {\n\t\tconst d = max - min;\n\t\ts = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\t\tif (max === rN) h = (gN - bN) / d + (gN < bN ? 6 : 0);\n\t\telse if (max === gN) h = (bN - rN) / d + 2;\n\t\telse h = (rN - gN) / d + 4;\n\t\th /= 6;\n\t}\n\treturn { h: h * 360, s: s * 100, l: l * 100 };\n}\n\n/**\n * Convert an HSL triplet to a 6-digit hex string.\n * @param triplet - HSL triplet (e.g. `\"240 5.9% 10%\"`).\n * @returns Lowercase hex string with leading `#` (e.g. `\"#181a1f\"`).\n */\nexport function hslTripletToHex(triplet: string): string {\n\tconst { h, s, l } = parseHslTriplet(triplet);\n\tconst { r, g, b } = hslToRgb(h, s, l);\n\tconst toHex = (n: number) => n.toString(16).padStart(2, \"0\");\n\treturn `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n/**\n * Convert a hex string to an HSL triplet.\n * Accepts 3-digit (`#abc`) or 6-digit (`#aabbcc`) hex with optional `#`.\n * @param hex - Hex color string.\n * @returns HSL triplet, or `null` if the input is malformed.\n */\nexport function hexToHslTriplet(hex: string): string | null {\n\tconst clean = hex.trim().replace(/^#/, \"\");\n\tlet normalized: string;\n\tif (/^[0-9a-fA-F]{3}$/.test(clean)) {\n\t\tnormalized = clean\n\t\t\t.split(\"\")\n\t\t\t.map((c) => c + c)\n\t\t\t.join(\"\");\n\t} else if (/^[0-9a-fA-F]{6}$/.test(clean)) {\n\t\tnormalized = clean;\n\t} else {\n\t\treturn null;\n\t}\n\tconst r = Number.parseInt(normalized.slice(0, 2), 16);\n\tconst g = Number.parseInt(normalized.slice(2, 4), 16);\n\tconst b = Number.parseInt(normalized.slice(4, 6), 16);\n\treturn formatHslTriplet(rgbToHsl(r, g, b));\n}\n","import * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm\",\n\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t// inset-ring gives a self-borne edge so the input field is visible on flat\n\t\t\t\t\t// surfaces (token border alone is too low-contrast on bg-background=white).\n\t\t\t\t\t\"shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\t\t\"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n\t\t\t\t\t\"placeholder:text-muted-foreground\",\n\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\"focus-visible:shadow-md focus-visible:border-ring/50\",\n\t\t\t\t\t\"hover:border-ring/30 hover:shadow-md\",\n\t\t\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n","\"use client\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n);\n\nexport interface LabelProps\n\textends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n\t\tVariantProps<typeof labelVariants> {}\n\nconst Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(\n\t({ className, ...props }, ref) => (\n\t\t<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport { Label };\n","\"use client\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n// Local ambient — components run in browsers where bundlers (Next, Vite, tsup)\n// replace `process.env.NODE_ENV` at build time. Avoids pulling @types/node into\n// the components package just for one dev-mode warning.\ndeclare const process: { env?: { NODE_ENV?: string } } | undefined;\n\ninterface SliderProps\n\textends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n\t/**\n\t * Per-thumb accessible labels. When the slider has multiple thumbs, pass\n\t * one entry per thumb (e.g. [\"Minimum\", \"Maximum\"]). For a single-thumb\n\t * slider, the Root's `aria-label` / `aria-labelledby` is mirrored onto\n\t * the thumb automatically — pass `thumbLabels` only when those defaults\n\t * are insufficient.\n\t */\n\tthumbLabels?: string[];\n}\n\n/**\n * A range input with one or more draggable thumbs.\n * Built on Radix UI Slider with keyboard controls (arrows, Home, End, PageUp/Down).\n */\nconst Slider = React.forwardRef<\n\tReact.ComponentRef<typeof SliderPrimitive.Root>,\n\tSliderProps\n>(({ className, thumbLabels, ...props }, ref) => {\n\tconst values = props.value ?? props.defaultValue ?? [0];\n\tconst rootLabel = props[\"aria-label\"];\n\tconst rootLabelledBy = props[\"aria-labelledby\"];\n\n\tif (\n\t\ttypeof process !== \"undefined\" &&\n\t\tprocess.env?.NODE_ENV !== \"production\" &&\n\t\tthumbLabels &&\n\t\tthumbLabels.length !== values.length\n\t) {\n\t\tconsole.warn(\n\t\t\t`Slider: thumbLabels.length (${thumbLabels.length}) does not match value.length (${values.length}). ` +\n\t\t\t\t`Missing labels fall back to indexed names; extra labels are ignored.`,\n\t\t);\n\t}\n\n\treturn (\n\t\t<SliderPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SliderPrimitive.Track className=\"relative h-2 w-full grow overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary\">\n\t\t\t\t<SliderPrimitive.Range className=\"absolute h-full bg-primary\" />\n\t\t\t</SliderPrimitive.Track>\n\t\t\t{values.map((_, i) => {\n\t\t\t\tconst explicit = thumbLabels?.[i];\n\t\t\t\tconst fallback =\n\t\t\t\t\tvalues.length === 1\n\t\t\t\t\t\t? rootLabel\n\t\t\t\t\t\t: rootLabel\n\t\t\t\t\t\t\t? `${rootLabel} (${i + 1} of ${values.length})`\n\t\t\t\t\t\t\t: undefined;\n\t\t\t\treturn (\n\t\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Radix renders one thumb per value by index\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\taria-label={explicit ?? fallback}\n\t\t\t\t\t\taria-labelledby={\n\t\t\t\t\t\t\texplicit || fallback ? undefined : rootLabelledBy\n\t\t\t\t\t\t}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"block h-5 w-5 rounded-full border-2 border-primary bg-background\",\n\t\t\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-md\",\n\t\t\t\t\t\t\t\"hover:shadow-lg hover:scale-110\",\n\t\t\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</SliderPrimitive.Root>\n\t);\n});\nSlider.displayName = \"Slider\";\n\nexport type { SliderProps };\n\nexport { Slider };\n","\"use client\";\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a popover. */\nconst Popover = PopoverPrimitive.Root;\n\n/** The element that anchors and opens the popover. */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\n/** Helper to explicitly anchor the popover to a different element. */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\n\n/** The floating popover content panel. */\nconst PopoverContent = React.forwardRef<\n\tReact.ComponentRef<typeof PopoverPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<PopoverPrimitive.Portal>\n\t\t<PopoverPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</PopoverPrimitive.Portal>\n));\nPopoverContent.displayName = \"PopoverContent\";\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport {\n\tformatHslTriplet,\n\thexToHslTriplet,\n\thslTripletToHex,\n\tparseHslTriplet,\n} from \"../../lib/color.js\";\nimport { Input } from \"../../primitives/input/input.js\";\nimport { Label } from \"../../primitives/label/label.js\";\nimport { Slider } from \"../../primitives/slider/slider.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/popover.js\";\n\n/** Tolerance for treating a float as integer-valued (handles arithmetic drift in HSL roundtrips). */\nconst INTEGER_EPSILON = 1e-6;\n\nconst looksInteger = (n: number) => Math.abs(n - Math.round(n)) < INTEGER_EPSILON;\n\n/** Props for the ColorPicker component. */\nexport interface ColorPickerProps {\n\t/**\n\t * Current color as an HSL triplet string (`\"<H> <S>% <L>%\"`, e.g. `\"240 5.9% 10%\"`).\n\t * Match the format used by `@hex-core/tokens`; round-trip safe.\n\t */\n\tvalue: string;\n\t/**\n\t * Called with the next HSL triplet whenever the user drags a slider or commits a valid hex value.\n\t * Not called for invalid hex input — the picker keeps the prior value until the input parses cleanly.\n\t */\n\tonChange: (value: string) => void;\n\t/**\n\t * Disable interaction. Native `disabled` attribute is set on the trigger so the\n\t * popover doesn't open via mouse or keyboard activation. Tab focus still lands\n\t * on the trigger per browser defaults; if you want to fully remove it from the\n\t * tab order, wrap in a parent that handles `tabIndex` accordingly.\n\t */\n\tdisabled?: boolean;\n\t/** Accessible name for the trigger button (defaults to \"Pick color\"). */\n\t\"aria-label\"?: string;\n\t/** Additional class names merged onto the trigger. */\n\tclassName?: string;\n}\n\n/**\n * HSL-native color picker. Edits an HSL triplet directly via three sliders\n * (H/S/L), with a hex input as a display adapter.\n *\n * Round-trip safe: triplet → hex → triplet preserves the slider state because\n * sliders are the source of truth and hex updates them only when valid.\n *\n * @param props - Controlled component; `value` and `onChange` are required.\n * @returns A trigger button that opens a popover with H/S/L sliders + hex input.\n * @example\n * ```tsx\n * const [color, setColor] = React.useState(\"240 5.9% 10%\");\n * <ColorPicker value={color} onChange={setColor} aria-label=\"Primary color\" />\n * ```\n */\nfunction ColorPicker({\n\tvalue,\n\tonChange,\n\tdisabled,\n\t\"aria-label\": ariaLabel = \"Pick color\",\n\tclassName,\n}: ColorPickerProps) {\n\t// Memoize so the slider-row callbacks below are stable across renders with\n\t// the same `value`; downstream `Slider`s avoid spurious re-mounts.\n\tconst hsl = React.useMemo(() => parseHslTriplet(value), [value]);\n\tconst hex = React.useMemo(() => hslTripletToHex(value), [value]);\n\n\tconst update = React.useCallback(\n\t\t(patch: Partial<typeof hsl>) => {\n\t\t\tonChange(formatHslTriplet({ ...hsl, ...patch }));\n\t\t},\n\t\t[hsl, onChange],\n\t);\n\n\t// Hex input is locally controlled so the user can type intermediate states\n\t// (e.g. \"#1a\") without committing. Sync the buffer to the canonical hex\n\t// whenever the input is NOT focused — typing into a focused input must not\n\t// be clobbered by a parent re-render reflecting our own `onChange`.\n\tconst hexInputRef = React.useRef<HTMLInputElement>(null);\n\tconst [hexBuffer, setHexBuffer] = React.useState(hex);\n\tReact.useEffect(() => {\n\t\tif (\n\t\t\ttypeof document === \"undefined\" ||\n\t\t\tdocument.activeElement !== hexInputRef.current\n\t\t) {\n\t\t\tsetHexBuffer(hex);\n\t\t}\n\t}, [hex]);\n\n\tconst handleHexChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\tconst next = e.target.value;\n\t\tsetHexBuffer(next);\n\t\tconst triplet = hexToHslTriplet(next);\n\t\tif (triplet !== null) onChange(triplet);\n\t};\n\n\tconst hexId = React.useId();\n\n\treturn (\n\t\t<Popover>\n\t\t\t<PopoverTrigger asChild>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\taria-label={ariaLabel}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm shadow-sm\",\n\t\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\t\"hover:shadow-md disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"h-5 w-5 rounded-sm border border-border\"\n\t\t\t\t\t\tstyle={{ backgroundColor: `hsl(${value})` }}\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"font-mono text-xs uppercase\">{hex}</span>\n\t\t\t\t</button>\n\t\t\t</PopoverTrigger>\n\t\t\t<PopoverContent className=\"w-72 p-4\" align=\"start\">\n\t\t\t\t<div className=\"space-y-4\">\n\t\t\t\t\t<SliderRow\n\t\t\t\t\t\tlabel=\"Hue\"\n\t\t\t\t\t\tsuffix=\"°\"\n\t\t\t\t\t\tvalue={hsl.h}\n\t\t\t\t\t\tmax={360}\n\t\t\t\t\t\tstep={1}\n\t\t\t\t\t\tonChange={(h) => update({ h })}\n\t\t\t\t\t/>\n\t\t\t\t\t<SliderRow\n\t\t\t\t\t\tlabel=\"Saturation\"\n\t\t\t\t\t\tsuffix=\"%\"\n\t\t\t\t\t\tvalue={hsl.s}\n\t\t\t\t\t\tmax={100}\n\t\t\t\t\t\tstep={0.1}\n\t\t\t\t\t\tonChange={(s) => update({ s })}\n\t\t\t\t\t/>\n\t\t\t\t\t<SliderRow\n\t\t\t\t\t\tlabel=\"Lightness\"\n\t\t\t\t\t\tsuffix=\"%\"\n\t\t\t\t\t\tvalue={hsl.l}\n\t\t\t\t\t\tmax={100}\n\t\t\t\t\t\tstep={0.1}\n\t\t\t\t\t\tonChange={(l) => update({ l })}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"flex items-end gap-2\">\n\t\t\t\t\t\t<div className=\"flex-1 space-y-1\">\n\t\t\t\t\t\t\t<Label htmlFor={hexId} className=\"text-xs\">\n\t\t\t\t\t\t\t\tHex\n\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={hexId}\n\t\t\t\t\t\t\t\tref={hexInputRef}\n\t\t\t\t\t\t\t\tvalue={hexBuffer}\n\t\t\t\t\t\t\t\tonChange={handleHexChange}\n\t\t\t\t\t\t\t\tclassName=\"font-mono text-xs uppercase\"\n\t\t\t\t\t\t\t\tspellCheck={false}\n\t\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclassName=\"h-9 w-9 shrink-0 rounded-md border border-border\"\n\t\t\t\t\t\t\tstyle={{ backgroundColor: `hsl(${value})` }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</PopoverContent>\n\t\t</Popover>\n\t);\n}\n\ninterface SliderRowProps {\n\tlabel: string;\n\tsuffix: string;\n\tvalue: number;\n\tmax: number;\n\tstep: number;\n\tonChange: (next: number) => void;\n}\n\n/**\n * One labeled slider row inside the ColorPicker popover. Internal helper —\n * not exported.\n * @param props - Slider config + value-change callback.\n */\nfunction SliderRow({ label, suffix, value, max, step, onChange }: SliderRowProps) {\n\tconst display = looksInteger(value) ? `${Math.round(value)}` : value.toFixed(1);\n\treturn (\n\t\t<div className=\"space-y-1.5\">\n\t\t\t<div className=\"flex items-center justify-between\">\n\t\t\t\t<Label className=\"text-xs\">{label}</Label>\n\t\t\t\t<span className=\"font-mono text-xs tabular-nums text-muted-foreground\">\n\t\t\t\t\t{display}\n\t\t\t\t\t{suffix}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t\t<Slider\n\t\t\t\tvalue={[value]}\n\t\t\t\tmin={0}\n\t\t\t\tmax={max}\n\t\t\t\tstep={step}\n\t\t\t\taria-label={label}\n\t\t\t\tonValueChange={(values) => onChange(values[0] ?? 0)}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport { ColorPicker };\n"]}