@actioneer/ads 0.5.9 → 0.7.0

package/components/toast.js

@@ -1,190 +1,253 @@
 "use client";
-import { jsxs as P, jsx as c } from "react/jsx-runtime";
-import * as o from "react";
-import { createPortal as W } from "react-dom";
-import { MotionConfig as A, AnimatePresence as F, motion as B } from "motion/react";
-import { WarningCircle as D, Warning as V, Info as E, CheckCircle as q, Close as G } from "../lib/icons.js";
-import { cn as g } from "../lib/cn.js";
+import { jsxs as T, jsx as c } from "react/jsx-runtime";
+import * as r from "react";
+import { createPortal as B } from "react-dom";
+import { MotionConfig as V, AnimatePresence as q, motion as G } from "motion/react";
+import { WarningCircle as J, Warning as K, Info as E, CheckCircle as Q, Close as U } from "../lib/icons.js";
+import { cn as p } from "../lib/cn.js";
 import { springOverlay as z } from "../lib/motion.js";
-import { Ripple as J } from "./ripple.js";
-import { Button as K } from "./button.js";
-import { Spinner as Q } from "./spinner.js";
-const S = o.createContext(null);
-function at() {
-  const b = o.useContext(S);
-  if (!b)
+import { Ripple as X } from "./ripple.js";
+import { Button as Y } from "./button.js";
+import { Spinner as Z } from "./spinner.js";
+const R = r.createContext(null);
+function fe() {
+  const v = r.useContext(R);
+  if (!v)
     throw new Error("useToast must be used within a <ToastProvider>.");
-  const { push: a, close: p, clear: d } = b;
-  return { toast: o.useMemo(() => {
-    const s = ((r, i) => {
-      if (r !== null && typeof r == "object" && !o.isValidElement(r)) {
-        const { title: f, ...m } = r;
-        return a(f, { ...m, ...i });
+  const { push: l, close: g, clear: d } = v;
+  return { toast: r.useMemo(() => {
+    const u = ((s, a) => {
+      if (s !== null && typeof s == "object" && !r.isValidElement(s)) {
+        const { title: i, ...h } = s;
+        return l(i, { ...h, ...a });
       }
-      return a(r, i);
-    }), l = (r) => (i, f) => a(i, { ...f, variant: r });
-    return s.success = l("success"), s.info = l("info"), s.warning = l("warning"), s.danger = l("danger"), s.close = p, s.clear = d, s.promise = (r, i) => {
-      const f = a(i.loading, { isLoading: !0, timeout: 0 });
-      return r.then((m) => {
-        p(f), a(
-          typeof i.success == "function" ? i.success(m) : i.success,
+      return l(s, a);
+    }), f = (s) => (a, i) => l(a, { ...i, variant: s });
+    return u.success = f("success"), u.info = f("info"), u.warning = f("warning"), u.danger = f("danger"), u.close = g, u.clear = d, u.promise = (s, a) => {
+      const i = l(a.loading, { isLoading: !0, timeout: 0 });
+      return s.then((h) => {
+        g(i), l(
+          typeof a.success == "function" ? a.success(h) : a.success,
           { variant: "success" }
         );
-      }).catch((m) => {
-        p(f), a(
-          typeof i.error == "function" ? i.error(m) : i.error,
+      }).catch((h) => {
+        g(i), l(
+          typeof a.error == "function" ? a.error(h) : a.error,
           { variant: "danger" }
         );
-      }), r;
-    }, s;
-  }, [a, p, d]) };
+      }), s;
+    }, u;
+  }, [l, g, d]) };
 }
-const U = {
-  default: { icon: E, accent: "text-foreground" },
-  success: { icon: q, accent: "text-success-700" },
-  info: { icon: E, accent: "text-info-700" },
-  warning: { icon: V, accent: "text-warning-700" },
-  danger: { icon: D, accent: "text-danger-700" }
-}, X = {
+const ee = {
+  default: { icon: E, accent: "text-foreground", progress: "bg-action-primary" },
+  success: { icon: Q, accent: "text-success-700", progress: "bg-success-700" },
+  info: { icon: E, accent: "text-info-700", progress: "bg-info-700" },
+  warning: { icon: K, accent: "text-warning-700", progress: "bg-warning-700" },
+  danger: { icon: J, accent: "text-danger-700", progress: "bg-danger-700" }
+}, te = {
   "bottom-end": "bottom-4 right-4",
   bottom: "bottom-4 left-1/2 -translate-x-1/2",
   "bottom-start": "bottom-4 left-4",
   "top-end": "top-4 right-4",
   top: "top-4 left-1/2 -translate-x-1/2",
   "top-start": "top-4 left-4"
-}, R = 12, Y = 0.05;
-function lt({
-  children: b,
-  placement: a = "bottom-end",
-  maxVisible: p = 3
+}, A = 12, ne = 0.05;
+function he({
+  children: v,
+  placement: l = "bottom-end",
+  maxVisible: g = 3
 }) {
   var M;
-  const [d, y] = o.useState([]), s = o.useRef(/* @__PURE__ */ new Map()), l = o.useRef(/* @__PURE__ */ new Map()), r = o.useCallback((t) => {
-    y((u) => u.filter((h) => h.id !== t));
-    const n = s.current.get(t);
-    n && (clearTimeout(n), s.current.delete(t));
-    const e = l.current.get(t);
-    l.current.delete(t), e == null || e();
-  }, []), i = o.useCallback(() => {
-    y((t) => (t.forEach((n) => {
-      var u;
-      const e = s.current.get(n.id);
-      e && clearTimeout(e), s.current.delete(n.id), (u = l.current.get(n.id)) == null || u(), l.current.delete(n.id);
+  const [d, w] = r.useState([]), [u, f] = r.useState(/* @__PURE__ */ new Set()), s = r.useRef(/* @__PURE__ */ new Map()), a = r.useRef(/* @__PURE__ */ new Map()), i = r.useCallback((e) => {
+    w((o) => o.filter((m) => m.id !== e));
+    const t = s.current.get(e);
+    t != null && t.handle && clearTimeout(t.handle), s.current.delete(e), f((o) => {
+      if (!o.has(e)) return o;
+      const m = new Set(o);
+      return m.delete(e), m;
+    });
+    const n = a.current.get(e);
+    a.current.delete(e), n == null || n();
+  }, []), h = r.useCallback(() => {
+    f(/* @__PURE__ */ new Set()), w((e) => (e.forEach((t) => {
+      var o;
+      const n = s.current.get(t.id);
+      n != null && n.handle && clearTimeout(n.handle), s.current.delete(t.id), (o = a.current.get(t.id)) == null || o(), a.current.delete(t.id);
     }), []));
-  }, []), f = o.useCallback(
-    (t, n = {}) => {
-      const e = Math.random().toString(36).slice(2), u = { variant: "default", ...n, id: e, title: t };
-      y((x) => [...x, u]), l.current.set(e, n.onClose);
-      const h = n.timeout ?? n.duration ?? (n.isLoading ? 0 : 5e3);
-      return h > 0 && s.current.set(e, setTimeout(() => r(e), h)), e;
+  }, []), k = r.useCallback(
+    (e, t = {}) => {
+      const n = Math.random().toString(36).slice(2), o = t.timeout ?? t.duration ?? (t.isLoading ? 0 : 5e3), m = {
+        variant: "default",
+        ...t,
+        id: n,
+        title: e,
+        dismissAfter: o
+      };
+      return w((b) => [...b, m]), a.current.set(n, t.onClose), o > 0 && s.current.set(n, {
+        handle: setTimeout(() => i(n), o),
+        remaining: o,
+        startedAt: Date.now()
+      }), n;
     },
-    [r]
+    [i]
+  ), I = r.useCallback((e) => {
+    const t = s.current.get(e);
+    t != null && t.handle && (clearTimeout(t.handle), t.remaining = Math.max(0, t.remaining - (Date.now() - t.startedAt)), t.handle = null, f((n) => {
+      if (n.has(e)) return n;
+      const o = new Set(n);
+      return o.add(e), o;
+    }));
+  }, []), L = r.useCallback(
+    (e) => {
+      const t = s.current.get(e);
+      if (!(!t || t.handle)) {
+        if (f((n) => {
+          if (!n.has(e)) return n;
+          const o = new Set(n);
+          return o.delete(e), o;
+        }), t.remaining <= 0) {
+          i(e);
+          return;
+        }
+        t.startedAt = Date.now(), t.handle = setTimeout(() => i(e), t.remaining);
+      }
+    },
+    [i]
   );
-  o.useEffect(() => {
-    const t = s.current;
+  r.useEffect(() => {
+    const e = s.current;
     return () => {
-      t.forEach((n) => clearTimeout(n)), t.clear();
+      e.forEach((t) => {
+        t.handle && clearTimeout(t.handle);
+      }), e.clear();
     };
   }, []);
-  const m = o.useMemo(() => ({ push: f, close: r, clear: i }), [f, r, i]), [j, H] = o.useState(!1);
-  o.useEffect(() => H(!0), []);
-  const [w, T] = o.useState(null), k = o.useRef(null), L = (M = d[d.length - 1]) == null ? void 0 : M.id;
-  o.useLayoutEffect(() => {
-    const t = k.current;
-    if (!t) {
-      T(null);
+  const j = r.useMemo(() => ({ push: k, close: i, clear: h }), [k, i, h]), [H, $] = r.useState(!1);
+  r.useEffect(() => $(!0), []);
+  const [y, P] = r.useState(null), S = r.useRef(null), D = (M = d[d.length - 1]) == null ? void 0 : M.id;
+  r.useLayoutEffect(() => {
+    const e = S.current;
+    if (!e) {
+      P(null);
       return;
     }
-    const n = () => T(t.offsetHeight);
-    n();
-    const e = new ResizeObserver(n);
-    return e.observe(t), () => e.disconnect();
-  }, [L]);
-  const v = a.startsWith("top"), I = v ? 1 : -1, _ = Math.min(p, Math.max(d.length, 1)), $ = w != null ? w + R * (_ - 1) : void 0;
-  return /* @__PURE__ */ P(S.Provider, { value: m, children: [
-    b,
-    j && d.length > 0 && W(
+    const t = () => P(e.offsetHeight);
+    t();
+    const n = new ResizeObserver(t);
+    return n.observe(e), () => n.disconnect();
+  }, [D]);
+  const x = l.startsWith("top"), _ = x ? 1 : -1, O = Math.min(g, Math.max(d.length, 1)), W = y != null ? y + A * (O - 1) : void 0;
+  return /* @__PURE__ */ T(R.Provider, { value: j, children: [
+    v,
+    H && d.length > 0 && B(
       /* @__PURE__ */ c(
         "div",
         {
-          className: g(
+          className: p(
             "pointer-events-none fixed z-50 w-full max-w-sm",
-            X[a]
+            te[l]
           ),
-          style: { height: $ },
+          style: { height: W },
           role: "region",
           "aria-label": "Notifications",
-          children: /* @__PURE__ */ c(A, { reducedMotion: "user", children: /* @__PURE__ */ c(F, { children: d.map((t, n) => {
-            const e = d.length - 1 - n, u = e === 0, h = e >= p, x = U[t.variant ?? "default"], O = x.icon;
-            return /* @__PURE__ */ P(
-              B.div,
+          children: /* @__PURE__ */ c(V, { reducedMotion: "user", children: /* @__PURE__ */ c(q, { children: d.map((e, t) => {
+            const n = d.length - 1 - t, o = n === 0, m = n >= g, b = ee[e.variant ?? "default"], F = b.icon;
+            return /* @__PURE__ */ T(
+              G.div,
               {
-                ref: u ? k : void 0,
+                ref: o ? S : void 0,
                 layout: !1,
                 role: "status",
                 "aria-live": "polite",
                 initial: {
                   opacity: 0,
-                  transform: `translate3d(0, ${v ? -16 : 16}px, 0) scale(0.98)`
+                  transform: `translate3d(0, ${x ? -16 : 16}px, 0) scale(0.98)`
                 },
                 animate: {
-                  opacity: h ? 0 : 1,
-                  transform: `translate3d(0, ${I * e * R}px, 0) scale(${1 - e * Y})`
+                  opacity: m ? 0 : 1,
+                  transform: `translate3d(0, ${_ * n * A}px, 0) scale(${1 - n * ne})`
                 },
                 exit: {
                   opacity: 0,
-                  transform: `translate3d(0, ${v ? -16 : 16}px, 0) scale(0.98)`,
+                  transform: `translate3d(0, ${x ? -16 : 16}px, 0) scale(0.98)`,
                   transition: z
                 },
                 transition: z,
-                className: g(
+                onMouseEnter: () => I(e.id),
+                onMouseLeave: () => L(e.id),
+                className: p(
                   "group/toast absolute inset-x-0 flex items-start gap-1.5",
-                  v ? "top-0" : "bottom-0",
-                  "rounded-2xl bg-elevated px-4 py-3 shadow-elevation",
-                  u ? "pointer-events-auto" : "pointer-events-none overflow-hidden"
+                  x ? "top-0" : "bottom-0",
+                  "rounded-2xl border border-toast-stroke bg-elevated px-4 py-3 shadow-300",
+                  o ? "pointer-events-auto" : "pointer-events-none overflow-hidden"
                 ),
                 style: {
-                  zIndex: 100 - e,
+                  zIndex: 100 - n,
                   // Behind layers freeze at the front card's height so
                   // only their top edge shows as a clean sliver.
-                  height: !u && w != null ? w : void 0
+                  height: !o && y != null ? y : void 0
                 },
                 children: [
-                  /* @__PURE__ */ c(J, { origin: v ? "top" : "bottom" }),
+                  /* @__PURE__ */ c(X, { origin: x ? "top" : "bottom" }),
+                  e.dismissAfter > 0 && // The countdown reads as the card's bottom bar stroke:
+                  // a full-bleed edge bar clipped by the card's radius,
+                  // not an inset line element floating inside the toast.
+                  /* @__PURE__ */ T(
+                    "span",
+                    {
+                      "aria-hidden": !0,
+                      className: "pointer-events-none absolute inset-0 overflow-hidden rounded-2xl",
+                      children: [
+                        /* @__PURE__ */ c("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-toast-stroke" }),
+                        /* @__PURE__ */ c(
+                          "span",
+                          {
+                            "data-toast-progress": !0,
+                            className: p("absolute inset-x-0 bottom-0 block h-0.5 origin-left", b.progress),
+                            style: {
+                              animation: `ads-toast-progress ${e.dismissAfter}ms linear forwards`,
+                              animationPlayState: u.has(e.id) ? "paused" : "running"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ),
                   /* @__PURE__ */ c(
                     "span",
                     {
-                      className: g(
+                      className: p(
                         "flex shrink-0 select-none items-center justify-center p-1 [&_svg]:size-4",
-                        x.accent
+                        b.accent
                       ),
-                      children: t.isLoading ? /* @__PURE__ */ c(Q, { variant: "action", size: "sm", "aria-hidden": !0 }) : t.indicator ?? /* @__PURE__ */ c(O, { "aria-hidden": !0 })
+                      children: e.isLoading ? /* @__PURE__ */ c(Z, { variant: "action", size: "sm", "aria-hidden": !0 }) : e.indicator ?? /* @__PURE__ */ c(F, { "aria-hidden": !0 })
                     }
                   ),
-                  /* @__PURE__ */ P("div", { className: "flex min-w-0 grow flex-col items-start self-center", children: [
-                    /* @__PURE__ */ c("p", { className: g("text-xs font-normal leading-5", x.accent), children: t.title }),
-                    t.description && /* @__PURE__ */ c("p", { className: "text-xs text-muted-foreground", children: t.description })
+                  /* @__PURE__ */ T("div", { className: "flex min-w-0 grow flex-col items-start self-center", children: [
+                    /* @__PURE__ */ c("p", { className: p("text-m font-medium", b.accent), children: e.title }),
+                    e.description && /* @__PURE__ */ c("p", { className: "text-xs text-muted-foreground", children: e.description })
                   ] }),
-                  t.actionProps && /* @__PURE__ */ c(
-                    K,
+                  e.actionProps && /* @__PURE__ */ c(
+                    Y,
                     {
                       size: "sm",
-                      variant: t.actionProps.variant ?? "soft",
-                      className: g("ml-2 shrink-0 self-center rounded-full", t.actionProps.className),
+                      variant: e.actionProps.variant ?? "secondary",
+                      className: p("ml-2 shrink-0 self-center rounded-full", e.actionProps.className),
                       onClick: () => {
                         var C, N;
-                        return (N = (C = t.actionProps) == null ? void 0 : C.onClick) == null ? void 0 : N.call(C);
+                        return (N = (C = e.actionProps) == null ? void 0 : C.onClick) == null ? void 0 : N.call(C);
                       },
-                      children: t.actionProps.children
+                      children: e.actionProps.children
                     }
                   ),
                   /* @__PURE__ */ c(
                     "button",
                     {
                       type: "button",
-                      onClick: () => r(t.id),
+                      onClick: () => i(e.id),
                       "aria-label": "Dismiss",
-                      className: g(
+                      className: p(
                         "absolute -right-1 -top-1 inline-flex size-5 items-center justify-center",
                         "rounded-full border border-border bg-elevated text-muted-foreground shadow-elevation",
                         "opacity-0 transition-opacity duration-150 ease-out",
@@ -193,12 +256,12 @@ function lt({
                         "outline-none focus-visible:ring-2 focus-visible:ring-ring",
                         "[&_svg]:size-3 [&_svg]:shrink-0"
                       ),
-                      children: /* @__PURE__ */ c(G, { "aria-hidden": !0 })
+                      children: /* @__PURE__ */ c(U, { "aria-hidden": !0 })
                     }
                   )
                 ]
               },
-              t.id
+              e.id
             );
           }) }) })
         }
@@ -208,6 +271,6 @@ function lt({
   ] });
 }
 export {
-  lt as ToastProvider,
-  at as useToast
+  he as ToastProvider,
+  fe as useToast
 };

package/components/tree.d.ts

@@ -17,7 +17,11 @@ import * as React from "react";
  * The connector is a functional stroke (like Divider), not a surface border —
  * the one sanctioned place strokes belong (principle 1).
  */
-export declare const Tree: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Match Tree rows to Sidebar navigation styling. */
+    variant?: "default" | "sidebar";
+}
+export declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLDivElement>>;
 export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
     /** Row label. */
     label: React.ReactNode;

package/components/tree.js

@@ -1,91 +1,124 @@
 "use client";
-import { jsx as e, jsxs as h, Fragment as y } from "react/jsx-runtime";
+import { jsx as e, jsxs as n, 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(
-  "div",
-  {
-    ref: d,
-    role: "tree",
-    className: a("flex flex-col gap-0.5 text-xs", s),
-    ...c
-  }
-));
-W.displayName = "Tree";
-const q = t.forwardRef(
+import { MotionConfig as M, AnimatePresence as $, motion as D } from "motion/react";
+import { cn as f } 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: u, variant: a = "default", ...m }, i) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: i,
+      role: "tree",
+      "data-variant": a,
+      className: f("group/tree flex flex-col gap-0.5 text-xs", u),
+      ...m
+    }
+  )
+);
+B.displayName = "Tree";
+const E = t.forwardRef(
   ({
-    className: s,
-    label: c,
-    icon: d,
-    count: p,
-    endContent: N,
-    defaultExpanded: w = !1,
+    className: u,
+    label: a,
+    icon: m,
+    count: i,
+    endContent: v,
+    defaultExpanded: R = !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",
+    onExpandedChange: g,
+    href: y,
+    isActive: s,
+    onSelect: b,
+    children: l,
+    ..._
+  }, j) => {
+    const o = t.Children.count(l) > 0, N = x !== void 0, [z, F] = t.useState(R), r = N ? x : z, w = (c) => {
+      N || F(c), g == null || g(c);
+    }, d = f(
+      "group/tree-row 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,
+      "group-data-[variant=sidebar]/tree:border group-data-[variant=sidebar]/tree:border-transparent group-data-[variant=sidebar]/tree:text-ng11",
+      "group-data-[variant=sidebar]/tree:[&_svg]:size-5 group-data-[variant=sidebar]/tree:[&_svg]:text-ng11",
+      s ? "bg-fill font-normal text-foreground group-data-[variant=sidebar]/tree:border-ng4 group-data-[variant=sidebar]/tree:bg-ng2 group-data-[variant=sidebar]/tree:text-ng11" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground group-data-[variant=sidebar]/tree:hover:bg-ng1 group-data-[variant=sidebar]/tree:hover:text-ng11"
+    ), p = m ?? (o ? null : /* @__PURE__ */ e(W, { className: "text-tertiary" })), k = s && t.isValidElement(p) ? t.cloneElement(
+      p,
       { 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) }),
+    ) : p, C = /* @__PURE__ */ e(
+      V,
+      {
+        className: f(
+          "text-muted-foreground transition-transform duration-150 motion-reduce:transition-none",
+          r && "rotate-90"
+        ),
+        strokeWidth: 2
+      }
+    ), I = (i ?? t.Children.count(l)) > 0 && /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums text-xs text-tertiary", children: i ?? t.Children.count(l) }), h = /* @__PURE__ */ n(T, { children: [
+      k,
+      /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: a }),
+      v,
+      o && /* @__PURE__ */ n(T, { children: [
+        I,
+        C
+      ] })
+    ] });
+    return /* @__PURE__ */ n("div", { ref: j, role: "treeitem", "aria-expanded": o ? r : void 0, "aria-selected": s, className: u, ..._, children: [
+      o && b ? /* @__PURE__ */ n("div", { className: d, children: [
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: "flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left outline-none focus-visible:ring-3 focus-visible:ring-ring",
+            onClick: b,
+            children: [
+              k,
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: a })
+            ]
+          }
+        ),
+        v,
+        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 a == "string" ? a : "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: C
           }
         )
-      ] })
-    ] });
-    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,
+      ] }) : o ? /* @__PURE__ */ e("button", { type: "button", className: d, onClick: () => w(!r), children: h }) : y ? /* @__PURE__ */ e("a", { href: y, className: d, "aria-current": s ? "page" : void 0, children: h }) : /* @__PURE__ */ e("button", { type: "button", className: d, onClick: b, children: h }),
+      /* @__PURE__ */ e(M, { reducedMotion: "user", children: /* @__PURE__ */ e($, { initial: !1, children: o && 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: f(
                 "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-tree-stroke 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-['']"
+                "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-tree-stroke after:content-['']"
               ),
-              children: l
+              children: c
             }
           ))
         }
@@ -93,8 +126,8 @@ const q = t.forwardRef(
     ] });
   }
 );
-q.displayName = "TreeItem";
+E.displayName = "TreeItem";
 export {
-  W as Tree,
-  q as TreeItem
+  B as Tree,
+  E as TreeItem
 };

package/components/typography.d.ts

@@ -4,10 +4,10 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
 }
 export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
 declare const textSizes: {
-    readonly xs: "text-xs";
-    readonly sm: "text-xs";
-    readonly md: "text-base";
-    readonly lg: "text-lg";
+    readonly xs: "text-s";
+    readonly sm: "text-s";
+    readonly md: "text-m";
+    readonly lg: "text-l";
 };
 declare const textWeights: {
     readonly regular: "font-normal";