@actioneer/ads 0.5.4 → 0.5.5

package/components/sidebar.js

@@ -1,123 +1,127 @@
 "use client";
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import * as n from "react";
-import { PanelLeft as k } from "../lib/icons.js";
+import { User as R, PanelLeft as _ } 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 z = n.createContext({
+import { Tooltip as j } from "./tooltip.js";
+import { Avatar as H } from "./avatar.js";
+const k = n.createContext({
   collapsed: !1,
   toggle: () => {
   },
   setCollapsed: () => {
   }
 });
-function j() {
-  return n.useContext(z);
+function E() {
+  return n.useContext(k);
 }
-const H = n.forwardRef(
+const I = n.forwardRef(
   ({
-    className: a,
+    className: t,
     collapsed: e,
     defaultCollapsed: i = !1,
-    onCollapsedChange: r,
+    onCollapsedChange: a,
     keyboardToggle: s = !0,
     ...d
-  }, f) => {
-    const [p, v] = n.useState(i), b = e !== void 0, l = b ? e : p, h = n.useCallback(
-      (u) => {
-        b || v(u), r == null || r(u);
+  }, l) => {
+    const [b, x] = n.useState(i), f = e !== void 0, u = f ? e : b, h = n.useCallback(
+      (p) => {
+        f || x(p), a == null || a(p);
       },
-      [b, r]
+      [f, a]
     ), g = n.useCallback(
-      () => h(!l),
-      [l, h]
+      () => h(!u),
+      [u, h]
     );
     n.useEffect(() => {
       if (!s) return;
-      const u = (m) => {
+      const p = (m) => {
         (m.metaKey || m.ctrlKey) && m.key.toLowerCase() === "b" && (m.preventDefault(), g());
       };
-      return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+      return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
     }, [s, g]);
-    const x = n.useMemo(
-      () => ({ collapsed: l, toggle: g, setCollapsed: h }),
-      [l, g, h]
+    const v = n.useMemo(
+      () => ({ collapsed: u, toggle: g, setCollapsed: h }),
+      [u, g, h]
     );
-    return /* @__PURE__ */ t(z.Provider, { value: x, children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ r(k.Provider, { value: v, children: /* @__PURE__ */ r(
       "aside",
       {
-        ref: f,
-        "data-collapsed": l ? "true" : "false",
+        ref: l,
+        "data-collapsed": u ? "true" : "false",
         className: o(
           "group/sidebar flex h-full shrink-0 flex-col bg-transparent",
-          l ? "w-(--sidebar-width-sm)" : "w-(--sidebar-width)",
-          a
+          u ? "w-(--sidebar-width-sm)" : "w-(--sidebar-width)",
+          t
         ),
         ...d
       }
     ) });
   }
 );
-H.displayName = "Sidebar";
-function S({ 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 });
+I.displayName = "Sidebar";
+function S({ children: t }) {
+  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: t });
 }
-function E({
-  className: a,
+function z({
+  className: t,
   onClick: e,
-  ...i
+  tooltipSide: i = "right",
+  ...a
 }) {
-  const { collapsed: r, toggle: s } = j();
-  return /* @__PURE__ */ t(
-    R,
+  const { collapsed: s, toggle: d } = E();
+  return /* @__PURE__ */ r(
+    j,
     {
-      side: "right",
+      side: i,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
-        r ? "Expand" : "Collapse",
+        s ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
-          /* @__PURE__ */ t(S, { children: "⌘" }),
-          /* @__PURE__ */ t(S, { children: "B" })
+          /* @__PURE__ */ r(S, { children: "⌘" }),
+          /* @__PURE__ */ r(S, { children: "B" })
         ] })
       ] }),
-      children: /* @__PURE__ */ t(
+      children: /* @__PURE__ */ r(
         "button",
         {
           type: "button",
-          "aria-label": r ? "Expand sidebar" : "Collapse sidebar",
-          "aria-pressed": r,
-          onClick: (d) => {
-            e == null || e(d), s();
+          "aria-label": s ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": s,
+          onClick: (l) => {
+            e == null || e(l), d();
           },
           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
+            t
           ),
-          ...i,
-          children: /* @__PURE__ */ t(k, {})
+          ...a,
+          children: /* @__PURE__ */ r(_, {})
         }
       )
     }
   );
 }
-function X({
-  logo: a,
+function G({
+  logo: t,
   href: e,
   label: i = "Home",
-  showTrigger: r = !0,
+  showTrigger: a = !0,
   children: s,
   className: d,
-  ...f
+  ...l
 }) {
-  const p = o(
+  const b = 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)",
-    r && "group-hover/sidebar:hidden"
+    // The logo owns the header at rest in BOTH states. On the collapsed rail
+    // it swaps for the expand trigger only while the rail is hovered (or
+    // holds keyboard focus, so the control stays reachable).
+    a && "group-data-[collapsed=true]/sidebar:group-hover/sidebar:hidden group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:hidden"
   );
   return /* @__PURE__ */ c(
     "div",
@@ -127,144 +131,146 @@ function X({
         "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
         d
       ),
-      ...f,
+      ...l,
       children: [
-        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 })
+        e ? /* @__PURE__ */ r("a", { href: e, "aria-label": i, className: b, children: t }) : /* @__PURE__ */ r("span", { className: b, children: t }),
+        a && /* @__PURE__ */ r("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ r(z, { tooltipSide: "right" }) }),
+        /* @__PURE__ */ c("div", { className: "flex items-center gap-1 group-data-[collapsed=true]/sidebar:hidden", children: [
+          a && /* @__PURE__ */ r(z, { tooltipSide: "bottom" }),
+          s
+        ] })
       ]
     }
   );
 }
-const I = n.forwardRef(
-  ({ className: a, ...e }, i) => /* @__PURE__ */ t(
+const L = n.forwardRef(
+  ({ className: t, ...e }, i) => /* @__PURE__ */ r(
     "div",
     {
       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
+        t
       ),
       ...e
     }
   )
 );
-I.displayName = "SidebarHeader";
-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 = "SidebarHeader";
+const K = n.forwardRef(
+  ({ className: t, ...e }, i) => /* @__PURE__ */ r("nav", { ref: i, className: o("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...e })
 );
-L.displayName = "SidebarNav";
+K.displayName = "SidebarNav";
 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 })
+  ({ className: t, label: e, children: i, ...a }, s) => /* @__PURE__ */ c("div", { ref: s, className: t, ...a, children: [
+    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-normal text-secondary group-data-[collapsed=true]/sidebar:hidden", children: e }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: i })
   ] })
 );
 A.displayName = "SidebarSection";
-const K = n.forwardRef(
-  ({ className: a, icon: e, isActive: i, endContent: r, children: s, title: d, ...f }, p) => /* @__PURE__ */ c(
+const M = n.forwardRef(
+  ({ className: t, icon: e, isActive: i, endContent: a, children: s, title: d, ...l }, b) => /* @__PURE__ */ c(
     "a",
     {
-      ref: p,
+      ref: b,
       "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",
+        "flex h-9 items-center gap-2.5 rounded-md px-3 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",
-        i ? "bg-fill font-medium text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground",
-        a
+        i ? "bg-sidebar-accent font-normal text-foreground" : "text-primary hover:bg-sidebar-accent/60 hover:text-foreground",
+        t
       ),
-      ...f,
+      ...l,
       children: [
         e,
-        /* @__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 })
+        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
+        a && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: a })
       ]
     }
   )
 );
-K.displayName = "SidebarItem";
-const M = n.forwardRef(
-  ({ className: a, ...e }, i) => /* @__PURE__ */ t(
+M.displayName = "SidebarItem";
+const q = n.forwardRef(
+  ({ className: t, ...e }, i) => /* @__PURE__ */ r(
     "div",
     {
       ref: i,
-      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
+      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
       ...e
     }
   )
 );
-M.displayName = "SidebarFooter";
-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(
+q.displayName = "SidebarFooter";
+const B = n.forwardRef(
+  ({ className: t, icon: e, children: i, ...a }, s) => /* @__PURE__ */ r("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
       ref: s,
       type: "button",
       className: o(
-        "flex h-10 w-full items-center justify-start gap-2 rounded-md bg-elevated px-3",
-        "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",
-        "transition-[transform,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none",
-        "hover:-translate-y-0.5 active:translate-y-0",
+        "flex h-9 w-full items-center justify-start gap-2 rounded-md px-3",
+        "text-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)] font-normal text-primary",
+        // Reads as a normal nav item: transparent at rest, the shared grey
+        // hover wash on hover (no fill-at-rest, no elevation).
+        "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
+        "hover:bg-sidebar-accent/60 hover:text-foreground",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         "[&_svg]:size-4 [&_svg]:shrink-0",
         "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,
+      ...a,
       children: [
         e,
-        /* @__PURE__ */ t("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
+        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
   ) })
 );
-q.displayName = "SidebarAction";
-const B = n.forwardRef(
-  ({ className: a, label: e, children: i, ...r }, s) => /* @__PURE__ */ c(
+B.displayName = "SidebarAction";
+const D = n.forwardRef(
+  ({ className: t, label: e, children: i, ...a }, s) => /* @__PURE__ */ c(
     "div",
     {
       ref: s,
-      className: o("group-data-[collapsed=true]/sidebar:hidden", a),
-      ...r,
+      className: o("group-data-[collapsed=true]/sidebar:hidden", t),
+      ...a,
       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", children: e }),
-        /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: i })
+        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-[length:var(--sidebar-section-label-size)] leading-[var(--text-xs--line-height)] font-normal text-secondary", children: e }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: i })
       ]
     }
   )
 );
-B.displayName = "SidebarHistory";
-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);
+D.displayName = "SidebarHistory";
+const F = n.forwardRef(({ className: t, children: e, title: i, action: a, isActive: s, icon: d, ...l }, b) => {
+  const x = n.useRef(null), f = n.useRef(null), [u, h] = n.useState(0);
   n.useLayoutEffect(() => {
-    const u = v.current, m = b.current;
-    if (!u || !m) return;
+    const p = x.current, m = f.current;
+    if (!p || !m) return;
     const N = () => {
-      const w = m.scrollWidth - u.clientWidth;
-      h(w > 0 ? w + (r ? 32 : 0) : 0);
+      const w = m.scrollWidth - p.clientWidth;
+      h(w > 0 ? w + (a ? 32 : 0) : 0);
     };
     N();
     const y = new ResizeObserver(N);
-    return y.observe(u), y.observe(m), () => y.disconnect();
-  }, [e, r]);
-  const g = l > 0, x = Math.max(500, Math.round(l * 18));
+    return y.observe(p), y.observe(m), () => y.disconnect();
+  }, [e, a]);
+  const g = u > 0, v = Math.max(500, Math.round(u * 18));
   return /* @__PURE__ */ c(
     "div",
     {
       className: o(
         "group/hist relative flex items-center rounded-md transition-colors",
-        s ? "bg-fill/60 text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground"
+        s ? "bg-sidebar-accent/60 text-foreground" : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground"
       ),
       children: [
-        d && /* @__PURE__ */ t(
+        d && /* @__PURE__ */ r(
           "span",
           {
             "aria-hidden": !0,
@@ -272,23 +278,23 @@ const D = n.forwardRef(({ className: a, children: e, title: i, action: r, isActi
             children: d
           }
         ),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ r(
           "a",
           {
-            ref: p,
+            ref: b,
             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-[length:var(--sidebar-navigation-text-size)] leading-[var(--text-xs--line-height)]",
               "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-              a
+              t
             ),
-            ...f,
-            children: /* @__PURE__ */ t(
+            ...l,
+            children: /* @__PURE__ */ r(
               "span",
               {
-                ref: v,
+                ref: x,
                 className: o(
                   "block overflow-hidden",
                   // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
@@ -297,18 +303,18 @@ const D = n.forwardRef(({ className: a, children: e, title: i, action: r, isActi
                   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__ */ t(
+                children: /* @__PURE__ */ r(
                   "span",
                   {
-                    ref: b,
+                    ref: f,
                     className: o(
                       "block w-max whitespace-nowrap transition-transform ease-linear",
                       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: `${x}ms`
+                      "--mq-x": `-${u}px`,
+                      transitionDuration: `${v}ms`
                     },
                     children: e
                   }
@@ -317,7 +323,7 @@ const D = n.forwardRef(({ className: a, children: e, title: i, action: r, isActi
             )
           }
         ),
-        r && /* @__PURE__ */ t(
+        a && /* @__PURE__ */ r(
           "span",
           {
             className: o(
@@ -329,49 +335,56 @@ const D = n.forwardRef(({ className: a, children: e, title: i, action: r, isActi
               "pointer-events-none group-hover/hist:pointer-events-auto",
               "focus-within:pointer-events-auto focus-within:opacity-100"
             ),
-            children: r
+            children: a
           }
         )
       ]
     }
   );
 });
-D.displayName = "SidebarHistoryItem";
-const F = n.forwardRef(
-  ({ className: a, name: e, role: i, src: r, ...s }, d) => /* @__PURE__ */ c(
+F.displayName = "SidebarHistoryItem";
+const W = n.forwardRef(
+  ({ className: t, name: e, role: i, src: a, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
-      ref: d,
+      ref: l,
       className: o(
-        "flex items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-fill/60",
+        "flex items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-sidebar-accent/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
+        t
       ),
-      ...s,
+      ...d,
       children: [
-        /* @__PURE__ */ t(_, { size: "sm", name: e, src: r }),
+        !s && /* @__PURE__ */ r(H, { size: "sm", name: e, src: a }),
+        s && /* @__PURE__ */ r(
+          R,
+          {
+            "aria-hidden": !0,
+            className: "hidden size-4 shrink-0 text-muted-foreground group-data-[collapsed=true]/sidebar:block"
+          }
+        ),
         /* @__PURE__ */ c("div", { className: "min-w-0 leading-tight group-data-[collapsed=true]/sidebar:hidden", children: [
-          /* @__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 })
+          /* @__PURE__ */ r("div", { className: "truncate text-base leading-[var(--text-base--line-height)] font-normal text-foreground", children: e }),
+          i && /* @__PURE__ */ r("div", { className: "truncate text-xs leading-[var(--text-xs--line-height)] text-tertiary", children: i })
         ] })
       ]
     }
   )
 );
-F.displayName = "SidebarAccount";
+W.displayName = "SidebarAccount";
 export {
-  H as Sidebar,
-  F as SidebarAccount,
-  q as SidebarAction,
-  X as SidebarBrand,
-  M as SidebarFooter,
-  I as SidebarHeader,
-  B as SidebarHistory,
-  D as SidebarHistoryItem,
-  K as SidebarItem,
-  L as SidebarNav,
+  I as Sidebar,
+  W as SidebarAccount,
+  B as SidebarAction,
+  G as SidebarBrand,
+  q as SidebarFooter,
+  L as SidebarHeader,
+  D as SidebarHistory,
+  F as SidebarHistoryItem,
+  M as SidebarItem,
+  K as SidebarNav,
   A as SidebarSection,
-  E as SidebarTrigger,
-  j as useSidebar
+  z as SidebarTrigger,
+  E as useSidebar
 };

package/components/stepper.d.ts

@@ -35,6 +35,8 @@ export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement
     activeIndex: number;
     /** Makes completed steps navigable. */
     onSelect?: (index: number) => void;
+    /** Places each label below its marker or directly beside it. */
+    labelPosition?: "below" | "inline";
 }
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
 export { markerVariants as stepperMarkerVariants };