@techzyapp/ui-library 1.0.25 → 1.0.28

package/dist/{ColorPicker-Dw6Qk0iy.js → ColorPicker-DXDAXvlA.js}

@@ -1,12 +1,12 @@
 import { jsxs as C, jsx as l } from "react/jsx-runtime";
-import { forwardRef as rr, useId as er, useState as V, useRef as E, useCallback as O } from "react";
+import { forwardRef as er, useId as or, useState as V, useRef as E, useCallback as O } from "react";
 import { clsx as p } from "clsx";
-import { u as or } from "./formContext-B7ln1Miy.js";
-import { F as lr } from "./FloatingPanel-BG9Uag__.js";
-import { T as S } from "./Typography-Cta6Rg4L.js";
-import { p as sr, f as tr, s as e, C as ar } from "./ColorPickerPanel-Dp7bnnVf.js";
-import { a as ir } from "./ConfigProvider-DR9YMy9U.js";
-const nr = 232, Cr = rr(function({
+import { u as lr } from "./formContext-B7ln1Miy.js";
+import { F as sr } from "./FloatingPanel-CeSOtE_D.js";
+import { T as S } from "./Typography-CJv5AnRP.js";
+import { p as tr, f as ar, s as e, C as ir } from "./ColorPickerPanel-6lQC1URc.js";
+import { a as nr } from "./ConfigProvider-B_RSn9bb.js";
+const cr = 232, xr = er(function({
   label: u,
   size: j = "md",
   error: H,
@@ -18,23 +18,24 @@ const nr = 232, Cr = rr(function({
   defaultValue: L,
   onChange: f,
   swatches: U,
+  alpha: _ = !0,
   name: s,
   placeholder: P,
-  id: _,
-  className: $,
-  style: z
+  id: $,
+  className: z,
+  style: A
 }, i) {
-  const A = ir(), G = er(), m = _ ?? G, g = `${m}-helper`, n = or(), k = !!(n && s), o = n && s ? n.field(s) : void 0, N = T !== void 0 ? T : k ? n.values[s] ?? "" : void 0, R = N !== void 0, [J, K] = V(L ?? ""), B = R ? N : J, t = sr(B || ""), c = t ? tr(t) : null, M = c ? c[0] === "#" ? c.toUpperCase() : c : null, v = H ?? (o == null ? void 0 : o.error) ?? !1, h = W ?? (o == null ? void 0 : o.helperText), Q = (r) => {
-    R || K(r), k && n.setValue(s, r), f == null || f(r);
-  }, d = E(null), F = E(null), [y, I] = V(!1), X = O(
+  const G = nr(), J = or(), m = $ ?? J, g = `${m}-helper`, n = lr(), k = !!(n && s), o = n && s ? n.field(s) : void 0, N = T !== void 0 ? T : k ? n.values[s] ?? "" : void 0, R = N !== void 0, [K, M] = V(L ?? ""), B = R ? N : K, t = tr(B || ""), c = t ? ar(t) : null, Q = c ? c[0] === "#" ? c.toUpperCase() : c : null, v = H ?? (o == null ? void 0 : o.error) ?? !1, h = W ?? (o == null ? void 0 : o.helperText), X = (r) => {
+    R || M(r), k && n.setValue(s, r), f == null || f(r);
+  }, d = E(null), F = E(null), [y, I] = V(!1), Y = O(
     (r) => {
       d.current = r, typeof i == "function" ? i(r) : i && (i.current = r);
     },
     [i]
-  ), Y = O((r) => {
+  ), Z = O((r) => {
     var a;
     I(!1), r && ((a = d.current) == null || a.focus());
-  }, []), Z = (r) => {
+  }, []), rr = (r) => {
     var b, w;
     const a = r.relatedTarget;
     a && ((b = F.current) != null && b.contains(a) || (w = d.current) != null && w.contains(a)) || o == null || o.onBlur(r);
@@ -48,9 +49,9 @@ const nr = 232, Cr = rr(function({
         D && e.fullWidth,
         v && e.error,
         x && e.disabled,
-        $
+        z
       ),
-      style: z,
+      style: A,
       children: [
         u != null && /* @__PURE__ */ C("label", { htmlFor: m, className: e.label, children: [
           /* @__PURE__ */ l(S, { as: "span", variant: "bodySmall", color: "muted", children: u }),
@@ -59,7 +60,7 @@ const nr = 232, Cr = rr(function({
         /* @__PURE__ */ C(
           "button",
           {
-            ref: X,
+            ref: Y,
             id: m,
             name: s,
             type: "button",
@@ -69,11 +70,11 @@ const nr = 232, Cr = rr(function({
             "aria-expanded": y,
             "aria-invalid": v || void 0,
             "aria-describedby": h != null ? g : void 0,
-            "aria-label": u || t || P ? void 0 : A("colorPicker.pick"),
+            "aria-label": u || t || P ? void 0 : G("colorPicker.pick"),
             onClick: () => I((r) => !r),
-            onBlur: Z,
+            onBlur: rr,
             children: [
-              /* @__PURE__ */ l("span", { className: p(e.value, !t && e.placeholder), children: M ?? P }),
+              /* @__PURE__ */ l("span", { className: p(e.value, !t && e.placeholder), children: Q ?? P }),
               /* @__PURE__ */ l(
                 "span",
                 {
@@ -86,16 +87,24 @@ const nr = 232, Cr = rr(function({
           }
         ),
         /* @__PURE__ */ l(
-          lr,
+          sr,
           {
             ref: F,
             open: y,
             triggerRef: d,
-            onClose: Y,
+            onClose: Z,
             role: "dialog",
             ariaLabel: "Color picker",
-            width: nr,
-            children: /* @__PURE__ */ l(ar, { value: B, onChange: Q, swatches: U })
+            width: cr,
+            children: /* @__PURE__ */ l(
+              ir,
+              {
+                value: B,
+                onChange: X,
+                swatches: U,
+                alpha: _
+              }
+            )
           }
         ),
         h != null && /* @__PURE__ */ l(
@@ -114,6 +123,6 @@ const nr = 232, Cr = rr(function({
   );
 });
 export {
-  Cr as C
+  xr as C
 };
-//# sourceMappingURL=ColorPicker-Dw6Qk0iy.js.map
+//# sourceMappingURL=ColorPicker-DXDAXvlA.js.map

package/dist/ColorPicker-DXDAXvlA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker-DXDAXvlA.js","sources":["../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type FocusEvent,\n  type ReactNode,\n} from 'react'\nimport { clsx } from 'clsx'\nimport { useFormContext } from '../../form/formContext'\nimport { useT } from '../../theme'\nimport { FloatingPanel } from '../FloatingPanel/FloatingPanel'\nimport { Typography } from '../Typography'\nimport { ColorPickerPanel } from './ColorPickerPanel'\nimport { formatColor, parseColor } from './colorUtils'\nimport styles from './ColorPicker.module.css'\n\nexport type ColorPickerSize = 'sm' | 'md' | 'lg'\n\n/** Popover width (px). */\nconst POPOVER_WIDTH = 232\n\nexport interface ColorPickerProps {\n  /** Label rendered above the field. */\n  label?: ReactNode\n  /** Preset size — control height, swatch and font. */\n  size?: ColorPickerSize\n  /** Marks the field invalid: red border/ring + the `helperText` in the error color. */\n  error?: boolean\n  /** Helper / validation text under the field. Adopts the error color while `error`. */\n  helperText?: ReactNode\n  /** Adds a red asterisk after the label. */\n  required?: boolean\n  /** Stretches the field to fill its container width. Defaults to `true`. */\n  fullWidth?: boolean\n  /** Disables the field. */\n  disabled?: boolean\n  /** Controlled value — a CSS color string: `#rrggbb` hex, or `rgba(r, g, b, a)` when translucent. */\n  value?: string\n  /** Initial value for uncontrolled use (hex or `rgb()`/`rgba()`). */\n  defaultValue?: string\n  /** Fires with the next color: `#rrggbb` when opaque, `rgba(r, g, b, a)` when not (or `''` when cleared). */\n  onChange?: (color: string) => void\n  /** Quick-pick swatches shown in the popover. Defaults to a curated palette. */\n  swatches?: string[]\n  /**\n   * Offer opacity. Defaults to `true`. `false` hides the alpha slider and the field only ever emits\n   * `#rrggbb` (never `rgba()`) — for colors that must be opaque, e.g. brand colors.\n   */\n  alpha?: boolean\n  /** Form field name — auto-binds to a surrounding `<Form>` (value is the hex string). */\n  name?: string\n  /** Placeholder shown in the trigger when no color is set. Omit to show nothing. */\n  placeholder?: string\n  /** Id for the trigger (label association). */\n  id?: string\n  className?: string\n  style?: CSSProperties\n}\n\n/**\n * A color field with a beautiful popover picker: a saturation/value square, a hue slider, an alpha\n * (opacity) slider, a color input, quick-pick swatches and a clear button. The input accepts hex\n * (`#rgb`/`#rrggbb`/`#rrggbbaa`) or `rgb()`/`rgba()`, and the value comes back as `#rrggbb` when\n * fully opaque or `rgba(r, g, b, a)` when translucent. Clicking the trigger opens the popover, which\n * — like `Dropdown` — is portaled to `<body>`, opens below (flips above only when it would\n * overflow), locks page scroll and re-positions on scroll/resize. Controlled (`value` + `onChange`)\n * or uncontrolled (`defaultValue`), and binds to a surrounding `<Form>` by `name` (its form value is\n * the color string; validate with e.g. `z.string().regex(/^#[0-9a-f]{6}$/i, 'Pick a color')`, or a\n * looser pattern if you allow `rgba()`). Styling uses `--tz-*` tokens (the spectrum gradients and\n * the alpha checkerboard are the unavoidable exceptions).\n */\nexport const ColorPicker = forwardRef<HTMLButtonElement, ColorPickerProps>(function ColorPicker(\n  {\n    label,\n    size = 'md',\n    error,\n    helperText,\n    required = false,\n    fullWidth = true,\n    disabled = false,\n    value,\n    defaultValue,\n    onChange,\n    swatches,\n    alpha = true,\n    name,\n    placeholder,\n    id: idProp,\n    className,\n    style,\n  },\n  ref,\n) {\n  const t = useT()\n  const reactId = useId()\n  const id = idProp ?? reactId\n  const helperId = `${id}-helper`\n\n  // Auto-bind to a surrounding <Form> by `name` — the form value is the hex string.\n  const form = useFormContext()\n  const isFormBound = Boolean(form && name)\n  const bound = form && name ? form.field(name) : undefined\n\n  const externalValue: string | undefined =\n    value !== undefined\n      ? value\n      : isFormBound\n        ? ((form!.values[name!] as string | undefined) ?? '')\n        : undefined\n  const isControlled = externalValue !== undefined\n  const [internal, setInternal] = useState<string>(defaultValue ?? '')\n  const currentColor = isControlled ? externalValue! : internal\n  const parsed = parseColor(currentColor || '')\n  // canonical string for the value (`#rrggbb` when opaque, `rgba(...)` when not), null when unset\n  const displayValue = parsed ? formatColor(parsed) : null\n  // hex shows uppercase in the trigger; rgba() stays as-is\n  const displayText = displayValue\n    ? displayValue[0] === '#'\n      ? displayValue.toUpperCase()\n      : displayValue\n    : null\n\n  const resolvedError = error ?? bound?.error ?? false\n  const resolvedHelperText = helperText ?? bound?.helperText\n\n  const commit = (color: string) => {\n    if (!isControlled) setInternal(color)\n    if (isFormBound) form!.setValue(name!, color)\n    onChange?.(color)\n  }\n\n  // ── popover (positioning / scroll-lock / dismiss come from FloatingPanel) ──────────────────────\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n  const [open, setOpen] = useState(false)\n\n  const setTriggerRef = useCallback(\n    (node: HTMLButtonElement | null) => {\n      triggerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as { current: HTMLButtonElement | null }).current = node\n    },\n    [ref],\n  )\n\n  const closePopover = useCallback((refocus: boolean) => {\n    setOpen(false)\n    if (refocus) triggerRef.current?.focus()\n  }, [])\n\n  // mark the form field touched when focus leaves the whole widget — but not when it moves into the\n  // (portaled) popover or stays on the trigger, so a form-bound picker shows its error like every\n  // other popover field (Select/DatePicker) instead of only after submit\n  const handleTriggerBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    const next = event.relatedTarget as Node | null\n    if (next && (popoverRef.current?.contains(next) || triggerRef.current?.contains(next))) return\n    bound?.onBlur(event as unknown as FocusEvent<HTMLInputElement>)\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles.field,\n        styles[size],\n        fullWidth && styles.fullWidth,\n        resolvedError && styles.error,\n        disabled && styles.disabled,\n        className,\n      )}\n      style={style}\n    >\n      {label != null && (\n        <label htmlFor={id} className={styles.label}>\n          <Typography as=\"span\" variant=\"bodySmall\" color=\"muted\">\n            {label}\n          </Typography>\n          {required && (\n            <span className={styles.required} aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <button\n        ref={setTriggerRef}\n        id={id}\n        name={name}\n        type=\"button\"\n        className={clsx(styles.control, open && styles.open)}\n        disabled={disabled}\n        aria-haspopup=\"dialog\"\n        aria-expanded={open}\n        aria-invalid={resolvedError || undefined}\n        aria-describedby={resolvedHelperText != null ? helperId : undefined}\n        aria-label={label || parsed || placeholder ? undefined : t('colorPicker.pick')}\n        onClick={() => setOpen((o) => !o)}\n        onBlur={handleTriggerBlur}\n      >\n        <span className={clsx(styles.value, !parsed && styles.placeholder)}>\n          {displayText ?? placeholder}\n        </span>\n        <span\n          className={clsx(styles.preview, !parsed && styles.previewEmpty)}\n          style={parsed ? ({ '--cp-fill': displayValue } as CSSProperties) : undefined}\n          aria-hidden=\"true\"\n        />\n      </button>\n\n      <FloatingPanel\n        ref={popoverRef}\n        open={open}\n        triggerRef={triggerRef}\n        onClose={closePopover}\n        role=\"dialog\"\n        ariaLabel=\"Color picker\"\n        width={POPOVER_WIDTH}\n      >\n        <ColorPickerPanel\n          value={currentColor}\n          onChange={commit}\n          swatches={swatches}\n          alpha={alpha}\n        />\n      </FloatingPanel>\n\n      {resolvedHelperText != null && (\n        <Typography\n          as=\"span\"\n          id={helperId}\n          variant=\"bodySmall\"\n          color={resolvedError ? 'error' : 'muted'}\n          className={styles.helper}\n        >\n          {resolvedHelperText}\n        </Typography>\n      )}\n    </div>\n  )\n})\n"],"names":["POPOVER_WIDTH","ColorPicker","forwardRef","label","size","error","helperText","required","fullWidth","disabled","value","defaultValue","onChange","swatches","alpha","name","placeholder","idProp","className","style","ref","t","useT","reactId","useId","id","helperId","form","useFormContext","isFormBound","bound","externalValue","isControlled","internal","setInternal","useState","currentColor","parsed","parseColor","displayValue","formatColor","displayText","resolvedError","resolvedHelperText","commit","color","triggerRef","useRef","popoverRef","open","setOpen","setTriggerRef","useCallback","node","closePopover","refocus","_a","handleTriggerBlur","event","next","_b","jsxs","clsx","styles","jsx","Typography","o","FloatingPanel","ColorPickerPanel"],"mappings":";;;;;;;;AAsBA,MAAMA,KAAgB,KAoDTC,KAAcC,GAAgD,SACzE;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,aAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,WAAAC;AAAA,EACA,OAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAIC,GAAA,GACJC,IAAUC,GAAA,GACVC,IAAKR,KAAUM,GACfG,IAAW,GAAGD,CAAE,WAGhBE,IAAOC,GAAA,GACPC,IAAc,GAAQF,KAAQZ,IAC9Be,IAAQH,KAAQZ,IAAOY,EAAK,MAAMZ,CAAI,IAAI,QAE1CgB,IACJrB,MAAU,SACNA,IACAmB,IACIF,EAAM,OAAOZ,CAAK,KAA4B,KAChD,QACFiB,IAAeD,MAAkB,QACjC,CAACE,GAAUC,CAAW,IAAIC,EAAiBxB,KAAgB,EAAE,GAC7DyB,IAAeJ,IAAeD,IAAiBE,GAC/CI,IAASC,GAAWF,KAAgB,EAAE,GAEtCG,IAAeF,IAASG,GAAYH,CAAM,IAAI,MAE9CI,IAAcF,IAChBA,EAAa,CAAC,MAAM,MAClBA,EAAa,gBACbA,IACF,MAEEG,IAAgBrC,MAASyB,KAAA,gBAAAA,EAAO,UAAS,IACzCa,IAAqBrC,MAAcwB,KAAA,gBAAAA,EAAO,aAE1Cc,IAAS,CAACC,MAAkB;AAChC,IAAKb,KAAcE,EAAYW,CAAK,GAChChB,KAAaF,EAAM,SAASZ,GAAO8B,CAAK,GAC5CjC,KAAA,QAAAA,EAAWiC;AAAA,EACb,GAGMC,IAAaC,EAAiC,IAAI,GAClDC,IAAaD,EAA8B,IAAI,GAC/C,CAACE,GAAMC,CAAO,IAAIf,EAAS,EAAK,GAEhCgB,IAAgBC;AAAA,IACpB,CAACC,MAAmC;AAClC,MAAAP,EAAW,UAAUO,GACjB,OAAOjC,KAAQ,aAAYA,EAAIiC,CAAI,IAC9BjC,MAAMA,EAA8C,UAAUiC;AAAA,IACzE;AAAA,IACA,CAACjC,CAAG;AAAA,EAAA,GAGAkC,IAAeF,EAAY,CAACG,MAAqB;;AACrD,IAAAL,EAAQ,EAAK,GACTK,OAASC,IAAAV,EAAW,YAAX,QAAAU,EAAoB;AAAA,EACnC,GAAG,CAAA,CAAE,GAKCC,KAAoB,CAACC,MAAyC;;AAClE,UAAMC,IAAOD,EAAM;AACnB,IAAIC,OAASH,IAAAR,EAAW,YAAX,QAAAQ,EAAoB,SAASG,OAASC,IAAAd,EAAW,YAAX,QAAAc,EAAoB,SAASD,OAChF7B,KAAA,QAAAA,EAAO,OAAO4B;AAAA,EAChB;AAEA,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO;AAAA,QACPA,EAAO3D,CAAI;AAAA,QACXI,KAAauD,EAAO;AAAA,QACpBrB,KAAiBqB,EAAO;AAAA,QACxBtD,KAAYsD,EAAO;AAAA,QACnB7C;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,MAEC,UAAA;AAAA,QAAAhB,KAAS,QACR,gBAAA0D,EAAC,SAAA,EAAM,SAASpC,GAAI,WAAWsC,EAAO,OACpC,UAAA;AAAA,UAAA,gBAAAC,EAACC,KAAW,IAAG,QAAO,SAAQ,aAAY,OAAM,SAC7C,UAAA9D,EAAA,CACH;AAAA,UACCI,uBACE,QAAA,EAAK,WAAWwD,EAAO,UAAU,eAAY,QAAO,UAAA,IAAA,CAErD;AAAA,QAAA,GAEJ;AAAA,QAGF,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKV;AAAA,YACL,IAAA1B;AAAA,YACA,MAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAW+C,EAAKC,EAAO,SAASd,KAAQc,EAAO,IAAI;AAAA,YACnD,UAAAtD;AAAA,YACA,iBAAc;AAAA,YACd,iBAAewC;AAAA,YACf,gBAAcP,KAAiB;AAAA,YAC/B,oBAAkBC,KAAsB,OAAOjB,IAAW;AAAA,YAC1D,cAAYvB,KAASkC,KAAUrB,IAAc,SAAYK,EAAE,kBAAkB;AAAA,YAC7E,SAAS,MAAM6B,EAAQ,CAACgB,MAAM,CAACA,CAAC;AAAA,YAChC,QAAQT;AAAA,YAER,UAAA;AAAA,cAAA,gBAAAO,EAAC,QAAA,EAAK,WAAWF,EAAKC,EAAO,OAAO,CAAC1B,KAAU0B,EAAO,WAAW,GAC9D,UAAAtB,KAAezB,EAAA,CAClB;AAAA,cACA,gBAAAgD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWF,EAAKC,EAAO,SAAS,CAAC1B,KAAU0B,EAAO,YAAY;AAAA,kBAC9D,OAAO1B,IAAU,EAAE,aAAaE,MAAmC;AAAA,kBACnE,eAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,gBAAAyB;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,KAAKnB;AAAA,YACL,MAAAC;AAAA,YACA,YAAAH;AAAA,YACA,SAASQ;AAAA,YACT,MAAK;AAAA,YACL,WAAU;AAAA,YACV,OAAOtD;AAAA,YAEP,UAAA,gBAAAgE;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,OAAOhC;AAAA,gBACP,UAAUQ;AAAA,gBACV,UAAA/B;AAAA,gBACA,OAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAGD6B,KAAsB,QACrB,gBAAAqB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAIvC;AAAA,YACJ,SAAQ;AAAA,YACR,OAAOgB,IAAgB,UAAU;AAAA,YACjC,WAAWqB,EAAO;AAAA,YAEjB,UAAApB;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/ColorPickerPanel-6lQC1URc.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-B_RSn9bb.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-6lQC1URc.js.map

package/dist/ColorPickerPanel-6lQC1URc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel-6lQC1URc.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/ColorPickerPanel-C9ARc_uD.cjs

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

package/dist/ColorPickerPanel-C9ARc_uD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel-C9ARc_uD.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/ColorRamp-B9OWxCOK.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-B6ASPrzT.cjs"),T=require("./toastStore-B4Tk2Xk7.cjs"),n=require("./TextField.module-DsNCo8vN.cjs"),W=require("./ConfigProvider-BElY0HuV.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-B9OWxCOK.cjs.map