@actioneer/ads 1.0.6 → 1.0.7

package/DESIGN.md

@@ -179,7 +179,7 @@ components:
 
 TASTE.md puts it in one line: On a quiet, neutral ground, colour and motion are spent like money — rarely, deliberately, and only where the eye should go.
 
-ADS 1.0.6 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
+ADS 1.0.7 is a library first and a look second. 323 components across 10 families (Primitives / utilities, Foundations, Form controls, Overlays, Data display, Feedback, Navigation, Layout, AI Elements, Chat) ship from one barrel, and every product that consumes them inherits the judgment encoded in 56 semantic tokens and 11 principles rather than re-deciding it per screen.
 
 The ground is warm grey and the ink is warm near-black. One hue is spent by default, the Studio teal CTA family, and four more carry semantic status. Everything else stays neutral. A consumer product may narrow that further, and one already does: Baby Sentinel drops the teal and runs every action on ink.
 

package/components/alert.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 /**
- * Alert — inline status messaging on a raised white surface. Status color is
- * confined to the indicator, title, and optional timeout progress bar; the
- * description stays muted. Timed alerts enter from the right and leave to the
- * left once their progress completes.
+ * Alert — inline status messaging in an outlined white container. A softly tinted
+ * indicator carries status while the title and description stay neutral.
+ * Buttons are 24px tall and actions sit 16px below the message. Timed alerts
+ * retain their countdown and dismiss after it completes.
  */
 declare const alertVariants: (props?: ({
     variant?: "success" | "warning" | "danger" | "info" | "default" | null | undefined;

package/components/alert.js

@@ -1,90 +1,105 @@
 "use client";
-import { jsx as e, jsxs as k } from "react/jsx-runtime";
-import * as t from "react";
-import { cva as A } from "class-variance-authority";
-import { MotionConfig as E, motion as g } from "motion/react";
-import { Info as p, WarningCircle as C, Warning as I, CheckCircle as R, Close as j } from "../lib/icons.js";
-import { cn as d } from "../lib/cn.js";
-import { springOverlay as z } from "../lib/motion.js";
-const D = A(
-  "relative flex w-full items-start gap-4 overflow-hidden rounded-2xl border border-border bg-card p-4 shadow-[var(--shadow-200)]",
+import { jsx as t, jsxs as I } from "react/jsx-runtime";
+import * as e from "react";
+import { cva as R } from "class-variance-authority";
+import { MotionConfig as j, motion as y } from "motion/react";
+import { Info as h, WarningCircle as V, Warning as M, CheckCircle as S, Close as W } from "../lib/icons.js";
+import { cn as m } from "../lib/cn.js";
+import { fadeTransition as X, springOverlay as H } from "../lib/motion.js";
+const O = R(
+  "relative grid w-full min-w-0 grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-4 overflow-hidden rounded-lg border border-border bg-card p-4 text-on-white-primary [&_button]:h-6",
   {
     variants: {
       variant: {
-        default: "[--alert-accent:var(--foreground)]",
-        success: "[--alert-accent:var(--color-success-700)]",
-        warning: "[--alert-accent:var(--color-warning-700)]",
-        danger: "[--alert-accent:var(--color-danger-700)]",
-        info: "[--alert-accent:var(--color-info-700)]"
+        default: "[--alert-accent:var(--foreground)] [--alert-soft:var(--fill)]",
+        success: "[--alert-accent:var(--color-success-700)] [--alert-soft:var(--color-success-50)]",
+        warning: "[--alert-accent:var(--color-warning-700)] [--alert-soft:var(--color-warning-50)]",
+        danger: "[--alert-accent:var(--color-danger-700)] [--alert-soft:var(--color-danger-50)]",
+        info: "[--alert-accent:var(--color-info-700)] [--alert-soft:var(--color-info-50)]"
       }
     },
     defaultVariants: { variant: "default" }
   }
-), T = {
-  default: p,
-  success: R,
-  warning: I,
-  danger: C,
-  info: p
-}, M = t.forwardRef(
-  ({ className: n, variant: r = "default", icon: s, duration: a = 0, onClose: l, children: x, ...v }, h) => {
-    const b = T[r ?? "default"], [i, w] = t.useState(!1), [o, N] = t.useState(!1), c = t.useRef(l), m = t.useRef(!1);
-    t.useEffect(() => {
-      c.current = l;
+), q = {
+  default: h,
+  success: S,
+  warning: M,
+  danger: V,
+  info: h
+}, B = e.forwardRef(
+  ({ className: o, variant: a = "default", icon: s, duration: i = 0, onClose: l, children: g, ...A }, E) => {
+    const T = q[a ?? "default"], [n, k] = e.useState(!1), [c, C] = e.useState(!1), d = e.useRef(l), w = e.useRef(!1), u = e.Children.toArray(g);
+    let f = -1;
+    u.forEach((r, D) => {
+      if (!e.isValidElement(r)) return;
+      const v = typeof r.type == "string" ? void 0 : r.type.displayName;
+      (r.type === b || r.type === N || v === "AlertTitle" || v === "AlertDescription") && (f = D);
+    });
+    const _ = f < 0 ? g : u.slice(0, f + 1), x = f < 0 ? [] : u.slice(f + 1);
+    e.useEffect(() => {
+      d.current = l;
     }, [l]);
-    const u = t.useCallback(() => {
-      o || w(!0);
-    }, [o]);
-    t.useEffect(() => {
-      if (a <= 0 || i || o) return;
-      const f = window.setTimeout(u, a);
-      return () => window.clearTimeout(f);
-    }, [u, a, o, i]);
-    const y = t.useCallback(() => {
-      var f;
-      !i || m.current || (m.current = !0, N(!0), (f = c.current) == null || f.call(c));
-    }, [i]);
-    return o ? null : /* @__PURE__ */ e(E, { reducedMotion: "user", children: /* @__PURE__ */ e(
-      g.div,
+    const p = e.useCallback(() => {
+      c || k(!0);
+    }, [c]);
+    e.useEffect(() => {
+      if (i <= 0 || n || c) return;
+      const r = window.setTimeout(p, i);
+      return () => window.clearTimeout(r);
+    }, [p, i, c, n]);
+    const z = e.useCallback(() => {
+      var r;
+      !n || w.current || (w.current = !0, C(!0), (r = d.current) == null || r.call(d));
+    }, [n]);
+    return c ? null : /* @__PURE__ */ t(j, { reducedMotion: "user", children: /* @__PURE__ */ t(
+      y.div,
       {
+        className: "w-full min-w-0",
         initial: { opacity: 1, x: 32 },
-        animate: i ? { opacity: 0, x: -32 } : { opacity: 1, x: 0 },
-        transition: i ? { duration: 0.18, ease: "easeIn" } : z,
-        onAnimationComplete: y,
-        children: /* @__PURE__ */ k(
+        animate: n ? { opacity: 0, x: -32 } : { opacity: 1, x: 0 },
+        transition: n ? X : H,
+        onAnimationComplete: z,
+        children: /* @__PURE__ */ I(
           "div",
           {
-            ref: h,
+            ref: E,
+            "data-slot": "alert",
             role: "alert",
-            className: d(D({ variant: r }), n),
-            ...v,
+            className: m(
+              O({ variant: a }),
+              l && "grid-cols-[auto_minmax(0,1fr)_auto]",
+              o
+            ),
+            ...A,
             children: [
-              /* @__PURE__ */ e("span", { className: "flex shrink-0 select-none items-center justify-center py-1 text-(--alert-accent) [&_svg]:size-4", children: s ?? /* @__PURE__ */ e(b, { "aria-hidden": !0 }) }),
-              /* @__PURE__ */ e("div", { className: "flex min-w-0 grow flex-col items-start", children: x }),
-              l && /* @__PURE__ */ e(
+              /* @__PURE__ */ t("span", { "data-slot": "alert-icon", className: "col-start-1 row-start-1 flex size-8 self-center select-none items-center justify-center rounded-md bg-(--alert-soft) text-(--alert-accent) [&_svg]:size-4", children: s ?? /* @__PURE__ */ t(T, { "aria-hidden": !0 }) }),
+              /* @__PURE__ */ t("div", { "data-slot": "alert-content", className: "col-start-2 row-start-1 flex min-w-0 flex-col items-start gap-0.5 self-center [overflow-wrap:anywhere]", children: _ }),
+              l && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
                   "aria-label": "Dismiss",
-                  onClick: u,
-                  className: d(
-                    "inline-flex size-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground",
-                    "transition-colors hover:bg-fill hover:text-foreground",
+                  onClick: p,
+                  className: m(
+                    "col-start-3 row-start-1 inline-flex size-6 cursor-pointer items-center justify-center self-start rounded-sm text-on-white-tertiary",
+                    "transition-[background-color,color,transform] duration-150 ease-out hover:bg-fill hover:text-on-white-primary",
+                    "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
                     "outline-none focus-visible:ring-3 focus-visible:ring-ring",
                     "[&_svg]:size-4"
                   ),
-                  children: /* @__PURE__ */ e(j, { "aria-hidden": !0 })
+                  children: /* @__PURE__ */ t(W, { "aria-hidden": !0 })
                 }
               ),
-              a > 0 && /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "absolute inset-x-0 bottom-0 h-0.5 bg-wg3", children: /* @__PURE__ */ e(
-                g.span,
+              x.length > 0 && /* @__PURE__ */ t("div", { "data-slot": "alert-actions", className: "col-start-2 row-start-2 flex min-w-0 flex-wrap items-center gap-2 [&>*]:max-w-full", children: x }),
+              i > 0 && /* @__PURE__ */ t("span", { "aria-hidden": !0, className: "absolute inset-x-0 bottom-0 h-0.5 bg-wg3", children: /* @__PURE__ */ t(
+                y.span,
                 {
                   className: "block size-full origin-left bg-(--alert-accent)",
                   initial: { scaleX: 1 },
                   animate: { scaleX: 0 },
-                  transition: { duration: a / 1e3, ease: "linear" }
+                  transition: { duration: i / 1e3, ease: "linear" }
                 },
-                a
+                i
               ) })
             ]
           }
@@ -93,32 +108,29 @@ const D = A(
     ) });
   }
 );
-M.displayName = "Alert";
-const S = t.forwardRef(({ className: n, ...r }, s) => /* @__PURE__ */ e(
+B.displayName = "Alert";
+const b = e.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
   "p",
   {
     ref: s,
-    className: d("text-s font-normal leading-6 text-(--alert-accent)", n),
-    ...r
+    "data-slot": "alert-title",
+    className: m("text-m font-medium leading-6 text-on-white-primary", o),
+    ...a
   }
 ));
-S.displayName = "AlertTitle";
-const V = t.forwardRef(({ className: n, ...r }, s) => (
-  // leading-normal (150%) — the description is the only part of an alert that
-  // regularly wraps, and the text-xs default (138%) sets multi-line copy too
-  // tight to scan.
-  /* @__PURE__ */ e(
-    "p",
-    {
-      ref: s,
-      className: d("text-xs leading-normal text-muted-foreground", n),
-      ...r
-    }
-  )
+b.displayName = "AlertTitle";
+const N = e.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ t(
+  "p",
+  {
+    ref: s,
+    "data-slot": "alert-description",
+    className: m("text-m leading-relaxed text-on-white-secondary [overflow-wrap:anywhere]", o),
+    ...a
+  }
 ));
-V.displayName = "AlertDescription";
+N.displayName = "AlertDescription";
 export {
-  M as Alert,
-  V as AlertDescription,
-  S as AlertTitle
+  B as Alert,
+  N as AlertDescription,
+  b as AlertTitle
 };

package/components/radio.d.ts

@@ -10,7 +10,7 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     disabled?: boolean;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
     value: string;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/components/radio.js

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