@actioneer/ads 0.6.0 → 0.8.0

package/components/modal.js

@@ -1,203 +1,277 @@
 "use client";
-import { jsx as a, jsxs as y } from "react/jsx-runtime";
-import * as n from "react";
-import { createPortal as F } from "react-dom";
-import { MotionConfig as j, AnimatePresence as z, motion as h } from "motion/react";
-import { Close as P } from "../lib/icons.js";
-import { cva as T } from "class-variance-authority";
-import { cn as i } from "../lib/cn.js";
-import { backdropVariants as V, modalPanelVariants as H } from "../lib/motion.js";
-import { Ripple as L } from "./ripple.js";
-const q = T(
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import * as r from "react";
+import { MotionConfig as T, AnimatePresence as B, motion as g } from "motion/react";
+import { Dialog as m } from "radix-ui";
+import { cva as H } from "class-variance-authority";
+import { Close as S } from "../lib/icons.js";
+import { cn as n } from "../lib/cn.js";
+import { backdropVariants as K, modalPanelVariants as q } from "../lib/motion.js";
+const A = H(
   [
-    "relative flex w-full flex-col",
-    // Cap height to the viewport and clip, so a tall modal scrolls its body
-    // (below) instead of pushing the footer's action off-screen.
-    "max-h-[calc(100dvh-2rem)] overflow-hidden",
-    "bg-elevated text-foreground",
-    "rounded-xl shadow-elevation"
+    "pointer-events-auto relative flex w-full min-w-0 flex-col overflow-hidden",
+    "max-h-[calc(100dvh-2rem)] bg-elevated text-foreground outline-none",
+    "rounded-xl shadow-400",
+    "max-sm:max-h-[calc(100dvh-1rem)] max-sm:rounded-lg"
   ],
   {
     variants: {
       size: {
-        sm: "max-w-sm",
-        md: "max-w-md",
-        lg: "max-w-lg",
-        xl: "max-w-2xl"
+        /** Quick confirmations and short prompts. */
+        sm: "max-w-[23.75rem]",
+        /** Polaris-style default task dialog. */
+        md: "max-w-[38.75rem]",
+        /** Dense forms, settings, and previews. */
+        lg: "max-w-[48.75rem]",
+        /** Tables and content-heavy workflows. */
+        xl: "max-w-[61.25rem]",
+        /** Responsive canvas with a 16px viewport gutter. */
+        full: "h-[calc(100dvh-2rem)] max-w-none"
+      },
+      position: {
+        center: "",
+        top: ""
       }
     },
-    defaultVariants: { size: "md" }
+    defaultVariants: {
+      size: "md",
+      position: "center"
+    }
   }
-);
-function Z({
+), x = r.createContext(null);
+function M(o) {
+  return r.Children.toArray(o).some((e) => r.isValidElement(e) ? e.type === N ? !0 : M(
+    e.props.children
+  ) : !1);
+}
+function ee({
   open: o,
-  onOpenChange: t,
-  size: r,
-  className: g,
-  children: w,
-  showCloseButton: M = !0,
-  "aria-label": N,
-  "aria-labelledby": k,
-  "aria-describedby": R
+  onOpenChange: e,
+  size: a,
+  position: i,
+  className: l,
+  children: d,
+  showCloseButton: C = !0,
+  closeOnOverlayClick: D = !0,
+  closeOnEscape: z = !0,
+  container: I,
+  initialFocusRef: c,
+  onAfterClose: R,
+  onAfterOpen: u,
+  overlayClassName: j,
+  viewportClassName: V,
+  "aria-label": v,
+  "aria-labelledby": _,
+  "aria-describedby": k
 }) {
-  const d = n.useRef(null), f = n.useRef(null), u = n.useRef(null);
-  return n.useEffect(() => {
-    if (!o) return;
-    u.current = document.activeElement;
-    const E = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const m = f.current, p = [];
-    if (m)
-      for (const e of Array.from(document.body.children))
-        e !== m && e instanceof HTMLElement && !e.inert && (e.inert = !0, p.push(e));
-    const A = () => {
-      var e;
-      return Array.from(
-        ((e = d.current) == null ? void 0 : e.querySelectorAll(
-          'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])'
-        )) ?? []
-      );
-    }, b = (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation(), t(!1);
-        return;
-      }
-      if (e.key !== "Tab") return;
-      const l = d.current;
-      if (!l) return;
-      const s = A();
-      if (s.length === 0) {
-        e.preventDefault(), l.focus();
-        return;
-      }
-      const x = s[0], v = s[s.length - 1], c = document.activeElement;
-      e.shiftKey ? (c === x || c === l) && (e.preventDefault(), v.focus()) : c === v && (e.preventDefault(), x.focus());
-    };
-    document.addEventListener("keydown", b);
-    const D = requestAnimationFrame(() => {
-      var e;
-      (e = d.current) == null || e.focus();
-    });
-    return () => {
-      var e, l;
-      document.removeEventListener("keydown", b), document.body.style.overflow = E;
-      for (const s of p) s.inert = !1;
-      cancelAnimationFrame(D), (l = (e = u.current) == null ? void 0 : e.focus) == null || l.call(e);
-    };
-  }, [o, t]), F(
-    /* @__PURE__ */ a(j, { reducedMotion: "user", children: /* @__PURE__ */ a(z, { children: o && /* @__PURE__ */ y("div", { ref: f, className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-      /* @__PURE__ */ a(
-        h.div,
-        {
-          variants: V,
-          initial: "hidden",
-          animate: "visible",
-          exit: "hidden",
-          className: "absolute inset-0 bg-overlay",
-          onClick: () => t(!1),
-          "aria-hidden": !0
-        },
-        "backdrop"
-      ),
-      /* @__PURE__ */ y(
-        h.div,
-        {
-          ref: d,
-          variants: H,
-          initial: "hidden",
-          animate: "visible",
-          exit: "hidden",
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": N,
-          "aria-labelledby": k,
-          "aria-describedby": R,
-          tabIndex: -1,
-          className: i(q({ size: r }), "relative outline-none", g),
-          children: [
-            /* @__PURE__ */ a(L, { origin: "center" }),
-            M ? /* @__PURE__ */ a(
-              "button",
+  const b = r.useRef(null), f = r.useId(), p = r.useId(), P = r.useMemo(
+    () => M(d),
+    [d]
+  ), E = r.useMemo(
+    () => ({ titleId: f, descriptionId: p }),
+    [p, f]
+  );
+  return /* @__PURE__ */ t(m.Root, { open: o, onOpenChange: e, children: /* @__PURE__ */ t(x.Provider, { value: E, children: /* @__PURE__ */ t(T, { reducedMotion: "user", children: /* @__PURE__ */ t(B, { initial: !1, onExitComplete: R, children: o ? /* @__PURE__ */ y(m.Portal, { forceMount: !0, container: I ?? void 0, children: [
+    /* @__PURE__ */ t(m.Overlay, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ t(
+      g.div,
+      {
+        "data-slot": "modal-overlay",
+        variants: K,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        className: n(
+          "fixed inset-0 z-50 bg-overlay",
+          j
+        )
+      },
+      "modal-overlay"
+    ) }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        "data-slot": "modal-viewport",
+        className: n(
+          "pointer-events-none fixed inset-0 z-50 grid overflow-y-auto p-4",
+          i === "top" ? "place-items-start justify-items-center pt-[max(1rem,8dvh)]" : "place-items-center",
+          "max-sm:p-2",
+          V
+        ),
+        children: /* @__PURE__ */ t(
+          m.Content,
+          {
+            forceMount: !0,
+            asChild: !0,
+            "aria-label": v,
+            "aria-labelledby": _ ?? (v ? void 0 : f),
+            "aria-describedby": k ?? (P ? p : void 0),
+            onEscapeKeyDown: (s) => {
+              z || s.preventDefault();
+            },
+            onPointerDownOutside: (s) => {
+              D || s.preventDefault();
+            },
+            onOpenAutoFocus: (s) => {
+              var h;
+              s.preventDefault(), (h = (c == null ? void 0 : c.current) ?? b.current) == null || h.focus();
+            },
+            onFocusOutside: (s) => s.preventDefault(),
+            children: /* @__PURE__ */ y(
+              g.div,
               {
-                type: "button",
-                onClick: () => t(!1),
-                "aria-label": "Close",
-                className: i(
-                  "absolute right-4 top-4 inline-flex size-8 items-center justify-center",
-                  "rounded-sm text-muted-foreground",
-                  "transition-[background,color,transform] duration-150 ease-out motion-reduce:transition-none hover:bg-muted hover:text-foreground",
-                  "active:scale-[0.97] motion-reduce:active:scale-100",
-                  "outline-none focus-visible:ring-3 focus-visible:ring-ring",
-                  "[&_svg]:size-4 [&_svg]:shrink-0"
+                ref: b,
+                "data-slot": "modal",
+                tabIndex: -1,
+                variants: q,
+                initial: "hidden",
+                animate: "visible",
+                exit: "hidden",
+                onAnimationComplete: (s) => {
+                  s === "visible" && (u == null || u());
+                },
+                className: n(
+                  A({ size: a, position: i }),
+                  l
                 ),
-                children: /* @__PURE__ */ a(P, { "aria-hidden": !0 })
-              }
-            ) : null,
-            w
-          ]
-        },
-        "panel"
-      )
-    ] }) }) }),
-    document.body
-  );
+                children: [
+                  C ? /* @__PURE__ */ t(w, {}) : null,
+                  d
+                ]
+              },
+              "modal-panel"
+            )
+          }
+        )
+      }
+    )
+  ] }) : null }) }) }) });
 }
-const B = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
-  "div",
-  {
-    ref: r,
-    className: i("flex shrink-0 flex-col gap-1 px-6 pt-6 pr-14", o),
-    ...t
-  }
-));
-B.displayName = "ModalHeader";
-const C = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
-  "h2",
+const w = r.forwardRef(({ className: o, children: e, "aria-label": a = "Close", ...i }, l) => /* @__PURE__ */ t(m.Close, { asChild: !0, children: /* @__PURE__ */ t(
+  "button",
   {
-    ref: r,
-    className: i("text-lg font-medium text-foreground", o),
-    ...t
+    ref: l,
+    type: "button",
+    "data-slot": "modal-close",
+    "aria-label": a,
+    className: n(
+      "absolute right-2 top-2 z-10 inline-flex size-7 items-center justify-center",
+      "rounded-sm text-secondary outline-none",
+      "transition-[background,color,transform] duration-150 ease-out motion-reduce:transition-none",
+      "hover:bg-muted hover:text-foreground active:scale-[0.97] motion-reduce:active:scale-100",
+      "focus-visible:ring-3 focus-visible:ring-ring",
+      "[&_svg]:size-4 [&_svg]:shrink-0",
+      o
+    ),
+    ...i,
+    children: e ?? /* @__PURE__ */ t(S, { "aria-hidden": !0 })
   }
-));
-C.displayName = "ModalTitle";
-const K = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
-  "p",
+) }));
+w.displayName = "ModalClose";
+const F = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
+  "div",
   {
-    ref: r,
-    className: i("text-xs text-muted-foreground", o),
-    ...t
+    ref: a,
+    "data-slot": "modal-header",
+    className: n(
+      "flex min-h-11 shrink-0 flex-col justify-center gap-0.5 bg-surface px-3 py-3 pr-11",
+      o
+    ),
+    ...e
   }
 ));
-K.displayName = "ModalDescription";
-const _ = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
+F.displayName = "ModalHeader";
+const G = r.forwardRef(({ className: o, id: e, ...a }, i) => {
+  const l = r.useContext(x), d = n(
+    "text-[15px] font-semibold leading-5 text-foreground",
+    o
+  );
+  return l ? /* @__PURE__ */ t(
+    m.Title,
+    {
+      ref: i,
+      id: e ?? l.titleId,
+      "data-slot": "modal-title",
+      className: d,
+      ...a
+    }
+  ) : /* @__PURE__ */ t("h2", { ref: i, id: e, className: d, ...a });
+});
+G.displayName = "ModalTitle";
+const N = r.forwardRef(({ className: o, id: e, ...a }, i) => {
+  const l = r.useContext(x), d = n(
+    "text-sm leading-5 text-muted-foreground",
+    o
+  );
+  return l ? /* @__PURE__ */ t(
+    m.Description,
+    {
+      ref: i,
+      id: e ?? l.descriptionId,
+      "data-slot": "modal-description",
+      className: d,
+      ...a
+    }
+  ) : /* @__PURE__ */ t(
+    "p",
+    {
+      ref: i,
+      id: e,
+      className: d,
+      ...a
+    }
+  );
+});
+N.displayName = "ModalDescription";
+const J = r.forwardRef(
+  ({ className: o, padding: e = "default", ...a }, i) => /* @__PURE__ */ t(
+    "div",
+    {
+      ref: i,
+      "data-slot": "modal-body",
+      className: n(
+        "min-h-0 flex-1 overflow-y-auto overscroll-contain border-t-[1px] border-border-tertiary text-sm leading-5 text-foreground",
+        e === "default" && "px-4 py-4",
+        o
+      ),
+      ...a
+    }
+  )
+);
+J.displayName = "ModalBody";
+const O = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: r,
-    className: i(
-      "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 text-xs text-foreground",
+    ref: a,
+    "data-slot": "modal-section",
+    className: n(
+      "px-4 py-4 [&+&]:border-t [&+&]:border-border-tertiary",
       o
     ),
-    ...t
+    ...e
   }
 ));
-_.displayName = "ModalBody";
-const I = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
+O.displayName = "ModalSection";
+const Q = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
   "div",
   {
-    ref: r,
-    className: i(
-      "flex shrink-0 items-center justify-end gap-2 px-6 pb-6 pt-2",
+    ref: a,
+    "data-slot": "modal-footer",
+    className: n(
+      "flex min-h-[3.75rem] shrink-0 flex-wrap items-center justify-end gap-2 border-t-[1px] border-border-tertiary px-4 py-4",
+      "[&_button]:h-7 [&_button]:rounded-sm [&_button]:px-2.5 [&_button]:text-xs",
       o
     ),
-    ...t
+    ...e
   }
 ));
-I.displayName = "ModalFooter";
+Q.displayName = "ModalFooter";
 export {
-  Z as Modal,
-  _ as ModalBody,
-  K as ModalDescription,
-  I as ModalFooter,
-  B as ModalHeader,
-  C as ModalTitle
+  ee as Modal,
+  J as ModalBody,
+  w as ModalClose,
+  N as ModalDescription,
+  Q as ModalFooter,
+  F as ModalHeader,
+  O as ModalSection,
+  G as ModalTitle
 };

package/components/number-field.js

@@ -1,92 +1,95 @@
 "use client";
-import { jsxs as k, jsx as s } from "react/jsx-runtime";
-import * as M from "react";
-import { Minus as _, Plus as j } from "../lib/icons.js";
-import { cn as a } from "../lib/cn.js";
-import { inputBaseClass as h } from "./field.js";
+import { jsxs as k, jsx as o } from "react/jsx-runtime";
+import * as h from "react";
+import { Minus as M, Plus as _ } from "../lib/icons.js";
+import { cn as d } from "../lib/cn.js";
+import { inputBaseClass as j } from "./field.js";
 const D = {
   sm: {
-    field: "h-8 rounded-sm text-xs",
+    field: "h-8 rounded-sm",
     btn: "size-8 rounded-sm [&_svg]:size-3.5"
   },
   md: {
-    field: "h-10 rounded-md text-xs",
+    field: "h-10 rounded-md",
     btn: "size-10 rounded-md [&_svg]:size-4"
   },
   lg: {
-    field: "h-11 rounded-md text-base",
+    field: "h-11 rounded-md",
     btn: "size-11 rounded-md [&_svg]:size-4"
   }
-}, F = M.forwardRef(
+}, F = h.forwardRef(
   ({
     className: v,
     value: c,
     onChange: t,
-    min: i,
-    max: n,
+    min: r,
+    max: i,
     step: l = 1,
-    size: x = "md",
-    isInvalid: N,
-    disabled: o,
-    ...z
-  }, w) => {
-    const u = D[x], b = (r) => {
-      let e = r;
-      return i !== void 0 && (e = Math.max(i, e)), n !== void 0 && (e = Math.min(n, e)), e;
-    }, d = c ?? 0, y = !o && (i === void 0 || d > i), g = !o && (n === void 0 || d < n), m = (r) => t == null ? void 0 : t(b(d + r * l)), p = a(
+    size: y = "md",
+    isInvalid: x,
+    disabled: a,
+    ...N
+  }, z) => {
+    const b = D[y], u = (n) => {
+      let e = n;
+      return r !== void 0 && (e = Math.max(r, e)), i !== void 0 && (e = Math.min(i, e)), e;
+    }, s = c ?? 0, g = !a && (r === void 0 || s > r), w = !a && (i === void 0 || s < i), m = (n) => t == null ? void 0 : t(u(s + n * l)), p = d(
       "inline-flex items-center justify-center rounded-md border border-input bg-elevated text-foreground",
-      "transition-[background,box-shadow] duration-150 hover:bg-muted",
+      "transition-[background,border,color,box-shadow,transform] duration-150 ease-out",
+      "enabled:hover:border-action-primary enabled:hover:bg-action-primary-soft enabled:hover:text-action-primary-text",
+      "enabled:active:scale-[0.97] enabled:active:border-action-primary enabled:active:bg-action-primary-soft enabled:active:text-action-primary-text",
+      "motion-reduce:active:scale-100",
       "outline-none focus-visible:ring-3 focus-visible:ring-ring",
       "disabled:pointer-events-none disabled:opacity-50",
-      u.btn
+      b.btn
     );
-    return /* @__PURE__ */ k("div", { className: a("inline-flex items-center gap-1.5", v), children: [
-      /* @__PURE__ */ s(
+    return /* @__PURE__ */ k("div", { className: d("inline-flex items-center gap-1.5", v), children: [
+      /* @__PURE__ */ o(
         "button",
         {
           type: "button",
           "aria-label": "Decrease",
-          disabled: !y,
+          disabled: !g,
           onClick: () => m(-1),
           className: p,
-          children: /* @__PURE__ */ s(_, {})
+          children: /* @__PURE__ */ o(M, {})
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "input",
         {
-          ref: w,
+          ref: z,
           type: "number",
           inputMode: "numeric",
           value: c ?? "",
-          min: i,
-          max: n,
+          min: r,
+          max: i,
           step: l,
-          disabled: o,
-          "aria-invalid": N || void 0,
-          onChange: (r) => {
-            const e = r.target.value;
+          disabled: a,
+          "aria-invalid": x || void 0,
+          onChange: (n) => {
+            const e = n.target.value;
             if (e === "") return;
             const f = Number(e);
-            Number.isNaN(f) || t == null || t(b(f));
+            Number.isNaN(f) || t == null || t(u(f));
           },
-          className: a(
-            h,
+          className: d(
+            j,
             "w-20 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
-            u.field
+            b.field
           ),
-          ...z
+          ...N
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ o(
         "button",
         {
           type: "button",
           "aria-label": "Increase",
-          disabled: !g,
+          disabled: !w,
           onClick: () => m(1),
           className: p,
-          children: /* @__PURE__ */ s(j, {})
+          children: /* @__PURE__ */ o(_, {})
         }
       )
     ] });

package/components/page-body.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface PageBodyProps extends React.HTMLAttributes<HTMLElement> {
+    /** Semantic element used by the page region. @default "main" */
+    as?: "main" | "div";
+}
+/**
+ * PageBody — the primary page region beside an application sidebar.
+ *
+ * It is intentionally borderless and uses a raised white surface while
+ * consuming all remaining width and height in the surrounding app shell.
+ */
+export declare const PageBody: React.ForwardRefExoticComponent<PageBodyProps & React.RefAttributes<HTMLElement>>;

package/components/page-body.js

@@ -0,0 +1,18 @@
+"use client";
+import * as e from "react";
+import { cn as r } from "../lib/cn.js";
+const d = e.forwardRef(
+  ({ as: a = "main", className: o, ...l }, t) => e.createElement(a, {
+    ref: t,
+    "data-slot": "page-body",
+    className: r(
+      "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-card shadow-elevation",
+      o
+    ),
+    ...l
+  })
+);
+d.displayName = "PageBody";
+export {
+  d as PageBody
+};