@actioneer/ads 0.5.7 → 0.5.8

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
 };

package/components/segmented.js

@@ -1,40 +1,40 @@
 "use client";
 import { jsx as n, jsxs as x } from "react/jsx-runtime";
-import * as l from "react";
+import * as d from "react";
 import { MotionConfig as h, motion as v } from "motion/react";
-import { cva as d } from "class-variance-authority";
+import { cva as l } from "class-variance-authority";
 import { cn as c } from "../lib/cn.js";
-import { EASE_OUT as w } from "../lib/motion.js";
-const y = d(
+import { springControl as w } from "../lib/motion.js";
+const y = l(
   // Borderless recessed track on ink-200 (bg-surface) — matches the Tabs
-  // primary track (the pill provides the definition; a stroke around the
+  // primary track (the selected segment 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",
+  "inline-flex items-center gap-1 bg-surface p-1",
   {
     variants: {
       size: {
-        sm: "text-xs",
-        md: "text-xs",
-        lg: "text-base"
+        sm: "rounded-sm text-xs",
+        md: "rounded-md text-xs",
+        lg: "rounded-md text-base"
       }
     },
     defaultVariants: { size: "md" }
   }
-), D = d(
+), D = l(
   c(
-    // The active pill is a shared motion thumb that SLIDES between options
+    // The active segment 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-full font-normal select-none",
-    "transition-colors duration-(--duration-fast) cursor-pointer",
+    "relative inline-flex items-center justify-center whitespace-nowrap font-normal select-none",
+    "transition-colors duration-150 cursor-pointer",
     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
     "disabled:pointer-events-none disabled:opacity-50"
   ),
   {
     variants: {
       size: {
-        sm: "h-6 px-2.5",
-        md: "h-8 px-3",
-        lg: "h-9 px-4"
+        sm: "h-6 rounded-sm px-2.5",
+        md: "h-8 rounded-md px-3",
+        lg: "h-9 rounded-md px-4"
       },
       selected: {
         true: "text-foreground",
@@ -43,10 +43,10 @@ const y = d(
     },
     defaultVariants: { size: "md", selected: !1 }
   }
-), k = l.forwardRef(({ options: r, value: a, onChange: s, size: o, className: u, ...m }, f) => {
-  const p = l.useId(), i = (e) => {
-    const t = r.findIndex((g) => g.value === a), b = ((t < 0 ? 0 : t) + e + r.length) % r.length;
-    s(r[b].value);
+), k = d.forwardRef(({ options: r, value: a, onChange: o, size: s, className: m, ...u }, f) => {
+  const p = d.useId(), i = (e) => {
+    const t = r.findIndex((b) => b.value === a), g = ((t < 0 ? 0 : t) + e + r.length) % r.length;
+    o(r[g].value);
   };
   return /* @__PURE__ */ n(
     "div",
@@ -65,8 +65,8 @@ const y = d(
             break;
         }
       },
-      className: c(y({ size: o }), u),
-      ...m,
+      className: c(y({ size: s }), m),
+      ...u,
       children: /* @__PURE__ */ n(h, { reducedMotion: "user", children: r.map((e) => {
         const t = e.value === a;
         return /* @__PURE__ */ x(
@@ -77,8 +77,8 @@ const y = d(
             "aria-checked": t,
             "aria-label": e.ariaLabel,
             tabIndex: t ? 0 : -1,
-            onClick: () => s(e.value),
-            className: D({ size: o, selected: t }),
+            onClick: () => o(e.value),
+            className: D({ size: s, selected: t }),
             children: [
               t && /* @__PURE__ */ n(
                 v.span,
@@ -86,8 +86,8 @@ const y = d(
                   layoutId: p,
                   "aria-hidden": !0,
                   layoutDependency: a,
-                  transition: { duration: 0.2, ease: w },
-                  className: "absolute inset-0 rounded-full bg-elevated shadow-elevation"
+                  transition: w,
+                  className: "absolute inset-0 rounded-[inherit] bg-elevated shadow-elevation"
                 }
               ),
               /* @__PURE__ */ n("span", { className: "relative", children: e.label })

package/components/select.d.ts

@@ -17,6 +17,8 @@ export interface SelectProps extends VariantProps<typeof selectTriggerVariants>
     isInvalid?: boolean;
     className?: string;
     id?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     /**
      * Which side the listbox opens toward. Use `"top"` when the trigger sits
      * at the bottom of a clipped container (e.g. a table footer inside an