@actioneer/ads 0.2.4 → 0.3.0

package/components/setting-row.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import * as f from "react";
+import { cva as g } from "class-variance-authority";
+import { cn as o } from "../lib/cn.js";
+const x = g(
+  "flex w-full items-center gap-3 rounded-lg bg-card px-4 py-3 text-left",
+  {
+    variants: {
+      isPressable: {
+        true: o(
+          "cursor-pointer outline-none",
+          "transition-[background-color,transform] duration-(--duration-fast) ease-out",
+          "hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring",
+          "active:scale-(--scale-press) motion-reduce:transition-none"
+        ),
+        false: ""
+      }
+    },
+    defaultVariants: { isPressable: !1 }
+  }
+), p = f.forwardRef(
+  ({ className: r, icon: i, label: n, description: l, action: d, onSelect: e, ...m }, u) => {
+    const a = !!e;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: u,
+        "data-slot": "setting-row",
+        role: a ? "button" : void 0,
+        tabIndex: a ? 0 : void 0,
+        onClick: e,
+        onKeyDown: a ? (t) => {
+          (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e == null || e());
+        } : void 0,
+        className: o(x({ isPressable: a }), r),
+        ...m,
+        children: [
+          i && /* @__PURE__ */ s(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: "flex size-5 shrink-0 items-center justify-center text-tertiary [&>svg]:size-4.5",
+              children: i
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            /* @__PURE__ */ s("div", { className: "min-w-0 truncate text-base text-foreground", children: n }),
+            l && /* @__PURE__ */ s("div", { className: "min-w-0 text-xs text-tertiary", children: l })
+          ] }),
+          d && // The trailing control owns its own click — a pressable row must not
+          // also fire when the reader aims at the button inside it.
+          /* @__PURE__ */ s(
+            "span",
+            {
+              className: "shrink-0",
+              onClick: (t) => t.stopPropagation(),
+              children: d
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+p.displayName = "SettingRow";
+const v = f.forwardRef(
+  ({ className: r, ...i }, n) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: n,
+      "data-slot": "setting-list",
+      className: o(
+        "flex w-full flex-col gap-0.5 rounded-xl bg-surface p-1",
+        r
+      ),
+      ...i
+    }
+  )
+);
+v.displayName = "SettingList";
+export {
+  v as SettingList,
+  p as SettingRow,
+  x as settingRowVariants
+};

package/components/sidebar.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as o from "react";
-import { PanelLeft as R } from "../lib/icons.js";
-import { cn as n } from "../lib/cn.js";
-import { Tooltip as z } from "./tooltip.js";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import * as n from "react";
+import { PanelLeft as k } from "../lib/icons.js";
+import { cn as o } from "../lib/cn.js";
+import { Tooltip as R } from "./tooltip.js";
 import { Avatar as _ } from "./avatar.js";
-const k = o.createContext({
+const z = n.createContext({
   collapsed: !1,
   toggle: () => {
   },
@@ -13,43 +13,43 @@ const k = o.createContext({
   }
 });
 function j() {
-  return o.useContext(k);
+  return n.useContext(z);
 }
-const H = o.forwardRef(
+const H = n.forwardRef(
   ({
     className: a,
     collapsed: e,
-    defaultCollapsed: s = !1,
-    onCollapsedChange: t,
-    keyboardToggle: i = !0,
+    defaultCollapsed: i = !1,
+    onCollapsedChange: r,
+    keyboardToggle: s = !0,
     ...d
-  }, b) => {
-    const [p, h] = o.useState(s), g = e !== void 0, l = g ? e : p, x = o.useCallback(
+  }, f) => {
+    const [p, v] = n.useState(i), b = e !== void 0, l = b ? e : p, h = n.useCallback(
       (u) => {
-        g || h(u), t == null || t(u);
+        b || v(u), r == null || r(u);
       },
-      [g, t]
-    ), m = o.useCallback(
-      () => x(!l),
-      [l, x]
+      [b, r]
+    ), g = n.useCallback(
+      () => h(!l),
+      [l, h]
     );
-    o.useEffect(() => {
-      if (!i) return;
-      const u = (f) => {
-        (f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "b" && (f.preventDefault(), m());
+    n.useEffect(() => {
+      if (!s) return;
+      const u = (m) => {
+        (m.metaKey || m.ctrlKey) && m.key.toLowerCase() === "b" && (m.preventDefault(), g());
       };
       return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
-    }, [i, m]);
-    const v = o.useMemo(
-      () => ({ collapsed: l, toggle: m, setCollapsed: x }),
-      [l, m, x]
+    }, [s, g]);
+    const x = n.useMemo(
+      () => ({ collapsed: l, toggle: g, setCollapsed: h }),
+      [l, g, h]
     );
-    return /* @__PURE__ */ r(k.Provider, { value: v, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ t(z.Provider, { value: x, children: /* @__PURE__ */ t(
       "aside",
       {
-        ref: b,
+        ref: f,
         "data-collapsed": l ? "true" : "false",
-        className: n(
+        className: o(
           "group/sidebar flex h-full shrink-0 flex-col bg-transparent",
           l ? "w-(--sidebar-width-sm)" : "w-(--sidebar-width)",
           a
@@ -61,43 +61,43 @@ const H = o.forwardRef(
 );
 H.displayName = "Sidebar";
 function S({ children: a }) {
-  return /* @__PURE__ */ r("kbd", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-background/20 px-1 text-xs leading-none", children: a });
+  return /* @__PURE__ */ t("kbd", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-background/20 px-1 text-xs leading-none", children: a });
 }
 function E({
   className: a,
   onClick: e,
-  ...s
+  ...i
 }) {
-  const { collapsed: t, toggle: i } = j();
-  return /* @__PURE__ */ r(
-    z,
+  const { collapsed: r, toggle: s } = j();
+  return /* @__PURE__ */ t(
+    R,
     {
       side: "right",
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
-        t ? "Expand" : "Collapse",
+        r ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
-          /* @__PURE__ */ r(S, { children: "⌘" }),
-          /* @__PURE__ */ r(S, { children: "B" })
+          /* @__PURE__ */ t(S, { children: "⌘" }),
+          /* @__PURE__ */ t(S, { children: "B" })
         ] })
       ] }),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          "aria-label": t ? "Expand sidebar" : "Collapse sidebar",
-          "aria-pressed": t,
+          "aria-label": r ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": r,
           onClick: (d) => {
-            e == null || e(d), i();
+            e == null || e(d), s();
           },
-          className: n(
+          className: o(
             "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground",
             "transition-colors hover:border-border hover:bg-elevated hover:text-foreground",
             "outline-none focus-visible:ring-3 focus-visible:ring-ring",
             "[&_svg]:size-4.5",
             a
           ),
-          ...s,
-          children: /* @__PURE__ */ r(R, {})
+          ...i,
+          children: /* @__PURE__ */ t(k, {})
         }
       )
     }
@@ -106,42 +106,42 @@ function E({
 function X({
   logo: a,
   href: e,
-  label: s = "Home",
-  showTrigger: t = !0,
-  children: i,
+  label: i = "Home",
+  showTrigger: r = !0,
+  children: s,
   className: d,
-  ...b
+  ...f
 }) {
-  const p = n(
+  const p = o(
     // 20px mark centered in a 32px square — the same box as every other rail icon.
     // group/brand lets a BrandMark logo play its blip loop on hover.
     "group/brand flex size-(--sidebar-item) items-center justify-center",
     "[&_img]:size-(--sidebar-logo) [&_svg]:size-(--sidebar-logo)",
-    t && "group-hover/sidebar:hidden"
+    r && "group-hover/sidebar:hidden"
   );
   return /* @__PURE__ */ c(
     "div",
     {
-      className: n(
+      className: o(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         d
       ),
-      ...b,
+      ...f,
       children: [
-        e ? /* @__PURE__ */ r("a", { href: e, "aria-label": s, className: p, children: a }) : /* @__PURE__ */ r("span", { className: p, children: a }),
-        t && /* @__PURE__ */ r("div", { className: "hidden group-hover/sidebar:flex", children: /* @__PURE__ */ r(E, {}) }),
-        i && /* @__PURE__ */ r("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: i })
+        e ? /* @__PURE__ */ t("a", { href: e, "aria-label": i, className: p, children: a }) : /* @__PURE__ */ t("span", { className: p, children: a }),
+        r && /* @__PURE__ */ t("div", { className: "hidden group-hover/sidebar:flex", children: /* @__PURE__ */ t(E, {}) }),
+        s && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: s })
       ]
     }
   );
 }
-const I = o.forwardRef(
-  ({ className: a, ...e }, s) => /* @__PURE__ */ r(
+const I = n.forwardRef(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ t(
     "div",
     {
-      ref: s,
-      className: n(
+      ref: i,
+      className: o(
         "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         a
@@ -151,63 +151,63 @@ const I = o.forwardRef(
   )
 );
 I.displayName = "SidebarHeader";
-const L = o.forwardRef(
-  ({ className: a, ...e }, s) => /* @__PURE__ */ r("nav", { ref: s, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", a), ...e })
+const L = n.forwardRef(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ t("nav", { ref: i, className: o("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", a), ...e })
 );
 L.displayName = "SidebarNav";
-const A = o.forwardRef(
-  ({ className: a, label: e, children: s, ...t }, i) => /* @__PURE__ */ c("div", { ref: i, className: a, ...t, children: [
-    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground group-data-[collapsed=true]/sidebar:hidden", children: e }),
-    /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s })
+const A = n.forwardRef(
+  ({ className: a, label: e, children: i, ...r }, s) => /* @__PURE__ */ c("div", { ref: s, className: a, ...r, children: [
+    e && /* @__PURE__ */ t("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-normal uppercase tracking-wider text-muted-foreground group-data-[collapsed=true]/sidebar:hidden", children: e }),
+    /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: i })
   ] })
 );
 A.displayName = "SidebarSection";
-const K = o.forwardRef(
-  ({ className: a, icon: e, isActive: s, endContent: t, children: i, title: d, ...b }, p) => /* @__PURE__ */ c(
+const K = n.forwardRef(
+  ({ className: a, icon: e, isActive: i, endContent: r, children: s, title: d, ...f }, p) => /* @__PURE__ */ c(
     "a",
     {
       ref: p,
-      "aria-current": s ? "page" : void 0,
-      title: d ?? (typeof i == "string" ? i : void 0),
-      className: n(
-        "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-xs transition-colors",
+      "aria-current": i ? "page" : void 0,
+      title: d ?? (typeof s == "string" ? s : void 0),
+      className: o(
+        "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] transition-colors",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
-        s ? "bg-fill font-medium text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground",
+        i ? "bg-fill font-medium text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground",
         a
       ),
-      ...b,
+      ...f,
       children: [
         e,
-        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: i }),
-        t && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: t })
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
+        r && /* @__PURE__ */ t("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: r })
       ]
     }
   )
 );
 K.displayName = "SidebarItem";
-const M = o.forwardRef(
-  ({ className: a, ...e }, s) => /* @__PURE__ */ r(
+const M = n.forwardRef(
+  ({ className: a, ...e }, i) => /* @__PURE__ */ t(
     "div",
     {
-      ref: s,
-      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
+      ref: i,
+      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
       ...e
     }
   )
 );
 M.displayName = "SidebarFooter";
-const q = o.forwardRef(
-  ({ className: a, icon: e, children: s, ...t }, i) => /* @__PURE__ */ r("div", { className: "px-3 pb-1 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+const q = n.forwardRef(
+  ({ className: a, icon: e, children: i, ...r }, s) => /* @__PURE__ */ t("div", { className: "px-3 pb-1 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
-      ref: i,
+      ref: s,
       type: "button",
-      className: n(
+      className: o(
         "flex h-10 w-full items-center justify-start gap-2 rounded-md bg-elevated px-3",
-        "text-xs font-medium text-foreground",
+        "text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] font-medium text-foreground",
         // Same hover feedback as ConnectorCard: raised at rest, lifts on
         // hover, settles back on press.
         "shadow-elevation",
@@ -218,53 +218,53 @@ const q = o.forwardRef(
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0",
         a
       ),
-      ...t,
+      ...r,
       children: [
         e,
-        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: s })
+        /* @__PURE__ */ t("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
   ) })
 );
 q.displayName = "SidebarAction";
-const B = o.forwardRef(
-  ({ className: a, label: e, children: s, ...t }, i) => /* @__PURE__ */ c(
+const B = n.forwardRef(
+  ({ className: a, label: e, children: i, ...r }, s) => /* @__PURE__ */ c(
     "div",
     {
-      ref: i,
-      className: n("group-data-[collapsed=true]/sidebar:hidden", a),
-      ...t,
+      ref: s,
+      className: o("group-data-[collapsed=true]/sidebar:hidden", a),
+      ...r,
       children: [
-        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: e }),
-        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s })
+        e && /* @__PURE__ */ t("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-semibold uppercase tracking-wider text-muted-foreground", children: e }),
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: i })
       ]
     }
   )
 );
 B.displayName = "SidebarHistory";
-const D = o.forwardRef(({ className: a, children: e, title: s, action: t, isActive: i, icon: d, ...b }, p) => {
-  const h = o.useRef(null), g = o.useRef(null), [l, x] = o.useState(0);
-  o.useLayoutEffect(() => {
-    const u = h.current, f = g.current;
-    if (!u || !f) return;
+const D = n.forwardRef(({ className: a, children: e, title: i, action: r, isActive: s, icon: d, ...f }, p) => {
+  const v = n.useRef(null), b = n.useRef(null), [l, h] = n.useState(0);
+  n.useLayoutEffect(() => {
+    const u = v.current, m = b.current;
+    if (!u || !m) return;
     const N = () => {
-      const w = f.scrollWidth - u.clientWidth;
-      x(w > 0 ? w + (t ? 32 : 0) : 0);
+      const w = m.scrollWidth - u.clientWidth;
+      h(w > 0 ? w + (r ? 32 : 0) : 0);
     };
     N();
     const y = new ResizeObserver(N);
-    return y.observe(u), y.observe(f), () => y.disconnect();
-  }, [e, t]);
-  const m = l > 0, v = Math.max(500, Math.round(l * 18));
+    return y.observe(u), y.observe(m), () => y.disconnect();
+  }, [e, r]);
+  const g = l > 0, x = Math.max(500, Math.round(l * 18));
   return /* @__PURE__ */ c(
     "div",
     {
-      className: n(
+      className: o(
         "group/hist relative flex items-center rounded-md transition-colors",
-        i ? "bg-fill/60 text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground"
+        s ? "bg-fill/60 text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground"
       ),
       children: [
-        d && /* @__PURE__ */ r(
+        d && /* @__PURE__ */ t(
           "span",
           {
             "aria-hidden": !0,
@@ -272,43 +272,43 @@ const D = o.forwardRef(({ className: a, children: e, title: s, action: t, isActi
             children: d
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           "a",
           {
             ref: p,
-            title: s ?? (typeof e == "string" ? e : void 0),
-            className: n(
+            title: i ?? (typeof e == "string" ? e : void 0),
+            className: o(
               // Left pad matches a SidebarItem's text column (px-3 + icon size-4 +
               // gap-2.5 = 2.375rem) so history titles line up under the nav labels.
-              "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-xs",
+              "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)]",
               "outline-none focus-visible:ring-3 focus-visible:ring-ring",
               a
             ),
-            ...b,
-            children: /* @__PURE__ */ r(
+            ...f,
+            children: /* @__PURE__ */ t(
               "span",
               {
-                ref: h,
-                className: n(
+                ref: v,
+                className: o(
                   "block overflow-hidden",
                   // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
                   // so fade the LEFT edge where it exits; the action backdrop (or the
                   // string's own end) handles the right.
-                  m && "[mask-image:linear-gradient(to_right,#000_calc(100%-1.5rem),transparent)]",
-                  m && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,#000_1.25rem,#000_100%)]"
+                  g && "[mask-image:linear-gradient(to_right,#000_calc(100%-1.5rem),transparent)]",
+                  g && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,#000_1.25rem,#000_100%)]"
                 ),
-                children: /* @__PURE__ */ r(
+                children: /* @__PURE__ */ t(
                   "span",
                   {
-                    ref: g,
-                    className: n(
+                    ref: b,
+                    className: o(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
-                      m && "group-hover/hist:[transform:translateX(var(--mq-x))]",
+                      g && "group-hover/hist:[transform:translateX(var(--mq-x))]",
                       "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
                     ),
                     style: {
                       "--mq-x": `-${l}px`,
-                      transitionDuration: `${v}ms`
+                      transitionDuration: `${x}ms`
                     },
                     children: e
                   }
@@ -317,10 +317,10 @@ const D = o.forwardRef(({ className: a, children: e, title: s, action: t, isActi
             )
           }
         ),
-        t && /* @__PURE__ */ r(
+        r && /* @__PURE__ */ t(
           "span",
           {
-            className: n(
+            className: o(
               // Rounded end matches the row's radius so the backdrop doesn't
               // square off the highlight's right corners.
               "absolute inset-y-0 right-0 flex items-center rounded-e-md pl-8 pr-1",
@@ -329,7 +329,7 @@ const D = o.forwardRef(({ className: a, children: e, title: s, action: t, isActi
               "pointer-events-none group-hover/hist:pointer-events-auto",
               "focus-within:pointer-events-auto focus-within:opacity-100"
             ),
-            children: t
+            children: r
           }
         )
       ]
@@ -337,23 +337,23 @@ const D = o.forwardRef(({ className: a, children: e, title: s, action: t, isActi
   );
 });
 D.displayName = "SidebarHistoryItem";
-const F = o.forwardRef(
-  ({ className: a, name: e, role: s, src: t, ...i }, d) => /* @__PURE__ */ c(
+const F = n.forwardRef(
+  ({ className: a, name: e, role: i, src: r, ...s }, d) => /* @__PURE__ */ c(
     "a",
     {
       ref: d,
-      className: n(
+      className: o(
         "flex items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-fill/60",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
         a
       ),
-      ...i,
+      ...s,
       children: [
-        /* @__PURE__ */ r(_, { size: "sm", name: e, src: t }),
+        /* @__PURE__ */ t(_, { size: "sm", name: e, src: r }),
         /* @__PURE__ */ c("div", { className: "min-w-0 leading-tight group-data-[collapsed=true]/sidebar:hidden", children: [
-          /* @__PURE__ */ r("div", { className: "truncate text-xs font-medium text-foreground", children: e }),
-          s && /* @__PURE__ */ r("div", { className: "truncate text-xs text-tertiary", children: s })
+          /* @__PURE__ */ t("div", { className: "truncate text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] font-medium text-foreground", children: e }),
+          i && /* @__PURE__ */ t("div", { className: "truncate text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] text-tertiary", children: i })
         ] })
       ]
     }

package/components/stepper.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Stepper — discrete, indexed progress through a known set of steps.
+ *
+ * `Progress` is a continuous bar and `Timeline` is a chronological list of
+ * content; neither says "step 2 of 5, and here is what 3 through 5 will be".
+ * Completed steps collapse to a check so the eye counts what is left, not what
+ * is done. The connector is a functional rail, like `Tree`'s — an allowed
+ * stroke.
+ */
+export type StepperStatus = "complete" | "current" | "upcoming";
+export interface StepperStep {
+    /** Stable key, also used for the accessible label. */
+    id: string;
+    label: React.ReactNode;
+    /** Optional qualifier under the label. */
+    description?: React.ReactNode;
+}
+declare const markerVariants: (props?: ({
+    status?: "current" | "complete" | "upcoming" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "onSelect">, VariantProps<typeof markerVariants> {
+    steps: StepperStep[];
+    /** Zero-based index of the current step. */
+    activeIndex: number;
+    orientation?: "horizontal" | "vertical";
+    /** Makes completed steps navigable. */
+    onSelect?: (index: number) => void;
+}
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
+export { markerVariants as stepperMarkerVariants };