@alfadocs/ui-kit-debug 0.71.0 → 0.72.0

package/dist/_chunks/color-picker-C_fZl6sA.js

@@ -1,718 +0,0 @@
-import { jsx as l, jsxs as h, Fragment as ke } from "react/jsx-runtime";
-import { forwardRef as ye, useId as $e, useState as z, useMemo as T, useCallback as Ne, useRef as G, useEffect as Z } from "react";
-import * as H from "@radix-ui/react-popover";
-import { c as se } from "./index-D2ZczOXr.js";
-import { useTranslation as Pe } from "react-i18next";
-import { u as Se } from "./form-field-context-B3APVHKx.js";
-import { S as ae } from "./slider-DN1CWkKB.js";
-import { u as Ae } from "./registry-DvAUVLHh.js";
-import { C as re } from "./check-DPdL_Sm7.js";
-import { X as Me } from "./x-CCcI3eJp.js";
-const ze = {
-  id: "color-picker",
-  capabilities: ["set_value"],
-  state: {
-    value: {
-      type: "string",
-      descriptionKey: "ui.agent.colorPicker.state.value",
-      description: 'Currently picked colour as a hex string (e.g. "#3b82f6").',
-      read: (e) => e.getValue()
-    }
-  },
-  actions: {
-    set_value: {
-      safety: "write",
-      argsType: "{ hex: string }",
-      argsSchema: {
-        type: "object",
-        properties: {
-          hex: {
-            type: "string",
-            description: 'Hex colour string, e.g. "#3b82f6".'
-          }
-        },
-        required: ["hex"]
-      },
-      idempotent: !0,
-      descriptionKey: "ui.agent.colorPicker.actions.setValue",
-      description: "Set the picked colour from a hex string.",
-      examples: [{ args: { hex: "#3b82f6" }, note: "Set to brand blue." }],
-      invoke: (e, s) => {
-        e.setValue(s.hex);
-      }
-    }
-  },
-  domHooks: {
-    root: {
-      attr: "data-component",
-      value: "color-picker",
-      description: "Marks the ColorPicker wrapper (inline) or trigger (popover variant)."
-    },
-    instanceId: {
-      attr: "data-component-id",
-      sourceProp: "id",
-      description: "Sourced from the id prop."
-    }
-  }
-};
-function Te(e) {
-  let s = e.startsWith("#") ? e.slice(1) : e;
-  (s.length === 3 || s.length === 4) && (s = s.split("").map((c) => c + c).join(""));
-  const r = parseInt(s.slice(0, 2), 16) / 255, a = parseInt(s.slice(2, 4), 16) / 255, n = parseInt(s.slice(4, 6), 16) / 255, d = s.length === 8 ? parseInt(s.slice(6, 8), 16) / 255 : 1;
-  return ne(r, a, n, d);
-}
-function ne(e, s, r, a) {
-  const n = Math.max(e, s, r), d = Math.min(e, s, r), c = (n + d) / 2;
-  let m = 0, w = 0;
-  if (n !== d) {
-    const x = n - d;
-    w = c > 0.5 ? x / (2 - n - d) : x / (n + d), n === e ? m = ((s - r) / x + (s < r ? 6 : 0)) / 6 : n === s ? m = ((r - e) / x + 2) / 6 : m = ((e - s) / x + 4) / 6;
-  }
-  return {
-    h: Math.round(m * 360),
-    s: Math.round(w * 100),
-    l: Math.round(c * 100),
-    a: Math.round(a * 100) / 100
-  };
-}
-function C(e) {
-  const { r: s, g: r, b: a } = W(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), d = `#${n(s)}${n(r)}${n(a)}`;
-  return e.a < 1 ? `${d}${n(e.a)}` : d;
-}
-function Ee(e) {
-  const { r: s, g: r, b: a } = W(e), n = Math.round(s * 255), d = Math.round(r * 255), c = Math.round(a * 255);
-  return e.a < 1 ? `rgba(${n}, ${d}, ${c}, ${e.a})` : `rgba(${n}, ${d}, ${c}, 1)`;
-}
-function W(e) {
-  const s = e.h / 360, r = e.s / 100, a = e.l / 100;
-  if (r === 0)
-    return { r: a, g: a, b: a };
-  const n = a < 0.5 ? a * (1 + r) : a + r - a * r, d = 2 * a - n;
-  return {
-    r: j(d, n, s + 1 / 3),
-    g: j(d, n, s),
-    b: j(d, n, s - 1 / 3)
-  };
-}
-function j(e, s, r) {
-  let a = r;
-  return a < 0 && (a += 1), a > 1 && (a -= 1), a < 1 / 6 ? e + (s - e) * 6 * a : a < 1 / 2 ? s : a < 2 / 3 ? e + (s - e) * (2 / 3 - a) * 6 : e;
-}
-function D(e, s) {
-  switch (s) {
-    case "hex":
-      return C(e);
-    case "hsl":
-      return e.a < 1 ? `hsla(${e.h}, ${e.s}%, ${e.l}%, ${e.a})` : `hsl(${e.h}, ${e.s}%, ${e.l}%)`;
-    case "rgba":
-      return Ee(e);
-  }
-}
-function y(e) {
-  const s = e.trim();
-  if (!s) return null;
-  if (s.startsWith("#")) {
-    const n = s.slice(1);
-    return !/^[0-9a-fA-F]{3,8}$/.test(n) || ![3, 4, 6, 8].includes(n.length) ? null : Te(s);
-  }
-  const r = s.match(
-    /^hsla?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+))?\s*\)$/
-  );
-  if (r)
-    return {
-      h: Math.round(parseFloat(r[1])) % 360,
-      s: Math.round(parseFloat(r[2])),
-      l: Math.round(parseFloat(r[3])),
-      a: r[4] !== void 0 ? parseFloat(r[4]) : 1
-    };
-  const a = s.match(
-    /^rgba?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+))?\s*\)$/
-  );
-  if (a) {
-    const n = parseFloat(a[1]) / 255, d = parseFloat(a[2]) / 255, c = parseFloat(a[3]) / 255, m = a[4] !== void 0 ? parseFloat(a[4]) : 1;
-    return ne(n, d, c, m);
-  }
-  return null;
-}
-function ee(e) {
-  const { r: s, g: r, b: a } = W(e), n = (d) => d <= 0.03928 ? d / 12.92 : Math.pow((d + 0.055) / 1.055, 2.4);
-  return 0.2126 * n(s) + 0.7152 * n(r) + 0.0722 * n(a);
-}
-function Ie(e, s) {
-  const r = ee(e), a = ee(s), n = Math.max(r, a), d = Math.min(r, a);
-  return Math.round((n + 0.05) / (d + 0.05) * 100) / 100;
-}
-function Le(e) {
-  return e >= 4.5;
-}
-function Re(e) {
-  return e >= 7;
-}
-const He = [
-  { name: "Pink 500", hex: "#e91e63", textColor: "#ffffff" },
-  { name: "Black", hex: "#000000", textColor: "#ffffff" },
-  { name: "Blue 500", hex: "#2196f3", textColor: "#ffffff" },
-  { name: "Blue 900", hex: "#0d47a1", textColor: "#ffffff" },
-  { name: "Blue Grey 500", hex: "#607d8b", textColor: "#ffffff" },
-  { name: "Blue Grey 800", hex: "#37474f", textColor: "#ffffff" },
-  { name: "Brown 500", hex: "#795548", textColor: "#ffffff" },
-  { name: "Deep Orange 500", hex: "#ff5722", textColor: "#ffffff" },
-  { name: "Deep Purple 500", hex: "#673ab7", textColor: "#ffffff" },
-  { name: "Green 500", hex: "#4caf50", textColor: "#ffffff" },
-  { name: "Green 900", hex: "#1b5e20", textColor: "#ffffff" },
-  { name: "Indigo 500", hex: "#3f51b5", textColor: "#ffffff" },
-  { name: "Indigo 900", hex: "#1a237e", textColor: "#ffffff" },
-  { name: "Pink 900", hex: "#880e4f", textColor: "#ffffff" },
-  { name: "Purple 500", hex: "#9c27b0", textColor: "#ffffff" },
-  { name: "Purple 900", hex: "#4a148c", textColor: "#ffffff" },
-  { name: "Red 500", hex: "#f44336", textColor: "#ffffff" },
-  { name: "Red 900", hex: "#b71c1c", textColor: "#ffffff" },
-  { name: "Teal 500", hex: "#009688", textColor: "#ffffff" },
-  { name: "Teal 900", hex: "#004d40", textColor: "#ffffff" },
-  { name: "Amber 500", hex: "#ffc107", textColor: "#000000" },
-  { name: "Cyan 500", hex: "#00bcd4", textColor: "#000000" },
-  { name: "Grey 500", hex: "#9e9e9e", textColor: "#000000" },
-  { name: "Light Blue 500", hex: "#03a9f4", textColor: "#000000" },
-  { name: "Light Green 500", hex: "#8bc34a", textColor: "#000000" },
-  { name: "Lime 500", hex: "#cddc39", textColor: "#000000" },
-  { name: "Orange 500", hex: "#ff9800", textColor: "#000000" },
-  { name: "Orange 900", hex: "#e65100", textColor: "#000000" },
-  { name: "White", hex: "#ffffff", textColor: "#000000" },
-  { name: "Yellow 500", hex: "#ffeb3b", textColor: "#000000" }
-], st = [
-  { name: "Blue 300", hex: "#70738c" },
-  { name: "Blue 500", hex: "#292e53" },
-  { name: "Blue 700", hex: "#1d213b" },
-  { name: "Violet 300", hex: "#9995ee" },
-  { name: "Violet 500", hex: "#6761e5" },
-  { name: "Violet 700", hex: "#4945a3" },
-  { name: "Purple 300", hex: "#ccaafa" },
-  { name: "Purple 500", hex: "#b380f8" },
-  { name: "Purple 700", hex: "#7f5bb0" },
-  { name: "Magenta 300", hex: "#ea7ffc" },
-  { name: "Magenta 500", hex: "#e040fb" },
-  { name: "Magenta 700", hex: "#9f2db2" },
-  { name: "Fuchsia 300", hex: "#fa76fc" },
-  { name: "Fuchsia 500", hex: "#f732fb" },
-  { name: "Fuchsia 700", hex: "#af24b2" },
-  { name: "Grey 300", hex: "#f9f6f3" },
-  { name: "Grey 500", hex: "#f6f1ed" },
-  { name: "Grey 700", hex: "#afaba8" }
-], u = 6, _e = se(
-  [
-    "ds:inline-flex ds:items-center ds:w-full",
-    "ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
-  ].join(" "),
-  {
-    variants: {
-      size: {
-        sm: "ds:h-8 ds:text-[length:var(--font-size-sm)] ds:ps-3 ds:pe-3",
-        md: "ds:h-[var(--min-target-size)] ds:text-[length:var(--font-size-base)] ds:ps-3 ds:pe-3",
-        lg: "ds:h-12 ds:text-[length:var(--font-size-lg)] ds:ps-4 ds:pe-4"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-), Fe = se(
-  [
-    "ds:relative ds:rounded-[var(--radius-sm)] ds:border-2 ds:cursor-pointer",
-    "ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "ds:hover:scale-110",
-    // The swatch background is the user-picked colour — set as a CSS custom
-    // property via inline `style` per 23-constraints §Runtime-computed
-    // dimensions (CSS custom property setter; the bg rule lives on the class).
-    "ds:bg-[var(--swatch-bg)]"
-  ].join(" "),
-  {
-    variants: {
-      selected: {
-        true: "ds:border-[var(--primary)] ds:shadow-[var(--shadow-md)]",
-        false: "ds:border-transparent"
-      },
-      // Swatch footprint. md/lg honour --min-target-size (44/48px) for touch.
-      // sm is a denser 28px swatch for toolbar/inline use — comfortably above
-      // the WCAG 2.5.8 (AA) 24px minimum, with the grid gap providing spacing.
-      // sm intentionally does NOT take the accessible-theme --min-target-size
-      // bump (48px) — a dense colour grid is opt-in and the full roving-tabindex
-      // keyboard path is the mitigation for the sub-AAA pointer target.
-      size: {
-        // sm = 28px: clears WCAG 2.5.8 (AA, 24px) but intentionally opts out of
-        // the accessible-theme 48px min-target bump — a conscious, signed-off
-        // trade-off (dense opt-in grid; keyboard roving-tabindex is the mitigation).
-        sm: "ds:min-w-7 ds:min-h-7",
-        md: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
-        lg: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]"
-      }
-    },
-    defaultVariants: { selected: !1, size: "md" }
-  }
-), Ve = [
-  "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
-  "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-  "ds:p-[var(--spacing-md)]"
-].join(" "), Oe = [
-  "ds:bg-[image:repeating-conic-gradient(var(--color-grey-700)_0%_25%,transparent_0%_50%)]",
-  "ds:bg-[size:8px_8px]"
-].join(" "), Be = [
-  "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-  "ds:p-[var(--spacing-sm)]"
-].join(" "), Ge = [
-  "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-  "ds:p-[var(--spacing-xs)]"
-].join(" "), je = [
-  "ds:z-[var(--z-popover)] ds:rounded-[var(--radius-md)]",
-  "ds:border ds:border-[color:var(--border)] ds:bg-[var(--background)] ds:shadow-[var(--shadow-lg)]",
-  "ds:w-72",
-  "ds:data-[state=open]:animate-in ds:data-[state=open]:fade-in-0 ds:data-[state=open]:zoom-in-95",
-  "ds:data-[state=closed]:animate-out ds:data-[state=closed]:fade-out-0 ds:data-[state=closed]:zoom-out-95",
-  "ds:data-[side=bottom]:slide-in-from-top-2 ds:data-[side=top]:slide-in-from-bottom-2",
-  "ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2"
-].join(" "), De = [
-  "ds:w-full ds:rounded-[var(--radius-sm)] ds:border ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:text-[length:var(--font-size-sm)]",
-  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
-  "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
-  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
-].join(" "), oe = "ds:[&>span:first-child]:bg-transparent ds:[&>span:first-child>span]:bg-transparent", Ke = ye(
-  (e, s) => {
-    const {
-      value: r,
-      defaultValue: a,
-      onChange: n,
-      format: d = "hex",
-      allowOpacity: c = !1,
-      palette: m,
-      against: w,
-      size: x = "md",
-      disabled: ie = !1,
-      variant: de = "inline",
-      compact: M = !0,
-      className: U
-    } = e, { t: g } = Pe(), P = Se(), le = $e(), $ = P.id || le, v = P.disabled || ie, E = r !== void 0, [X, ce] = z(() => {
-      const t = r ?? a;
-      if (t) {
-        const i = y(t);
-        if (i) return i;
-      }
-      return { h: 0, s: 100, l: 50, a: 1 };
-    }), o = T(() => {
-      if (E && r) {
-        const t = y(r);
-        if (t) return t;
-      }
-      return X;
-    }, [E, r, X]), b = Ne(
-      (t) => {
-        const i = c ? t : { ...t, a: 1 };
-        E || ce(i), n == null || n(D(i, d));
-      },
-      [c, d, E, n]
-    ), [Y, _] = z(() => C(o)), [fe, I] = z(!1), N = G(void 0), F = G(o);
-    F.current = o, Z(() => {
-      _(C(o)), I(!1), N.current !== void 0 && (clearTimeout(N.current), N.current = void 0);
-    }, [o]), Z(() => () => {
-      N.current !== void 0 && clearTimeout(N.current);
-    }, []);
-    const ue = () => {
-      const t = y(Y);
-      t ? (I(!1), b(t)) : (I(!0), N.current = setTimeout(() => {
-        N.current = void 0, I(!1), _(C(F.current));
-      }, 800));
-    }, S = T(() => m ? m.map(
-      (t) => typeof t == "string" ? { name: t.toUpperCase(), hex: t } : t
-    ) : He, [m]), he = C(o), V = T(
-      () => S.map((t) => {
-        const i = y(t.hex);
-        return i ? C(i).toLowerCase() : null;
-      }),
-      [S]
-    ).findIndex(
-      (t) => t !== null && t === he.toLowerCase()
-    ), L = G(null), [p, q] = z(
-      V >= 0 ? V : 0
-    ), me = (t) => {
-      var f;
-      const i = (f = L.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
-      i != null && i[t] && (i[t].focus(), q(t));
-    }, ge = (t) => {
-      if (v) return;
-      const i = S.length;
-      let f = p;
-      const k = (typeof window < "u" && L.current ? window.getComputedStyle(L.current).direction === "rtl" : !1) ? -1 : 1;
-      switch (t.key) {
-        case "ArrowRight":
-          f = (p + k + i) % i;
-          break;
-        case "ArrowLeft":
-          f = (p - k + i) % i;
-          break;
-        case "ArrowDown":
-          f = Math.min(p + u, i - 1);
-          break;
-        case "ArrowUp":
-          f = Math.max(p - u, 0);
-          break;
-        case "Home":
-          f = Math.floor(p / u) * u;
-          break;
-        case "End":
-          f = Math.min(
-            Math.floor(p / u) * u + u - 1,
-            i - 1
-          );
-          break;
-        case "PageUp":
-          f = p % u;
-          break;
-        case "PageDown": {
-          const A = Math.floor((i - 1) / u) * u;
-          f = Math.min(A + p % u, i - 1);
-          break;
-        }
-        case "Enter":
-        case " ": {
-          t.preventDefault();
-          const A = y(S[p].hex);
-          A && b(A);
-          return;
-        }
-        default:
-          return;
-      }
-      t.preventDefault(), me(f);
-    }, [pe, xe] = z(!1), ve = T(
-      () => ({
-        getValue: () => C(F.current),
-        setValue: (t) => {
-          const i = y(t);
-          i && b(i);
-        }
-      }),
-      [b]
-    );
-    Ae(ze, ve, $);
-    const R = T(() => {
-      if (!w) return null;
-      const t = y(w);
-      if (!t) return null;
-      const i = Ie(o, t);
-      return { ratio: i, aa: Le(i), aaa: Re(i) };
-    }, [w, o]), be = (
-      // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- inner gridcells are individually focusable via roving tabindex
-      /* @__PURE__ */ l(
-        "div",
-        {
-          ref: L,
-          role: "grid",
-          "aria-label": g("inputs.colorPicker.paletteLabel", "Colour palette"),
-          onKeyDown: ge,
-          className: "ds:grid ds:grid-cols-6 ds:gap-[var(--spacing-xs)]",
-          children: S.map((t, i) => {
-            const f = Math.floor(i / u) * u;
-            return i === f ? /* @__PURE__ */ l("div", { role: "row", className: "ds:contents", children: S.slice(f, f + u).map((k, A) => {
-              const O = f + A, B = O === V;
-              return (
-                // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- parent grid handles keyboard navigation via onKeyDown
-                /* @__PURE__ */ l(
-                  "div",
-                  {
-                    role: "gridcell",
-                    "aria-selected": B,
-                    "aria-label": g("inputs.colorPicker.swatchLabel", {
-                      name: k.name,
-                      hex: k.hex
-                    }),
-                    tabIndex: O === p ? 0 : -1,
-                    onClick: () => {
-                      if (v) return;
-                      const Q = y(k.hex);
-                      Q && b(Q), q(O);
-                    },
-                    className: Fe({ selected: B, size: x }),
-                    style: { "--swatch-bg": k.hex },
-                    children: B ? /* @__PURE__ */ l(
-                      re,
-                      {
-                        "aria-hidden": "true",
-                        className: "ds:absolute ds:inset-0 ds:m-auto ds:size-4 ds:text-[var(--background)] ds:mix-blend-difference"
-                      }
-                    ) : null
-                  },
-                  k.hex
-                )
-              );
-            }) }, i) : null;
-          })
-        }
-      )
-    ), Ce = M ? null : /* @__PURE__ */ h(ke, { children: [
-      /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-        /* @__PURE__ */ l(
-          "label",
-          {
-            htmlFor: `${$}-hex`,
-            className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]",
-            children: g("inputs.colorPicker.hex", "Hex")
-          }
-        ),
-        /* @__PURE__ */ l("bdi", { dir: "ltr", children: /* @__PURE__ */ l(
-          "input",
-          {
-            id: `${$}-hex`,
-            type: "text",
-            value: Y,
-            disabled: v,
-            onChange: (t) => _(t.target.value),
-            onBlur: ue,
-            className: `${De} ${fe ? "ds:border-[var(--destructive)]" : "ds:border-[color:var(--border)]"}`
-          }
-        ) })
-      ] }),
-      /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
-        /* @__PURE__ */ l(
-          K,
-          {
-            label: g("inputs.colorPicker.hue", "Hue"),
-            gradient: "linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))",
-            min: 0,
-            max: 360,
-            value: o.h,
-            onChange: (t) => b({ ...o, h: t }),
-            formatValue: (t) => `H ${t}°`,
-            disabled: v
-          }
-        ),
-        /* @__PURE__ */ l(
-          K,
-          {
-            label: g("inputs.colorPicker.saturation", "Saturation"),
-            gradient: `linear-gradient(to right, hsl(${o.h},0%,${o.l}%), hsl(${o.h},100%,${o.l}%))`,
-            min: 0,
-            max: 100,
-            value: o.s,
-            onChange: (t) => b({ ...o, s: t }),
-            formatValue: (t) => `S ${t}%`,
-            disabled: v
-          }
-        ),
-        /* @__PURE__ */ l(
-          K,
-          {
-            label: g("inputs.colorPicker.lightness", "Lightness"),
-            gradient: `linear-gradient(to right, hsl(${o.h},${o.s}%,0%), hsl(${o.h},${o.s}%,50%), hsl(${o.h},${o.s}%,100%))`,
-            min: 0,
-            max: 100,
-            value: o.l,
-            onChange: (t) => b({ ...o, l: t }),
-            formatValue: (t) => `L ${t}%`,
-            disabled: v
-          }
-        ),
-        c ? /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ l("label", { className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]", children: g("inputs.colorPicker.opacity", "Opacity") }),
-          /* @__PURE__ */ h("div", { className: "ds:relative", children: [
-            /* @__PURE__ */ l(
-              "div",
-              {
-                className: `ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ${Oe}`,
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ l(
-              "div",
-              {
-                className: "ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ds:bg-[image:var(--opacity-gradient)]",
-                style: {
-                  "--opacity-gradient": `linear-gradient(to right, hsla(${o.h},${o.s}%,${o.l}%,0), hsl(${o.h},${o.s}%,${o.l}%))`
-                },
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ l(
-              ae,
-              {
-                min: 0,
-                max: 100,
-                step: 1,
-                value: [Math.round(o.a * 100)],
-                onValueChange: ([t]) => b({ ...o, a: t / 100 }),
-                "aria-label": g("inputs.colorPicker.opacity", "Opacity"),
-                formatValue: (t) => `${t}%`,
-                disabled: v,
-                className: oe
-              }
-            )
-          ] })
-        ] }) : null
-      ] }),
-      R ? /* @__PURE__ */ h(
-        "div",
-        {
-          className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:text-[length:var(--font-size-sm)]",
-          role: "status",
-          "aria-live": "polite",
-          children: [
-            /* @__PURE__ */ l("span", { className: "ds:tabular-nums", children: g("inputs.colorPicker.contrastRatio", {
-              ratio: R.ratio.toFixed(1)
-            }) }),
-            /* @__PURE__ */ l(te, { level: "AA", passes: R.aa, t: g }),
-            /* @__PURE__ */ l(te, { level: "AAA", passes: R.aaa, t: g })
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ h("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
-        /* @__PURE__ */ l(
-          "div",
-          {
-            className: "ds:size-8 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--swatch-bg)]",
-            style: { "--swatch-bg": C(o) },
-            "aria-hidden": "true"
-          }
-        ),
-        /* @__PURE__ */ l("span", { className: "ds:text-[length:var(--font-size-sm)] ds:text-[var(--muted-foreground)] ds:tabular-nums", children: D(o, d) })
-      ] })
-    ] }), J = /* @__PURE__ */ h(
-      "div",
-      {
-        className: M ? x === "sm" ? Ge : Be : Ve,
-        children: [
-          be,
-          Ce
-        ]
-      }
-    );
-    return de === "inline" ? /* @__PURE__ */ l(
-      "div",
-      {
-        ref: s,
-        id: $,
-        className: U,
-        "aria-describedby": P.describedBy || void 0,
-        "aria-invalid": P.invalid || void 0,
-        "aria-disabled": v || void 0,
-        "data-component": "color-picker",
-        "data-component-id": $,
-        "data-testid": "color-picker",
-        children: J
-      }
-    ) : /* @__PURE__ */ h(H.Root, { open: pe, onOpenChange: xe, children: [
-      /* @__PURE__ */ l(H.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
-        "button",
-        {
-          ref: s,
-          type: "button",
-          id: $,
-          "aria-describedby": P.describedBy || void 0,
-          "aria-invalid": P.invalid || void 0,
-          "aria-label": M ? g("inputs.colorPicker.triggerLabel", "Choose colour") : void 0,
-          className: _e({ size: x, className: U }),
-          "data-component": "color-picker",
-          "data-component-id": $,
-          "data-testid": "color-picker-trigger",
-          children: [
-            /* @__PURE__ */ l(
-              "span",
-              {
-                className: `ds:inline-block ds:size-5 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:shrink-0 ds:bg-[var(--swatch-bg)]${M ? "" : " ds:me-[var(--spacing-sm)]"}`,
-                "aria-hidden": "true",
-                style: { "--swatch-bg": C(o) }
-              }
-            ),
-            M ? null : /* @__PURE__ */ l("span", { className: "ds:text-start ds:truncate ds:tabular-nums", children: D(o, d) })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ l(H.Portal, { children: /* @__PURE__ */ l(
-        H.Content,
-        {
-          sideOffset: 4,
-          align: "start",
-          className: je,
-          children: J
-        }
-      ) })
-    ] });
-  }
-);
-Ke.displayName = "ColorPicker";
-function te({
-  level: e,
-  passes: s,
-  t: r
-}) {
-  return /* @__PURE__ */ h("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-    /* @__PURE__ */ l(
-      "abbr",
-      {
-        title: `Web Content Accessibility Guidelines Level ${e}`,
-        className: "ds:no-underline ds:font-medium",
-        children: e
-      }
-    ),
-    s ? /* @__PURE__ */ l(
-      re,
-      {
-        "aria-hidden": "true",
-        className: "ds:size-4 ds:text-[var(--success)]"
-      }
-    ) : /* @__PURE__ */ l(
-      Me,
-      {
-        "aria-hidden": "true",
-        className: "ds:size-4 ds:text-[var(--destructive)]"
-      }
-    ),
-    /* @__PURE__ */ l("span", { className: "ds:sr-only", children: s ? r("inputs.colorPicker.contrastPass", "Pass") : r("inputs.colorPicker.contrastFail", "Fail") })
-  ] });
-}
-function K({
-  label: e,
-  gradient: s,
-  min: r,
-  max: a,
-  value: n,
-  onChange: d,
-  formatValue: c,
-  disabled: m
-}) {
-  return /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-    /* @__PURE__ */ l("label", { className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]", children: e }),
-    /* @__PURE__ */ h("div", { className: "ds:relative", children: [
-      /* @__PURE__ */ l(
-        "div",
-        {
-          className: "ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ds:bg-[image:var(--slider-gradient)]",
-          style: { "--slider-gradient": s },
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ l(
-        ae,
-        {
-          min: r,
-          max: a,
-          step: 1,
-          value: [n],
-          onValueChange: ([w]) => d(w),
-          "aria-label": e,
-          formatValue: c,
-          disabled: m,
-          className: oe
-        }
-      )
-    ] })
-  ] });
-}
-export {
-  He as A,
-  st as B,
-  Ke as C
-};
-//# sourceMappingURL=color-picker-C_fZl6sA.js.map