@actioneer/ads 0.1.0

package/components/table.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+type Align = "left" | "center" | "right";
+type Sticky = "left" | "right";
+/** A column to sort by, plus its direction. Mirrors the React-Aria shape. */
+export type SortDirection = "ascending" | "descending";
+export interface SortDescriptor {
+    column: string;
+    direction: SortDirection;
+}
+export type SelectionMode = "none" | "single" | "multiple";
+/** `"all"` selects every current key without enumerating them. */
+export type Selection = Set<string> | "all";
+export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "onSelect"> {
+    /** Class applied to the outer shell (the gray rounded surface). */
+    wrapperClassName?: string;
+    /**
+     * Optional footer rendered inside the shell, on the gray, below the
+     * table card — the HeroUI table-footer slot. Pagination lives here.
+     */
+    footer?: React.ReactNode;
+    selectionMode?: SelectionMode;
+    selectedKeys?: Selection;
+    onSelectionChange?: (keys: Set<string>) => void;
+    /** All row keys on the current page — powers the header "select all". */
+    rowKeys?: string[];
+    sortDescriptor?: SortDescriptor;
+    onSortChange?: (descriptor: SortDescriptor) => void;
+}
+/**
+ * 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.
+ */
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /** Stable key for selection (required on body rows to be selectable). */
+    rowKey?: string;
+}
+export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export interface TableColumnProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    align?: Align;
+    sticky?: Sticky;
+    /** Enable sorting on this column; the string is its sort key. */
+    sortKey?: string;
+}
+export declare const TableColumn: React.ForwardRefExoticComponent<TableColumnProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    align?: Align;
+    sticky?: Sticky;
+}
+export declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export {};

package/components/table.js

@@ -0,0 +1,254 @@
+"use client";
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as o } from "../lib/cn.js";
+import { Checkbox as _ } from "./checkbox.js";
+import { ChevronUp as F, ChevronDown as I, SortIcon as M } from "../lib/icons.js";
+const S = (e) => e === "center" ? "text-center" : e === "right" ? "text-right" : "text-left", P = (e) => e === "left" ? "sticky left-0 z-10 shadow-[8px_0_20px_-8px_rgba(0,0,0,0.08)]" : e === "right" ? "sticky right-0 z-10 shadow-[-8px_0_20px_-8px_rgba(0,0,0,0.08)]" : void 0, q = o(
+  "bg-card align-middle transition-colors",
+  // Row separators — functional hairline, none under the last row.
+  "border-b border-border group-last/row:border-b-0",
+  // Hover/selected: translucent white over the gray shell (HeroUI's trick —
+  // the row "sinks" toward the shell instead of picking up a new tint).
+  "group-hover/row:bg-card/40",
+  "group-data-[selected]/row:bg-card/10"
+), U = o(
+  "group-first/row:rounded-tl-[calc(var(--radius-2xl)-var(--spacing))]",
+  "group-last/row:rounded-bl-[calc(var(--radius-2xl)-var(--spacing))]"
+), $ = o(
+  "group-first/row:first:rounded-tl-[calc(var(--radius-2xl)-var(--spacing))]",
+  "group-first/row:last:rounded-tr-[calc(var(--radius-2xl)-var(--spacing))]",
+  "group-last/row:first:rounded-bl-[calc(var(--radius-2xl)-var(--spacing))]",
+  "group-last/row:last:rounded-br-[calc(var(--radius-2xl)-var(--spacing))]"
+), A = o(
+  "after:pointer-events-none after:absolute after:right-0 after:top-1/2",
+  "after:h-4 after:w-px after:-translate-y-1/2 after:rounded-sm",
+  "after:bg-border-strong last:after:hidden"
+), B = s.createContext(null), j = () => s.useContext(B), C = s.createContext("body"), E = s.forwardRef(
+  ({
+    className: e,
+    wrapperClassName: a,
+    footer: l,
+    children: g,
+    selectionMode: p = "none",
+    selectedKeys: d,
+    onSelectionChange: i,
+    rowKeys: t,
+    sortDescriptor: n,
+    onSortChange: m,
+    ...w
+  }, h) => {
+    const f = s.useMemo(() => t ?? [], [t]), b = d === "all", u = b ? null : d ?? /* @__PURE__ */ new Set(), N = s.useCallback(
+      (c) => b || !!(u != null && u.has(c)),
+      [b, u]
+    ), v = f.length > 0 && (b || f.every((c) => u == null ? void 0 : u.has(c))), T = !v && (b || f.some((c) => u == null ? void 0 : u.has(c))), k = s.useCallback(
+      (c) => {
+        if (!i) return;
+        if (p === "single") {
+          i(N(c) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([c]));
+          return;
+        }
+        const x = new Set(b ? f : u ?? /* @__PURE__ */ new Set());
+        x.has(c) ? x.delete(c) : x.add(c), i(x);
+      },
+      [i, p, N, b, f, u]
+    ), z = s.useCallback(() => {
+      i && i(v ? /* @__PURE__ */ new Set() : new Set(f));
+    }, [i, v, f]), R = s.useCallback(
+      (c) => {
+        if (!m) return;
+        const x = (n == null ? void 0 : n.column) === c && n.direction === "ascending" ? "descending" : "ascending";
+        m({ column: c, direction: x });
+      },
+      [m, n]
+    ), H = s.useMemo(
+      () => ({
+        selectionMode: p,
+        isSelected: N,
+        toggleKey: k,
+        toggleAll: z,
+        allSelected: v,
+        someSelected: T,
+        sortDescriptor: n,
+        requestSort: m ? R : void 0
+      }),
+      [
+        p,
+        N,
+        k,
+        z,
+        v,
+        T,
+        n,
+        m,
+        R
+      ]
+    );
+    return /* @__PURE__ */ r(B.Provider, { value: H, children: /* @__PURE__ */ y(
+      "div",
+      {
+        className: o(
+          "overflow-clip rounded-2xl bg-muted px-1 pb-1",
+          a
+        ),
+        children: [
+          /* @__PURE__ */ r("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r(
+            "table",
+            {
+              ref: h,
+              className: o(
+                "w-full border-separate border-spacing-0 text-xs",
+                e
+              ),
+              ...w,
+              children: g
+            }
+          ) }),
+          l && /* @__PURE__ */ r("div", { className: "flex items-center px-4 py-2.5", children: l })
+        ]
+      }
+    ) });
+  }
+);
+E.displayName = "Table";
+const G = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ r(C.Provider, { value: "header", children: /* @__PURE__ */ r(
+  "thead",
+  {
+    ref: l,
+    className: o("text-xs text-muted-foreground", e),
+    ...a
+  }
+) }));
+G.displayName = "TableHeader";
+const J = s.forwardRef(({ className: e, ...a }, l) => /* @__PURE__ */ r(C.Provider, { value: "body", children: /* @__PURE__ */ r("tbody", { ref: l, className: o(e), ...a }) }));
+J.displayName = "TableBody";
+const L = s.forwardRef(
+  ({ className: e, rowKey: a, children: l, ...g }, p) => {
+    const d = j(), i = s.useContext(C), t = !!d && d.selectionMode !== "none", n = t && i === "body" && a !== void 0 ? d.isSelected(a) : !1;
+    return /* @__PURE__ */ y(
+      "tr",
+      {
+        ref: p,
+        "data-selected": n || void 0,
+        className: o("group/row", e),
+        ...g,
+        children: [
+          t && (i === "header" ? /* @__PURE__ */ r(
+            "th",
+            {
+              scope: "col",
+              className: o(
+                "w-10 px-4 py-2.5",
+                A,
+                // Sticky without the baked shadow — an always-on smudge
+                // muddies the shell's corners (elevation = actionability).
+                // (sticky is positioned, so the ::after tick anchors to it —
+                // no `relative` needed, and it would conflict with sticky.)
+                "sticky left-0 z-10 bg-muted"
+              ),
+              children: d.selectionMode === "multiple" && /* @__PURE__ */ r(
+                _,
+                {
+                  size: "sm",
+                  "aria-label": "Select all rows",
+                  checked: d.allSelected,
+                  indeterminate: d.someSelected,
+                  onChange: d.toggleAll
+                }
+              )
+            }
+          ) : /* @__PURE__ */ r(
+            "td",
+            {
+              className: o(
+                "w-10 px-4 py-3",
+                q,
+                U,
+                "sticky left-0 z-10"
+              ),
+              onClick: (m) => m.stopPropagation(),
+              children: a !== void 0 && /* @__PURE__ */ r(
+                _,
+                {
+                  size: "sm",
+                  "aria-label": `Select ${a}`,
+                  checked: n,
+                  onChange: () => d.toggleKey(a)
+                }
+              )
+            }
+          )),
+          l
+        ]
+      }
+    );
+  }
+);
+L.displayName = "TableRow";
+const O = s.forwardRef(({ className: e, align: a, sticky: l, sortKey: g, children: p, ...d }, i) => {
+  var h, f;
+  const t = j(), n = !!g && !!(t != null && t.requestSort), m = n && ((h = t == null ? void 0 : t.sortDescriptor) == null ? void 0 : h.column) === g, w = (f = t == null ? void 0 : t.sortDescriptor) == null ? void 0 : f.direction;
+  return /* @__PURE__ */ r(
+    "th",
+    {
+      ref: i,
+      scope: "col",
+      "aria-sort": m ? w === "ascending" ? "ascending" : "descending" : n ? "none" : void 0,
+      className: o(
+        // whitespace-nowrap: header labels hug their content — the table
+        // scrolls horizontally, so wrapping "Null %" to two lines only
+        // wastes header height without saving any width.
+        "relative whitespace-nowrap px-4 py-2.5 font-medium",
+        A,
+        S(a),
+        l && o(P(l), "bg-muted"),
+        e
+      ),
+      ...d,
+      children: n ? /* @__PURE__ */ y(
+        "button",
+        {
+          type: "button",
+          onClick: () => t.requestSort(g),
+          className: o(
+            "group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors",
+            "hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+            a === "right" && "flex-row-reverse",
+            m && "text-foreground"
+          ),
+          children: [
+            p,
+            m ? w === "ascending" ? /* @__PURE__ */ r(F, { className: "size-3.5" }) : /* @__PURE__ */ r(I, { className: "size-3.5" }) : /* @__PURE__ */ r(M, { className: "size-3.5 opacity-0 transition-opacity group-hover/sort:opacity-60" })
+          ]
+        }
+      ) : p
+    }
+  );
+});
+O.displayName = "TableColumn";
+const Q = s.forwardRef(
+  ({ className: e, align: a, sticky: l, ...g }, p) => /* @__PURE__ */ r(
+    "td",
+    {
+      ref: p,
+      className: o(
+        "px-4 py-3",
+        q,
+        $,
+        S(a),
+        l && P(l),
+        e
+      ),
+      ...g
+    }
+  )
+);
+Q.displayName = "TableCell";
+export {
+  E as Table,
+  J as TableBody,
+  Q as TableCell,
+  O as TableColumn,
+  G as TableHeader,
+  L as TableRow
+};

package/components/tabs.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+type Variant = "primary" | "secondary";
+type Orientation = "horizontal" | "vertical";
+type Size = "sm" | "md" | "lg";
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: Variant;
+    orientation?: Orientation;
+    size?: Size;
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
+export interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    isDisabled?: boolean;
+}
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TabSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const TabSeparator: React.ForwardRefExoticComponent<TabSeparatorProps & React.RefAttributes<HTMLSpanElement>>;
+export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    value: string;
+}
+export declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
+export {};