@actioneer/ads 0.1.0

package/components/drawer.js

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

package/components/dropdown.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface DropdownProps {
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}
+export declare function Dropdown({ children, defaultOpen }: DropdownProps): React.JSX.Element;
+export interface DropdownTriggerProps {
+    children: React.ReactElement;
+}
+export declare function DropdownTrigger({ children }: DropdownTriggerProps): React.ReactElement<{
+    ref?: React.Ref<HTMLElement>;
+    onClick?: (event: React.MouseEvent) => void;
+    "aria-expanded"?: boolean;
+    "aria-haspopup"?: "menu";
+}, string | React.JSXElementConstructor<any>>;
+export interface DropdownContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "end";
+    /** Which side of the trigger the menu opens on. Default below. */
+    side?: "top" | "bottom";
+    sideOffset?: number;
+    /** Focus the menu surface on open without highlighting its first item. */
+    autoFocusFirstItem?: boolean;
+}
+export declare function DropdownContent({ className, align, side, sideOffset, autoFocusFirstItem, children, ...props }: DropdownContentProps): React.ReactPortal;
+export interface DropdownItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    startContent?: React.ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const DropdownLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/components/dropdown.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsxs as N, jsx as w } from "react/jsx-runtime";
+import * as c from "react";
+import { createPortal as A } from "react-dom";
+import { MotionConfig as I, AnimatePresence as P, motion as z } from "motion/react";
+import { cn as D } from "../lib/cn.js";
+import { floatVariants as O } from "../lib/motion.js";
+const q = (r, t) => `${r === "top" ? "bottom" : "top"} ${t === "start" ? "left" : "right"}`, k = c.createContext(null);
+function R(r) {
+  const t = c.useContext(k);
+  if (!t)
+    throw new Error(`${r} must be used within a <Dropdown>.`);
+  return t;
+}
+function B({ children: r, defaultOpen: t = !1 }) {
+  const [o, d] = c.useState(t), f = c.useRef(null), p = c.useRef(null);
+  return /* @__PURE__ */ w(k.Provider, { value: { open: o, setOpen: d, triggerRef: f, contentRef: p }, children: r });
+}
+function F({ children: r }) {
+  const { open: t, setOpen: o, triggerRef: d } = R("DropdownTrigger"), f = r;
+  return c.cloneElement(f, {
+    ref: d,
+    "aria-expanded": t,
+    "aria-haspopup": "menu",
+    onClick: (p) => {
+      var b, u;
+      (u = (b = f.props).onClick) == null || u.call(b, p), o(!t);
+    }
+  });
+}
+function U({
+  className: r,
+  align: t = "start",
+  side: o = "bottom",
+  sideOffset: d = 6,
+  autoFocusFirstItem: f = !0,
+  children: p,
+  ...b
+}) {
+  const { open: u, setOpen: v, triggerRef: m, contentRef: a } = R("DropdownContent"), [i, C] = c.useState(null);
+  c.useLayoutEffect(() => {
+    if (!u) return;
+    const s = m.current;
+    if (!s) return;
+    const e = () => {
+      var h, x;
+      const n = s.getBoundingClientRect(), l = ((h = a.current) == null ? void 0 : h.offsetWidth) ?? 0, g = ((x = a.current) == null ? void 0 : x.offsetHeight) ?? 0, y = t === "end" ? n.right - l : n.left, E = o === "top" ? n.top - g - d : n.bottom + d;
+      C({ top: E, left: y });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [u, t, o, d, m, a]), c.useEffect(() => {
+    if (!u) return;
+    const s = requestAnimationFrame(() => {
+      var e, n;
+      if (f) {
+        const l = (e = a.current) == null ? void 0 : e.querySelector(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        );
+        l == null || l.focus();
+      } else
+        (n = a.current) == null || n.focus();
+    });
+    return () => cancelAnimationFrame(s);
+  }, [u, f, a]), c.useEffect(() => {
+    if (!u) return;
+    const s = (e) => {
+      var l, g;
+      const n = e.target;
+      (l = a.current) != null && l.contains(n) || (g = m.current) != null && g.contains(n) || v(!1);
+    };
+    return document.addEventListener("pointerdown", s), () => document.removeEventListener("pointerdown", s);
+  }, [u, v, m, a]);
+  const L = (s) => {
+    var l, g, y, E, h, x;
+    const e = Array.from(
+      ((l = a.current) == null ? void 0 : l.querySelectorAll(
+        '[role="menuitem"]:not([aria-disabled="true"])'
+      )) ?? []
+    );
+    if (e.length === 0) return;
+    const n = e.indexOf(document.activeElement);
+    switch (s.key) {
+      case "Escape":
+        s.preventDefault(), v(!1), (g = m.current) == null || g.focus();
+        break;
+      case "ArrowDown":
+        s.preventDefault(), (y = e[n < 0 ? 0 : (n + 1) % e.length]) == null || y.focus();
+        break;
+      case "ArrowUp":
+        s.preventDefault(), (E = e[n < 0 ? e.length - 1 : (n - 1 + e.length) % e.length]) == null || E.focus();
+        break;
+      case "Home":
+        s.preventDefault(), (h = e[0]) == null || h.focus();
+        break;
+      case "End":
+        s.preventDefault(), (x = e[e.length - 1]) == null || x.focus();
+        break;
+    }
+  };
+  return A(
+    /* @__PURE__ */ w(I, { reducedMotion: "user", children: /* @__PURE__ */ w(P, { children: u && /* @__PURE__ */ w(
+      z.div,
+      {
+        ref: a,
+        role: "menu",
+        tabIndex: -1,
+        onKeyDown: L,
+        variants: O,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        style: {
+          position: "fixed",
+          top: (i == null ? void 0 : i.top) ?? 0,
+          left: (i == null ? void 0 : i.left) ?? 0,
+          visibility: i ? "visible" : "hidden",
+          transformOrigin: q(o, t)
+        },
+        className: D(
+          "z-50 min-w-44 rounded-lg border border-border bg-elevated p-1",
+          "text-foreground shadow-elevation outline-none",
+          r
+        ),
+        ...b,
+        children: p
+      }
+    ) }) }),
+    document.body
+  );
+}
+const $ = c.forwardRef(
+  ({ className: r, startContent: t, danger: o, disabled: d, onSelect: f, children: p, ...b }, u) => {
+    const { setOpen: v, triggerRef: m } = R("DropdownItem"), a = () => {
+      var i;
+      d || (f == null || f(), v(!1), (i = m.current) == null || i.focus());
+    };
+    return /* @__PURE__ */ N(
+      "div",
+      {
+        ref: u,
+        role: "menuitem",
+        tabIndex: -1,
+        "aria-disabled": d || void 0,
+        onClick: a,
+        onKeyDown: (i) => {
+          (i.key === "Enter" || i.key === " ") && (i.preventDefault(), a());
+        },
+        className: D(
+          "flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-xs",
+          "outline-none transition-colors duration-(--duration-fast)",
+          "focus-visible:ring-3 focus-visible:ring-ring",
+          o ? "text-danger" : "text-foreground",
+          d ? "pointer-events-none opacity-50" : D("hover:bg-muted focus:bg-muted", o && "hover:bg-danger/10 focus:bg-danger/10"),
+          "[&_svg]:size-4 [&_svg]:shrink-0",
+          r
+        ),
+        ...b,
+        children: [
+          t,
+          /* @__PURE__ */ w("span", { className: "flex-1", children: p })
+        ]
+      }
+    );
+  }
+);
+$.displayName = "DropdownItem";
+const j = c.forwardRef(({ className: r, ...t }, o) => /* @__PURE__ */ w(
+  "div",
+  {
+    ref: o,
+    role: "separator",
+    className: D("my-1 h-px bg-border", r),
+    ...t
+  }
+));
+j.displayName = "DropdownSeparator";
+const H = c.forwardRef(({ className: r, ...t }, o) => /* @__PURE__ */ w(
+  "div",
+  {
+    ref: o,
+    className: D(
+      "px-2 py-1.5 text-xs font-medium text-muted-foreground select-none",
+      r
+    ),
+    ...t
+  }
+));
+H.displayName = "DropdownLabel";
+export {
+  B as Dropdown,
+  U as DropdownContent,
+  $ as DropdownItem,
+  H as DropdownLabel,
+  j as DropdownSeparator,
+  F as DropdownTrigger
+};

package/components/empty-state.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: React.ReactNode;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+}
+export declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;

package/components/empty-state.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import * as d from "react";
+import { Inbox as n } from "../lib/icons.js";
+import { cn as o } from "../lib/cn.js";
+const f = d.forwardRef(
+  ({ className: s, icon: a, title: l, description: t, action: m, ...i }, c) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: c,
+      className: o(
+        "flex flex-col items-center text-center gap-3 py-12",
+        s
+      ),
+      ...i,
+      children: [
+        /* @__PURE__ */ e("span", { className: "inline-flex items-center justify-center rounded-full bg-muted p-3 text-muted-foreground [&_svg]:size-6", children: a ?? /* @__PURE__ */ e(n, { "aria-hidden": !0 }) }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ e("p", { className: "font-medium", children: l }),
+          t && /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground max-w-sm", children: t })
+        ] }),
+        m && /* @__PURE__ */ e("div", { className: "mt-1", children: m })
+      ]
+    }
+  )
+);
+f.displayName = "EmptyState";
+export {
+  f as EmptyState
+};

package/components/field.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+/**
+ * Shared form-field primitives used by Input, Textarea, Select, NumberField, etc.
+ * `inputBaseClass` is the canonical text-control surface so every field looks identical.
+ */
+export declare const inputBaseClass: string;
+export declare const Label: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & {
+    required?: boolean;
+} & React.RefAttributes<HTMLLabelElement>>;
+export declare const FieldDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export interface FieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+}
+/** Vertical stack: label · control · (description|error). */
+export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;

package/components/field.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as a } from "../lib/cn.js";
+import { interactive as g } from "../lib/interactive.js";
+const h = a(
+  // Border WIDTH only — no border-color utility. ads-interactive owns the
+  // color (rest = --glow-border-rest below); a `border-input` utility here
+  // would out-cascade the hover/focus brand-black rules.
+  "flex w-full rounded-md border bg-elevated text-foreground",
+  "px-3 text-xs",
+  "placeholder:text-muted-foreground",
+  "outline-none",
+  "disabled:cursor-not-allowed disabled:opacity-50",
+  // Form controls keep a subtle stroke (the "~25%") for crisp definition;
+  // hover/focus snap the border to solid brand-black (no halo). The inner
+  // glow is a whisper of inset depth so the writing surface reads recessed —
+  // carried through every interactive state by the --glow-inset hook.
+  g({ on: "all", color: "brand", intensity: "medium", animate: !0 }),
+  "[--glow-border-rest:var(--input)]",
+  "[--glow-inset:var(--inner-glow-field)]"
+), s = d.forwardRef(({ className: t, children: e, required: r, ...l }, i) => /* @__PURE__ */ n(
+  "label",
+  {
+    ref: i,
+    className: a(
+      "flex items-center gap-1 text-xs font-medium text-foreground select-none",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-60",
+      t
+    ),
+    ...l,
+    children: [
+      e,
+      r && /* @__PURE__ */ o("span", { className: "text-danger", children: "*" })
+    ]
+  }
+));
+s.displayName = "Label";
+const c = d.forwardRef(({ className: t, ...e }, r) => /* @__PURE__ */ o(
+  "p",
+  {
+    ref: r,
+    className: a("text-xs text-muted-foreground", t),
+    ...e
+  }
+));
+c.displayName = "FieldDescription";
+const m = d.forwardRef(
+  ({ className: t, children: e, ...r }, l) => e ? /* @__PURE__ */ o(
+    "p",
+    {
+      ref: l,
+      className: a("text-xs font-medium text-danger", t),
+      ...r,
+      children: e
+    }
+  ) : null
+);
+m.displayName = "FieldError";
+const b = d.forwardRef(
+  ({ className: t, label: e, description: r, error: l, required: i, htmlFor: f, children: p, ...x }, u) => /* @__PURE__ */ n("div", { ref: u, className: a("flex flex-col gap-1.5", t), ...x, children: [
+    e && /* @__PURE__ */ o(s, { htmlFor: f, required: i, children: e }),
+    p,
+    l ? /* @__PURE__ */ o(m, { children: l }) : r ? /* @__PURE__ */ o(c, { children: r }) : null
+  ] })
+);
+b.displayName = "Field";
+export {
+  b as Field,
+  c as FieldDescription,
+  m as FieldError,
+  s as Label,
+  h as inputBaseClass
+};

package/components/index.d.ts

@@ -0,0 +1,56 @@
+export { cn } from '../lib/cn';
+export { interactive, type InteractiveProps } from '../lib/interactive';
+export { TooltipProvider } from './ui/tooltip';
+export * from './button';
+export * from './spinner';
+export * from './field';
+export * from './typography';
+export * from './link';
+export * from './divider';
+export * from './kbd';
+export * from './input';
+export * from './input-field';
+export * from './textarea';
+export * from './checkbox';
+export * from './radio';
+export * from './switch';
+export * from './number-field';
+export * from './select';
+export * from './autocomplete';
+export * from './slider';
+export * from './segmented';
+export * from './modal';
+export * from './drawer';
+export * from './popover';
+export * from './tooltip';
+export * from './dropdown';
+export * from './toast';
+export * from './answer';
+export * from './card';
+export * from './carousel';
+export * from './chart';
+export * from './connector-card';
+export * from './table';
+export * from './tabs';
+export * from './tree';
+export * from './accordion';
+export * from './avatar';
+export * from './badge';
+export * from './chip';
+export * from './timeline';
+export * from './alert';
+export * from './brand-loader';
+export * from './pixel-blast-svg';
+export * from './progress';
+export * from './progress-circle';
+export * from './skeleton';
+export * from './empty-state';
+export * from './navbar';
+export * from './breadcrumbs';
+export * from './pagination';
+export * from './sidebar';
+export * from './panel';
+export * from './collapsible';
+export * from './selection-action-bar';
+export * from './ai-elements';
+export * from './assistant-ui';