@actioneer/ads 0.5.8 → 0.6.0

package/components/tabs.js

@@ -93,7 +93,7 @@ const O = $("inline-flex", {
     }
   },
   compoundVariants: [
-    // Track radius follows control size: compact = 4px, standard = 8px.
+    // Track radius follows control size: compact = 4px, standard = 6px.
     { variant: "primary", size: "sm", className: "rounded-sm" },
     { variant: "primary", size: "md", className: "rounded-md" },
     { variant: "primary", size: "lg", className: "rounded-md" },

package/components/tree.js

@@ -1,91 +1,119 @@
 "use client";
-import { jsx as e, jsxs as h, Fragment as y } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as T } from "react/jsx-runtime";
 import * as t from "react";
-import { MotionConfig as M, AnimatePresence as _, motion as z } from "motion/react";
-import { cn as a } from "../lib/cn.js";
-import { ChevronRight as D, FileText as S } from "../lib/icons.js";
-import { springDisclosure as V } from "../lib/motion.js";
-const W = t.forwardRef(({ className: s, ...c }, d) => /* @__PURE__ */ e(
+import { MotionConfig as _, AnimatePresence as $, motion as D } from "motion/react";
+import { cn as d } from "../lib/cn.js";
+import { ChevronRight as V, FileText as W } from "../lib/icons.js";
+import { springDisclosure as q } from "../lib/motion.js";
+const B = t.forwardRef(({ className: f, ...o }, m) => /* @__PURE__ */ e(
   "div",
   {
-    ref: d,
+    ref: m,
     role: "tree",
-    className: a("flex flex-col gap-0.5 text-xs", s),
-    ...c
+    className: d("flex flex-col gap-0.5 text-xs", f),
+    ...o
   }
 ));
-W.displayName = "Tree";
-const q = t.forwardRef(
+B.displayName = "Tree";
+const E = t.forwardRef(
   ({
-    className: s,
-    label: c,
-    icon: d,
-    count: p,
-    endContent: N,
-    defaultExpanded: w = !1,
-    expanded: x,
-    onExpandedChange: f,
-    href: g,
-    isActive: o,
-    onSelect: C,
-    children: n,
-    ...I
-  }, k) => {
-    const r = t.Children.count(n) > 0, v = x !== void 0, [T, R] = t.useState(w), i = v ? x : T, j = (l) => {
-      v || R(l), f == null || f(l);
-    }, m = a(
-      "flex h-9 w-full items-center gap-2 rounded-md px-2 text-left",
+    className: f,
+    label: o,
+    icon: m,
+    count: g,
+    endContent: x,
+    defaultExpanded: R = !1,
+    expanded: v,
+    onExpandedChange: u,
+    href: y,
+    isActive: s,
+    onSelect: b,
+    children: l,
+    ...j
+  }, z) => {
+    const n = t.Children.count(l) > 0, N = v !== void 0, [F, M] = t.useState(R), r = N ? v : F, w = (c) => {
+      N || M(c), u == null || u(c);
+    }, a = d(
+      "flex h-9 w-full items-center gap-1.5 rounded-md px-2 text-left",
       "outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring",
       "[&_svg]:size-4 [&_svg]:shrink-0",
-      o ? "bg-fill font-normal text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground"
-    ), u = d ?? (r ? null : /* @__PURE__ */ e(S, { className: "text-tertiary" })), F = o && t.isValidElement(u) ? t.cloneElement(
-      u,
+      s ? "bg-fill font-normal text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground"
+    ), h = m ?? (n ? null : /* @__PURE__ */ e(W, { className: "text-tertiary" })), C = s && t.isValidElement(h) ? t.cloneElement(
+      h,
       { weight: "fill" }
-    ) : u, b = /* @__PURE__ */ h(y, { children: [
-      F,
-      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: c }),
-      N,
-      r && /* @__PURE__ */ h(y, { children: [
-        (p ?? t.Children.count(n)) > 0 && /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums text-xs text-tertiary", children: p ?? t.Children.count(n) }),
+    ) : h, k = /* @__PURE__ */ e(
+      V,
+      {
+        className: d(
+          "text-muted-foreground transition-transform duration-150 motion-reduce:transition-none",
+          r && "rotate-90"
+        ),
+        strokeWidth: 2
+      }
+    ), I = (g ?? t.Children.count(l)) > 0 && /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums text-xs text-tertiary", children: g ?? t.Children.count(l) }), p = /* @__PURE__ */ i(T, { children: [
+      C,
+      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: o }),
+      x,
+      n && /* @__PURE__ */ i(T, { children: [
+        I,
+        k
+      ] })
+    ] });
+    return /* @__PURE__ */ i("div", { ref: z, role: "treeitem", "aria-expanded": n ? r : void 0, "aria-selected": s, className: f, ...j, children: [
+      n && b ? /* @__PURE__ */ i("div", { className: a, children: [
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-sm outline-none focus-visible:ring-3 focus-visible:ring-ring",
+            onClick: b,
+            children: [
+              C,
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: o })
+            ]
+          }
+        ),
+        x,
+        I,
         /* @__PURE__ */ e(
-          D,
+          "button",
           {
-            className: a(
-              "text-muted-foreground transition-transform duration-150 motion-reduce:transition-none",
-              i && "rotate-90"
-            ),
-            strokeWidth: 2
+            type: "button",
+            "aria-label": `${r ? "Collapse" : "Expand"} ${typeof o == "string" ? o : "tree item"}`,
+            "aria-expanded": r,
+            className: "inline-flex size-7 shrink-0 items-center justify-center rounded-sm outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
+            onClick: () => w(!r),
+            children: k
           }
         )
-      ] })
-    ] });
-    return /* @__PURE__ */ h("div", { ref: k, role: "treeitem", "aria-expanded": r ? i : void 0, "aria-selected": o, className: s, ...I, children: [
-      r ? /* @__PURE__ */ e("button", { type: "button", className: m, onClick: () => j(!i), children: b }) : g ? /* @__PURE__ */ e("a", { href: g, className: m, "aria-current": o ? "page" : void 0, children: b }) : /* @__PURE__ */ e("button", { type: "button", className: m, onClick: C, children: b }),
-      /* @__PURE__ */ e(M, { reducedMotion: "user", children: /* @__PURE__ */ e(_, { initial: !1, children: r && i && /* @__PURE__ */ e(
-        z.div,
+      ] }) : n ? /* @__PURE__ */ e("button", { type: "button", className: a, onClick: () => w(!r), children: p }) : y ? /* @__PURE__ */ e("a", { href: y, className: a, "aria-current": s ? "page" : void 0, children: p }) : /* @__PURE__ */ e("button", { type: "button", className: a, onClick: b, children: p }),
+      /* @__PURE__ */ e(_, { reducedMotion: "user", children: /* @__PURE__ */ e($, { initial: !1, children: n && r && /* @__PURE__ */ e(
+        D.div,
         {
           role: "group",
           initial: { height: 0, opacity: 0, y: -4 },
           animate: { height: "auto", opacity: 1, y: 0 },
           exit: { height: 0, opacity: 0, y: -4 },
-          transition: V,
+          transition: q,
           className: "ml-4 flex flex-col gap-0.5 overflow-hidden",
-          children: t.Children.map(n, (l) => /* @__PURE__ */ e(
+          children: t.Children.map(l, (c) => /* @__PURE__ */ e(
             "div",
             {
-              className: a(
+              className: d(
                 "relative ps-5",
                 // Continuous vertical rail — a straight line (no radius) so it
                 // never breaks between children. The LAST child needs no rail
                 // at all: the elbow's own left border draws its final vertical
                 // segment, so a rail there would poke through the curve.
-                "before:absolute before:left-0 before:top-0 before:bottom-0 before:border-l before:border-border before:content-['']",
+                // Extend through the group's 2px row gap so the shared
+                // spine remains visually continuous between elbows.
+                "before:absolute before:left-0 before:top-0 before:-bottom-0.5 before:border-l before:border-border before:content-['']",
                 "last:before:hidden",
                 // Rounded elbow branching off the rail to this child. Its own
                 // left border overlaps the rail, so the curve reads cleanly.
                 "after:absolute after:left-0 after:top-0 after:h-4 after:w-4 after:rounded-bl-[9px] after:border-b after:border-l after:border-border after:content-['']"
               ),
-              children: l
+              children: c
             }
           ))
         }
@@ -93,8 +121,8 @@ const q = t.forwardRef(
     ] });
   }
 );
-q.displayName = "TreeItem";
+E.displayName = "TreeItem";
 export {
-  W as Tree,
-  q as TreeItem
+  B as Tree,
+  E as TreeItem
 };