@techzyapp/ui-library 1.0.23 → 1.0.27

package/dist/ColorPickerPanel-DQ4CFnGa.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel-DQ4CFnGa.cjs","sources":["../src/components/ColorPicker/colorUtils.ts","../src/components/ColorPicker/ColorPickerPanel.tsx"],"sourcesContent":["/** Color math for the ColorPicker: hex ⇄ rgb ⇄ hsv, plus hex validation. All internal, no deps. */\n\nexport interface HSV {\n  /** Hue 0–360 */\n  h: number\n  /** Saturation 0–1 */\n  s: number\n  /** Value/brightness 0–1 */\n  v: number\n}\n\nimport { clamp01, hexToRgb, rgbToHex, type RGB } from '../../helpers/color'\n\n// the hex ⇄ rgb primitives are shared with the palette helpers — re-exported so nothing else changes\nexport { clamp01, normalizeHex, isValidHex, hexToRgb, rgbToHex } from '../../helpers/color'\nexport type { RGB } from '../../helpers/color'\n\nexport interface RGBA extends RGB {\n  /** Alpha 0–1 */\n  a: number\n}\n\nconst clamp255 = (n: number): number => Math.min(255, Math.max(0, Math.round(n)))\n\n/** RGB (0–255) → HSV. */\nexport function rgbToHsv({ r, g, b }: RGB): HSV {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const d = max - min\n\n  let h = 0\n  if (d !== 0) {\n    if (max === rn) h = ((gn - bn) / d) % 6\n    else if (max === gn) h = (bn - rn) / d + 2\n    else h = (rn - gn) / d + 4\n    h *= 60\n    if (h < 0) h += 360\n  }\n  const s = max === 0 ? 0 : d / max\n  return { h, s, v: max }\n}\n\n/** HSV → RGB (0–255). */\nexport function hsvToRgb({ h, s, v }: HSV): RGB {\n  const c = v * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = v - c\n  let r = 0\n  let g = 0\n  let b = 0\n  if (h < 60) [r, g, b] = [c, x, 0]\n  else if (h < 120) [r, g, b] = [x, c, 0]\n  else if (h < 180) [r, g, b] = [0, c, x]\n  else if (h < 240) [r, g, b] = [0, x, c]\n  else if (h < 300) [r, g, b] = [x, 0, c]\n  else [r, g, b] = [c, 0, x]\n  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }\n}\n\nexport const hexToHsv = (hex: string): HSV => rgbToHsv(hexToRgb(hex))\nexport const hsvToHex = (hsv: HSV): string => rgbToHex(hsvToRgb(hsv))\n\n/** A readable text/handle color (near-black or white) for sitting on top of a given hex fill. */\nexport function contrastOn(hex: string): string {\n  const { r, g, b } = hexToRgb(hex)\n  return (r * 299 + g * 587 + b * 114) / 1000 >= 150 ? '#04202b' : '#ffffff'\n}\n\nconst RGB_FUNC =\n  /^rgba?\\(\\s*([\\d.]+)\\s*[, ]\\s*([\\d.]+)\\s*[, ]\\s*([\\d.]+)\\s*(?:[,/]\\s*([\\d.]+%?)\\s*)?\\)$/i\n\n/**\n * Parses any CSS color the picker understands — `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa` hex (with\n * or without `#`), or `rgb()` / `rgba()` (alpha as `0–1` or a `%`) — to `{ r, g, b, a }` (`a` is\n * `0–1`), or `null` when it doesn't match.\n */\nexport function parseColor(input: string): RGBA | null {\n  const s = input.trim()\n  if (!s) return null\n\n  // hex (with or without #) — 3 / 4 / 6 / 8 digits (3 & 4 expand each nibble to a byte)\n  let h = s.replace(/^#/, '')\n  if (/^[0-9a-fA-F]{3,4}$/.test(h)) {\n    h = h\n      .split('')\n      .map((c) => c + c)\n      .join('')\n  }\n  if (/^[0-9a-fA-F]{6}$/.test(h)) {\n    return {\n      r: parseInt(h.slice(0, 2), 16),\n      g: parseInt(h.slice(2, 4), 16),\n      b: parseInt(h.slice(4, 6), 16),\n      a: 1,\n    }\n  }\n  if (/^[0-9a-fA-F]{8}$/.test(h)) {\n    return {\n      r: parseInt(h.slice(0, 2), 16),\n      g: parseInt(h.slice(2, 4), 16),\n      b: parseInt(h.slice(4, 6), 16),\n      a: clamp01(parseInt(h.slice(6, 8), 16) / 255),\n    }\n  }\n\n  // rgb() / rgba()\n  const m = s.match(RGB_FUNC)\n  if (m) {\n    let a = 1\n    if (m[4] != null) {\n      a = m[4].endsWith('%') ? clamp01(parseFloat(m[4]) / 100) : clamp01(parseFloat(m[4]))\n    }\n    return { r: clamp255(+m[1]), g: clamp255(+m[2]), b: clamp255(+m[3]), a }\n  }\n  return null\n}\n\n/**\n * Formats `{ r, g, b, a }` back to a CSS string: `#rrggbb` when fully opaque (`a >= 1`), else\n * `rgba(r, g, b, a)` with alpha rounded to 2 decimals.\n */\nexport function formatColor({ r, g, b, a }: RGBA): string {\n  if (a >= 1) return rgbToHex({ r, g, b })\n  return `rgba(${clamp255(r)}, ${clamp255(g)}, ${clamp255(b)}, ${Math.round(clamp01(a) * 100) / 100})`\n}\n","import {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport {\n  clamp01,\n  contrastOn,\n  formatColor,\n  hexToHsv,\n  hsvToRgb,\n  parseColor,\n  rgbToHex,\n  rgbToHsv,\n  type HSV,\n} from './colorUtils'\nimport styles from './ColorPicker.module.css'\n\n/** A pleasant default palette shown as quick-pick swatches. */\nexport const DEFAULT_SWATCHES = [\n  '#13404e',\n  '#039aa1',\n  '#00a854',\n  '#0ea5e9',\n  '#6366f1',\n  '#7c3aed',\n  '#f04134',\n  '#f59e0b',\n  '#ffbf00',\n  '#10b981',\n  '#64748b',\n  '#0f172a',\n  '#ffffff',\n]\n\nconst FALLBACK_HSV: HSV = hexToHsv('#13404e')\n\nexport interface ColorPickerPanelProps {\n  /** Current color — a CSS color string (`#rrggbb`, `rgba(...)`, or `''` when unset). */\n  value: string\n  /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when translucent, `''` when cleared. */\n  onChange: (color: string) => void\n  /** Quick-pick swatches. Defaults to a curated palette. */\n  swatches?: string[]\n  /** Show the leading \"no color\" swatch that clears the value. Defaults to `true`. */\n  clearable?: boolean\n  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha rail and pins alpha to `1`, so the\n   * panel only ever emits `#rrggbb` — for values that must be opaque (brand colors).\n   */\n  alpha?: boolean\n}\n\n/**\n * The color-picking surface — a saturation/value square, hue + alpha sliders, a color input and\n * quick-pick swatches. Controlled by a single color `string` (`value` / `onChange`), so it drops into\n * any popover. Working state is kept as HSV + alpha (hue survives dragging at grey/black), re-derived\n * from `value` only on external changes. Used by `ColorPicker` (the field) and the `RichTextEditor`\n * text-color control. Token-styled except the spectrum gradients + alpha checkerboard (literal colors).\n */\nexport function ColorPickerPanel({\n  value,\n  onChange,\n  swatches = DEFAULT_SWATCHES,\n  clearable = true,\n  alpha: alphaEnabled = true,\n}: ColorPickerPanelProps) {\n  // with opacity off every emitted color is opaque, whatever the working alpha happens to be\n  const emitAlpha = (a: number) => (alphaEnabled ? a : 1)\n  const t = useT()\n  const parsed = parseColor(value || '')\n  // canonical string for the value (`#rrggbb` when opaque, `rgba(...)` when not), null when unset\n  const displayValue = parsed ? formatColor(parsed) : null\n\n  // working HSV + alpha (HSV keeps hue stable while dragging at grey/black; alpha is the opacity)\n  const [hsv, setHsv] = useState<HSV>(parsed ? rgbToHsv(parsed) : FALLBACK_HSV)\n  const hsvRef = useRef(hsv)\n  hsvRef.current = hsv\n  const [alpha, setAlpha] = useState<number>(parsed?.a ?? 1)\n  const alphaRef = useRef(alpha)\n  alphaRef.current = alpha\n\n  // re-derive HSV + alpha only when the value changes from OUTSIDE our own edits (prop/preset/input)\n  useEffect(() => {\n    if (!parsed) return\n    const cur = formatColor({ ...hsvToRgb(hsvRef.current), a: alphaRef.current })\n    if (displayValue !== cur) {\n      setHsv(rgbToHsv(parsed))\n      setAlpha(parsed.a)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [displayValue])\n\n  const applyHsv = (next: HSV) => {\n    setHsv(next)\n    onChange(formatColor({ ...hsvToRgb(next), a: emitAlpha(alphaRef.current) }))\n  }\n\n  const applyAlpha = (next: number) => {\n    setAlpha(next)\n    onChange(formatColor({ ...hsvToRgb(hsvRef.current), a: emitAlpha(next) }))\n  }\n\n  // drag (SV square + hue/alpha sliders)\n  const drag =\n    (onMove: (clientX: number, clientY: number, rect: DOMRect) => void) =>\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      const el = event.currentTarget\n      const move = (clientX: number, clientY: number) =>\n        onMove(clientX, clientY, el.getBoundingClientRect())\n      move(event.clientX, event.clientY)\n      const onPointerMove = (e: PointerEvent) => move(e.clientX, e.clientY)\n      const onPointerUp = () => {\n        window.removeEventListener('pointermove', onPointerMove)\n        window.removeEventListener('pointerup', onPointerUp)\n      }\n      window.addEventListener('pointermove', onPointerMove)\n      window.addEventListener('pointerup', onPointerUp)\n    }\n\n  const onSvDown = drag((x, y, rect) => {\n    const s = clamp01((x - rect.left) / rect.width)\n    const v = clamp01(1 - (y - rect.top) / rect.height)\n    applyHsv({ ...hsvRef.current, s, v })\n  })\n\n  const onHueDown = drag((x, _y, rect) => {\n    const h = clamp01((x - rect.left) / rect.width) * 360\n    applyHsv({ ...hsvRef.current, h })\n  })\n\n  const onAlphaDown = drag((x, _y, rect) => {\n    applyAlpha(clamp01((x - rect.left) / rect.width))\n  })\n\n  // keyboard control — arrows nudge, Home/End jump to the extents (mirrors Calendar/TimeColumns a11y)\n  const SV_STEP = 0.01\n  const onSvKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const { h, s, v } = hsvRef.current\n    let ns = s\n    let nv = v\n    switch (event.key) {\n      case 'ArrowLeft':\n        ns = clamp01(s - SV_STEP)\n        break\n      case 'ArrowRight':\n        ns = clamp01(s + SV_STEP)\n        break\n      case 'ArrowUp':\n        nv = clamp01(v + SV_STEP)\n        break\n      case 'ArrowDown':\n        nv = clamp01(v - SV_STEP)\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    applyHsv({ h, s: ns, v: nv })\n  }\n  const onHueKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const { h } = hsvRef.current\n    let nh = h\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        nh = Math.max(0, h - 1)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        nh = Math.min(360, h + 1)\n        break\n      case 'Home':\n        nh = 0\n        break\n      case 'End':\n        nh = 360\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    applyHsv({ ...hsvRef.current, h: nh })\n  }\n  const onAlphaKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    let na = alphaRef.current\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        na = clamp01(alphaRef.current - 0.01)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        na = clamp01(alphaRef.current + 0.01)\n        break\n      case 'Home':\n        na = 0\n        break\n      case 'End':\n        na = 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    applyAlpha(na)\n  }\n\n  // color input (accepts hex / rgb() / rgba()) + clear\n  const [colorDraft, setColorDraft] = useState('')\n  useEffect(() => {\n    setColorDraft(displayValue ?? '')\n  }, [displayValue])\n\n  const onColorInput = (raw: string) => {\n    setColorDraft(raw)\n    const p = parseColor(raw)\n    if (p) {\n      setHsv(rgbToHsv(p))\n      setAlpha(p.a)\n      onChange(formatColor({ ...p, a: emitAlpha(p.a) }))\n    }\n  }\n\n  const handleClear = () => {\n    onChange('')\n    setHsv(FALLBACK_HSV)\n    setAlpha(1)\n  }\n\n  // working color (hsv + alpha): the current swatch + the SV thumb (opaque) + the alpha track base\n  const workingColor = formatColor({ ...hsvToRgb(hsv), a: alpha })\n  const solidHex = rgbToHex(hsvToRgb(hsv))\n  const cur = hsvToRgb(hsv)\n  const cpRgb = `${Math.round(cur.r)}, ${Math.round(cur.g)}, ${Math.round(cur.b)}`\n\n  return (\n    <div className={styles.popover} style={{ '--cp-hue': hsv.h } as CSSProperties}>\n      <div\n        className={styles.sv}\n        onPointerDown={onSvDown}\n        onKeyDown={onSvKey}\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={t('colorPicker.saturation')}\n        aria-valuetext={`${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness`}\n      >\n        <span\n          className={styles.svThumb}\n          style={{ left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%`, background: solidHex }}\n        />\n      </div>\n\n      <div\n        className={styles.hue}\n        onPointerDown={onHueDown}\n        onKeyDown={onHueKey}\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={t('colorPicker.hue')}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        aria-valuenow={Math.round(hsv.h)}\n      >\n        <span className={styles.hueThumb} style={{ left: `${(hsv.h / 360) * 100}%` }} />\n      </div>\n\n      {alphaEnabled && (\n        <div\n          className={styles.alpha}\n          onPointerDown={onAlphaDown}\n          onKeyDown={onAlphaKey}\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={t('colorPicker.opacity')}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(alpha * 100)}\n          style={{ '--cp-rgb': cpRgb } as CSSProperties}\n        >\n          <span className={styles.alphaThumb} style={{ left: `${alpha * 100}%` }} />\n        </div>\n      )}\n\n      <div className={styles.hexRow}>\n        <span\n          className={styles.currentSwatch}\n          style={{ '--cp-fill': workingColor } as CSSProperties}\n        />\n        <span className={styles.hexField}>\n          <input\n            className={styles.hexInput}\n            value={colorDraft}\n            spellCheck={false}\n            maxLength={28}\n            aria-label={t('colorPicker.value')}\n            onChange={(e) => onColorInput(e.target.value)}\n          />\n        </span>\n      </div>\n\n      <div className={styles.swatches}>\n        {/* \"no color\" — clears the value (the diagonal-stripe swatch); hidden when not clearable */}\n        {clearable && (\n          <button\n            type=\"button\"\n            className={clsx(styles.swatch, styles.swatchClear)}\n            aria-label={t('colorPicker.noColor')}\n            aria-pressed={!parsed}\n            onClick={handleClear}\n          >\n            {!parsed && <Icon name=\"TickCircle\" size=\"sm\" />}\n          </button>\n        )}\n        {swatches.map((sw) => {\n          const p = parseColor(sw)\n          if (!p) return null\n          const swHex = formatColor({ r: p.r, g: p.g, b: p.b, a: 1 })\n          const selected = displayValue === swHex\n          return (\n            <button\n              key={sw}\n              type=\"button\"\n              className={styles.swatch}\n              style={{ background: swHex, color: contrastOn(swHex) }}\n              aria-label={swHex}\n              aria-pressed={selected}\n              onClick={() => {\n                setHsv(rgbToHsv(p))\n                onChange(formatColor({ r: p.r, g: p.g, b: p.b, a: emitAlpha(alphaRef.current) }))\n              }}\n            >\n              {selected && <Icon name=\"TickCircle\" size=\"sm\" />}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],"names":["clamp255","n","rgbToHsv","r","g","b","rn","gn","bn","max","min","d","h","s","hsvToRgb","v","c","x","m","hexToHsv","hex","hexToRgb","contrastOn","RGB_FUNC","parseColor","input","clamp01","a","formatColor","rgbToHex","DEFAULT_SWATCHES","FALLBACK_HSV","ColorPickerPanel","value","onChange","swatches","clearable","alphaEnabled","emitAlpha","t","useT","parsed","displayValue","hsv","setHsv","useState","hsvRef","useRef","alpha","setAlpha","alphaRef","useEffect","cur","applyHsv","next","applyAlpha","drag","onMove","event","el","move","clientX","clientY","onPointerMove","e","onPointerUp","onSvDown","y","rect","onHueDown","_y","onAlphaDown","SV_STEP","onSvKey","ns","nv","onHueKey","nh","onAlphaKey","na","colorDraft","setColorDraft","onColorInput","raw","p","handleClear","workingColor","solidHex","cpRgb","jsxs","styles","jsx","clsx","Icon","sw","swHex","selected"],"mappings":"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"}

package/dist/ColorPickerPanel-PYaF5wPL.js

@@ -0,0 +1,322 @@
+import { jsxs as H, jsx as m } from "react/jsx-runtime";
+import { useState as P, useRef as L, useEffect as K } from "react";
+import { clsx as se } from "clsx";
+import { I as U } from "./Icon-DaTvzLBu.js";
+import { c as p, r as j, h as q } from "./color-EQJ2DrcQ.js";
+import { a as ae } from "./ConfigProvider-DL9fylMo.js";
+const A = (o) => Math.min(255, Math.max(0, Math.round(o)));
+function D({ r: o, g: h, b: a }) {
+  const t = o / 255, c = h / 255, _ = a / 255, l = Math.max(t, c, _), n = Math.min(t, c, _), u = l - n;
+  let i = 0;
+  u !== 0 && (l === t ? i = (c - _) / u % 6 : l === c ? i = (_ - t) / u + 2 : i = (t - c) / u + 4, i *= 60, i < 0 && (i += 360));
+  const g = l === 0 ? 0 : u / l;
+  return { h: i, s: g, v: l };
+}
+function y({ h: o, s: h, v: a }) {
+  const t = a * h, c = t * (1 - Math.abs(o / 60 % 2 - 1)), _ = a - t;
+  let l = 0, n = 0, u = 0;
+  return o < 60 ? [l, n, u] = [t, c, 0] : o < 120 ? [l, n, u] = [c, t, 0] : o < 180 ? [l, n, u] = [0, t, c] : o < 240 ? [l, n, u] = [0, c, t] : o < 300 ? [l, n, u] = [c, 0, t] : [l, n, u] = [t, 0, c], { r: (l + _) * 255, g: (n + _) * 255, b: (u + _) * 255 };
+}
+const ne = (o) => D(q(o));
+function oe(o) {
+  const { r: h, g: a, b: t } = q(o);
+  return (h * 299 + a * 587 + t * 114) / 1e3 >= 150 ? "#04202b" : "#ffffff";
+}
+const ce = /^rgba?\(\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*[, ]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+%?)\s*)?\)$/i;
+function E(o) {
+  const h = o.trim();
+  if (!h) return null;
+  let a = h.replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3,4}$/.test(a) && (a = a.split("").map((c) => c + c).join("")), /^[0-9a-fA-F]{6}$/.test(a))
+    return {
+      r: parseInt(a.slice(0, 2), 16),
+      g: parseInt(a.slice(2, 4), 16),
+      b: parseInt(a.slice(4, 6), 16),
+      a: 1
+    };
+  if (/^[0-9a-fA-F]{8}$/.test(a))
+    return {
+      r: parseInt(a.slice(0, 2), 16),
+      g: parseInt(a.slice(2, 4), 16),
+      b: parseInt(a.slice(4, 6), 16),
+      a: p(parseInt(a.slice(6, 8), 16) / 255)
+    };
+  const t = h.match(ce);
+  if (t) {
+    let c = 1;
+    return t[4] != null && (c = t[4].endsWith("%") ? p(parseFloat(t[4]) / 100) : p(parseFloat(t[4]))), { r: A(+t[1]), g: A(+t[2]), b: A(+t[3]), a: c };
+  }
+  return null;
+}
+function v({ r: o, g: h, b: a, a: t }) {
+  return t >= 1 ? j({ r: o, g: h, b: a }) : `rgba(${A(o)}, ${A(h)}, ${A(a)}, ${Math.round(p(t) * 100) / 100})`;
+}
+const le = "_field_16rd0_1", ie = "_fullWidth_16rd0_6", ue = "_label_16rd0_11", he = "_required_16rd0_17", de = "_control_16rd0_23", pe = "_open_16rd0_44", _e = "_error_16rd0_49", fe = "_disabled_16rd0_57", me = "_value_16rd0_64", be = "_placeholder_16rd0_73", we = "_preview_16rd0_81", ve = "_previewEmpty_16rd0_101", ge = "_helper_16rd0_113", xe = "_popover_16rd0_118", ke = "_sv_16rd0_128", ye = "_svThumb_16rd0_139", Ae = "_hue_16rd0_150", Te = "_hueThumb_16rd0_168", De = "_alphaThumb_16rd0_169", Ce = "_alpha_16rd0_169", Ie = "_hexRow_16rd0_202", Me = "_currentSwatch_16rd0_207", $e = "_hexField_16rd0_223", Ne = "_hexInput_16rd0_235", Re = "_swatches_16rd0_247", He = "_swatch_16rd0_247", Pe = "_swatchClear_16rd0_264", Ee = "_sm_16rd0_278", Fe = "_md_16rd0_282", Se = "_lg_16rd0_286", d = {
+  field: le,
+  fullWidth: ie,
+  label: ue,
+  required: he,
+  control: de,
+  open: pe,
+  error: _e,
+  disabled: fe,
+  value: me,
+  placeholder: be,
+  preview: we,
+  previewEmpty: ve,
+  helper: ge,
+  popover: xe,
+  sv: ke,
+  svThumb: ye,
+  hue: Ae,
+  hueThumb: Te,
+  alphaThumb: De,
+  alpha: Ce,
+  hexRow: Ie,
+  currentSwatch: Me,
+  hexField: $e,
+  hexInput: Ne,
+  swatches: Re,
+  swatch: He,
+  swatchClear: Pe,
+  sm: Ee,
+  md: Fe,
+  lg: Se
+}, Le = [
+  "#13404e",
+  "#039aa1",
+  "#00a854",
+  "#0ea5e9",
+  "#6366f1",
+  "#7c3aed",
+  "#f04134",
+  "#f59e0b",
+  "#ffbf00",
+  "#10b981",
+  "#64748b",
+  "#0f172a",
+  "#ffffff"
+], W = ne("#13404e");
+function Ve({
+  value: o,
+  onChange: h,
+  swatches: a = Le,
+  clearable: t = !0,
+  alpha: c = !0
+}) {
+  const _ = (r) => c ? r : 1, l = ae(), n = E(o || ""), u = n ? v(n) : null, [i, g] = P(n ? D(n) : W), b = L(i);
+  b.current = i;
+  const [T, C] = P((n == null ? void 0 : n.a) ?? 1), x = L(T);
+  x.current = T, K(() => {
+    if (!n) return;
+    const r = v({ ...y(b.current), a: x.current });
+    u !== r && (g(D(n)), C(n.a));
+  }, [u]);
+  const I = (r) => {
+    g(r), h(v({ ...y(r), a: _(x.current) }));
+  }, F = (r) => {
+    C(r), h(v({ ...y(b.current), a: _(r) }));
+  }, N = (r) => (e) => {
+    e.preventDefault();
+    const s = e.currentTarget, f = ($, te) => r($, te, s.getBoundingClientRect());
+    f(e.clientX, e.clientY);
+    const w = ($) => f($.clientX, $.clientY), k = () => {
+      window.removeEventListener("pointermove", w), window.removeEventListener("pointerup", k);
+    };
+    window.addEventListener("pointermove", w), window.addEventListener("pointerup", k);
+  }, B = N((r, e, s) => {
+    const f = p((r - s.left) / s.width), w = p(1 - (e - s.top) / s.height);
+    I({ ...b.current, s: f, v: w });
+  }), V = N((r, e, s) => {
+    const f = p((r - s.left) / s.width) * 360;
+    I({ ...b.current, h: f });
+  }), z = N((r, e, s) => {
+    F(p((r - s.left) / s.width));
+  }), M = 0.01, X = (r) => {
+    const { h: e, s, v: f } = b.current;
+    let w = s, k = f;
+    switch (r.key) {
+      case "ArrowLeft":
+        w = p(s - M);
+        break;
+      case "ArrowRight":
+        w = p(s + M);
+        break;
+      case "ArrowUp":
+        k = p(f + M);
+        break;
+      case "ArrowDown":
+        k = p(f - M);
+        break;
+      default:
+        return;
+    }
+    r.preventDefault(), I({ h: e, s: w, v: k });
+  }, Y = (r) => {
+    const { h: e } = b.current;
+    let s = e;
+    switch (r.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        s = Math.max(0, e - 1);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        s = Math.min(360, e + 1);
+        break;
+      case "Home":
+        s = 0;
+        break;
+      case "End":
+        s = 360;
+        break;
+      default:
+        return;
+    }
+    r.preventDefault(), I({ ...b.current, h: s });
+  }, G = (r) => {
+    let e = x.current;
+    switch (r.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        e = p(x.current - 0.01);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        e = p(x.current + 0.01);
+        break;
+      case "Home":
+        e = 0;
+        break;
+      case "End":
+        e = 1;
+        break;
+      default:
+        return;
+    }
+    r.preventDefault(), F(e);
+  }, [O, S] = P("");
+  K(() => {
+    S(u ?? "");
+  }, [u]);
+  const J = (r) => {
+    S(r);
+    const e = E(r);
+    e && (g(D(e)), C(e.a), h(v({ ...e, a: _(e.a) })));
+  }, Q = () => {
+    h(""), g(W), C(1);
+  }, Z = v({ ...y(i), a: T }), ee = j(y(i)), R = y(i), re = `${Math.round(R.r)}, ${Math.round(R.g)}, ${Math.round(R.b)}`;
+  return /* @__PURE__ */ H("div", { className: d.popover, style: { "--cp-hue": i.h }, children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: d.sv,
+        onPointerDown: B,
+        onKeyDown: X,
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": l("colorPicker.saturation"),
+        "aria-valuetext": `${Math.round(i.s * 100)}% saturation, ${Math.round(i.v * 100)}% brightness`,
+        children: /* @__PURE__ */ m(
+          "span",
+          {
+            className: d.svThumb,
+            style: { left: `${i.s * 100}%`, top: `${(1 - i.v) * 100}%`, background: ee }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: d.hue,
+        onPointerDown: V,
+        onKeyDown: Y,
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": l("colorPicker.hue"),
+        "aria-valuemin": 0,
+        "aria-valuemax": 360,
+        "aria-valuenow": Math.round(i.h),
+        children: /* @__PURE__ */ m("span", { className: d.hueThumb, style: { left: `${i.h / 360 * 100}%` } })
+      }
+    ),
+    c && /* @__PURE__ */ m(
+      "div",
+      {
+        className: d.alpha,
+        onPointerDown: z,
+        onKeyDown: G,
+        role: "slider",
+        tabIndex: 0,
+        "aria-label": l("colorPicker.opacity"),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(T * 100),
+        style: { "--cp-rgb": re },
+        children: /* @__PURE__ */ m("span", { className: d.alphaThumb, style: { left: `${T * 100}%` } })
+      }
+    ),
+    /* @__PURE__ */ H("div", { className: d.hexRow, children: [
+      /* @__PURE__ */ m(
+        "span",
+        {
+          className: d.currentSwatch,
+          style: { "--cp-fill": Z }
+        }
+      ),
+      /* @__PURE__ */ m("span", { className: d.hexField, children: /* @__PURE__ */ m(
+        "input",
+        {
+          className: d.hexInput,
+          value: O,
+          spellCheck: !1,
+          maxLength: 28,
+          "aria-label": l("colorPicker.value"),
+          onChange: (r) => J(r.target.value)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ H("div", { className: d.swatches, children: [
+      t && /* @__PURE__ */ m(
+        "button",
+        {
+          type: "button",
+          className: se(d.swatch, d.swatchClear),
+          "aria-label": l("colorPicker.noColor"),
+          "aria-pressed": !n,
+          onClick: Q,
+          children: !n && /* @__PURE__ */ m(U, { name: "TickCircle", size: "sm" })
+        }
+      ),
+      a.map((r) => {
+        const e = E(r);
+        if (!e) return null;
+        const s = v({ r: e.r, g: e.g, b: e.b, a: 1 }), f = u === s;
+        return /* @__PURE__ */ m(
+          "button",
+          {
+            type: "button",
+            className: d.swatch,
+            style: { background: s, color: oe(s) },
+            "aria-label": s,
+            "aria-pressed": f,
+            onClick: () => {
+              g(D(e)), h(v({ r: e.r, g: e.g, b: e.b, a: _(x.current) }));
+            },
+            children: f && /* @__PURE__ */ m(U, { name: "TickCircle", size: "sm" })
+          },
+          r
+        );
+      })
+    ] })
+  ] });
+}
+export {
+  Ve as C,
+  Le as D,
+  v as f,
+  E as p,
+  d as s
+};
+//# sourceMappingURL=ColorPickerPanel-PYaF5wPL.js.map

package/dist/ColorPickerPanel-PYaF5wPL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel-PYaF5wPL.js","sources":["../src/components/ColorPicker/colorUtils.ts","../src/components/ColorPicker/ColorPickerPanel.tsx"],"sourcesContent":["/** Color math for the ColorPicker: hex ⇄ rgb ⇄ hsv, plus hex validation. All internal, no deps. */\n\nexport interface HSV {\n  /** Hue 0–360 */\n  h: number\n  /** Saturation 0–1 */\n  s: number\n  /** Value/brightness 0–1 */\n  v: number\n}\n\nimport { clamp01, hexToRgb, rgbToHex, type RGB } from '../../helpers/color'\n\n// the hex ⇄ rgb primitives are shared with the palette helpers — re-exported so nothing else changes\nexport { clamp01, normalizeHex, isValidHex, hexToRgb, rgbToHex } from '../../helpers/color'\nexport type { RGB } from '../../helpers/color'\n\nexport interface RGBA extends RGB {\n  /** Alpha 0–1 */\n  a: number\n}\n\nconst clamp255 = (n: number): number => Math.min(255, Math.max(0, Math.round(n)))\n\n/** RGB (0–255) → HSV. */\nexport function rgbToHsv({ r, g, b }: RGB): HSV {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const d = max - min\n\n  let h = 0\n  if (d !== 0) {\n    if (max === rn) h = ((gn - bn) / d) % 6\n    else if (max === gn) h = (bn - rn) / d + 2\n    else h = (rn - gn) / d + 4\n    h *= 60\n    if (h < 0) h += 360\n  }\n  const s = max === 0 ? 0 : d / max\n  return { h, s, v: max }\n}\n\n/** HSV → RGB (0–255). */\nexport function hsvToRgb({ h, s, v }: HSV): RGB {\n  const c = v * s\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))\n  const m = v - c\n  let r = 0\n  let g = 0\n  let b = 0\n  if (h < 60) [r, g, b] = [c, x, 0]\n  else if (h < 120) [r, g, b] = [x, c, 0]\n  else if (h < 180) [r, g, b] = [0, c, x]\n  else if (h < 240) [r, g, b] = [0, x, c]\n  else if (h < 300) [r, g, b] = [x, 0, c]\n  else [r, g, b] = [c, 0, x]\n  return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 }\n}\n\nexport const hexToHsv = (hex: string): HSV => rgbToHsv(hexToRgb(hex))\nexport const hsvToHex = (hsv: HSV): string => rgbToHex(hsvToRgb(hsv))\n\n/** A readable text/handle color (near-black or white) for sitting on top of a given hex fill. */\nexport function contrastOn(hex: string): string {\n  const { r, g, b } = hexToRgb(hex)\n  return (r * 299 + g * 587 + b * 114) / 1000 >= 150 ? '#04202b' : '#ffffff'\n}\n\nconst RGB_FUNC =\n  /^rgba?\\(\\s*([\\d.]+)\\s*[, ]\\s*([\\d.]+)\\s*[, ]\\s*([\\d.]+)\\s*(?:[,/]\\s*([\\d.]+%?)\\s*)?\\)$/i\n\n/**\n * Parses any CSS color the picker understands — `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa` hex (with\n * or without `#`), or `rgb()` / `rgba()` (alpha as `0–1` or a `%`) — to `{ r, g, b, a }` (`a` is\n * `0–1`), or `null` when it doesn't match.\n */\nexport function parseColor(input: string): RGBA | null {\n  const s = input.trim()\n  if (!s) return null\n\n  // hex (with or without #) — 3 / 4 / 6 / 8 digits (3 & 4 expand each nibble to a byte)\n  let h = s.replace(/^#/, '')\n  if (/^[0-9a-fA-F]{3,4}$/.test(h)) {\n    h = h\n      .split('')\n      .map((c) => c + c)\n      .join('')\n  }\n  if (/^[0-9a-fA-F]{6}$/.test(h)) {\n    return {\n      r: parseInt(h.slice(0, 2), 16),\n      g: parseInt(h.slice(2, 4), 16),\n      b: parseInt(h.slice(4, 6), 16),\n      a: 1,\n    }\n  }\n  if (/^[0-9a-fA-F]{8}$/.test(h)) {\n    return {\n      r: parseInt(h.slice(0, 2), 16),\n      g: parseInt(h.slice(2, 4), 16),\n      b: parseInt(h.slice(4, 6), 16),\n      a: clamp01(parseInt(h.slice(6, 8), 16) / 255),\n    }\n  }\n\n  // rgb() / rgba()\n  const m = s.match(RGB_FUNC)\n  if (m) {\n    let a = 1\n    if (m[4] != null) {\n      a = m[4].endsWith('%') ? clamp01(parseFloat(m[4]) / 100) : clamp01(parseFloat(m[4]))\n    }\n    return { r: clamp255(+m[1]), g: clamp255(+m[2]), b: clamp255(+m[3]), a }\n  }\n  return null\n}\n\n/**\n * Formats `{ r, g, b, a }` back to a CSS string: `#rrggbb` when fully opaque (`a >= 1`), else\n * `rgba(r, g, b, a)` with alpha rounded to 2 decimals.\n */\nexport function formatColor({ r, g, b, a }: RGBA): string {\n  if (a >= 1) return rgbToHex({ r, g, b })\n  return `rgba(${clamp255(r)}, ${clamp255(g)}, ${clamp255(b)}, ${Math.round(clamp01(a) * 100) / 100})`\n}\n","import {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport {\n  clamp01,\n  contrastOn,\n  formatColor,\n  hexToHsv,\n  hsvToRgb,\n  parseColor,\n  rgbToHex,\n  rgbToHsv,\n  type HSV,\n} from './colorUtils'\nimport styles from './ColorPicker.module.css'\n\n/** A pleasant default palette shown as quick-pick swatches. */\nexport const DEFAULT_SWATCHES = [\n  '#13404e',\n  '#039aa1',\n  '#00a854',\n  '#0ea5e9',\n  '#6366f1',\n  '#7c3aed',\n  '#f04134',\n  '#f59e0b',\n  '#ffbf00',\n  '#10b981',\n  '#64748b',\n  '#0f172a',\n  '#ffffff',\n]\n\nconst FALLBACK_HSV: HSV = hexToHsv('#13404e')\n\nexport interface ColorPickerPanelProps {\n  /** Current color — a CSS color string (`#rrggbb`, `rgba(...)`, or `''` when unset). */\n  value: string\n  /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when translucent, `''` when cleared. */\n  onChange: (color: string) => void\n  /** Quick-pick swatches. Defaults to a curated palette. */\n  swatches?: string[]\n  /** Show the leading \"no color\" swatch that clears the value. Defaults to `true`. */\n  clearable?: boolean\n  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha rail and pins alpha to `1`, so the\n   * panel only ever emits `#rrggbb` — for values that must be opaque (brand colors).\n   */\n  alpha?: boolean\n}\n\n/**\n * The color-picking surface — a saturation/value square, hue + alpha sliders, a color input and\n * quick-pick swatches. Controlled by a single color `string` (`value` / `onChange`), so it drops into\n * any popover. Working state is kept as HSV + alpha (hue survives dragging at grey/black), re-derived\n * from `value` only on external changes. Used by `ColorPicker` (the field) and the `RichTextEditor`\n * text-color control. Token-styled except the spectrum gradients + alpha checkerboard (literal colors).\n */\nexport function ColorPickerPanel({\n  value,\n  onChange,\n  swatches = DEFAULT_SWATCHES,\n  clearable = true,\n  alpha: alphaEnabled = true,\n}: ColorPickerPanelProps) {\n  // with opacity off every emitted color is opaque, whatever the working alpha happens to be\n  const emitAlpha = (a: number) => (alphaEnabled ? a : 1)\n  const t = useT()\n  const parsed = parseColor(value || '')\n  // canonical string for the value (`#rrggbb` when opaque, `rgba(...)` when not), null when unset\n  const displayValue = parsed ? formatColor(parsed) : null\n\n  // working HSV + alpha (HSV keeps hue stable while dragging at grey/black; alpha is the opacity)\n  const [hsv, setHsv] = useState<HSV>(parsed ? rgbToHsv(parsed) : FALLBACK_HSV)\n  const hsvRef = useRef(hsv)\n  hsvRef.current = hsv\n  const [alpha, setAlpha] = useState<number>(parsed?.a ?? 1)\n  const alphaRef = useRef(alpha)\n  alphaRef.current = alpha\n\n  // re-derive HSV + alpha only when the value changes from OUTSIDE our own edits (prop/preset/input)\n  useEffect(() => {\n    if (!parsed) return\n    const cur = formatColor({ ...hsvToRgb(hsvRef.current), a: alphaRef.current })\n    if (displayValue !== cur) {\n      setHsv(rgbToHsv(parsed))\n      setAlpha(parsed.a)\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [displayValue])\n\n  const applyHsv = (next: HSV) => {\n    setHsv(next)\n    onChange(formatColor({ ...hsvToRgb(next), a: emitAlpha(alphaRef.current) }))\n  }\n\n  const applyAlpha = (next: number) => {\n    setAlpha(next)\n    onChange(formatColor({ ...hsvToRgb(hsvRef.current), a: emitAlpha(next) }))\n  }\n\n  // drag (SV square + hue/alpha sliders)\n  const drag =\n    (onMove: (clientX: number, clientY: number, rect: DOMRect) => void) =>\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault()\n      const el = event.currentTarget\n      const move = (clientX: number, clientY: number) =>\n        onMove(clientX, clientY, el.getBoundingClientRect())\n      move(event.clientX, event.clientY)\n      const onPointerMove = (e: PointerEvent) => move(e.clientX, e.clientY)\n      const onPointerUp = () => {\n        window.removeEventListener('pointermove', onPointerMove)\n        window.removeEventListener('pointerup', onPointerUp)\n      }\n      window.addEventListener('pointermove', onPointerMove)\n      window.addEventListener('pointerup', onPointerUp)\n    }\n\n  const onSvDown = drag((x, y, rect) => {\n    const s = clamp01((x - rect.left) / rect.width)\n    const v = clamp01(1 - (y - rect.top) / rect.height)\n    applyHsv({ ...hsvRef.current, s, v })\n  })\n\n  const onHueDown = drag((x, _y, rect) => {\n    const h = clamp01((x - rect.left) / rect.width) * 360\n    applyHsv({ ...hsvRef.current, h })\n  })\n\n  const onAlphaDown = drag((x, _y, rect) => {\n    applyAlpha(clamp01((x - rect.left) / rect.width))\n  })\n\n  // keyboard control — arrows nudge, Home/End jump to the extents (mirrors Calendar/TimeColumns a11y)\n  const SV_STEP = 0.01\n  const onSvKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const { h, s, v } = hsvRef.current\n    let ns = s\n    let nv = v\n    switch (event.key) {\n      case 'ArrowLeft':\n        ns = clamp01(s - SV_STEP)\n        break\n      case 'ArrowRight':\n        ns = clamp01(s + SV_STEP)\n        break\n      case 'ArrowUp':\n        nv = clamp01(v + SV_STEP)\n        break\n      case 'ArrowDown':\n        nv = clamp01(v - SV_STEP)\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    applyHsv({ h, s: ns, v: nv })\n  }\n  const onHueKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    const { h } = hsvRef.current\n    let nh = h\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        nh = Math.max(0, h - 1)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        nh = Math.min(360, h + 1)\n        break\n      case 'Home':\n        nh = 0\n        break\n      case 'End':\n        nh = 360\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    applyHsv({ ...hsvRef.current, h: nh })\n  }\n  const onAlphaKey = (event: ReactKeyboardEvent<HTMLDivElement>) => {\n    let na = alphaRef.current\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        na = clamp01(alphaRef.current - 0.01)\n        break\n      case 'ArrowRight':\n      case 'ArrowUp':\n        na = clamp01(alphaRef.current + 0.01)\n        break\n      case 'Home':\n        na = 0\n        break\n      case 'End':\n        na = 1\n        break\n      default:\n        return\n    }\n    event.preventDefault()\n    applyAlpha(na)\n  }\n\n  // color input (accepts hex / rgb() / rgba()) + clear\n  const [colorDraft, setColorDraft] = useState('')\n  useEffect(() => {\n    setColorDraft(displayValue ?? '')\n  }, [displayValue])\n\n  const onColorInput = (raw: string) => {\n    setColorDraft(raw)\n    const p = parseColor(raw)\n    if (p) {\n      setHsv(rgbToHsv(p))\n      setAlpha(p.a)\n      onChange(formatColor({ ...p, a: emitAlpha(p.a) }))\n    }\n  }\n\n  const handleClear = () => {\n    onChange('')\n    setHsv(FALLBACK_HSV)\n    setAlpha(1)\n  }\n\n  // working color (hsv + alpha): the current swatch + the SV thumb (opaque) + the alpha track base\n  const workingColor = formatColor({ ...hsvToRgb(hsv), a: alpha })\n  const solidHex = rgbToHex(hsvToRgb(hsv))\n  const cur = hsvToRgb(hsv)\n  const cpRgb = `${Math.round(cur.r)}, ${Math.round(cur.g)}, ${Math.round(cur.b)}`\n\n  return (\n    <div className={styles.popover} style={{ '--cp-hue': hsv.h } as CSSProperties}>\n      <div\n        className={styles.sv}\n        onPointerDown={onSvDown}\n        onKeyDown={onSvKey}\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={t('colorPicker.saturation')}\n        aria-valuetext={`${Math.round(hsv.s * 100)}% saturation, ${Math.round(hsv.v * 100)}% brightness`}\n      >\n        <span\n          className={styles.svThumb}\n          style={{ left: `${hsv.s * 100}%`, top: `${(1 - hsv.v) * 100}%`, background: solidHex }}\n        />\n      </div>\n\n      <div\n        className={styles.hue}\n        onPointerDown={onHueDown}\n        onKeyDown={onHueKey}\n        role=\"slider\"\n        tabIndex={0}\n        aria-label={t('colorPicker.hue')}\n        aria-valuemin={0}\n        aria-valuemax={360}\n        aria-valuenow={Math.round(hsv.h)}\n      >\n        <span className={styles.hueThumb} style={{ left: `${(hsv.h / 360) * 100}%` }} />\n      </div>\n\n      {alphaEnabled && (\n        <div\n          className={styles.alpha}\n          onPointerDown={onAlphaDown}\n          onKeyDown={onAlphaKey}\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={t('colorPicker.opacity')}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(alpha * 100)}\n          style={{ '--cp-rgb': cpRgb } as CSSProperties}\n        >\n          <span className={styles.alphaThumb} style={{ left: `${alpha * 100}%` }} />\n        </div>\n      )}\n\n      <div className={styles.hexRow}>\n        <span\n          className={styles.currentSwatch}\n          style={{ '--cp-fill': workingColor } as CSSProperties}\n        />\n        <span className={styles.hexField}>\n          <input\n            className={styles.hexInput}\n            value={colorDraft}\n            spellCheck={false}\n            maxLength={28}\n            aria-label={t('colorPicker.value')}\n            onChange={(e) => onColorInput(e.target.value)}\n          />\n        </span>\n      </div>\n\n      <div className={styles.swatches}>\n        {/* \"no color\" — clears the value (the diagonal-stripe swatch); hidden when not clearable */}\n        {clearable && (\n          <button\n            type=\"button\"\n            className={clsx(styles.swatch, styles.swatchClear)}\n            aria-label={t('colorPicker.noColor')}\n            aria-pressed={!parsed}\n            onClick={handleClear}\n          >\n            {!parsed && <Icon name=\"TickCircle\" size=\"sm\" />}\n          </button>\n        )}\n        {swatches.map((sw) => {\n          const p = parseColor(sw)\n          if (!p) return null\n          const swHex = formatColor({ r: p.r, g: p.g, b: p.b, a: 1 })\n          const selected = displayValue === swHex\n          return (\n            <button\n              key={sw}\n              type=\"button\"\n              className={styles.swatch}\n              style={{ background: swHex, color: contrastOn(swHex) }}\n              aria-label={swHex}\n              aria-pressed={selected}\n              onClick={() => {\n                setHsv(rgbToHsv(p))\n                onChange(formatColor({ r: p.r, g: p.g, b: p.b, a: emitAlpha(alphaRef.current) }))\n              }}\n            >\n              {selected && <Icon name=\"TickCircle\" size=\"sm\" />}\n            </button>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],"names":["clamp255","n","rgbToHsv","r","g","b","rn","gn","bn","max","min","d","h","s","hsvToRgb","v","c","x","m","hexToHsv","hex","hexToRgb","contrastOn","RGB_FUNC","parseColor","input","clamp01","a","formatColor","rgbToHex","DEFAULT_SWATCHES","FALLBACK_HSV","ColorPickerPanel","value","onChange","swatches","clearable","alphaEnabled","emitAlpha","t","useT","parsed","displayValue","hsv","setHsv","useState","hsvRef","useRef","alpha","setAlpha","alphaRef","useEffect","cur","applyHsv","next","applyAlpha","drag","onMove","event","el","move","clientX","clientY","onPointerMove","e","onPointerUp","onSvDown","y","rect","onHueDown","_y","onAlphaDown","SV_STEP","onSvKey","ns","nv","onHueKey","nh","onAlphaKey","na","colorDraft","setColorDraft","onColorInput","raw","p","handleClear","workingColor","solidHex","cpRgb","jsxs","styles","jsx","clsx","Icon","sw","swHex","selected"],"mappings":"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"}

package/dist/ColorRamp-AkY9gq6Y.cjs

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),v=require("react"),m=require("clsx"),L=require("./useClipboard-BjTIX-4g.cjs"),h=require("./palette-BycMHbED.cjs"),D=require("./Tooltip-Ao7az09p.cjs"),i=require("./Typography-BFatE1_A.cjs"),T=require("./toastStore-B4Tk2Xk7.cjs"),n=require("./TextField.module-DsNCo8vN.cjs"),W=require("./ConfigProvider-BicoaBLj.cjs"),z="_band_1d0th_5",G="_sm_1d0th_15",H="_md_1d0th_18",J="_lg_1d0th_21",K="_num_1d0th_42",M="_step_1d0th_47",O="_bounds_1d0th_94",Q="_tip_1d0th_101",U="_tipTitle_1d0th_107",o={band:z,sm:G,md:H,lg:J,num:K,step:M,static:"_static_1d0th_61",bounds:O,tip:Q,tipTitle:U},$=(x,l)=>`${x} ${l.ratio.toFixed(2)}${l.small?` ${l.small}`:""}`,V=v.forwardRef(function({baseColor:l,name:a="color",options:f,size:N="md",copyable:_=!0,onCopy:c,showBounds:S=!0,label:d,helperText:p,error:b=!1,required:q=!1,className:k,...C},E){const t=W.useT(),y=v.useId(),j=`${y}-label`,g=`${y}-helper`,{copy:F}=L.useClipboard(),R=h.generatePalette(l,f),P=async e=>{const r=`${a}-${e.step}`;await F(e.hex)?(T.toast.success(t("colorRamp.copied",{step:r,hex:e.hex})),c==null||c(e)):T.toast.error(t("colorRamp.copyFailed",{step:r}))},A=e=>s.jsxs("span",{className:o.tip,children:[s.jsxs("span",{className:o.tipTitle,children:[a,"-",e.step,e.step===h.BASE_STEP?` · ${t("colorRamp.base")}`:""]}),s.jsx("span",{children:e.hex}),s.jsxs("span",{children:[$(t("colorRamp.black"),e.onDark)," ·"," ",$(t("colorRamp.white"),e.onWhite)]}),_&&s.jsx("span",{children:t("colorRamp.clickToCopy")})]});return s.jsxs("div",{ref:E,className:m.clsx(n.fieldStyles.field,b&&n.fieldStyles.error,k),...C,children:[d!=null&&s.jsxs("label",{id:j,className:n.fieldStyles.label,children:[s.jsx(i.Typography,{as:"span",variant:"bodySmall",color:"muted",children:d}),q&&s.jsx("span",{className:n.fieldStyles.required,"aria-hidden":"true",children:"*"})]}),R?s.jsxs(s.Fragment,{children:[s.jsx("div",{role:"group","aria-label":t("colorRamp.groupLabel",{name:a}),"aria-labelledby":d!=null?j:void 0,"aria-describedby":p!=null?g:void 0,className:m.clsx(o.band,o[N]),children:R.map(e=>{const r=e.step===h.BASE_STEP,u={backgroundColor:e.hex,color:e.textColor},B=`${a}-${e.step}`,I=_?s.jsx("button",{type:"button",className:o.step,style:u,"data-base":r||void 0,"aria-label":t("colorRamp.copyAria",{name:a,step:e.step,hex:e.hex}),onClick:()=>void P(e),children:s.jsx("span",{className:o.num,"aria-hidden":"true",children:e.step})}):s.jsx("span",{className:m.clsx(o.step,o.static),style:u,"data-base":r||void 0,role:"img","aria-label":`${B} ${e.hex}`,children:s.jsx("span",{className:o.num,"aria-hidden":"true",children:e.step})});return s.jsx(D.Tooltip,{content:A(e),children:I},e.step)})}),S&&s.jsxs("div",{className:o.bounds,children:[s.jsx(i.Typography,{as:"span",variant:"caption",color:"muted",children:t("colorRamp.lightest")}),s.jsx(i.Typography,{as:"span",variant:"caption",color:"muted",children:t("colorRamp.darkest")})]})]}):s.jsx(i.Typography,{as:"span",variant:"caption",color:"muted",children:t("colorRamp.invalid")}),p!=null&&s.jsx(i.Typography,{as:"span",id:g,variant:"bodySmall",color:b?"error":"muted",className:n.fieldStyles.helper,children:p})]})});exports.ColorRamp=V;
+//# sourceMappingURL=ColorRamp-AkY9gq6Y.cjs.map

package/dist/ColorRamp-AkY9gq6Y.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRamp-AkY9gq6Y.cjs","sources":["../src/components/ColorRamp/ColorRamp.tsx"],"sourcesContent":["import { forwardRef, useId, type CSSProperties, type HTMLAttributes, type ReactNode } from 'react'\nimport { clsx } from 'clsx'\nimport { useT } from '../../theme'\nimport { useClipboard } from '../../hooks/useClipboard'\nimport {\n  BASE_STEP,\n  generatePalette,\n  type GeneratePaletteOptions,\n  type Legibility,\n  type PaletteSwatch,\n} from '../../helpers/palette'\nimport { Tooltip } from '../Tooltip'\nimport { Typography } from '../Typography'\nimport { toast } from '../Toast'\n// shared field chrome (wrapper / label / helper / required / error)\nimport fieldStyles from '../TextField/TextField.module.css'\nimport styles from './ColorRamp.module.css'\n\nexport type ColorRampSize = 'sm' | 'md' | 'lg'\n\n// `onCopy` here is the swatch callback, so the DOM clipboard `onCopy` handler is omitted alongside `color`\nexport interface ColorRampProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onCopy'> {\n  /** The base (500) color — any value `generatePalette` accepts. Invalid → the empty-state caption. */\n  baseColor: string\n  /** Token prefix for step names (`primary` → \"primary-500\") — used in tooltips, aria-labels and the copy toast. Default `'color'`. */\n  name?: string\n  /** Passed to `generatePalette` (override any subset of the tint / shade fractions). */\n  options?: GeneratePaletteOptions\n  /** Band height. `sm` 32 · `md` 40 (default) · `lg` 48 px. */\n  size?: ColorRampSize\n  /** Click a step to copy its hex (default `true`). `false` renders the steps as non-interactive cells. */\n  copyable?: boolean\n  /** After a successful copy — in addition to the built-in toast. */\n  onCopy?: (swatch: PaletteSwatch) => void\n  /** Show the \"Lightest … Darkest\" caption row under the band (default `true`). */\n  showBounds?: boolean\n  /** Label rendered above the band (field-family chrome, like `Slider` / `SwatchPicker`). */\n  label?: ReactNode\n  /** Helper / validation text under the band. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */\n  error?: boolean\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n}\n\n/** `black 4.52 AA` — ratio to 2 decimals, the body-text rating appended when it exists. */\nconst contrastLine = (who: string, l: Legibility) =>\n  `${who} ${l.ratio.toFixed(2)}${l.small ? ` ${l.small}` : ''}`\n\n/**\n * The generated tonal scale for one color as **a single horizontal band of ten equal steps** sharing\n * one rounded, clipped frame (reads as a continuous ramp, not ten chips). Display + copy only — it never\n * edits the color; pair it with `ColorPicker` (or use `PaletteField`, which composes both). Each step\n * is a `Tooltip`-wrapped button whose fill / ink are the swatch's own colors (inline — the color IS the\n * data), showing its number on the base step and on hover / focus; clicking copies the hex with a toast.\n * `role=\"group\"` labelled \"{name} color scale\"; an invalid `baseColor` renders only a muted caption.\n */\nexport const ColorRamp = forwardRef<HTMLDivElement, ColorRampProps>(function ColorRamp(\n  {\n    baseColor,\n    name = 'color',\n    options,\n    size = 'md',\n    copyable = true,\n    onCopy,\n    showBounds = true,\n    label,\n    helperText,\n    error = false,\n    required = false,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const t = useT()\n  const id = useId()\n  const labelId = `${id}-label`\n  const helperId = `${id}-helper`\n  const { copy } = useClipboard()\n  const palette = generatePalette(baseColor, options)\n\n  const handleCopy = async (swatch: PaletteSwatch) => {\n    const step = `${name}-${swatch.step}`\n    const ok = await copy(swatch.hex)\n    if (ok) {\n      toast.success(t('colorRamp.copied', { step, hex: swatch.hex }))\n      onCopy?.(swatch)\n    } else {\n      toast.error(t('colorRamp.copyFailed', { step }))\n    }\n  }\n\n  const tip = (swatch: PaletteSwatch) => (\n    <span className={styles.tip}>\n      <span className={styles.tipTitle}>\n        {name}-{swatch.step}\n        {swatch.step === BASE_STEP ? ` · ${t('colorRamp.base')}` : ''}\n      </span>\n      <span>{swatch.hex}</span>\n      <span>\n        {contrastLine(t('colorRamp.black'), swatch.onDark)} ·{' '}\n        {contrastLine(t('colorRamp.white'), swatch.onWhite)}\n      </span>\n      {copyable && <span>{t('colorRamp.clickToCopy')}</span>}\n    </span>\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(fieldStyles.field, error && fieldStyles.error, className)}\n      {...props}\n    >\n      {label != null && (\n        <label id={labelId} className={fieldStyles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={fieldStyles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      {palette ? (\n        <>\n          <div\n            role=\"group\"\n            aria-label={t('colorRamp.groupLabel', { name })}\n            aria-labelledby={label != null ? labelId : undefined}\n            aria-describedby={helperText != null ? helperId : undefined}\n            className={clsx(styles.band, styles[size])}\n          >\n            {palette.map((swatch) => {\n              const isBase = swatch.step === BASE_STEP\n              // the swatch's own colors are the data — the one legitimate inline-color exception\n              const ink = { backgroundColor: swatch.hex, color: swatch.textColor } as CSSProperties\n              const stepName = `${name}-${swatch.step}`\n              const cell = copyable ? (\n                <button\n                  type=\"button\"\n                  className={styles.step}\n                  style={ink}\n                  data-base={isBase || undefined}\n                  aria-label={t('colorRamp.copyAria', { name, step: swatch.step, hex: swatch.hex })}\n                  onClick={() => void handleCopy(swatch)}\n                >\n                  <span className={styles.num} aria-hidden=\"true\">\n                    {swatch.step}\n                  </span>\n                </button>\n              ) : (\n                <span\n                  className={clsx(styles.step, styles.static)}\n                  style={ink}\n                  data-base={isBase || undefined}\n                  role=\"img\"\n                  aria-label={`${stepName} ${swatch.hex}`}\n                >\n                  <span className={styles.num} aria-hidden=\"true\">\n                    {swatch.step}\n                  </span>\n                </span>\n              )\n              // the Tooltip's wrapper span is the band's real flex child (sized by `.band > *`)\n              return (\n                <Tooltip key={swatch.step} content={tip(swatch)}>\n                  {cell}\n                </Tooltip>\n              )\n            })}\n          </div>\n          {showBounds && (\n            <div className={styles.bounds}>\n              <Typography as=\"span\" variant=\"caption\" color=\"muted\">\n                {t('colorRamp.lightest')}\n              </Typography>\n              <Typography as=\"span\" variant=\"caption\" color=\"muted\">\n                {t('colorRamp.darkest')}\n              </Typography>\n            </div>\n          )}\n        </>\n      ) : (\n        <Typography as=\"span\" variant=\"caption\" color=\"muted\">\n          {t('colorRamp.invalid')}\n        </Typography>\n      )}\n\n      {helperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={error ? 'error' : 'muted'}\n          className={fieldStyles.helper}\n        >\n          {helperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["contrastLine","who","ColorRamp","forwardRef","baseColor","name","options","size","copyable","onCopy","showBounds","label","helperText","error","required","className","props","ref","useT","id","useId","labelId","helperId","copy","useClipboard","palette","generatePalette","handleCopy","swatch","step","toast","tip","styles","jsxs","BASE_STEP","jsx","clsx","fieldStyles","Typography","Fragment","isBase","ink","stepName","cell","Tooltip"],"mappings":"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"}

package/dist/ColorRamp-DnlJNKfy.js

@@ -0,0 +1,126 @@
+import { jsxs as s, jsx as o, Fragment as q } from "react/jsx-runtime";
+import { forwardRef as D, useId as W } from "react";
+import { clsx as _ } from "clsx";
+import { u as z } from "./useClipboard-CEw_Juiq.js";
+import { g as G, B as g } from "./palette-B031dM4E.js";
+import { T as H } from "./Tooltip-Cb_FKxT9.js";
+import { T as n } from "./Typography-Cta6Rg4L.js";
+import { t as x } from "./toastStore-Cx_JOKwS.js";
+import { f as d } from "./TextField.module-6gYcR9TL.js";
+import { a as J } from "./ConfigProvider-DL9fylMo.js";
+const K = "_band_1d0th_5", M = "_sm_1d0th_15", O = "_md_1d0th_18", Q = "_lg_1d0th_21", U = "_num_1d0th_42", V = "_step_1d0th_47", X = "_bounds_1d0th_94", Y = "_tip_1d0th_101", Z = "_tipTitle_1d0th_107", t = {
+  band: K,
+  sm: M,
+  md: O,
+  lg: Q,
+  num: U,
+  step: V,
+  static: "_static_1d0th_61",
+  bounds: X,
+  tip: Y,
+  tipTitle: Z
+}, y = (h, l) => `${h} ${l.ratio.toFixed(2)}${l.small ? ` ${l.small}` : ""}`, de = D(function({
+  baseColor: l,
+  name: r = "color",
+  options: k,
+  size: T = "md",
+  copyable: b = !0,
+  onCopy: c,
+  showBounds: C = !0,
+  label: p,
+  helperText: m,
+  error: f = !1,
+  required: S = !1,
+  className: B,
+  ...F
+}, I) {
+  const a = J(), v = W(), R = `${v}-label`, N = `${v}-helper`, { copy: j } = z(), $ = G(l, k), A = async (e) => {
+    const i = `${r}-${e.step}`;
+    await j(e.hex) ? (x.success(a("colorRamp.copied", { step: i, hex: e.hex })), c == null || c(e)) : x.error(a("colorRamp.copyFailed", { step: i }));
+  }, E = (e) => /* @__PURE__ */ s("span", { className: t.tip, children: [
+    /* @__PURE__ */ s("span", { className: t.tipTitle, children: [
+      r,
+      "-",
+      e.step,
+      e.step === g ? ` · ${a("colorRamp.base")}` : ""
+    ] }),
+    /* @__PURE__ */ o("span", { children: e.hex }),
+    /* @__PURE__ */ s("span", { children: [
+      y(a("colorRamp.black"), e.onDark),
+      " ·",
+      " ",
+      y(a("colorRamp.white"), e.onWhite)
+    ] }),
+    b && /* @__PURE__ */ o("span", { children: a("colorRamp.clickToCopy") })
+  ] });
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ref: I,
+      className: _(d.field, f && d.error, B),
+      ...F,
+      children: [
+        p != null && /* @__PURE__ */ s("label", { id: R, className: d.label, children: [
+          /* @__PURE__ */ o(n, { as: "span", variant: "bodySmall", color: "muted", children: p }),
+          S && /* @__PURE__ */ o("span", { className: d.required, "aria-hidden": "true", children: "*" })
+        ] }),
+        $ ? /* @__PURE__ */ s(q, { children: [
+          /* @__PURE__ */ o(
+            "div",
+            {
+              role: "group",
+              "aria-label": a("colorRamp.groupLabel", { name: r }),
+              "aria-labelledby": p != null ? R : void 0,
+              "aria-describedby": m != null ? N : void 0,
+              className: _(t.band, t[T]),
+              children: $.map((e) => {
+                const i = e.step === g, u = { backgroundColor: e.hex, color: e.textColor }, L = `${r}-${e.step}`, P = b ? /* @__PURE__ */ o(
+                  "button",
+                  {
+                    type: "button",
+                    className: t.step,
+                    style: u,
+                    "data-base": i || void 0,
+                    "aria-label": a("colorRamp.copyAria", { name: r, step: e.step, hex: e.hex }),
+                    onClick: () => void A(e),
+                    children: /* @__PURE__ */ o("span", { className: t.num, "aria-hidden": "true", children: e.step })
+                  }
+                ) : /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: _(t.step, t.static),
+                    style: u,
+                    "data-base": i || void 0,
+                    role: "img",
+                    "aria-label": `${L} ${e.hex}`,
+                    children: /* @__PURE__ */ o("span", { className: t.num, "aria-hidden": "true", children: e.step })
+                  }
+                );
+                return /* @__PURE__ */ o(H, { content: E(e), children: P }, e.step);
+              })
+            }
+          ),
+          C && /* @__PURE__ */ s("div", { className: t.bounds, children: [
+            /* @__PURE__ */ o(n, { as: "span", variant: "caption", color: "muted", children: a("colorRamp.lightest") }),
+            /* @__PURE__ */ o(n, { as: "span", variant: "caption", color: "muted", children: a("colorRamp.darkest") })
+          ] })
+        ] }) : /* @__PURE__ */ o(n, { as: "span", variant: "caption", color: "muted", children: a("colorRamp.invalid") }),
+        m != null && /* @__PURE__ */ o(
+          n,
+          {
+            as: "span",
+            id: N,
+            variant: "bodySmall",
+            color: f ? "error" : "muted",
+            className: d.helper,
+            children: m
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  de as C
+};
+//# sourceMappingURL=ColorRamp-DnlJNKfy.js.map