@actioneer/ads 0.5.9 → 0.6.0

package/components/panel.js

@@ -1,13 +1,14 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as n } from "../lib/cn.js";
-const s = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+import { jsx as t } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as o } from "../lib/cn.js";
+const l = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "div",
     {
       ref: r,
-      className: n(
+      "data-slot": "panel",
+      className: o(
         // Static surface — delineated by color alone (elevation is reserved for
         // actionable surfaces).
         "flex min-h-0 min-w-0 flex-col overflow-hidden rounded-lg bg-card",
@@ -17,55 +18,57 @@ const s = l.forwardRef(
     }
   )
 );
-s.displayName = "Panel";
-const t = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+l.displayName = "Panel";
+const s = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "div",
     {
       ref: r,
-      className: n(
-        "flex h-[var(--panel-header-height)] shrink-0 items-center justify-between gap-2",
-        "border-b border-border bg-card px-3",
+      className: o(
+        "relative flex h-[var(--panel-header-height)] shrink-0 items-center justify-between gap-2",
+        "border-b-0 bg-card px-3",
+        "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px",
+        "after:bg-[linear-gradient(to_right,var(--color-border)_0%,transparent_100%)] after:content-['']",
         e
       ),
       ...a
     }
   )
 );
-t.displayName = "PanelHeader";
-const d = l.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
+s.displayName = "PanelHeader";
+const i = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "h2",
   {
     ref: r,
-    className: n("flex min-w-0 items-center gap-2 truncate text-xs font-medium text-foreground", e),
+    className: o("flex min-w-0 items-center gap-2 truncate text-xs font-medium text-foreground", e),
     ...a
   }
 ));
-d.displayName = "PanelTitle";
-const i = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, className: n("flex shrink-0 items-center gap-1", e), ...a })
+i.displayName = "PanelTitle";
+const d = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t("div", { ref: r, className: o("flex shrink-0 items-center gap-1", e), ...a })
 );
-i.displayName = "PanelToolbar";
-const f = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, tabIndex: 0, className: n("min-h-0 flex-1 overflow-auto p-4", e), ...a })
+d.displayName = "PanelToolbar";
+const f = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t("div", { ref: r, tabIndex: 0, className: o("min-h-0 flex-1 overflow-auto p-4", e), ...a })
 );
 f.displayName = "PanelBody";
-const m = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+const m = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "div",
     {
       ref: r,
-      className: n("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
+      className: o("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
       ...a
     }
   )
 );
 m.displayName = "PanelFooter";
 export {
-  s as Panel,
+  l as Panel,
   f as PanelBody,
   m as PanelFooter,
-  t as PanelHeader,
-  d as PanelTitle,
-  i as PanelToolbar
+  s as PanelHeader,
+  i as PanelTitle,
+  d as PanelToolbar
 };

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
 };