@actioneer/ads 0.1.0

package/components/carousel.js

@@ -0,0 +1,351 @@
+"use client";
+import { jsx as C, jsxs as V } from "react/jsx-runtime";
+import * as t from "react";
+import { cva as W } from "class-variance-authority";
+import { Button as D } from "./button.js";
+import { ChevronLeft as H, ChevronRight as X } from "../lib/icons.js";
+import { cn as S } from "../lib/cn.js";
+const q = t.createContext(null);
+function k(l) {
+  const i = t.useContext(q);
+  if (!i)
+    throw new Error(`<${l}> must be used within <Carousel>`);
+  return i;
+}
+const F = t.createContext(null);
+function L(l, i, d) {
+  return i <= 0 ? 0 : d ? (l % i + i) % i : Math.min(Math.max(l, 0), i - 1);
+}
+function _(l) {
+  return l.detail === 0;
+}
+const B = W(
+  "relative w-full rounded-sm outline-none focus-visible:ring-3 focus-visible:ring-ring"
+), G = t.forwardRef(
+  ({
+    className: l,
+    index: i,
+    defaultIndex: d = 0,
+    onIndexChange: f,
+    loop: o = !0,
+    children: b,
+    role: p,
+    tabIndex: m,
+    onKeyDown: r,
+    "aria-label": x,
+    "aria-roledescription": I,
+    ...N
+  }, u) => {
+    const a = i !== void 0, [n, y] = t.useState(d), [h, v] = t.useState(0), [P, R] = t.useState(!0), E = t.useId(), g = L(a ? i : n, h, !1), e = t.useCallback((s) => {
+      v(s), y(
+        (M) => L(M, s, !1)
+      );
+    }, []), c = t.useCallback(
+      (s, M = "animated") => {
+        const $ = L(s, h, o);
+        R(M === "animated"), a || y($), $ !== g && (f == null || f($));
+      },
+      [h, g, a, o, f]
+    ), A = t.useCallback(
+      (s) => c(g - 1, s),
+      [c, g]
+    ), w = t.useCallback(
+      (s) => c(g + 1, s),
+      [c, g]
+    );
+    t.useEffect(() => {
+      if (P) return;
+      const s = requestAnimationFrame(() => R(!0));
+      return () => cancelAnimationFrame(s);
+    }, [g, P]);
+    const T = t.useMemo(
+      () => ({
+        index: g,
+        count: h,
+        loop: o,
+        contentId: E,
+        isAnimated: P,
+        setCount: e,
+        goTo: c,
+        goPrevious: A,
+        goNext: w
+      }),
+      [
+        g,
+        h,
+        o,
+        E,
+        P,
+        e,
+        c,
+        A,
+        w
+      ]
+    ), z = (s) => {
+      r == null || r(s), !(s.defaultPrevented || s.target !== s.currentTarget) && (s.key === "ArrowLeft" ? (s.preventDefault(), A("instant")) : s.key === "ArrowRight" ? (s.preventDefault(), w("instant")) : s.key === "Home" ? (s.preventDefault(), c(0, "instant")) : s.key === "End" && (s.preventDefault(), c(h - 1, "instant")));
+    };
+    return /* @__PURE__ */ C(q.Provider, { value: T, children: /* @__PURE__ */ V(
+      "div",
+      {
+        ref: u,
+        role: p ?? "region",
+        "aria-roledescription": I ?? "carousel",
+        "aria-label": x ?? "Carousel",
+        tabIndex: m ?? 0,
+        className: S(B(), l),
+        onKeyDown: z,
+        ...N,
+        children: [
+          b,
+          /* @__PURE__ */ C("span", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: h > 0 ? `Slide ${g + 1} of ${h}` : "" })
+        ]
+      }
+    ) });
+  }
+);
+G.displayName = "Carousel";
+const O = 40, Y = 10, J = 0.11, Q = t.forwardRef(
+  ({
+    className: l,
+    children: i,
+    onPointerDown: d,
+    onPointerUp: f,
+    onPointerCancel: o,
+    onClickCapture: b,
+    ...p
+  }, m) => {
+    const {
+      index: r,
+      count: x,
+      contentId: I,
+      isAnimated: N,
+      setCount: u,
+      goPrevious: a,
+      goNext: n
+    } = k("CarouselContent"), y = t.Children.toArray(i), h = t.useRef(null), v = t.useRef(!1);
+    t.useEffect(() => {
+      u(y.length);
+    }, [y.length, u]);
+    const P = (e) => {
+      d == null || d(e), !(e.defaultPrevented || !e.isPrimary || e.pointerType === "mouse" || x <= 1) && (h.current = {
+        pointerId: e.pointerId,
+        x: e.clientX,
+        time: e.timeStamp
+      }, e.currentTarget.setPointerCapture(e.pointerId));
+    }, R = (e) => {
+      e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId);
+    }, E = (e) => {
+      f == null || f(e);
+      const c = h.current;
+      if (h.current = null, R(e), !c || c.pointerId !== e.pointerId) return;
+      const A = e.clientX - c.x, w = Math.max(1, e.timeStamp - c.time), T = Math.abs(A) / w;
+      (Math.abs(A) >= O || Math.abs(A) >= Y && T > J) && (v.current = !0, A < 0 ? n() : a());
+    }, j = (e) => {
+      o == null || o(e), h.current = null, R(e);
+    }, g = (e) => {
+      if (v.current) {
+        v.current = !1, e.preventDefault(), e.stopPropagation();
+        return;
+      }
+      b == null || b(e);
+    };
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: m,
+        id: I,
+        className: S("overflow-hidden touch-pan-y", l),
+        onPointerDown: P,
+        onPointerUp: E,
+        onPointerCancel: j,
+        onClickCapture: g,
+        ...p,
+        children: /* @__PURE__ */ C(
+          "div",
+          {
+            className: S(
+              "flex",
+              N ? "transition-transform duration-(--duration-normal) ease-in-out motion-reduce:transition-none" : "transition-none"
+            ),
+            style: { transform: `translate3d(-${r * 100}%, 0, 0)` },
+            children: y.map((e, c) => /* @__PURE__ */ C(
+              F.Provider,
+              {
+                value: {
+                  index: c,
+                  count: y.length,
+                  isActive: c === r
+                },
+                children: e
+              },
+              t.isValidElement(e) ? e.key ?? c : c
+            ))
+          }
+        )
+      }
+    );
+  }
+);
+Q.displayName = "CarouselContent";
+const Z = t.forwardRef(
+  ({
+    className: l,
+    role: i,
+    inert: d,
+    "aria-label": f,
+    "aria-hidden": o,
+    "aria-roledescription": b,
+    ...p
+  }, m) => {
+    const r = t.useContext(F);
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: m,
+        role: i ?? "group",
+        "aria-roledescription": b ?? "slide",
+        "aria-label": f ?? (r ? `${r.index + 1} of ${r.count}` : void 0),
+        "aria-hidden": o ?? (r ? !r.isActive : void 0),
+        inert: d ?? (r ? !r.isActive : void 0),
+        "data-active": (r == null ? void 0 : r.isActive) || void 0,
+        className: S("w-full shrink-0", l),
+        ...p
+      }
+    );
+  }
+);
+Z.displayName = "CarouselItem";
+const K = t.forwardRef(
+  ({
+    className: l,
+    getLabel: i = (p) => `Go to slide ${p + 1}`,
+    onKeyDown: d,
+    "aria-label": f,
+    ...o
+  }, b) => {
+    const { index: p, count: m, contentId: r, goTo: x } = k("CarouselIndicators"), I = t.useRef([]);
+    if (m <= 1) return null;
+    const N = (u) => {
+      var n;
+      if (d == null || d(u), u.defaultPrevented) return;
+      let a = null;
+      u.key === "ArrowRight" ? a = (p + 1) % m : u.key === "ArrowLeft" ? a = (p - 1 + m) % m : u.key === "Home" ? a = 0 : u.key === "End" && (a = m - 1), a !== null && (u.preventDefault(), u.stopPropagation(), x(a, "instant"), (n = I.current[a]) == null || n.focus());
+    };
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: b,
+        role: "group",
+        "aria-label": f ?? "Choose a slide",
+        className: S("flex items-center justify-center gap-1", l),
+        onKeyDown: N,
+        ...o,
+        children: Array.from({ length: m }, (u, a) => {
+          const n = a === p;
+          return /* @__PURE__ */ C(
+            "button",
+            {
+              ref: (y) => {
+                I.current[a] = y;
+              },
+              type: "button",
+              "aria-label": i(a),
+              "aria-current": n ? "true" : void 0,
+              "aria-controls": r,
+              tabIndex: n ? 0 : -1,
+              "data-active": n || void 0,
+              className: "group inline-flex size-7 items-center justify-center rounded-sm outline-none focus-visible:ring-3 focus-visible:ring-ring",
+              onClick: (y) => x(
+                a,
+                _(y) ? "instant" : "animated"
+              ),
+              children: /* @__PURE__ */ C(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: S(
+                    "size-2.5 rounded-dot transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                    n ? "bg-brand" : "bg-ink-100 group-hover:bg-ink-300"
+                  )
+                }
+              )
+            },
+            a
+          );
+        })
+      }
+    );
+  }
+);
+K.displayName = "CarouselIndicators";
+const U = t.forwardRef(
+  ({
+    children: l,
+    variant: i = "secondary",
+    size: d = "icon-sm",
+    disabled: f,
+    onClick: o,
+    "aria-label": b,
+    ...p
+  }, m) => {
+    const { index: r, count: x, loop: I, contentId: N, goPrevious: u } = k("CarouselPrevious"), a = f || x <= 1 || !I && r === 0;
+    return /* @__PURE__ */ C(
+      D,
+      {
+        ref: m,
+        type: "button",
+        variant: i,
+        size: d,
+        disabled: a,
+        "aria-label": b ?? "Previous slide",
+        "aria-controls": N,
+        onClick: (n) => {
+          o == null || o(n), n.defaultPrevented || u(_(n) ? "instant" : "animated");
+        },
+        ...p,
+        children: l ?? /* @__PURE__ */ C(H, {})
+      }
+    );
+  }
+);
+U.displayName = "CarouselPrevious";
+const ee = t.forwardRef(
+  ({
+    children: l,
+    variant: i = "secondary",
+    size: d = "icon-sm",
+    disabled: f,
+    onClick: o,
+    "aria-label": b,
+    ...p
+  }, m) => {
+    const { index: r, count: x, loop: I, contentId: N, goNext: u } = k("CarouselNext"), a = f || x <= 1 || !I && r === x - 1;
+    return /* @__PURE__ */ C(
+      D,
+      {
+        ref: m,
+        type: "button",
+        variant: i,
+        size: d,
+        disabled: a,
+        "aria-label": b ?? "Next slide",
+        "aria-controls": N,
+        onClick: (n) => {
+          o == null || o(n), n.defaultPrevented || u(_(n) ? "instant" : "animated");
+        },
+        ...p,
+        children: l ?? /* @__PURE__ */ C(X, {})
+      }
+    );
+  }
+);
+ee.displayName = "CarouselNext";
+export {
+  G as Carousel,
+  Q as CarouselContent,
+  K as CarouselIndicators,
+  Z as CarouselItem,
+  ee as CarouselNext,
+  U as CarouselPrevious,
+  B as carouselVariants
+};

package/components/chart.d.ts

@@ -0,0 +1,165 @@
+import * as React from "react";
+/** One row of chart data. Gaps (null/undefined) render as breaks in the series. */
+export type ChartDatum = Record<string, string | number | null | undefined>;
+export type ChartColor = "primary" | "success" | "warning" | "danger" | "info";
+export type ChartAnnotation = {
+    /** A goal / threshold line. `axis: "y"` (default) draws horizontal at a value; `axis: "x"` marks an event at a category. */
+    kind: "line";
+    value: number | string;
+    axis?: "x" | "y";
+    label?: string;
+    color?: ChartColor;
+} | {
+    /** A soft range band — healthy range, promo window, incident period. */
+    kind: "band";
+    from: number | string;
+    to: number | string;
+    axis?: "x" | "y";
+    label?: string;
+    color?: ChartColor;
+} | {
+    /** A numbered marker pinned to a point, with a hover/focus callout card. */
+    kind: "point";
+    x: number | string;
+    y: number;
+    label: string;
+    description?: string;
+    color?: ChartColor;
+};
+interface BaseChartProps {
+    data: ChartDatum[];
+    /** The key holding the category (x) value. */
+    categoryKey: string;
+    /** Data keys to plot. Defaults to every numeric key except `categoryKey`. */
+    series?: string[];
+    /** Display names for series keys (legend + tooltip), e.g. `{ mrr: "MRR" }`. */
+    seriesLabels?: Record<string, string>;
+    /**
+     * Accent one series (by key) — it draws in full ink while the rest recede
+     * to the context gray. On a single-series BarChart a category value works
+     * too (that bar alone draws in ink).
+     */
+    highlight?: string;
+    annotations?: ChartAnnotation[];
+    /** Plot height in px (the frame is fluid-width). */
+    height?: number;
+    grid?: boolean;
+    /** Defaults to on when there is more than one series. */
+    legend?: boolean;
+    showYAxis?: boolean;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export interface LineChartProps extends BaseChartProps {
+    curve?: "linear" | "natural" | "step";
+    /** Series keys that render dashed — projections, not observations. */
+    forecastKeys?: string[];
+}
+export interface AreaChartProps extends BaseChartProps {
+    curve?: "linear" | "natural" | "step";
+    stacked?: boolean;
+    /** Series keys that render dashed — projections, not observations. */
+    forecastKeys?: string[];
+}
+export interface BarChartProps extends BaseChartProps {
+    stacked?: boolean;
+}
+export interface ComboChartProps extends BaseChartProps {
+    /** Series keys drawn as lines; the rest draw as bars. */
+    lineKeys: string[];
+    /** Put the line series on a right-hand value axis. */
+    dualAxis?: boolean;
+    stacked?: boolean;
+    /** Line keys that render dashed — projections, not observations. */
+    forecastKeys?: string[];
+}
+export type ComposedChartProps = ComboChartProps;
+export interface PieChartProps {
+    data: ChartDatum[];
+    /** The key holding the slice name. */
+    nameKey: string;
+    /** The key holding the slice value. */
+    valueKey: string;
+    /** Ring (default) vs solid pie. */
+    donut?: boolean;
+    /** Small-caps label under the center total (donut only). */
+    centerLabel?: string;
+    /** Accent one slice (by name) — it draws in ink, the rest recede. */
+    highlight?: string;
+    height?: number;
+    legend?: boolean;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export type RadarChartProps = Omit<BaseChartProps, "annotations" | "grid" | "showYAxis"> & {
+    /** Maximum ring value. Defaults to the largest value in the provided series. */
+    maxValue?: number;
+};
+export interface RadialBarChartProps {
+    data: ChartDatum[];
+    /** The key holding the goal/stage name. */
+    nameKey: string;
+    /** The key holding the progress value. */
+    valueKey: string;
+    /** Full-scale value. Defaults to 100 for percentage/progress charts. */
+    maxValue?: number;
+    centerLabel?: string;
+    height?: number;
+    legend?: boolean;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export interface TreemapDatum {
+    [key: string]: string | number | null | undefined | TreemapDatum[];
+    children?: TreemapDatum[];
+}
+export interface TreemapChartProps {
+    data: TreemapDatum[];
+    /** The key holding the node name. */
+    nameKey: string;
+    /** The key holding the node value. */
+    valueKey: string;
+    height?: number;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export interface ScatterChartProps {
+    data: ChartDatum[];
+    /** Numeric x key. */
+    xKey: string;
+    /** Numeric y key. */
+    yKey: string;
+    /** Optional key naming each point (tooltip header). */
+    labelKey?: string;
+    annotations?: ChartAnnotation[];
+    height?: number;
+    grid?: boolean;
+    showYAxis?: boolean;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export interface FunnelChartProps {
+    data: ChartDatum[];
+    /** The key holding the stage name. */
+    nameKey: string;
+    /** The key holding the stage value (descending). */
+    valueKey: string;
+    height?: number;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboChart: React.ForwardRefExoticComponent<ComboChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ComposedChart: React.ForwardRefExoticComponent<ComboChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ScatterChart: React.ForwardRefExoticComponent<ScatterChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadarChart: React.ForwardRefExoticComponent<Omit<BaseChartProps, "grid" | "annotations" | "showYAxis"> & {
+    /** Maximum ring value. Defaults to the largest value in the provided series. */
+    maxValue?: number;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const RadialBarChart: React.ForwardRefExoticComponent<RadialBarChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TreemapChart: React.ForwardRefExoticComponent<TreemapChartProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FunnelChart: React.ForwardRefExoticComponent<FunnelChartProps & React.RefAttributes<HTMLDivElement>>;
+export {};