@actioneer/ads 1.0.7 → 1.0.9

package/components/tabs.d.ts

@@ -19,7 +19,12 @@ export declare const TabList: React.ForwardRefExoticComponent<TabListProps & Rea
 export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
     isDisabled?: boolean;
-    /** Optional trailing count, rendered as `· N` (e.g. a filter's match count). */
+    /**
+     * Optional trailing count (e.g. a filter's match count), rendered as the bare
+     * number 6px after the label. It stays quieter than the label: Regular
+     * weight and tabular figures in every state, tertiary grey when inactive and
+     * the primary-action teal when active.
+     */
     count?: number;
 }
 export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

package/components/tabs.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as p, jsxs as E } from "react/jsx-runtime";
 import * as r from "react";
-import { MotionConfig as $, motion as M } from "motion/react";
+import { MotionConfig as j, motion as $ } from "motion/react";
 import { cva as L } from "class-variance-authority";
 import { cn as b } from "../lib/cn.js";
-import { springControl as U } from "../lib/motion.js";
+import { springControl as M } from "../lib/motion.js";
 const N = (o, e, t) => `${o}-${e}-${encodeURIComponent(t).replaceAll("%", "_")}`, P = r.createContext(null);
 function z(o) {
   const e = r.useContext(P);
@@ -12,19 +12,19 @@ function z(o) {
     throw new Error(`<${o}> must be used within <Tabs>`);
   return e;
 }
-const _ = r.forwardRef(
+const U = r.forwardRef(
   ({
     className: o,
     value: e,
     defaultValue: t,
     onValueChange: a,
-    variant: y,
+    variant: g,
     orientation: c = "horizontal",
     size: m,
     children: R,
     ...A
   }, k) => {
-    const x = e !== void 0, [g, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : g, I = r.useCallback(
+    const x = e !== void 0, [y, v] = r.useState(t), T = r.useId().replaceAll(":", ""), d = r.useId(), w = r.useRef([]), h = r.useRef(/* @__PURE__ */ new Set()), f = x ? e : y, I = r.useCallback(
       (l) => {
         x || v(l), a == null || a(l);
       },
@@ -63,16 +63,22 @@ const _ = r.forwardRef(
           o
         ),
         ...A,
-        children: /* @__PURE__ */ p($, { reducedMotion: "user", children: R })
+        children: /* @__PURE__ */ p(j, { reducedMotion: "user", children: R })
       }
     ) });
   }
 );
-_.displayName = "Tabs";
-const C = L("inline-flex text-l", {
+U.displayName = "Tabs";
+const C = L("inline-flex text-m", {
   variants: {
     orientation: {
-      horizontal: "w-full self-start flex-row items-center gap-4 overflow-x-auto border-b border-table-stroke",
+      horizontal: b(
+        "w-full self-start flex-row items-center gap-4 overflow-x-auto",
+        // Full-width 1px baseline: WG3 at the leading edge fading to
+        // transparent. Triggers overlap it (-mb-px) so the thumb slides on it.
+        "pb-px bg-[image:linear-gradient(to_right,var(--border-tertiary),transparent)]",
+        "bg-[length:100%_1px] bg-bottom bg-no-repeat"
+      ),
       vertical: "flex-col items-stretch gap-0 border-r border-table-stroke"
     }
   },
@@ -121,11 +127,11 @@ const H = L(
     }
   }
 ), O = r.forwardRef(
-  ({ className: o, value: e, isDisabled: t, count: a, children: y, onClick: c, onKeyDown: m, ...R }, A) => {
+  ({ className: o, value: e, isDisabled: t, count: a, children: g, onClick: c, onKeyDown: m, ...R }, A) => {
     const {
       value: k,
       setValue: x,
-      baseId: g,
+      baseId: y,
       registerTab: v,
       tabs: T,
       disabled: d,
@@ -141,14 +147,14 @@ const H = L(
       if (m == null || m(i), i.defaultPrevented) return;
       const s = T.current, l = s.indexOf(e);
       if (l === -1) return;
-      const V = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], j = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+      const V = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], _ = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
       let n = null;
       if (V.includes(i.key)) {
         n = l;
         do
           n = (n + 1) % s.length;
         while (d.current.has(s[n]) && n !== l);
-      } else if (j.includes(i.key)) {
+      } else if (_.includes(i.key)) {
         n = l;
         do
           n = (n - 1 + s.length) % s.length;
@@ -166,7 +172,7 @@ const H = L(
         i.preventDefault();
         const u = s[n];
         x(u);
-        const S = document.getElementById(N(g, "tab", u));
+        const S = document.getElementById(N(y, "tab", u));
         S == null || S.focus();
       }
     };
@@ -176,7 +182,7 @@ const H = L(
         ref: A,
         type: "button",
         role: "tab",
-        id: N(g, "tab", e),
+        id: N(y, "tab", e),
         "aria-selected": f,
         "aria-disabled": t || void 0,
         disabled: t,
@@ -194,30 +200,27 @@ const H = L(
         ...R,
         children: [
           f && /* @__PURE__ */ p(
-            M.span,
+            $.span,
             {
               layoutId: w,
               "aria-hidden": !0,
-              transition: U,
+              transition: M,
               className: b(
                 "absolute bg-action-primary",
                 h === "horizontal" ? "left-0 right-0 bottom-0 h-0.5" : "top-0 bottom-0 right-0 w-0.5"
               )
             }
           ),
-          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1", children: [
-            y,
-            a != null && /* @__PURE__ */ E(
+          /* @__PURE__ */ E("span", { className: "relative inline-flex items-center gap-1.5", children: [
+            g,
+            a != null && /* @__PURE__ */ p(
               "span",
               {
                 className: b(
-                  "tabular-nums",
-                  f ? "text-action-primary-text" : "text-secondary"
+                  "font-normal tabular-nums",
+                  f ? "text-action-primary-text" : "text-on-white-tertiary"
                 ),
-                children: [
-                  "· ",
-                  a
-                ]
+                children: a
               }
             )
           ] })
@@ -248,12 +251,12 @@ const q = r.forwardRef(
 );
 q.displayName = "TabSeparator";
 const F = r.forwardRef(
-  ({ className: o, value: e, children: t, ...a }, y) => {
+  ({ className: o, value: e, children: t, ...a }, g) => {
     const { value: c, baseId: m } = z("TabPanel");
     return c !== e ? null : /* @__PURE__ */ p(
       "div",
       {
-        ref: y,
+        ref: g,
         role: "tabpanel",
         id: N(m, "panel", e),
         "aria-labelledby": N(m, "tab", e),
@@ -274,5 +277,5 @@ export {
   B as TabList,
   F as TabPanel,
   q as TabSeparator,
-  _ as Tabs
+  U as Tabs
 };

package/components/timeline.js

@@ -10,7 +10,7 @@ const p = l.forwardRef(
     {
       ref: r,
       className: e(
-        "relative pb-4 pl-6 last:pb-0 last:[&_.ads-timeline-line]:hidden",
+        "relative pb-6 pl-6 last:pb-0 last:[&_.ads-timeline-line]:hidden",
         a
       ),
       ...m,
@@ -20,7 +20,7 @@ const p = l.forwardRef(
           {
             "aria-hidden": !0,
             className: e(
-              "ads-timeline-line absolute bottom-0 left-1.5 top-5 w-px bg-border",
+              "ads-timeline-line absolute -bottom-0.5 left-1.5 top-4.5 w-px bg-border",
               s
             )
           }
@@ -30,7 +30,7 @@ const p = l.forwardRef(
           {
             "aria-hidden": !0,
             className: e(
-              "absolute left-0.5 top-4 size-2 rounded-dot bg-muted-foreground",
+              "absolute left-0.5 top-1.5 size-2 rounded-dot bg-muted-foreground",
               i
             )
           }

package/components/toast.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as T, jsx as c } from "react/jsx-runtime";
-import * as r from "react";
+import * as o from "react";
 import { createPortal as B } from "react-dom";
 import { MotionConfig as V, AnimatePresence as q, motion as G } from "motion/react";
 import { WarningCircle as J, Warning as K, Info as E, CheckCircle as Q, Close as U } from "../lib/icons.js";
@@ -9,15 +9,15 @@ import { springOverlay as z } from "../lib/motion.js";
 import { Ripple as X } from "./ripple.js";
 import { Button as Y } from "./button.js";
 import { Spinner as Z } from "./spinner.js";
-const R = r.createContext(null);
+const R = o.createContext(null);
 function fe() {
-  const v = r.useContext(R);
+  const v = o.useContext(R);
   if (!v)
     throw new Error("useToast must be used within a <ToastProvider>.");
   const { push: l, close: g, clear: d } = v;
-  return { toast: r.useMemo(() => {
+  return { toast: o.useMemo(() => {
     const u = ((s, a) => {
-      if (s !== null && typeof s == "object" && !r.isValidElement(s)) {
+      if (s !== null && typeof s == "object" && !o.isValidElement(s)) {
         const { title: i, ...h } = s;
         return l(i, { ...h, ...a });
       }
@@ -59,53 +59,53 @@ function he({
   maxVisible: g = 3
 }) {
   var M;
-  const [d, w] = r.useState([]), [u, f] = r.useState(/* @__PURE__ */ new Set()), s = r.useRef(/* @__PURE__ */ new Map()), a = r.useRef(/* @__PURE__ */ new Map()), i = r.useCallback((e) => {
-    w((o) => o.filter((m) => m.id !== e));
+  const [d, w] = o.useState([]), [u, f] = o.useState(/* @__PURE__ */ new Set()), s = o.useRef(/* @__PURE__ */ new Map()), a = o.useRef(/* @__PURE__ */ new Map()), i = o.useCallback((e) => {
+    w((r) => r.filter((m) => m.id !== e));
     const t = s.current.get(e);
-    t != null && t.handle && clearTimeout(t.handle), s.current.delete(e), f((o) => {
-      if (!o.has(e)) return o;
-      const m = new Set(o);
+    t != null && t.handle && clearTimeout(t.handle), s.current.delete(e), f((r) => {
+      if (!r.has(e)) return r;
+      const m = new Set(r);
       return m.delete(e), m;
     });
     const n = a.current.get(e);
     a.current.delete(e), n == null || n();
-  }, []), h = r.useCallback(() => {
+  }, []), h = o.useCallback(() => {
     f(/* @__PURE__ */ new Set()), w((e) => (e.forEach((t) => {
-      var o;
+      var r;
       const n = s.current.get(t.id);
-      n != null && n.handle && clearTimeout(n.handle), s.current.delete(t.id), (o = a.current.get(t.id)) == null || o(), a.current.delete(t.id);
+      n != null && n.handle && clearTimeout(n.handle), s.current.delete(t.id), (r = a.current.get(t.id)) == null || r(), a.current.delete(t.id);
     }), []));
-  }, []), k = r.useCallback(
+  }, []), P = o.useCallback(
     (e, t = {}) => {
-      const n = Math.random().toString(36).slice(2), o = t.timeout ?? t.duration ?? (t.isLoading ? 0 : 5e3), m = {
+      const n = Math.random().toString(36).slice(2), r = t.timeout ?? t.duration ?? (t.isLoading ? 0 : 5e3), m = {
         variant: "default",
         ...t,
         id: n,
         title: e,
-        dismissAfter: o
+        dismissAfter: r
       };
-      return w((b) => [...b, m]), a.current.set(n, t.onClose), o > 0 && s.current.set(n, {
-        handle: setTimeout(() => i(n), o),
-        remaining: o,
+      return w((b) => [...b, m]), a.current.set(n, t.onClose), r > 0 && s.current.set(n, {
+        handle: setTimeout(() => i(n), r),
+        remaining: r,
         startedAt: Date.now()
       }), n;
     },
     [i]
-  ), I = r.useCallback((e) => {
+  ), I = o.useCallback((e) => {
     const t = s.current.get(e);
     t != null && t.handle && (clearTimeout(t.handle), t.remaining = Math.max(0, t.remaining - (Date.now() - t.startedAt)), t.handle = null, f((n) => {
       if (n.has(e)) return n;
-      const o = new Set(n);
-      return o.add(e), o;
+      const r = new Set(n);
+      return r.add(e), r;
     }));
-  }, []), L = r.useCallback(
+  }, []), L = o.useCallback(
     (e) => {
       const t = s.current.get(e);
       if (!(!t || t.handle)) {
         if (f((n) => {
           if (!n.has(e)) return n;
-          const o = new Set(n);
-          return o.delete(e), o;
+          const r = new Set(n);
+          return r.delete(e), r;
         }), t.remaining <= 0) {
           i(e);
           return;
@@ -115,7 +115,7 @@ function he({
     },
     [i]
   );
-  r.useEffect(() => {
+  o.useEffect(() => {
     const e = s.current;
     return () => {
       e.forEach((t) => {
@@ -123,16 +123,16 @@ function he({
       }), e.clear();
     };
   }, []);
-  const j = r.useMemo(() => ({ push: k, close: i, clear: h }), [k, i, h]), [H, $] = r.useState(!1);
-  r.useEffect(() => $(!0), []);
-  const [y, P] = r.useState(null), S = r.useRef(null), D = (M = d[d.length - 1]) == null ? void 0 : M.id;
-  r.useLayoutEffect(() => {
-    const e = S.current;
+  const j = o.useMemo(() => ({ push: P, close: i, clear: h }), [P, i, h]), [H, $] = o.useState(!1);
+  o.useEffect(() => $(!0), []);
+  const [y, S] = o.useState(null), k = o.useRef(null), D = (M = d[d.length - 1]) == null ? void 0 : M.id;
+  o.useLayoutEffect(() => {
+    const e = k.current;
     if (!e) {
-      P(null);
+      S(null);
       return;
     }
-    const t = () => P(e.offsetHeight);
+    const t = () => S(e.offsetHeight);
     t();
     const n = new ResizeObserver(t);
     return n.observe(e), () => n.disconnect();
@@ -152,11 +152,11 @@ function he({
           role: "region",
           "aria-label": "Notifications",
           children: /* @__PURE__ */ c(V, { reducedMotion: "user", children: /* @__PURE__ */ c(q, { children: d.map((e, t) => {
-            const n = d.length - 1 - t, o = n === 0, m = n >= g, b = ee[e.variant ?? "default"], F = b.icon;
+            const n = d.length - 1 - t, r = n === 0, m = n >= g, b = ee[e.variant ?? "default"], F = b.icon;
             return /* @__PURE__ */ T(
               G.div,
               {
-                ref: o ? S : void 0,
+                ref: r ? k : void 0,
                 layout: !1,
                 role: "status",
                 "aria-live": "polite",
@@ -179,39 +179,36 @@ function he({
                 className: p(
                   "group/toast absolute inset-x-0 flex items-start gap-1.5",
                   x ? "top-0" : "bottom-0",
-                  "rounded-2xl border border-toast-stroke bg-elevated px-4 py-3 shadow-300",
-                  o ? "pointer-events-auto" : "pointer-events-none overflow-hidden"
+                  "rounded-2xl bg-elevated px-4 py-3 shadow-float",
+                  r ? "pointer-events-auto" : "pointer-events-none overflow-hidden"
                 ),
                 style: {
                   zIndex: 100 - n,
                   // Behind layers freeze at the front card's height so
                   // only their top edge shows as a clean sliver.
-                  height: !o && y != null ? y : void 0
+                  height: !r && y != null ? y : void 0
                 },
                 children: [
                   /* @__PURE__ */ c(X, { origin: x ? "top" : "bottom" }),
-                  e.dismissAfter > 0 && // The countdown reads as the card's bottom bar stroke:
-                  // a full-bleed edge bar clipped by the card's radius,
-                  // not an inset line element floating inside the toast.
-                  /* @__PURE__ */ T(
+                  e.dismissAfter > 0 && // The toast has no border (the float shadow's hairline
+                  // edges it), and the countdown has no grey track: only
+                  // the thin tone-coloured bar, clipped by the radius.
+                  /* @__PURE__ */ c(
                     "span",
                     {
                       "aria-hidden": !0,
                       className: "pointer-events-none absolute inset-0 overflow-hidden rounded-2xl",
-                      children: [
-                        /* @__PURE__ */ c("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-toast-stroke" }),
-                        /* @__PURE__ */ c(
-                          "span",
-                          {
-                            "data-toast-progress": !0,
-                            className: p("absolute inset-x-0 bottom-0 block h-0.5 origin-left", b.progress),
-                            style: {
-                              animation: `ads-toast-progress ${e.dismissAfter}ms linear forwards`,
-                              animationPlayState: u.has(e.id) ? "paused" : "running"
-                            }
+                      children: /* @__PURE__ */ c(
+                        "span",
+                        {
+                          "data-toast-progress": !0,
+                          className: p("absolute inset-x-0 bottom-0 block h-0.5 origin-left", b.progress),
+                          style: {
+                            animation: `ads-toast-progress ${e.dismissAfter}ms linear forwards`,
+                            animationPlayState: u.has(e.id) ? "paused" : "running"
                           }
-                        )
-                      ]
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ c(
@@ -249,7 +246,7 @@ function he({
                       "aria-label": "Dismiss",
                       className: p(
                         "absolute -right-1 -top-1 inline-flex size-5 items-center justify-center",
-                        "rounded-full border border-border bg-elevated text-muted-foreground shadow-elevation",
+                        "rounded-full border border-border bg-elevated text-muted-foreground",
                         "opacity-0 transition-opacity duration-150 ease-out",
                         "group-hover/toast:opacity-100 focus-visible:opacity-100",
                         "hover:bg-muted hover:text-foreground",

package/components/ui/button.js

@@ -10,10 +10,10 @@ const u = a(
       variant: {
         default: "bg-action-primary text-action-primary-foreground hover:bg-action-primary-hover",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline: "border bg-background shadow-100 hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text",
+        outline: "border bg-background hover:border-action-primary hover:bg-action-primary-soft hover:text-action-primary-text",
         secondary: "bg-action-primary-soft text-action-primary-text hover:bg-action-primary-soft/80",
         ghost: "hover:bg-action-primary-soft hover:text-action-primary-text",
-        link: "text-action-primary-text underline-offset-4 hover:underline"
+        link: "text-action-primary-text"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -32,7 +32,7 @@ const u = a(
     }
   }
 );
-function g({
+function l({
   className: r,
   variant: t = "default",
   size: e = "default",
@@ -52,6 +52,6 @@ function g({
   );
 }
 export {
-  g as Button,
+  l as Button,
   u as buttonVariants
 };

package/components/ui/dialog.js

@@ -84,7 +84,7 @@ function V({
             animate: "visible",
             exit: "hidden",
             className: u(
-              "pointer-events-auto relative flex max-h-[calc(100dvh-2rem)] w-full max-w-[38.75rem] flex-col overflow-hidden rounded-xl bg-elevated text-foreground shadow-400 outline-none max-sm:max-h-[calc(100dvh-1rem)] max-sm:rounded-lg",
+              "pointer-events-auto relative flex max-h-[calc(100dvh-2rem)] w-full max-w-[38.75rem] flex-col overflow-hidden rounded-xl bg-elevated text-foreground shadow-overlay outline-none max-sm:max-h-[calc(100dvh-1rem)] max-sm:rounded-lg",
               t
             ),
             children: [