@actioneer/ads 0.1.0

package/components/link.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import * as u from "react";
+import { ArrowUpRight as t } from "../lib/icons.js";
+import { cn as d } from "../lib/cn.js";
+const c = {
+  default: "text-foreground",
+  muted: "text-muted-foreground",
+  primary: "text-brand"
+}, f = u.forwardRef(
+  ({ className: n, color: a = "default", isExternal: r = !1, children: i, ...s }, l) => /* @__PURE__ */ o(
+    "a",
+    {
+      ref: l,
+      target: r ? "_blank" : void 0,
+      rel: r ? "noopener noreferrer" : void 0,
+      className: d(
+        // Links read as links by WEIGHT at rest (bold against body copy);
+        // the underline is a hover/focus affordance. Underline spec: dotted,
+        // 12% thickness, 24% offset, skip-ink, auto (current) color.
+        "group/link inline-flex items-center gap-1 rounded-xs font-bold",
+        "hover:underline focus-visible:underline decoration-dotted decoration-[0.12em] underline-offset-[0.24em]",
+        "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+        c[a],
+        n
+      ),
+      ...s,
+      children: [
+        i,
+        r && // Two arrows stacked in a clipped box, driven by a single group-hover
+        // CSS var (`--arrow-out`). At rest, arrow A sits centered and arrow B
+        // is parked bottom-left off the viewport (--arrow-out = 0). On hover,
+        // --arrow-out = 1: A slides up-right out of the frame, B slides in to
+        // take its place. The swap reads as the arrow flying toward the
+        // destination. Space is reserved so the label never shifts.
+        // (Inline style — Tailwind's arbitrary translate utilities weren't
+        // being generated by the JIT for these specific values.)
+        /* @__PURE__ */ o(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "relative inline-block size-3.5 overflow-hidden [--arrow-out:0] group-hover/link:[--arrow-out:1] group-focus-visible/link:[--arrow-out:1]",
+            children: [
+              /* @__PURE__ */ e(
+                t,
+                {
+                  className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                  style: {
+                    transform: "translate(calc(var(--arrow-out) * 100%), calc(var(--arrow-out) * -100%))"
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                t,
+                {
+                  className: "absolute inset-0 size-full transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                  style: {
+                    transform: "translate(calc((var(--arrow-out) - 1) * 100%), calc((1 - var(--arrow-out)) * 100%))"
+                  }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  )
+);
+f.displayName = "Link";
+export {
+  f as Link
+};

package/components/modal.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const panelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ModalProps extends VariantProps<typeof panelVariants> {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare function Modal({ open, onOpenChange, size, className, children }: 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>>;
+export declare const ModalBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/modal.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import * as i from "react";
+import { createPortal as y } from "react-dom";
+import { MotionConfig as b, AnimatePresence as g, motion as f } from "motion/react";
+import { Close as w } from "../lib/icons.js";
+import { cva as h } from "class-variance-authority";
+import { cn as n } from "../lib/cn.js";
+import { backdropVariants as N, modalPanelVariants as M } from "../lib/motion.js";
+const k = h(
+  [
+    "relative flex w-full flex-col",
+    "bg-elevated text-foreground",
+    "rounded-xl shadow-elevation"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg",
+        xl: "max-w-2xl"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function L({ open: o, onOpenChange: e, size: t, className: u, children: p }) {
+  const s = i.useRef(null), l = i.useRef(null);
+  return i.useEffect(() => {
+    if (!o) return;
+    l.current = document.activeElement;
+    const x = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const d = (a) => {
+      a.key === "Escape" && (a.stopPropagation(), e(!1));
+    };
+    document.addEventListener("keydown", d);
+    const v = requestAnimationFrame(() => {
+      var a;
+      (a = s.current) == null || a.focus();
+    });
+    return () => {
+      var a, c;
+      document.removeEventListener("keydown", d), document.body.style.overflow = x, cancelAnimationFrame(v), (c = (a = l.current) == null ? void 0 : a.focus) == null || c.call(a);
+    };
+  }, [o, e]), y(
+    /* @__PURE__ */ r(b, { reducedMotion: "user", children: /* @__PURE__ */ r(g, { children: o && /* @__PURE__ */ m("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ r(
+        f.div,
+        {
+          variants: N,
+          initial: "hidden",
+          animate: "visible",
+          exit: "hidden",
+          className: "absolute inset-0 bg-overlay",
+          onClick: () => e(!1),
+          "aria-hidden": !0
+        },
+        "backdrop"
+      ),
+      /* @__PURE__ */ m(
+        f.div,
+        {
+          ref: s,
+          variants: M,
+          initial: "hidden",
+          animate: "visible",
+          exit: "hidden",
+          role: "dialog",
+          "aria-modal": "true",
+          tabIndex: -1,
+          className: n(k({ size: t }), "outline-none", u),
+          children: [
+            /* @__PURE__ */ r(
+              "button",
+              {
+                type: "button",
+                onClick: () => e(!1),
+                "aria-label": "Close",
+                className: n(
+                  "absolute right-4 top-4 inline-flex size-8 items-center justify-center",
+                  "rounded-md text-muted-foreground",
+                  "transition-[background,color,transform] duration-(--duration-fast) ease-out hover:bg-muted hover:text-foreground",
+                  "active:scale-(--scale-press)",
+                  "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+                  "[&_svg]:size-4 [&_svg]:shrink-0"
+                ),
+                children: /* @__PURE__ */ r(w, { "aria-hidden": !0 })
+              }
+            ),
+            p
+          ]
+        },
+        "panel"
+      )
+    ] }) }) }),
+    document.body
+  );
+}
+const R = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: n("flex flex-col gap-1 px-6 pt-6 pr-14", o),
+    ...e
+  }
+));
+R.displayName = "ModalHeader";
+const j = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+  "h2",
+  {
+    ref: t,
+    className: n("text-lg font-semibold text-foreground", o),
+    ...e
+  }
+));
+j.displayName = "ModalTitle";
+const z = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+  "p",
+  {
+    ref: t,
+    className: n("text-xs text-muted-foreground", o),
+    ...e
+  }
+));
+z.displayName = "ModalDescription";
+const E = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: n("px-6 py-4 text-xs text-foreground", o),
+    ...e
+  }
+));
+E.displayName = "ModalBody";
+const F = i.forwardRef(({ className: o, ...e }, t) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: t,
+    className: n(
+      "flex items-center justify-end gap-2 px-6 pb-6 pt-2",
+      o
+    ),
+    ...e
+  }
+));
+F.displayName = "ModalFooter";
+export {
+  L as Modal,
+  E as ModalBody,
+  z as ModalDescription,
+  F as ModalFooter,
+  R as ModalHeader,
+  j as ModalTitle
+};

package/components/navbar.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+export declare const Navbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+export declare const NavbarBrand: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const navbarContentVariants: (props?: ({
+    justify?: "center" | "end" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof navbarContentVariants> {
+}
+export declare const NavbarContent: React.ForwardRefExoticComponent<NavbarContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavbarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    isActive?: boolean;
+}
+export declare const NavbarItem: React.ForwardRefExoticComponent<NavbarItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/components/navbar.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import * as o from "react";
+import { cva as i } from "class-variance-authority";
+import { cn as n } from "../lib/cn.js";
+const m = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+  "nav",
+  {
+    ref: e,
+    className: n(
+      "sticky top-0 z-40 flex h-16 items-center gap-4 px-4",
+      "bg-background/80 backdrop-blur",
+      r
+    ),
+    ...a
+  }
+));
+m.displayName = "Navbar";
+const d = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: e,
+    className: n(
+      "flex items-center gap-2 font-semibold text-foreground",
+      r
+    ),
+    ...a
+  }
+));
+d.displayName = "NavbarBrand";
+const c = i("flex items-center gap-1", {
+  variants: {
+    justify: {
+      start: "mr-auto",
+      center: "mx-auto",
+      end: "ml-auto"
+    }
+  }
+}), f = o.forwardRef(({ className: r, justify: a, ...e }, s) => /* @__PURE__ */ t(
+  "div",
+  {
+    ref: s,
+    className: n(c({ justify: a }), r),
+    ...e
+  }
+));
+f.displayName = "NavbarContent";
+const l = o.forwardRef(({ className: r, isActive: a, ...e }, s) => /* @__PURE__ */ t(
+  "a",
+  {
+    ref: s,
+    "aria-current": a ? "page" : void 0,
+    className: n(
+      "rounded-md px-2 py-1 text-xs transition-colors",
+      "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+      a ? "text-foreground" : "text-muted-foreground hover:text-foreground",
+      r
+    ),
+    ...e
+  }
+));
+l.displayName = "NavbarItem";
+export {
+  m as Navbar,
+  d as NavbarBrand,
+  f as NavbarContent,
+  l as NavbarItem
+};

package/components/number-field.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface NumberFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange" | "type" | "min" | "max" | "step"> {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: "sm" | "md" | "lg";
+    isInvalid?: boolean;
+}
+export declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;

package/components/number-field.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import * as M from "react";
+import { Minus as _, Plus as j } from "../lib/icons.js";
+import { cn as c } from "../lib/cn.js";
+import { inputBaseClass as h } from "./field.js";
+const D = {
+  sm: { field: "h-8 text-xs", btn: "size-8 [&_svg]:size-3.5" },
+  md: { field: "h-10 text-xs", btn: "size-10 [&_svg]:size-4" },
+  lg: { field: "h-11 text-base", btn: "size-11 [&_svg]:size-4" }
+}, F = M.forwardRef(
+  ({
+    className: v,
+    value: l,
+    onChange: t,
+    min: i,
+    max: s,
+    step: d = 1,
+    size: x = "md",
+    isInvalid: N,
+    disabled: o,
+    ...z
+  }, w) => {
+    const u = D[x], b = (n) => {
+      let e = n;
+      return i !== void 0 && (e = Math.max(i, e)), s !== void 0 && (e = Math.min(s, e)), e;
+    }, a = l ?? 0, y = !o && (i === void 0 || a > i), g = !o && (s === void 0 || a < s), p = (n) => t == null ? void 0 : t(b(a + n * d)), m = c(
+      "inline-flex items-center justify-center rounded-md border border-input bg-elevated text-foreground",
+      "transition-[background,box-shadow] duration-(--duration-fast) hover:bg-muted",
+      "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+      "disabled:pointer-events-none disabled:opacity-50",
+      u.btn
+    );
+    return /* @__PURE__ */ k("div", { className: c("inline-flex items-center gap-1.5", v), children: [
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Decrease",
+          disabled: !y,
+          onClick: () => p(-1),
+          className: m,
+          children: /* @__PURE__ */ r(_, {})
+        }
+      ),
+      /* @__PURE__ */ r(
+        "input",
+        {
+          ref: w,
+          type: "number",
+          inputMode: "numeric",
+          value: l ?? "",
+          min: i,
+          max: s,
+          step: d,
+          disabled: o,
+          "aria-invalid": N || void 0,
+          onChange: (n) => {
+            const e = n.target.value;
+            if (e === "") return;
+            const f = Number(e);
+            Number.isNaN(f) || t == null || t(b(f));
+          },
+          className: c(
+            h,
+            "w-20 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+            u.field
+          ),
+          ...z
+        }
+      ),
+      /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Increase",
+          disabled: !g,
+          onClick: () => p(1),
+          className: m,
+          children: /* @__PURE__ */ r(j, {})
+        }
+      )
+    ] });
+  }
+);
+F.displayName = "NumberField";
+export {
+  F as NumberField
+};

package/components/pagination.d.ts

@@ -0,0 +1,28 @@
+import * as React from "react";
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** Total number of pages. */
+    total: number;
+    /** Current 1-based page. */
+    page: number;
+    onChange: (page: number) => void;
+    /** Pages shown on each side of the current page. */
+    siblings?: number;
+    /** Compact variant for table footers. */
+    size?: "sm" | "md";
+    /**
+     * Left-side summary ("1 to 8 of 14 results"). When set, the nav spans
+     * full width with the summary left and the controls right — the HeroUI
+     * pagination anatomy (Summary + Content).
+     */
+    summary?: React.ReactNode;
+    /** Show "Prev" / "Next" text labels on the nav buttons. */
+    labels?: boolean;
+    /**
+     * Rows-per-page control. Pass all three to render a "Rows per page"
+     * select beside the controls; the consumer owns the slicing.
+     */
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+}
+export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;

package/components/pagination.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import * as j from "react";
+import { ChevronLeft as L, MoreHorizontal as k, ChevronRight as G } from "../lib/icons.js";
+import { cn as a } from "../lib/cn.js";
+import { Select as M } from "./select.js";
+function p(e, r) {
+  const t = [];
+  for (let i = e; i <= r; i += 1) t.push(i);
+  return t;
+}
+function E(e, r, t) {
+  if (t * 2 + 5 >= e)
+    return p(1, e);
+  const m = Math.max(r - t, 1), n = Math.min(r + t, e), d = m > 2, o = n < e - 1;
+  if (!d && o) {
+    const c = t * 2 + 3;
+    return [...p(1, c), "end-ellipsis", e];
+  }
+  if (d && !o) {
+    const c = t * 2 + 3;
+    return [1, "start-ellipsis", ...p(e - c + 1, e)];
+  }
+  return [
+    1,
+    "start-ellipsis",
+    ...p(m, n),
+    "end-ellipsis",
+    e
+  ];
+}
+const A = (e) => a(
+  "inline-flex items-center justify-center rounded-md font-medium",
+  "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+  "transition active:scale-(--scale-press)",
+  "disabled:pointer-events-none disabled:opacity-40",
+  e === "sm" ? "size-7 text-xs" : "size-9 text-xs"
+), N = (e) => e === "sm" ? "w-auto gap-1.5 px-2" : "w-auto gap-1.5 px-2.5", F = j.forwardRef(
+  ({
+    className: e,
+    total: r,
+    page: t,
+    onChange: i,
+    siblings: m = 1,
+    size: n = "md",
+    summary: d,
+    labels: o = !1,
+    pageSize: c,
+    pageSizeOptions: w,
+    onPageSizeChange: g,
+    ...C
+  }, y) => {
+    if (r <= 0) return null;
+    const P = E(r, t, m), R = t <= 1, S = t >= r, f = A(n), x = n === "sm" ? "size-3.5" : "size-4", h = c != null && !!g, b = d != null || h;
+    return /* @__PURE__ */ u(
+      "nav",
+      {
+        ref: y,
+        "aria-label": "Pagination",
+        className: a(
+          "flex items-center",
+          b ? "w-full justify-between gap-4" : "gap-1",
+          e
+        ),
+        ...C,
+        children: [
+          b && /* @__PURE__ */ l(
+            "span",
+            {
+              className: a(
+                "text-muted-foreground",
+                "text-xs"
+              ),
+              children: d
+            }
+          ),
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-4", children: [
+            h && /* @__PURE__ */ u(
+              "label",
+              {
+                className: a(
+                  "flex items-center gap-2 text-muted-foreground",
+                  "text-xs"
+                ),
+                children: [
+                  "Rows per page",
+                  /* @__PURE__ */ l(
+                    M,
+                    {
+                      size: "sm",
+                      className: "w-18",
+                      placement: "top",
+                      items: (w ?? [8, 16, 32]).map((s) => ({
+                        label: String(s),
+                        value: String(s)
+                      })),
+                      value: String(c),
+                      onChange: (s) => g(Number(s))
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ u("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ u(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Go to previous page",
+                  disabled: R,
+                  onClick: () => i(t - 1),
+                  className: a(
+                    f,
+                    "text-foreground hover:bg-muted",
+                    o && N(n)
+                  ),
+                  children: [
+                    /* @__PURE__ */ l(L, { className: x, "aria-hidden": !0 }),
+                    o && "Prev"
+                  ]
+                }
+              ),
+              P.map((s) => {
+                if (s === "start-ellipsis" || s === "end-ellipsis")
+                  return /* @__PURE__ */ l(
+                    "span",
+                    {
+                      "aria-hidden": !0,
+                      className: a(f, "text-muted-foreground"),
+                      children: /* @__PURE__ */ l(k, { className: x })
+                    },
+                    s
+                  );
+                const v = s === t;
+                return /* @__PURE__ */ l(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Go to page ${s}`,
+                    "aria-current": v ? "page" : void 0,
+                    onClick: () => i(s),
+                    className: a(
+                      f,
+                      v ? "bg-brand text-brand-foreground" : "text-foreground hover:bg-muted"
+                    ),
+                    children: s
+                  },
+                  s
+                );
+              }),
+              /* @__PURE__ */ u(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Go to next page",
+                  disabled: S,
+                  onClick: () => i(t + 1),
+                  className: a(
+                    f,
+                    "text-foreground hover:bg-muted",
+                    o && N(n)
+                  ),
+                  children: [
+                    o && "Next",
+                    /* @__PURE__ */ l(G, { className: x, "aria-hidden": !0 })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+F.displayName = "Pagination";
+export {
+  F as Pagination
+};

package/components/panel.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+/**
+ * Panel — a bordered surface region with an optional fixed header/footer and a
+ * scrollable body. The building block for app frames: editors, previews, side
+ * columns, tool windows. Compose: Panel > PanelHeader (PanelTitle + PanelToolbar)
+ * + PanelBody + PanelFooter.
+ */
+export declare const Panel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const PanelHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const PanelTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+/** Right-aligned actions area for a PanelHeader. */
+export declare const PanelToolbar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const PanelBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const PanelFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;