@actioneer/ads 0.1.0

package/components/sidebar.js

@@ -0,0 +1,375 @@
+"use client";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import * as i from "react";
+import { PanelLeft as R } from "../lib/icons.js";
+import { cn as n } from "../lib/cn.js";
+import { Tooltip as z } from "./tooltip.js";
+import { Avatar as _ } from "./avatar.js";
+const k = i.createContext({
+  collapsed: !1,
+  toggle: () => {
+  },
+  setCollapsed: () => {
+  }
+});
+function j() {
+  return i.useContext(k);
+}
+const H = i.forwardRef(
+  ({
+    className: a,
+    collapsed: e,
+    defaultCollapsed: s = !1,
+    onCollapsedChange: t,
+    keyboardToggle: o = !0,
+    ...d
+  }, p) => {
+    const [x, h] = i.useState(s), b = e !== void 0, l = b ? e : x, g = i.useCallback(
+      (u) => {
+        b || h(u), t == null || t(u);
+      },
+      [b, t]
+    ), m = i.useCallback(
+      () => g(!l),
+      [l, g]
+    );
+    i.useEffect(() => {
+      if (!o) return;
+      const u = (f) => {
+        (f.metaKey || f.ctrlKey) && f.key.toLowerCase() === "b" && (f.preventDefault(), m());
+      };
+      return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+    }, [o, m]);
+    const v = i.useMemo(
+      () => ({ collapsed: l, toggle: m, setCollapsed: g }),
+      [l, m, g]
+    );
+    return /* @__PURE__ */ r(k.Provider, { value: v, children: /* @__PURE__ */ r(
+      "aside",
+      {
+        ref: p,
+        "data-collapsed": l ? "true" : "false",
+        className: n(
+          "group/sidebar flex h-full shrink-0 flex-col bg-transparent",
+          l ? "w-(--sidebar-width-sm)" : "w-(--sidebar-width)",
+          a
+        ),
+        ...d
+      }
+    ) });
+  }
+);
+H.displayName = "Sidebar";
+function S({ children: a }) {
+  return /* @__PURE__ */ r("kbd", { className: "inline-flex h-4 min-w-4 items-center justify-center rounded bg-background/20 px-1 text-xs leading-none", children: a });
+}
+function E({
+  className: a,
+  onClick: e,
+  ...s
+}) {
+  const { collapsed: t, toggle: o } = j();
+  return /* @__PURE__ */ r(
+    z,
+    {
+      side: "right",
+      content: /* @__PURE__ */ c("span", { className: "flex items-center gap-1.5", children: [
+        t ? "Expand" : "Collapse",
+        /* @__PURE__ */ c("span", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ r(S, { children: "⌘" }),
+          /* @__PURE__ */ r(S, { children: "B" })
+        ] })
+      ] }),
+      children: /* @__PURE__ */ r(
+        "button",
+        {
+          type: "button",
+          "aria-label": t ? "Expand sidebar" : "Collapse sidebar",
+          "aria-pressed": t,
+          onClick: (d) => {
+            e == null || e(d), o();
+          },
+          className: n(
+            "inline-flex size-(--sidebar-item) shrink-0 items-center justify-center rounded-md border border-transparent text-muted-foreground",
+            "transition-colors hover:border-border hover:bg-elevated hover:text-foreground",
+            "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+            "[&_svg]:size-4.5",
+            a
+          ),
+          ...s,
+          children: /* @__PURE__ */ r(R, {})
+        }
+      )
+    }
+  );
+}
+function X({
+  logo: a,
+  href: e,
+  label: s = "Home",
+  showTrigger: t = !0,
+  className: o,
+  ...d
+}) {
+  const p = n(
+    // 20px mark centered in a 32px square — the same box as every other rail icon.
+    // group/brand lets a BrandMark logo play its blip loop on hover.
+    "group/brand flex size-(--sidebar-item) items-center justify-center",
+    "[&_img]:size-(--sidebar-logo) [&_svg]:size-(--sidebar-logo)",
+    t && "group-hover/sidebar:hidden"
+  );
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: n(
+        "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
+        "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
+        o
+      ),
+      ...d,
+      children: [
+        e ? /* @__PURE__ */ r("a", { href: e, "aria-label": s, className: p, children: a }) : /* @__PURE__ */ r("span", { className: p, children: a }),
+        t && /* @__PURE__ */ r("div", { className: "hidden group-hover/sidebar:flex", children: /* @__PURE__ */ r(E, {}) })
+      ]
+    }
+  );
+}
+const I = i.forwardRef(
+  ({ className: a, ...e }, s) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      className: n(
+        "flex h-(--sidebar-header) shrink-0 items-center justify-between gap-2 px-3",
+        "group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-2",
+        a
+      ),
+      ...e
+    }
+  )
+);
+I.displayName = "SidebarHeader";
+const L = i.forwardRef(
+  ({ className: a, ...e }, s) => /* @__PURE__ */ r("nav", { ref: s, className: n("min-h-0 flex-1 space-y-5 overflow-y-auto p-3", a), ...e })
+);
+L.displayName = "SidebarNav";
+const A = i.forwardRef(
+  ({ className: a, label: e, children: s, ...t }, o) => /* @__PURE__ */ c("div", { ref: o, className: a, ...t, children: [
+    e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground group-data-[collapsed=true]/sidebar:hidden", children: e }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s })
+  ] })
+);
+A.displayName = "SidebarSection";
+const K = i.forwardRef(
+  ({ className: a, icon: e, isActive: s, endContent: t, children: o, title: d, ...p }, x) => /* @__PURE__ */ c(
+    "a",
+    {
+      ref: x,
+      "aria-current": s ? "page" : void 0,
+      title: d ?? (typeof o == "string" ? o : void 0),
+      className: n(
+        "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-xs transition-colors",
+        "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+        "[&_svg]:size-4 [&_svg]:shrink-0",
+        // Collapsed: a centered square (--sidebar-item) so every rail item lines up.
+        "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
+        s ? "bg-fill font-medium text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground",
+        a
+      ),
+      ...p,
+      children: [
+        e,
+        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate group-data-[collapsed=true]/sidebar:hidden", children: o }),
+        t && /* @__PURE__ */ r("span", { className: "shrink-0 group-data-[collapsed=true]/sidebar:hidden", children: t })
+      ]
+    }
+  )
+);
+K.displayName = "SidebarItem";
+const M = i.forwardRef(
+  ({ className: a, ...e }, s) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: s,
+      className: n("shrink-0 p-3 group-data-[collapsed=true]/sidebar:px-2", a),
+      ...e
+    }
+  )
+);
+M.displayName = "SidebarFooter";
+const q = i.forwardRef(
+  ({ className: a, icon: e, children: s, ...t }, o) => /* @__PURE__ */ r("div", { className: "px-3 pb-1 group-data-[collapsed=true]/sidebar:px-2", children: /* @__PURE__ */ c(
+    "button",
+    {
+      ref: o,
+      type: "button",
+      className: n(
+        "flex h-10 w-full items-center justify-start gap-2 rounded-md bg-elevated px-3",
+        "text-xs font-medium text-foreground",
+        // Same hover feedback as ConnectorCard: raised at rest, lifts on
+        // hover, settles back on press.
+        "shadow-elevation",
+        "transition-[transform,box-shadow] duration-(--duration-fast) ease-out motion-reduce:transition-none",
+        "hover:-translate-y-0.5 active:translate-y-0",
+        "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+        "[&_svg]:size-4 [&_svg]:shrink-0",
+        "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:px-0",
+        a
+      ),
+      ...t,
+      children: [
+        e,
+        /* @__PURE__ */ r("span", { className: "truncate group-data-[collapsed=true]/sidebar:hidden", children: s })
+      ]
+    }
+  ) })
+);
+q.displayName = "SidebarAction";
+const B = i.forwardRef(
+  ({ className: a, label: e, children: s, ...t }, o) => /* @__PURE__ */ c(
+    "div",
+    {
+      ref: o,
+      className: n("group-data-[collapsed=true]/sidebar:hidden", a),
+      ...t,
+      children: [
+        e && /* @__PURE__ */ r("div", { className: "mb-1.5 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: e }),
+        /* @__PURE__ */ r("div", { className: "flex flex-col gap-0.5", children: s })
+      ]
+    }
+  )
+);
+B.displayName = "SidebarHistory";
+const D = i.forwardRef(({ className: a, children: e, title: s, action: t, isActive: o, icon: d, ...p }, x) => {
+  const h = i.useRef(null), b = i.useRef(null), [l, g] = i.useState(0);
+  i.useLayoutEffect(() => {
+    const u = h.current, f = b.current;
+    if (!u || !f) return;
+    const N = () => {
+      const w = f.scrollWidth - u.clientWidth;
+      g(w > 0 ? w + (t ? 32 : 0) : 0);
+    };
+    N();
+    const y = new ResizeObserver(N);
+    return y.observe(u), y.observe(f), () => y.disconnect();
+  }, [e, t]);
+  const m = l > 0, v = Math.max(500, Math.round(l * 18));
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: n(
+        "group/hist relative flex items-center rounded-md transition-colors",
+        o ? "bg-fill/60 text-foreground" : "text-muted-foreground hover:bg-fill/60 hover:text-foreground"
+      ),
+      children: [
+        d && /* @__PURE__ */ r(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: "pointer-events-none absolute inset-y-0 start-3 flex items-center [&_svg]:size-4 [&_svg]:shrink-0",
+            children: d
+          }
+        ),
+        /* @__PURE__ */ r(
+          "a",
+          {
+            ref: x,
+            title: s ?? (typeof e == "string" ? e : void 0),
+            className: n(
+              // Left pad matches a SidebarItem's text column (px-3 + icon size-4 +
+              // gap-2.5 = 2.375rem) so history titles line up under the nav labels.
+              "block min-w-0 flex-1 rounded-md py-1.5 pr-3 ps-(--sidebar-text-indent) text-xs",
+              "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+              a
+            ),
+            ...p,
+            children: /* @__PURE__ */ r(
+              "span",
+              {
+                ref: h,
+                className: n(
+                  "block overflow-hidden",
+                  // Rest: fade the right edge (no ellipsis). Hover: the title scrolls,
+                  // so fade the LEFT edge where it exits; the action backdrop (or the
+                  // string's own end) handles the right.
+                  m && "[mask-image:linear-gradient(to_right,#000_calc(100%-1.5rem),transparent)]",
+                  m && "group-hover/hist:[mask-image:linear-gradient(to_right,transparent,#000_1.25rem,#000_100%)]"
+                ),
+                children: /* @__PURE__ */ r(
+                  "span",
+                  {
+                    ref: b,
+                    className: n(
+                      "block w-max whitespace-nowrap transition-transform ease-linear",
+                      m && "group-hover/hist:[transform:translateX(var(--mq-x))]",
+                      "motion-reduce:transition-none motion-reduce:group-hover/hist:[transform:none]"
+                    ),
+                    style: {
+                      "--mq-x": `-${l}px`,
+                      transitionDuration: `${v}ms`
+                    },
+                    children: e
+                  }
+                )
+              }
+            )
+          }
+        ),
+        t && /* @__PURE__ */ r(
+          "span",
+          {
+            className: n(
+              // Rounded end matches the row's radius so the backdrop doesn't
+              // square off the highlight's right corners.
+              "absolute inset-y-0 right-0 flex items-center rounded-e-md pl-8 pr-1",
+              "bg-gradient-to-l from-fill from-45% to-transparent",
+              "opacity-0 transition-opacity duration-(--duration-fast) group-hover/hist:opacity-100",
+              "pointer-events-none group-hover/hist:pointer-events-auto",
+              "focus-within:pointer-events-auto focus-within:opacity-100"
+            ),
+            children: t
+          }
+        )
+      ]
+    }
+  );
+});
+D.displayName = "SidebarHistoryItem";
+const F = i.forwardRef(
+  ({ className: a, name: e, role: s, src: t, ...o }, d) => /* @__PURE__ */ c(
+    "a",
+    {
+      ref: d,
+      className: n(
+        "flex items-center gap-2.5 rounded-md p-2 transition-colors hover:bg-fill/60",
+        "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+        "group-data-[collapsed=true]/sidebar:mx-auto group-data-[collapsed=true]/sidebar:size-(--sidebar-item) group-data-[collapsed=true]/sidebar:justify-center group-data-[collapsed=true]/sidebar:p-0",
+        a
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ r(_, { size: "sm", name: e, src: t }),
+        /* @__PURE__ */ c("div", { className: "min-w-0 leading-tight group-data-[collapsed=true]/sidebar:hidden", children: [
+          /* @__PURE__ */ r("div", { className: "truncate text-xs font-medium text-foreground", children: e }),
+          s && /* @__PURE__ */ r("div", { className: "truncate text-xs text-tertiary", children: s })
+        ] })
+      ]
+    }
+  )
+);
+F.displayName = "SidebarAccount";
+export {
+  H as Sidebar,
+  F as SidebarAccount,
+  q as SidebarAction,
+  X as SidebarBrand,
+  M as SidebarFooter,
+  I as SidebarHeader,
+  B as SidebarHistory,
+  D as SidebarHistoryItem,
+  K as SidebarItem,
+  L as SidebarNav,
+  A as SidebarSection,
+  E as SidebarTrigger,
+  j as useSidebar
+};

package/components/skeleton.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Render as a circle (equal width/height, fully rounded). */
+    circle?: boolean;
+}
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/components/skeleton.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as f } from "../lib/cn.js";
+const i = n.forwardRef(
+  ({ className: e, circle: r = !1, ...t }, a) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: a,
+      "aria-hidden": !0,
+      className: f(
+        "relative overflow-hidden bg-muted",
+        r ? "rounded-full" : "rounded-md",
+        "after:absolute after:inset-0 after:-translate-x-full",
+        "after:bg-gradient-to-r after:from-transparent after:via-foreground/10 after:to-transparent",
+        "after:animate-[ads-shimmer_var(--duration-pulse)_infinite]",
+        e
+      ),
+      ...t
+    }
+  )
+);
+i.displayName = "Skeleton";
+export {
+  i as Skeleton
+};

package/components/slider.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "min" | "max" | "step"> {
+    value: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;

package/components/slider.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import * as v from "react";
+import { cn as s } from "../lib/cn.js";
+const m = v.forwardRef(
+  ({ value: d, onChange: t, min: e = 0, max: r = 100, step: u = 1, disabled: a, className: n, ...c }, f) => {
+    const i = Math.min(Math.max(d, e), r), o = r === e ? 0 : (i - e) / (r - e) * 100;
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        className: s(
+          "relative flex h-5 w-full items-center",
+          a && "opacity-50",
+          n
+        ),
+        children: [
+          /* @__PURE__ */ l(
+            "input",
+            {
+              ref: f,
+              type: "range",
+              min: e,
+              max: r,
+              step: u,
+              value: i,
+              disabled: a,
+              onChange: (p) => t == null ? void 0 : t(Number(p.target.value)),
+              className: s(
+                "peer absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0",
+                "disabled:cursor-not-allowed"
+              ),
+              ...c
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "h-1.5 w-full rounded-full bg-input", children: /* @__PURE__ */ l(
+            "div",
+            {
+              className: "h-full rounded-full bg-brand",
+              style: { width: `${o}%` }
+            }
+          ) }),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: s(
+                "pointer-events-none absolute size-4 -translate-x-1/2 rounded-full",
+                "border-2 border-background bg-brand shadow-elevation transition-shadow",
+                "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
+              ),
+              style: { left: `${o}%` },
+              "aria-hidden": !0
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+m.displayName = "Slider";
+export {
+  m as Slider
+};

package/components/spinner.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: "current" | "primary" | "muted" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SpinnerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof spinnerVariants> {
+    label?: string;
+}
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/spinner.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import * as d from "react";
+import { cva as l } from "class-variance-authority";
+import { cn as m } from "../lib/cn.js";
+const r = "M12 2.5 C5 2.5 2.5 5 2.5 12 C2.5 19 5 21.5 12 21.5 C19 21.5 21.5 19 21.5 12 C21.5 5 19 2.5 12 2.5 Z", u = l("inline-block shrink-0", {
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8"
+    },
+    color: {
+      current: "text-current",
+      primary: "text-brand",
+      muted: "text-muted-foreground"
+    }
+  },
+  defaultVariants: { size: "md", color: "current" }
+}), p = d.forwardRef(
+  ({ className: i, size: n, color: a, label: t, ...s }, o) => /* @__PURE__ */ e(
+    "div",
+    {
+      ref: o,
+      role: "status",
+      "aria-label": t ?? "Loading",
+      className: m(u({ size: n, color: a }), i),
+      ...s,
+      children: /* @__PURE__ */ c("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": !0, className: "size-full", children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: r,
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            className: "opacity-15"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "g",
+          {
+            className: "origin-center animate-[ads-spin_var(--duration-spin)_linear_infinite] motion-reduce:animate-none",
+            children: /* @__PURE__ */ e(
+              "path",
+              {
+                d: r,
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                className: "animate-[ads-spin-head_var(--duration-spin)_var(--ease-in-out)_infinite] motion-reduce:animate-none"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  )
+);
+p.displayName = "Spinner";
+export {
+  p as Spinner
+};

package/components/switch.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: "sm" | "md";
+}
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;

package/components/switch.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as s } from "../lib/cn.js";
+const m = {
+  sm: { track: "h-5 w-9", knob: "size-4", on: "translate-x-4", off: "translate-x-0.5" },
+  md: { track: "h-6 w-11", knob: "size-5", on: "translate-x-5", off: "translate-x-0.5" }
+}, b = d.forwardRef(
+  ({ className: i, checked: t = !1, onCheckedChange: n, size: l = "md", disabled: e, children: a, ...u }, f) => {
+    const r = m[l];
+    return /* @__PURE__ */ c(
+      "label",
+      {
+        className: s(
+          "inline-flex items-center gap-2 text-xs text-foreground select-none",
+          e ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+        ),
+        children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              ref: f,
+              type: "button",
+              role: "switch",
+              "aria-checked": t,
+              disabled: e,
+              onClick: () => n == null ? void 0 : n(!t),
+              className: s(
+                "relative inline-flex shrink-0 items-center rounded-full border border-transparent",
+                "transition-colors duration-(--duration-fast)",
+                "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+                "disabled:cursor-not-allowed",
+                t ? "bg-brand" : "bg-input",
+                r.track,
+                i
+              ),
+              ...u,
+              children: /* @__PURE__ */ o(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: s(
+                    "inline-block rounded-full bg-elevated shadow-elevation",
+                    "transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    r.knob,
+                    t ? r.on : r.off
+                  )
+                }
+              )
+            }
+          ),
+          a && /* @__PURE__ */ o("span", { children: a })
+        ]
+      }
+    );
+  }
+);
+b.displayName = "Switch";
+export {
+  b as Switch
+};