@actioneer/ads 0.5.7 → 0.5.8

package/components/tabs.js

@@ -1,48 +1,48 @@
 "use client";
-import { jsx as f, jsxs as E } from "react/jsx-runtime";
-import * as t from "react";
-import { MotionConfig as O, motion as S } from "motion/react";
-import { cva as L } from "class-variance-authority";
+import { jsx as f, jsxs as L } from "react/jsx-runtime";
+import * as r from "react";
+import { MotionConfig as B, motion as P } from "motion/react";
+import { cva as $ } 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(P);
+import { springControl as S } from "../lib/motion.js";
+const I = (s, e, a) => `${s}-${e}-${encodeURIComponent(a).replaceAll("%", "_")}`, M = r.createContext(null);
+function j(s) {
+  const e = r.useContext(M);
   if (!e)
-    throw new Error(`<${o}> must be used within <Tabs>`);
+    throw new Error(`<${s}> must be used within <Tabs>`);
   return e;
 }
-const B = t.forwardRef(
+const H = r.forwardRef(
   ({
-    className: o,
+    className: s,
     value: e,
     defaultValue: a,
-    onValueChange: n,
-    variant: s = "primary",
+    onValueChange: i,
+    variant: o = "primary",
     orientation: l = "horizontal",
-    size: m = "md",
-    children: $,
-    ...j
-  }, 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) => {
-        h || z(r), n == null || n(r);
+    size: u = "md",
+    children: R,
+    ...A
+  }, k) => {
+    const h = e !== void 0, [N, z] = r.useState(a), w = r.useId().replaceAll(":", ""), d = r.useId(), y = r.useRef([]), v = r.useRef(/* @__PURE__ */ new Set()), x = h ? e : N, T = r.useCallback(
+      (t) => {
+        h || z(t), i == null || i(t);
       },
-      [h, n]
-    ), c = t.useCallback((r) => {
-      y.current.includes(r) || y.current.push(r);
-    }, []), A = t.useMemo(
+      [h, i]
+    ), c = r.useCallback((t) => {
+      y.current.includes(t) || y.current.push(t);
+    }, []), V = r.useMemo(
       () => ({
         value: x,
         setValue: T,
         baseId: w,
         registerTab: c,
         tabs: y,
-        disabled: g,
+        disabled: v,
         thumbId: d,
-        variant: s,
+        variant: o,
         orientation: l,
-        size: m
+        size: u
       }),
       [
         x,
@@ -50,36 +50,36 @@ const B = t.forwardRef(
         w,
         c,
         d,
-        s,
+        o,
         l,
-        m
+        u
       ]
     );
-    return /* @__PURE__ */ f(P.Provider, { value: A, children: /* @__PURE__ */ f(
+    return /* @__PURE__ */ f(M.Provider, { value: V, children: /* @__PURE__ */ f(
       "div",
       {
-        ref: R,
+        ref: k,
         "data-orientation": l,
-        "data-variant": s,
+        "data-variant": o,
         className: b(
           "flex gap-4",
           l === "horizontal" ? "flex-col" : "flex-row",
-          o
+          s
         ),
-        ...j,
-        children: /* @__PURE__ */ f(O, { reducedMotion: "user", children: $ })
+        ...A,
+        children: /* @__PURE__ */ f(B, { reducedMotion: "user", children: R })
       }
     ) });
   }
 );
-B.displayName = "Tabs";
-const H = L("inline-flex", {
+H.displayName = "Tabs";
+const O = $("inline-flex", {
   variants: {
     variant: {
-      primary: "bg-surface p-1 rounded-lg gap-1",
+      primary: "bg-surface p-1 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`).
+      // Legacy `pill` API: separate compact filter tabs with a gap and no
+      // track (each tab can carry a `· N` count via Tab's `count`).
       pill: "gap-1.5 flex-wrap"
     },
     orientation: {
@@ -93,6 +93,10 @@ const H = L("inline-flex", {
     }
   },
   compoundVariants: [
+    // Track radius follows control size: compact = 4px, standard = 8px.
+    { variant: "primary", size: "sm", className: "rounded-sm" },
+    { variant: "primary", size: "md", className: "rounded-md" },
+    { variant: "primary", size: "lg", className: "rounded-md" },
     // Secondary variant uses a subtle rail (border) on the opposite edge of
     // the active indicator. Kept intentionally hairline — surfaces avoid
     // strokes, but a tab rail is a control edge, not a surface.
@@ -112,28 +116,28 @@ const H = L("inline-flex", {
     orientation: "horizontal",
     size: "md"
   }
-}), _ = t.forwardRef(
-  ({ className: o, ...e }, a) => {
-    const { variant: n, orientation: s, size: l } = I("TabList");
+}), _ = r.forwardRef(
+  ({ className: s, ...e }, a) => {
+    const { variant: i, orientation: o, size: l } = j("TabList");
     return /* @__PURE__ */ f(
       "div",
       {
         ref: a,
         role: "tablist",
-        "aria-orientation": s,
-        "data-orientation": s,
-        "data-variant": n,
-        className: b(H({ variant: n, orientation: s, size: l }), o),
+        "aria-orientation": o,
+        "data-orientation": o,
+        "data-variant": i,
+        className: b(O({ variant: i, orientation: o, size: l }), s),
         ...e
       }
     );
   }
 );
 _.displayName = "TabList";
-const q = L(
+const q = $(
   b(
     "relative inline-flex items-center whitespace-nowrap font-normal select-none",
-    "transition-colors duration-(--duration-fast) cursor-pointer",
+    "transition-colors duration-150 cursor-pointer",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
   ),
@@ -142,7 +146,7 @@ const q = L(
       variant: {
         primary: "justify-center rounded-md",
         secondary: "",
-        pill: "justify-center rounded-full"
+        pill: "justify-center"
       },
       orientation: {
         horizontal: "",
@@ -161,19 +165,19 @@ const q = L(
     compoundVariants: [
       // Sizing — differs per variant (primary is filled, secondary is
       // flush-underline).
-      { 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: "primary", size: "sm", className: "h-6 rounded-sm px-2.5" },
+      { variant: "primary", size: "md", className: "h-8 rounded-md px-3" },
+      { variant: "primary", size: "lg", className: "h-9 rounded-md px-4" },
+      // Legacy `pill` API — visually these are separate compact filter tabs,
+      // with the same size-based 4px / 8px radii as every other control.
+      { variant: "pill", size: "sm", className: "h-6 rounded-sm px-2.5 gap-1" },
+      { variant: "pill", size: "md", className: "h-7 rounded-md px-3 gap-1" },
+      { variant: "pill", size: "lg", className: "h-8 rounded-md 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"
+        className: "bg-muted text-muted-foreground hover:bg-accent hover:text-foreground"
       },
       // Secondary horizontal: -1px sits over the rail so the sliding
       // indicator overlaps it cleanly.
@@ -222,126 +226,134 @@ const q = L(
       selected: !1
     }
   }
-), C = t.forwardRef(
-  ({ className: o, value: e, isDisabled: a, count: n, children: s, onClick: l, onKeyDown: m, ...$ }, j) => {
+), F = r.forwardRef(
+  ({ className: s, value: e, isDisabled: a, count: i, children: o, onClick: l, onKeyDown: u, ...R }, A) => {
     const {
-      value: R,
+      value: k,
       setValue: h,
-      baseId: v,
+      baseId: N,
       registerTab: z,
       tabs: w,
       disabled: d,
       thumbId: y,
-      variant: g,
+      variant: v,
       orientation: x,
       size: T
-    } = I("Tab"), c = R === e;
-    t.useEffect(() => {
+    } = j("Tab"), c = k === e;
+    r.useEffect(() => {
       z(e);
-    }, [z, e]), t.useEffect(() => {
+    }, [z, e]), r.useEffect(() => {
       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;
+    const V = (t) => {
+      if (u == null || u(t), t.defaultPrevented) return;
+      const m = w.current, g = m.indexOf(e);
+      if (g === -1) return;
+      const U = x === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], C = x === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+      let n = null;
+      if (U.includes(t.key)) {
+        n = g;
         do
-          i = (i + 1) % u.length;
-        while (d.current.has(u[i]) && i !== N);
-      } else if (U.includes(r.key)) {
-        i = N;
+          n = (n + 1) % m.length;
+        while (d.current.has(m[n]) && n !== g);
+      } else if (C.includes(t.key)) {
+        n = g;
         do
-          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;
+          n = (n - 1 + m.length) % m.length;
+        while (d.current.has(m[n]) && n !== g);
+      } else if (t.key === "Home")
+        n = m.findIndex((p) => !d.current.has(p));
+      else if (t.key === "End") {
+        for (let p = m.length - 1; p >= 0; p--)
+          if (!d.current.has(m[p])) {
+            n = p;
             break;
           }
       }
-      if (i !== null && i !== -1) {
-        r.preventDefault();
-        const p = u[i];
+      if (n !== null && n !== -1) {
+        t.preventDefault();
+        const p = m[n];
         h(p);
-        const k = document.getElementById(`${v}-tab-${p}`);
-        k == null || k.focus();
+        const E = document.getElementById(I(N, "tab", p));
+        E == null || E.focus();
       }
     };
-    return /* @__PURE__ */ E(
+    return /* @__PURE__ */ L(
       "button",
       {
-        ref: j,
+        ref: A,
         type: "button",
         role: "tab",
-        id: `${v}-tab-${e}`,
+        id: I(N, "tab", e),
         "aria-selected": c,
-        "aria-controls": `${v}-panel-${e}`,
         "aria-disabled": a || void 0,
         disabled: a,
         "data-selected": c || void 0,
         "data-disabled": a || void 0,
         tabIndex: c && !a ? 0 : -1,
         className: b(
-          q({ variant: g, orientation: x, size: T, selected: c }),
-          o
+          q({ variant: v, orientation: x, size: T, selected: c }),
+          s
         ),
-        onClick: (r) => {
-          l == null || l(r), a || h(e);
+        onClick: (t) => {
+          l == null || l(t), a || h(e);
         },
-        onKeyDown: A,
-        ...$,
+        onKeyDown: V,
+        ...R,
         children: [
-          c && g === "primary" && /* @__PURE__ */ f(
-            S.span,
+          c && v === "primary" && /* @__PURE__ */ f(
+            P.span,
             {
               layoutId: y,
               "aria-hidden": !0,
-              transition: { duration: 0.2, ease: V },
-              className: "absolute inset-0 rounded-md bg-elevated shadow-elevation"
+              transition: S,
+              className: "absolute inset-0 rounded-[inherit] bg-elevated shadow-elevation"
             }
           ),
-          c && g === "secondary" && /* @__PURE__ */ f(
-            S.span,
+          c && v === "secondary" && /* @__PURE__ */ f(
+            P.span,
             {
               layoutId: y,
               "aria-hidden": !0,
-              transition: { duration: 0.2, ease: V },
+              transition: S,
               className: b(
                 "absolute bg-brand",
                 x === "horizontal" ? "left-0 right-0 bottom-0 h-0.5" : "top-0 bottom-0 right-0 w-0.5"
               )
             }
           ),
-          /* @__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
-            ] })
+          /* @__PURE__ */ L("span", { className: "relative inline-flex items-center gap-1", children: [
+            o,
+            i != null && /* @__PURE__ */ L(
+              "span",
+              {
+                className: b(
+                  "tabular-nums",
+                  c && v === "pill" ? "text-background/70" : "text-secondary"
+                ),
+                children: [
+                  "· ",
+                  i
+                ]
+              }
+            )
           ] })
         ]
       }
     );
   }
 );
-C.displayName = "Tab";
-const F = t.forwardRef(
-  ({ className: o, ...e }, a) => {
-    const { orientation: n, variant: s } = I("TabSeparator");
-    return s === "primary" ? /* @__PURE__ */ f(
+F.displayName = "Tab";
+const G = r.forwardRef(
+  ({ className: s, ...e }, a) => {
+    const { orientation: i, variant: o } = j("TabSeparator");
+    return o === "primary" ? /* @__PURE__ */ f(
       "span",
       {
         ref: a,
         "aria-hidden": !0,
         role: "separator",
-        className: b("shrink-0", o),
+        className: b("shrink-0", s),
         ...e
       }
     ) : /* @__PURE__ */ f(
@@ -352,41 +364,41 @@ const F = t.forwardRef(
         role: "separator",
         className: b(
           "shrink-0 bg-border",
-          n === "horizontal" ? "mx-1 h-4 w-px" : "my-1 h-px w-full",
-          o
+          i === "horizontal" ? "mx-1 h-4 w-px" : "my-1 h-px w-full",
+          s
         ),
         ...e
       }
     );
   }
 );
-F.displayName = "TabSeparator";
-const G = t.forwardRef(
-  ({ className: o, value: e, children: a, ...n }, s) => {
-    const { value: l, baseId: m } = I("TabPanel");
+G.displayName = "TabSeparator";
+const J = r.forwardRef(
+  ({ className: s, value: e, children: a, ...i }, o) => {
+    const { value: l, baseId: u } = j("TabPanel");
     return l !== e ? null : /* @__PURE__ */ f(
       "div",
       {
-        ref: s,
+        ref: o,
         role: "tabpanel",
-        id: `${m}-panel-${e}`,
-        "aria-labelledby": `${m}-tab-${e}`,
+        id: I(u, "panel", e),
+        "aria-labelledby": I(u, "tab", e),
         tabIndex: 0,
         className: b(
           "flex-1 outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",
-          o
+          s
         ),
-        ...n,
+        ...i,
         children: a
       }
     );
   }
 );
-G.displayName = "TabPanel";
+J.displayName = "TabPanel";
 export {
-  C as Tab,
+  F as Tab,
   _ as TabList,
-  G as TabPanel,
-  F as TabSeparator,
-  B as Tabs
+  J as TabPanel,
+  G as TabSeparator,
+  H as Tabs
 };