@actioneer/ads 0.1.0

package/components/tabs.js

@@ -0,0 +1,371 @@
+"use client";
+import { jsx as m, jsxs as M } from "react/jsx-runtime";
+import * as t from "react";
+import { MotionConfig as U, motion as E } from "motion/react";
+import { cva as S } from "class-variance-authority";
+import { cn as f } from "../lib/cn.js";
+import { EASE_OUT as k } from "../lib/motion.js";
+const V = t.createContext(null);
+function I(o) {
+  const e = t.useContext(V);
+  if (!e)
+    throw new Error(`<${o}> must be used within <Tabs>`);
+  return e;
+}
+const O = t.forwardRef(
+  ({
+    className: o,
+    value: e,
+    defaultValue: a,
+    onValueChange: s,
+    variant: i = "primary",
+    orientation: d = "horizontal",
+    size: b = "md",
+    children: $,
+    ...j
+  }, w) => {
+    const x = e !== void 0, [z, R] = t.useState(a), c = t.useId(), v = t.useId(), y = t.useRef([]), h = t.useRef(/* @__PURE__ */ new Set()), N = x ? e : z, u = t.useCallback(
+      (r) => {
+        x || R(r), s == null || s(r);
+      },
+      [x, s]
+    ), T = t.useCallback((r) => {
+      y.current.includes(r) || y.current.push(r);
+    }, []), l = t.useMemo(
+      () => ({
+        value: N,
+        setValue: u,
+        baseId: c,
+        registerTab: T,
+        tabs: y,
+        disabled: h,
+        thumbId: v,
+        variant: i,
+        orientation: d,
+        size: b
+      }),
+      [
+        N,
+        u,
+        c,
+        T,
+        v,
+        i,
+        d,
+        b
+      ]
+    );
+    return /* @__PURE__ */ m(V.Provider, { value: l, children: /* @__PURE__ */ m(
+      "div",
+      {
+        ref: w,
+        "data-orientation": d,
+        "data-variant": i,
+        className: f(
+          "flex gap-4",
+          d === "horizontal" ? "flex-col" : "flex-row",
+          o
+        ),
+        ...j,
+        children: /* @__PURE__ */ m(U, { reducedMotion: "user", children: $ })
+      }
+    ) });
+  }
+);
+O.displayName = "Tabs";
+const B = S("inline-flex", {
+  variants: {
+    variant: {
+      primary: "bg-muted p-1 rounded-lg gap-1",
+      secondary: "gap-0"
+    },
+    orientation: {
+      horizontal: "flex-row items-center",
+      vertical: "flex-col items-stretch"
+    },
+    size: {
+      sm: "text-xs",
+      md: "text-xs",
+      lg: "text-base"
+    }
+  },
+  compoundVariants: [
+    // Secondary variant uses a subtle rail (border) on the opposite edge of
+    // the active indicator. Kept intentionally hairline — surfaces avoid
+    // strokes, but a tab rail is a control edge, not a surface.
+    {
+      variant: "secondary",
+      orientation: "horizontal",
+      className: "border-b border-border"
+    },
+    {
+      variant: "secondary",
+      orientation: "vertical",
+      className: "border-r border-border"
+    }
+  ],
+  defaultVariants: {
+    variant: "primary",
+    orientation: "horizontal",
+    size: "md"
+  }
+}), H = t.forwardRef(
+  ({ className: o, ...e }, a) => {
+    const { variant: s, orientation: i, size: d } = I("TabList");
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        ref: a,
+        role: "tablist",
+        "aria-orientation": i,
+        "data-orientation": i,
+        "data-variant": s,
+        className: f(B({ variant: s, orientation: i, size: d }), o),
+        ...e
+      }
+    );
+  }
+);
+H.displayName = "TabList";
+const _ = S(
+  f(
+    "relative inline-flex items-center whitespace-nowrap font-medium select-none",
+    "transition-colors duration-(--duration-fast) cursor-pointer",
+    "outline-none focus-visible:ring-3 focus-visible:ring-ring",
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
+  ),
+  {
+    variants: {
+      variant: {
+        primary: "justify-center rounded-md",
+        secondary: ""
+      },
+      orientation: {
+        horizontal: "",
+        vertical: ""
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      selected: {
+        true: "text-foreground",
+        false: "text-muted-foreground hover:text-foreground"
+      }
+    },
+    compoundVariants: [
+      // Sizing — differs per variant (primary is filled, secondary is
+      // flush-underline).
+      { variant: "primary", size: "sm", className: "h-6 px-2.5" },
+      { variant: "primary", size: "md", className: "h-8 px-3" },
+      { variant: "primary", size: "lg", className: "h-9 px-4" },
+      // Secondary horizontal: -1px sits over the rail so the sliding
+      // indicator overlaps it cleanly.
+      {
+        variant: "secondary",
+        orientation: "horizontal",
+        size: "sm",
+        className: "px-2.5 pb-1.5 -mb-px justify-center"
+      },
+      {
+        variant: "secondary",
+        orientation: "horizontal",
+        size: "md",
+        className: "px-3 pb-2 -mb-px justify-center"
+      },
+      {
+        variant: "secondary",
+        orientation: "horizontal",
+        size: "lg",
+        className: "px-4 pb-2.5 -mb-px justify-center"
+      },
+      // Secondary vertical: left-aligned, sits over the right-side rail.
+      {
+        variant: "secondary",
+        orientation: "vertical",
+        size: "sm",
+        className: "px-2.5 py-1 pr-3 -mr-px justify-start"
+      },
+      {
+        variant: "secondary",
+        orientation: "vertical",
+        size: "md",
+        className: "px-3 py-1.5 pr-4 -mr-px justify-start"
+      },
+      {
+        variant: "secondary",
+        orientation: "vertical",
+        size: "lg",
+        className: "px-4 py-2 pr-5 -mr-px justify-start"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      orientation: "horizontal",
+      size: "md",
+      selected: !1
+    }
+  }
+), q = t.forwardRef(
+  ({ className: o, value: e, isDisabled: a, children: s, onClick: i, onKeyDown: d, ...b }, $) => {
+    const {
+      value: j,
+      setValue: w,
+      baseId: x,
+      registerTab: z,
+      tabs: R,
+      disabled: c,
+      thumbId: v,
+      variant: y,
+      orientation: h,
+      size: N
+    } = I("Tab"), u = j === e;
+    t.useEffect(() => {
+      z(e);
+    }, [z, e]), t.useEffect(() => {
+      a ? c.current.add(e) : c.current.delete(e);
+    }, [c, a, e]);
+    const T = (l) => {
+      if (d == null || d(l), l.defaultPrevented) return;
+      const r = R.current, g = r.indexOf(e);
+      if (g === -1) return;
+      const L = h === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], P = h === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"];
+      let n = null;
+      if (L.includes(l.key)) {
+        n = g;
+        do
+          n = (n + 1) % r.length;
+        while (c.current.has(r[n]) && n !== g);
+      } else if (P.includes(l.key)) {
+        n = g;
+        do
+          n = (n - 1 + r.length) % r.length;
+        while (c.current.has(r[n]) && n !== g);
+      } else if (l.key === "Home")
+        n = r.findIndex((p) => !c.current.has(p));
+      else if (l.key === "End") {
+        for (let p = r.length - 1; p >= 0; p--)
+          if (!c.current.has(r[p])) {
+            n = p;
+            break;
+          }
+      }
+      if (n !== null && n !== -1) {
+        l.preventDefault();
+        const p = r[n];
+        w(p);
+        const A = document.getElementById(`${x}-tab-${p}`);
+        A == null || A.focus();
+      }
+    };
+    return /* @__PURE__ */ M(
+      "button",
+      {
+        ref: $,
+        type: "button",
+        role: "tab",
+        id: `${x}-tab-${e}`,
+        "aria-selected": u,
+        "aria-controls": `${x}-panel-${e}`,
+        "aria-disabled": a || void 0,
+        disabled: a,
+        "data-selected": u || void 0,
+        "data-disabled": a || void 0,
+        tabIndex: u && !a ? 0 : -1,
+        className: f(
+          _({ variant: y, orientation: h, size: N, selected: u }),
+          o
+        ),
+        onClick: (l) => {
+          i == null || i(l), a || w(e);
+        },
+        onKeyDown: T,
+        ...b,
+        children: [
+          u && y === "primary" && /* @__PURE__ */ m(
+            E.span,
+            {
+              layoutId: v,
+              "aria-hidden": !0,
+              transition: { duration: 0.2, ease: k },
+              className: "absolute inset-0 rounded-md bg-elevated shadow-elevation"
+            }
+          ),
+          u && y === "secondary" && /* @__PURE__ */ m(
+            E.span,
+            {
+              layoutId: v,
+              "aria-hidden": !0,
+              transition: { duration: 0.2, ease: k },
+              className: f(
+                "absolute bg-brand",
+                h === "horizontal" ? "left-0 right-0 bottom-0 h-0.5" : "top-0 bottom-0 right-0 w-0.5"
+              )
+            }
+          ),
+          /* @__PURE__ */ m("span", { className: "relative", children: s })
+        ]
+      }
+    );
+  }
+);
+q.displayName = "Tab";
+const C = t.forwardRef(
+  ({ className: o, ...e }, a) => {
+    const { orientation: s, variant: i } = I("TabSeparator");
+    return i === "primary" ? /* @__PURE__ */ m(
+      "span",
+      {
+        ref: a,
+        "aria-hidden": !0,
+        role: "separator",
+        className: f("shrink-0", o),
+        ...e
+      }
+    ) : /* @__PURE__ */ m(
+      "span",
+      {
+        ref: a,
+        "aria-hidden": !0,
+        role: "separator",
+        className: f(
+          "shrink-0 bg-border",
+          s === "horizontal" ? "mx-1 h-4 w-px" : "my-1 h-px w-full",
+          o
+        ),
+        ...e
+      }
+    );
+  }
+);
+C.displayName = "TabSeparator";
+const F = t.forwardRef(
+  ({ className: o, value: e, children: a, ...s }, i) => {
+    const { value: d, baseId: b } = I("TabPanel");
+    return d !== e ? null : /* @__PURE__ */ m(
+      "div",
+      {
+        ref: i,
+        role: "tabpanel",
+        id: `${b}-panel-${e}`,
+        "aria-labelledby": `${b}-tab-${e}`,
+        tabIndex: 0,
+        className: f(
+          "flex-1 outline-none focus-visible:ring-3 focus-visible:ring-ring rounded-sm",
+          o
+        ),
+        ...s,
+        children: a
+      }
+    );
+  }
+);
+F.displayName = "TabPanel";
+export {
+  q as Tab,
+  H as TabList,
+  F as TabPanel,
+  C as TabSeparator,
+  O as Tabs
+};

package/components/textarea.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    isInvalid?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/components/textarea.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as s } from "../lib/cn.js";
+import { inputBaseClass as m } from "./field.js";
+const p = o.forwardRef(
+  ({ className: a, isInvalid: e, ...r }, t) => /* @__PURE__ */ i(
+    "textarea",
+    {
+      ref: t,
+      "aria-invalid": e || void 0,
+      className: s(
+        m,
+        "min-h-20 resize-y py-2 text-xs",
+        a
+      ),
+      ...r
+    }
+  )
+);
+p.displayName = "Textarea";
+export {
+  p as Textarea
+};

package/components/timeline.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare const Timeline: React.ForwardRefExoticComponent<React.OlHTMLAttributes<HTMLOListElement> & React.RefAttributes<HTMLOListElement>>;
+export interface TimelineItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    markerClassName?: string;
+    lineClassName?: string;
+}
+export declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLLIElement>>;

package/components/timeline.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as e } from "../lib/cn.js";
+const d = l.forwardRef(({ className: a, ...i }, s) => /* @__PURE__ */ t("ol", { ref: s, className: e("space-y-0", a), ...i }));
+d.displayName = "Timeline";
+const p = l.forwardRef(
+  ({ className: a, markerClassName: i, lineClassName: s, children: o, ...m }, r) => /* @__PURE__ */ n(
+    "li",
+    {
+      ref: r,
+      className: e(
+        "relative pb-4 pl-6 last:pb-0 last:[&_.ads-timeline-line]:hidden",
+        a
+      ),
+      ...m,
+      children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: e(
+              "ads-timeline-line absolute bottom-0 left-1.5 top-5 w-px bg-border",
+              s
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "span",
+          {
+            "aria-hidden": !0,
+            className: e(
+              "absolute left-0.5 top-4 size-2 rounded-dot bg-muted-foreground",
+              i
+            )
+          }
+        ),
+        o
+      ]
+    }
+  )
+);
+p.displayName = "TimelineItem";
+export {
+  d as Timeline,
+  p as TimelineItem
+};

package/components/toast.d.ts

@@ -0,0 +1,74 @@
+import { ButtonProps } from './button';
+import * as React from "react";
+/**
+ * Toast — ported from HeroUI v3 onto ADS tokens.
+ *
+ * Anatomy: a light floating card where the VARIANT tints only the indicator
+ * icon and the title; the description stays muted; the close button is a
+ * tiny corner chip revealed on hover. An optional action button sits on the
+ * trailing edge.
+ *
+ * Stacking (the HeroUI deck): toasts don't pile up as a list — the newest
+ * sits in front and older ones collapse BEHIND it, peeking out as slivers
+ * (offset + scaled down, clipped to the front card's height). Dismissing
+ * the front card promotes the next one with a spring.
+ *
+ * API (via `useToast()`): `toast(message, options?)` returns an id, plus
+ * `toast.success/info/warning/danger`, `toast.promise(p, {loading, success,
+ * error})`, `toast.close(id)` and `toast.clear()`. Options: `description`,
+ * `indicator` (custom icon), `actionProps` (trailing Button), `timeout`
+ * (0 = persistent), `onClose`, `isLoading`. The legacy object form
+ * `toast({ title, description, variant, duration })` still works.
+ */
+export type ToastVariant = "default" | "success" | "info" | "warning" | "danger";
+export interface ToastActionProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    variant?: ButtonProps["variant"];
+    className?: string;
+}
+export interface ToastOptions {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: ToastVariant;
+    /** Custom indicator icon — replaces the variant's default. */
+    indicator?: React.ReactNode;
+    /** Trailing action button. */
+    actionProps?: ToastActionProps;
+    /** Auto-dismiss after N ms. 0 = persistent. Default 5000 (0 when loading). */
+    timeout?: number;
+    /** Legacy alias for `timeout`. */
+    duration?: number;
+    /** Fires when the toast closes — timeout, ✕, close(id) or clear(). */
+    onClose?: () => void;
+    /** Show a spinner in the indicator slot. */
+    isLoading?: boolean;
+}
+export interface ToastFn {
+    (message: React.ReactNode | (ToastOptions & {
+        title: React.ReactNode;
+    }), options?: ToastOptions): string;
+    success: (message: React.ReactNode, options?: ToastOptions) => string;
+    info: (message: React.ReactNode, options?: ToastOptions) => string;
+    warning: (message: React.ReactNode, options?: ToastOptions) => string;
+    danger: (message: React.ReactNode, options?: ToastOptions) => string;
+    promise: <T>(promise: Promise<T>, msgs: {
+        loading: React.ReactNode;
+        success: React.ReactNode | ((data: T) => React.ReactNode);
+        error: React.ReactNode | ((err: unknown) => React.ReactNode);
+    }) => Promise<T>;
+    close: (id: string) => void;
+    clear: () => void;
+}
+export declare function useToast(): {
+    toast: ToastFn;
+};
+export type ToastPlacement = "bottom-end" | "bottom" | "bottom-start" | "top-end" | "top" | "top-start";
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    /** Where the deck anchors. Default bottom-end. */
+    placement?: ToastPlacement;
+    /** Front card + how many peeking layers stay visible. Default 3. */
+    maxVisible?: number;
+}
+export declare function ToastProvider({ children, placement, maxVisible, }: ToastProviderProps): React.JSX.Element;