@actioneer/ads 0.5.6 → 0.5.8

package/components/spinner.js

@@ -1,11 +1,14 @@
 "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", {
+import { jsx as t } from "react/jsx-runtime";
+import * as u from "react";
+import { cva as p } from "class-variance-authority";
+import { cn as f } from "../lib/cn.js";
+import { SpinnerMark as x } from "../lib/spinner-mark.js";
+import { SPINNER_VARIANTS as k } from "../lib/spinner-mark.js";
+const z = p("inline-block shrink-0", {
   variants: {
     size: {
+      xs: "size-3.5",
       sm: "size-4",
       md: "size-6",
       lg: "size-8"
@@ -17,46 +20,43 @@ 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 2
     }
   },
   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",
+}), N = u.forwardRef(
+  ({
+    className: a,
+    size: n,
+    color: o,
+    variant: e = "action",
+    label: s,
+    role: m,
+    "aria-label": d,
+    "aria-hidden": r,
+    ...l
+  }, c) => {
+    const i = r === !0 || r === "true";
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: c,
+        role: i ? void 0 : m ?? "status",
+        "aria-label": i ? void 0 : d ?? s ?? "Loading",
+        "aria-hidden": r,
+        "data-variant": e,
+        className: f(z({ size: n, color: o }), a),
+        ...l,
+        children: /* @__PURE__ */ t(
+          x,
           {
-            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"
-              }
-            )
+            variant: e,
+            "aria-hidden": !0,
+            className: "size-full"
           }
         )
-      ] })
-    }
-  )
+      }
+    );
+  }
 );
-p.displayName = "Spinner";
+N.displayName = "Spinner";
 export {
-  p as Spinner
+  k as SPINNER_VARIANTS,
+  N as Spinner
 };

package/components/stepper.js

@@ -2,12 +2,12 @@
 import { jsx as e, jsxs as c } from "react/jsx-runtime";
 import * as v from "react";
 import { cva as y } from "class-variance-authority";
-import { cn as s } from "../lib/cn.js";
+import { cn as a } from "../lib/cn.js";
 import { Check as p, Close as g } from "../lib/icons.js";
 const b = y(
-  s(
+  a(
     "flex shrink-0 items-center justify-center rounded-full font-normal tabular-nums",
-    "transition-colors duration-(--duration-fast) ease-out motion-reduce:transition-none"
+    "transition-colors duration-150 ease-out motion-reduce:transition-none"
   ),
   {
     variants: {
@@ -27,31 +27,31 @@ const b = y(
 ), j = v.forwardRef(
   ({
     className: x,
-    steps: u,
+    steps: m,
     activeIndex: n,
     size: i = "md",
     onSelect: o,
     labelPosition: h = "below",
-    ...m
+    ...u
   }, N) => /* @__PURE__ */ e(
     "ol",
     {
       ref: N,
       "data-slot": "stepper",
-      "aria-label": m["aria-label"] ?? "Progress",
-      className: s("flex w-full flex-row items-start", x),
-      ...m,
-      children: u.map((a, t) => {
-        const r = a.isError ? "error" : t < n ? "complete" : t === n ? "current" : "upcoming", l = t === u.length - 1, w = !!o && t < n, d = t < n && !a.isError, k = /* @__PURE__ */ e("span", { "aria-hidden": !0, className: b({ status: r, size: i }), children: r === "complete" ? /* @__PURE__ */ e(p, {}) : r === "error" ? /* @__PURE__ */ e(g, {}) : t + 1 }), f = w ? /* @__PURE__ */ e(
+      "aria-label": u["aria-label"] ?? "Progress",
+      className: a("flex w-full flex-row items-start", x),
+      ...u,
+      children: m.map((s, t) => {
+        const r = s.isError ? "error" : t < n ? "complete" : t === n ? "current" : "upcoming", l = t === m.length - 1, w = !!o && t < n, d = t < n && !s.isError, k = /* @__PURE__ */ e("span", { "aria-hidden": !0, className: b({ status: r, size: i }), children: r === "complete" ? /* @__PURE__ */ e(p, {}) : r === "error" ? /* @__PURE__ */ e(g, {}) : t + 1 }), f = w ? /* @__PURE__ */ e(
           "button",
           {
             type: "button",
             onClick: () => o == null ? void 0 : o(t),
             "aria-label": `Go to step ${t + 1}`,
-            className: s(
+            className: a(
               b({ status: r, size: i }),
               "cursor-pointer outline-none focus-visible:ring-3 focus-visible:ring-ring",
-              "active:scale-(--scale-press)"
+              "active:scale-[0.97]"
             ),
             children: r === "complete" ? /* @__PURE__ */ e(p, {}) : r === "error" ? /* @__PURE__ */ e(g, {}) : t + 1
           }
@@ -61,7 +61,7 @@ const b = y(
           {
             "data-status": r,
             "aria-current": r === "current" ? "step" : void 0,
-            className: s(
+            className: a(
               "flex min-w-0 items-center gap-2",
               l ? "shrink-0" : "flex-1"
             ),
@@ -70,20 +70,20 @@ const b = y(
               /* @__PURE__ */ e(
                 "span",
                 {
-                  className: s(
+                  className: a(
                     "truncate whitespace-nowrap",
                     i === "sm" ? "text-xs" : "text-base",
                     r === "upcoming" ? "text-tertiary" : "text-foreground",
                     r === "error" && "text-danger"
                   ),
-                  children: a.label
+                  children: s.label
                 }
               ),
               !l && /* @__PURE__ */ e(
                 "span",
                 {
                   "aria-hidden": !0,
-                  className: s(
+                  className: a(
                     "h-px min-w-4 flex-1 shrink-0 bg-border",
                     d && "bg-success"
                   )
@@ -91,7 +91,7 @@ const b = y(
               )
             ]
           },
-          a.id
+          s.id
         ) : /* @__PURE__ */ c(
           "li",
           {
@@ -105,7 +105,7 @@ const b = y(
                   "span",
                   {
                     "aria-hidden": !0,
-                    className: s(
+                    className: a(
                       "h-px flex-1 shrink-0 bg-border",
                       d && "bg-success"
                     )
@@ -115,18 +115,18 @@ const b = y(
               /* @__PURE__ */ e("div", { className: "min-w-0 pr-4", children: /* @__PURE__ */ e(
                 "div",
                 {
-                  className: s(
+                  className: a(
                     "truncate",
                     i === "sm" ? "text-xs" : "text-base",
                     r === "upcoming" ? "text-tertiary" : "text-foreground",
                     r === "error" && "text-danger"
                   ),
-                  children: a.label
+                  children: s.label
                 }
               ) })
             ]
           },
-          a.id
+          s.id
         );
       })
     }

package/components/switch.js

@@ -1,61 +1,81 @@
 "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(
+import { jsxs as p, jsx as i } from "react/jsx-runtime";
+import * as c from "react";
+import { MotionConfig as w, motion as x } from "motion/react";
+import { cn as n } from "../lib/cn.js";
+import { springSwitch as g } from "../lib/motion.js";
+const v = {
+  sm: {
+    track: "h-5 w-9",
+    knob: "size-4",
+    offset: 16
+  },
+  md: {
+    track: "h-6 w-11",
+    knob: "size-5",
+    offset: 20
+  }
+}, y = c.forwardRef(
+  ({
+    className: d,
+    checked: t = !1,
+    onCheckedChange: e,
+    size: f = "md",
+    disabled: s,
+    children: o,
+    ...r
+  }, m) => {
+    const l = v[f], a = c.useId(), u = r["aria-label"] != null || r["aria-labelledby"] != null, b = o && !u ? a : void 0;
+    return /* @__PURE__ */ p(
       "label",
       {
-        className: s(
+        className: n(
           "inline-flex items-center gap-2 text-xs text-foreground select-none",
-          e ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+          s ? "cursor-not-allowed opacity-50" : "cursor-pointer"
         ),
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "button",
             {
-              ref: f,
+              ref: m,
               type: "button",
               role: "switch",
               "aria-checked": t,
-              disabled: e,
-              onClick: () => n == null ? void 0 : n(!t),
-              className: s(
+              "aria-labelledby": b,
+              disabled: s,
+              onClick: () => e == null ? void 0 : e(!t),
+              className: n(
                 "relative inline-flex shrink-0 items-center rounded-full border border-transparent",
-                "transition-colors duration-(--duration-fast)",
+                "transition-colors duration-150",
                 "outline-none focus-visible:ring-3 focus-visible:ring-ring",
                 "disabled:cursor-not-allowed",
                 t ? "bg-brand" : "bg-input",
-                r.track,
-                i
+                l.track,
+                d
               ),
-              ...u,
-              children: /* @__PURE__ */ o(
-                "span",
+              ...r,
+              children: /* @__PURE__ */ i(w, { reducedMotion: "user", children: /* @__PURE__ */ i(
+                x.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
+                  initial: !1,
+                  animate: { x: t ? l.offset : 0 },
+                  transition: g,
+                  className: n(
+                    "ml-0.5 inline-block rounded-full bg-elevated shadow-elevation",
+                    l.knob
                   )
                 }
-              )
+              ) })
             }
           ),
-          a && /* @__PURE__ */ o("span", { children: a })
+          o && /* @__PURE__ */ i("span", { id: a, children: o })
         ]
       }
     );
   }
 );
-b.displayName = "Switch";
+y.displayName = "Switch";
 export {
-  b as Switch
+  y as Switch
 };

package/components/table.d.ts

@@ -7,6 +7,7 @@ export interface SortDescriptor {
     column: string;
     direction: SortDirection;
 }
+type SortValue = string | number | Date;
 export type SelectionMode = "none" | "single" | "multiple";
 /** `"all"` selects every current key without enumerating them. */
 export type Selection = Set<string> | "all";
@@ -35,6 +36,8 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
     actionColumnWidth?: string;
     sortDescriptor?: SortDescriptor;
     onSortChange?: (descriptor: SortDescriptor) => void;
+    /** Enable sortable data-column headers. Defaults to true. */
+    allowsSorting?: boolean;
     /**
      * A purely display table: no row hover/focus wash, no selection. Set this
      * when rows have nothing to click — a plain data grid — so hovering never
@@ -42,16 +45,24 @@ export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElem
      * table with row selection, sorting, or a click-through action.
      */
     isStatic?: boolean;
+    /**
+     * Draggable column-width handles on the header ticks (defaults to true).
+     * Dragging the tick between two headers resizes the column to its left;
+     * the handle is keyboard-operable (arrows, Shift for coarse steps) and
+     * double-click restores the automatic layout. The last column has no
+     * handle — it absorbs the remaining width. Set false for tables whose
+     * layout must stay fixed (e.g. a compact summary card).
+     */
+    resizableColumns?: boolean;
 }
 /**
  * Styled wrapper around a semantic `<table>` with horizontal overflow.
  *
- * Opt-in power features (all backward compatible — a plain `<Table>` is
- * unchanged): **row selection** (`selectionMode` + `selectedKeys` /
- * `onSelectionChange` / `rowKeys`; give each body `<TableRow>` a `rowKey`),
- * **sorting** (`sortDescriptor` + `onSortChange`; mark columns `sortKey`),
- * and **sticky columns** (`sticky="left" | "right"` on column/cell). Compose
- * with `<Pagination>` below for paging.
+ * A plain `<Table>` automatically makes its labeled data columns sortable.
+ * Consumers can opt out with `allowsSorting={false}`, or control sorting with
+ * `sortDescriptor` + `onSortChange` and explicit column `sortKey` values.
+ * Row selection and sticky columns remain opt-in. Compose with `<Pagination>`
+ * below for paging.
  */
 export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -64,13 +75,19 @@ export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & R
 export interface TableColumnProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
     align?: Align;
     sticky?: Sticky;
-    /** Enable sorting on this column; the string is its sort key. */
+    /** Sort key used by a consumer-controlled table. */
     sortKey?: string;
+    /** Disable sorting for a non-data or action header. */
+    allowsSorting?: boolean;
+    /** Assigned internally by Table's automatic header layout. */
+    _sortColumnIndex?: number;
 }
 export declare const TableColumn: React.ForwardRefExoticComponent<TableColumnProps & React.RefAttributes<HTMLTableCellElement>>;
 export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
     align?: Align;
     sticky?: Sticky;
+    /** Explicit value when automatic sorting cannot infer the rendered value. */
+    sortValue?: SortValue;
 }
 export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export {};