@alfadocs/ui-kit-debug 0.1.8 → 0.2.0

package/dist/_chunks/{color-picker-e9PmpaGH.js → color-picker-CTIcHlDF.js}

@@ -1,73 +1,109 @@
 import { jsx as d, jsxs as h, Fragment as we } from "react/jsx-runtime";
-import { forwardRef as $e, useId as Ne, useState as P, useMemo as F, useCallback as ke, useRef as H, useEffect as ee } from "react";
-import * as I from "@radix-ui/react-popover";
-import { c as te } from "./index-D2ZczOXr.js";
-import { useTranslation as ye } from "react-i18next";
-import { u as Pe } from "./form-field-context-94LwgYTQ.js";
-import { S as re } from "./slider-DjyRt3Mp.js";
+import { forwardRef as $e, useId as Ne, useState as M, useMemo as z, useCallback as ye, useRef as V, useEffect as ee } from "react";
+import * as E from "@radix-ui/react-popover";
+import { c as ae } from "./index-D2ZczOXr.js";
+import { useTranslation as Pe } from "react-i18next";
+import { u as Ae } from "./form-field-context-B3APVHKx.js";
+import { S as re } from "./slider-BT2bZWsy.js";
+import { u as Me } from "./registry-C9nwlNyL.js";
 import { C as ne } from "./check-DPdL_Sm7.js";
-import { X as Ae } from "./x-CCcI3eJp.js";
-function V(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, t = parseInt(s.slice(2, 4), 16) / 255, n = parseInt(s.slice(4, 6), 16) / 255, i = s.length === 8 ? parseInt(s.slice(6, 8), 16) / 255 : 1;
-  return oe(r, t, n, i);
+import { X as Se } from "./x-CCcI3eJp.js";
+const Te = {
+  id: "color-picker",
+  capabilities: ["pick"],
+  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 }",
+      descriptionKey: "ui.agent.colorPicker.actions.setValue",
+      description: "Set the picked colour from a hex string.",
+      invoke: (e, t) => {
+        e.setValue(t.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 G(e) {
+  let t = e.startsWith("#") ? e.slice(1) : e;
+  (t.length === 3 || t.length === 4) && (t = t.split("").map((c) => c + c).join(""));
+  const r = parseInt(t.slice(0, 2), 16) / 255, a = parseInt(t.slice(2, 4), 16) / 255, n = parseInt(t.slice(4, 6), 16) / 255, i = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+  return oe(r, a, n, i);
 }
-function oe(e, s, r, t) {
-  const n = Math.max(e, s, r), i = Math.min(e, s, r), c = (n + i) / 2;
-  let m = 0, p = 0;
+function oe(e, t, r, a) {
+  const n = Math.max(e, t, r), i = Math.min(e, t, r), c = (n + i) / 2;
+  let m = 0, b = 0;
   if (n !== i) {
-    const b = n - i;
-    p = c > 0.5 ? b / (2 - n - i) : b / (n + i), n === e ? m = ((s - r) / b + (s < r ? 6 : 0)) / 6 : n === s ? m = ((r - e) / b + 2) / 6 : m = ((e - s) / b + 4) / 6;
+    const k = n - i;
+    b = c > 0.5 ? k / (2 - n - i) : k / (n + i), n === e ? m = ((t - r) / k + (t < r ? 6 : 0)) / 6 : n === t ? m = ((r - e) / k + 2) / 6 : m = ((e - t) / k + 4) / 6;
   }
   return {
     h: Math.round(m * 360),
-    s: Math.round(p * 100),
+    s: Math.round(b * 100),
     l: Math.round(c * 100),
-    a: Math.round(t * 100) / 100
+    a: Math.round(a * 100) / 100
   };
 }
-function $(e) {
-  const { r: s, g: r, b: t } = G(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), i = `#${n(s)}${n(r)}${n(t)}`;
+function C(e) {
+  const { r: t, g: r, b: a } = D(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), i = `#${n(t)}${n(r)}${n(a)}`;
   return e.a < 1 ? `${i}${n(e.a)}` : i;
 }
-function Me(e) {
-  const { r: s, g: r, b: t } = G(e), n = Math.round(s * 255), i = Math.round(r * 255), c = Math.round(t * 255);
+function Ie(e) {
+  const { r: t, g: r, b: a } = D(e), n = Math.round(t * 255), i = Math.round(r * 255), c = Math.round(a * 255);
   return e.a < 1 ? `rgba(${n}, ${i}, ${c}, ${e.a})` : `rgba(${n}, ${i}, ${c}, 1)`;
 }
-function G(e) {
-  const s = e.h / 360, r = e.s / 100, t = e.l / 100;
+function D(e) {
+  const t = e.h / 360, r = e.s / 100, a = e.l / 100;
   if (r === 0)
-    return { r: t, g: t, b: t };
-  const n = t < 0.5 ? t * (1 + r) : t + r - t * r, i = 2 * t - n;
+    return { r: a, g: a, b: a };
+  const n = a < 0.5 ? a * (1 + r) : a + r - a * r, i = 2 * a - n;
   return {
-    r: _(i, n, s + 1 / 3),
-    g: _(i, n, s),
-    b: _(i, n, s - 1 / 3)
+    r: _(i, n, t + 1 / 3),
+    g: _(i, n, t),
+    b: _(i, n, t - 1 / 3)
   };
 }
-function _(e, s, r) {
-  let t = r;
-  return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? e + (s - e) * 6 * t : t < 1 / 2 ? s : t < 2 / 3 ? e + (s - e) * (2 / 3 - t) * 6 : e;
+function _(e, t, r) {
+  let a = r;
+  return a < 0 && (a += 1), a > 1 && (a -= 1), a < 1 / 6 ? e + (t - e) * 6 * a : a < 1 / 2 ? t : a < 2 / 3 ? e + (t - e) * (2 / 3 - a) * 6 : e;
 }
-function B(e, s) {
-  switch (s) {
+function B(e, t) {
+  switch (t) {
     case "hex":
-      return $(e);
+      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 Me(e);
+      return Ie(e);
   }
 }
-function L(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 : V(s);
+function S(e) {
+  const t = e.trim();
+  if (!t) return null;
+  if (t.startsWith("#")) {
+    const n = t.slice(1);
+    return !/^[0-9a-fA-F]{3,8}$/.test(n) || ![3, 4, 6, 8].includes(n.length) ? null : G(t);
   }
-  const r = s.match(
+  const r = t.match(
     /^hsla?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
   if (r)
@@ -77,30 +113,30 @@ function L(e) {
       l: Math.round(parseFloat(r[3])),
       a: r[4] !== void 0 ? parseFloat(r[4]) : 1
     };
-  const t = s.match(
+  const a = t.match(
     /^rgba?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
-  if (t) {
-    const n = parseFloat(t[1]) / 255, i = parseFloat(t[2]) / 255, c = parseFloat(t[3]) / 255, m = t[4] !== void 0 ? parseFloat(t[4]) : 1;
+  if (a) {
+    const n = parseFloat(a[1]) / 255, i = parseFloat(a[2]) / 255, c = parseFloat(a[3]) / 255, m = a[4] !== void 0 ? parseFloat(a[4]) : 1;
     return oe(n, i, c, m);
   }
   return null;
 }
-function se(e) {
-  const { r: s, g: r, b: t } = G(e), n = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
-  return 0.2126 * n(s) + 0.7152 * n(r) + 0.0722 * n(t);
+function te(e) {
+  const { r: t, g: r, b: a } = D(e), n = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
+  return 0.2126 * n(t) + 0.7152 * n(r) + 0.0722 * n(a);
 }
-function Se(e, s) {
-  const r = se(e), t = se(s), n = Math.max(r, t), i = Math.min(r, t);
+function Le(e, t) {
+  const r = te(e), a = te(t), n = Math.max(r, a), i = Math.min(r, a);
   return Math.round((n + 0.05) / (i + 0.05) * 100) / 100;
 }
-function Te(e) {
+function ze(e) {
   return e >= 4.5;
 }
-function ze(e) {
+function Ee(e) {
   return e >= 7;
 }
-const Ie = [
+const Re = [
   { name: "Pink 500", hex: "#e91e63", textColor: "#ffffff" },
   { name: "Black", hex: "#000000", textColor: "#ffffff" },
   { name: "Blue 500", hex: "#2196f3", textColor: "#ffffff" },
@@ -131,7 +167,7 @@ const Ie = [
   { name: "Orange 900", hex: "#e65100", textColor: "#000000" },
   { name: "White", hex: "#ffffff", textColor: "#000000" },
   { name: "Yellow 500", hex: "#ffeb3b", textColor: "#000000" }
-], Ye = [
+], Ze = [
   { name: "Blue 300", hex: "#70738c" },
   { name: "Blue 500", hex: "#292e53" },
   { name: "Blue 700", hex: "#1d213b" },
@@ -150,7 +186,7 @@ const Ie = [
   { name: "Grey 300", hex: "#f9f6f3" },
   { name: "Grey 500", hex: "#f6f1ed" },
   { name: "Grey 700", hex: "#afaba8" }
-], u = 6, Le = te(
+], u = 6, Fe = ae(
   [
     "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)]",
@@ -169,7 +205,7 @@ const Ie = [
     },
     defaultVariants: { size: "md" }
   }
-), Ee = te(
+), He = ae(
   [
     "ds:relative ds:rounded-[var(--radius-sm)] ds:border-2 ds:cursor-pointer",
     "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
@@ -191,17 +227,17 @@ const Ie = [
     },
     defaultVariants: { selected: !1 }
   }
-), Re = [
+), 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(" "), Fe = [
+].join(" "), _e = [
   "ds:bg-[image:repeating-conic-gradient(var(--color-grey-700)_0%_25%,transparent_0%_50%)]",
   "ds:bg-[size:8px_8px]"
-].join(" "), He = [
+].join(" "), Be = [
   "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
   "ds:p-[var(--spacing-sm)]"
-].join(" "), _e = [
+].join(" "), Oe = [
   "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",
@@ -209,157 +245,193 @@ const Ie = [
   "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(" "), Be = [
+].join(" "), Ge = [
   "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-[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(" "), ie = "ds:[&>span:first-child]:bg-transparent ds:[&>span:first-child>span]:bg-transparent", Oe = $e(
-  (e, s) => {
+].join(" "), ie = "ds:[&>span:first-child]:bg-transparent ds:[&>span:first-child>span]:bg-transparent", De = $e(
+  (e, t) => {
     const {
       value: r,
-      defaultValue: t,
+      defaultValue: a,
       onChange: n,
       format: i = "hex",
       allowOpacity: c = !1,
       palette: m,
-      against: p,
-      size: b = "md",
+      against: b,
+      size: k = "md",
       disabled: de = !1,
       variant: le = "inline",
-      compact: A = !0,
-      className: D
-    } = e, { t: g } = ye(), N = Pe(), ce = Ne(), M = N.id || ce, v = N.disabled || de, S = r !== void 0, [j, fe] = P(() => {
-      const a = r ?? t;
-      if (a) {
-        const l = L(a);
+      compact: P = !0,
+      className: j
+    } = e, { t: g } = Pe(), N = Ae(), ce = Ne(), w = N.id || ce, x = N.disabled || de, T = r !== void 0, [K, fe] = M(() => {
+      const s = r ?? a;
+      if (s) {
+        const l = S(s);
         if (l) return l;
       }
       return { h: 0, s: 100, l: 50, a: 1 };
-    }), o = F(() => {
-      if (S && r) {
-        const a = L(r);
-        if (a) return a;
+    }), o = z(() => {
+      if (T && r) {
+        const s = S(r);
+        if (s) return s;
       }
-      return j;
-    }, [S, r, j]), C = ke(
-      (a) => {
-        const l = c ? a : { ...a, a: 1 };
-        S || fe(l), n == null || n(B(l, i));
+      return K;
+    }, [T, r, K]), v = ye(
+      (s) => {
+        const l = c ? s : { ...s, a: 1 };
+        T || fe(l), n == null || n(B(l, i));
       },
-      [c, i, S, n]
-    ), [W, E] = P(() => $(o)), [ue, T] = P(!1), w = H(void 0), U = H(o);
-    U.current = o, ee(() => {
-      E($(o)), T(!1), w.current !== void 0 && (clearTimeout(w.current), w.current = void 0);
+      [c, i, T, n]
+    ), [W, R] = M(() => C(o)), [ue, I] = M(!1), $ = V(void 0), F = V(o);
+    F.current = o, ee(() => {
+      R(C(o)), I(!1), $.current !== void 0 && (clearTimeout($.current), $.current = void 0);
     }, [o]), ee(() => () => {
-      w.current !== void 0 && clearTimeout(w.current);
+      $.current !== void 0 && clearTimeout($.current);
     }, []);
     const he = () => {
-      const a = L(W);
-      a ? (T(!1), C(a)) : (T(!0), w.current = setTimeout(() => {
-        w.current = void 0, T(!1), E($(U.current));
+      const s = S(W);
+      s ? (I(!1), v(s)) : (I(!0), $.current = setTimeout(() => {
+        $.current = void 0, I(!1), R(C(F.current));
       }, 800));
-    }, y = F(() => m ? m.map(
-      (a) => typeof a == "string" ? { name: a.toUpperCase(), hex: a } : a
-    ) : Ie, [m]), K = $(o), X = y.findIndex(
-      (a) => a.hex.toLowerCase() === K.toLowerCase()
-    ), Y = H(null), [x, q] = P(
+    }, A = z(() => m ? m.map(
+      (s) => typeof s == "string" ? { name: s.toUpperCase(), hex: s } : s
+    ) : Re, [m]), U = C(o), X = A.findIndex(
+      (s) => s.hex.toLowerCase() === U.toLowerCase()
+    ), Y = V(null), [p, q] = M(
       X >= 0 ? X : 0
-    ), me = (a) => {
+    ), me = (s) => {
       var f;
       const l = (f = Y.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
-      l != null && l[a] && (l[a].focus(), q(a));
-    }, ge = (a) => {
-      if (v) return;
-      const l = y.length;
-      let f = x;
-      switch (a.key) {
+      l != null && l[s] && (l[s].focus(), q(s));
+    }, ge = (s) => {
+      if (x) return;
+      const l = A.length;
+      let f = p;
+      switch (s.key) {
         case "ArrowRight":
-          f = (x + 1) % l;
+          f = (p + 1) % l;
           break;
         case "ArrowLeft":
-          f = (x - 1 + l) % l;
+          f = (p - 1 + l) % l;
           break;
         case "ArrowDown":
-          f = Math.min(x + u, l - 1);
+          f = Math.min(p + u, l - 1);
           break;
         case "ArrowUp":
-          f = Math.max(x - u, 0);
+          f = Math.max(p - u, 0);
           break;
         case "Home":
-          f = Math.floor(x / u) * u;
+          f = Math.floor(p / u) * u;
           break;
         case "End":
-          f = Math.min(Math.floor(x / u) * u + u - 1, l - 1);
+          f = Math.min(
+            Math.floor(p / u) * u + u - 1,
+            l - 1
+          );
           break;
         case "PageUp":
-          f = x % u;
+          f = p % u;
           break;
         case "PageDown": {
           const Q = Math.floor((l - 1) / u) * u;
-          f = Math.min(Q + x % u, l - 1);
+          f = Math.min(Q + p % u, l - 1);
           break;
         }
         case "Enter":
         case " ":
-          a.preventDefault(), C(V(y[x].hex));
+          s.preventDefault(), v(G(A[p].hex));
           return;
         default:
           return;
       }
-      a.preventDefault(), me(f);
-    }, [xe, ve] = P(!1), z = F(() => {
-      if (!p) return null;
-      const a = L(p);
-      if (!a) return null;
-      const l = Se(o, a);
-      return { ratio: l, aa: Te(l), aaa: ze(l) };
-    }, [p, o]), pe = /* @__PURE__ */ d(
-      "div",
-      {
-        ref: Y,
-        role: "grid",
-        "aria-label": g("ui.inputs.colorPicker.paletteLabel", "Colour swatches"),
-        onKeyDown: ge,
-        className: "ds:grid ds:grid-cols-6 ds:gap-[var(--spacing-xs)]",
-        children: y.map((a, l) => {
-          const f = Math.floor(l / u) * u;
-          return l === f ? /* @__PURE__ */ d("div", { role: "row", className: "ds:contents", children: y.slice(f, f + u).map((k, Ce) => {
-            const Z = f + Ce, R = k.hex.toLowerCase() === K.toLowerCase();
-            return /* @__PURE__ */ d(
-              "div",
-              {
-                role: "gridcell",
-                "aria-selected": R,
-                "aria-label": g("ui.inputs.colorPicker.swatchLabel", { name: k.name, hex: k.hex }),
-                tabIndex: Z === x ? 0 : -1,
-                onClick: () => {
-                  v || (C(V(k.hex)), q(Z));
-                },
-                className: Ee({ selected: R }),
-                style: { "--swatch-bg": k.hex },
-                children: R ? /* @__PURE__ */ d(ne, { "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
-            );
-          }) }, l) : null;
-        })
-      }
-    ), be = A ? null : /* @__PURE__ */ h(we, { children: [
+      s.preventDefault(), me(f);
+    }, [pe, xe] = M(!1), ve = z(
+      () => ({
+        getValue: () => C(F.current),
+        setValue: (s) => {
+          const l = S(s);
+          l && v(l);
+        }
+      }),
+      [v]
+    );
+    Me(Te, ve, w);
+    const L = z(() => {
+      if (!b) return null;
+      const s = S(b);
+      if (!s) return null;
+      const l = Le(o, s);
+      return { ratio: l, aa: ze(l), aaa: Ee(l) };
+    }, [b, o]), be = (
+      // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- inner gridcells are individually focusable via roving tabindex
+      /* @__PURE__ */ d(
+        "div",
+        {
+          ref: Y,
+          role: "grid",
+          "aria-label": g("ui.inputs.colorPicker.paletteLabel", "Colour swatches"),
+          onKeyDown: ge,
+          className: "ds:grid ds:grid-cols-6 ds:gap-[var(--spacing-xs)]",
+          children: A.map((s, l) => {
+            const f = Math.floor(l / u) * u;
+            return l === f ? /* @__PURE__ */ d("div", { role: "row", className: "ds:contents", children: A.slice(f, f + u).map((y, ke) => {
+              const Z = f + ke, H = y.hex.toLowerCase() === U.toLowerCase();
+              return (
+                // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- parent grid handles keyboard navigation via onKeyDown
+                /* @__PURE__ */ d(
+                  "div",
+                  {
+                    role: "gridcell",
+                    "aria-selected": H,
+                    "aria-label": g("ui.inputs.colorPicker.swatchLabel", {
+                      name: y.name,
+                      hex: y.hex
+                    }),
+                    tabIndex: Z === p ? 0 : -1,
+                    onClick: () => {
+                      x || (v(G(y.hex)), q(Z));
+                    },
+                    className: He({ selected: H }),
+                    style: { "--swatch-bg": y.hex },
+                    children: H ? /* @__PURE__ */ d(
+                      ne,
+                      {
+                        "aria-hidden": "true",
+                        className: "ds:absolute ds:inset-0 ds:m-auto ds:size-4 ds:text-[var(--background)] ds:mix-blend-difference"
+                      }
+                    ) : null
+                  },
+                  y.hex
+                )
+              );
+            }) }, l) : null;
+          })
+        }
+      )
+    ), Ce = P ? null : /* @__PURE__ */ h(we, { children: [
       /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-        /* @__PURE__ */ d("label", { htmlFor: `${M}-hex`, className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]", children: g("ui.inputs.colorPicker.hex", "Hex") }),
+        /* @__PURE__ */ d(
+          "label",
+          {
+            htmlFor: `${w}-hex`,
+            className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]",
+            children: g("ui.inputs.colorPicker.hex", "Hex")
+          }
+        ),
         /* @__PURE__ */ d("bdi", { dir: "ltr", children: /* @__PURE__ */ d(
           "input",
           {
-            id: `${M}-hex`,
+            id: `${w}-hex`,
             type: "text",
             value: W,
-            disabled: v,
-            onChange: (a) => E(a.target.value),
+            disabled: x,
+            onChange: (s) => R(s.target.value),
             onBlur: he,
-            className: `${Be} ${ue ? "ds:border-[var(--destructive)]" : "ds:border-[color:var(--border)]"}`
+            className: `${Ge} ${ue ? "ds:border-[var(--destructive)]" : "ds:border-[color:var(--border)]"}`
           }
         ) })
       ] }),
@@ -372,9 +444,9 @@ const Ie = [
             min: 0,
             max: 360,
             value: o.h,
-            onChange: (a) => C({ ...o, h: a }),
-            formatValue: (a) => `H ${a}°`,
-            disabled: v
+            onChange: (s) => v({ ...o, h: s }),
+            formatValue: (s) => `H ${s}°`,
+            disabled: x
           }
         ),
         /* @__PURE__ */ d(
@@ -385,9 +457,9 @@ const Ie = [
             min: 0,
             max: 100,
             value: o.s,
-            onChange: (a) => C({ ...o, s: a }),
-            formatValue: (a) => `S ${a}%`,
-            disabled: v
+            onChange: (s) => v({ ...o, s }),
+            formatValue: (s) => `S ${s}%`,
+            disabled: x
           }
         ),
         /* @__PURE__ */ d(
@@ -398,9 +470,9 @@ const Ie = [
             min: 0,
             max: 100,
             value: o.l,
-            onChange: (a) => C({ ...o, l: a }),
-            formatValue: (a) => `L ${a}%`,
-            disabled: v
+            onChange: (s) => v({ ...o, l: s }),
+            formatValue: (s) => `L ${s}%`,
+            disabled: x
           }
         ),
         c ? /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
@@ -409,7 +481,7 @@ const Ie = [
             /* @__PURE__ */ d(
               "div",
               {
-                className: `ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ${Fe}`,
+                className: `ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ${_e}`,
                 "aria-hidden": "true"
               }
             ),
@@ -430,91 +502,135 @@ const Ie = [
                 max: 100,
                 step: 1,
                 value: [Math.round(o.a * 100)],
-                onValueChange: ([a]) => C({ ...o, a: a / 100 }),
+                onValueChange: ([s]) => v({ ...o, a: s / 100 }),
                 "aria-label": g("ui.inputs.colorPicker.opacity", "Opacity"),
-                formatValue: (a) => `${a}%`,
-                disabled: v,
+                formatValue: (s) => `${s}%`,
+                disabled: x,
                 className: ie
               }
             )
           ] })
         ] }) : null
       ] }),
-      z ? /* @__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__ */ d("span", { className: "ds:tabular-nums", children: g("ui.inputs.colorPicker.contrastRatio", { ratio: z.ratio.toFixed(1) }) }),
-        /* @__PURE__ */ d(ae, { level: "AA", passes: z.aa, t: g }),
-        /* @__PURE__ */ d(ae, { level: "AAA", passes: z.aaa, t: g })
-      ] }) : null,
+      L ? /* @__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__ */ d("span", { className: "ds:tabular-nums", children: g("ui.inputs.colorPicker.contrastRatio", {
+              ratio: L.ratio.toFixed(1)
+            }) }),
+            /* @__PURE__ */ d(se, { level: "AA", passes: L.aa, t: g }),
+            /* @__PURE__ */ d(se, { level: "AAA", passes: L.aaa, t: g })
+          ]
+        }
+      ) : null,
       /* @__PURE__ */ h("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
         /* @__PURE__ */ d(
           "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": $(o) },
+            style: { "--swatch-bg": C(o) },
             "aria-hidden": "true"
           }
         ),
         /* @__PURE__ */ d("span", { className: "ds:text-[length:var(--font-size-sm)] ds:text-[var(--muted-foreground)] ds:tabular-nums", children: B(o, i) })
       ] })
-    ] }), J = /* @__PURE__ */ h("div", { className: A ? He : Re, children: [
-      pe,
-      be
+    ] }), J = /* @__PURE__ */ h("div", { className: P ? Be : Ve, children: [
+      be,
+      Ce
     ] });
     return le === "inline" ? /* @__PURE__ */ d(
       "div",
       {
-        ref: s,
-        id: M,
-        className: D,
+        ref: t,
+        id: w,
+        className: j,
         "aria-describedby": N.describedBy || void 0,
         "aria-invalid": N.invalid || void 0,
-        "aria-disabled": v || void 0,
+        "aria-disabled": x || void 0,
         "data-component": "color-picker",
+        "data-component-id": w,
         "data-testid": "color-picker",
         children: J
       }
-    ) : /* @__PURE__ */ h(I.Root, { open: xe, onOpenChange: ve, children: [
-      /* @__PURE__ */ d(I.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
+    ) : /* @__PURE__ */ h(E.Root, { open: pe, onOpenChange: xe, children: [
+      /* @__PURE__ */ d(E.Trigger, { asChild: !0, disabled: x, children: /* @__PURE__ */ h(
         "button",
         {
-          ref: s,
+          ref: t,
           type: "button",
-          id: M,
+          id: w,
           "aria-describedby": N.describedBy || void 0,
           "aria-invalid": N.invalid || void 0,
-          className: Le({ size: b, className: D }),
+          "aria-label": P ? g("ui.inputs.colorPicker.triggerLabel", "Choose a colour") : void 0,
+          className: Fe({ size: k, className: j }),
           "data-component": "color-picker",
+          "data-component-id": w,
           "data-testid": "color-picker-trigger",
           children: [
             /* @__PURE__ */ d(
               "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)]${A ? "" : " ds:me-[var(--spacing-sm)]"}`,
+                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)]${P ? "" : " ds:me-[var(--spacing-sm)]"}`,
                 "aria-hidden": "true",
-                style: { "--swatch-bg": $(o) }
+                style: { "--swatch-bg": C(o) }
               }
             ),
-            A ? null : /* @__PURE__ */ d("span", { className: "ds:text-start ds:truncate ds:tabular-nums", children: B(o, i) })
+            P ? null : /* @__PURE__ */ d("span", { className: "ds:text-start ds:truncate ds:tabular-nums", children: B(o, i) })
           ]
         }
       ) }),
-      /* @__PURE__ */ d(I.Portal, { children: /* @__PURE__ */ d(I.Content, { sideOffset: 4, align: "start", className: _e, children: J }) })
+      /* @__PURE__ */ d(E.Portal, { children: /* @__PURE__ */ d(
+        E.Content,
+        {
+          sideOffset: 4,
+          align: "start",
+          className: Oe,
+          children: J
+        }
+      ) })
     ] });
   }
 );
-Oe.displayName = "ColorPicker";
-function ae({ level: e, passes: s, t: r }) {
+De.displayName = "ColorPicker";
+function se({
+  level: e,
+  passes: t,
+  t: r
+}) {
   return /* @__PURE__ */ h("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
-    /* @__PURE__ */ d("abbr", { title: `Web Content Accessibility Guidelines Level ${e}`, className: "ds:no-underline ds:font-medium", children: e }),
-    s ? /* @__PURE__ */ d(ne, { "aria-hidden": "true", className: "ds:size-4 ds:text-[var(--success)]" }) : /* @__PURE__ */ d(Ae, { "aria-hidden": "true", className: "ds:size-4 ds:text-[var(--destructive)]" }),
-    /* @__PURE__ */ d("span", { className: "ds:sr-only", children: s ? r("ui.inputs.colorPicker.contrastPass", "Pass") : r("ui.inputs.colorPicker.contrastFail", "Fail") })
+    /* @__PURE__ */ d(
+      "abbr",
+      {
+        title: `Web Content Accessibility Guidelines Level ${e}`,
+        className: "ds:no-underline ds:font-medium",
+        children: e
+      }
+    ),
+    t ? /* @__PURE__ */ d(
+      ne,
+      {
+        "aria-hidden": "true",
+        className: "ds:size-4 ds:text-[var(--success)]"
+      }
+    ) : /* @__PURE__ */ d(
+      Se,
+      {
+        "aria-hidden": "true",
+        className: "ds:size-4 ds:text-[var(--destructive)]"
+      }
+    ),
+    /* @__PURE__ */ d("span", { className: "ds:sr-only", children: t ? r("ui.inputs.colorPicker.contrastPass", "Pass") : r("ui.inputs.colorPicker.contrastFail", "Fail") })
   ] });
 }
 function O({
   label: e,
-  gradient: s,
+  gradient: t,
   min: r,
-  max: t,
+  max: a,
   value: n,
   onChange: i,
   formatValue: c,
@@ -527,7 +643,7 @@ function O({
         "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 },
+          style: { "--slider-gradient": t },
           "aria-hidden": "true"
         }
       ),
@@ -535,10 +651,10 @@ function O({
         re,
         {
           min: r,
-          max: t,
+          max: a,
           step: 1,
           value: [n],
-          onValueChange: ([p]) => i(p),
+          onValueChange: ([b]) => i(b),
           "aria-label": e,
           formatValue: c,
           disabled: m,
@@ -549,8 +665,8 @@ function O({
   ] });
 }
 export {
-  Ie as A,
-  Ye as B,
-  Oe as C
+  Re as A,
+  Ze as B,
+  De as C
 };
-//# sourceMappingURL=color-picker-e9PmpaGH.js.map
+//# sourceMappingURL=color-picker-CTIcHlDF.js.map