@actioneer/ads 0.5.6 → 0.5.8

package/components/popover.d.ts

@@ -17,4 +17,4 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
     align?: "start" | "center" | "end";
     sideOffset?: number;
 }
-export declare function PopoverContent({ className, align, sideOffset, children, ...props }: PopoverContentProps): React.ReactPortal;
+export declare function PopoverContent({ className, align, sideOffset, children, "aria-label": ariaLabel, ...props }: PopoverContentProps): React.ReactPortal;

package/components/popover.js

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

package/components/progress-circle.js

@@ -1,32 +1,34 @@
 "use client";
-import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import * as x from "react";
+import { MotionConfig as w, motion as y } from "motion/react";
 import { cn as l } from "../lib/cn.js";
-const w = x.forwardRef(
+import { springProgress as M } from "../lib/motion.js";
+const N = x.forwardRef(
   ({
-    className: f,
-    value: m = 0,
-    max: a = 100,
+    className: m,
+    value: f = 0,
+    max: e = 100,
     size: r = 40,
-    strokeWidth: o = 4,
+    strokeWidth: i = 4,
     isIndeterminate: n = !1,
     label: d,
-    ...u
+    ...p
   }, h) => {
-    const i = Math.min(Math.max(m, 0), a), p = a > 0 ? i / a : 0, t = (r - o) / 2, s = 2 * Math.PI * t, v = n ? s * 0.75 : s * (1 - p), e = r / 2;
-    return /* @__PURE__ */ c(
+    const c = Math.min(Math.max(f, 0), e), u = e > 0 ? c / e : 0, s = (r - i) / 2, t = 2 * Math.PI * s, g = n ? t * 0.75 : t * (1 - u), a = r / 2;
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: h,
         role: "progressbar",
         "aria-label": d,
         "aria-valuemin": 0,
-        "aria-valuemax": a,
-        "aria-valuenow": n ? void 0 : i,
-        className: l("inline-flex", f),
+        "aria-valuemax": e,
+        "aria-valuenow": n ? void 0 : c,
+        className: l("inline-flex", m),
         style: { width: r, height: r },
-        ...u,
-        children: /* @__PURE__ */ g(
+        ...p,
+        children: /* @__PURE__ */ v(
           "svg",
           {
             width: r,
@@ -34,34 +36,36 @@ const w = x.forwardRef(
             viewBox: `0 0 ${r} ${r}`,
             className: l(
               "-rotate-90",
-              n && "animate-[ads-spin_var(--duration-spin)_linear_infinite]"
+              n && "animate-[ads-spin_800ms_linear_infinite]"
             ),
             children: [
-              /* @__PURE__ */ c(
+              /* @__PURE__ */ o(
                 "circle",
                 {
                   className: "stroke-muted",
                   fill: "none",
-                  cx: e,
-                  cy: e,
-                  r: t,
-                  strokeWidth: o
+                  cx: a,
+                  cy: a,
+                  r: s,
+                  strokeWidth: i
                 }
               ),
-              /* @__PURE__ */ c(
-                "circle",
+              /* @__PURE__ */ o(w, { reducedMotion: "user", children: /* @__PURE__ */ o(
+                y.circle,
                 {
-                  className: "stroke-brand transition-[stroke-dashoffset] duration-(--duration-normal) ease-out motion-reduce:transition-none",
+                  className: "stroke-brand",
                   fill: "none",
-                  cx: e,
-                  cy: e,
-                  r: t,
-                  strokeWidth: o,
+                  cx: a,
+                  cy: a,
+                  r: s,
+                  strokeWidth: i,
                   strokeLinecap: "round",
-                  strokeDasharray: s,
-                  strokeDashoffset: v
+                  strokeDasharray: t,
+                  initial: !1,
+                  animate: { strokeDashoffset: g },
+                  transition: M
                 }
-              )
+              ) })
             ]
           }
         )
@@ -69,7 +73,7 @@ const w = x.forwardRef(
     );
   }
 );
-w.displayName = "ProgressCircle";
+N.displayName = "ProgressCircle";
 export {
-  w as ProgressCircle
+  N as ProgressCircle
 };

package/components/progress.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
 import * as g from "react";
-import { cn as a } from "../lib/cn.js";
-const p = {
+import { MotionConfig as p, motion as b } from "motion/react";
+import { cn as i } from "../lib/cn.js";
+import { springProgress as v } from "../lib/motion.js";
+const h = {
   sm: "h-1.5",
   md: "h-2"
 }, s = {
@@ -11,18 +13,18 @@ const p = {
   warning: "bg-warning",
   danger: "bg-danger",
   info: "bg-info"
-}, b = g.forwardRef(
+}, w = g.forwardRef(
   ({
     className: l,
     value: t = 0,
     max: e = 100,
-    isIndeterminate: n = !1,
+    isIndeterminate: a = !1,
     size: d = "md",
-    color: i = "primary",
+    color: n = "primary",
     label: m,
-    ...u
+    ...f
   }, c) => {
-    const o = Math.min(Math.max(t, 0), e), f = e > 0 ? o / e * 100 : 0;
+    const o = Math.min(Math.max(t, 0), e), u = e > 0 ? o / e * 100 : 0;
     return /* @__PURE__ */ r(
       "div",
       {
@@ -31,36 +33,38 @@ const p = {
         "aria-label": m,
         "aria-valuemin": 0,
         "aria-valuemax": e,
-        "aria-valuenow": n ? void 0 : o,
-        className: a(
+        "aria-valuenow": a ? void 0 : o,
+        className: i(
           "relative w-full overflow-hidden rounded-full bg-muted",
-          p[d],
+          h[d],
           l
         ),
-        ...u,
-        children: n ? /* @__PURE__ */ r(
+        ...f,
+        children: a ? /* @__PURE__ */ r(
           "div",
           {
-            className: a(
-              "absolute inset-y-0 left-0 w-2/5 rounded-full animate-[ads-indeterminate_var(--duration-pulse)_linear_infinite] motion-reduce:animate-none",
-              s[i]
+            className: i(
+              "absolute inset-y-0 left-0 w-2/5 rounded-full animate-[ads-indeterminate_1.5s_linear_infinite] motion-reduce:animate-none",
+              s[n]
             )
           }
-        ) : /* @__PURE__ */ r(
-          "div",
+        ) : /* @__PURE__ */ r(p, { reducedMotion: "user", children: /* @__PURE__ */ r(
+          b.div,
           {
-            className: a(
-              "h-full w-full origin-left rounded-full transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
-              s[i]
+            className: i(
+              "h-full w-full origin-left rounded-full",
+              s[n]
             ),
-            style: { transform: `scaleX(${f / 100})` }
+            initial: !1,
+            animate: { scaleX: u / 100 },
+            transition: v
           }
-        )
+        ) })
       }
     );
   }
 );
-b.displayName = "Progress";
+w.displayName = "Progress";
 export {
-  b as Progress
+  w as Progress
 };

package/components/radio.js

@@ -1,101 +1,111 @@
 "use client";
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { jsx as r, jsxs as R } from "react/jsx-runtime";
 import * as i from "react";
-import { cn as p } from "../lib/cn.js";
-import { Field as x } from "./field.js";
-const f = i.createContext(null), y = i.forwardRef(
+import { MotionConfig as v, motion as y } from "motion/react";
+import { cn as b } from "../lib/cn.js";
+import { Field as N } from "./field.js";
+import { springRadio as w } from "../lib/motion.js";
+const x = i.createContext(null), k = i.forwardRef(
   ({
-    className: l,
-    name: a,
+    className: d,
+    name: n,
     value: o,
-    onChange: n,
-    label: c,
-    description: u,
-    error: e,
-    orientation: s = "vertical",
-    disabled: t,
-    children: d,
-    ...m
-  }, g) => {
-    const h = i.useMemo(
-      () => ({ name: a, value: o, onValueChange: n, disabled: t }),
-      [a, o, n, t]
+    onChange: t,
+    label: a,
+    description: c,
+    error: u,
+    orientation: p = "vertical",
+    disabled: e,
+    children: s,
+    ...l
+  }, f) => {
+    const m = i.useMemo(
+      () => ({ name: n, value: o, onValueChange: t, disabled: e }),
+      [n, o, t, e]
     );
     return /* @__PURE__ */ r(
-      x,
+      N,
       {
-        ref: g,
-        label: c,
-        description: u,
-        error: e,
+        ref: f,
+        label: a,
+        description: c,
+        error: u,
         role: "radiogroup",
-        className: l,
-        ...m,
-        children: /* @__PURE__ */ r(f.Provider, { value: h, children: /* @__PURE__ */ r(
+        className: d,
+        ...l,
+        children: /* @__PURE__ */ r(x.Provider, { value: m, children: /* @__PURE__ */ r(
           "div",
           {
-            className: p(
+            className: b(
               "flex gap-3",
-              s === "vertical" ? "flex-col" : "flex-row flex-wrap"
+              p === "vertical" ? "flex-col" : "flex-row flex-wrap"
             ),
-            children: d
+            children: s
           }
         ) })
       }
     );
   }
 );
-y.displayName = "RadioGroup";
-const R = i.forwardRef(
-  ({ className: l, children: a, value: o, disabled: n, ...c }, u) => {
-    const e = i.useContext(f), s = n || (e == null ? void 0 : e.disabled);
-    return /* @__PURE__ */ b(
+k.displayName = "RadioGroup";
+const j = i.forwardRef(
+  ({ className: d, children: n, value: o, disabled: t, checked: a, defaultChecked: c, ...u }, p) => {
+    const e = i.useContext(x), s = t || (e == null ? void 0 : e.disabled), l = a !== void 0, [f, m] = i.useState(!!c), g = e ? e.value === o : l ? a : f;
+    return /* @__PURE__ */ R(
       "label",
       {
-        className: p(
+        className: b(
           "group inline-flex items-center gap-2 text-xs text-foreground select-none",
           s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
-          l
+          d
         ),
         children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: u,
+              ref: p,
               type: "radio",
               name: e == null ? void 0 : e.name,
               value: o,
-              checked: e ? e.value === o : void 0,
+              checked: g,
               disabled: s,
-              onChange: (t) => {
-                var d;
-                t.target.checked && ((d = e == null ? void 0 : e.onValueChange) == null || d.call(e, o));
+              onChange: (C) => {
+                var h;
+                C.target.checked && (e ? (h = e.onValueChange) == null || h.call(e, o) : l || m(!0));
               },
               className: "peer sr-only",
-              ...c
+              ...u
             }
           ),
           /* @__PURE__ */ r(
             "span",
             {
               "aria-hidden": !0,
-              className: p(
+              className: b(
                 "flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-elevated",
-                "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out",
+                "transition-[border-color,box-shadow] duration-150 ease-out",
                 "peer-checked:border-brand",
                 "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
               ),
-              children: /* @__PURE__ */ r("span", { className: "size-2 scale-90 rounded-full bg-brand opacity-0 transition-[opacity,transform] duration-(--duration-fast) ease-out group-has-[:checked]:scale-100 group-has-[:checked]:opacity-100 motion-reduce:transition-none" })
+              children: /* @__PURE__ */ r(v, { reducedMotion: "user", children: /* @__PURE__ */ r(
+                y.span,
+                {
+                  className: "size-2 rounded-full bg-brand",
+                  initial: !1,
+                  animate: { opacity: g ? 1 : 0, scale: g ? 1 : 0.9 },
+                  transition: w
+                }
+              ) })
             }
           ),
-          a && /* @__PURE__ */ r("span", { children: a })
+          n && /* @__PURE__ */ r("span", { children: n })
         ]
       }
     );
   }
 );
-R.displayName = "Radio";
+j.displayName = "Radio";
 export {
-  R as Radio,
-  y as RadioGroup
+  j as Radio,
+  k as RadioGroup
 };

package/components/resizable-panel.js

@@ -83,7 +83,7 @@ const H = t.forwardRef(
                   "aria-hidden": !0,
                   className: f(
                     "my-3 w-px rounded-full bg-transparent",
-                    "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    "transition-colors duration-150 ease-out motion-reduce:transition-none",
                     "group-hover/resize:bg-border-strong group-focus-visible/resize:bg-ring",
                     c && "bg-ring"
                   )

package/components/reveal.d.ts

@@ -5,8 +5,8 @@ import { ComponentProps } from 'react';
  * arrives in hierarchy: shells rise, labels and values ink in, visualizations
  * draw left to right — each slot offset by a shared stagger step.
  *
- * Pure CSS animations (off the main thread), tokens for easing, and a
- * reduced-motion fallback that keeps only the fade. Durations are deliberate:
+ * Pure CSS animations (off the main thread) with a reduced-motion fallback
+ * that keeps only the fade. Durations are deliberate:
  * data drawing is explanatory motion, so the wipe may breathe past the <300ms
  * UI-chrome rule; interactive chrome must never use these classes.
  */

package/components/ripple.d.ts

@@ -11,9 +11,9 @@
  *
  * 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.
+ * intercepts input. Its one-off duration is local; the origin and tint use
+ * `--ripple-*` visual variables. Reduced motion drops it entirely. Remount it
+ * (via `key`) to replay on each open.
  */
 export interface RippleProps {
     /**

package/components/scroll-area.js

@@ -1,41 +1,42 @@
 "use client";
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import * as i from "react";
 import { ScrollArea as e } from "radix-ui";
-import { cn as s } from "../lib/cn.js";
-const m = i.forwardRef(
-  ({ className: a, children: l, orientation: r = "vertical", viewportClassName: t, ...n }, d) => /* @__PURE__ */ f(
+import { cn as c } from "../lib/cn.js";
+const f = i.forwardRef(
+  ({ className: a, children: l, orientation: r = "vertical", viewportClassName: t, ...n }, d) => /* @__PURE__ */ m(
     e.Root,
     {
       ref: d,
       "data-slot": "scroll-area",
-      className: s("relative overflow-hidden border border-border", a),
+      className: c("relative overflow-hidden border border-border", a),
       ...n,
       children: [
         /* @__PURE__ */ o(
           e.Viewport,
           {
-            className: s("size-full rounded-[inherit]", t),
+            tabIndex: 0,
+            className: c("size-full rounded-[inherit]", t),
             children: l
           }
         ),
-        (r === "vertical" || r === "both") && /* @__PURE__ */ o(c, { orientation: "vertical" }),
-        (r === "horizontal" || r === "both") && /* @__PURE__ */ o(c, { orientation: "horizontal" }),
+        (r === "vertical" || r === "both") && /* @__PURE__ */ o(s, { orientation: "vertical" }),
+        (r === "horizontal" || r === "both") && /* @__PURE__ */ o(s, { orientation: "horizontal" }),
         /* @__PURE__ */ o(e.Corner, {})
       ]
     }
   )
 );
-m.displayName = "ScrollArea";
-const c = i.forwardRef(({ className: a, orientation: l = "vertical", ...r }, t) => /* @__PURE__ */ o(
+f.displayName = "ScrollArea";
+const s = i.forwardRef(({ className: a, orientation: l = "vertical", ...r }, t) => /* @__PURE__ */ o(
   e.ScrollAreaScrollbar,
   {
     ref: t,
     orientation: l,
     "data-slot": "scroll-bar",
-    className: s(
+    className: c(
       "flex touch-none select-none p-0.5",
-      "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
+      "transition-colors duration-150 ease-out motion-reduce:transition-none",
       l === "vertical" && "h-full w-2.5",
       l === "horizontal" && "h-2.5 flex-col",
       a
@@ -45,13 +46,13 @@ const c = i.forwardRef(({ className: a, orientation: l = "vertical", ...r }, t)
       e.ScrollAreaThumb,
       {
         "data-slot": "scroll-bar-thumb",
-        className: "relative flex-1 rounded-full bg-fill transition-colors duration-(--duration-fast) ease-out hover:bg-border-strong motion-reduce:transition-none"
+        className: "relative flex-1 rounded-full bg-fill transition-colors duration-150 ease-out hover:bg-border-strong motion-reduce:transition-none"
       }
     )
   }
 ));
-c.displayName = "ScrollBar";
+s.displayName = "ScrollBar";
 export {
-  m as ScrollArea,
-  c as ScrollBar
+  f as ScrollArea,
+  s as ScrollBar
 };