@actioneer/ads 0.5.7 → 0.5.8

package/components/input-field.js

@@ -1,91 +1,96 @@
 "use client";
-import { jsx as e, jsxs as j } from "react/jsx-runtime";
+import { jsx as e, jsxs as _ } from "react/jsx-runtime";
 import * as a from "react";
-import { cn as k } from "../lib/cn.js";
-import { EyeOff as B, Eye as S } from "../lib/icons.js";
-import { inputBaseClass as _, Field as C } from "./field.js";
-const H = {
+import { cn as $ } from "../lib/cn.js";
+import { EyeOff as C, Eye as H } from "../lib/icons.js";
+import { inputBaseClass as O, Field as A } from "./field.js";
+const D = {
   sm: "h-8 text-xs",
   md: "h-10 text-xs",
   lg: "h-11 text-base"
-}, O = a.forwardRef(
+}, G = a.forwardRef(
   ({
     // Field props
     label: l,
-    description: d,
+    description: r,
     error: s,
     required: c,
-    className: w,
+    className: N,
     // Input props
-    id: y,
-    inputClassName: b,
-    size: N = "md",
-    startContent: o,
-    endContent: z,
+    id: I,
+    inputClassName: z,
+    size: B = "md",
+    startContent: t,
+    endContent: E,
     isInvalid: u,
     type: f,
-    multiline: i = !1,
-    rows: E,
+    multiline: n = !1,
+    rows: F,
+    "aria-describedby": j,
     ...p
   }, m) => {
-    const F = a.useId(), r = y ?? F, [n, I] = a.useState(!1), x = !i && f === "password", t = z ?? (x ? /* @__PURE__ */ e(
+    const R = a.useId(), o = I ?? R, x = `${o}-error`, g = `${o}-description`, v = [j, s ? x : r ? g : null].filter(Boolean).join(" ") || void 0, [d, k] = a.useState(!1), h = !n && f === "password", i = E ?? (h ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": n ? "Hide password" : "Show password",
-        onClick: () => I((R) => !R),
+        "aria-label": d ? "Hide password" : "Show password",
+        onClick: () => k((S) => !S),
         className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
-        children: n ? /* @__PURE__ */ e(B, {}) : /* @__PURE__ */ e(S, {})
+        children: d ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(H, {})
       }
-    ) : void 0), g = k(
-      _,
-      i ? "min-h-20 resize-y py-2 text-xs" : H[N],
-      o && "pl-9",
-      t && "pr-9",
-      b
-    ), h = i ? /* @__PURE__ */ e(
+    ) : void 0), b = $(
+      O,
+      n ? "min-h-20 resize-y py-2 text-xs" : D[B],
+      t && "pl-9",
+      i && "pr-9",
+      z
+    ), y = n ? /* @__PURE__ */ e(
       "textarea",
       {
         ref: m,
-        id: r,
-        rows: E ?? 3,
+        id: o,
+        rows: F ?? 3,
         "aria-invalid": u || !!s || void 0,
-        className: g,
+        "aria-describedby": v,
+        className: b,
         ...p
       }
     ) : /* @__PURE__ */ e(
       "input",
       {
         ref: m,
-        id: r,
-        type: x && n ? "text" : f,
+        id: o,
+        type: h && d ? "text" : f,
         "aria-invalid": u || !!s || void 0,
-        className: g,
+        "aria-describedby": v,
+        className: b,
         ...p
       }
-    ), v = o || t ? (
+    ), w = t || i ? (
       // group/field: adornment icons follow the field's interactive states.
-      /* @__PURE__ */ j("div", { className: "group/field relative w-full", children: [
-        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
-        h,
-        t && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: t })
+      /* @__PURE__ */ _("div", { className: "group/field relative w-full", children: [
+        t && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: t }),
+        y,
+        i && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: i })
       ] })
-    ) : h;
-    return !l && !d && !s && !c ? v : /* @__PURE__ */ e(
-      C,
+    ) : y;
+    return !l && !r && !s && !c ? w : /* @__PURE__ */ e(
+      A,
       {
         label: l,
-        description: d,
+        description: r,
         error: s,
         required: c,
-        htmlFor: r,
-        className: w,
-        children: v
+        htmlFor: o,
+        errorId: x,
+        descriptionId: g,
+        className: N,
+        children: w
       }
     );
   }
 );
-O.displayName = "InputField";
+G.displayName = "InputField";
 export {
-  O as InputField
+  G as InputField
 };

package/components/input.js

@@ -1,56 +1,56 @@
 "use client";
 import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import * as l from "react";
+import * as d from "react";
 import { cn as v } from "../lib/cn.js";
 import { EyeOff as h, Eye as w } from "../lib/icons.js";
 import { inputBaseClass as b } from "./field.js";
 const y = {
-  sm: "h-8 text-xs",
-  md: "h-10 text-xs",
-  lg: "h-11 text-base"
-}, N = l.forwardRef(
+  sm: "h-8 rounded-sm text-xs",
+  md: "h-10 rounded-md text-xs",
+  lg: "h-11 rounded-md text-base"
+}, N = d.forwardRef(
   ({
-    className: a,
-    size: d = "md",
+    className: l,
+    size: a = "md",
     startContent: o,
     endContent: u,
     isInvalid: f,
     type: t,
     ...c
-  }, p) => {
-    const [r, m] = l.useState(!1), i = t === "password", s = u ?? (i ? /* @__PURE__ */ e(
+  }, m) => {
+    const [s, p] = d.useState(!1), i = t === "password", r = u ?? (i ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": r ? "Hide password" : "Show password",
-        onClick: () => m((x) => !x),
+        "aria-label": s ? "Hide password" : "Show password",
+        onClick: () => p((x) => !x),
         className: "-mr-1 flex items-center rounded-xs p-1 outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring",
-        children: r ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(w, {})
+        children: s ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(w, {})
       }
     ) : void 0), n = /* @__PURE__ */ e(
       "input",
       {
-        ref: p,
-        type: i && r ? "text" : t,
+        ref: m,
+        type: i && s ? "text" : t,
         "aria-invalid": f || void 0,
         className: v(
           b,
-          y[d],
+          y[a],
           o && "pl-9",
-          s && "pr-9",
-          a
+          r && "pr-9",
+          l
         ),
         ...c
       }
     );
-    return !o && !s ? n : (
+    return !o && !r ? n : (
       // group/field: adornment icons follow the field's interactive states —
       // muted at rest, full black while hovered/focused (same signal as the
       // border snapping to brand).
       /* @__PURE__ */ g("div", { className: "group/field relative w-full", children: [
-        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
+        o && /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
         n,
-        s && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-(--duration-fast) group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: s })
+        r && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: r })
       ] })
     );
   }

package/components/link.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
 import * as u from "react";
 import { ArrowUpRight as t } from "../lib/icons.js";
 import { cn as d } from "../lib/cn.js";
@@ -8,17 +8,17 @@ const c = {
   muted: "text-muted-foreground",
   primary: "text-brand"
 }, f = u.forwardRef(
-  ({ className: n, color: a = "default", isExternal: r = !1, children: i, ...s }, l) => /* @__PURE__ */ e(
+  ({ className: n, color: a = "default", isExternal: e = !1, children: i, ...s }, l) => /* @__PURE__ */ r(
     "a",
     {
       ref: l,
-      target: r ? "_blank" : void 0,
-      rel: r ? "noopener noreferrer" : void 0,
+      target: e ? "_blank" : void 0,
+      rel: e ? "noopener noreferrer" : void 0,
       className: d(
         // Links read as links by WEIGHT at rest (bold against body copy);
         // the underline is a hover/focus affordance. Underline spec: dotted,
         // 12% thickness, 24% offset, skip-ink, auto (current) color.
-        "group/link inline-flex items-center gap-1 rounded-xs font-semibold",
+        "group/link inline-flex items-center gap-1 rounded-xs font-medium",
         "hover:underline focus-visible:underline decoration-dotted decoration-[0.12em] underline-offset-[0.24em]",
         "outline-none focus-visible:ring-3 focus-visible:ring-ring",
         c[a],
@@ -27,7 +27,7 @@ const c = {
       ...s,
       children: [
         i,
-        r && // Two arrows stacked in a clipped box, driven by a single group-hover
+        e && // Two arrows stacked in a clipped box, driven by a single group-hover
         // CSS var (`--arrow-out`). At rest, arrow A sits centered and arrow B
         // is parked bottom-left off the viewport (--arrow-out = 0). On hover,
         // --arrow-out = 1: A slides up-right out of the frame, B slides in to
@@ -35,7 +35,7 @@ const c = {
         // destination. Space is reserved so the label never shifts.
         // (Inline style — Tailwind's arbitrary translate utilities weren't
         // being generated by the JIT for these specific values.)
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ r(
           "span",
           {
             "aria-hidden": !0,
@@ -44,7 +44,7 @@ const c = {
               /* @__PURE__ */ o(
                 t,
                 {
-                  className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                  className: "absolute inset-0 size-full transition-transform duration-150 ease-out motion-reduce:transition-none",
                   style: {
                     transform: "translate(calc(var(--arrow-out) * 100%), calc(var(--arrow-out) * -100%))"
                   }
@@ -53,7 +53,7 @@ const c = {
               /* @__PURE__ */ o(
                 t,
                 {
-                  className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                  className: "absolute inset-0 size-full transition-transform duration-150 ease-out motion-reduce:transition-none",
                   style: {
                     transform: "translate(calc((var(--arrow-out) - 1) * 100%), calc((1 - var(--arrow-out)) * 100%))"
                   }

package/components/modal.js

@@ -1,16 +1,19 @@
 "use client";
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
 import * as i from "react";
-import { createPortal as y } from "react-dom";
-import { MotionConfig as g, AnimatePresence as b, motion as f } from "motion/react";
-import { Close as w } from "../lib/icons.js";
-import { cva as h } from "class-variance-authority";
-import { cn as n } from "../lib/cn.js";
-import { backdropVariants as N, modalPanelVariants as M } from "../lib/motion.js";
-import { Ripple as R } from "./ripple.js";
-const k = h(
+import { createPortal as R } from "react-dom";
+import { MotionConfig as E, AnimatePresence as A, motion as h } from "motion/react";
+import { Close as D } from "../lib/icons.js";
+import { cva as F } from "class-variance-authority";
+import { cn as a } from "../lib/cn.js";
+import { backdropVariants as j, modalPanelVariants as z } from "../lib/motion.js";
+import { Ripple as P } from "./ripple.js";
+const T = F(
   [
     "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"
   ],
@@ -26,72 +29,98 @@ const k = h(
     defaultVariants: { size: "md" }
   }
 );
-function _({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
-  const s = i.useRef(null), l = i.useRef(null);
+function U({ open: o, onOpenChange: t, size: r, className: g, children: w }) {
+  const d = i.useRef(null), f = i.useRef(null), u = i.useRef(null);
   return i.useEffect(() => {
     if (!o) return;
-    l.current = document.activeElement;
-    const x = document.body.style.overflow;
+    u.current = document.activeElement;
+    const M = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const d = (a) => {
-      a.key === "Escape" && (a.stopPropagation(), e(!1));
+    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 N = () => {
+      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"])'
+        )) ?? []
+      );
+    }, x = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation(), t(!1);
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const s = d.current;
+      if (!s) return;
+      const l = N();
+      if (l.length === 0) {
+        e.preventDefault(), s.focus();
+        return;
+      }
+      const v = l[0], b = l[l.length - 1], c = document.activeElement;
+      e.shiftKey ? (c === v || c === s) && (e.preventDefault(), b.focus()) : c === b && (e.preventDefault(), v.focus());
     };
-    document.addEventListener("keydown", d);
-    const v = requestAnimationFrame(() => {
-      var a;
-      (a = s.current) == null || a.focus();
+    document.addEventListener("keydown", x);
+    const k = requestAnimationFrame(() => {
+      var e;
+      (e = d.current) == null || e.focus();
     });
     return () => {
-      var a, c;
-      document.removeEventListener("keydown", d), document.body.style.overflow = x, cancelAnimationFrame(v), (c = (a = l.current) == null ? void 0 : a.focus) == null || c.call(a);
+      var e, s;
+      document.removeEventListener("keydown", x), document.body.style.overflow = M;
+      for (const l of p) l.inert = !1;
+      cancelAnimationFrame(k), (s = (e = u.current) == null ? void 0 : e.focus) == null || s.call(e);
     };
-  }, [o, e]), y(
-    /* @__PURE__ */ r(g, { reducedMotion: "user", children: /* @__PURE__ */ r(b, { children: o && /* @__PURE__ */ m("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-      /* @__PURE__ */ r(
-        f.div,
+  }, [o, t]), R(
+    /* @__PURE__ */ n(E, { reducedMotion: "user", children: /* @__PURE__ */ n(A, { children: o && /* @__PURE__ */ y("div", { ref: f, className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ n(
+        h.div,
         {
-          variants: N,
+          variants: j,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
           className: "absolute inset-0 bg-overlay",
-          onClick: () => e(!1),
+          onClick: () => t(!1),
           "aria-hidden": !0
         },
         "backdrop"
       ),
-      /* @__PURE__ */ m(
-        f.div,
+      /* @__PURE__ */ y(
+        h.div,
         {
-          ref: s,
-          variants: M,
+          ref: d,
+          variants: z,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
           role: "dialog",
           "aria-modal": "true",
           tabIndex: -1,
-          className: n(k({ size: t }), "relative outline-none", u),
+          className: a(T({ size: r }), "relative outline-none", g),
           children: [
-            /* @__PURE__ */ r(R, { origin: "center" }),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ n(P, { origin: "center" }),
+            /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
-                onClick: () => e(!1),
+                onClick: () => t(!1),
                 "aria-label": "Close",
-                className: n(
+                className: a(
                   "absolute right-4 top-4 inline-flex size-8 items-center justify-center",
-                  "rounded-md text-muted-foreground",
-                  "transition-[background,color,transform] duration-(--duration-fast) ease-out hover:bg-muted hover:text-foreground",
-                  "active:scale-(--scale-press)",
+                  "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"
                 ),
-                children: /* @__PURE__ */ r(w, { "aria-hidden": !0 })
+                children: /* @__PURE__ */ n(D, { "aria-hidden": !0 })
               }
             ),
-            p
+            w
           ]
         },
         "panel"
@@ -100,59 +129,62 @@ function _({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
     document.body
   );
 }
-const j = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+const V = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
   "div",
   {
-    ref: t,
-    className: n("flex flex-col gap-1 px-6 pt-6 pr-14", o),
-    ...e
+    ref: r,
+    className: a("flex shrink-0 flex-col gap-1 px-6 pt-6 pr-14", o),
+    ...t
   }
 ));
-j.displayName = "ModalHeader";
-const z = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+V.displayName = "ModalHeader";
+const H = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
   "h2",
   {
-    ref: t,
-    className: n("text-lg font-semibold text-foreground", o),
-    ...e
+    ref: r,
+    className: a("text-lg font-medium text-foreground", o),
+    ...t
   }
 ));
-z.displayName = "ModalTitle";
-const E = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+H.displayName = "ModalTitle";
+const L = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
   "p",
   {
-    ref: t,
-    className: n("text-xs text-muted-foreground", o),
-    ...e
+    ref: r,
+    className: a("text-xs text-muted-foreground", o),
+    ...t
   }
 ));
-E.displayName = "ModalDescription";
-const F = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+L.displayName = "ModalDescription";
+const q = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
   "div",
   {
-    ref: t,
-    className: n("px-6 py-4 text-xs text-foreground", o),
-    ...e
+    ref: r,
+    className: a(
+      "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 text-xs text-foreground",
+      o
+    ),
+    ...t
   }
 ));
-F.displayName = "ModalBody";
-const P = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+q.displayName = "ModalBody";
+const B = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
   "div",
   {
-    ref: t,
-    className: n(
-      "flex items-center justify-end gap-2 px-6 pb-6 pt-2",
+    ref: r,
+    className: a(
+      "flex shrink-0 items-center justify-end gap-2 px-6 pb-6 pt-2",
       o
     ),
-    ...e
+    ...t
   }
 ));
-P.displayName = "ModalFooter";
+B.displayName = "ModalFooter";
 export {
-  _ as Modal,
-  F as ModalBody,
-  E as ModalDescription,
-  P as ModalFooter,
-  j as ModalHeader,
-  z as ModalTitle
+  U as Modal,
+  q as ModalBody,
+  L as ModalDescription,
+  B as ModalFooter,
+  V as ModalHeader,
+  H as ModalTitle
 };

package/components/navbar.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export declare const Navbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
 export declare const NavbarBrand: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const navbarContentVariants: (props?: ({
-    justify?: "center" | "end" | "start" | null | undefined;
+    justify?: "end" | "center" | "start" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof navbarContentVariants> {
 }

package/components/navbar.js

@@ -21,7 +21,7 @@ const d = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   {
     ref: e,
     className: n(
-      "flex items-center gap-2 font-semibold text-foreground",
+      "flex items-center gap-2 font-medium text-foreground",
       r
     ),
     ...a