@actioneer/ads 1.0.8 → 1.0.10

package/components/drawer.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as i, jsxs as y } from "react/jsx-runtime";
-import * as a from "react";
-import { createPortal as E } from "react-dom";
-import { MotionConfig as z, AnimatePresence as N, motion as w } from "motion/react";
-import { Close as R } from "../lib/icons.js";
-import { cva as j } from "class-variance-authority";
+import { jsx as i, jsxs as d, Fragment as E } from "react/jsx-runtime";
+import * as s from "react";
+import { createPortal as R } from "react-dom";
+import { MotionConfig as N, AnimatePresence as k, motion as x } from "motion/react";
+import { Close as j } from "../lib/icons.js";
+import { cva as F } from "class-variance-authority";
 import { cn as n } from "../lib/cn.js";
-import { springSheet as l, drawerOffset as h, drawerBackdropVariants as F } from "../lib/motion.js";
-const k = j(
+import { springSheet as l, drawerOffset as g, drawerBackdropVariants as M } from "../lib/motion.js";
+const D = F(
   [
     "relative flex flex-col",
     "bg-elevated text-foreground"
@@ -42,17 +42,17 @@ const k = j(
     ],
     defaultVariants: { side: "right", size: "md" }
   }
-), A = {
+), S = {
   right: "justify-end items-stretch",
   left: "justify-start items-stretch",
   bottom: "justify-center items-end"
-}, B = {
+}, A = {
   sm: "25%",
   md: "33.333333%",
   lg: "50%",
   xl: "66.666667%"
 };
-function D({
+function z({
   onClick: t,
   className: e
 }) {
@@ -71,43 +71,43 @@ function D({
         "[&_svg]:size-4 [&_svg]:shrink-0",
         e
       ),
-      children: /* @__PURE__ */ i(R, { "aria-hidden": !0 })
+      children: /* @__PURE__ */ i(j, { "aria-hidden": !0 })
     }
   );
 }
-function G({
+function W({
   open: t,
   onOpenChange: e,
   side: r,
-  size: x,
+  size: f,
   className: c,
-  children: v,
-  "aria-label": g
+  children: u,
+  "aria-label": v
 }) {
-  const d = r ?? "right", m = a.useRef(null), s = a.useRef(null);
-  return a.useEffect(() => {
+  const m = r ?? "right", w = s.useRef(null), o = s.useRef(null);
+  return s.useEffect(() => {
     if (!t) return;
-    s.current = document.activeElement;
+    o.current = document.activeElement;
     const p = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const f = (o) => {
-      o.key === "Escape" && (o.stopPropagation(), e(!1));
+    const h = (a) => {
+      a.key === "Escape" && (a.stopPropagation(), e(!1));
     };
-    document.addEventListener("keydown", f);
-    const u = requestAnimationFrame(() => {
-      var o;
-      (o = m.current) == null || o.focus();
+    document.addEventListener("keydown", h);
+    const b = requestAnimationFrame(() => {
+      var a;
+      (a = w.current) == null || a.focus();
     });
     return () => {
-      var o, b;
-      document.removeEventListener("keydown", f), document.body.style.overflow = p, cancelAnimationFrame(u), (b = (o = s.current) == null ? void 0 : o.focus) == null || b.call(o);
+      var a, y;
+      document.removeEventListener("keydown", h), document.body.style.overflow = p, cancelAnimationFrame(b), (y = (a = o.current) == null ? void 0 : a.focus) == null || y.call(a);
     };
-  }, [t, e]), E(
-    /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(N, { children: t && /* @__PURE__ */ y("div", { className: n("fixed inset-0 z-50 flex", A[d]), children: [
+  }, [t, e]), R(
+    /* @__PURE__ */ i(N, { reducedMotion: "user", children: /* @__PURE__ */ i(k, { children: t && /* @__PURE__ */ d("div", { className: n("fixed inset-0 z-50 flex", S[m]), children: [
       /* @__PURE__ */ i(
-        w.div,
+        x.div,
         {
-          variants: F,
+          variants: M,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
@@ -117,27 +117,27 @@ function G({
         },
         "backdrop"
       ),
-      /* @__PURE__ */ y(
-        w.div,
+      /* @__PURE__ */ d(
+        x.div,
         {
-          ref: m,
-          initial: h[d],
+          ref: w,
+          initial: g[m],
           animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
-          exit: { ...h[d], pointerEvents: "none", transition: l },
+          exit: { ...g[m], pointerEvents: "none", transition: l },
           role: "dialog",
           "aria-modal": "true",
-          "aria-label": g,
+          "aria-label": v,
           tabIndex: -1,
-          className: n(k({ side: d, size: x }), "relative outline-none", c),
+          className: n(D({ side: m, size: f }), "relative outline-none", c),
           children: [
             /* @__PURE__ */ i(
-              D,
+              z,
               {
                 onClick: () => e(!1),
                 className: "right-4 top-4"
               }
             ),
-            v
+            u
           ]
         },
         "panel"
@@ -146,59 +146,62 @@ function G({
     document.body
   );
 }
-function L({
+function B({
   open: t,
   onOpenChange: e,
   dismissible: r = !0,
-  side: x,
+  side: f,
   size: c,
-  containerClassName: v,
-  className: g,
-  children: d,
-  "aria-label": m
+  containerClassName: u,
+  className: v,
+  children: m,
+  "aria-label": w
 }) {
-  const s = x ?? "right", p = c ?? "md", f = a.useRef(null);
-  return a.useEffect(() => {
+  const o = f ?? "right", p = c ?? "md", h = s.useRef(null);
+  return s.useEffect(() => {
     if (!t || !r) return;
-    const u = (o) => {
-      o.key === "Escape" && e(!1);
+    const b = (a) => {
+      a.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
-  }, [t, e, r]), /* @__PURE__ */ i(z, { reducedMotion: "user", children: /* @__PURE__ */ i(N, { initial: !1, children: t && /* @__PURE__ */ i(
-    w.div,
+    return document.addEventListener("keydown", b), () => document.removeEventListener("keydown", b);
+  }, [t, e, r]), /* @__PURE__ */ i(N, { reducedMotion: "user", children: /* @__PURE__ */ i(k, { initial: !1, children: t && /* @__PURE__ */ i(
+    x.div,
     {
-      initial: s === "bottom" ? { height: "0%" } : { width: 0 },
-      animate: s === "bottom" ? { height: B[p], transition: l } : { width: "auto", transition: l },
-      exit: s === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
+      initial: o === "bottom" ? { height: "0%" } : { width: 0 },
+      animate: o === "bottom" ? { height: A[p], transition: l } : { width: "auto", transition: l },
+      exit: o === "bottom" ? { height: "0%", pointerEvents: "none", transition: l } : { width: 0, pointerEvents: "none", transition: l },
       className: n(
         "shrink-0 overflow-hidden",
-        s === "bottom" ? "w-full" : "h-full",
-        v
+        o === "bottom" ? "w-full" : "h-full",
+        u
       ),
-      children: /* @__PURE__ */ y(
-        w.aside,
+      children: /* @__PURE__ */ d(
+        x.aside,
         {
-          ref: f,
-          initial: h[s],
+          ref: h,
+          initial: g[o],
           animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: l },
-          exit: { ...h[s], pointerEvents: "none", transition: l },
+          exit: { ...g[o], pointerEvents: "none", transition: l },
           role: "complementary",
-          "aria-label": m,
+          "aria-label": w,
           className: n(
-            k({ side: s, size: c }),
-            "relative shrink-0 overflow-hidden rounded-lg border-0 bg-card shadow-none outline-none",
-            s === "bottom" && "h-full",
-            g
+            D({ side: o, size: c }),
+            "relative shrink-0 overflow-hidden rounded-none border-0 bg-card shadow-none outline-none",
+            o === "right" && "border-l border-border",
+            o === "left" && "border-r border-border",
+            o === "bottom" && "border-t border-border",
+            o === "bottom" && "h-full",
+            v
           ),
           children: [
             r && /* @__PURE__ */ i(
-              D,
+              z,
               {
                 onClick: () => e(!1),
                 className: "right-2 top-1"
               }
             ),
-            d
+            m
           ]
         }
       )
@@ -206,16 +209,30 @@ function L({
     "inline-drawer-slot"
   ) }) });
 }
-const J = L, M = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+const X = B, K = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
-    className: n("flex flex-col gap-1 px-6 py-4 pr-14", t),
+    "data-slot": "drawer-header",
+    className: n(
+      "flex shrink-0 flex-col gap-1 border-b border-border px-6 py-5 pr-14",
+      t
+    ),
+    ...e
+  }
+));
+K.displayName = "DrawerHeader";
+const L = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+  "p",
+  {
+    ref: r,
+    "data-slot": "drawer-kicker",
+    className: n("m-0 text-xs uppercase tracking-wide text-on-white-secondary", t),
     ...e
   }
 ));
-M.displayName = "DrawerHeader";
-const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+L.displayName = "DrawerKicker";
+const V = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "h2",
   {
     ref: r,
@@ -224,34 +241,81 @@ const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   }
 ));
 V.displayName = "DrawerTitle";
-const I = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+const I = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: r,
+    "data-slot": "drawer-meta",
+    className: n(
+      "mt-2 flex flex-wrap items-center gap-2 text-m text-on-white-secondary tabular-nums",
+      t
+    ),
+    ...e
+  }
+));
+I.displayName = "DrawerMeta";
+const P = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
     tabIndex: 0,
-    className: n("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
+    "data-slot": "drawer-body",
+    className: n(
+      "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-6 text-xs text-foreground outline-none focus-visible:ring-3 focus-visible:ring-ring focus-visible:ring-inset",
+      t
+    ),
     ...e
   }
 ));
-I.displayName = "DrawerBody";
-const P = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+P.displayName = "DrawerBody";
+const C = s.forwardRef(
+  ({ className: t, title: e, count: r, children: f, ...c }, u) => /* @__PURE__ */ d(
+    "section",
+    {
+      ref: u,
+      "data-slot": "drawer-section",
+      "aria-label": typeof e == "string" ? e : void 0,
+      className: n("flex shrink-0 flex-col gap-3", t),
+      ...c,
+      children: [
+        /* @__PURE__ */ d("h3", { className: "m-0 text-m font-medium text-on-white-primary", children: [
+          e,
+          r != null && /* @__PURE__ */ d(E, { children: [
+            " ",
+            /* @__PURE__ */ d("span", { className: "font-normal text-on-white-secondary", children: [
+              "· ",
+              r
+            ] })
+          ] })
+        ] }),
+        f
+      ]
+    }
+  )
+);
+C.displayName = "DrawerSection";
+const H = s.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
+    "data-slot": "drawer-footer",
     className: n(
-      "flex items-center justify-end gap-2 px-6 py-4",
+      "flex shrink-0 items-center justify-end gap-2 border-t border-border px-6 py-4",
       t
     ),
     ...e
   }
 ));
-P.displayName = "DrawerFooter";
+H.displayName = "DrawerFooter";
 export {
-  L as Drawer,
-  I as DrawerBody,
-  P as DrawerFooter,
-  M as DrawerHeader,
+  B as Drawer,
+  P as DrawerBody,
+  H as DrawerFooter,
+  K as DrawerHeader,
+  L as DrawerKicker,
+  I as DrawerMeta,
+  C as DrawerSection,
   V as DrawerTitle,
-  J as InlineDrawer,
-  G as ModalDrawer
+  X as InlineDrawer,
+  W as ModalDrawer
 };

package/components/empty-state.d.ts

@@ -3,7 +3,8 @@ import * as React from "react";
  * EmptyState — the "nothing here yet" placeholder.
  *
  * Two registers, chosen by which visual slot you fill:
- *  - `icon` (default): a compact icon-in-a-circle for an in-panel empty list.
+ *  - `icon` (default): a compact bare icon for an in-panel empty list (icons
+ *    never sit on a tile or fill).
  *  - `illustration`: a larger soft graphic for a full empty *screen*, with a
  *    bigger title and more breathing room — the calm, centred pattern.
  *
@@ -15,7 +16,7 @@ import * as React from "react";
  * accent — and re-theme with the system since every fill flows from a token.
  */
 export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Compact icon (rendered inside a muted circle). Ignored if `illustration` is set. */
+    /** Compact bare icon (24px, muted, no circle). Ignored if `illustration` is set. */
     icon?: React.ReactNode;
     /** Larger soft graphic for a full empty screen (see the Empty* illustrations). */
     illustration?: React.ReactNode;

package/components/empty-state.js

@@ -4,8 +4,8 @@ import * as x from "react";
 import { Inbox as g } from "../lib/icons.js";
 import { cn as s } from "../lib/cn.js";
 const f = x.forwardRef(
-  ({ className: r, icon: c, illustration: i, title: n, description: d, action: o, ...m }, h) => {
-    const l = i != null;
+  ({ className: r, icon: d, illustration: l, title: n, description: c, action: o, ...m }, h) => {
+    const a = l != null;
     return /* @__PURE__ */ t(
       "div",
       {
@@ -14,30 +14,30 @@ const f = x.forwardRef(
           // No fill: the empty state is outlined by a dashed WG5 edge on
           // whatever surface it sits on.
           "flex flex-col items-center rounded-lg border border-dashed border-border-strong px-6 text-center",
-          l ? "gap-5 py-16" : "gap-3 py-12",
+          a ? "gap-5 py-16" : "gap-3 py-12",
           r
         ),
         ...m,
         children: [
-          l ? i : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: c ?? /* @__PURE__ */ e(g, { "aria-hidden": !0 }) }),
+          a ? l : /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center text-muted-foreground [&_svg]:size-6", children: d ?? /* @__PURE__ */ e(g, { "aria-hidden": !0 }) }),
           /* @__PURE__ */ t("div", { className: "flex flex-col gap-1.5", children: [
             /* @__PURE__ */ e(
               "p",
               {
                 className: s(
-                  l ? "text-lg font-medium text-foreground" : "font-normal"
+                  a ? "text-lg font-medium text-foreground" : "font-normal"
                 ),
                 children: n
               }
             ),
-            d && /* @__PURE__ */ e(
+            c && /* @__PURE__ */ e(
               "p",
               {
                 className: s(
                   "max-w-sm text-muted-foreground",
-                  l ? "text-sm" : "text-xs"
+                  a ? "text-sm" : "text-xs"
                 ),
-                children: d
+                children: c
               }
             )
           ] }),
@@ -48,9 +48,9 @@ const f = x.forwardRef(
   }
 );
 f.displayName = "EmptyState";
-const a = "h-28 w-auto";
+const i = "h-28 w-auto";
 function y({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
     /* @__PURE__ */ e(
       "rect",
       {
@@ -84,8 +84,8 @@ function y({ className: r }) {
   ] });
 }
 y.displayName = "EmptyDocuments";
-function u({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
+function N({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
     /* @__PURE__ */ e(
       "rect",
       {
@@ -127,9 +127,9 @@ function u({ className: r }) {
     ] })
   ] });
 }
-u.displayName = "EmptySearch";
-function N({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
+N.displayName = "EmptySearch";
+function p({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
     /* @__PURE__ */ e(
       "path",
       {
@@ -155,20 +155,20 @@ function N({ className: r }) {
     )
   ] });
 }
-N.displayName = "EmptyConnections";
-function p({ className: r }) {
-  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(a, r), children: [
+p.displayName = "EmptyConnections";
+function u({ className: r }) {
+  return /* @__PURE__ */ t("svg", { viewBox: "0 0 140 120", role: "img", "aria-hidden": !0, className: s(i, r), children: [
     /* @__PURE__ */ e("rect", { x: "34", y: "88", width: "72", height: "3", rx: "1.5", className: "fill-border-strong" }),
     /* @__PURE__ */ e("rect", { x: "40", y: "64", width: "15", height: "24", rx: "3", className: "fill-muted" }),
     /* @__PURE__ */ e("rect", { x: "62", y: "50", width: "15", height: "38", rx: "3", className: "fill-border-strong" }),
     /* @__PURE__ */ e("rect", { x: "84", y: "34", width: "15", height: "54", rx: "3", className: "fill-brand" })
   ] });
 }
-p.displayName = "EmptyInsights";
+u.displayName = "EmptyInsights";
 export {
-  N as EmptyConnections,
+  p as EmptyConnections,
   y as EmptyDocuments,
-  p as EmptyInsights,
-  u as EmptySearch,
+  u as EmptyInsights,
+  N as EmptySearch,
   f as EmptyState
 };

package/components/field.d.ts

@@ -19,6 +19,22 @@ export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
     errorId?: string;
     /** id put on the rendered description text, for the same wiring. */
     descriptionId?: string;
+    /**
+     * Optional guidance shown from an info icon right after the label, instead
+     * of a helper line under the control (principle `create-modals`). Use it for
+     * "optional / can change later" notes that most people never need.
+     */
+    info?: React.ReactNode;
+    /**
+     * Controls at the right end of the label row, e.g. a small SegmentedControl
+     * that picks the source for this field ("CSV upload | Empty audience").
+     */
+    actions?: React.ReactNode;
 }
+/** 20px quiet info trigger: bare icon, no tile; teal on hover/focus. */
+export declare function FieldInfo({ children, label }: {
+    children: React.ReactNode;
+    label?: string;
+}): React.JSX.Element;
 /** Vertical stack: label · control · (description|error). */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;