@actioneer/ads 0.5.8 → 0.6.0

package/components/modal.d.ts

@@ -8,8 +8,12 @@ export interface ModalProps extends VariantProps<typeof panelVariants> {
     onOpenChange: (open: boolean) => void;
     className?: string;
     children: React.ReactNode;
+    showCloseButton?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
 }
-export declare function Modal({ open, onOpenChange, size, className, children }: ModalProps): React.ReactPortal;
+export declare function Modal({ open, onOpenChange, size, className, children, showCloseButton, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, }: ModalProps): React.ReactPortal;
 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>>;

package/components/modal.js

@@ -1,14 +1,14 @@
 "use client";
-import { jsx as n, jsxs as y } from "react/jsx-runtime";
-import * as i from "react";
-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(
+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(
   [
     "relative flex w-full flex-col",
     // Cap height to the viewport and clip, so a tall modal scrolls its body
@@ -29,57 +29,67 @@ const T = F(
     defaultVariants: { size: "md" }
   }
 );
-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(() => {
+function Z({
+  open: o,
+  onOpenChange: t,
+  size: r,
+  className: g,
+  children: w,
+  showCloseButton: M = !0,
+  "aria-label": N,
+  "aria-labelledby": k,
+  "aria-describedby": R
+}) {
+  const d = n.useRef(null), f = n.useRef(null), u = n.useRef(null);
+  return n.useEffect(() => {
     if (!o) return;
     u.current = document.activeElement;
-    const M = document.body.style.overflow;
+    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 N = () => {
+    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"])'
         )) ?? []
       );
-    }, x = (e) => {
+    }, b = (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();
+      const l = d.current;
+      if (!l) return;
+      const s = A();
+      if (s.length === 0) {
+        e.preventDefault(), l.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());
+      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", x);
-    const k = requestAnimationFrame(() => {
+    document.addEventListener("keydown", b);
+    const D = requestAnimationFrame(() => {
       var e;
       (e = d.current) == null || e.focus();
     });
     return () => {
-      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);
+      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]), 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(
+  }, [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: j,
+          variants: V,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
@@ -93,23 +103,26 @@ function U({ open: o, onOpenChange: t, size: r, className: g, children: w }) {
         h.div,
         {
           ref: d,
-          variants: z,
+          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: a(T({ size: r }), "relative outline-none", g),
+          className: i(q({ size: r }), "relative outline-none", g),
           children: [
-            /* @__PURE__ */ n(P, { origin: "center" }),
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ a(L, { origin: "center" }),
+            M ? /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
                 onClick: () => t(!1),
                 "aria-label": "Close",
-                className: a(
+                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",
@@ -117,9 +130,9 @@ function U({ open: o, onOpenChange: t, size: r, className: g, children: w }) {
                   "outline-none focus-visible:ring-3 focus-visible:ring-ring",
                   "[&_svg]:size-4 [&_svg]:shrink-0"
                 ),
-                children: /* @__PURE__ */ n(D, { "aria-hidden": !0 })
+                children: /* @__PURE__ */ a(P, { "aria-hidden": !0 })
               }
-            ),
+            ) : null,
             w
           ]
         },
@@ -129,62 +142,62 @@ function U({ open: o, onOpenChange: t, size: r, className: g, children: w }) {
     document.body
   );
 }
-const V = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
+const B = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
   "div",
   {
     ref: r,
-    className: a("flex shrink-0 flex-col gap-1 px-6 pt-6 pr-14", o),
+    className: i("flex shrink-0 flex-col gap-1 px-6 pt-6 pr-14", o),
     ...t
   }
 ));
-V.displayName = "ModalHeader";
-const H = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
+B.displayName = "ModalHeader";
+const C = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
   "h2",
   {
     ref: r,
-    className: a("text-lg font-medium text-foreground", o),
+    className: i("text-lg font-medium text-foreground", o),
     ...t
   }
 ));
-H.displayName = "ModalTitle";
-const L = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
+C.displayName = "ModalTitle";
+const K = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
   "p",
   {
     ref: r,
-    className: a("text-xs text-muted-foreground", o),
+    className: i("text-xs text-muted-foreground", o),
     ...t
   }
 ));
-L.displayName = "ModalDescription";
-const q = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
+K.displayName = "ModalDescription";
+const _ = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
   "div",
   {
     ref: r,
-    className: a(
+    className: i(
       "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4 text-xs text-foreground",
       o
     ),
     ...t
   }
 ));
-q.displayName = "ModalBody";
-const B = i.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ n(
+_.displayName = "ModalBody";
+const I = n.forwardRef(({ className: o, ...t }, r) => /* @__PURE__ */ a(
   "div",
   {
     ref: r,
-    className: a(
+    className: i(
       "flex shrink-0 items-center justify-end gap-2 px-6 pb-6 pt-2",
       o
     ),
     ...t
   }
 ));
-B.displayName = "ModalFooter";
+I.displayName = "ModalFooter";
 export {
-  U as Modal,
-  q as ModalBody,
-  L as ModalDescription,
-  B as ModalFooter,
-  V as ModalHeader,
-  H as ModalTitle
+  Z as Modal,
+  _ as ModalBody,
+  K as ModalDescription,
+  I as ModalFooter,
+  B as ModalHeader,
+  C as ModalTitle
 };

package/components/panel.js

@@ -1,13 +1,14 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as n } from "../lib/cn.js";
-const s = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+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(
     "div",
     {
       ref: r,
-      className: n(
+      "data-slot": "panel",
+      className: o(
         // 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",
@@ -17,55 +18,57 @@ const s = l.forwardRef(
     }
   )
 );
-s.displayName = "Panel";
-const t = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+l.displayName = "Panel";
+const s = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "div",
     {
       ref: r,
-      className: n(
-        "flex h-[var(--panel-header-height)] shrink-0 items-center justify-between gap-2",
-        "border-b border-border bg-card px-3",
+      className: o(
+        "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-['']",
         e
       ),
       ...a
     }
   )
 );
-t.displayName = "PanelHeader";
-const d = l.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
+s.displayName = "PanelHeader";
+const i = n.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ t(
   "h2",
   {
     ref: r,
-    className: n("flex min-w-0 items-center gap-2 truncate text-xs font-medium text-foreground", e),
+    className: o("flex min-w-0 items-center gap-2 truncate text-xs font-medium text-foreground", e),
     ...a
   }
 ));
-d.displayName = "PanelTitle";
-const i = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, className: n("flex shrink-0 items-center gap-1", 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 })
 );
-i.displayName = "PanelToolbar";
-const f = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, tabIndex: 0, className: n("min-h-0 flex-1 overflow-auto p-4", 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 })
 );
 f.displayName = "PanelBody";
-const m = l.forwardRef(
-  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+const m = n.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ t(
     "div",
     {
       ref: r,
-      className: n("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
+      className: o("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
       ...a
     }
   )
 );
 m.displayName = "PanelFooter";
 export {
-  s as Panel,
+  l as Panel,
   f as PanelBody,
   m as PanelFooter,
-  t as PanelHeader,
-  d as PanelTitle,
-  i as PanelToolbar
+  s as PanelHeader,
+  i as PanelTitle,
+  d as PanelToolbar
 };

package/components/pixel-icon.d.ts

@@ -22,6 +22,10 @@ export interface PixelIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     motionMode?: number;
     /** Optional hover/click accent. Defaults to the standard green interaction color. */
     interactionColor?: string;
+    /** Optional 1–10 color ramp. Short ramps repeat to fill the ten tile shades. */
+    palette?: readonly string[];
+    /** Whether interaction is limited to filled tiles or spans the whole icon surface. */
+    interactionArea?: "tiles" | "surface";
     /** Larger hero rendering (broader hatch, mode 3). */
     hero?: boolean;
 }