@simpleapps-com/augur-web 2.2.23 → 2.2.24

package/dist/confirm-dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/augur-packages/augur-packages/packages/augur-web/dist/confirm-dialog.cjs","../src/confirm-dialog.tsx"],"names":[],"mappings":"AAAA,qFAAY;AACZ,YAAY;AACZ;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,wDAA6B;AAC7B;AACA;ACuCQ,+CAAA;AAdR,SAAS,aAAA,CAAc;AAAA,EACrB,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA,EAAe,SAAA;AAAA,EACf,YAAA,EAAc,QAAA;AAAA,EACd,QAAA,EAAU,SAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA,EAAU;AACZ,CAAA,EAAuB;AACrB,EAAA,uBACE,6BAAA,wBAAC,EAAA,EAAO,IAAA,EAAY,YAAA,EAClB,QAAA,kBAAA,8BAAA,+BAAC,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,8BAAA,8BAAC,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,6BAAA,6BAAC,EAAA,EAAa,QAAA,EAAA,MAAA,CAAM,CAAA;AAAA,MACnB,YAAA,mBAAe,6BAAA,mCAAC,EAAA,EAAmB,QAAA,EAAA,YAAA,CAAY;AAAA,IAAA,EAAA,CAClD,CAAA;AAAA,oBACA,8BAAA,8BAAC,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,6BAAA,wBAAC,EAAA,EAAO,OAAA,EAAQ,SAAA,EAAU,OAAA,EAAS,CAAA,EAAA,GAAM,YAAA,CAAa,KAAK,CAAA,EAAG,QAAA,EAAU,OAAA,EACrE,QAAA,EAAA,YAAA,CACH,CAAA;AAAA,sBACA,8BAAA,wBAAC,EAAA,EAAO,OAAA,EAAkB,OAAA,EAAS,SAAA,EAAW,QAAA,EAAU,OAAA,EACrD,QAAA,EAAA;AAAA,QAAA,QAAA,mBAAW,6BAAA,yBAAC,EAAA,EAAQ,IAAA,EAAK,IAAA,EAAK,SAAA,EAAU,OAAA,CAAO,CAAA;AAAA,QAC/C;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF,CAAA;AAEJ;AACA,aAAA,CAAc,YAAA,EAAc,eAAA;AD5B5B;AACE;AACF,sCAAC","file":"/home/runner/work/augur-packages/augur-packages/packages/augur-web/dist/confirm-dialog.cjs","sourcesContent":[null,"/** Reusable confirmation dialog composing Dialog + Button. */\n\"use client\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from \"./dialog\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"destructive\";\n  onConfirm: () => void;\n  loading?: boolean;\n}\n\n/**\n * Pre-composed confirmation dialog for delete/action confirmations.\n *\n * @example\n * ```tsx\n * <ConfirmDialog\n *   open={showDelete}\n *   onOpenChange={setShowDelete}\n *   title=\"Delete brand?\"\n *   description=\"This action cannot be undone.\"\n *   variant=\"destructive\"\n *   onConfirm={() => deleteBrand.mutate(uid)}\n *   loading={deleteBrand.isPending}\n * />\n * ```\n */\nfunction ConfirmDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  onConfirm,\n  loading = false,\n}: ConfirmDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)} disabled={loading}>\n            {cancelLabel}\n          </Button>\n          <Button variant={variant} onClick={onConfirm} disabled={loading}>\n            {loading && <Spinner size=\"sm\" className=\"mr-2\" />}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\nConfirmDialog.displayName = \"ConfirmDialog\";\n\nexport { ConfirmDialog };\n"]}

package/dist/confirm-dialog.d.cts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: "default" | "destructive";
+    onConfirm: () => void;
+    loading?: boolean;
+}
+/**
+ * Pre-composed confirmation dialog for delete/action confirmations.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   open={showDelete}
+ *   onOpenChange={setShowDelete}
+ *   title="Delete brand?"
+ *   description="This action cannot be undone."
+ *   variant="destructive"
+ *   onConfirm={() => deleteBrand.mutate(uid)}
+ *   loading={deleteBrand.isPending}
+ * />
+ * ```
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, onConfirm, loading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare namespace ConfirmDialog {
+    var displayName: string;
+}
+
+export { ConfirmDialog, type ConfirmDialogProps };

package/dist/confirm-dialog.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: "default" | "destructive";
+    onConfirm: () => void;
+    loading?: boolean;
+}
+/**
+ * Pre-composed confirmation dialog for delete/action confirmations.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   open={showDelete}
+ *   onOpenChange={setShowDelete}
+ *   title="Delete brand?"
+ *   description="This action cannot be undone."
+ *   variant="destructive"
+ *   onConfirm={() => deleteBrand.mutate(uid)}
+ *   loading={deleteBrand.isPending}
+ * />
+ * ```
+ */
+declare function ConfirmDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, variant, onConfirm, loading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare namespace ConfirmDialog {
+    var displayName: string;
+}
+
+export { ConfirmDialog, type ConfirmDialogProps };

package/dist/confirm-dialog.js

@@ -0,0 +1,49 @@
+"use client";
+"use client";
+import {
+  Spinner
+} from "./chunk-UMNTUD2P.js";
+import {
+  Button
+} from "./chunk-QICSGVX3.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-JNYGRU2F.js";
+
+// src/confirm-dialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+  loading = false
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: loading, children: cancelLabel }),
+      /* @__PURE__ */ jsxs(Button, { variant, onClick: onConfirm, disabled: loading, children: [
+        loading && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "mr-2" }),
+        confirmLabel
+      ] })
+    ] })
+  ] }) });
+}
+ConfirmDialog.displayName = "ConfirmDialog";
+export {
+  ConfirmDialog
+};
+//# sourceMappingURL=confirm-dialog.js.map

package/dist/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/confirm-dialog.tsx"],"sourcesContent":["/** Reusable confirmation dialog composing Dialog + Button. */\n\"use client\";\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n} from \"./dialog\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\n\nexport interface ConfirmDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title: string;\n  description?: string;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  variant?: \"default\" | \"destructive\";\n  onConfirm: () => void;\n  loading?: boolean;\n}\n\n/**\n * Pre-composed confirmation dialog for delete/action confirmations.\n *\n * @example\n * ```tsx\n * <ConfirmDialog\n *   open={showDelete}\n *   onOpenChange={setShowDelete}\n *   title=\"Delete brand?\"\n *   description=\"This action cannot be undone.\"\n *   variant=\"destructive\"\n *   onConfirm={() => deleteBrand.mutate(uid)}\n *   loading={deleteBrand.isPending}\n * />\n * ```\n */\nfunction ConfirmDialog({\n  open,\n  onOpenChange,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  cancelLabel = \"Cancel\",\n  variant = \"default\",\n  onConfirm,\n  loading = false,\n}: ConfirmDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </DialogHeader>\n        <DialogFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)} disabled={loading}>\n            {cancelLabel}\n          </Button>\n          <Button variant={variant} onClick={onConfirm} disabled={loading}>\n            {loading && <Spinner size=\"sm\" className=\"mr-2\" />}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\nConfirmDialog.displayName = \"ConfirmDialog\";\n\nexport { ConfirmDialog };\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwDQ,SACE,KADF;AAdR,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AACZ,GAAuB;AACrB,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBACC;AAAA,yBAAC,gBACC;AAAA,0BAAC,eAAa,iBAAM;AAAA,MACnB,eAAe,oBAAC,qBAAmB,uBAAY;AAAA,OAClD;AAAA,IACA,qBAAC,gBACC;AAAA,0BAAC,UAAO,SAAQ,WAAU,SAAS,MAAM,aAAa,KAAK,GAAG,UAAU,SACrE,uBACH;AAAA,MACA,qBAAC,UAAO,SAAkB,SAAS,WAAW,UAAU,SACrD;AAAA,mBAAW,oBAAC,WAAQ,MAAK,MAAK,WAAU,QAAO;AAAA,QAC/C;AAAA,SACH;AAAA,OACF;AAAA,KACF,GACF;AAEJ;AACA,cAAc,cAAc;","names":[]}

package/dist/data-table.cjs

@@ -0,0 +1,134 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+"use client";
+
+
+
+
+
+
+
+var _chunkNEY26NNFcjs = require('./chunk-NEY26NNF.cjs');
+
+
+var _chunk7EXXNELXcjs = require('./chunk-7EXXNELX.cjs');
+
+
+var _chunk5VMEEKZ5cjs = require('./chunk-5VMEEKZ5.cjs');
+
+// src/data-table.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+
+
+
+
+
+
+var _reacttable = require('@tanstack/react-table');
+var _web = require('@simpleapps-com/augur-utils/web');
+var _lu = require('react-icons/lu');
+var _jsxruntime = require('react/jsx-runtime');
+function buildTanstackColumns(columns) {
+  return columns.map((col) => ({
+    id: col.key,
+    accessorKey: col.key,
+    header: col.header,
+    enableSorting: _nullishCoalesce(col.sortable, () => ( false)),
+    cell: col.render ? (info) => col.render(info.row.original) : (info) => String(_nullishCoalesce(info.getValue(), () => ( ""))),
+    meta: { align: col.align }
+  }));
+}
+var alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function DataTable({
+  columns,
+  data,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  onRowClick,
+  loading = false,
+  emptyMessage = "No results.",
+  toolbar,
+  className,
+  getRowId
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const [globalFilter, setGlobalFilter] = React.useState("");
+  const tanstackColumns = React.useMemo(() => buildTanstackColumns(columns), [columns]);
+  const table = _reacttable.useReactTable.call(void 0, {
+    data,
+    columns: tanstackColumns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: _reacttable.getCoreRowModel.call(void 0, ),
+    getSortedRowModel: _reacttable.getSortedRowModel.call(void 0, ),
+    getFilteredRowModel: _reacttable.getFilteredRowModel.call(void 0, ),
+    getRowId: getRowId ? (row) => getRowId(row) : void 0
+  });
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _web.cn.call(void 0, "space-y-4", className), children: [
+    (searchable || toolbar) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-4", children: [
+      searchable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk7EXXNELXcjs.Input,
+        {
+          placeholder: searchPlaceholder,
+          value: globalFilter,
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "max-w-sm"
+        }
+      ),
+      toolbar
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNEY26NNFcjs.Table, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableRow, { children: headerGroup.headers.map((header) => {
+        const align = _nullishCoalesce(_optionalChain([header, 'access', _ => _.column, 'access', _2 => _2.columnDef, 'access', _3 => _3.meta, 'optionalAccess', _4 => _4.align]), () => ( "left"));
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkNEY26NNFcjs.TableHead,
+          {
+            className: _web.cn.call(void 0, 
+              alignClass[align],
+              header.column.getCanSort() && "cursor-pointer select-none"
+            ),
+            onClick: header.column.getToggleSortingHandler(),
+            children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "inline-flex items-center gap-1", children: [
+              _reacttable.flexRender.call(void 0, header.column.columnDef.header, header.getContext()),
+              header.column.getCanSort() && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SortIndicator, { direction: header.column.getIsSorted() })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableBody, { children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableRow, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableCell, { colSpan: columns.length, className: "h-24 text-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5VMEEKZ5cjs.Spinner, { size: "lg", className: "mx-auto" }) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableRow, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNEY26NNFcjs.TableCell, { colSpan: columns.length, className: "h-24 text-center", children: emptyMessage }) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkNEY26NNFcjs.TableRow,
+        {
+          className: _web.cn.call(void 0, onRowClick && "cursor-pointer"),
+          onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+          children: row.getVisibleCells().map((cell) => {
+            const align = _nullishCoalesce(_optionalChain([cell, 'access', _5 => _5.column, 'access', _6 => _6.columnDef, 'access', _7 => _7.meta, 'optionalAccess', _8 => _8.align]), () => ( "left"));
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _chunkNEY26NNFcjs.TableCell,
+              {
+                className: alignClass[align],
+                children: _reacttable.flexRender.call(void 0, cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          })
+        },
+        row.id
+      )) })
+    ] })
+  ] });
+}
+DataTable.displayName = "DataTable";
+function SortIndicator({ direction }) {
+  if (direction === "asc") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuArrowUp, { className: "h-4 w-4" });
+  if (direction === "desc") return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuArrowDown, { className: "h-4 w-4" });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lu.LuArrowUpDown, { className: "text-muted-foreground/50 h-4 w-4" });
+}
+
+
+exports.DataTable = DataTable;
+//# sourceMappingURL=data-table.cjs.map

package/dist/data-table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/augur-packages/augur-packages/packages/augur-web/dist/data-table.cjs","../src/data-table.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/augur-packages/augur-packages/packages/augur-web/dist/data-table.cjs","sourcesContent":[null,"/** Sortable, searchable data table built on TanStack Table. */\n\"use client\";\n\nimport * as React from \"react\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  getFilteredRowModel,\n  useReactTable,\n  type ColumnDef as TanstackColumnDef,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport { cn } from \"@simpleapps-com/augur-utils/web\";\nimport { LuArrowDown, LuArrowUp, LuArrowUpDown } from \"react-icons/lu\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"./table\";\nimport { Input } from \"./input\";\nimport { Spinner } from \"./spinner\";\n\nexport interface ColumnDef<T> {\n  /** Property key on the data object. */\n  key: keyof T & string;\n  /** Column header label. */\n  header: string;\n  /** Enable sorting on this column. */\n  sortable?: boolean;\n  /** Custom cell renderer. Receives the row data object. */\n  render?: (row: T) => React.ReactNode;\n  /** Text alignment. */\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nexport interface DataTableProps<T> {\n  /** Column definitions describing each table column. */\n  columns: ColumnDef<T>[];\n  /** Data rows to display. */\n  data: T[];\n  /** Show a search input above the table. */\n  searchable?: boolean;\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /** Callback when a row is clicked. Receives the row data. */\n  onRowClick?: (row: T) => void;\n  /** Show a loading spinner instead of data. */\n  loading?: boolean;\n  /** Message shown when data is empty. */\n  emptyMessage?: string;\n  /** Additional toolbar content rendered between search and table. */\n  toolbar?: React.ReactNode;\n  /** Additional class name for the root container. */\n  className?: string;\n  /** Row key extractor. Defaults to the row index. */\n  getRowId?: (row: T) => string;\n}\n\nfunction buildTanstackColumns<T>(columns: ColumnDef<T>[]): TanstackColumnDef<T, unknown>[] {\n  return columns.map((col) => ({\n    id: col.key,\n    accessorKey: col.key,\n    header: col.header,\n    enableSorting: col.sortable ?? false,\n    cell: col.render\n      ? (info) => col.render!(info.row.original)\n      : (info) => String(info.getValue() ?? \"\"),\n    meta: { align: col.align },\n  }));\n}\n\nconst alignClass = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n} as const;\n\n/**\n * Data-driven table with sorting and search. Wraps TanStack Table with\n * the augur-web Table primitives.\n *\n * @example\n * ```tsx\n * const columns: ColumnDef<Brand>[] = [\n *   { key: \"brandsUid\", header: \"UID\", sortable: true },\n *   { key: \"brandsName\", header: \"Name\", sortable: true },\n *   { key: \"brandsDesc\", header: \"Description\" },\n * ];\n *\n * <DataTable columns={columns} data={brands} searchable onRowClick={selectBrand} />\n * ```\n */\nfunction DataTable<T>({\n  columns,\n  data,\n  searchable = false,\n  searchPlaceholder = \"Search...\",\n  onRowClick,\n  loading = false,\n  emptyMessage = \"No results.\",\n  toolbar,\n  className,\n  getRowId,\n}: DataTableProps<T>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [globalFilter, setGlobalFilter] = React.useState(\"\");\n\n  const tanstackColumns = React.useMemo(() => buildTanstackColumns(columns), [columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tanstackColumns,\n    state: { sorting, globalFilter },\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getRowId: getRowId ? (row) => getRowId(row) : undefined,\n  });\n\n  return (\n    <div className={cn(\"space-y-4\", className)}>\n      {(searchable || toolbar) && (\n        <div className=\"flex items-center gap-4\">\n          {searchable && (\n            <Input\n              placeholder={searchPlaceholder}\n              value={globalFilter}\n              onChange={(e) => setGlobalFilter(e.target.value)}\n              className=\"max-w-sm\"\n            />\n          )}\n          {toolbar}\n        </div>\n      )}\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const align =\n                  (header.column.columnDef.meta as { align?: string } | undefined)?.align ?? \"left\";\n                return (\n                  <TableHead\n                    key={header.id}\n                    className={cn(\n                      alignClass[align as keyof typeof alignClass],\n                      header.column.getCanSort() && \"cursor-pointer select-none\",\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                  >\n                    <span className=\"inline-flex items-center gap-1\">\n                      {flexRender(header.column.columnDef.header, header.getContext())}\n                      {header.column.getCanSort() && (\n                        <SortIndicator direction={header.column.getIsSorted()} />\n                      )}\n                    </span>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                <Spinner size=\"lg\" className=\"mx-auto\" />\n              </TableCell>\n            </TableRow>\n          ) : table.getRowModel().rows.length === 0 ? (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                {emptyMessage}\n              </TableCell>\n            </TableRow>\n          ) : (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                className={cn(onRowClick && \"cursor-pointer\")}\n                onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const align =\n                    (cell.column.columnDef.meta as { align?: string } | undefined)?.align ?? \"left\";\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className={alignClass[align as keyof typeof alignClass]}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\nDataTable.displayName = \"DataTable\";\n\nfunction SortIndicator({ direction }: { direction: false | \"asc\" | \"desc\" }) {\n  if (direction === \"asc\") return <LuArrowUp className=\"h-4 w-4\" />;\n  if (direction === \"desc\") return <LuArrowDown className=\"h-4 w-4\" />;\n  return <LuArrowUpDown className=\"text-muted-foreground/50 h-4 w-4\" />;\n}\n\nexport { DataTable };\n"]}

package/dist/data-table.d.cts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ColumnDef<T> {
+    /** Property key on the data object. */
+    key: keyof T & string;
+    /** Column header label. */
+    header: string;
+    /** Enable sorting on this column. */
+    sortable?: boolean;
+    /** Custom cell renderer. Receives the row data object. */
+    render?: (row: T) => React.ReactNode;
+    /** Text alignment. */
+    align?: "left" | "center" | "right";
+}
+interface DataTableProps<T> {
+    /** Column definitions describing each table column. */
+    columns: ColumnDef<T>[];
+    /** Data rows to display. */
+    data: T[];
+    /** Show a search input above the table. */
+    searchable?: boolean;
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Callback when a row is clicked. Receives the row data. */
+    onRowClick?: (row: T) => void;
+    /** Show a loading spinner instead of data. */
+    loading?: boolean;
+    /** Message shown when data is empty. */
+    emptyMessage?: string;
+    /** Additional toolbar content rendered between search and table. */
+    toolbar?: React.ReactNode;
+    /** Additional class name for the root container. */
+    className?: string;
+    /** Row key extractor. Defaults to the row index. */
+    getRowId?: (row: T) => string;
+}
+/**
+ * Data-driven table with sorting and search. Wraps TanStack Table with
+ * the augur-web Table primitives.
+ *
+ * @example
+ * ```tsx
+ * const columns: ColumnDef<Brand>[] = [
+ *   { key: "brandsUid", header: "UID", sortable: true },
+ *   { key: "brandsName", header: "Name", sortable: true },
+ *   { key: "brandsDesc", header: "Description" },
+ * ];
+ *
+ * <DataTable columns={columns} data={brands} searchable onRowClick={selectBrand} />
+ * ```
+ */
+declare function DataTable<T>({ columns, data, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, toolbar, className, getRowId, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+
+export { type ColumnDef, DataTable, type DataTableProps };

package/dist/data-table.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ColumnDef<T> {
+    /** Property key on the data object. */
+    key: keyof T & string;
+    /** Column header label. */
+    header: string;
+    /** Enable sorting on this column. */
+    sortable?: boolean;
+    /** Custom cell renderer. Receives the row data object. */
+    render?: (row: T) => React.ReactNode;
+    /** Text alignment. */
+    align?: "left" | "center" | "right";
+}
+interface DataTableProps<T> {
+    /** Column definitions describing each table column. */
+    columns: ColumnDef<T>[];
+    /** Data rows to display. */
+    data: T[];
+    /** Show a search input above the table. */
+    searchable?: boolean;
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Callback when a row is clicked. Receives the row data. */
+    onRowClick?: (row: T) => void;
+    /** Show a loading spinner instead of data. */
+    loading?: boolean;
+    /** Message shown when data is empty. */
+    emptyMessage?: string;
+    /** Additional toolbar content rendered between search and table. */
+    toolbar?: React.ReactNode;
+    /** Additional class name for the root container. */
+    className?: string;
+    /** Row key extractor. Defaults to the row index. */
+    getRowId?: (row: T) => string;
+}
+/**
+ * Data-driven table with sorting and search. Wraps TanStack Table with
+ * the augur-web Table primitives.
+ *
+ * @example
+ * ```tsx
+ * const columns: ColumnDef<Brand>[] = [
+ *   { key: "brandsUid", header: "UID", sortable: true },
+ *   { key: "brandsName", header: "Name", sortable: true },
+ *   { key: "brandsDesc", header: "Description" },
+ * ];
+ *
+ * <DataTable columns={columns} data={brands} searchable onRowClick={selectBrand} />
+ * ```
+ */
+declare function DataTable<T>({ columns, data, searchable, searchPlaceholder, onRowClick, loading, emptyMessage, toolbar, className, getRowId, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+
+export { type ColumnDef, DataTable, type DataTableProps };

package/dist/data-table.js

@@ -0,0 +1,134 @@
+"use client";
+"use client";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-XIKSI7NY.js";
+import {
+  Input
+} from "./chunk-HXQF6XTL.js";
+import {
+  Spinner
+} from "./chunk-UMNTUD2P.js";
+
+// src/data-table.tsx
+import * as React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { cn } from "@simpleapps-com/augur-utils/web";
+import { LuArrowDown, LuArrowUp, LuArrowUpDown } from "react-icons/lu";
+import { jsx, jsxs } from "react/jsx-runtime";
+function buildTanstackColumns(columns) {
+  return columns.map((col) => ({
+    id: col.key,
+    accessorKey: col.key,
+    header: col.header,
+    enableSorting: col.sortable ?? false,
+    cell: col.render ? (info) => col.render(info.row.original) : (info) => String(info.getValue() ?? ""),
+    meta: { align: col.align }
+  }));
+}
+var alignClass = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function DataTable({
+  columns,
+  data,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  onRowClick,
+  loading = false,
+  emptyMessage = "No results.",
+  toolbar,
+  className,
+  getRowId
+}) {
+  const [sorting, setSorting] = React.useState([]);
+  const [globalFilter, setGlobalFilter] = React.useState("");
+  const tanstackColumns = React.useMemo(() => buildTanstackColumns(columns), [columns]);
+  const table = useReactTable({
+    data,
+    columns: tanstackColumns,
+    state: { sorting, globalFilter },
+    onSortingChange: setSorting,
+    onGlobalFilterChange: setGlobalFilter,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getRowId: getRowId ? (row) => getRowId(row) : void 0
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", className), children: [
+    (searchable || toolbar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      searchable && /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: searchPlaceholder,
+          value: globalFilter,
+          onChange: (e) => setGlobalFilter(e.target.value),
+          className: "max-w-sm"
+        }
+      ),
+      toolbar
+    ] }),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
+        const align = header.column.columnDef.meta?.align ?? "left";
+        return /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: cn(
+              alignClass[align],
+              header.column.getCanSort() && "cursor-pointer select-none"
+            ),
+            onClick: header.column.getToggleSortingHandler(),
+            children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              flexRender(header.column.columnDef.header, header.getContext()),
+              header.column.getCanSort() && /* @__PURE__ */ jsx(SortIndicator, { direction: header.column.getIsSorted() })
+            ] })
+          },
+          header.id
+        );
+      }) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: loading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: /* @__PURE__ */ jsx(Spinner, { size: "lg", className: "mx-auto" }) }) }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: emptyMessage }) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          className: cn(onRowClick && "cursor-pointer"),
+          onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+          children: row.getVisibleCells().map((cell) => {
+            const align = cell.column.columnDef.meta?.align ?? "left";
+            return /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: alignClass[align],
+                children: flexRender(cell.column.columnDef.cell, cell.getContext())
+              },
+              cell.id
+            );
+          })
+        },
+        row.id
+      )) })
+    ] })
+  ] });
+}
+DataTable.displayName = "DataTable";
+function SortIndicator({ direction }) {
+  if (direction === "asc") return /* @__PURE__ */ jsx(LuArrowUp, { className: "h-4 w-4" });
+  if (direction === "desc") return /* @__PURE__ */ jsx(LuArrowDown, { className: "h-4 w-4" });
+  return /* @__PURE__ */ jsx(LuArrowUpDown, { className: "text-muted-foreground/50 h-4 w-4" });
+}
+export {
+  DataTable
+};
+//# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data-table.tsx"],"sourcesContent":["/** Sortable, searchable data table built on TanStack Table. */\n\"use client\";\n\nimport * as React from \"react\";\nimport {\n  flexRender,\n  getCoreRowModel,\n  getSortedRowModel,\n  getFilteredRowModel,\n  useReactTable,\n  type ColumnDef as TanstackColumnDef,\n  type SortingState,\n} from \"@tanstack/react-table\";\nimport { cn } from \"@simpleapps-com/augur-utils/web\";\nimport { LuArrowDown, LuArrowUp, LuArrowUpDown } from \"react-icons/lu\";\nimport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from \"./table\";\nimport { Input } from \"./input\";\nimport { Spinner } from \"./spinner\";\n\nexport interface ColumnDef<T> {\n  /** Property key on the data object. */\n  key: keyof T & string;\n  /** Column header label. */\n  header: string;\n  /** Enable sorting on this column. */\n  sortable?: boolean;\n  /** Custom cell renderer. Receives the row data object. */\n  render?: (row: T) => React.ReactNode;\n  /** Text alignment. */\n  align?: \"left\" | \"center\" | \"right\";\n}\n\nexport interface DataTableProps<T> {\n  /** Column definitions describing each table column. */\n  columns: ColumnDef<T>[];\n  /** Data rows to display. */\n  data: T[];\n  /** Show a search input above the table. */\n  searchable?: boolean;\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /** Callback when a row is clicked. Receives the row data. */\n  onRowClick?: (row: T) => void;\n  /** Show a loading spinner instead of data. */\n  loading?: boolean;\n  /** Message shown when data is empty. */\n  emptyMessage?: string;\n  /** Additional toolbar content rendered between search and table. */\n  toolbar?: React.ReactNode;\n  /** Additional class name for the root container. */\n  className?: string;\n  /** Row key extractor. Defaults to the row index. */\n  getRowId?: (row: T) => string;\n}\n\nfunction buildTanstackColumns<T>(columns: ColumnDef<T>[]): TanstackColumnDef<T, unknown>[] {\n  return columns.map((col) => ({\n    id: col.key,\n    accessorKey: col.key,\n    header: col.header,\n    enableSorting: col.sortable ?? false,\n    cell: col.render\n      ? (info) => col.render!(info.row.original)\n      : (info) => String(info.getValue() ?? \"\"),\n    meta: { align: col.align },\n  }));\n}\n\nconst alignClass = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n} as const;\n\n/**\n * Data-driven table with sorting and search. Wraps TanStack Table with\n * the augur-web Table primitives.\n *\n * @example\n * ```tsx\n * const columns: ColumnDef<Brand>[] = [\n *   { key: \"brandsUid\", header: \"UID\", sortable: true },\n *   { key: \"brandsName\", header: \"Name\", sortable: true },\n *   { key: \"brandsDesc\", header: \"Description\" },\n * ];\n *\n * <DataTable columns={columns} data={brands} searchable onRowClick={selectBrand} />\n * ```\n */\nfunction DataTable<T>({\n  columns,\n  data,\n  searchable = false,\n  searchPlaceholder = \"Search...\",\n  onRowClick,\n  loading = false,\n  emptyMessage = \"No results.\",\n  toolbar,\n  className,\n  getRowId,\n}: DataTableProps<T>) {\n  const [sorting, setSorting] = React.useState<SortingState>([]);\n  const [globalFilter, setGlobalFilter] = React.useState(\"\");\n\n  const tanstackColumns = React.useMemo(() => buildTanstackColumns(columns), [columns]);\n\n  const table = useReactTable({\n    data,\n    columns: tanstackColumns,\n    state: { sorting, globalFilter },\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getRowId: getRowId ? (row) => getRowId(row) : undefined,\n  });\n\n  return (\n    <div className={cn(\"space-y-4\", className)}>\n      {(searchable || toolbar) && (\n        <div className=\"flex items-center gap-4\">\n          {searchable && (\n            <Input\n              placeholder={searchPlaceholder}\n              value={globalFilter}\n              onChange={(e) => setGlobalFilter(e.target.value)}\n              className=\"max-w-sm\"\n            />\n          )}\n          {toolbar}\n        </div>\n      )}\n      <Table>\n        <TableHeader>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <TableRow key={headerGroup.id}>\n              {headerGroup.headers.map((header) => {\n                const align =\n                  (header.column.columnDef.meta as { align?: string } | undefined)?.align ?? \"left\";\n                return (\n                  <TableHead\n                    key={header.id}\n                    className={cn(\n                      alignClass[align as keyof typeof alignClass],\n                      header.column.getCanSort() && \"cursor-pointer select-none\",\n                    )}\n                    onClick={header.column.getToggleSortingHandler()}\n                  >\n                    <span className=\"inline-flex items-center gap-1\">\n                      {flexRender(header.column.columnDef.header, header.getContext())}\n                      {header.column.getCanSort() && (\n                        <SortIndicator direction={header.column.getIsSorted()} />\n                      )}\n                    </span>\n                  </TableHead>\n                );\n              })}\n            </TableRow>\n          ))}\n        </TableHeader>\n        <TableBody>\n          {loading ? (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                <Spinner size=\"lg\" className=\"mx-auto\" />\n              </TableCell>\n            </TableRow>\n          ) : table.getRowModel().rows.length === 0 ? (\n            <TableRow>\n              <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n                {emptyMessage}\n              </TableCell>\n            </TableRow>\n          ) : (\n            table.getRowModel().rows.map((row) => (\n              <TableRow\n                key={row.id}\n                className={cn(onRowClick && \"cursor-pointer\")}\n                onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n              >\n                {row.getVisibleCells().map((cell) => {\n                  const align =\n                    (cell.column.columnDef.meta as { align?: string } | undefined)?.align ?? \"left\";\n                  return (\n                    <TableCell\n                      key={cell.id}\n                      className={alignClass[align as keyof typeof alignClass]}\n                    >\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  );\n                })}\n              </TableRow>\n            ))\n          )}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\nDataTable.displayName = \"DataTable\";\n\nfunction SortIndicator({ direction }: { direction: false | \"asc\" | \"desc\" }) {\n  if (direction === \"asc\") return <LuArrowUp className=\"h-4 w-4\" />;\n  if (direction === \"desc\") return <LuArrowDown className=\"h-4 w-4\" />;\n  return <LuArrowUpDown className=\"text-muted-foreground/50 h-4 w-4\" />;\n}\n\nexport { DataTable };\n"],"mappings":"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","names":[]}