@actioneer/ads 1.0.9 → 1.0.10

package/components/input-field.d.ts

@@ -18,7 +18,7 @@ type InputElement = HTMLInputElement | HTMLTextAreaElement;
  *   • A generated id is used to wire the label ↔ input pair when the caller
  *     doesn't pass one, so a `label` always labels the input for a11y.
  */
-type FieldOnlyProps = Pick<FieldProps, "label" | "description" | "error" | "required" | "className">;
+type FieldOnlyProps = Pick<FieldProps, "label" | "description" | "error" | "required" | "className" | "info">;
 type SharedNativeProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "className" | "type">;
 export interface InputFieldProps extends SharedNativeProps, FieldOnlyProps {
     startContent?: React.ReactNode;

package/components/input-field.js

@@ -1,10 +1,10 @@
 "use client";
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import { jsx as t, jsxs as G } from "react/jsx-runtime";
 import * as i from "react";
-import { cn as G } from "../lib/cn.js";
-import { EyeOff as J, Eye as L } from "../lib/icons.js";
-import { inputBaseClass as M, Field as Q } from "./field.js";
-const U = i.forwardRef(
+import { cn as J } from "../lib/cn.js";
+import { EyeOff as L, Eye as M } from "../lib/icons.js";
+import { inputBaseClass as Q, Field as U } from "./field.js";
+const W = i.forwardRef(
   ({
     // Field props
     label: v,
@@ -12,21 +12,22 @@ const U = i.forwardRef(
     error: o,
     required: m,
     className: B,
+    info: R,
     // Input props
-    id: R,
-    inputClassName: T,
+    id: T,
+    inputClassName: _,
     startContent: r,
-    endContent: _,
+    endContent: $,
     isInvalid: g,
     type: h,
     multiline: l = !1,
-    rows: $,
-    "aria-describedby": H,
+    rows: H,
+    "aria-describedby": O,
     onBlur: c,
     onKeyDown: u,
     ...s
   }, p) => {
-    const O = i.useId(), a = R ?? O, x = (e) => e != null && String(e).length > 0, [b, y] = i.useState(
+    const A = i.useId(), a = T ?? A, x = (e) => e != null && String(e).length > 0, [b, y] = i.useState(
       () => x(s.value ?? s.defaultValue)
     );
     i.useEffect(() => {
@@ -38,28 +39,28 @@ const U = i.forwardRef(
       w(e.currentTarget), c == null || c(e);
     }, N = (e) => {
       !l && e.key === "Enter" && w(e.currentTarget), u == null || u(e);
-    }, E = `${a}-error`, S = `${a}-description`, V = [H, o ? E : d ? S : null].filter(Boolean).join(" ") || void 0, [f, A] = i.useState(!1), F = !l && h === "password", n = _ ?? (F ? /* @__PURE__ */ t(
+    }, E = `${a}-error`, S = `${a}-description`, V = [O, o ? E : d ? S : null].filter(Boolean).join(" ") || void 0, [f, C] = i.useState(!1), F = !l && h === "password", n = $ ?? (F ? /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         "aria-label": f ? "Hide password" : "Show password",
-        onClick: () => A((e) => !e),
+        onClick: () => C((e) => !e),
         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: f ? /* @__PURE__ */ t(J, {}) : /* @__PURE__ */ t(L, {})
+        children: f ? /* @__PURE__ */ t(L, {}) : /* @__PURE__ */ t(M, {})
       }
-    ) : void 0), j = G(
-      M,
+    ) : void 0), j = J(
+      Q,
       l ? "h-30 resize-none py-2" : "h-8",
       "data-[value-set]:text-on-white-primary!",
       r && "pl-9",
       n && "pr-9",
-      T
+      _
     ), k = l ? /* @__PURE__ */ t(
       "textarea",
       {
         ref: p,
         id: a,
-        rows: $ ?? 3,
+        rows: H ?? 3,
         "aria-invalid": g || !!o || void 0,
         "aria-describedby": V,
         "data-value-set": b || void 0,
@@ -84,19 +85,20 @@ const U = i.forwardRef(
       }
     ), z = r || n ? (
       // group/field: adornment icons follow the field's interactive states.
-      /* @__PURE__ */ C("div", { className: "group/field relative w-full", children: [
+      /* @__PURE__ */ G("div", { className: "group/field relative w-full", children: [
         r && /* @__PURE__ */ t("span", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: r }),
         k,
         n && /* @__PURE__ */ t("span", { className: "absolute inset-y-0 right-0 flex items-center pr-3 text-muted-foreground transition-colors duration-150 group-hover/field:text-foreground group-focus-within/field:text-t12! [&_svg]:size-4", children: n })
       ] })
     ) : k;
     return !v && !d && !o && !m ? z : /* @__PURE__ */ t(
-      Q,
+      U,
       {
         label: v,
         description: d,
         error: o,
         required: m,
+        info: R,
         htmlFor: a,
         errorId: E,
         descriptionId: S,
@@ -106,7 +108,7 @@ const U = i.forwardRef(
     );
   }
 );
-U.displayName = "InputField";
+W.displayName = "InputField";
 export {
-  U as InputField
+  W as InputField
 };

package/components/modal.js

@@ -2,10 +2,10 @@
 import { jsx as t, jsxs as g } from "react/jsx-runtime";
 import * as r from "react";
 import { MotionConfig as B, AnimatePresence as H, motion as M } from "motion/react";
-import { Dialog as c } from "radix-ui";
+import { Dialog as m } from "radix-ui";
 import { cva as S } from "class-variance-authority";
 import { Close as K } from "../lib/icons.js";
-import { cn as n } from "../lib/cn.js";
+import { cn as l } from "../lib/cn.js";
 import { backdropVariants as q, modalPanelVariants as A } from "../lib/motion.js";
 const F = S(
   [
@@ -17,14 +17,14 @@ const F = S(
   {
     variants: {
       size: {
-        /** 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]",
+        /** Quick confirmations and short prompts. Fixed 320px tall. */
+        sm: "h-(--modal-height-sm) max-w-[23.75rem]",
+        /** Polaris-style default task dialog. Fixed 640px tall. */
+        md: "h-(--modal-height) max-w-[38.75rem]",
+        /** Dense forms, settings, and previews. Fixed 640px tall. */
+        lg: "h-(--modal-height) max-w-[48.75rem]",
+        /** Tables and content-heavy workflows. Fixed 640px tall. */
+        xl: "h-(--modal-height) max-w-[61.25rem]",
         /** Responsive canvas with a 16px viewport gutter. */
         full: "h-[calc(100dvh-2rem)] max-w-none"
       },
@@ -33,22 +33,25 @@ const F = S(
         top: ""
       },
       /**
-       * `content` hugs its content (confirmations, short prompts). `fixed`
-       * keeps one stable 640px frame for create/edit forms — the header and
-       * footer stay put and ModalBody scrolls (user-mandated, 2026-10-26).
+       * Every modal has a FIXED height (user-mandated, 2026-10-26): sm is
+       * `--modal-height-sm` (320px), md/lg/xl are `--modal-height` (640px).
+       * The header and footer stay put and ModalBody scrolls; a modal never
+       * grows or shrinks with its content. `content` is a deprecated alias
+       * kept for compatibility — it renders the same fixed frame.
        */
       height: {
-        content: "",
-        fixed: "h-[40rem]"
+        fixed: "",
+        /** @deprecated Modals are always fixed-height; renders as `fixed`. */
+        content: ""
       }
     },
     defaultVariants: {
       size: "md",
       position: "center",
-      height: "content"
+      height: "fixed"
     }
   }
-), v = r.createContext(null);
+), x = r.createContext(null);
 function w(o) {
   return r.Children.toArray(o).some((e) => r.isValidElement(e) ? e.type === C ? !0 : w(
     e.props.children
@@ -59,9 +62,9 @@ function te({
   onOpenChange: e,
   size: a,
   position: i,
-  height: l,
+  height: n,
   className: s,
-  children: m,
+  children: c,
   showCloseButton: D = !0,
   closeOnOverlayClick: z = !0,
   closeOnEscape: I = !0,
@@ -71,19 +74,19 @@ function te({
   onAfterOpen: f,
   overlayClassName: V,
   viewportClassName: k,
-  "aria-label": h,
+  "aria-label": v,
   "aria-labelledby": P,
   "aria-describedby": _
 }) {
-  const b = r.useRef(null), p = r.useId(), x = r.useId(), E = r.useMemo(
-    () => w(m),
-    [m]
+  const b = r.useRef(null), p = r.useId(), h = r.useId(), E = r.useMemo(
+    () => w(c),
+    [c]
   ), T = r.useMemo(
-    () => ({ titleId: p, descriptionId: x }),
-    [x, p]
+    () => ({ titleId: p, descriptionId: h }),
+    [h, p]
   );
-  return /* @__PURE__ */ t(c.Root, { open: o, onOpenChange: e, children: /* @__PURE__ */ t(v.Provider, { value: T, children: /* @__PURE__ */ t(B, { reducedMotion: "user", children: /* @__PURE__ */ t(H, { initial: !1, onExitComplete: j, children: o ? /* @__PURE__ */ g(c.Portal, { forceMount: !0, container: R ?? void 0, children: [
-    /* @__PURE__ */ t(c.Overlay, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(m.Root, { open: o, onOpenChange: e, children: /* @__PURE__ */ t(x.Provider, { value: T, children: /* @__PURE__ */ t(B, { reducedMotion: "user", children: /* @__PURE__ */ t(H, { initial: !1, onExitComplete: j, children: o ? /* @__PURE__ */ g(m.Portal, { forceMount: !0, container: R ?? void 0, children: [
+    /* @__PURE__ */ t(m.Overlay, { forceMount: !0, asChild: !0, children: /* @__PURE__ */ t(
       M.div,
       {
         "data-slot": "modal-overlay",
@@ -91,7 +94,7 @@ function te({
         initial: "hidden",
         animate: "visible",
         exit: "hidden",
-        className: n(
+        className: l(
           "fixed inset-0 z-50 bg-overlay",
           V
         )
@@ -102,20 +105,20 @@ function te({
       "div",
       {
         "data-slot": "modal-viewport",
-        className: n(
+        className: l(
           "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",
           k
         ),
         children: /* @__PURE__ */ t(
-          c.Content,
+          m.Content,
           {
             forceMount: !0,
             asChild: !0,
-            "aria-label": h,
-            "aria-labelledby": P ?? (h ? void 0 : p),
-            "aria-describedby": _ ?? (E ? x : void 0),
+            "aria-label": v,
+            "aria-labelledby": P ?? (v ? void 0 : p),
+            "aria-describedby": _ ?? (E ? h : void 0),
             onEscapeKeyDown: (d) => {
               I || d.preventDefault();
             },
@@ -140,13 +143,13 @@ function te({
                 onAnimationComplete: (d) => {
                   d === "visible" && (f == null || f());
                 },
-                className: n(
-                  F({ size: a, position: i, height: l }),
+                className: l(
+                  F({ size: a, position: i, height: n }),
                   s
                 ),
                 children: [
                   D ? /* @__PURE__ */ t(N, {}) : null,
-                  m
+                  c
                 ]
               },
               "modal-panel"
@@ -157,14 +160,14 @@ function te({
     )
   ] }) : null }) }) }) });
 }
-const N = r.forwardRef(({ className: o, children: e, "aria-label": a = "Close", ...i }, l) => /* @__PURE__ */ t(c.Close, { asChild: !0, children: /* @__PURE__ */ t(
+const N = r.forwardRef(({ className: o, children: e, "aria-label": a = "Close", ...i }, n) => /* @__PURE__ */ t(m.Close, { asChild: !0, children: /* @__PURE__ */ t(
   "button",
   {
-    ref: l,
+    ref: n,
     type: "button",
     "data-slot": "modal-close",
     "aria-label": a,
-    className: n(
+    className: l(
       "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",
@@ -183,7 +186,7 @@ const G = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
   {
     ref: a,
     "data-slot": "modal-header",
-    className: n(
+    className: l(
       "flex min-h-11 shrink-0 flex-col justify-center gap-0.5 bg-surface px-3 py-3 pr-11",
       o
     ),
@@ -192,15 +195,15 @@ const G = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
 ));
 G.displayName = "ModalHeader";
 const J = r.forwardRef(({ className: o, id: e, ...a }, i) => {
-  const l = r.useContext(v), s = n(
-    "text-l font-semibold leading-5 text-foreground",
+  const n = r.useContext(x), s = l(
+    "text-l font-medium leading-5 text-foreground",
     o
   );
-  return l ? /* @__PURE__ */ t(
-    c.Title,
+  return n ? /* @__PURE__ */ t(
+    m.Title,
     {
       ref: i,
-      id: e ?? l.titleId,
+      id: e ?? n.titleId,
       "data-slot": "modal-title",
       className: s,
       ...a
@@ -209,15 +212,15 @@ const J = r.forwardRef(({ className: o, id: e, ...a }, i) => {
 });
 J.displayName = "ModalTitle";
 const C = r.forwardRef(({ className: o, id: e, ...a }, i) => {
-  const l = r.useContext(v), s = n(
+  const n = r.useContext(x), s = l(
     "text-sm leading-5 text-muted-foreground",
     o
   );
-  return l ? /* @__PURE__ */ t(
-    c.Description,
+  return n ? /* @__PURE__ */ t(
+    m.Description,
     {
       ref: i,
-      id: e ?? l.descriptionId,
+      id: e ?? n.descriptionId,
       "data-slot": "modal-description",
       className: s,
       ...a
@@ -239,7 +242,7 @@ const O = r.forwardRef(
     {
       ref: i,
       "data-slot": "modal-body",
-      className: n(
+      className: l(
         "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
@@ -254,7 +257,7 @@ const Q = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
   {
     ref: a,
     "data-slot": "modal-section",
-    className: n(
+    className: l(
       "px-4 py-4 [&+&]:border-t [&+&]:border-border-tertiary",
       o
     ),
@@ -267,8 +270,8 @@ const U = r.forwardRef(({ className: o, ...e }, a) => /* @__PURE__ */ t(
   {
     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",
+    className: l(
+      "mt-auto 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",
       o
     ),

package/components/panel.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
-import { cn as o } from "../lib/cn.js";
-const l = n.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
+import { jsx as l } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as n } from "../lib/cn.js";
+const t = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ l(
     "div",
     {
       ref: r,
       "data-slot": "panel",
-      className: o(
+      className: n(
         // Static surface — delineated by color alone (elevation is reserved for
         // actionable surfaces).
         "flex min-h-0 min-w-0 flex-col overflow-hidden rounded-lg bg-card",
@@ -18,17 +18,16 @@ const l = n.forwardRef(
     }
   )
 );
-l.displayName = "Panel";
-const s = n.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
+t.displayName = "Panel";
+const s = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ l(
     "div",
     {
       ref: r,
-      className: o(
+      className: n(
         "relative flex h-[var(--panel-header-height)] shrink-0 items-center justify-between gap-2",
-        "border-b-0 bg-card px-3",
-        "after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px",
-        "after:bg-[linear-gradient(to_right,var(--color-border)_0%,transparent_100%)] after:content-['']",
+        // Structural divider: a full-width WG4 hairline closes the header bar.
+        "border-b border-border bg-card px-3",
         e
       ),
       ...a
@@ -36,39 +35,39 @@ const s = n.forwardRef(
   )
 );
 s.displayName = "PanelHeader";
-const i = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
+const d = o.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ l(
   "h2",
   {
     ref: r,
-    className: o("flex min-w-0 items-center gap-2 truncate text-xs font-medium text-foreground", e),
+    className: n("flex min-w-0 items-center gap-2 truncate text-xs font-medium text-foreground", e),
     ...a
   }
 ));
-i.displayName = "PanelTitle";
-const d = n.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ t("div", { ref: r, className: o("flex shrink-0 items-center gap-1", e), ...a })
+d.displayName = "PanelTitle";
+const i = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, className: n("flex shrink-0 items-center gap-1", e), ...a })
 );
-d.displayName = "PanelToolbar";
-const f = n.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ t("div", { ref: r, tabIndex: 0, className: o("min-h-0 flex-1 overflow-auto p-4", e), ...a })
+i.displayName = "PanelToolbar";
+const f = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ l("div", { ref: r, tabIndex: 0, className: n("min-h-0 flex-1 overflow-auto p-4", e), ...a })
 );
 f.displayName = "PanelBody";
-const m = n.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
+const m = o.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ l(
     "div",
     {
       ref: r,
-      className: o("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
+      className: n("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
       ...a
     }
   )
 );
 m.displayName = "PanelFooter";
 export {
-  l as Panel,
+  t as Panel,
   f as PanelBody,
   m as PanelFooter,
   s as PanelHeader,
-  i as PanelTitle,
-  d as PanelToolbar
+  d as PanelTitle,
+  i as PanelToolbar
 };