@actioneer/ads 0.5.7 → 0.5.8

package/components/sidebar.js

@@ -1,119 +1,123 @@
 "use client";
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as n from "react";
-import { User as R, PanelLeft as _ } from "../lib/icons.js";
-import { cn as o } from "../lib/cn.js";
-import { Tooltip as j } from "./tooltip.js";
-import { Avatar as H } from "./avatar.js";
-const k = n.createContext({
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import * as o from "react";
+import { MotionConfig as R, motion as _ } from "motion/react";
+import { User as j, PanelLeft as H } from "../lib/icons.js";
+import { cn as n } from "../lib/cn.js";
+import { springSidebar as E } from "../lib/motion.js";
+import { Tooltip as I } from "./tooltip.js";
+import { Avatar as L } from "./avatar.js";
+const k = o.createContext({
   collapsed: !1,
   toggle: () => {
   },
   setCollapsed: () => {
   }
 });
-function E() {
-  return n.useContext(k);
+function M() {
+  return o.useContext(k);
 }
-const I = n.forwardRef(
+const K = o.forwardRef(
   ({
     className: t,
-    collapsed: e,
+    collapsed: r,
     defaultCollapsed: i = !1,
     onCollapsedChange: a,
     keyboardToggle: s = !0,
     ...d
   }, l) => {
-    const [b, x] = n.useState(i), f = e !== void 0, u = f ? e : b, h = n.useCallback(
+    const [m, x] = o.useState(i), f = r !== void 0, u = f ? r : m, h = o.useCallback(
       (p) => {
         f || x(p), a == null || a(p);
       },
       [f, a]
-    ), g = n.useCallback(
+    ), g = o.useCallback(
       () => h(!u),
       [u, h]
     );
-    n.useEffect(() => {
+    o.useEffect(() => {
       if (!s) return;
-      const p = (m) => {
-        (m.metaKey || m.ctrlKey) && m.key.toLowerCase() === "b" && (m.preventDefault(), g());
+      const p = (b) => {
+        (b.metaKey || b.ctrlKey) && b.key.toLowerCase() === "b" && (b.preventDefault(), g());
       };
       return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
     }, [s, g]);
-    const v = n.useMemo(
+    const v = o.useMemo(
       () => ({ collapsed: u, toggle: g, setCollapsed: h }),
       [u, g, h]
     );
-    return /* @__PURE__ */ r(k.Provider, { value: v, children: /* @__PURE__ */ r(
-      "aside",
+    return /* @__PURE__ */ e(k.Provider, { value: v, children: /* @__PURE__ */ e(R, { reducedMotion: "user", children: /* @__PURE__ */ e(
+      _.aside,
       {
         ref: l,
         "data-collapsed": u ? "true" : "false",
-        className: o(
+        initial: !1,
+        animate: { width: u ? 56 : 240 },
+        transition: E,
+        className: n(
           "group/sidebar flex h-full shrink-0 flex-col bg-transparent",
-          u ? "w-(--sidebar-width-sm)" : "w-(--sidebar-width)",
           t
         ),
         ...d
       }
-    ) });
+    ) }) });
   }
 );
-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 });
+K.displayName = "Sidebar";
+function w({ children: t }) {
+  return /* @__PURE__ */ e("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 z({
   className: t,
-  onClick: e,
+  onClick: r,
   tooltipSide: i = "right",
   ...a
 }) {
-  const { collapsed: s, toggle: d } = E();
-  return /* @__PURE__ */ r(
-    j,
+  const { collapsed: s, toggle: d } = M();
+  return /* @__PURE__ */ e(
+    I,
     {
       side: i,
       content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
         s ? "Expand" : "Collapse",
         /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
-          /* @__PURE__ */ r(S, { children: "⌘" }),
-          /* @__PURE__ */ r(S, { children: "B" })
+          /* @__PURE__ */ e(w, { children: "⌘" }),
+          /* @__PURE__ */ e(w, { children: "B" })
         ] })
       ] }),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           "aria-label": s ? "Expand sidebar" : "Collapse sidebar",
           "aria-pressed": s,
           onClick: (l) => {
-            e == null || e(l), d();
+            r == null || r(l), d();
           },
-          className: o(
-            "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground",
+          className: n(
+            "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-sm 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",
             t
           ),
           ...a,
-          children: /* @__PURE__ */ r(_, {})
+          children: /* @__PURE__ */ e(H, {})
         }
       )
     }
   );
 }
-function G({
+function Y({
   logo: t,
-  href: e,
+  href: r,
   label: i = "Home",
   showTrigger: a = !0,
   children: s,
   className: d,
   ...l
 }) {
-  const b = o(
+  const m = n(
     // 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",
@@ -126,57 +130,57 @@ function G({
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "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
       ),
       ...l,
       children: [
-        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" }) }),
+        r ? /* @__PURE__ */ e("a", { href: r, "aria-label": i, className: m, children: t }) : /* @__PURE__ */ e("span", { className: m, children: t }),
+        a && /* @__PURE__ */ e("div", { className: "hidden group-data-[collapsed=true]/sidebar:group-hover/sidebar:flex group-data-[collapsed=true]/sidebar:group-focus-within/sidebar:flex", children: /* @__PURE__ */ e(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" }),
+          a && /* @__PURE__ */ e(z, { tooltipSide: "bottom" }),
           s
         ] })
       ]
     }
   );
 }
-const L = n.forwardRef(
-  ({ className: t, ...e }, i) => /* @__PURE__ */ r(
+const A = o.forwardRef(
+  ({ className: t, ...r }, i) => /* @__PURE__ */ e(
     "div",
     {
       ref: i,
-      className: o(
+      className: n(
         "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",
         t
       ),
-      ...e
+      ...r
     }
   )
 );
-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 })
+A.displayName = "SidebarHeader";
+const q = o.forwardRef(
+  ({ className: t, ...r }, i) => /* @__PURE__ */ e("nav", { ref: i, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", t), ...r })
 );
-K.displayName = "SidebarNav";
-const A = n.forwardRef(
-  ({ 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 })
+q.displayName = "SidebarNav";
+const B = o.forwardRef(
+  ({ className: t, label: r, children: i, ...a }, s) => /* @__PURE__ */ c("div", { ref: s, className: t, ...a, children: [
+    r && /* @__PURE__ */ e("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: r }),
+    /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5", children: i })
   ] })
 );
-A.displayName = "SidebarSection";
-const M = n.forwardRef(
-  ({ className: t, icon: e, isActive: i, endContent: a, children: s, title: d, ...l }, b) => /* @__PURE__ */ c(
+B.displayName = "SidebarSection";
+const D = o.forwardRef(
+  ({ className: t, icon: r, isActive: i, endContent: a, children: s, title: d, ...l }, m) => /* @__PURE__ */ c(
     "a",
     {
-      ref: b,
+      ref: m,
       "aria-current": i ? "page" : void 0,
       title: d ?? (typeof s == "string" ? s : void 0),
-      className: o(
+      className: n(
         "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",
@@ -187,37 +191,37 @@ const M = n.forwardRef(
       ),
       ...l,
       children: [
-        e,
-        /* @__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 })
+        r,
+        /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: s }),
+        a && /* @__PURE__ */ e("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: a })
       ]
     }
   )
 );
-M.displayName = "SidebarItem";
-const q = n.forwardRef(
-  ({ className: t, ...e }, i) => /* @__PURE__ */ r(
+D.displayName = "SidebarItem";
+const F = o.forwardRef(
+  ({ className: t, ...r }, i) => /* @__PURE__ */ e(
     "div",
     {
       ref: i,
-      className: o("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
-      ...e
+      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", t),
+      ...r
     }
   )
 );
-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(
+F.displayName = "SidebarFooter";
+const W = o.forwardRef(
+  ({ className: t, icon: r, children: i, ...a }, s) => /* @__PURE__ */ e("div", { className: "px-3 pb-0.5 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
     "button",
     {
       ref: s,
       type: "button",
-      className: o(
+      className: n(
         "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",
+        "transition-colors duration-150 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",
@@ -226,51 +230,51 @@ const B = n.forwardRef(
       ),
       ...a,
       children: [
-        e,
-        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
+        r,
+        /* @__PURE__ */ e("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: i })
       ]
     }
   ) })
 );
-B.displayName = "SidebarAction";
-const D = n.forwardRef(
-  ({ className: t, label: e, children: i, ...a }, s) => /* @__PURE__ */ c(
+W.displayName = "SidebarAction";
+const $ = o.forwardRef(
+  ({ className: t, label: r, children: i, ...a }, s) => /* @__PURE__ */ c(
     "div",
     {
       ref: s,
-      className: o("group-data-[collapsed=true]/sidebar:hidden", t),
+      className: n("group-data-[collapsed=true]/sidebar:hidden", 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", children: e }),
-        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: i })
+        r && /* @__PURE__ */ e("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: r }),
+        /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5", children: i })
       ]
     }
   )
 );
-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 p = x.current, m = f.current;
-    if (!p || !m) return;
+$.displayName = "SidebarHistory";
+const O = o.forwardRef(({ className: t, children: r, title: i, action: a, isActive: s, icon: d, ...l }, m) => {
+  const x = o.useRef(null), f = o.useRef(null), [u, h] = o.useState(0);
+  o.useLayoutEffect(() => {
+    const p = x.current, b = f.current;
+    if (!p || !b) return;
     const N = () => {
-      const w = m.scrollWidth - p.clientWidth;
-      h(w > 0 ? w + (a ? 32 : 0) : 0);
+      const S = b.scrollWidth - p.clientWidth;
+      h(S > 0 ? S + (a ? 32 : 0) : 0);
     };
     N();
     const y = new ResizeObserver(N);
-    return y.observe(p), y.observe(m), () => y.disconnect();
-  }, [e, a]);
+    return y.observe(p), y.observe(b), () => y.disconnect();
+  }, [r, a]);
   const g = u > 0, v = Math.max(500, Math.round(u * 18));
   return /* @__PURE__ */ c(
     "div",
     {
-      className: o(
+      className: n(
         "group/hist relative flex items-center rounded-md transition-colors",
         s ? "bg-sidebar-accent/60 text-foreground" : "text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground"
       ),
       children: [
-        d && /* @__PURE__ */ r(
+        d && /* @__PURE__ */ e(
           "span",
           {
             "aria-hidden": !0,
@@ -278,12 +282,12 @@ const F = n.forwardRef(({ className: t, children: e, title: i, action: a, isActi
             children: d
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ e(
           "a",
           {
-            ref: b,
-            title: i ?? (typeof e == "string" ? e : void 0),
-            className: o(
+            ref: m,
+            title: i ?? (typeof r == "string" ? r : void 0),
+            className: n(
               // 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)]",
@@ -291,11 +295,11 @@ const F = n.forwardRef(({ className: t, children: e, title: i, action: a, isActi
               t
             ),
             ...l,
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ e(
               "span",
               {
                 ref: x,
-                className: o(
+                className: n(
                   "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
@@ -303,11 +307,11 @@ const F = n.forwardRef(({ className: t, children: e, title: i, action: a, 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__ */ r(
+                children: /* @__PURE__ */ e(
                   "span",
                   {
                     ref: f,
-                    className: o(
+                    className: n(
                       "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]"
@@ -316,22 +320,22 @@ const F = n.forwardRef(({ className: t, children: e, title: i, action: a, isActi
                       "--mq-x": `-${u}px`,
                       transitionDuration: `${v}ms`
                     },
-                    children: e
+                    children: r
                   }
                 )
               }
             )
           }
         ),
-        a && /* @__PURE__ */ r(
+        a && /* @__PURE__ */ e(
           "span",
           {
-            className: o(
+            className: n(
               // 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",
               "bg-gradient-to-l from-fill from-45% to-transparent",
-              "opacity-0 transition-opacity duration-(--duration-fast) group-hover/hist:opacity-100",
+              "opacity-0 transition-opacity duration-150 group-hover/hist:opacity-100",
               "pointer-events-none group-hover/hist:pointer-events-auto",
               "focus-within:pointer-events-auto focus-within:opacity-100"
             ),
@@ -342,13 +346,13 @@ const F = n.forwardRef(({ className: t, children: e, title: i, action: a, isActi
     }
   );
 });
-F.displayName = "SidebarHistoryItem";
-const W = n.forwardRef(
-  ({ className: t, name: e, role: i, src: a, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
+O.displayName = "SidebarHistoryItem";
+const P = o.forwardRef(
+  ({ className: t, name: r, role: i, src: a, hideAvatar: s, ...d }, l) => /* @__PURE__ */ c(
     "a",
     {
       ref: l,
-      className: o(
+      className: n(
         "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",
@@ -356,35 +360,35 @@ const W = n.forwardRef(
       ),
       ...d,
       children: [
-        !s && /* @__PURE__ */ r(H, { size: "sm", name: e, src: a }),
-        s && /* @__PURE__ */ r(
-          R,
+        !s && /* @__PURE__ */ e(L, { size: "sm", name: r, src: a }),
+        s && /* @__PURE__ */ e(
+          j,
           {
             "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__ */ 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 })
+          /* @__PURE__ */ e("div", { className: "truncate text-base leading-[var(--text-base--line-height)] font-normal text-foreground", children: r }),
+          i && /* @__PURE__ */ e("div", { className: "truncate text-xs leading-[var(--text-xs--line-height)] text-tertiary", children: i })
         ] })
       ]
     }
   )
 );
-W.displayName = "SidebarAccount";
+P.displayName = "SidebarAccount";
 export {
-  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,
+  K as Sidebar,
+  P as SidebarAccount,
+  W as SidebarAction,
+  Y as SidebarBrand,
+  F as SidebarFooter,
+  A as SidebarHeader,
+  $ as SidebarHistory,
+  O as SidebarHistoryItem,
+  D as SidebarItem,
+  q as SidebarNav,
+  B as SidebarSection,
   z as SidebarTrigger,
-  E as useSidebar
+  M as useSidebar
 };

package/components/skeleton.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as o } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as f } from "../lib/cn.js";
-const i = n.forwardRef(
+import * as f from "react";
+import { cn as n } from "../lib/cn.js";
+const i = f.forwardRef(
   ({ className: e, circle: r = !1, ...t }, a) => /* @__PURE__ */ o(
     "div",
     {
       ref: a,
       "aria-hidden": !0,
-      className: f(
+      className: n(
         "relative overflow-hidden bg-muted",
         r ? "rounded-full" : "rounded-md",
         "after:absolute after:inset-0 after:-translate-x-full",
         "after:bg-gradient-to-r after:from-transparent after:via-foreground/10 after:to-transparent",
-        "after:animate-[ads-shimmer_var(--duration-pulse)_infinite]",
+        "after:animate-[ads-shimmer_1.5s_infinite]",
         e
       ),
       ...t

package/components/spinner.d.ts

@@ -1,11 +1,20 @@
 import { VariantProps } from 'class-variance-authority';
+import { SPINNER_VARIANTS, SpinnerVariant } from '../lib/spinner-mark';
 import * as React from "react";
-declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+export { SPINNER_VARIANTS, type SpinnerVariant };
+declare const spinnerStyles: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
     color?: "current" | "primary" | "muted" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof spinnerVariants> {
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof spinnerStyles> {
+    /** The work scope determines the grid choreography. Defaults to action. */
+    variant?: SpinnerVariant;
+    /** Accessible status text. Defaults to “Loading”. */
     label?: string;
 }
+/**
+ * A bold 3×3 loading indicator that stays legible in a native 16 px slot.
+ * Every variant uses exactly nine squircles and inherits currentColor. Under
+ * reduced motion, the grid holds a representative frame instead of moving.
+ */
 export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
-export {};