@oneplatformdev/ui 0.1.99-beta.304 → 0.1.99-beta.306

package/ColorInput/ColorInput.types.d.ts

@@ -0,0 +1,46 @@
+import { InputHTMLAttributes } from 'react';
+import { ColorFormat } from './color.utils';
+export interface ColorInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'color'> {
+    /** Current color as a hex string (#rrggbb or #rrggbbaa). */
+    value?: string;
+    /** Called with the next hex string whenever the color changes. */
+    onChange?: (hex: string) => void;
+    /** Show the alpha slider / percent field and emit 8-digit hex. Default false. */
+    withAlpha?: boolean;
+    /** Marks the field as invalid (red border). */
+    error?: boolean;
+    /**
+     * Saved-colors palette inside the picker. When omitted the input manages its
+     * own palette persisted to localStorage (see `storageKey`).
+     */
+    savedColors?: string[];
+    /**
+     * Called from the picker's "+ Add" action. When omitted (and `savedColors`
+     * is also omitted) the added color is persisted to localStorage instead.
+     */
+    onAddSavedColor?: (hex: string) => void;
+    /**
+     * Called when a saved swatch's hover "×" is clicked. When omitted (and the
+     * palette is auto-managed) removal is persisted to localStorage instead.
+     */
+    onRemoveSavedColor?: (hex: string) => void;
+    /** i18n: label before the palette. Default "Saved colors:". */
+    savedColorsLabel?: string;
+    /** i18n: label of the add action. Default "+ Add". */
+    addLabel?: string;
+    /** i18n: accessible label for a swatch's remove button. Default "Remove color". */
+    removeColorLabel?: string;
+    /**
+     * localStorage key for the auto-managed saved-colors palette. Only used when
+     * `savedColors`/`onAddSavedColor` are not provided.
+     */
+    storageKey?: string;
+    /**
+     * Color formats offered in the picker's format dropdown. Defaults to all
+     * (`['hex', 'rgb', 'rgba', 'hsl', 'hsb']`). Restrict with e.g.
+     * `formats={['hex']}`.
+     */
+    formats?: ColorFormat[];
+    className?: string;
+}
+//# sourceMappingURL=ColorInput.types.d.ts.map

package/ColorInput/ColorInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.types.d.ts","sourceRoot":"","sources":["../../src/ColorInput/ColorInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/B;IACD,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/ColorInput/ColorInput.types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=ColorInput.types.js.map

package/ColorInput/ColorInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/ColorInput/ColorPicker.d.ts

@@ -0,0 +1,28 @@
+import { ColorFormat } from './color.utils';
+export interface ColorPickerProps {
+    value: string;
+    onChange: (hex: string) => void;
+    withAlpha?: boolean;
+    /** Saved-colors palette. Empty by default. */
+    savedColors?: string[];
+    /** Renders the "+ Add" action; called with the current color. */
+    onAddSavedColor?: (hex: string) => void;
+    /** When provided, each saved swatch gets a hover "×" to remove it. */
+    onRemoveSavedColor?: (hex: string) => void;
+    /** Label before the palette (i18n). Default "Saved colors:". */
+    savedColorsLabel?: string;
+    /** Label of the add action (i18n). Default "+ Add". */
+    addLabel?: string;
+    /** Accessible label for a swatch's remove button (i18n). Default "Remove color". */
+    removeColorLabel?: string;
+    /**
+     * Color formats offered in the format dropdown. Defaults to all of them
+     * (`['hex', 'rgb', 'rgba', 'hsl', 'hsb']`). Pass a subset to restrict input,
+     * e.g. `formats={['hex']}` to only allow hex. With a single format the
+     * dropdown is hidden.
+     */
+    formats?: ColorFormat[];
+    className?: string;
+}
+export declare const ColorPicker: ({ value, onChange, withAlpha, savedColors, onAddSavedColor, onRemoveSavedColor, savedColorsLabel, addLabel, removeColorLabel, formats, className, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/ColorInput/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorInput/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,WAAW,EAQZ,MAAM,eAAe,CAAC;AAyEvB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD,eAAO,MAAM,WAAW,GAAI,qJAYzB,gBAAgB,4CAmRlB,CAAC"}

package/ColorInput/ColorPicker.js

@@ -0,0 +1,322 @@
+import { jsxs as d, jsx as t, Fragment as K } from "react/jsx-runtime";
+import { useState as k, useEffect as A, useCallback as V, useRef as W } from "react";
+import { cn as N } from "@oneplatformdev/utils";
+import { COLOR_FORMATS as H, parseColor as C, rgbaToHsva as _, formatColor as g, hsvaToRgba as w, COLOR_FORMAT_LABELS as B, parseColorInFormat as Q, clamp as z, FORMAT_HAS_ALPHA as Z } from "./color.utils.js";
+const ee = ({
+  value: a,
+  options: p,
+  onChange: h
+}) => {
+  const [r, o] = k(!1), c = W(null);
+  return A(() => {
+    if (!r) return;
+    const n = (m) => {
+      c.current && !c.current.contains(m.target) && o(!1);
+    };
+    return window.addEventListener("mousedown", n), () => window.removeEventListener("mousedown", n);
+  }, [r]), /* @__PURE__ */ d("div", { ref: c, className: "relative w-[74px] shrink-0", children: [
+    /* @__PURE__ */ d(
+      "button",
+      {
+        type: "button",
+        onClick: () => o((n) => !n),
+        "aria-haspopup": "listbox",
+        "aria-expanded": r,
+        className: N(
+          "flex h-7 w-full cursor-pointer items-center justify-between rounded border bg-white pl-2 pr-1.5 text-sm text-[#374151] shadow-[0px_1px_2px_rgba(31,41,55,0.08)] transition-colors",
+          r ? "border-[#9368FF]" : "border-[#E5E7EB] hover:border-[#D1D5DB]"
+        ),
+        children: [
+          /* @__PURE__ */ t("span", { children: B[a] }),
+          /* @__PURE__ */ d("svg", { className: "size-3 text-[#9CA3AF]", viewBox: "0 0 12 12", fill: "none", children: [
+            /* @__PURE__ */ t("path", { d: "M3.5 5 6 2.5 8.5 5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ t("path", { d: "M3.5 7 6 9.5 8.5 7", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] })
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ t(
+      "ul",
+      {
+        role: "listbox",
+        className: "absolute left-0 top-[calc(100%+4px)] z-20 w-full overflow-hidden rounded border border-[#E5E7EB] bg-white py-1 shadow-[0px_10px_15px_rgba(31,41,55,0.1),0px_4px_6px_rgba(31,41,55,0.05)]",
+        children: p.map((n) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": n === a,
+            onClick: () => {
+              h(n), o(!1);
+            },
+            className: N(
+              "flex w-full cursor-pointer items-center px-2 py-1 text-left text-sm hover:bg-[#F3F4F6]",
+              n === a ? "font-medium text-[#9368FF]" : "text-[#374151]"
+            ),
+            children: B[n]
+          }
+        ) }, n))
+      }
+    )
+  ] });
+}, E = (a, p, h, r) => {
+  const o = a.getBoundingClientRect(), c = z((p - o.left) / o.width, 0, 1), n = z((h - o.top) / o.height, 0, 1);
+  return {
+    x: r === "y" ? 0 : c,
+    y: r === "x" ? 0 : n
+  };
+}, L = (a) => {
+  const p = W(null), h = V(
+    (r) => {
+      const o = p.current;
+      if (!o) return;
+      r.preventDefault(), a(r.clientX, r.clientY, o);
+      const c = (m) => a(m.clientX, m.clientY, o), n = () => {
+        window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", n);
+      };
+      window.addEventListener("pointermove", c), window.addEventListener("pointerup", n);
+    },
+    [a]
+  );
+  return { ref: p, start: h };
+}, se = ({
+  value: a,
+  onChange: p,
+  withAlpha: h = !1,
+  savedColors: r = [],
+  onAddSavedColor: o,
+  onRemoveSavedColor: c,
+  savedColorsLabel: n = "Saved colors:",
+  addLabel: m = "+ Add",
+  removeColorLabel: D = "Remove color",
+  formats: M = H,
+  className: X
+}) => {
+  const f = M.length ? M : H, [i, S] = k(f[0]);
+  A(() => {
+    f.includes(i) || S(f[0]);
+  }, [f, i]);
+  const [s, O] = k(() => {
+    const e = C(a);
+    return e ? _(e) : { h: 0, s: 0, v: 0, a: 1 };
+  }), [Y, y] = k(null), u = h || (i === "hex" || i === "rgba");
+  A(() => {
+    const e = C(a);
+    if (!e) return;
+    const l = _(e);
+    O(
+      (x) => g(w(x), "hex", u).toLowerCase() === a.trim().toLowerCase() ? x : l
+    );
+  }, [a, u]);
+  const b = V(
+    (e) => {
+      O(e), p(g(w(e), "hex", u));
+    },
+    [p, u]
+  ), R = L((e, l, x) => {
+    const { x: v, y: J } = E(x, e, l, "both");
+    b({ ...s, s: v, v: 1 - J });
+  }), $ = L((e, l, x) => {
+    const { x: v } = E(x, e, 0, "x");
+    b({ ...s, h: v * 360 });
+  }), j = L((e, l, x) => {
+    const { x: v } = E(x, e, 0, "x");
+    b({ ...s, a: v });
+  }), I = g(w({ h: s.h, s: 1, v: 1, a: 1 }), "hex"), T = g(w({ ...s, a: 1 }), "hex"), F = g(w(s), "hex", u), U = u ? s.a : 1, P = r.find(
+    (e) => e.toLowerCase() === F.toLowerCase()
+  ), q = Y ?? g(w(s), i, Z[i]).replace(
+    i === "hex" ? /^#/ : /^$/,
+    ""
+  ), G = f.length > 1;
+  return /* @__PURE__ */ d("div", { className: N("flex w-[232px] flex-col gap-4", X), children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: R.ref,
+        onPointerDown: R.start,
+        className: "relative h-[152px] w-full cursor-crosshair touch-none overflow-hidden rounded",
+        style: {
+          backgroundImage: "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)",
+          backgroundSize: "16px 16px"
+        },
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0",
+              style: {
+                opacity: U,
+                backgroundColor: I,
+                backgroundImage: "linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]",
+              style: {
+                left: `calc(8px + ${s.s} * (100% - 16px))`,
+                top: `calc(8px + ${1 - s.v} * (100% - 16px))`,
+                // actual color incl. alpha, so the dot matches the square
+                backgroundColor: F
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: $.ref,
+        onPointerDown: $.start,
+        className: "relative h-2 w-full cursor-pointer touch-none rounded-full",
+        style: {
+          backgroundImage: "linear-gradient(90deg, #FF0000 0%, #FF8A00 12%, #FFE600 25%, #14FF00 39%, #00A3FF 50%, #0500FF 62%, #AD00FF 73%, #FF00C7 85%, #FF0000 100%)"
+        },
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            className: "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]",
+            style: {
+              left: `calc(${s.h / 360} * (100% - 16px))`,
+              backgroundColor: I
+            }
+          }
+        )
+      }
+    ),
+    u && /* @__PURE__ */ t(
+      "div",
+      {
+        ref: j.ref,
+        onPointerDown: j.start,
+        className: "relative h-2 w-full cursor-pointer touch-none rounded-full",
+        style: {
+          backgroundImage: `linear-gradient(90deg, transparent 0%, ${T} 100%), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
+          backgroundSize: "100% 100%, 6px 6px"
+        },
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            className: "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]",
+            style: {
+              left: `calc(${s.a} * (100% - 16px))`,
+              backgroundColor: T
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "flex items-start gap-2", children: [
+      G && /* @__PURE__ */ t(
+        ee,
+        {
+          value: i,
+          options: f,
+          onChange: (e) => {
+            y(null), S(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "flex h-7 flex-1 items-center gap-1 rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]", children: [
+        i === "hex" && /* @__PURE__ */ t("span", { className: "text-sm text-[#9CA3AF]", children: "#" }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            value: q,
+            onChange: (e) => {
+              y(e.target.value);
+              const l = Q(e.target.value, i);
+              l && b(_(l));
+            },
+            onBlur: () => y(null),
+            className: "w-full min-w-0 bg-transparent text-sm text-[#374151] outline-none",
+            "aria-label": `${B[i]} value`
+          }
+        )
+      ] }),
+      u && i === "hex" && /* @__PURE__ */ t("div", { className: "flex h-7 w-[56px] shrink-0 items-center rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]", children: /* @__PURE__ */ t(
+        "input",
+        {
+          value: `${Math.round(s.a * 100)}%`,
+          onChange: (e) => {
+            const l = parseInt(e.target.value.replace(/[^0-9]/g, ""), 10);
+            Number.isNaN(l) || b({ ...s, a: z(l, 0, 100) / 100 });
+          },
+          className: "w-full bg-transparent text-sm text-[#374151] outline-none",
+          "aria-label": "Alpha percent"
+        }
+      ) })
+    ] }),
+    (!!o || r.length > 0) && /* @__PURE__ */ d(K, { children: [
+      /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ t("span", { className: "text-xs font-medium text-[#374151]", children: n }),
+        /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+          !!c && P && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              "aria-label": D,
+              title: D,
+              className: "flex cursor-pointer items-center text-[#6B7280] hover:text-[#EF4444]",
+              onClick: () => c?.(P),
+              children: /* @__PURE__ */ t("svg", { viewBox: "0 0 16 16", className: "size-3.5", fill: "none", children: /* @__PURE__ */ t(
+                "path",
+                {
+                  d: "M2.5 4h11M6.5 4V2.8c0-.4.3-.8.8-.8h1.4c.5 0 .8.4.8.8V4M4 4l.6 8.3c0 .6.5 1 1 1h4.8c.5 0 1-.4 1-1L12 4M6.5 6.8v4M9.5 6.8v4",
+                  stroke: "currentColor",
+                  strokeWidth: "1.1",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          ),
+          !!o && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "text-xs font-medium text-[#6B7280] hover:text-[#374151]",
+              onClick: () => o?.(F),
+              children: m
+            }
+          )
+        ] })
+      ] }),
+      r.length > 0 && /* @__PURE__ */ t("div", { className: "grid grid-cols-7 gap-2", children: r.map((e) => /* @__PURE__ */ d("div", { className: "relative size-6", children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: "absolute inset-0 rounded-full",
+            style: {
+              backgroundImage: "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)",
+              backgroundSize: "8px 8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            title: e,
+            onClick: () => {
+              const l = C(e);
+              l && b(_(l));
+            },
+            className: N(
+              "absolute inset-0 cursor-pointer rounded-full",
+              F.toLowerCase() === e.toLowerCase() && "border-2 border-white shadow-[0px_0px_0px_2px_rgba(0,0,0,0.25)]"
+            ),
+            style: { backgroundColor: e }
+          }
+        )
+      ] }, e)) })
+    ] })
+  ] });
+};
+export {
+  se as ColorPicker
+};
+//# sourceMappingURL=ColorPicker.js.map

package/ColorInput/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../src/ColorInput/ColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport {\r\n  clamp,\r\n  COLOR_FORMAT_LABELS,\r\n  COLOR_FORMATS,\r\n  ColorFormat,\r\n  formatColor,\r\n  FORMAT_HAS_ALPHA,\r\n  HSVA,\r\n  hsvaToRgba,\r\n  parseColor,\r\n  parseColorInFormat,\r\n  rgbaToHsva,\r\n} from './color.utils';\r\n\r\n/** Compact, styled dropdown for the color format (Hex / RGB / RGBA / …). */\r\nconst FormatSelect = ({\r\n  value,\r\n  options,\r\n  onChange,\r\n}: {\r\n  value: ColorFormat;\r\n  options: ColorFormat[];\r\n  onChange: (next: ColorFormat) => void;\r\n}) => {\r\n  const [open, setOpen] = useState(false);\r\n  const ref = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const onDown = (e: MouseEvent) => {\r\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);\r\n    };\r\n    window.addEventListener('mousedown', onDown);\r\n    return () => window.removeEventListener('mousedown', onDown);\r\n  }, [open]);\r\n\r\n  return (\r\n    <div ref={ref} className=\"relative w-[74px] shrink-0\">\r\n      <button\r\n        type=\"button\"\r\n        onClick={() => setOpen((o) => !o)}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={open}\r\n        className={cn(\r\n          'flex h-7 w-full cursor-pointer items-center justify-between rounded border bg-white pl-2 pr-1.5 text-sm text-[#374151] shadow-[0px_1px_2px_rgba(31,41,55,0.08)] transition-colors',\r\n          open ? 'border-[#9368FF]' : 'border-[#E5E7EB] hover:border-[#D1D5DB]',\r\n        )}\r\n      >\r\n        <span>{COLOR_FORMAT_LABELS[value]}</span>\r\n        <svg className=\"size-3 text-[#9CA3AF]\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n          <path d=\"M3.5 5 6 2.5 8.5 5\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n          <path d=\"M3.5 7 6 9.5 8.5 7\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n      {open && (\r\n        <ul\r\n          role=\"listbox\"\r\n          className=\"absolute left-0 top-[calc(100%+4px)] z-20 w-full overflow-hidden rounded border border-[#E5E7EB] bg-white py-1 shadow-[0px_10px_15px_rgba(31,41,55,0.1),0px_4px_6px_rgba(31,41,55,0.05)]\"\r\n        >\r\n          {options.map((f) => (\r\n            <li key={f}>\r\n              <button\r\n                type=\"button\"\r\n                role=\"option\"\r\n                aria-selected={f === value}\r\n                onClick={() => {\r\n                  onChange(f);\r\n                  setOpen(false);\r\n                }}\r\n                className={cn(\r\n                  'flex w-full cursor-pointer items-center px-2 py-1 text-left text-sm hover:bg-[#F3F4F6]',\r\n                  f === value ? 'font-medium text-[#9368FF]' : 'text-[#374151]',\r\n                )}\r\n              >\r\n                {COLOR_FORMAT_LABELS[f]}\r\n              </button>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport interface ColorPickerProps {\r\n  value: string;\r\n  onChange: (hex: string) => void;\r\n  withAlpha?: boolean;\r\n  /** Saved-colors palette. Empty by default. */\r\n  savedColors?: string[];\r\n  /** Renders the \"+ Add\" action; called with the current color. */\r\n  onAddSavedColor?: (hex: string) => void;\r\n  /** When provided, each saved swatch gets a hover \"×\" to remove it. */\r\n  onRemoveSavedColor?: (hex: string) => void;\r\n  /** Label before the palette (i18n). Default \"Saved colors:\". */\r\n  savedColorsLabel?: string;\r\n  /** Label of the add action (i18n). Default \"+ Add\". */\r\n  addLabel?: string;\r\n  /** Accessible label for a swatch's remove button (i18n). Default \"Remove color\". */\r\n  removeColorLabel?: string;\r\n  /**\r\n   * Color formats offered in the format dropdown. Defaults to all of them\r\n   * (`['hex', 'rgb', 'rgba', 'hsl', 'hsb']`). Pass a subset to restrict input,\r\n   * e.g. `formats={['hex']}` to only allow hex. With a single format the\r\n   * dropdown is hidden.\r\n   */\r\n  formats?: ColorFormat[];\r\n  className?: string;\r\n}\r\n\r\n/** Returns a 0..1 ratio of pointer position inside an element along an axis. */\r\nconst ratioFromPointer = (\r\n  el: HTMLElement,\r\n  clientX: number,\r\n  clientY: number,\r\n  axis: 'x' | 'y' | 'both',\r\n): { x: number; y: number } => {\r\n  const rect = el.getBoundingClientRect();\r\n  const x = clamp((clientX - rect.left) / rect.width, 0, 1);\r\n  const y = clamp((clientY - rect.top) / rect.height, 0, 1);\r\n  return {\r\n    x: axis === 'y' ? 0 : x,\r\n    y: axis === 'x' ? 0 : y,\r\n  };\r\n};\r\n\r\nconst useDrag = (\r\n  onMove: (clientX: number, clientY: number, el: HTMLElement) => void,\r\n) => {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n\r\n  const start = useCallback(\r\n    (e: React.PointerEvent) => {\r\n      const el = ref.current;\r\n      if (!el) return;\r\n      e.preventDefault();\r\n      onMove(e.clientX, e.clientY, el);\r\n\r\n      const handleMove = (ev: PointerEvent) =>\r\n        onMove(ev.clientX, ev.clientY, el);\r\n      const handleUp = () => {\r\n        window.removeEventListener('pointermove', handleMove);\r\n        window.removeEventListener('pointerup', handleUp);\r\n      };\r\n      window.addEventListener('pointermove', handleMove);\r\n      window.addEventListener('pointerup', handleUp);\r\n    },\r\n    [onMove],\r\n  );\r\n\r\n  return { ref, start };\r\n};\r\n\r\nexport const ColorPicker = ({\r\n  value,\r\n  onChange,\r\n  withAlpha = false,\r\n  savedColors = [],\r\n  onAddSavedColor,\r\n  onRemoveSavedColor,\r\n  savedColorsLabel = 'Saved colors:',\r\n  addLabel = '+ Add',\r\n  removeColorLabel = 'Remove color',\r\n  formats = COLOR_FORMATS,\r\n  className,\r\n}: ColorPickerProps) => {\r\n  const availableFormats = formats.length ? formats : COLOR_FORMATS;\r\n  const [format, setFormat] = useState<ColorFormat>(availableFormats[0]);\r\n\r\n  // Keep the active format within the allowed set if `formats` changes.\r\n  useEffect(() => {\r\n    if (!availableFormats.includes(format)) setFormat(availableFormats[0]);\r\n  }, [availableFormats, format]);\r\n\r\n  const [hsva, setHsva] = useState<HSVA>(() => {\r\n    const rgba = parseColor(value);\r\n    return rgba ? rgbaToHsva(rgba) : { h: 0, s: 0, v: 0, a: 1 };\r\n  });\r\n\r\n  // Local text buffer so partially-typed values (e.g. \"255, 20\") don't get\r\n  // snapped back by the controlled value while the user is mid-edit.\r\n  const [fieldText, setFieldText] = useState<string | null>(null);\r\n\r\n  // Alpha only makes sense for formats that can encode it: hex (#RRGGBBAA) and\r\n  // rgba. rgb/hsl/hsb have no alpha channel, so the transparency slider is\r\n  // hidden there. `withAlpha` can still force it on explicitly.\r\n  const formatSupportsAlpha = format === 'hex' || format === 'rgba';\r\n  const alphaEnabled = withAlpha || formatSupportsAlpha;\r\n\r\n  // Sync from external value, but keep internal hue when only it differs\r\n  // (prevents the hue jumping when saturation/value reach extremes).\r\n  useEffect(() => {\r\n    const rgba = parseColor(value);\r\n    if (!rgba) return;\r\n    const next = rgbaToHsva(rgba);\r\n    setHsva((prev) =>\r\n      formatColor(hsvaToRgba(prev), 'hex', alphaEnabled).toLowerCase() ===\r\n      value.trim().toLowerCase()\r\n        ? prev\r\n        : next,\r\n    );\r\n  }, [value, alphaEnabled]);\r\n\r\n  const emit = useCallback(\r\n    (next: HSVA) => {\r\n      setHsva(next);\r\n      onChange(formatColor(hsvaToRgba(next), 'hex', alphaEnabled));\r\n    },\r\n    [onChange, alphaEnabled],\r\n  );\r\n\r\n  const saturation = useDrag((x, y, el) => {\r\n    const { x: rx, y: ry } = ratioFromPointer(el, x, y, 'both');\r\n    emit({ ...hsva, s: rx, v: 1 - ry });\r\n  });\r\n  const hue = useDrag((x, _y, el) => {\r\n    const { x: rx } = ratioFromPointer(el, x, 0, 'x');\r\n    emit({ ...hsva, h: rx * 360 });\r\n  });\r\n  const alpha = useDrag((x, _y, el) => {\r\n    const { x: rx } = ratioFromPointer(el, x, 0, 'x');\r\n    emit({ ...hsva, a: rx });\r\n  });\r\n\r\n  const hueColor = formatColor(hsvaToRgba({ h: hsva.h, s: 1, v: 1, a: 1 }), 'hex');\r\n  const solidColor = formatColor(hsvaToRgba({ ...hsva, a: 1 }), 'hex');\r\n  // The actual color with its alpha applied — used for the palette opacity and\r\n  // for what \"+ Add\" saves (so a semi-transparent color is stored as #rrggbbaa).\r\n  const currentColor = formatColor(hsvaToRgba(hsva), 'hex', alphaEnabled);\r\n  const paletteOpacity = alphaEnabled ? hsva.a : 1;\r\n  // The saved swatch matching the current color — the trash button targets it.\r\n  const selectedSavedColor = savedColors.find(\r\n    (c) => c.toLowerCase() === currentColor.toLowerCase(),\r\n  );\r\n  // The value field shows alpha inline only for formats that encode it (RGBA).\r\n  // For hex/rgb/hsl/hsb the alpha lives in the separate `%` field instead.\r\n  const fieldValue =\r\n    fieldText ??\r\n    formatColor(hsvaToRgba(hsva), format, FORMAT_HAS_ALPHA[format]).replace(\r\n      format === 'hex' ? /^#/ : /^$/,\r\n      '',\r\n    );\r\n\r\n  const showFormatSelect = availableFormats.length > 1;\r\n\r\n  return (\r\n    <div className={cn('flex w-[232px] flex-col gap-4', className)}>\r\n      {/* Saturation / Value area — checker shows through as alpha drops. */}\r\n      <div\r\n        ref={saturation.ref}\r\n        onPointerDown={saturation.start}\r\n        className=\"relative h-[152px] w-full cursor-crosshair touch-none overflow-hidden rounded\"\r\n        style={{\r\n          backgroundImage:\r\n            'repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)',\r\n          backgroundSize: '16px 16px',\r\n        }}\r\n      >\r\n        <div\r\n          className=\"pointer-events-none absolute inset-0\"\r\n          style={{\r\n            opacity: paletteOpacity,\r\n            backgroundColor: hueColor,\r\n            backgroundImage:\r\n              'linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%)',\r\n          }}\r\n        />\r\n        <span\r\n          className=\"pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]\"\r\n          style={{\r\n            left: `calc(8px + ${hsva.s} * (100% - 16px))`,\r\n            top: `calc(8px + ${1 - hsva.v} * (100% - 16px))`,\r\n            // actual color incl. alpha, so the dot matches the square\r\n            backgroundColor: currentColor,\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* Hue slider */}\r\n      <div\r\n        ref={hue.ref}\r\n        onPointerDown={hue.start}\r\n        className=\"relative h-2 w-full cursor-pointer touch-none rounded-full\"\r\n        style={{\r\n          backgroundImage:\r\n            'linear-gradient(90deg, #FF0000 0%, #FF8A00 12%, #FFE600 25%, #14FF00 39%, #00A3FF 50%, #0500FF 62%, #AD00FF 73%, #FF00C7 85%, #FF0000 100%)',\r\n        }}\r\n      >\r\n        <span\r\n          className=\"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]\"\r\n          style={{\r\n            left: `calc(${hsva.h / 360} * (100% - 16px))`,\r\n            backgroundColor: hueColor,\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* Alpha (transparency) slider */}\r\n      {alphaEnabled && (\r\n        <div\r\n          ref={alpha.ref}\r\n          onPointerDown={alpha.start}\r\n          className=\"relative h-2 w-full cursor-pointer touch-none rounded-full\"\r\n          style={{\r\n            backgroundImage: `linear-gradient(90deg, transparent 0%, ${solidColor} 100%), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,\r\n            backgroundSize: '100% 100%, 6px 6px',\r\n          }}\r\n        >\r\n          <span\r\n            className=\"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]\"\r\n            style={{\r\n              left: `calc(${hsva.a} * (100% - 16px))`,\r\n              backgroundColor: solidColor,\r\n            }}\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      {/* Fields: format select + value + optional alpha % */}\r\n      <div className=\"flex items-start gap-2\">\r\n        {showFormatSelect && (\r\n          <FormatSelect\r\n            value={format}\r\n            options={availableFormats}\r\n            onChange={(next) => {\r\n              setFieldText(null);\r\n              setFormat(next);\r\n            }}\r\n          />\r\n        )}\r\n\r\n        <div className=\"flex h-7 flex-1 items-center gap-1 rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]\">\r\n          {format === 'hex' && <span className=\"text-sm text-[#9CA3AF]\">#</span>}\r\n          <input\r\n            value={fieldValue}\r\n            onChange={(e) => {\r\n              setFieldText(e.target.value);\r\n              const rgba = parseColorInFormat(e.target.value, format);\r\n              if (rgba) emit(rgbaToHsva(rgba));\r\n            }}\r\n            onBlur={() => setFieldText(null)}\r\n            className=\"w-full min-w-0 bg-transparent text-sm text-[#374151] outline-none\"\r\n            aria-label={`${COLOR_FORMAT_LABELS[format]} value`}\r\n          />\r\n        </div>\r\n\r\n        {/*\r\n          The separate % field is only for hex (its value is short, so 3 boxes\r\n          fit). RGBA carries alpha in its value field; rgb/hsl/hsb control alpha\r\n          via the slider — keeping their (long) value field from being squeezed.\r\n        */}\r\n        {alphaEnabled && format === 'hex' && (\r\n          <div className=\"flex h-7 w-[56px] shrink-0 items-center rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]\">\r\n            <input\r\n              value={`${Math.round(hsva.a * 100)}%`}\r\n              onChange={(e) => {\r\n                const num = parseInt(e.target.value.replace(/[^0-9]/g, ''), 10);\r\n                if (!Number.isNaN(num)) emit({ ...hsva, a: clamp(num, 0, 100) / 100 });\r\n              }}\r\n              className=\"w-full bg-transparent text-sm text-[#374151] outline-none\"\r\n              aria-label=\"Alpha percent\"\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* Saved colors */}\r\n      {(Boolean(onAddSavedColor) || savedColors.length > 0) && (\r\n        <>\r\n          <div className=\"flex items-center justify-between\">\r\n            <span className=\"text-xs font-medium text-[#374151]\">\r\n              {savedColorsLabel}\r\n            </span>\r\n            <div className=\"flex items-center gap-2\">\r\n              {/* Remove the currently selected swatch (avoids per-dot crosses). */}\r\n              {Boolean(onRemoveSavedColor) && selectedSavedColor && (\r\n                <button\r\n                  type=\"button\"\r\n                  aria-label={removeColorLabel}\r\n                  title={removeColorLabel}\r\n                  className=\"flex cursor-pointer items-center text-[#6B7280] hover:text-[#EF4444]\"\r\n                  onClick={() => onRemoveSavedColor?.(selectedSavedColor)}\r\n                >\r\n                  <svg viewBox=\"0 0 16 16\" className=\"size-3.5\" fill=\"none\">\r\n                    <path\r\n                      d=\"M2.5 4h11M6.5 4V2.8c0-.4.3-.8.8-.8h1.4c.5 0 .8.4.8.8V4M4 4l.6 8.3c0 .6.5 1 1 1h4.8c.5 0 1-.4 1-1L12 4M6.5 6.8v4M9.5 6.8v4\"\r\n                      stroke=\"currentColor\"\r\n                      strokeWidth=\"1.1\"\r\n                      strokeLinecap=\"round\"\r\n                      strokeLinejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n              {Boolean(onAddSavedColor) && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"text-xs font-medium text-[#6B7280] hover:text-[#374151]\"\r\n                  onClick={() => onAddSavedColor?.(currentColor)}\r\n                >\r\n                  {addLabel}\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {savedColors.length > 0 && (\r\n            <div className=\"grid grid-cols-7 gap-2\">\r\n              {savedColors.map((color) => (\r\n                <div key={color} className=\"relative size-6\">\r\n                  {/* checker so semi-transparent swatches read correctly */}\r\n                  <span\r\n                    className=\"absolute inset-0 rounded-full\"\r\n                    style={{\r\n                      backgroundImage:\r\n                        'repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)',\r\n                      backgroundSize: '8px 8px',\r\n                    }}\r\n                  />\r\n                  <button\r\n                    type=\"button\"\r\n                    title={color}\r\n                    onClick={() => {\r\n                      const rgba = parseColor(color);\r\n                      if (rgba) emit(rgbaToHsva(rgba));\r\n                    }}\r\n                    className={cn(\r\n                      'absolute inset-0 cursor-pointer rounded-full',\r\n                      currentColor.toLowerCase() === color.toLowerCase() &&\r\n                        'border-2 border-white shadow-[0px_0px_0px_2px_rgba(0,0,0,0.25)]',\r\n                    )}\r\n                    style={{ backgroundColor: color }}\r\n                  />\r\n                </div>\r\n              ))}\r\n            </div>\r\n          )}\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["FormatSelect","value","options","onChange","open","setOpen","useState","ref","useRef","useEffect","onDown","e","jsxs","o","cn","jsx","COLOR_FORMAT_LABELS","f","ratioFromPointer","el","clientX","clientY","axis","rect","x","clamp","y","useDrag","onMove","start","useCallback","handleMove","ev","handleUp","ColorPicker","withAlpha","savedColors","onAddSavedColor","onRemoveSavedColor","savedColorsLabel","addLabel","removeColorLabel","formats","COLOR_FORMATS","className","availableFormats","format","setFormat","hsva","setHsva","rgba","parseColor","rgbaToHsva","fieldText","setFieldText","alphaEnabled","next","prev","formatColor","hsvaToRgba","emit","saturation","rx","ry","hue","_y","alpha","hueColor","solidColor","currentColor","paletteOpacity","selectedSavedColor","c","fieldValue","FORMAT_HAS_ALPHA","showFormatSelect","parseColorInFormat","num","Fragment","color"],"mappings":"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"}

package/ColorInput/color.utils.d.ts

@@ -0,0 +1,42 @@
+export interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface HSVA {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** Parses #rgb / #rrggbb / #rrggbbaa (with or without leading #) into RGBA. */
+export declare const parseColor: (input: string) => RGBA | null;
+export declare const isValidColor: (input: string) => boolean;
+/** Formats RGBA to a hex string. Includes the alpha byte only when withAlpha and a<1. */
+export declare const rgbaToHex: (rgba: RGBA, withAlpha?: boolean) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RGBA) => HSVA;
+export declare const hsvaToRgba: ({ h, s, v, a }: HSVA) => RGBA;
+/** Color string formats the picker can read/emit. */
+export type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsb';
+/** All formats, in the order they appear in the format dropdown. */
+export declare const COLOR_FORMATS: ColorFormat[];
+export declare const COLOR_FORMAT_LABELS: Record<ColorFormat, string>;
+/** Formats that carry an alpha channel — these enable the transparency slider. */
+export declare const FORMAT_HAS_ALPHA: Record<ColorFormat, boolean>;
+export interface HSLA {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+export declare const rgbaToHsla: ({ r, g, b, a }: RGBA) => HSLA;
+export declare const hslaToRgba: ({ h, s, l, a }: HSLA) => RGBA;
+/** Renders an RGBA value as a string in the requested format. */
+export declare const formatColor: (rgba: RGBA, format: ColorFormat, withAlpha?: boolean) => string;
+/** Parses a string written in the given format back into RGBA. */
+export declare const parseColorInFormat: (input: string, format: ColorFormat) => RGBA | null;
+/** Default saved-colors palette mirroring the Figma design. */
+export declare const DEFAULT_SAVED_COLORS: string[];
+//# sourceMappingURL=color.utils.d.ts.map

package/ColorInput/color.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.utils.d.ts","sourceRoot":"","sources":["../../src/ColorInput/color.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAC3B,CAAC;AAKtC,+EAA+E;AAC/E,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,IA8BjD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,OAAqC,CAAC;AAEnF,yFAAyF;AACzF,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,mBAAiB,KAAG,MAIzD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAmBjD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAqBjD,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjE,oEAAoE;AACpE,eAAO,MAAM,aAAa,EAAE,WAAW,EAAyC,CAAC;AAEjF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAM3D,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAMzD,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAoBjD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAqBjD,CAAC;AAKF,iEAAiE;AACjE,eAAO,MAAM,WAAW,GACtB,MAAM,IAAI,EACV,QAAQ,WAAW,EACnB,mBAAiB,KAChB,MAoBF,CAAC;AAKF,kEAAkE;AAClE,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,QAAQ,WAAW,KAClB,IAAI,GAAG,IA8BT,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAexC,CAAC"}

package/ColorInput/color.utils.js

@@ -0,0 +1,129 @@
+const u = (t, n, e) => Math.min(e, Math.max(n, t)), b = (t) => u(Math.round(t), 0, 255).toString(16).padStart(2, "0"), m = (t) => {
+  if (!t) return null;
+  let n = t.trim().replace(/^#/, "");
+  return /^[0-9a-f]{3}$/i.test(n) && (n = n.split("").map((e) => e + e).join("")), /^[0-9a-f]{6}$/i.test(n) ? {
+    r: parseInt(n.slice(0, 2), 16),
+    g: parseInt(n.slice(2, 4), 16),
+    b: parseInt(n.slice(4, 6), 16),
+    a: 1
+  } : /^[0-9a-f]{8}$/i.test(n) ? {
+    r: parseInt(n.slice(0, 2), 16),
+    g: parseInt(n.slice(2, 4), 16),
+    b: parseInt(n.slice(4, 6), 16),
+    a: parseInt(n.slice(6, 8), 16) / 255
+  } : null;
+}, E = (t) => m(t) !== null, x = (t, n = !1) => {
+  const e = `#${b(t.r)}${b(t.g)}${b(t.b)}`;
+  return n && t.a < 1 ? `${e}${b(t.a * 255)}` : e;
+}, g = ({ r: t, g: n, b: e, a: h }) => {
+  const s = t / 255, r = n / 255, c = e / 255, l = Math.max(s, r, c), a = Math.min(s, r, c), o = l - a;
+  let i = 0;
+  o !== 0 && (l === s ? i = (r - c) / o % 6 : l === r ? i = (c - s) / o + 2 : i = (s - r) / o + 4, i *= 60, i < 0 && (i += 360));
+  const $ = l === 0 ? 0 : o / l;
+  return { h: i, s: $, v: l, a: h };
+}, F = ({ h: t, s: n, v: e, a: h }) => {
+  const s = e * n, r = s * (1 - Math.abs(t / 60 % 2 - 1)), c = e - s;
+  let l = 0, a = 0, o = 0;
+  return t < 60 ? [l, a, o] = [s, r, 0] : t < 120 ? [l, a, o] = [r, s, 0] : t < 180 ? [l, a, o] = [0, s, r] : t < 240 ? [l, a, o] = [0, r, s] : t < 300 ? [l, a, o] = [r, 0, s] : [l, a, o] = [s, 0, r], {
+    r: Math.round((l + c) * 255),
+    g: Math.round((a + c) * 255),
+    b: Math.round((o + c) * 255),
+    a: h
+  };
+}, R = ["hex", "rgb", "rgba", "hsl", "hsb"], H = {
+  hex: "Hex",
+  rgb: "RGB",
+  rgba: "RGBA",
+  hsl: "HSL",
+  hsb: "HSB"
+}, O = {
+  hex: !1,
+  rgb: !1,
+  rgba: !0,
+  hsl: !1,
+  hsb: !1
+}, p = ({ r: t, g: n, b: e, a: h }) => {
+  const s = t / 255, r = n / 255, c = e / 255, l = Math.max(s, r, c), a = Math.min(s, r, c), o = l - a;
+  let i = 0;
+  o !== 0 && (l === s ? i = (r - c) / o % 6 : l === r ? i = (c - s) / o + 2 : i = (s - r) / o + 4, i *= 60, i < 0 && (i += 360));
+  const $ = (l + a) / 2, d = o === 0 ? 0 : o / (1 - Math.abs(2 * $ - 1));
+  return { h: i, s: d, l: $, a: h };
+}, C = ({ h: t, s: n, l: e, a: h }) => {
+  const s = (1 - Math.abs(2 * e - 1)) * n, r = s * (1 - Math.abs(t / 60 % 2 - 1)), c = e - s / 2;
+  let l = 0, a = 0, o = 0;
+  return t < 60 ? [l, a, o] = [s, r, 0] : t < 120 ? [l, a, o] = [r, s, 0] : t < 180 ? [l, a, o] = [0, s, r] : t < 240 ? [l, a, o] = [0, r, s] : t < 300 ? [l, a, o] = [r, 0, s] : [l, a, o] = [s, 0, r], {
+    r: Math.round((l + c) * 255),
+    g: Math.round((a + c) * 255),
+    b: Math.round((o + c) * 255),
+    a: h
+  };
+}, f = (t) => Math.round(t), M = (t) => `${Math.round(t * 100)}%`, S = (t, n, e = !1) => {
+  switch (n) {
+    case "rgba":
+      return `${f(t.r)}, ${f(t.g)}, ${f(t.b)}, ${Number(t.a.toFixed(2))}`;
+    case "rgb":
+      return e && t.a < 1 ? `${f(t.r)}, ${f(t.g)}, ${f(t.b)}, ${Number(t.a.toFixed(2))}` : `${f(t.r)}, ${f(t.g)}, ${f(t.b)}`;
+    case "hsl": {
+      const { h, s, l: r } = p(t);
+      return `${f(h)}, ${M(s)}, ${M(r)}`;
+    }
+    case "hsb": {
+      const { h, s, v: r } = g(t);
+      return `${f(h)}, ${M(s)}, ${M(r)}`;
+    }
+    case "hex":
+    default:
+      return x(t, e).toUpperCase();
+  }
+}, A = (t) => (t.match(/-?\d*\.?\d+/g) || []).map(Number), T = (t, n) => {
+  if (n === "hex") return m(t);
+  const e = A(t);
+  return n === "rgb" || n === "rgba" ? e.length < 3 ? null : {
+    r: u(e[0], 0, 255),
+    g: u(e[1], 0, 255),
+    b: u(e[2], 0, 255),
+    a: e.length > 3 ? u(e[3], 0, 1) : 1
+  } : n === "hsl" ? e.length < 3 ? null : C({
+    h: u(e[0], 0, 360),
+    s: u(e[1], 0, 100) / 100,
+    l: u(e[2], 0, 100) / 100,
+    a: e.length > 3 ? u(e[3], 0, 1) : 1
+  }) : e.length < 3 ? null : F({
+    h: u(e[0], 0, 360),
+    s: u(e[1], 0, 100) / 100,
+    v: u(e[2], 0, 100) / 100,
+    a: e.length > 3 ? u(e[3], 0, 1) : 1
+  });
+}, B = [
+  "#EF4444",
+  "#F97316",
+  "#FACC15",
+  "#4ADE80",
+  "#2DD4BF",
+  "#3B82F6",
+  "#6366F1",
+  "#EC4899",
+  "#F43F5E",
+  "#D946EF",
+  "#8B5CF6",
+  "#0EA5E9",
+  "#10B981",
+  "#84CC16"
+];
+export {
+  R as COLOR_FORMATS,
+  H as COLOR_FORMAT_LABELS,
+  B as DEFAULT_SAVED_COLORS,
+  O as FORMAT_HAS_ALPHA,
+  u as clamp,
+  S as formatColor,
+  C as hslaToRgba,
+  F as hsvaToRgba,
+  E as isValidColor,
+  m as parseColor,
+  T as parseColorInFormat,
+  x as rgbaToHex,
+  p as rgbaToHsla,
+  g as rgbaToHsva
+};
+//# sourceMappingURL=color.utils.js.map