@actioneer/ads 0.5.4 → 0.5.6

package/components/tabs.js

@@ -1,83 +1,86 @@
 "use client";
-import { jsx as m, jsxs as M } from "react/jsx-runtime";
+import { jsx as f, jsxs as E } from "react/jsx-runtime";
 import * as t from "react";
-import { MotionConfig as U, motion as E } from "motion/react";
-import { cva as S } from "class-variance-authority";
-import { cn as f } from "../lib/cn.js";
-import { EASE_OUT as k } from "../lib/motion.js";
-const V = t.createContext(null);
+import { MotionConfig as O, motion as S } from "motion/react";
+import { cva as L } from "class-variance-authority";
+import { cn as b } from "../lib/cn.js";
+import { EASE_OUT as V } from "../lib/motion.js";
+const P = t.createContext(null);
 function I(o) {
-  const e = t.useContext(V);
+  const e = t.useContext(P);
   if (!e)
     throw new Error(`<${o}> must be used within <Tabs>`);
   return e;
 }
-const O = t.forwardRef(
+const B = t.forwardRef(
   ({
     className: o,
     value: e,
     defaultValue: a,
-    onValueChange: s,
-    variant: i = "primary",
-    orientation: d = "horizontal",
-    size: b = "md",
+    onValueChange: n,
+    variant: s = "primary",
+    orientation: l = "horizontal",
+    size: m = "md",
     children: $,
     ...j
-  }, w) => {
-    const x = e !== void 0, [z, R] = t.useState(a), c = t.useId(), v = t.useId(), y = t.useRef([]), h = t.useRef(/* @__PURE__ */ new Set()), N = x ? e : z, u = t.useCallback(
+  }, R) => {
+    const h = e !== void 0, [v, z] = t.useState(a), w = t.useId(), d = t.useId(), y = t.useRef([]), g = t.useRef(/* @__PURE__ */ new Set()), x = h ? e : v, T = t.useCallback(
       (r) => {
-        x || R(r), s == null || s(r);
+        h || z(r), n == null || n(r);
       },
-      [x, s]
-    ), T = t.useCallback((r) => {
+      [h, n]
+    ), c = t.useCallback((r) => {
       y.current.includes(r) || y.current.push(r);
-    }, []), l = t.useMemo(
+    }, []), A = t.useMemo(
       () => ({
-        value: N,
-        setValue: u,
-        baseId: c,
-        registerTab: T,
+        value: x,
+        setValue: T,
+        baseId: w,
+        registerTab: c,
         tabs: y,
-        disabled: h,
-        thumbId: v,
-        variant: i,
-        orientation: d,
-        size: b
+        disabled: g,
+        thumbId: d,
+        variant: s,
+        orientation: l,
+        size: m
       }),
       [
-        N,
-        u,
-        c,
+        x,
         T,
-        v,
-        i,
+        w,
+        c,
         d,
-        b
+        s,
+        l,
+        m
       ]
     );
-    return /* @__PURE__ */ m(V.Provider, { value: l, children: /* @__PURE__ */ m(
+    return /* @__PURE__ */ f(P.Provider, { value: A, children: /* @__PURE__ */ f(
       "div",
       {
-        ref: w,
-        "data-orientation": d,
-        "data-variant": i,
-        className: f(
+        ref: R,
+        "data-orientation": l,
+        "data-variant": s,
+        className: b(
           "flex gap-4",
-          d === "horizontal" ? "flex-col" : "flex-row",
+          l === "horizontal" ? "flex-col" : "flex-row",
           o
         ),
         ...j,
-        children: /* @__PURE__ */ m(U, { reducedMotion: "user", children: $ })
+        children: /* @__PURE__ */ f(O, { reducedMotion: "user", children: $ })
       }
     ) });
   }
 );
-O.displayName = "Tabs";
-const B = S("inline-flex", {
+B.displayName = "Tabs";
+const H = L("inline-flex", {
   variants: {
     variant: {
-      primary: "bg-muted p-1 rounded-lg gap-1",
-      secondary: "gap-0"
+      primary: "bg-surface p-1 rounded-lg gap-1",
+      secondary: "gap-0",
+      // Pill: separate rounded pills with a gap, no track — a single-select
+      // filter row (each pill can carry a `· N` count via Tab's `count`).
+      pill: "gap-1.5 flex-wrap"
     },
     orientation: {
       horizontal: "self-start flex-row items-center",
@@ -109,27 +112,27 @@ const B = S("inline-flex", {
     orientation: "horizontal",
     size: "md"
   }
-}), H = t.forwardRef(
+}), _ = t.forwardRef(
   ({ className: o, ...e }, a) => {
-    const { variant: s, orientation: i, size: d } = I("TabList");
-    return /* @__PURE__ */ m(
+    const { variant: n, orientation: s, size: l } = I("TabList");
+    return /* @__PURE__ */ f(
       "div",
       {
         ref: a,
         role: "tablist",
-        "aria-orientation": i,
-        "data-orientation": i,
-        "data-variant": s,
-        className: f(B({ variant: s, orientation: i, size: d }), o),
+        "aria-orientation": s,
+        "data-orientation": s,
+        "data-variant": n,
+        className: b(H({ variant: n, orientation: s, size: l }), o),
         ...e
       }
     );
   }
 );
-H.displayName = "TabList";
-const _ = S(
-  f(
-    "relative inline-flex items-center whitespace-nowrap font-medium select-none",
+_.displayName = "TabList";
+const q = L(
+  b(
+    "relative inline-flex items-center whitespace-nowrap font-normal select-none",
     "transition-colors duration-(--duration-fast) cursor-pointer",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
@@ -138,7 +141,8 @@ const _ = S(
     variants: {
       variant: {
         primary: "justify-center rounded-md",
-        secondary: ""
+        secondary: "",
+        pill: "justify-center rounded-full"
       },
       orientation: {
         horizontal: "",
@@ -160,6 +164,17 @@ const _ = S(
       { variant: "primary", size: "sm", className: "h-6 px-2.5" },
       { variant: "primary", size: "md", className: "h-8 px-3" },
       { variant: "primary", size: "lg", className: "h-9 px-4" },
+      // Pill — separate rounded pills; the active pill fills with foreground,
+      // inactive pills read as a quiet fill (no track, no sliding thumb).
+      { variant: "pill", size: "sm", className: "h-6 px-2.5 gap-1" },
+      { variant: "pill", size: "md", className: "h-7 px-3 gap-1" },
+      { variant: "pill", size: "lg", className: "h-8 px-3.5 gap-1.5" },
+      { variant: "pill", selected: !0, className: "bg-foreground text-background" },
+      {
+        variant: "pill",
+        selected: !1,
+        className: "bg-muted text-muted-foreground hover:bg-fill hover:text-foreground"
+      },
       // Secondary horizontal: -1px sits over the rail so the sliding
       // indicator overlaps it cleanly.
       {
@@ -207,131 +222,137 @@ const _ = S(
       selected: !1
     }
   }
-), q = t.forwardRef(
-  ({ className: o, value: e, isDisabled: a, children: s, onClick: i, onKeyDown: d, ...b }, $) => {
+), C = t.forwardRef(
+  ({ className: o, value: e, isDisabled: a, count: n, children: s, onClick: l, onKeyDown: m, ...$ }, j) => {
     const {
-      value: j,
-      setValue: w,
-      baseId: x,
+      value: R,
+      setValue: h,
+      baseId: v,
       registerTab: z,
-      tabs: R,
-      disabled: c,
-      thumbId: v,
-      variant: y,
-      orientation: h,
-      size: N
-    } = I("Tab"), u = j === e;
+      tabs: w,
+      disabled: d,
+      thumbId: y,
+      variant: g,
+      orientation: x,
+      size: T
+    } = I("Tab"), c = R === e;
     t.useEffect(() => {
       z(e);
     }, [z, e]), t.useEffect(() => {
-      a ? c.current.add(e) : c.current.delete(e);
-    }, [c, a, e]);
-    const T = (l) => {
-      if (d == null || d(l), l.defaultPrevented) return;
-      const r = R.current, g = r.indexOf(e);
-      if (g === -1) return;
-      const L = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], P = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
-      let n = null;
-      if (L.includes(l.key)) {
-        n = g;
+      a ? d.current.add(e) : d.current.delete(e);
+    }, [d, a, e]);
+    const A = (r) => {
+      if (m == null || m(r), r.defaultPrevented) return;
+      const u = w.current, N = u.indexOf(e);
+      if (N === -1) return;
+      const M = x === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], U = x === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+      let i = null;
+      if (M.includes(r.key)) {
+        i = N;
         do
-          n = (n + 1) % r.length;
-        while (c.current.has(r[n]) && n !== g);
-      } else if (P.includes(l.key)) {
-        n = g;
+          i = (i + 1) % u.length;
+        while (d.current.has(u[i]) && i !== N);
+      } else if (U.includes(r.key)) {
+        i = N;
         do
-          n = (n - 1 + r.length) % r.length;
-        while (c.current.has(r[n]) && n !== g);
-      } else if (l.key === "Home")
-        n = r.findIndex((p) => !c.current.has(p));
-      else if (l.key === "End") {
-        for (let p = r.length - 1; p >= 0; p--)
-          if (!c.current.has(r[p])) {
-            n = p;
+          i = (i - 1 + u.length) % u.length;
+        while (d.current.has(u[i]) && i !== N);
+      } else if (r.key === "Home")
+        i = u.findIndex((p) => !d.current.has(p));
+      else if (r.key === "End") {
+        for (let p = u.length - 1; p >= 0; p--)
+          if (!d.current.has(u[p])) {
+            i = p;
             break;
           }
       }
-      if (n !== null && n !== -1) {
-        l.preventDefault();
-        const p = r[n];
-        w(p);
-        const A = document.getElementById(`${x}-tab-${p}`);
-        A == null || A.focus();
+      if (i !== null && i !== -1) {
+        r.preventDefault();
+        const p = u[i];
+        h(p);
+        const k = document.getElementById(`${v}-tab-${p}`);
+        k == null || k.focus();
       }
     };
-    return /* @__PURE__ */ M(
+    return /* @__PURE__ */ E(
       "button",
       {
-        ref: $,
+        ref: j,
         type: "button",
         role: "tab",
-        id: `${x}-tab-${e}`,
-        "aria-selected": u,
-        "aria-controls": `${x}-panel-${e}`,
+        id: `${v}-tab-${e}`,
+        "aria-selected": c,
+        "aria-controls": `${v}-panel-${e}`,
         "aria-disabled": a || void 0,
         disabled: a,
-        "data-selected": u || void 0,
+        "data-selected": c || void 0,
         "data-disabled": a || void 0,
-        tabIndex: u && !a ? 0 : -1,
-        className: f(
-          _({ variant: y, orientation: h, size: N, selected: u }),
+        tabIndex: c && !a ? 0 : -1,
+        className: b(
+          q({ variant: g, orientation: x, size: T, selected: c }),
           o
         ),
-        onClick: (l) => {
-          i == null || i(l), a || w(e);
+        onClick: (r) => {
+          l == null || l(r), a || h(e);
         },
-        onKeyDown: T,
-        ...b,
+        onKeyDown: A,
+        ...$,
         children: [
-          u && y === "primary" && /* @__PURE__ */ m(
-            E.span,
+          c && g === "primary" && /* @__PURE__ */ f(
+            S.span,
             {
-              layoutId: v,
+              layoutId: y,
               "aria-hidden": !0,
-              transition: { duration: 0.2, ease: k },
+              transition: { duration: 0.2, ease: V },
               className: "absolute inset-0 rounded-md bg-elevated shadow-elevation"
             }
           ),
-          u && y === "secondary" && /* @__PURE__ */ m(
-            E.span,
+          c && g === "secondary" && /* @__PURE__ */ f(
+            S.span,
             {
-              layoutId: v,
+              layoutId: y,
               "aria-hidden": !0,
-              transition: { duration: 0.2, ease: k },
-              className: f(
+              transition: { duration: 0.2, ease: V },
+              className: b(
                 "absolute bg-brand",
-                h === "horizontal" ? "left-0 right-0 bottom-0 h-0.5" : "top-0 bottom-0 right-0 w-0.5"
+                x === "horizontal" ? "left-0 right-0 bottom-0 h-0.5" : "top-0 bottom-0 right-0 w-0.5"
               )
             }
           ),
-          /* @__PURE__ */ m("span", { className: "relative", children: s })
+          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1", children: [
+            s,
+            n != null && /* @__PURE__ */ E("span", { className: b("tabular-nums", c ? "opacity-60" : "text-muted-foreground/70"), children: [
+              "· ",
+              n
+            ] })
+          ] })
         ]
       }
     );
   }
 );
-q.displayName = "Tab";
-const C = t.forwardRef(
+C.displayName = "Tab";
+const F = t.forwardRef(
   ({ className: o, ...e }, a) => {
-    const { orientation: s, variant: i } = I("TabSeparator");
-    return i === "primary" ? /* @__PURE__ */ m(
+    const { orientation: n, variant: s } = I("TabSeparator");
+    return s === "primary" ? /* @__PURE__ */ f(
       "span",
       {
         ref: a,
         "aria-hidden": !0,
         role: "separator",
-        className: f("shrink-0", o),
+        className: b("shrink-0", o),
         ...e
       }
-    ) : /* @__PURE__ */ m(
+    ) : /* @__PURE__ */ f(
       "span",
       {
         ref: a,
         "aria-hidden": !0,
         role: "separator",
-        className: f(
+        className: b(
           "shrink-0 bg-border",
-          s === "horizontal" ? "mx-1 h-4 w-px" : "my-1 h-px w-full",
+          n === "horizontal" ? "mx-1 h-4 w-px" : "my-1 h-px w-full",
           o
         ),
         ...e
@@ -339,33 +360,33 @@ const C = t.forwardRef(
     );
   }
 );
-C.displayName = "TabSeparator";
-const F = t.forwardRef(
-  ({ className: o, value: e, children: a, ...s }, i) => {
-    const { value: d, baseId: b } = I("TabPanel");
-    return d !== e ? null : /* @__PURE__ */ m(
+F.displayName = "TabSeparator";
+const G = t.forwardRef(
+  ({ className: o, value: e, children: a, ...n }, s) => {
+    const { value: l, baseId: m } = I("TabPanel");
+    return l !== e ? null : /* @__PURE__ */ f(
       "div",
       {
-        ref: i,
+        ref: s,
         role: "tabpanel",
-        id: `${b}-panel-${e}`,
-        "aria-labelledby": `${b}-tab-${e}`,
+        id: `${m}-panel-${e}`,
+        "aria-labelledby": `${m}-tab-${e}`,
         tabIndex: 0,
-        className: f(
+        className: b(
           "flex-1 outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",
           o
         ),
-        ...s,
+        ...n,
         children: a
       }
     );
   }
 );
-F.displayName = "TabPanel";
+G.displayName = "TabPanel";
 export {
-  q as Tab,
-  H as TabList,
-  F as TabPanel,
-  C as TabSeparator,
-  O as Tabs
+  C as Tab,
+  _ as TabList,
+  G as TabPanel,
+  F as TabSeparator,
+  B as Tabs
 };

package/components/textarea.js

@@ -3,22 +3,24 @@ import { jsx as i } from "react/jsx-runtime";
 import * as o from "react";
 import { cn as s } from "../lib/cn.js";
 import { inputBaseClass as m } from "./field.js";
-const p = o.forwardRef(
-  ({ className: a, isInvalid: e, ...r }, t) => /* @__PURE__ */ i(
+const n = o.forwardRef(
+  ({ className: e, isInvalid: r, ...a }, t) => /* @__PURE__ */ i(
     "textarea",
     {
       ref: t,
-      "aria-invalid": e || void 0,
+      "aria-invalid": r || void 0,
       className: s(
         m,
-        "min-h-20 resize-y py-2 text-xs",
-        a
+        // Multi-line: the pill radius single-line controls use would clip
+        // the first/last lines oddly, so textareas stay softly rounded.
+        "min-h-20 resize-y rounded-lg py-2 text-xs",
+        e
       ),
-      ...r
+      ...a
     }
   )
 );
-p.displayName = "Textarea";
+n.displayName = "Textarea";
 export {
-  p as Textarea
+  n as Textarea
 };