@actioneer/ads 0.6.0 → 0.8.0

package/components/infinite-canvas.js

@@ -2,7 +2,7 @@
 import { jsx as e, jsxs as b } from "react/jsx-runtime";
 import * as n from "react";
 import { MarkerType as U, ReactFlow as Z, Background as j, BackgroundVariant as H, Panel as h, useReactFlow as K, useStore as V } from "@xyflow/react";
-import { BaseEdge as he, EdgeLabelRenderer as xe, Handle as Ee, MarkerType as ke, Position as ye, ReactFlowProvider as De, addEdge as _e, getBezierPath as we, getSmoothStepPath as Ie, getStraightPath as Re, useEdgesState as Se, useNodesState as Ae, useReactFlow as Ce } from "@xyflow/react";
+import { BaseEdge as he, EdgeLabelRenderer as xe, Handle as Ee, MarkerType as ye, Position as De, ReactFlowProvider as ke, addEdge as _e, getBezierPath as we, getSmoothStepPath as Ie, getStraightPath as Re, useEdgesState as Se, useNodesState as Ae, useReactFlow as Ce } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { cn as W } from "../lib/cn.js";
 import { Minus as q, Plus as J, Maximize as Q, Magnet as X } from "../lib/icons.js";
@@ -20,18 +20,18 @@ const le = {
   },
   style: { stroke: R, strokeWidth: ee },
   labelStyle: { fill: "var(--color-foreground)", fontSize: re },
-  labelBgStyle: { fill: "var(--color-background)" },
+  labelBgStyle: { fill: "var(--color-card)" },
   labelBgPadding: te,
   labelBgBorderRadius: oe
 }, ie = [
-  "relative size-full overflow-hidden bg-background",
-  "[--xy-background-color-default:var(--color-background)]",
+  "relative size-full overflow-hidden bg-card",
+  "[--xy-background-color-default:var(--color-card)]",
   "[--xy-edge-stroke-default:var(--canvas-edge)]",
   "[--xy-edge-stroke-selected-default:var(--color-foreground)]",
-  "[--xy-edge-label-background-color-default:var(--color-background)]",
+  "[--xy-edge-label-background-color-default:var(--color-card)]",
   "[--xy-edge-label-color-default:var(--color-foreground)]",
   "[--xy-connectionline-stroke-default:var(--canvas-edge)]",
-  "[--xy-handle-background-color-default:var(--color-background)]",
+  "[--xy-handle-background-color-default:var(--color-card)]",
   "[--xy-handle-border-color-default:var(--color-border-strong)]",
   "[--xy-selection-background-color-default:var(--color-muted)]",
   "[--xy-node-color-default:var(--color-foreground)]",
@@ -44,12 +44,12 @@ function S({
   snapToGrid: t,
   onSnapToGridChange: i
 }) {
-  const { zoomIn: s, zoomOut: c, fitView: d } = K(), u = V((g) => g.transform[2]);
+  const { zoomIn: s, zoomOut: c, fitView: d } = K(), u = V((f) => f.transform[2]);
   return /* @__PURE__ */ b(
     h,
     {
       position: "bottom-right",
-      className: "m-3 flex items-center gap-0.5 rounded-lg bg-elevated p-1 shadow-elevation",
+      className: "m-3 flex items-center gap-0.5 rounded-lg border border-border bg-elevated p-1 shadow-elevation",
       children: [
         /* @__PURE__ */ e(
           a,
@@ -124,9 +124,9 @@ function se({
   onNodesChange: c,
   onEdgesChange: d,
   onNodeClick: u,
-  onPaneClick: g,
+  onPaneClick: f,
   onInit: A,
-  readOnly: f = !1,
+  readOnly: g = !1,
   minZoom: C = 0.25,
   maxZoom: N = 1.6,
   fitViewPadding: m = ne,
@@ -135,11 +135,11 @@ function se({
   snapGrid: z = $,
   showControls: B = !0,
   showSnapToGrid: M = !1,
-  toolbarStart: k,
-  toolbarEnd: y,
+  toolbarStart: y,
+  toolbarEnd: D,
   ...L
 }, O) {
-  const [P, F] = n.useState(!1), p = E !== void 0, D = p ? E : P, G = n.useCallback(
+  const [P, F] = n.useState(!1), p = E !== void 0, k = p ? E : P, G = n.useCallback(
     (_) => {
       p || F(_), r == null || r(_);
     },
@@ -158,13 +158,13 @@ function se({
       onNodesChange: c,
       onEdgesChange: d,
       onNodeClick: u,
-      onPaneClick: g,
+      onPaneClick: f,
       onInit: A,
       fitView: !0,
       fitViewOptions: T,
-      nodesDraggable: !f,
-      nodesConnectable: !f,
-      snapToGrid: D,
+      nodesDraggable: !g,
+      nodesConnectable: !g,
+      snapToGrid: k,
       snapGrid: z,
       minZoom: C,
       maxZoom: N,
@@ -180,14 +180,14 @@ function se({
             color: "var(--color-border-strong)"
           }
         ),
-        k && /* @__PURE__ */ e(h, { position: "top-left", className: "m-3 flex items-center gap-2", children: k }),
-        y && /* @__PURE__ */ e(h, { position: "top-right", className: "m-3 flex items-center gap-2", children: y }),
+        y && /* @__PURE__ */ e(h, { position: "top-left", className: "m-3 flex items-center gap-2", children: y }),
+        D && /* @__PURE__ */ e(h, { position: "top-right", className: "m-3 flex items-center gap-2", children: D }),
         B && /* @__PURE__ */ e(
           S,
           {
             fitViewPadding: m,
-            showSnapToGrid: M && !f,
-            snapToGrid: D,
+            showSnapToGrid: M && !g,
+            snapToGrid: k,
             onSnapToGridChange: G
           }
         )
@@ -202,9 +202,9 @@ export {
   xe as EdgeLabelRenderer,
   Ee as Handle,
   ce as InfiniteCanvas,
-  ke as MarkerType,
-  ye as Position,
-  De as ReactFlowProvider,
+  ye as MarkerType,
+  De as Position,
+  ke as ReactFlowProvider,
   _e as addEdge,
   we as getBezierPath,
   Ie as getSmoothStepPath,

package/components/input-field.d.ts

@@ -1,11 +1,26 @@
 import { FieldProps } from './field';
 import * as React from "react";
 type InputElement = HTMLInputElement | HTMLTextAreaElement;
+/**
+ * InputField — the canonical text control in ADS. A single
+ * component that owns the labeled form-field frame (label · control ·
+ * description|error) AND the input itself, because that pair is one thing to
+ * anyone using it. The composable primitives (`Field`, `Label`,
+ * `FieldDescription`, `FieldError`) remain exported for advanced compositions
+ * and for wrapping non-input controls (Select, NumberField, Textarea).
+ * Its height contract has only two values: 32px for single-line input and
+ * 120px for multiline input.
+ *
+ * Auto-behaviors:
+ *   • `type="password"` auto-renders an Eye/EyeOff reveal toggle in the end
+ *     slot (a password input without one is broken UX). A consumer-supplied
+ *     `endContent` wins the slot.
+ *   • 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 SharedNativeProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "className" | "type">;
 export interface InputFieldProps extends SharedNativeProps, FieldOnlyProps {
-    /** Control size — sm / md / lg (defaults to md). */
-    size?: "sm" | "md" | "lg";
     startContent?: React.ReactNode;
     endContent?: React.ReactNode;
     isInvalid?: boolean;
@@ -13,7 +28,7 @@ export interface InputFieldProps extends SharedNativeProps, FieldOnlyProps {
     inputClassName?: string;
     /** Native input type when single-line; ignored when `multiline`. */
     type?: React.HTMLInputTypeAttribute;
-    /** Render a multi-line textarea instead of a single-line input. */
+    /** Render the 120px multi-line textarea instead of the 32px input. */
     multiline?: boolean;
     /** Only used when `multiline` — passes through to `<textarea rows>`. */
     rows?: number;

package/components/input-field.js

@@ -1,96 +1,112 @@
 "use client";
-import { jsx as e, jsxs as _ } from "react/jsx-runtime";
-import * as a from "react";
-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"
-}, G = a.forwardRef(
+import { jsx as t, jsxs as C } 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(
   ({
     // Field props
-    label: l,
-    description: r,
-    error: s,
-    required: c,
-    className: N,
+    label: v,
+    description: d,
+    error: o,
+    required: m,
+    className: B,
     // Input props
-    id: I,
-    inputClassName: z,
-    size: B = "md",
-    startContent: t,
-    endContent: E,
-    isInvalid: u,
-    type: f,
-    multiline: n = !1,
-    rows: F,
-    "aria-describedby": j,
-    ...p
-  }, m) => {
-    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(
+    id: R,
+    inputClassName: T,
+    startContent: r,
+    endContent: _,
+    isInvalid: g,
+    type: h,
+    multiline: l = !1,
+    rows: $,
+    "aria-describedby": H,
+    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(
+      () => x(s.value ?? s.defaultValue)
+    );
+    i.useEffect(() => {
+      s.value !== void 0 && y(x(s.value));
+    }, [s.value]);
+    const w = (e) => {
+      y(e.value.length > 0);
+    }, I = (e) => {
+      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(
       "button",
       {
         type: "button",
-        "aria-label": d ? "Hide password" : "Show password",
-        onClick: () => k((S) => !S),
+        "aria-label": f ? "Hide password" : "Show password",
+        onClick: () => A((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: d ? /* @__PURE__ */ e(C, {}) : /* @__PURE__ */ e(H, {})
+        children: f ? /* @__PURE__ */ t(J, {}) : /* @__PURE__ */ t(L, {})
       }
-    ) : 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(
+    ) : void 0), j = G(
+      M,
+      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: m,
-        id: o,
-        rows: F ?? 3,
-        "aria-invalid": u || !!s || void 0,
-        "aria-describedby": v,
-        className: b,
-        ...p
+        ref: p,
+        id: a,
+        rows: $ ?? 3,
+        "aria-invalid": g || !!o || void 0,
+        "aria-describedby": V,
+        "data-value-set": b || void 0,
+        className: j,
+        onBlur: I,
+        onKeyDown: N,
+        ...s
       }
-    ) : /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ t(
       "input",
       {
-        ref: m,
-        id: o,
-        type: h && d ? "text" : f,
-        "aria-invalid": u || !!s || void 0,
-        "aria-describedby": v,
-        className: b,
-        ...p
+        ref: p,
+        id: a,
+        type: F && f ? "text" : h,
+        "aria-invalid": g || !!o || void 0,
+        "aria-describedby": V,
+        "data-value-set": b || void 0,
+        className: j,
+        onBlur: I,
+        onKeyDown: N,
+        ...s
       }
-    ), w = t || i ? (
+    ), z = r || n ? (
       // group/field: adornment icons follow the field's interactive states.
-      /* @__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 })
+      /* @__PURE__ */ C("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-g12! [&_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-g12! [&_svg]:size-4", children: n })
       ] })
-    ) : y;
-    return !l && !r && !s && !c ? w : /* @__PURE__ */ e(
-      A,
+    ) : k;
+    return !v && !d && !o && !m ? z : /* @__PURE__ */ t(
+      Q,
       {
-        label: l,
-        description: r,
-        error: s,
-        required: c,
-        htmlFor: o,
-        errorId: x,
-        descriptionId: g,
-        className: N,
-        children: w
+        label: v,
+        description: d,
+        error: o,
+        required: m,
+        htmlFor: a,
+        errorId: E,
+        descriptionId: S,
+        className: B,
+        children: z
       }
     );
   }
 );
-G.displayName = "InputField";
+U.displayName = "InputField";
 export {
-  G as InputField
+  U as InputField
 };

package/components/input.js

@@ -1,61 +1,64 @@
 "use client";
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-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 { jsx as e, jsxs as v } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as h } from "../lib/cn.js";
+import { EyeOff as x, Eye as w } from "../lib/icons.js";
 import { inputBaseClass as b } from "./field.js";
-const y = {
-  sm: "h-8 rounded-sm text-xs",
-  md: "h-10 rounded-md text-xs",
-  lg: "h-11 rounded-md text-base"
-}, N = d.forwardRef(
+const N = {
+  sm: "h-8 rounded-sm",
+  md: "h-8 rounded-md",
+  lg: "h-11 rounded-md"
+}, y = l.forwardRef(
   ({
-    className: l,
+    className: d,
     size: a = "md",
     startContent: o,
     endContent: u,
     isInvalid: f,
-    type: t,
+    type: s,
     ...c
   }, m) => {
-    const [s, p] = d.useState(!1), i = t === "password", r = u ?? (i ? /* @__PURE__ */ e(
+    const [i, p] = l.useState(!1), n = s === "password", r = u ?? (n ? /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        "aria-label": s ? "Hide password" : "Show password",
-        onClick: () => p((x) => !x),
+        "aria-label": i ? "Hide password" : "Show password",
+        onClick: () => p((g) => !g),
         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: s ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(w, {})
+        children: i ? /* @__PURE__ */ e(x, {}) : /* @__PURE__ */ e(w, {})
       }
-    ) : void 0), n = /* @__PURE__ */ e(
+    ) : void 0), t = /* @__PURE__ */ e(
       "input",
       {
         ref: m,
-        type: i && s ? "text" : t,
+        type: n && i ? "text" : s,
         "aria-invalid": f || void 0,
-        className: v(
+        className: h(
           b,
-          y[a],
+          // Search controls are flat, stroke-only surfaces with regular copy.
+          s === "search" && "font-normal [--glow-inset:none]",
+          "leading-none",
+          N[a],
           o && "pl-9",
           r && "pr-9",
-          l
+          d
         ),
         ...c
       }
     );
-    return !o && !r ? n : (
+    return !o && !r ? t : (
       // 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-150 group-focus-within/field:text-foreground group-hover/field:text-foreground [&_svg]:size-4", children: o }),
-        n,
-        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 })
+      // muted at rest, readable on hover, and G12 green while the
+      // control is focused. Important keeps focus green while still hovered.
+      /* @__PURE__ */ v("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-150 group-hover/field:text-foreground group-focus-within/field:text-g12! [&_svg]:size-4", children: o }),
+        t,
+        r && /* @__PURE__ */ e("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-g12! [&_svg]:size-4", children: r })
       ] })
     );
   }
 );
-N.displayName = "Input";
+y.displayName = "Input";
 export {
-  N as Input
+  y as Input
 };

package/components/modal.d.ts

@@ -1,7 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 declare const panelVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "xl" | "sm" | "md" | "lg" | "full" | null | undefined;
+    position?: "top" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ModalProps extends VariantProps<typeof panelVariants> {
     open: boolean;
@@ -9,14 +10,41 @@ export interface ModalProps extends VariantProps<typeof panelVariants> {
     className?: string;
     children: React.ReactNode;
     showCloseButton?: boolean;
+    /** Close when the scrim is pressed. */
+    closeOnOverlayClick?: boolean;
+    /** Close when Escape is pressed. */
+    closeOnEscape?: boolean;
+    /** Portal into a custom host instead of document.body. */
+    container?: HTMLElement | null;
+    /** Focus this element when the modal opens. */
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    /** Runs after the exit animation has completed. */
+    onAfterClose?: () => void;
+    /** Runs after focus has moved into the opened modal. */
+    onAfterOpen?: () => void;
+    overlayClassName?: string;
+    viewportClassName?: string;
     "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
 }
-export declare function Modal({ open, onOpenChange, size, className, children, showCloseButton, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.ReactPortal;
+/**
+ * ADS modal, modelled on the public Polaris dialog pattern while remaining an
+ * ADS-owned primitive. Radix owns focus trapping, page inerting, Escape,
+ * outside interaction, scroll locking, and focus restoration. ADS owns the
+ * geometry, tokens, motion, and composable header/body/footer anatomy.
+ */
+export declare function Modal({ open, onOpenChange, size, position, className, children, showCloseButton, closeOnOverlayClick, closeOnEscape, container, initialFocusRef, onAfterClose, onAfterOpen, overlayClassName, viewportClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.JSX.Element;
+export declare const ModalClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 export declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
 export declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const ModalBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Remove the default 20px inset for media, tables, or custom sections. */
+    padding?: "default" | "none";
+}
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+/** A padded, divider-aware section for an edge-to-edge ModalBody. */
+export declare const ModalSection: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const ModalFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export {};