@actioneer/ads 0.5.4 → 0.5.6

package/components/popover.js

@@ -1,29 +1,30 @@
 "use client";
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as g, jsxs as b } from "react/jsx-runtime";
 import * as n from "react";
-import { createPortal as P } from "react-dom";
-import { MotionConfig as b, AnimatePresence as C, motion as y } from "motion/react";
-import { cn as L } from "../lib/cn.js";
-import { floatVariants as R } from "../lib/motion.js";
-const k = {
+import { createPortal as C } from "react-dom";
+import { MotionConfig as y, AnimatePresence as L, motion as R } from "motion/react";
+import { cn as k } from "../lib/cn.js";
+import { floatVariants as z } from "../lib/motion.js";
+import { Ripple as O } from "./ripple.js";
+const h = {
   start: "top left",
   center: "top",
   end: "top right"
-}, h = n.createContext(null);
-function x(r) {
-  const e = n.useContext(h);
+}, x = n.createContext(null);
+function E(o) {
+  const e = n.useContext(x);
   if (!e)
-    throw new Error(`${r} must be used within a <Popover>.`);
+    throw new Error(`${o} must be used within a <Popover>.`);
   return e;
 }
-function M({ children: r, defaultOpen: e = !1 }) {
-  const [d, l] = n.useState(e), u = n.useRef(null);
-  return /* @__PURE__ */ g(h.Provider, { value: { open: d, setOpen: l, triggerRef: u }, children: r });
+function T({ children: o, defaultOpen: e = !1 }) {
+  const [d, a] = n.useState(e), u = n.useRef(null);
+  return /* @__PURE__ */ g(x.Provider, { value: { open: d, setOpen: a, triggerRef: u }, children: o });
 }
-function S({ children: r }) {
-  const { open: e, setOpen: d, triggerRef: l } = x("PopoverTrigger"), u = r;
+function W({ children: o }) {
+  const { open: e, setOpen: d, triggerRef: a } = E("PopoverTrigger"), u = o;
   return n.cloneElement(u, {
-    ref: l,
+    ref: a,
     "aria-expanded": e,
     "aria-haspopup": !0,
     onClick: (i) => {
@@ -32,46 +33,46 @@ function S({ children: r }) {
     }
   });
 }
-function T({
-  className: r,
+function K({
+  className: o,
   align: e = "start",
   sideOffset: d = 8,
-  children: l,
+  children: a,
   ...u
 }) {
-  const { open: i, setOpen: f, triggerRef: s } = x("PopoverContent"), w = n.useRef(null), [c, E] = n.useState(null);
+  const { open: i, setOpen: f, triggerRef: s } = E("PopoverContent"), w = n.useRef(null), [c, P] = n.useState(null);
   return n.useLayoutEffect(() => {
     if (!i) return;
     const p = s.current;
     if (!p) return;
-    const o = () => {
+    const r = () => {
       var v;
       const t = p.getBoundingClientRect(), m = ((v = w.current) == null ? void 0 : v.offsetWidth) ?? 0;
-      let a = t.left;
-      e === "center" ? a = t.left + t.width / 2 - m / 2 : e === "end" && (a = t.right - m), E({ top: t.bottom + d, left: a });
+      let l = t.left;
+      e === "center" ? l = t.left + t.width / 2 - m / 2 : e === "end" && (l = t.right - m), P({ top: t.bottom + d, left: l });
     };
-    return o(), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
-      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    return r(), window.addEventListener("resize", r), window.addEventListener("scroll", r, !0), () => {
+      window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
     };
   }, [i, e, d, s]), n.useEffect(() => {
     if (!i) return;
     const p = (t) => {
       t.key === "Escape" && f(!1);
-    }, o = (t) => {
-      var a, v;
+    }, r = (t) => {
+      var l, v;
       const m = t.target;
-      (a = w.current) != null && a.contains(m) || (v = s.current) != null && v.contains(m) || f(!1);
+      (l = w.current) != null && l.contains(m) || (v = s.current) != null && v.contains(m) || f(!1);
     };
-    return document.addEventListener("keydown", p), document.addEventListener("pointerdown", o), () => {
-      document.removeEventListener("keydown", p), document.removeEventListener("pointerdown", o);
+    return document.addEventListener("keydown", p), document.addEventListener("pointerdown", r), () => {
+      document.removeEventListener("keydown", p), document.removeEventListener("pointerdown", r);
     };
-  }, [i, f, s]), P(
-    /* @__PURE__ */ g(b, { reducedMotion: "user", children: /* @__PURE__ */ g(C, { children: i && /* @__PURE__ */ g(
-      y.div,
+  }, [i, f, s]), C(
+    /* @__PURE__ */ g(y, { reducedMotion: "user", children: /* @__PURE__ */ g(L, { children: i && /* @__PURE__ */ b(
+      R.div,
       {
         ref: w,
         role: "dialog",
-        variants: R,
+        variants: z,
         initial: "hidden",
         animate: "visible",
         exit: "hidden",
@@ -80,22 +81,25 @@ function T({
           top: (c == null ? void 0 : c.top) ?? 0,
           left: (c == null ? void 0 : c.left) ?? 0,
           visibility: c ? "visible" : "hidden",
-          transformOrigin: k[e]
+          transformOrigin: h[e]
         },
-        className: L(
-          "z-50 min-w-44 rounded-lg border border-border bg-elevated p-3",
+        className: k(
+          "relative z-50 min-w-44 rounded-lg border border-border bg-elevated p-3",
           "text-xs text-foreground shadow-elevation",
-          r
+          o
         ),
         ...u,
-        children: l
+        children: [
+          /* @__PURE__ */ g(O, { origin: h[e] }),
+          a
+        ]
       }
     ) }) }),
     document.body
   );
 }
 export {
-  M as Popover,
-  T as PopoverContent,
-  S as PopoverTrigger
+  T as Popover,
+  K as PopoverContent,
+  W as PopoverTrigger
 };

package/components/ripple.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Ripple — the appearance wash for floating surfaces (principle 3). Drop it as
+ * the FIRST child of a `relative` panel and a soft brand tint radiates from the
+ * panel's origin corner and fades, once, as the surface mounts — the same
+ * origin the panel scales from, so the ripple reads as the surface arriving.
+ *
+ *   <motion.div className="relative …" style={{ transformOrigin: origin }}>
+ *     <Ripple origin={origin} />
+ *     {children}
+ *   </motion.div>
+ *
+ * It is an absolute, `pointer-events-none`, `z-0` layer clipped to the panel
+ * radius (`rounded-[inherit]`), so it sits under the content and never
+ * intercepts input. All timing/curve/tint come from tokens (`--ripple-*`,
+ * `--ease-out`); reduced-motion drops it entirely. Remount it (via `key`) to
+ * replay on each open.
+ */
+export interface RippleProps {
+    /**
+     * CSS position keywords the wash emanates from — pass the panel's own
+     * `transformOrigin` (e.g. "top left", "bottom right", "center").
+     */
+    origin?: string;
+    className?: string;
+}
+export declare function Ripple({ origin, className }: RippleProps): import("react").JSX.Element;
+export declare namespace Ripple {
+    var displayName: string;
+}

package/components/ripple.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { cn as r } from "../lib/cn.js";
+function n({ origin: e = "center", className: i }) {
+  return /* @__PURE__ */ p(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: r("ads-ripple", i),
+      style: { "--ripple-origin": e }
+    }
+  );
+}
+n.displayName = "Ripple";
+export {
+  n as Ripple
+};

package/components/segmented.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as n, jsxs as b } from "react/jsx-runtime";
-import * as d from "react";
-import { MotionConfig as v, motion as h } from "motion/react";
-import { cva as l } from "class-variance-authority";
+import * as l from "react";
+import { MotionConfig as h, motion as v } from "motion/react";
+import { cva as d } from "class-variance-authority";
 import { cn as c } from "../lib/cn.js";
 import { EASE_OUT as w } from "../lib/motion.js";
-const y = l(
-  // Borderless muted track — matches the demo's tab switcher (the pill
-  // provides the definition; a stroke around the track read as a second,
-  // heavier control).
-  "inline-flex items-center gap-1 rounded-lg bg-muted p-1",
+const y = d(
+  // Borderless recessed track on ink-200 (bg-surface) — matches the Tabs
+  // primary track (the pill provides the definition; a stroke around the
+  // track read as a second, heavier control).
+  "inline-flex items-center gap-1 rounded-full bg-surface p-1",
   {
     variants: {
       size: {
@@ -20,11 +20,11 @@ const y = l(
     },
     defaultVariants: { size: "md" }
   }
-), k = l(
+), D = d(
   c(
     // The active pill is a shared motion thumb that SLIDES between options
     // (layoutId), so the option itself only carries text color.
-    "relative inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium select-none",
+    "relative inline-flex items-center justify-center whitespace-nowrap rounded-full font-normal select-none",
     "transition-colors duration-(--duration-fast) cursor-pointer",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50"
@@ -43,10 +43,10 @@ const y = l(
     },
     defaultVariants: { size: "md", selected: !1 }
   }
-), A = d.forwardRef(({ options: r, value: a, onChange: s, size: o, className: u, ...m }, f) => {
-  const g = d.useId(), i = (e) => {
-    const t = r.findIndex((x) => x.value === a), p = ((t < 0 ? 0 : t) + e + r.length) % r.length;
-    s(r[p].value);
+), k = l.forwardRef(({ options: r, value: a, onChange: o, size: s, className: u, ...m }, f) => {
+  const p = l.useId(), i = (e) => {
+    const t = r.findIndex((x) => x.value === a), g = ((t < 0 ? 0 : t) + e + r.length) % r.length;
+    o(r[g].value);
   };
   return /* @__PURE__ */ n(
     "div",
@@ -65,9 +65,9 @@ const y = l(
             break;
         }
       },
-      className: c(y({ size: o }), u),
+      className: c(y({ size: s }), u),
       ...m,
-      children: /* @__PURE__ */ n(v, { reducedMotion: "user", children: r.map((e) => {
+      children: /* @__PURE__ */ n(h, { reducedMotion: "user", children: r.map((e) => {
         const t = e.value === a;
         return /* @__PURE__ */ b(
           "button",
@@ -76,16 +76,17 @@ const y = l(
             role: "radio",
             "aria-checked": t,
             tabIndex: t ? 0 : -1,
-            onClick: () => s(e.value),
-            className: k({ size: o, selected: t }),
+            onClick: () => o(e.value),
+            className: D({ size: s, selected: t }),
             children: [
               t && /* @__PURE__ */ n(
-                h.span,
+                v.span,
                 {
-                  layoutId: g,
+                  layoutId: p,
                   "aria-hidden": !0,
+                  layoutDependency: a,
                   transition: { duration: 0.2, ease: w },
-                  className: "absolute inset-0 rounded-md bg-elevated shadow-elevation"
+                  className: "absolute inset-0 rounded-full bg-elevated shadow-elevation"
                 }
               ),
               /* @__PURE__ */ n("span", { className: "relative", children: e.label })
@@ -97,7 +98,7 @@ const y = l(
     }
   );
 });
-A.displayName = "SegmentedControl";
+k.displayName = "SegmentedControl";
 export {
-  A as SegmentedControl
+  k as SegmentedControl
 };

package/components/select.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
 import * as s from "react";
 import { cva as j } from "class-variance-authority";
 import { MotionConfig as M, AnimatePresence as V, motion as $ } from "motion/react";
@@ -7,7 +7,8 @@ import { ChevronDown as C, Check as K } from "../lib/icons.js";
 import { cn as d } from "../lib/cn.js";
 import { inputBaseClass as L } from "./field.js";
 import { floatVariants as O } from "../lib/motion.js";
-const P = j(
+import { Ripple as P } from "./ripple.js";
+const T = j(
   d(
     L,
     "items-center justify-between gap-2 text-left cursor-pointer",
@@ -23,93 +24,93 @@ const P = j(
     },
     defaultVariants: { size: "md" }
   }
-), T = s.forwardRef(
+), _ = s.forwardRef(
   ({
-    items: o,
+    items: r,
     value: c,
-    onChange: m,
+    onChange: b,
     placeholder: I = "Select…",
     size: N,
-    disabled: h,
+    disabled: w,
     isInvalid: E,
-    className: A,
-    id: R,
-    placement: w = "bottom"
+    className: R,
+    id: A,
+    placement: v = "bottom"
   }, S) => {
-    const [r, l] = s.useState(!1), [a, b] = s.useState(-1), g = s.useRef(null), k = s.useRef(null), u = s.useId(), v = o.find((e) => e.value === c), z = s.useCallback(() => {
-      const e = o.findIndex((t) => t.value === c);
-      return e >= 0 && !o[e].disabled ? e : o.findIndex((t) => !t.disabled);
-    }, [o, c]);
+    const [o, l] = s.useState(!1), [a, x] = s.useState(-1), g = s.useRef(null), k = s.useRef(null), u = s.useId(), h = r.find((e) => e.value === c), z = s.useCallback(() => {
+      const e = r.findIndex((t) => t.value === c);
+      return e >= 0 && !r[e].disabled ? e : r.findIndex((t) => !t.disabled);
+    }, [r, c]);
     s.useEffect(() => {
-      if (!r) return;
+      if (!o) return;
       const e = (t) => {
         var n;
         (n = g.current) != null && n.contains(t.target) || l(!1);
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-    }, [r]), s.useEffect(() => {
+    }, [o]), s.useEffect(() => {
       var t;
-      if (!r || a < 0) return;
+      if (!o || a < 0) return;
       const e = (t = k.current) == null ? void 0 : t.children[a];
       e == null || e.scrollIntoView({ block: "nearest" });
-    }, [r, a]);
+    }, [o, a]);
     const f = () => {
-      h || (b(z()), l(!0));
+      w || (x(z()), l(!0));
     }, y = (e) => {
-      b((t) => {
+      x((t) => {
         let n = t;
-        for (let p = 0; p < o.length; p++)
-          if (n = (n + e + o.length) % o.length, !o[n].disabled) return n;
+        for (let p = 0; p < r.length; p++)
+          if (n = (n + e + r.length) % r.length, !r[n].disabled) return n;
         return t;
       });
     }, D = (e) => {
-      const t = o[e];
-      !t || t.disabled || (m == null || m(t.value), l(!1));
+      const t = r[e];
+      !t || t.disabled || (b == null || b(t.value), l(!1));
     };
-    return /* @__PURE__ */ x("div", { ref: g, className: "relative", children: [
-      /* @__PURE__ */ x(
+    return /* @__PURE__ */ m("div", { ref: g, className: "relative", children: [
+      /* @__PURE__ */ m(
         "button",
         {
           ref: S,
-          id: R,
+          id: A,
           type: "button",
           role: "combobox",
           "aria-haspopup": "listbox",
-          "aria-expanded": r,
+          "aria-expanded": o,
           "aria-controls": u,
           "aria-invalid": E || void 0,
-          disabled: h,
-          onClick: () => r ? l(!1) : f(),
+          disabled: w,
+          onClick: () => o ? l(!1) : f(),
           onKeyDown: (e) => {
             switch (e.key) {
               case "ArrowDown":
-                e.preventDefault(), r ? y(1) : f();
+                e.preventDefault(), o ? y(1) : f();
                 break;
               case "ArrowUp":
-                e.preventDefault(), r ? y(-1) : f();
+                e.preventDefault(), o ? y(-1) : f();
                 break;
               case "Enter":
               case " ":
-                e.preventDefault(), r ? D(a) : f();
+                e.preventDefault(), o ? D(a) : f();
                 break;
               case "Escape":
-                r && (e.preventDefault(), l(!1));
+                o && (e.preventDefault(), l(!1));
                 break;
               case "Tab":
                 l(!1);
                 break;
             }
           },
-          className: d(P({ size: N }), A),
+          className: d(T({ size: N }), R),
           children: [
             /* @__PURE__ */ i(
               "span",
               {
                 className: d(
                   "truncate",
-                  !v && "text-muted-foreground"
+                  !h && "text-muted-foreground"
                 ),
-                children: v ? v.label : I
+                children: h ? h.label : I
               }
             ),
             /* @__PURE__ */ i(
@@ -117,7 +118,7 @@ const P = j(
               {
                 className: d(
                   "size-4 text-muted-foreground transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
-                  r && "rotate-180"
+                  o && "rotate-180"
                 ),
                 "aria-hidden": !0
               }
@@ -125,7 +126,7 @@ const P = j(
           ]
         }
       ),
-      /* @__PURE__ */ i(M, { reducedMotion: "user", children: /* @__PURE__ */ i(V, { children: r && /* @__PURE__ */ i(
+      /* @__PURE__ */ i(M, { reducedMotion: "user", children: /* @__PURE__ */ i(V, { children: o && /* @__PURE__ */ m(
         $.ul,
         {
           ref: k,
@@ -137,44 +138,47 @@ const P = j(
           animate: "visible",
           exit: "hidden",
           style: {
-            transformOrigin: w === "top" ? "bottom" : "top"
+            transformOrigin: v === "top" ? "bottom" : "top"
           },
           className: d(
             "absolute z-50 max-h-60 w-full overflow-auto p-1",
             "rounded-md border border-border bg-elevated shadow-elevation",
-            w === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
+            v === "top" ? "bottom-full mb-1.5" : "top-full mt-1.5"
           ),
-          children: o.map((e, t) => {
-            const n = e.value === c, p = t === a;
-            return /* @__PURE__ */ x(
-              "li",
-              {
-                id: `${u}-opt-${t}`,
-                role: "option",
-                "aria-selected": n,
-                "aria-disabled": e.disabled || void 0,
-                onMouseEnter: () => !e.disabled && b(t),
-                onClick: () => D(t),
-                className: d(
-                  "flex cursor-pointer items-center justify-between gap-2",
-                  "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
-                  p && !e.disabled && "bg-muted",
-                  e.disabled && "pointer-events-none opacity-50"
-                ),
-                children: [
-                  /* @__PURE__ */ i("span", { className: "truncate", children: e.label }),
-                  n && /* @__PURE__ */ i(K, { className: "size-4 shrink-0", "aria-hidden": !0 })
-                ]
-              },
-              e.value
-            );
-          })
+          children: [
+            /* @__PURE__ */ i(P, { origin: v === "top" ? "bottom" : "top" }),
+            r.map((e, t) => {
+              const n = e.value === c, p = t === a;
+              return /* @__PURE__ */ m(
+                "li",
+                {
+                  id: `${u}-opt-${t}`,
+                  role: "option",
+                  "aria-selected": n,
+                  "aria-disabled": e.disabled || void 0,
+                  onMouseEnter: () => !e.disabled && x(t),
+                  onClick: () => D(t),
+                  className: d(
+                    "flex cursor-pointer items-center justify-between gap-2",
+                    "rounded-sm px-2 py-1.5 text-xs text-foreground select-none",
+                    p && !e.disabled && "bg-muted",
+                    e.disabled && "pointer-events-none opacity-50"
+                  ),
+                  children: [
+                    /* @__PURE__ */ i("span", { className: "truncate", children: e.label }),
+                    n && /* @__PURE__ */ i(K, { className: "size-4 shrink-0", "aria-hidden": !0 })
+                  ]
+                },
+                e.value
+              );
+            })
+          ]
         }
       ) }) })
     ] });
   }
 );
-T.displayName = "Select";
+_.displayName = "Select";
 export {
-  T as Select
+  _ as Select
 };

package/components/selection-action-bar.js

@@ -1,32 +1,32 @@
 "use client";
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import * as c from "react";
-import { cn as d } from "../lib/cn.js";
-import { Button as u } from "./button.js";
-const g = c.forwardRef(
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as s } from "../lib/cn.js";
+import { Button as g } from "./button.js";
+const u = i.forwardRef(
   ({
     className: r,
     selectedCount: o,
-    selectedLabel: t,
-    actions: n,
+    selectedLabel: n,
+    actions: t,
     onClear: e,
     clearLabel: l = "Clear",
     ...m
-  }, f) => /* @__PURE__ */ i(
+  }, f) => /* @__PURE__ */ c(
     "div",
     {
       ref: f,
-      className: d(
+      className: s(
         "flex items-center gap-3 rounded-lg bg-brand px-3 py-2 text-xs text-brand-foreground",
         r
       ),
       ...m,
       children: [
-        /* @__PURE__ */ a("span", { className: "font-medium tabular-nums", children: t ?? `${o} selected` }),
-        /* @__PURE__ */ i("div", { className: "ml-auto flex items-center gap-1", children: [
-          n,
+        /* @__PURE__ */ a("span", { className: "font-normal tabular-nums", children: n ?? `${o} selected` }),
+        /* @__PURE__ */ c("div", { className: "ml-auto flex items-center gap-1", children: [
+          t,
           e && /* @__PURE__ */ a(
-            s,
+            d,
             {
               onClick: e,
               className: "text-brand-foreground/70 hover:text-brand-foreground",
@@ -38,22 +38,22 @@ const g = c.forwardRef(
     }
   )
 );
-g.displayName = "SelectionActionBar";
-const s = c.forwardRef(({ className: r, variant: o = "ghost", size: t = "xs", ...n }, e) => /* @__PURE__ */ a(
-  u,
+u.displayName = "SelectionActionBar";
+const d = i.forwardRef(({ className: r, variant: o = "ghost", size: n = "xs", ...t }, e) => /* @__PURE__ */ a(
+  g,
   {
     ref: e,
     variant: o,
-    size: t,
-    className: d(
+    size: n,
+    className: s(
       "text-brand-foreground hover:bg-brand-foreground/10 hover:text-brand-foreground focus-visible:ring-brand-foreground",
       r
     ),
-    ...n
+    ...t
   }
 ));
-s.displayName = "SelectionActionBarAction";
+d.displayName = "SelectionActionBarAction";
 export {
-  g as SelectionActionBar,
-  s as SelectionActionBarAction
+  u as SelectionActionBar,
+  d as SelectionActionBarAction
 };

package/components/sidebar.d.ts

@@ -36,7 +36,10 @@ export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & Rea
  * Collapse toggle. Place inside SidebarHeader. Shows a tooltip with the ⌘B
  * shortcut, and lifts to a white chip on hover.
  */
-export declare function SidebarTrigger({ className, onClick, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>): React.JSX.Element;
+export declare function SidebarTrigger({ className, onClick, tooltipSide, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Which side the Collapse/Expand tooltip opens on. Default `right`. */
+    tooltipSide?: "top" | "right" | "bottom" | "left";
+}): React.JSX.Element;
 export interface SidebarBrandProps extends React.HTMLAttributes<HTMLDivElement> {
     /** The brand mark (img/svg) — `--sidebar-logo` (20px) centered in a `--sidebar-item` (32px) square, same box as every other rail icon. */
     logo: React.ReactNode;
@@ -44,10 +47,11 @@ export interface SidebarBrandProps extends React.HTMLAttributes<HTMLDivElement>
     href?: string;
     /** Accessible label for the logo link. */
     label?: string;
-    /** Reveal the collapse trigger in place of the logo on hover. Default true. */
+    /** Render the collapse/expand trigger: next to the actions when expanded, in
+     *  the logo slot when collapsed. Default true. */
     showTrigger?: boolean;
     /** Persistent header actions (e.g. a global-search button), right-aligned
-     *  next to the hover-revealed collapse trigger. Hidden while collapsed. */
+     *  next to the collapse trigger. Hidden while collapsed. */
     children?: React.ReactNode;
 }
 /**
@@ -112,6 +116,10 @@ export interface SidebarAccountProps extends Omit<React.AnchorHTMLAttributes<HTM
     role?: React.ReactNode;
     /** Avatar image; falls back to initials from `name`. */
     src?: string;
+    /** Hide the leading avatar, showing the name/role only. The collapsed rail
+     *  still shows a person glyph so the account entry never becomes an empty
+     *  square. */
+    hideAvatar?: boolean;
 }
 /**
  * Account block for the rail footer — avatar + name/role. Collapses to just the