@actioneer/ads 0.5.8 → 0.5.9

package/components/drawer.d.ts

@@ -22,10 +22,12 @@ export interface DrawerProps extends VariantProps<typeof panelVariants> {
 export interface ModalDrawerProps extends VariantProps<typeof panelVariants> {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** Accessible name for the modal drawer dialog. */
+    "aria-label": string;
     className?: string;
     children: React.ReactNode;
 }
-export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size, className, children, }: ModalDrawerProps): React.ReactPortal;
+export declare function ModalDrawer({ open, onOpenChange, side: sideProp, size, className, children, "aria-label": ariaLabel, }: ModalDrawerProps): React.ReactPortal;
 /**
  * Drawer — an in-flow side panel that slides in beside content instead of
  * portaling over the whole page. No backdrop, no scroll lock; the surrounding

package/components/drawer.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as i, jsxs as v } from "react/jsx-runtime";
 import * as a from "react";
-import { createPortal as D } from "react-dom";
-import { MotionConfig as p, AnimatePresence as b, motion as h } from "motion/react";
-import { Close as R } from "../lib/icons.js";
-import { cva as E } from "class-variance-authority";
-import { cn as o } from "../lib/cn.js";
-import { springSheet as f, drawerOffset as u, drawerBackdropVariants as j } from "../lib/motion.js";
-const z = E(
+import { createPortal as R } from "react-dom";
+import { MotionConfig as b, AnimatePresence as z, motion as h } from "motion/react";
+import { Close as E } from "../lib/icons.js";
+import { cva as j } from "class-variance-authority";
+import { cn as l } from "../lib/cn.js";
+import { springSheet as c, drawerOffset as m, drawerBackdropVariants as F } from "../lib/motion.js";
+const N = j(
   [
     "relative flex flex-col",
     "bg-elevated text-foreground",
@@ -43,12 +43,12 @@ const z = E(
     ],
     defaultVariants: { side: "right", size: "md" }
   }
-), F = {
+), A = {
   right: "justify-end items-stretch",
   left: "justify-start items-stretch",
   bottom: "justify-center items-end"
 };
-function N({
+function k({
   onClick: t,
   className: e
 }) {
@@ -58,7 +58,7 @@ function N({
       type: "button",
       onClick: t,
       "aria-label": "Close",
-      className: o(
+      className: l(
         "absolute 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",
@@ -67,42 +67,43 @@ function N({
         "[&_svg]:size-4 [&_svg]:shrink-0",
         e
       ),
-      children: /* @__PURE__ */ i(R, { "aria-hidden": !0 })
+      children: /* @__PURE__ */ i(E, { "aria-hidden": !0 })
     }
   );
 }
-function q({
+function S({
   open: t,
   onOpenChange: e,
   side: r,
-  size: w,
-  className: x,
-  children: g
+  size: f,
+  className: u,
+  children: w,
+  "aria-label": x
 }) {
-  const l = r ?? "right", n = a.useRef(null), d = a.useRef(null);
+  const o = r ?? "right", d = a.useRef(null), n = a.useRef(null);
   return a.useEffect(() => {
     if (!t) return;
-    d.current = document.activeElement;
-    const c = document.body.style.overflow;
+    n.current = document.activeElement;
+    const g = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const m = (s) => {
+    const y = (s) => {
       s.key === "Escape" && (s.stopPropagation(), e(!1));
     };
-    document.addEventListener("keydown", m);
-    const k = requestAnimationFrame(() => {
+    document.addEventListener("keydown", y);
+    const D = requestAnimationFrame(() => {
       var s;
-      (s = n.current) == null || s.focus();
+      (s = d.current) == null || s.focus();
     });
     return () => {
-      var s, y;
-      document.removeEventListener("keydown", m), document.body.style.overflow = c, cancelAnimationFrame(k), (y = (s = d.current) == null ? void 0 : s.focus) == null || y.call(s);
+      var s, p;
+      document.removeEventListener("keydown", y), document.body.style.overflow = g, cancelAnimationFrame(D), (p = (s = n.current) == null ? void 0 : s.focus) == null || p.call(s);
     };
-  }, [t, e]), D(
-    /* @__PURE__ */ i(p, { reducedMotion: "user", children: /* @__PURE__ */ i(b, { children: t && /* @__PURE__ */ v("div", { className: o("fixed inset-0 z-50 flex", F[l]), children: [
+  }, [t, e]), R(
+    /* @__PURE__ */ i(b, { reducedMotion: "user", children: /* @__PURE__ */ i(z, { children: t && /* @__PURE__ */ v("div", { className: l("fixed inset-0 z-50 flex", A[o]), children: [
       /* @__PURE__ */ i(
         h.div,
         {
-          variants: j,
+          variants: F,
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
@@ -115,23 +116,24 @@ function q({
       /* @__PURE__ */ v(
         h.div,
         {
-          ref: n,
-          initial: u[l],
-          animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: f },
-          exit: { ...u[l], transition: f },
+          ref: d,
+          initial: m[o],
+          animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: c },
+          exit: { ...m[o], transition: c },
           role: "dialog",
           "aria-modal": "true",
+          "aria-label": x,
           tabIndex: -1,
-          className: o(z({ side: l, size: w }), "relative outline-none", x),
+          className: l(N({ side: o, size: f }), "relative outline-none", u),
           children: [
             /* @__PURE__ */ i(
-              N,
+              k,
               {
                 onClick: () => e(!1),
                 className: "right-4 top-4"
               }
             ),
-            g
+            w
           ]
         },
         "panel"
@@ -140,96 +142,96 @@ function q({
     document.body
   );
 }
-function A({
+function B({
   open: t,
   onOpenChange: e,
   side: r,
-  size: w,
-  className: x,
-  children: g,
-  "aria-label": l
+  size: f,
+  className: u,
+  children: w,
+  "aria-label": x
 }) {
-  const n = r ?? "right", d = a.useRef(null);
+  const o = r ?? "right", d = a.useRef(null);
   return a.useEffect(() => {
     if (!t) return;
-    const c = (m) => {
-      m.key === "Escape" && e(!1);
+    const n = (g) => {
+      g.key === "Escape" && e(!1);
     };
-    return document.addEventListener("keydown", c), () => document.removeEventListener("keydown", c);
-  }, [t, e]), /* @__PURE__ */ i(p, { reducedMotion: "user", children: /* @__PURE__ */ i(b, { initial: !1, children: t && /* @__PURE__ */ v(
+    return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
+  }, [t, e]), /* @__PURE__ */ i(b, { reducedMotion: "user", children: /* @__PURE__ */ i(z, { initial: !1, children: t && /* @__PURE__ */ v(
     h.aside,
     {
       ref: d,
-      initial: u[n],
-      animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: f },
-      exit: { ...u[n], transition: f },
+      initial: m[o],
+      animate: { transform: "translate3d(0, 0, 0)", opacity: 1, transition: c },
+      exit: { ...m[o], transition: c },
       role: "complementary",
-      "aria-label": l,
-      className: o(
-        z({ side: n, size: w }),
+      "aria-label": x,
+      className: l(
+        N({ side: o, size: f }),
         "relative shrink-0 overflow-hidden rounded-lg bg-card shadow-none outline-none",
-        x
+        u
       ),
       children: [
         /* @__PURE__ */ i(
-          N,
+          k,
           {
             onClick: () => e(!1),
             className: "right-2 top-1"
           }
         ),
-        g
+        w
       ]
     },
     "inline-drawer"
   ) }) });
 }
-const S = A, B = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+const G = B, L = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
-    className: o("flex flex-col gap-1 px-6 py-4 pr-14", t),
+    className: l("flex flex-col gap-1 px-6 py-4 pr-14", t),
     ...e
   }
 ));
-B.displayName = "DrawerHeader";
-const L = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+L.displayName = "DrawerHeader";
+const M = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "h2",
   {
     ref: r,
-    className: o("text-lg font-medium text-foreground", t),
+    className: l("text-lg font-medium text-foreground", t),
     ...e
   }
 ));
-L.displayName = "DrawerTitle";
-const M = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+M.displayName = "DrawerTitle";
+const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
     tabIndex: 0,
-    className: o("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
+    className: l("flex-1 overflow-y-auto px-6 py-4 text-xs text-foreground", t),
     ...e
   }
 ));
-M.displayName = "DrawerBody";
-const V = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
+V.displayName = "DrawerBody";
+const I = a.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ i(
   "div",
   {
     ref: r,
-    className: o(
+    className: l(
       "flex items-center justify-end gap-2 px-6 py-4",
       t
     ),
     ...e
   }
 ));
-V.displayName = "DrawerFooter";
+I.displayName = "DrawerFooter";
 export {
-  A as Drawer,
-  M as DrawerBody,
-  V as DrawerFooter,
-  B as DrawerHeader,
-  L as DrawerTitle,
-  S as InlineDrawer,
-  q as ModalDrawer
+  B as Drawer,
+  V as DrawerBody,
+  I as DrawerFooter,
+  L as DrawerHeader,
+  M as DrawerTitle,
+  G as InlineDrawer,
+  S as ModalDrawer
 };

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/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;
 }