@actioneer/ads 0.1.0

package/components/panel.js

@@ -0,0 +1,71 @@
+"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(
+    "div",
+    {
+      ref: r,
+      className: n(
+        // 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",
+        e
+      ),
+      ...a
+    }
+  )
+);
+s.displayName = "Panel";
+const t = l.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+    "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",
+        e
+      ),
+      ...a
+    }
+  )
+);
+t.displayName = "PanelHeader";
+const d = l.forwardRef(({ className: e, ...a }, r) => /* @__PURE__ */ o(
+  "h2",
+  {
+    ref: r,
+    className: n("flex min-w-0 items-center gap-2 truncate text-xs font-semibold 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 = "PanelToolbar";
+const f = l.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ o("div", { ref: r, className: n("min-h-0 flex-1 overflow-auto p-4", e), ...a })
+);
+f.displayName = "PanelBody";
+const m = l.forwardRef(
+  ({ className: e, ...a }, r) => /* @__PURE__ */ o(
+    "div",
+    {
+      ref: r,
+      className: n("flex shrink-0 items-center gap-2 bg-surface/40 px-3 py-2", e),
+      ...a
+    }
+  )
+);
+m.displayName = "PanelFooter";
+export {
+  s as Panel,
+  f as PanelBody,
+  m as PanelFooter,
+  t as PanelHeader,
+  d as PanelTitle,
+  i as PanelToolbar
+};

package/components/pixel-blast-svg.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+type PixelBlastVariant = "square" | "circle" | "triangle" | "diamond" | "custom";
+export interface PixelBlastSVGProps {
+    variant?: PixelBlastVariant;
+    color?: string;
+    pixelSize?: number;
+    speed?: number;
+    patternScale?: number;
+    patternDensity?: number;
+    pixelSizeJitter?: number;
+    enableRipples?: boolean;
+    liquid?: boolean;
+    toneAmount?: number;
+    edgeFade?: number;
+    transparent?: boolean;
+    backgroundColor?: string;
+    paused?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const PixelBlastSVG: React.ForwardRefExoticComponent<PixelBlastSVGProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/pixel-blast-svg.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import * as c from "react";
+import { ditheringFragmentShader as g, getShaderColorFromString as M, ShaderFitOptions as N, DitheringTypes as L, DitheringShapes as m } from "@paper-design/shaders";
+import { ShaderMount as F } from "@paper-design/shaders-react";
+import { useReducedMotion as I } from "motion/react";
+import { cn as P } from "../lib/cn.js";
+const z = {
+  alpha: !0,
+  antialias: !1,
+  depth: !1,
+  powerPreference: "low-power",
+  preserveDrawingBuffer: !1
+}, O = 1e6, B = `uniform float u_type;
+uniform float u_patternDensity;
+uniform float u_pixelSizeJitter;`, k = "  float res = step(.5, shape + dithering);", b = `  vec2 triangleUV = fract(pxSizeUV);
+  vec2 triangleCell = floor(pxSizeUV);
+  float triangleFlip = mod(triangleCell.x + triangleCell.y, 2.0);
+  triangleUV.x = mix(triangleUV.x, 1.0 - triangleUV.x, triangleFlip);
+
+  float triangleJitter = mix(
+    1.0 - 0.18 * u_pixelSizeJitter,
+    1.0 + 0.22 * u_pixelSizeJitter,
+    hash21(triangleCell)
+  );
+  triangleUV = (triangleUV - 0.5) / triangleJitter + 0.5;
+
+  float triangleDiagonal = triangleUV.x + triangleUV.y;
+  float triangleMask = 1.0 - step(1.0, triangleDiagonal);
+  float densityThreshold = 0.5 - (u_patternDensity - 1.0) * 0.12;
+  float res = step(densityThreshold, shape + dithering) * triangleMask;`;
+if (!g.includes("uniform float u_type;") || !g.includes(k))
+  throw new Error("The Paper dithering shader no longer exposes the expected cell output.");
+const G = g.replace("uniform float u_type;", B).replace(k, b), d = (e) => Math.max(0, Math.min(1, e)), J = "#0a0a0b", W = "#ffffff";
+function X(e, t) {
+  if (typeof document > "u") return t;
+  const r = (o, i = 0) => {
+    if (i > 4) return o;
+    const n = o.trim(), a = n.match(/^var\((--[\w-]+)(?:,\s*(.+))?\)$/);
+    if (!a) return n;
+    const s = getComputedStyle(document.documentElement).getPropertyValue(a[1]).trim();
+    return s ? r(s, i + 1) : a[2] ? r(a[2], i + 1) : t;
+  };
+  return r(e) || t;
+}
+function E(e, t) {
+  const [r, o] = c.useState(
+    () => e.startsWith("var(") ? t : e
+  );
+  return c.useEffect(() => {
+    o(X(e, t));
+  }, [t, e]), r;
+}
+const $ = c.forwardRef(
+  ({
+    variant: e = "custom",
+    color: t = "var(--color-ink-950)",
+    pixelSize: r = 7,
+    speed: o = 3,
+    patternScale: i = 3,
+    patternDensity: n = 1.8,
+    pixelSizeJitter: a = 0.5,
+    enableRipples: s = !1,
+    liquid: p = !1,
+    toneAmount: h = 0,
+    edgeFade: R = 0.25,
+    transparent: f = !0,
+    backgroundColor: _ = "var(--color-background)",
+    paused: x = !1,
+    className: V,
+    style: D
+  }, w) => {
+    const S = I(), U = E(t, J), C = E(
+      _,
+      W
+    ), l = d(R) * 100, T = `linear-gradient(to right, transparent 0%, black ${l}%, black ${100 - l}%, transparent 100%)`, v = `linear-gradient(to bottom, transparent 0%, black ${l}%, black ${100 - l}%, transparent 100%)`, A = c.useMemo(() => {
+      const y = M(U);
+      return y[3] *= 1 - d(h), {
+        u_colorBack: f ? [0, 0, 0, 0] : M(C),
+        u_colorFront: y,
+        u_shape: s ? m.ripple : p ? m.warp : m.simplex,
+        u_type: L["4x4"],
+        u_pxSize: Math.max(1, r),
+        u_patternDensity: Math.max(0.1, n),
+        u_pixelSizeJitter: d(a),
+        u_fit: N.none,
+        u_scale: Math.max(0.01, i),
+        u_rotation: 0,
+        u_offsetX: 0,
+        u_offsetY: 0,
+        u_originX: 0.5,
+        u_originY: 0.5,
+        u_worldWidth: 0,
+        u_worldHeight: 0
+      };
+    }, [
+      s,
+      p,
+      n,
+      i,
+      r,
+      a,
+      C,
+      U,
+      h,
+      f
+    ]);
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: w,
+        "aria-hidden": !0,
+        "data-shader-paused": x || S ? "true" : "false",
+        className: P("pixel-blast-svg", V),
+        style: {
+          ...D,
+          background: f ? "transparent" : _
+        },
+        children: /* @__PURE__ */ u(
+          "div",
+          {
+            className: "size-full",
+            style: { WebkitMaskImage: T, maskImage: T },
+            children: /* @__PURE__ */ u(
+              "div",
+              {
+                className: "size-full",
+                style: { WebkitMaskImage: v, maskImage: v },
+                children: /* @__PURE__ */ u(
+                  F,
+                  {
+                    className: "size-full",
+                    width: "100%",
+                    height: "100%",
+                    fragmentShader: G,
+                    uniforms: A,
+                    speed: x || S ? 0 : o,
+                    minPixelRatio: 1,
+                    maxPixelCount: O,
+                    webGlContextAttributes: z
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+$.displayName = "PixelBlastSVG";
+export {
+  $ as PixelBlastSVG
+};

package/components/popover.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface PopoverProps {
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+}
+export declare function Popover({ children, defaultOpen }: PopoverProps): React.JSX.Element;
+export interface PopoverTriggerProps {
+    children: React.ReactElement;
+}
+export declare function PopoverTrigger({ children }: PopoverTriggerProps): React.ReactElement<{
+    ref?: React.Ref<HTMLElement>;
+    onClick?: (event: React.MouseEvent) => void;
+    "aria-expanded"?: boolean;
+    "aria-haspopup"?: boolean;
+}, string | React.JSXElementConstructor<any>>;
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+}
+export declare function PopoverContent({ className, align, sideOffset, children, ...props }: PopoverContentProps): React.ReactPortal;

package/components/popover.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as g } from "react/jsx-runtime";
+import * as n from "react";
+import { createPortal as P } from "react-dom";
+import { MotionConfig as b, AnimatePresence as C, motion as y } from "motion/react";
+import { cn as L } from "../lib/cn.js";
+import { floatVariants as R } from "../lib/motion.js";
+const k = {
+  start: "top left",
+  center: "top",
+  end: "top right"
+}, h = n.createContext(null);
+function x(r) {
+  const e = n.useContext(h);
+  if (!e)
+    throw new Error(`${r} must be used within a <Popover>.`);
+  return e;
+}
+function M({ children: r, defaultOpen: e = !1 }) {
+  const [d, l] = n.useState(e), u = n.useRef(null);
+  return /* @__PURE__ */ g(h.Provider, { value: { open: d, setOpen: l, triggerRef: u }, children: r });
+}
+function S({ children: r }) {
+  const { open: e, setOpen: d, triggerRef: l } = x("PopoverTrigger"), u = r;
+  return n.cloneElement(u, {
+    ref: l,
+    "aria-expanded": e,
+    "aria-haspopup": !0,
+    onClick: (i) => {
+      var f, s;
+      (s = (f = u.props).onClick) == null || s.call(f, i), d(!e);
+    }
+  });
+}
+function T({
+  className: r,
+  align: e = "start",
+  sideOffset: d = 8,
+  children: l,
+  ...u
+}) {
+  const { open: i, setOpen: f, triggerRef: s } = x("PopoverContent"), w = n.useRef(null), [c, E] = n.useState(null);
+  return n.useLayoutEffect(() => {
+    if (!i) return;
+    const p = s.current;
+    if (!p) return;
+    const o = () => {
+      var v;
+      const t = p.getBoundingClientRect(), m = ((v = w.current) == null ? void 0 : v.offsetWidth) ?? 0;
+      let a = t.left;
+      e === "center" ? a = t.left + t.width / 2 - m / 2 : e === "end" && (a = t.right - m), E({ top: t.bottom + d, left: a });
+    };
+    return o(), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    };
+  }, [i, e, d, s]), n.useEffect(() => {
+    if (!i) return;
+    const p = (t) => {
+      t.key === "Escape" && f(!1);
+    }, o = (t) => {
+      var a, v;
+      const m = t.target;
+      (a = w.current) != null && a.contains(m) || (v = s.current) != null && v.contains(m) || f(!1);
+    };
+    return document.addEventListener("keydown", p), document.addEventListener("pointerdown", o), () => {
+      document.removeEventListener("keydown", p), document.removeEventListener("pointerdown", o);
+    };
+  }, [i, f, s]), P(
+    /* @__PURE__ */ g(b, { reducedMotion: "user", children: /* @__PURE__ */ g(C, { children: i && /* @__PURE__ */ g(
+      y.div,
+      {
+        ref: w,
+        role: "dialog",
+        variants: R,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        style: {
+          position: "fixed",
+          top: (c == null ? void 0 : c.top) ?? 0,
+          left: (c == null ? void 0 : c.left) ?? 0,
+          visibility: c ? "visible" : "hidden",
+          transformOrigin: k[e]
+        },
+        className: L(
+          "z-50 min-w-44 rounded-lg border border-border bg-elevated p-3",
+          "text-xs text-foreground shadow-elevation",
+          r
+        ),
+        ...u,
+        children: l
+      }
+    ) }) }),
+    document.body
+  );
+}
+export {
+  M as Popover,
+  T as PopoverContent,
+  S as PopoverTrigger
+};

package/components/progress-circle.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface ProgressCircleProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: number;
+    max?: number;
+    /** Diameter in pixels. */
+    size?: number;
+    strokeWidth?: number;
+    isIndeterminate?: boolean;
+    label?: string;
+}
+export declare const ProgressCircle: React.ForwardRefExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLDivElement>>;

package/components/progress-circle.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import * as x from "react";
+import { cn as l } from "../lib/cn.js";
+const w = x.forwardRef(
+  ({
+    className: f,
+    value: m = 0,
+    max: a = 100,
+    size: r = 40,
+    strokeWidth: o = 4,
+    isIndeterminate: n = !1,
+    label: d,
+    ...u
+  }, h) => {
+    const i = Math.min(Math.max(m, 0), a), p = a > 0 ? i / a : 0, t = (r - o) / 2, s = 2 * Math.PI * t, v = n ? s * 0.75 : s * (1 - p), e = r / 2;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: h,
+        role: "progressbar",
+        "aria-label": d,
+        "aria-valuemin": 0,
+        "aria-valuemax": a,
+        "aria-valuenow": n ? void 0 : i,
+        className: l("inline-flex", f),
+        style: { width: r, height: r },
+        ...u,
+        children: /* @__PURE__ */ g(
+          "svg",
+          {
+            width: r,
+            height: r,
+            viewBox: `0 0 ${r} ${r}`,
+            className: l(
+              "-rotate-90",
+              n && "animate-[ads-spin_var(--duration-spin)_linear_infinite]"
+            ),
+            children: [
+              /* @__PURE__ */ c(
+                "circle",
+                {
+                  className: "stroke-muted",
+                  fill: "none",
+                  cx: e,
+                  cy: e,
+                  r: t,
+                  strokeWidth: o
+                }
+              ),
+              /* @__PURE__ */ c(
+                "circle",
+                {
+                  className: "stroke-brand transition-[stroke-dashoffset] duration-(--duration-normal) ease-out motion-reduce:transition-none",
+                  fill: "none",
+                  cx: e,
+                  cy: e,
+                  r: t,
+                  strokeWidth: o,
+                  strokeLinecap: "round",
+                  strokeDasharray: s,
+                  strokeDashoffset: v
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+w.displayName = "ProgressCircle";
+export {
+  w as ProgressCircle
+};

package/components/progress.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+declare const trackSizes: {
+    readonly sm: "h-1.5";
+    readonly md: "h-2";
+};
+declare const fillColors: {
+    readonly primary: "bg-brand";
+    readonly success: "bg-success";
+    readonly warning: "bg-warning";
+    readonly danger: "bg-danger";
+    readonly info: "bg-info";
+};
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
+    value?: number;
+    max?: number;
+    isIndeterminate?: boolean;
+    size?: keyof typeof trackSizes;
+    color?: keyof typeof fillColors;
+    label?: string;
+}
+export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/progress.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import * as g from "react";
+import { cn as a } from "../lib/cn.js";
+const p = {
+  sm: "h-1.5",
+  md: "h-2"
+}, s = {
+  primary: "bg-brand",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info"
+}, b = g.forwardRef(
+  ({
+    className: l,
+    value: t = 0,
+    max: e = 100,
+    isIndeterminate: n = !1,
+    size: d = "md",
+    color: i = "primary",
+    label: m,
+    ...u
+  }, c) => {
+    const o = Math.min(Math.max(t, 0), e), f = e > 0 ? o / e * 100 : 0;
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: c,
+        role: "progressbar",
+        "aria-label": m,
+        "aria-valuemin": 0,
+        "aria-valuemax": e,
+        "aria-valuenow": n ? void 0 : o,
+        className: a(
+          "relative w-full overflow-hidden rounded-full bg-muted",
+          p[d],
+          l
+        ),
+        ...u,
+        children: n ? /* @__PURE__ */ r(
+          "div",
+          {
+            className: a(
+              "absolute inset-y-0 left-0 w-2/5 rounded-full animate-[ads-indeterminate_var(--duration-pulse)_linear_infinite] motion-reduce:animate-none",
+              s[i]
+            )
+          }
+        ) : /* @__PURE__ */ r(
+          "div",
+          {
+            className: a(
+              "h-full w-full origin-left rounded-full transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
+              s[i]
+            ),
+            style: { transform: `scaleX(${f / 100})` }
+          }
+        )
+      }
+    );
+  }
+);
+b.displayName = "Progress";
+export {
+  b as Progress
+};

package/components/radio.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    name: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+    orientation?: "vertical" | "horizontal";
+    disabled?: boolean;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
+    value: string;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/components/radio.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as p } from "../lib/cn.js";
+import { Field as x } from "./field.js";
+const f = i.createContext(null), y = i.forwardRef(
+  ({
+    className: l,
+    name: a,
+    value: o,
+    onChange: n,
+    label: c,
+    description: u,
+    error: e,
+    orientation: s = "vertical",
+    disabled: t,
+    children: d,
+    ...m
+  }, g) => {
+    const h = i.useMemo(
+      () => ({ name: a, value: o, onValueChange: n, disabled: t }),
+      [a, o, n, t]
+    );
+    return /* @__PURE__ */ r(
+      x,
+      {
+        ref: g,
+        label: c,
+        description: u,
+        error: e,
+        role: "radiogroup",
+        className: l,
+        ...m,
+        children: /* @__PURE__ */ r(f.Provider, { value: h, children: /* @__PURE__ */ r(
+          "div",
+          {
+            className: p(
+              "flex gap-3",
+              s === "vertical" ? "flex-col" : "flex-row flex-wrap"
+            ),
+            children: d
+          }
+        ) })
+      }
+    );
+  }
+);
+y.displayName = "RadioGroup";
+const R = i.forwardRef(
+  ({ className: l, children: a, value: o, disabled: n, ...c }, u) => {
+    const e = i.useContext(f), s = n || (e == null ? void 0 : e.disabled);
+    return /* @__PURE__ */ b(
+      "label",
+      {
+        className: p(
+          "group inline-flex items-center gap-2 text-xs text-foreground select-none",
+          s ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          l
+        ),
+        children: [
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: u,
+              type: "radio",
+              name: e == null ? void 0 : e.name,
+              value: o,
+              checked: e ? e.value === o : void 0,
+              disabled: s,
+              onChange: (t) => {
+                var d;
+                t.target.checked && ((d = e == null ? void 0 : e.onValueChange) == null || d.call(e, o));
+              },
+              className: "peer sr-only",
+              ...c
+            }
+          ),
+          /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: p(
+                "flex size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-elevated",
+                "transition-[border-color,box-shadow] duration-(--duration-fast) ease-out",
+                "peer-checked:border-brand",
+                "peer-focus-visible:ring-3 peer-focus-visible:ring-ring"
+              ),
+              children: /* @__PURE__ */ r("span", { className: "size-2 scale-90 rounded-full bg-brand opacity-0 transition-[opacity,transform] duration-(--duration-fast) ease-out group-has-[:checked]:scale-100 group-has-[:checked]:opacity-100 motion-reduce:transition-none" })
+            }
+          ),
+          a && /* @__PURE__ */ r("span", { children: a })
+        ]
+      }
+    );
+  }
+);
+R.displayName = "Radio";
+export {
+  R as Radio,
+  y as RadioGroup
+};

package/components/segmented.d.ts

@@ -0,0 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const segmentedListVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SegmentedOption {
+    label: string;
+    value: string;
+}
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "role">, VariantProps<typeof segmentedListVariants> {
+    options: SegmentedOption[];
+    value: string;
+    onChange: (value: string) => void;
+}
+export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+export {};