@actioneer/ads 0.5.7 → 0.5.8

package/components/select.js

@@ -1,107 +1,111 @@
 "use client";
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import * as s from "react";
-import { cva as j } from "class-variance-authority";
-import { MotionConfig as M, AnimatePresence as V, motion as $ } from "motion/react";
-import { ChevronDown as C, Check as K } from "../lib/icons.js";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import * as a from "react";
+import { cva as V } from "class-variance-authority";
+import { MotionConfig as $, AnimatePresence as C, motion as K } from "motion/react";
+import { ChevronDown as L, Check as O } from "../lib/icons.js";
 import { cn as d } from "../lib/cn.js";
-import { inputBaseClass as L } from "./field.js";
-import { floatVariants as O } from "../lib/motion.js";
-import { Ripple as P } from "./ripple.js";
-const T = j(
+import { inputBaseClass as P } from "./field.js";
+import { floatVariants as T } from "../lib/motion.js";
+import { Ripple as _ } from "./ripple.js";
+const B = V(
   d(
-    L,
+    P,
     "items-center justify-between gap-2 text-left cursor-pointer",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ),
   {
     variants: {
       size: {
-        sm: "h-8 text-xs",
-        md: "h-10 text-xs",
-        lg: "h-11 text-base"
+        sm: "h-8 rounded-sm text-xs",
+        md: "h-10 rounded-md text-xs",
+        lg: "h-11 rounded-md text-base"
       }
     },
     defaultVariants: { size: "md" }
   }
-), _ = s.forwardRef(
+), U = a.forwardRef(
   ({
-    items: r,
+    items: o,
     value: c,
-    onChange: b,
+    onChange: m,
     placeholder: I = "Select…",
     size: N,
     disabled: w,
     isInvalid: E,
     className: R,
     id: A,
-    placement: v = "bottom"
-  }, S) => {
-    const [o, l] = s.useState(!1), [a, x] = s.useState(-1), g = s.useRef(null), k = s.useRef(null), u = s.useId(), h = r.find((e) => e.value === c), z = s.useCallback(() => {
-      const e = r.findIndex((t) => t.value === c);
-      return e >= 0 && !r[e].disabled ? e : r.findIndex((t) => !t.disabled);
-    }, [r, c]);
-    s.useEffect(() => {
-      if (!o) return;
+    placement: v = "bottom",
+    "aria-label": S,
+    "aria-describedby": z
+  }, j) => {
+    const [r, l] = a.useState(!1), [s, x] = a.useState(-1), g = a.useRef(null), k = a.useRef(null), u = a.useId(), h = o.find((e) => e.value === c), M = a.useCallback(() => {
+      const e = o.findIndex((t) => t.value === c);
+      return e >= 0 && !o[e].disabled ? e : o.findIndex((t) => !t.disabled);
+    }, [o, c]);
+    a.useEffect(() => {
+      if (!r) return;
       const e = (t) => {
         var n;
         (n = g.current) != null && n.contains(t.target) || l(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [o]), s.useEffect(() => {
+    }, [r]), a.useEffect(() => {
       var t;
-      if (!o || a < 0) return;
-      const e = (t = k.current) == null ? void 0 : t.children[a];
+      if (!r || s < 0) return;
+      const e = (t = k.current) == null ? void 0 : t.children[s];
       e == null || e.scrollIntoView({ block: "nearest" });
-    }, [o, a]);
+    }, [r, s]);
     const f = () => {
-      w || (x(z()), l(!0));
+      w || (x(M()), l(!0));
     }, y = (e) => {
       x((t) => {
         let n = t;
-        for (let p = 0; p < r.length; p++)
-          if (n = (n + e + r.length) % r.length, !r[n].disabled) return n;
+        for (let p = 0; p < o.length; p++)
+          if (n = (n + e + o.length) % o.length, !o[n].disabled) return n;
         return t;
       });
     }, D = (e) => {
-      const t = r[e];
-      !t || t.disabled || (b == null || b(t.value), l(!1));
+      const t = o[e];
+      !t || t.disabled || (m == null || m(t.value), l(!1));
     };
-    return /* @__PURE__ */ m("div", { ref: g, className: "relative", children: [
-      /* @__PURE__ */ m(
+    return /* @__PURE__ */ b("div", { ref: g, className: "relative", children: [
+      /* @__PURE__ */ b(
         "button",
         {
-          ref: S,
+          ref: j,
           id: A,
           type: "button",
           role: "combobox",
           "aria-haspopup": "listbox",
-          "aria-expanded": o,
+          "aria-expanded": r,
           "aria-controls": u,
           "aria-invalid": E || void 0,
+          "aria-label": S,
+          "aria-describedby": z,
           disabled: w,
-          onClick: () => o ? l(!1) : f(),
+          onClick: () => r ? l(!1) : f(),
           onKeyDown: (e) => {
             switch (e.key) {
               case "ArrowDown":
-                e.preventDefault(), o ? y(1) : f();
+                e.preventDefault(), r ? y(1) : f();
                 break;
               case "ArrowUp":
-                e.preventDefault(), o ? y(-1) : f();
+                e.preventDefault(), r ? y(-1) : f();
                 break;
               case "Enter":
               case " ":
-                e.preventDefault(), o ? D(a) : f();
+                e.preventDefault(), r ? D(s) : f();
                 break;
               case "Escape":
-                o && (e.preventDefault(), l(!1));
+                r && (e.preventDefault(), l(!1));
                 break;
               case "Tab":
                 l(!1);
                 break;
             }
           },
-          className: d(T({ size: N }), R),
+          className: d(B({ size: N }), R),
           children: [
             /* @__PURE__ */ i(
               "span",
@@ -114,11 +118,11 @@ const T = j(
               }
             ),
             /* @__PURE__ */ i(
-              C,
+              L,
               {
                 className: d(
-                  "size-4 text-muted-foreground transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
-                  o && "rotate-180"
+                  "size-4 text-muted-foreground transition-transform duration-150 ease-out motion-reduce:transition-none",
+                  r && "rotate-180"
                 ),
                 "aria-hidden": !0
               }
@@ -126,14 +130,14 @@ const T = j(
           ]
         }
       ),
-      /* @__PURE__ */ i(M, { reducedMotion: "user", children: /* @__PURE__ */ i(V, { children: o && /* @__PURE__ */ m(
-        $.ul,
+      /* @__PURE__ */ i($, { reducedMotion: "user", children: /* @__PURE__ */ i(C, { children: r && /* @__PURE__ */ b(
+        K.ul,
         {
           ref: k,
           id: u,
           role: "listbox",
-          "aria-activedescendant": a >= 0 ? `${u}-opt-${a}` : void 0,
-          variants: O,
+          "aria-activedescendant": s >= 0 ? `${u}-opt-${s}` : void 0,
+          variants: T,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
@@ -146,10 +150,10 @@ const T = j(
             v === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
           ),
           children: [
-            /* @__PURE__ */ i(P, { origin: v === "top" ? "bottom" : "top" }),
-            r.map((e, t) => {
-              const n = e.value === c, p = t === a;
-              return /* @__PURE__ */ m(
+            /* @__PURE__ */ i(_, { origin: v === "top" ? "bottom" : "top" }),
+            o.map((e, t) => {
+              const n = e.value === c, p = t === s;
+              return /* @__PURE__ */ b(
                 "li",
                 {
                   id: `${u}-opt-${t}`,
@@ -166,7 +170,7 @@ const T = j(
                   ),
                   children: [
                     /* @__PURE__ */ i("span", { className: "truncate", children: e.label }),
-                    n && /* @__PURE__ */ i(K, { className: "size-4 shrink-0", "aria-hidden": !0 })
+                    n && /* @__PURE__ */ i(O, { className: "size-4 shrink-0", "aria-hidden": !0 })
                   ]
                 },
                 e.value
@@ -178,7 +182,7 @@ const T = j(
     ] });
   }
 );
-_.displayName = "Select";
+U.displayName = "Select";
 export {
-  _ as Select
+  U as Select
 };

package/components/setting-row.js

@@ -1,61 +1,64 @@
 "use client";
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import * as f from "react";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
 import { cva as g } from "class-variance-authority";
-import { cn as o } from "../lib/cn.js";
-const x = g(
+import { cn as a } from "../lib/cn.js";
+const p = g(
   "flex w-full items-center gap-3 rounded-lg bg-card px-4 py-3 text-left",
   {
     variants: {
       isPressable: {
-        true: o(
-          "cursor-pointer outline-none",
-          "transition-[background-color,transform] duration-(--duration-fast) ease-out",
-          "hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
-          "active:scale-(--scale-press) motion-reduce:transition-none"
-        ),
+        true: "relative",
         false: ""
       }
     },
     defaultVariants: { isPressable: !1 }
   }
-), p = f.forwardRef(
-  ({ className: r, icon: i, label: n, description: l, action: d, onSelect: e, ...m }, u) => {
-    const a = !!e;
+), x = d.forwardRef(
+  ({ className: i, icon: s, label: t, description: n, action: r, onSelect: o, ...f }, m) => {
+    const l = !!o;
     return /* @__PURE__ */ c(
       "div",
       {
-        ref: u,
+        ref: m,
         "data-slot": "setting-row",
-        role: a ? "button" : void 0,
-        tabIndex: a ? 0 : void 0,
-        onClick: e,
-        onKeyDown: a ? (t) => {
-          (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e == null || e());
-        } : void 0,
-        className: o(x({ isPressable: a }), r),
-        ...m,
+        className: a(p({ isPressable: l }), i),
+        ...f,
         children: [
-          i && /* @__PURE__ */ s(
+          l && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              "aria-label": typeof t == "string" ? t : "Open setting",
+              onClick: o,
+              className: a(
+                "absolute inset-0 rounded-lg outline-none",
+                "transition-[background-color,transform] duration-150 ease-out",
+                "hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
+                "active:scale-[0.97] motion-reduce:transition-none"
+              )
+            }
+          ),
+          s && /* @__PURE__ */ e(
             "span",
             {
               "aria-hidden": !0,
-              className: "flex size-5 shrink-0 items-center justify-center text-tertiary [&>svg]:size-4.5",
-              children: i
+              className: "relative z-10 flex size-5 shrink-0 items-center justify-center text-tertiary pointer-events-none [&>svg]:size-4.5",
+              children: s
             }
           ),
-          /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-            /* @__PURE__ */ s("div", { className: "min-w-0 truncate text-base text-foreground", children: n }),
-            l && /* @__PURE__ */ s("div", { className: "min-w-0 text-xs text-tertiary", children: l })
+          /* @__PURE__ */ c("div", { className: "relative z-10 flex min-w-0 flex-1 flex-col gap-0.5 pointer-events-none", children: [
+            /* @__PURE__ */ e("div", { className: "min-w-0 truncate text-base text-foreground", children: t }),
+            n && /* @__PURE__ */ e("div", { className: "min-w-0 text-xs text-tertiary", children: n })
           ] }),
-          d && // The trailing control owns its own click — a pressable row must not
+          r && // The trailing control owns its own click — a pressable row must not
           // also fire when the reader aims at the button inside it.
-          /* @__PURE__ */ s(
+          /* @__PURE__ */ e(
             "span",
             {
-              className: "shrink-0",
-              onClick: (t) => t.stopPropagation(),
-              children: d
+              className: "relative z-20 shrink-0",
+              onClick: (u) => u.stopPropagation(),
+              children: r
             }
           )
         ]
@@ -63,24 +66,24 @@ const x = g(
     );
   }
 );
-p.displayName = "SettingRow";
-const v = f.forwardRef(
-  ({ className: r, ...i }, n) => /* @__PURE__ */ s(
+x.displayName = "SettingRow";
+const v = d.forwardRef(
+  ({ className: i, ...s }, t) => /* @__PURE__ */ e(
     "div",
     {
-      ref: n,
+      ref: t,
       "data-slot": "setting-list",
-      className: o(
+      className: a(
         "flex w-full flex-col gap-0.5 rounded-xl bg-surface p-1",
-        r
+        i
       ),
-      ...i
+      ...s
     }
   )
 );
 v.displayName = "SettingList";
 export {
   v as SettingList,
-  p as SettingRow,
-  x as settingRowVariants
+  x as SettingRow,
+  p as settingRowVariants
 };