@alfadocs/ui-kit-debug 0.68.0 → 0.69.0

package/dist/_chunks/collapsible-BrnRiCC6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible-BrnRiCC6.js","sources":["../../src/components/collapsible/collapsible.agent.ts","../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — Collapsible.                                           */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { CollapsibleHandle } from './collapsible';\n\nexport const collapsibleAgent: AgentAdapter<CollapsibleHandle> = {\n  id: 'collapsible',\n  capabilities: ['expand'],\n  state: {\n    isOpen: {\n      type: 'boolean',\n      descriptionKey: 'ui.agent.collapsible.state.isOpen',\n      description: 'True when the content panel is expanded.',\n      read: (handle) => handle.isOpen(),\n    },\n  },\n  actions: {\n    toggle: {\n      // Ephemeral expand/collapse of a presentational panel — no data loss.\n      safety: 'read',\n      descriptionKey: 'ui.agent.collapsible.actions.toggle',\n      description: 'Toggle between open and closed.',\n      invoke: (handle) => {\n        handle.toggle();\n      },\n    },\n    open: {\n      safety: 'read',\n      idempotent: true,\n      descriptionKey: 'ui.agent.collapsible.actions.open',\n      description: 'Expand the content panel.',\n      invoke: (handle) => {\n        handle.open();\n      },\n    },\n    close: {\n      safety: 'read',\n      idempotent: true,\n      descriptionKey: 'ui.agent.collapsible.actions.close',\n      description: 'Collapse the content panel.',\n      invoke: (handle) => {\n        handle.close();\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'collapsible',\n      description: 'Marks the Collapsible root.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description: 'Sourced from the id prop.',\n    },\n  },\n};\n","import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from 'react';\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible';\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { useControllableState } from '../../hooks/use-controllable-state';\nimport { useAgentRegistration } from '../../agent/registry';\nimport { collapsibleAgent } from './collapsible.agent';\n\nconst collapsibleVariants = cva('', {\n  variants: {\n    variant: {\n      default: '',\n      card: 'ds:bg-[var(--card)] ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2 ds:rounded-[var(--radius-lg)] ds:overflow-hidden',\n      minimal: 'ds:forced-colors:[border-block-end:1px_solid]',\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nconst contentCls = [\n  'ds:overflow-hidden',\n  'ds:transition-[block-size]',\n  'ds:duration-[var(--animation-duration)]',\n  'ds:ease-out',\n  'ds:motion-reduce:transition-none',\n  'ds:data-[state=open]:[block-size:var(--radix-collapsible-content-height)]',\n  'ds:data-[state=closed]:[block-size:0]',\n].join(' ');\n\ntype RootProps = ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;\ntype TriggerProps = ComponentPropsWithoutRef<\n  typeof CollapsiblePrimitive.Trigger\n>;\ntype PrimitiveContentProps = ComponentPropsWithoutRef<\n  typeof CollapsiblePrimitive.Content\n>;\n\nexport interface CollapsibleProps\n  extends\n    Omit<RootProps, 'asChild'>,\n    VariantProps<typeof collapsibleVariants> {}\n\n/** Curated imperative handle for agent / external automation. */\nexport interface CollapsibleHandle {\n  isOpen: () => boolean;\n  toggle: () => void;\n  open: () => void;\n  close: () => void;\n}\n\nexport type CollapsibleTriggerProps = TriggerProps;\n\nexport type CollapsibleContentProps = PrimitiveContentProps;\n\ntype CollapsibleRootElement = ElementRef<typeof CollapsiblePrimitive.Root>;\n\nexport const Collapsible = forwardRef<CollapsibleRootElement, CollapsibleProps>(\n  (\n    {\n      variant,\n      className,\n      children,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const [currentOpenRaw, setOpen] = useControllableState<boolean>({\n      value: openProp,\n      defaultValue: Boolean(defaultOpen),\n      onChange: onOpenChange,\n    });\n    const currentOpen = currentOpenRaw ?? false;\n    // Latest snapshot for the imperative handle — keeps invoke callers from\n    // reading stale state when they fire `toggle()` then `isOpen()` in rapid\n    // succession (the latest setState batch may not have flushed yet).\n    const latestRef = useRef(currentOpen);\n    latestRef.current = currentOpen;\n\n    const agentHandle = useMemo<CollapsibleHandle>(\n      () => ({\n        isOpen: () => latestRef.current,\n        toggle: () => setOpen(!latestRef.current),\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [setOpen],\n    );\n    useAgentRegistration(collapsibleAgent, agentHandle, props.id);\n\n    return (\n      <CollapsiblePrimitive.Root\n        ref={ref}\n        open={currentOpen}\n        onOpenChange={setOpen}\n        className={collapsibleVariants({ variant, className })}\n        data-component=\"collapsible\"\n        data-component-id={props.id}\n        {...props}\n      >\n        {children}\n      </CollapsiblePrimitive.Root>\n    );\n  },\n);\nCollapsible.displayName = 'Collapsible';\n\nexport const CollapsibleTrigger = forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(({ asChild = false, children, ...props }, ref) => (\n  <CollapsiblePrimitive.Trigger ref={ref} asChild={asChild} {...props}>\n    {children}\n  </CollapsiblePrimitive.Trigger>\n));\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\nexport const CollapsibleContent = forwardRef<\n  HTMLDivElement,\n  CollapsibleContentProps\n>(\n  (\n    {\n      className,\n      children,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    useEffect(() => {\n      if (import.meta.env.DEV && !ariaLabelledBy && !ariaLabel) {\n        console.warn(\n          'CollapsibleContent: Provide `aria-labelledby` pointing at the trigger id, or `aria-label`, so screen readers can identify this region.',\n        );\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return (\n      <CollapsiblePrimitive.Content\n        ref={ref}\n        aria-labelledby={ariaLabelledBy}\n        aria-label={ariaLabel}\n        className={cx(contentCls, className)}\n        {...props}\n      >\n        {children}\n      </CollapsiblePrimitive.Content>\n    );\n  },\n);\nCollapsibleContent.displayName = 'CollapsibleContent';\n"],"names":["collapsibleAgent","handle","collapsibleVariants","cva","contentCls","Collapsible","forwardRef","variant","className","children","openProp","defaultOpen","onOpenChange","props","ref","currentOpenRaw","setOpen","useControllableState","currentOpen","latestRef","useRef","agentHandle","useMemo","useAgentRegistration","jsx","CollapsiblePrimitive","CollapsibleTrigger","asChild","CollapsibleContent","ariaLabelledBy","ariaLabel","useEffect","cx"],"mappings":"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"}

package/dist/_chunks/{color-picker-FXpItIaF.js → color-picker-C_fZl6sA.js}

@@ -1,16 +1,16 @@
 import { jsx as l, jsxs as h, Fragment as ke } from "react/jsx-runtime";
-import { forwardRef as $e, useId as ye, useState as z, useMemo as T, useCallback as Ne, useRef as G, useEffect as Z } from "react";
+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 te } from "./index-D2ZczOXr.js";
+import { c as se } from "./index-D2ZczOXr.js";
 import { useTranslation as Pe } from "react-i18next";
-import { u as Ae } from "./form-field-context-B3APVHKx.js";
-import { S as ae } from "./slider-BHWzXdjt.js";
-import { u as Se } from "./registry-nPAVE19X.js";
+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: ["pick"],
+  capabilities: ["set_value"],
   state: {
     value: {
       type: "string",
@@ -23,10 +23,22 @@ const ze = {
     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.",
-      invoke: (e, t) => {
-        e.setValue(t.hex);
+      examples: [{ args: { hex: "#3b82f6" }, note: "Set to brand blue." }],
+      invoke: (e, s) => {
+        e.setValue(s.hex);
       }
     }
   },
@@ -44,17 +56,17 @@ const ze = {
   }
 };
 function Te(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, d = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+  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, t, r, a) {
-  const n = Math.max(e, t, r), d = Math.min(e, t, r), c = (n + d) / 2;
+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 = ((t - r) / x + (t < r ? 6 : 0)) / 6 : n === t ? m = ((r - e) / x + 2) / 6 : m = ((e - t) / x + 4) / 6;
+    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),
@@ -64,30 +76,30 @@ function ne(e, t, r, a) {
   };
 }
 function C(e) {
-  const { r: t, g: r, b: a } = W(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), d = `#${n(t)}${n(r)}${n(a)}`;
+  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: t, g: r, b: a } = W(e), n = Math.round(t * 255), d = Math.round(r * 255), c = Math.round(a * 255);
+  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 t = e.h / 360, r = e.s / 100, a = e.l / 100;
+  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, t + 1 / 3),
-    g: j(d, n, t),
-    b: j(d, n, t - 1 / 3)
+    r: j(d, n, s + 1 / 3),
+    g: j(d, n, s),
+    b: j(d, n, s - 1 / 3)
   };
 }
-function j(e, t, r) {
+function j(e, s, 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;
+  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, t) {
-  switch (t) {
+function D(e, s) {
+  switch (s) {
     case "hex":
       return C(e);
     case "hsl":
@@ -96,14 +108,14 @@ function D(e, t) {
       return Ee(e);
   }
 }
-function $(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 : Te(t);
+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 = t.match(
+  const r = s.match(
     /^hsla?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
   if (r)
@@ -113,7 +125,7 @@ function $(e) {
       l: Math.round(parseFloat(r[3])),
       a: r[4] !== void 0 ? parseFloat(r[4]) : 1
     };
-  const a = t.match(
+  const a = s.match(
     /^rgba?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
   if (a) {
@@ -123,11 +135,11 @@ function $(e) {
   return null;
 }
 function ee(e) {
-  const { r: t, 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(t) + 0.7152 * n(r) + 0.0722 * n(a);
+  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, t) {
-  const r = ee(e), a = ee(t), n = Math.max(r, a), d = Math.min(r, 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) {
@@ -167,7 +179,7 @@ const He = [
   { name: "Orange 900", hex: "#e65100", textColor: "#000000" },
   { name: "White", hex: "#ffffff", textColor: "#000000" },
   { name: "Yellow 500", hex: "#ffeb3b", textColor: "#000000" }
-], ts = [
+], st = [
   { name: "Blue 300", hex: "#70738c" },
   { name: "Blue 500", hex: "#292e53" },
   { name: "Blue 700", hex: "#1d213b" },
@@ -186,7 +198,7 @@ const He = [
   { name: "Grey 300", hex: "#f9f6f3" },
   { name: "Grey 500", hex: "#f6f1ed" },
   { name: "Grey 700", hex: "#afaba8" }
-], u = 6, Fe = te(
+], 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)]",
@@ -205,7 +217,7 @@ const He = [
     },
     defaultVariants: { size: "md" }
   }
-), _e = te(
+), 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",
@@ -268,8 +280,8 @@ const He = [
   "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 = $e(
-  (e, t) => {
+].join(" "), oe = "ds:[&>span:first-child]:bg-transparent ds:[&>span:first-child>span]:bg-transparent", Ke = ye(
+  (e, s) => {
     const {
       value: r,
       defaultValue: a,
@@ -283,58 +295,58 @@ const He = [
       variant: de = "inline",
       compact: M = !0,
       className: U
-    } = e, { t: g } = Pe(), P = Ae(), le = ye(), y = P.id || le, v = P.disabled || ie, E = r !== void 0, [X, ce] = z(() => {
-      const s = r ?? a;
-      if (s) {
-        const i = $(s);
+    } = 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 s = $(r);
-        if (s) return s;
+        const t = y(r);
+        if (t) return t;
       }
       return X;
     }, [E, r, X]), b = Ne(
-      (s) => {
-        const i = c ? s : { ...s, a: 1 };
+      (t) => {
+        const i = c ? t : { ...t, a: 1 };
         E || ce(i), n == null || n(D(i, d));
       },
       [c, d, E, n]
-    ), [Y, F] = z(() => C(o)), [fe, I] = z(!1), N = G(void 0), _ = G(o);
-    _.current = o, Z(() => {
-      F(C(o)), I(!1), N.current !== void 0 && (clearTimeout(N.current), N.current = void 0);
+    ), [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 s = $(Y);
-      s ? (I(!1), b(s)) : (I(!0), N.current = setTimeout(() => {
-        N.current = void 0, I(!1), F(C(_.current));
+      const t = y(Y);
+      t ? (I(!1), b(t)) : (I(!0), N.current = setTimeout(() => {
+        N.current = void 0, I(!1), _(C(F.current));
       }, 800));
-    }, A = T(() => m ? m.map(
-      (s) => typeof s == "string" ? { name: s.toUpperCase(), hex: s } : s
+    }, S = T(() => m ? m.map(
+      (t) => typeof t == "string" ? { name: t.toUpperCase(), hex: t } : t
     ) : He, [m]), he = C(o), V = T(
-      () => A.map((s) => {
-        const i = $(s.hex);
+      () => S.map((t) => {
+        const i = y(t.hex);
         return i ? C(i).toLowerCase() : null;
       }),
-      [A]
+      [S]
     ).findIndex(
-      (s) => s !== null && s === he.toLowerCase()
+      (t) => t !== null && t === he.toLowerCase()
     ), L = G(null), [p, q] = z(
       V >= 0 ? V : 0
-    ), me = (s) => {
+    ), me = (t) => {
       var f;
       const i = (f = L.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
-      i != null && i[s] && (i[s].focus(), q(s));
-    }, ge = (s) => {
+      i != null && i[t] && (i[t].focus(), q(t));
+    }, ge = (t) => {
       if (v) return;
-      const i = A.length;
+      const i = S.length;
       let f = p;
       const k = (typeof window < "u" && L.current ? window.getComputedStyle(L.current).direction === "rtl" : !1) ? -1 : 1;
-      switch (s.key) {
+      switch (t.key) {
         case "ArrowRight":
           f = (p + k + i) % i;
           break;
@@ -360,37 +372,37 @@ const He = [
           f = p % u;
           break;
         case "PageDown": {
-          const S = Math.floor((i - 1) / u) * u;
-          f = Math.min(S + p % u, i - 1);
+          const A = Math.floor((i - 1) / u) * u;
+          f = Math.min(A + p % u, i - 1);
           break;
         }
         case "Enter":
         case " ": {
-          s.preventDefault();
-          const S = $(A[p].hex);
-          S && b(S);
+          t.preventDefault();
+          const A = y(S[p].hex);
+          A && b(A);
           return;
         }
         default:
           return;
       }
-      s.preventDefault(), me(f);
+      t.preventDefault(), me(f);
     }, [pe, xe] = z(!1), ve = T(
       () => ({
-        getValue: () => C(_.current),
-        setValue: (s) => {
-          const i = $(s);
+        getValue: () => C(F.current),
+        setValue: (t) => {
+          const i = y(t);
           i && b(i);
         }
       }),
       [b]
     );
-    Se(ze, ve, y);
+    Ae(ze, ve, $);
     const R = T(() => {
       if (!w) return null;
-      const s = $(w);
-      if (!s) return null;
-      const i = Ie(o, s);
+      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
@@ -402,10 +414,10 @@ const He = [
           "aria-label": g("inputs.colorPicker.paletteLabel", "Colour palette"),
           onKeyDown: ge,
           className: "ds:grid ds:grid-cols-6 ds:gap-[var(--spacing-xs)]",
-          children: A.map((s, i) => {
+          children: S.map((t, i) => {
             const f = Math.floor(i / u) * u;
-            return i === f ? /* @__PURE__ */ l("div", { role: "row", className: "ds:contents", children: A.slice(f, f + u).map((k, S) => {
-              const O = f + S, B = O === V;
+            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(
@@ -420,10 +432,10 @@ const He = [
                     tabIndex: O === p ? 0 : -1,
                     onClick: () => {
                       if (v) return;
-                      const Q = $(k.hex);
+                      const Q = y(k.hex);
                       Q && b(Q), q(O);
                     },
-                    className: _e({ selected: B, size: x }),
+                    className: Fe({ selected: B, size: x }),
                     style: { "--swatch-bg": k.hex },
                     children: B ? /* @__PURE__ */ l(
                       re,
@@ -445,7 +457,7 @@ const He = [
         /* @__PURE__ */ l(
           "label",
           {
-            htmlFor: `${y}-hex`,
+            htmlFor: `${$}-hex`,
             className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]",
             children: g("inputs.colorPicker.hex", "Hex")
           }
@@ -453,11 +465,11 @@ const He = [
         /* @__PURE__ */ l("bdi", { dir: "ltr", children: /* @__PURE__ */ l(
           "input",
           {
-            id: `${y}-hex`,
+            id: `${$}-hex`,
             type: "text",
             value: Y,
             disabled: v,
-            onChange: (s) => F(s.target.value),
+            onChange: (t) => _(t.target.value),
             onBlur: ue,
             className: `${De} ${fe ? "ds:border-[var(--destructive)]" : "ds:border-[color:var(--border)]"}`
           }
@@ -472,8 +484,8 @@ const He = [
             min: 0,
             max: 360,
             value: o.h,
-            onChange: (s) => b({ ...o, h: s }),
-            formatValue: (s) => `H ${s}°`,
+            onChange: (t) => b({ ...o, h: t }),
+            formatValue: (t) => `H ${t}°`,
             disabled: v
           }
         ),
@@ -485,8 +497,8 @@ const He = [
             min: 0,
             max: 100,
             value: o.s,
-            onChange: (s) => b({ ...o, s }),
-            formatValue: (s) => `S ${s}%`,
+            onChange: (t) => b({ ...o, s: t }),
+            formatValue: (t) => `S ${t}%`,
             disabled: v
           }
         ),
@@ -498,8 +510,8 @@ const He = [
             min: 0,
             max: 100,
             value: o.l,
-            onChange: (s) => b({ ...o, l: s }),
-            formatValue: (s) => `L ${s}%`,
+            onChange: (t) => b({ ...o, l: t }),
+            formatValue: (t) => `L ${t}%`,
             disabled: v
           }
         ),
@@ -530,9 +542,9 @@ const He = [
                 max: 100,
                 step: 1,
                 value: [Math.round(o.a * 100)],
-                onValueChange: ([s]) => b({ ...o, a: s / 100 }),
+                onValueChange: ([t]) => b({ ...o, a: t / 100 }),
                 "aria-label": g("inputs.colorPicker.opacity", "Opacity"),
-                formatValue: (s) => `${s}%`,
+                formatValue: (t) => `${t}%`,
                 disabled: v,
                 className: oe
               }
@@ -550,8 +562,8 @@ const He = [
             /* @__PURE__ */ l("span", { className: "ds:tabular-nums", children: g("inputs.colorPicker.contrastRatio", {
               ratio: R.ratio.toFixed(1)
             }) }),
-            /* @__PURE__ */ l(se, { level: "AA", passes: R.aa, t: g }),
-            /* @__PURE__ */ l(se, { level: "AAA", passes: R.aaa, t: g })
+            /* @__PURE__ */ l(te, { level: "AA", passes: R.aa, t: g }),
+            /* @__PURE__ */ l(te, { level: "AAA", passes: R.aaa, t: g })
           ]
         }
       ) : null,
@@ -579,14 +591,14 @@ const He = [
     return de === "inline" ? /* @__PURE__ */ l(
       "div",
       {
-        ref: t,
-        id: y,
+        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": y,
+        "data-component-id": $,
         "data-testid": "color-picker",
         children: J
       }
@@ -594,15 +606,15 @@ const He = [
       /* @__PURE__ */ l(H.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
         "button",
         {
-          ref: t,
+          ref: s,
           type: "button",
-          id: y,
+          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: Fe({ size: x, className: U }),
+          className: _e({ size: x, className: U }),
           "data-component": "color-picker",
-          "data-component-id": y,
+          "data-component-id": $,
           "data-testid": "color-picker-trigger",
           children: [
             /* @__PURE__ */ l(
@@ -630,9 +642,9 @@ const He = [
   }
 );
 Ke.displayName = "ColorPicker";
-function se({
+function te({
   level: e,
-  passes: t,
+  passes: s,
   t: r
 }) {
   return /* @__PURE__ */ h("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
@@ -644,7 +656,7 @@ function se({
         children: e
       }
     ),
-    t ? /* @__PURE__ */ l(
+    s ? /* @__PURE__ */ l(
       re,
       {
         "aria-hidden": "true",
@@ -657,12 +669,12 @@ function se({
         className: "ds:size-4 ds:text-[var(--destructive)]"
       }
     ),
-    /* @__PURE__ */ l("span", { className: "ds:sr-only", children: t ? r("inputs.colorPicker.contrastPass", "Pass") : r("inputs.colorPicker.contrastFail", "Fail") })
+    /* @__PURE__ */ l("span", { className: "ds:sr-only", children: s ? r("inputs.colorPicker.contrastPass", "Pass") : r("inputs.colorPicker.contrastFail", "Fail") })
   ] });
 }
 function K({
   label: e,
-  gradient: t,
+  gradient: s,
   min: r,
   max: a,
   value: n,
@@ -677,7 +689,7 @@ function K({
         "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": t },
+          style: { "--slider-gradient": s },
           "aria-hidden": "true"
         }
       ),
@@ -700,7 +712,7 @@ function K({
 }
 export {
   He as A,
-  ts as B,
+  st as B,
   Ke as C
 };
-//# sourceMappingURL=color-picker-FXpItIaF.js.map
+//# sourceMappingURL=color-picker-C_fZl6sA.js.map