@lattice-php/lattice 0.1.0

package/dist/table/components/column-header.js

@@ -0,0 +1,37 @@
+import { getColumnAriaSort, getColumnSort } from "../query.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+//#region resources/js/table/components/column-header.tsx
+function SortIndicator({ sort }) {
+	if (sort?.direction === "asc") return /* @__PURE__ */ jsx(ArrowUp, {
+		"aria-hidden": "true",
+		className: "size-3.5"
+	});
+	if (sort?.direction === "desc") return /* @__PURE__ */ jsx(ArrowDown, {
+		"aria-hidden": "true",
+		className: "size-3.5"
+	});
+	return /* @__PURE__ */ jsx(ChevronsUpDown, {
+		"aria-hidden": "true",
+		className: "size-3.5 opacity-50"
+	});
+}
+function ColumnHeader({ column, processing, sort, state }) {
+	const columnSort = getColumnSort(state, column);
+	return /* @__PURE__ */ jsx("div", {
+		"aria-sort": getColumnAriaSort(columnSort),
+		className: "px-4 py-3 text-left align-middle font-medium text-lt-muted-fg",
+		role: "columnheader",
+		children: column.sortable ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "inline-flex items-center gap-1.5 font-medium",
+			disabled: processing,
+			onClick: () => sort(column),
+			children: [`Sort ${column.label}`, /* @__PURE__ */ jsx(SortIndicator, { sort: columnSort })]
+		}) : /* @__PURE__ */ jsx("span", { children: column.label })
+	});
+}
+//#endregion
+export { ColumnHeader };
+
+//# sourceMappingURL=column-header.js.map

package/dist/table/components/column-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, ChevronsUpDown } from \"lucide-react\";\nimport { getColumnAriaSort, getColumnSort } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <ArrowUp aria-hidden=\"true\" className=\"size-3.5\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <ArrowDown aria-hidden=\"true\" className=\"size-3.5\" />;\n  }\n\n  return <ChevronsUpDown aria-hidden=\"true\" className=\"size-3.5 opacity-50\" />;\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className=\"px-4 py-3 text-left align-middle font-medium text-lt-muted-fg\"\n      role=\"columnheader\"\n    >\n      {column.sortable ? (\n        <button\n          type=\"button\"\n          className=\"inline-flex items-center gap-1.5 font-medium\"\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          {`Sort ${column.label}`}\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span>{column.label}</span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,SAAD;EAAS,eAAY;EAAO,WAAU;CAAY,CAAA;CAG3D,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,WAAD;EAAW,eAAY;EAAO,WAAU;CAAY,CAAA;CAG7D,OAAO,oBAAC,gBAAD;EAAgB,eAAY;EAAO,WAAU;CAAuB,CAAA;AAC7E;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,MACA,SAMC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAE9C,OACE,oBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAU;EACV,MAAK;YAEJ,OAAO,WACN,qBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,UAAU;GACV,eAAe,KAAK,MAAM;aAJ5B,CAMG,QAAQ,OAAO,SAChB,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAY,CAAA;CAEzB,CAAA;AAET"}

package/dist/table/components/filter-stack-bar.d.ts

@@ -0,0 +1,7 @@
+import { FilterClause, TableColumn } from '../types';
+export declare function FilterStackBar({ filters, columns, processing, onRemove, }: {
+    filters: FilterClause[];
+    columns: TableColumn[];
+    processing: boolean;
+    onRemove: (index: number) => void;
+}): import("react").JSX.Element;

package/dist/table/components/filter-stack-bar.js

@@ -0,0 +1,35 @@
+import { flattenColumns } from "../payload.js";
+import { operatorLabel } from "../query.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region resources/js/table/components/filter-stack-bar.tsx
+function FilterStackBar({ filters, columns, processing, onRemove }) {
+	const labels = new Map(flattenColumns(columns).map((column) => [column.key, column.label]));
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm",
+		children: filters.map((clause, index) => {
+			const label = labels.get(clause.field) ?? clause.field;
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsxs("span", { children: [`${label} ${operatorLabel(clause.operator)}: `, /* @__PURE__ */ jsx("span", {
+					className: "font-semibold",
+					children: clause.value
+				})] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
+					disabled: processing,
+					"aria-label": `Remove ${label} filter`,
+					onClick: () => onRemove(index),
+					children: /* @__PURE__ */ jsx(X, {
+						"aria-hidden": "true",
+						className: "size-3.5"
+					})
+				})]
+			}, `${clause.field}-${clause.operator}-${index}`);
+		})
+	});
+}
+//#endregion
+export { FilterStackBar };
+
+//# sourceMappingURL=filter-stack-bar.js.map

package/dist/table/components/filter-stack-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-stack-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-stack-bar.tsx"],"sourcesContent":["import { X } from \"lucide-react\";\nimport { flattenColumns } from \"../payload\";\nimport { operatorLabel } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\n\nexport function FilterStackBar({\n  filters,\n  columns,\n  processing,\n  onRemove,\n}: {\n  filters: FilterClause[];\n  columns: TableColumn[];\n  processing: boolean;\n  onRemove: (index: number) => void;\n}) {\n  const labels = new Map(flattenColumns(columns).map((column) => [column.key, column.label]));\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {filters.map((clause, index) => {\n        const label = labels.get(clause.field) ?? clause.field;\n\n        return (\n          <span\n            key={`${clause.field}-${clause.operator}-${index}`}\n            className=\"inline-flex items-center gap-1.5\"\n          >\n            <span>\n              {`${label} ${operatorLabel(clause.operator)}: `}\n              <span className=\"font-semibold\">{clause.value}</span>\n            </span>\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Remove ${label} filter`}\n              onClick={() => onRemove(index)}\n            >\n              <X aria-hidden=\"true\" className=\"size-3.5\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,eAAe,EAC7B,SACA,SACA,YACA,YAMC;CACD,MAAM,SAAS,IAAI,IAAI,eAAe,OAAO,EAAE,KAAK,WAAW,CAAC,OAAO,KAAK,OAAO,KAAK,CAAC,CAAC;CAE1F,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,QAAQ,OAAO,IAAI,OAAO,KAAK,KAAK,OAAO;GAEjD,OACE,qBAAC,QAAD;IAEE,WAAU;cAFZ,CAIE,qBAAC,QAAD,EAAA,UAAA,CACG,GAAG,MAAM,GAAG,cAAc,OAAO,QAAQ,EAAE,KAC5C,oBAAC,QAAD;KAAM,WAAU;eAAiB,OAAO;IAAY,CAAA,CAChD,EAAA,CAAA,GACN,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,UAAU;KACV,cAAY,UAAU,MAAM;KAC5B,eAAe,SAAS,KAAK;eAE7B,oBAAC,GAAD;MAAG,eAAY;MAAO,WAAU;KAAY,CAAA;IACtC,CAAA,CACJ;MAhBC,GAAG,OAAO,MAAM,GAAG,OAAO,SAAS,GAAG,OAgBvC;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/table/components/filter-value-input.d.ts

@@ -0,0 +1,11 @@
+import { ControlType } from '../../../../generated/types';
+export declare function FilterValueInput({ type, label, value, processing, withSearchIcon, ariaLabel, onCommit, onClear, }: {
+    type: ControlType;
+    label: string;
+    value: string;
+    processing: boolean;
+    withSearchIcon?: boolean;
+    ariaLabel?: string;
+    onCommit: (value: string) => void;
+    onClear?: () => void;
+}): import("react").JSX.Element;

package/dist/table/components/filter-value-input.js

@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+//#region resources/js/table/components/filter-value-input.tsx
+var baseClass = "h-9 w-full rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal";
+function FilterValueInput({ type, label, value, processing, withSearchIcon = false, ariaLabel, onCommit, onClear }) {
+	const [draft, setDraft] = useState(value);
+	const inputLabel = ariaLabel ?? `Filter ${label}`;
+	useEffect(() => {
+		setDraft(value);
+	}, [value]);
+	if (type === "boolean") return /* @__PURE__ */ jsxs("select", {
+		"aria-label": inputLabel,
+		className: baseClass,
+		disabled: processing,
+		value,
+		onChange: (event) => onCommit(event.target.value),
+		children: [
+			/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: "All"
+			}),
+			/* @__PURE__ */ jsx("option", {
+				value: "true",
+				children: "True"
+			}),
+			/* @__PURE__ */ jsx("option", {
+				value: "false",
+				children: "False"
+			})
+		]
+	});
+	if (type === "date") return /* @__PURE__ */ jsx("input", {
+		type: "date",
+		"aria-label": inputLabel,
+		className: baseClass,
+		disabled: processing,
+		value: draft,
+		onChange: (event) => {
+			setDraft(event.target.value);
+			onCommit(event.target.value);
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex items-center",
+		children: [
+			withSearchIcon && /* @__PURE__ */ jsx(Search, {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute left-2 size-4 text-lt-muted-fg"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: type === "number" ? "number" : "text",
+				"aria-label": inputLabel,
+				className: `${baseClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
+				disabled: processing,
+				value: draft,
+				onChange: (event) => setDraft(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") onCommit(draft);
+				},
+				onBlur: () => {
+					if (draft !== value) onCommit(draft);
+				}
+			}),
+			onClear && draft !== "" && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `Clear ${label} filter`,
+				className: "absolute right-1 inline-flex size-6 items-center justify-center rounded hover:bg-lt-muted disabled:opacity-50",
+				disabled: processing,
+				onClick: onClear,
+				children: /* @__PURE__ */ jsx(X, {
+					"aria-hidden": "true",
+					className: "size-3.5"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { FilterValueInput };
+
+//# sourceMappingURL=filter-value-input.js.map

package/dist/table/components/filter-value-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-value-input.js","names":[],"sources":["../../../resources/js/table/components/filter-value-input.tsx"],"sourcesContent":["import { Search, X } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport type { ControlType } from \"@lattice/lattice/generated/types\";\n\nconst baseClass =\n  \"h-9 w-full rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal\";\n\nexport function FilterValueInput({\n  type,\n  label,\n  value,\n  processing,\n  withSearchIcon = false,\n  ariaLabel,\n  onCommit,\n  onClear,\n}: {\n  type: ControlType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  ariaLabel?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? `Filter ${label}`;\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <select\n        aria-label={inputLabel}\n        className={baseClass}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">All</option>\n        <option value=\"true\">True</option>\n        <option value=\"false\">False</option>\n      </select>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <input\n        type=\"date\"\n        aria-label={inputLabel}\n        className={baseClass}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => {\n          setDraft(event.target.value);\n          onCommit(event.target.value);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div className=\"relative flex items-center\">\n      {withSearchIcon && (\n        <Search\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-4 text-lt-muted-fg\"\n        />\n      )}\n      <input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        aria-label={inputLabel}\n        className={`${baseClass} ${withSearchIcon ? \"pl-8\" : \"\"} ${onClear ? \"pr-8\" : \"\"}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            onCommit(draft);\n          }\n        }}\n        onBlur={() => {\n          if (draft !== value) {\n            onCommit(draft);\n          }\n        }}\n      />\n      {onClear && draft !== \"\" && (\n        <button\n          type=\"button\"\n          aria-label={`Clear ${label} filter`}\n          className=\"absolute right-1 inline-flex size-6 items-center justify-center rounded hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onClear}\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,IAAM,YACJ;AAEF,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,WACA,UACA,WAUC;CACD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,UAAU;CAE1C,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,WAAW;EACX,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YALlD;GAOE,oBAAC,UAAD;IAAQ,OAAM;cAAG;GAAW,CAAA;GAC5B,oBAAC,UAAD;IAAQ,OAAM;cAAO;GAAY,CAAA;GACjC,oBAAC,UAAD;IAAQ,OAAM;cAAQ;GAAa,CAAA;EAC7B;;CAIZ,IAAI,SAAS,QACX,OACE,oBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW;EACX,UAAU;EACV,OAAO;EACP,WAAW,UAAU;GACnB,SAAS,MAAM,OAAO,KAAK;GAC3B,SAAS,MAAM,OAAO,KAAK;EAC7B;CACD,CAAA;CAIL,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,kBACC,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,SAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,cAAY;IACZ,WAAW,GAAG,UAAU,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC9E,UAAU;IACV,OAAO;IACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,SAChB,SAAS,KAAK;IAElB;IACA,cAAc;KACZ,IAAI,UAAU,OACZ,SAAS,KAAK;IAElB;GACD,CAAA;GACA,WAAW,UAAU,MACpB,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,SAAS,MAAM;IAC3B,WAAU;IACV,UAAU;IACV,SAAS;cAET,oBAAC,GAAD;KAAG,eAAY;KAAO,WAAU;IAAY,CAAA;GACtC,CAAA;EAEP;;AAET"}

package/dist/table/components/pagination.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+import { PaginationType } from '../../../../generated/types';
+import { TablePagination as TablePaginationData } from '../types';
+export declare function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, onPage, onLoadMore, }: {
+    pagination: TablePaginationData;
+    currentPage: number;
+    processing: boolean;
+    mode: PaginationType;
+    hasNextPage: boolean;
+    visiblePages: number[];
+    infiniteLoaderRef: RefObject<HTMLDivElement | null>;
+    onPage: (page: number) => void;
+    onLoadMore: () => void;
+}): import("react").JSX.Element;

package/dist/table/components/pagination.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/table/components/pagination.tsx
+function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, onPage, onLoadMore }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm",
+		children: [/* @__PURE__ */ jsx("span", { children: pagination.total === void 0 ? `Page ${currentPage}` : `Showing ${pagination.from ?? 0}-${pagination.to ?? 0} of ${pagination.total}` }), mode === "infinite" ? /* @__PURE__ */ jsx("div", {
+			ref: infiniteLoaderRef,
+			className: "flex items-center gap-2",
+			children: pagination.hasMore ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
+				disabled: processing,
+				onClick: onLoadMore,
+				children: processing ? "Loading..." : "Load more"
+			}) : /* @__PURE__ */ jsx("span", {
+				className: "text-lt-muted-fg",
+				children: "All rows loaded"
+			})
+		}) : mode === "simple" ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
+				disabled: processing || currentPage <= 1,
+				onClick: () => onPage(currentPage - 1),
+				children: "Previous"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
+				disabled: processing || !hasNextPage,
+				onClick: () => onPage(currentPage + 1),
+				children: "Next"
+			})]
+		}) : mode === "table" ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
+					disabled: processing || currentPage <= 1,
+					onClick: () => onPage(currentPage - 1),
+					children: "Previous"
+				}),
+				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border font-medium disabled:opacity-50",
+					disabled: processing || pageNumber === currentPage,
+					"aria-current": pageNumber === currentPage ? "page" : void 0,
+					"aria-label": `Page ${pageNumber}`,
+					onClick: () => onPage(pageNumber),
+					children: pageNumber
+				}, pageNumber)),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
+					disabled: processing || !hasNextPage,
+					onClick: () => onPage(currentPage + 1),
+					children: "Next"
+				})
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { TablePagination };
+
+//# sourceMappingURL=pagination.js.map

package/dist/table/components/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../resources/js/table/components/pagination.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport type { PaginationType } from \"@lattice/lattice/generated/types\";\nimport type { TablePagination as TablePaginationData } from \"../types\";\n\nexport function TablePagination({\n  pagination,\n  currentPage,\n  processing,\n  mode,\n  hasNextPage,\n  visiblePages,\n  infiniteLoaderRef,\n  onPage,\n  onLoadMore,\n}: {\n  pagination: TablePaginationData;\n  currentPage: number;\n  processing: boolean;\n  mode: PaginationType;\n  hasNextPage: boolean;\n  visiblePages: number[];\n  infiniteLoaderRef: RefObject<HTMLDivElement | null>;\n  onPage: (page: number) => void;\n  onLoadMore: () => void;\n}) {\n  return (\n    <div className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\">\n      <span>\n        {pagination.total === undefined\n          ? `Page ${currentPage}`\n          : `Showing ${pagination.from ?? 0}-${pagination.to ?? 0} of ${pagination.total}`}\n      </span>\n      {mode === \"infinite\" ? (\n        <div ref={infiniteLoaderRef} className=\"flex items-center gap-2\">\n          {pagination.hasMore ? (\n            <button\n              type=\"button\"\n              className=\"h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing ? \"Loading...\" : \"Load more\"}\n            </button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">All rows loaded</span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            className=\"h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            Previous\n          </button>\n          <button\n            type=\"button\"\n            className=\"h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            Next\n          </button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            className=\"h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            Previous\n          </button>\n          {visiblePages.map((pageNumber) => (\n            <button\n              key={pageNumber}\n              type=\"button\"\n              className=\"inline-flex size-9 items-center justify-center rounded-lt-sm border border-lt-border font-medium disabled:opacity-50\"\n              disabled={processing || pageNumber === currentPage}\n              aria-current={pageNumber === currentPage ? \"page\" : undefined}\n              aria-label={`Page ${pageNumber}`}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </button>\n          ))}\n          <button\n            type=\"button\"\n            className=\"h-9 rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            Next\n          </button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;AAIA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,QACA,cAWC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD,EAAA,UACG,WAAW,UAAU,KAAA,IAClB,QAAQ,gBACR,WAAW,WAAW,QAAQ,EAAE,GAAG,WAAW,MAAM,EAAE,MAAM,WAAW,QACvE,CAAA,GACL,SAAS,aACR,oBAAC,OAAD;GAAK,KAAK;GAAmB,WAAU;aACpC,WAAW,UACV,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU;IACV,SAAS;cAER,aAAa,eAAe;GACvB,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cAAmB;GAAqB,CAAA;EAEvD,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cACtC;GAEO,CAAA,GACR,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cACtC;GAEO,CAAA,CACL;OACH,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eACtC;IAEO,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,UAAD;KAEE,MAAK;KACL,WAAU;KACV,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,QAAQ;KACpB,eAAe,OAAO,UAAU;eAE/B;IACK,GATD,UASC,CACT;IACD,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eACtC;IAEO,CAAA;GACL;OACH,IACD;;AAET"}

package/dist/table/components/sort-bar.d.ts

@@ -0,0 +1,7 @@
+import { TableColumn, TableSort, TableState } from '../types';
+export declare function SortBar({ columns, state, processing, onClear, }: {
+    columns: TableColumn[];
+    state: TableState;
+    processing: boolean;
+    onClear: (sort: TableSort) => void;
+}): import("react").JSX.Element;

package/dist/table/components/sort-bar.js

@@ -0,0 +1,43 @@
+import { getSortColumn, getSortDirectionLabel } from "../query.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, X } from "lucide-react";
+//#region resources/js/table/components/sort-bar.tsx
+function SortBar({ columns, state, processing, onClear }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm",
+		children: state.sorts.map((sort, index) => {
+			const label = getSortColumn(columns, sort)?.label ?? sort.key;
+			const Chevron = sort.direction === "desc" ? ArrowDown : ArrowUp;
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: `${index + 1}. ${label}`
+					}),
+					/* @__PURE__ */ jsx(Chevron, {
+						role: "img",
+						"aria-label": getSortDirectionLabel(sort.direction),
+						className: "size-3.5 text-lt-muted-fg"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
+						disabled: processing,
+						"aria-label": `Clear ${label} sort`,
+						"data-test": `clear-${sort.key}-sort`,
+						onClick: () => onClear(sort),
+						children: /* @__PURE__ */ jsx(X, {
+							"aria-hidden": "true",
+							className: "size-3.5"
+						})
+					})
+				]
+			}, sort.key);
+		})
+	});
+}
+//#endregion
+export { SortBar };
+
+//# sourceMappingURL=sort-bar.js.map

package/dist/table/components/sort-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp, X } from \"lucide-react\";\nimport { getSortColumn, getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columns,\n  state,\n  processing,\n  onClear,\n}: {\n  columns: TableColumn[];\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = getSortColumn(columns, sort);\n        const label = column?.label ?? sort.key;\n        const Chevron = sort.direction === \"desc\" ? ArrowDown : ArrowUp;\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Chevron\n              role=\"img\"\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-3.5 text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <X aria-hidden=\"true\" className=\"size-3.5\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,SACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,cAAc,SAAS,IACxB,GAAQ,SAAS,KAAK;GACpC,MAAM,UAAU,KAAK,cAAc,SAAS,YAAY;GAExD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,SAAD;MACE,MAAK;MACL,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,GAAD;OAAG,eAAY;OAAO,WAAU;MAAY,CAAA;KACtC,CAAA;IACJ;MAjBK,KAAK,GAiBV;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/table/components/table-action-node.d.ts

@@ -0,0 +1,4 @@
+import { Node } from '../../../../core/types';
+export declare function TableActionNode({ node }: {
+    node: Node;
+}): import("react").JSX.Element | null;

package/dist/table/components/table-action-node.js

@@ -0,0 +1,24 @@
+import ActionComponent from "../../action/components/action.js";
+import ActionGroupComponent from "../../action/components/action-group.js";
+import LinkComponent from "../../core/components/link.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/table-action-node.tsx
+function TableActionNode({ node }) {
+	if (node.type === "action") return /* @__PURE__ */ jsx(ActionComponent, {
+		node,
+		children: null
+	});
+	if (node.type === "action.group") return /* @__PURE__ */ jsx(ActionGroupComponent, {
+		node,
+		children: node.children?.map((childNode, index) => /* @__PURE__ */ jsx(TableActionNode, { node: childNode }, childNode.key ?? childNode.id ?? `${childNode.type}-${index}`)) ?? null
+	});
+	if (node.type === "link") return /* @__PURE__ */ jsx(LinkComponent, {
+		node,
+		children: null
+	});
+	return null;
+}
+//#endregion
+export { TableActionNode };
+
+//# sourceMappingURL=table-action-node.js.map

package/dist/table/components/table-action-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-action-node.js","names":[],"sources":["../../../resources/js/table/components/table-action-node.tsx"],"sourcesContent":["import type { Node } from \"@lattice/lattice/core/types\";\nimport ActionComponent from \"@lattice/lattice/action/components/action\";\nimport ActionGroupComponent from \"@lattice/lattice/action/components/action-group\";\nimport LinkComponent from \"@lattice/lattice/core/components/link\";\n\nexport function TableActionNode({ node }: { node: Node }) {\n  if (node.type === \"action\") {\n    return <ActionComponent node={node as Node<\"action\">}>{null}</ActionComponent>;\n  }\n\n  if (node.type === \"action.group\") {\n    return (\n      <ActionGroupComponent node={node as Node<\"action.group\">}>\n        {node.children?.map((childNode, index) => (\n          <TableActionNode\n            key={childNode.key ?? childNode.id ?? `${childNode.type}-${index}`}\n            node={childNode}\n          />\n        )) ?? null}\n      </ActionGroupComponent>\n    );\n  }\n\n  if (node.type === \"link\") {\n    return <LinkComponent node={node as Node<\"link\">}>{null}</LinkComponent>;\n  }\n\n  return null;\n}\n"],"mappings":";;;;;AAKA,SAAgB,gBAAgB,EAAE,QAAwB;CACxD,IAAI,KAAK,SAAS,UAChB,OAAO,oBAAC,iBAAD;EAAuB;YAAyB;CAAsB,CAAA;CAG/E,IAAI,KAAK,SAAS,gBAChB,OACE,oBAAC,sBAAD;EAA4B;YACzB,KAAK,UAAU,KAAK,WAAW,UAC9B,oBAAC,iBAAD,EAEE,MAAM,UACP,GAFM,UAAU,OAAO,UAAU,MAAM,GAAG,UAAU,KAAK,GAAG,OAE5D,CACF,KAAK;CACc,CAAA;CAI1B,IAAI,KAAK,SAAS,QAChB,OAAO,oBAAC,eAAD;EAAqB;YAAuB;CAAoB,CAAA;CAGzE,OAAO;AACT"}

package/dist/table/components/table-cell.d.ts

@@ -0,0 +1,5 @@
+import { TableColumn, TableRow } from '../types';
+export declare function ColumnCell({ column, row }: {
+    column: TableColumn;
+    row: TableRow;
+}): import("react").JSX.Element;

package/dist/table/components/table-cell.js

@@ -0,0 +1,63 @@
+import { copyToClipboard } from "../../clipboard/index.js";
+import { formatCell, resolveLink } from "../format.js";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+//#region resources/js/table/components/table-cell.tsx
+function ColumnCell({ column, row }) {
+	if (column.type === "stack") return /* @__PURE__ */ jsx("div", {
+		className: "grid gap-1",
+		children: (column.columns ?? []).map((stackedColumn) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TextCell, {
+			column: stackedColumn,
+			row,
+			value: row[stackedColumn.key]
+		}) }, stackedColumn.key))
+	});
+	return /* @__PURE__ */ jsx(TextCell, {
+		column,
+		row,
+		value: row[column.key]
+	});
+}
+function TextCell({ column, row, value }) {
+	const text = formatCell(value, column);
+	const [copied, setCopied] = useState(false);
+	const href = resolveLink(column, row, value);
+	const content = href ? /* @__PURE__ */ jsx("a", {
+		className: "underline underline-offset-2",
+		href,
+		rel: column.link?.external ? "noreferrer" : void 0,
+		target: column.link?.external ? "_blank" : void 0,
+		children: text
+	}) : text;
+	useEffect(() => {
+		if (!copied) return;
+		const timeout = window.setTimeout(() => setCopied(false), 1500);
+		return () => window.clearTimeout(timeout);
+	}, [copied]);
+	function handleCopy() {
+		copyToClipboard(text);
+		setCopied(true);
+	}
+	if (!column.copyable) return content;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", { children: content }), /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs",
+			"aria-label": `${copied ? "Copied" : "Copy"} ${column.label}`,
+			onClick: handleCopy,
+			children: [copied ? /* @__PURE__ */ jsx(Check, {
+				"aria-hidden": "true",
+				className: "size-3"
+			}) : /* @__PURE__ */ jsx(Copy, {
+				"aria-hidden": "true",
+				className: "size-3"
+			}), copied ? "Copied" : "Copy"]
+		})]
+	});
+}
+//#endregion
+export { ColumnCell };
+
+//# sourceMappingURL=table-cell.js.map

package/dist/table/components/table-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice/lattice/clipboard\";\nimport { Check, Copy } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../format\";\nimport type { TableColumn, TableRow } from \"../types\";\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  if (column.type === \"stack\") {\n    return (\n      <div className=\"grid gap-1\">\n        {(column.columns ?? []).map((stackedColumn) => (\n          <span key={stackedColumn.key}>\n            <TextCell column={stackedColumn} row={row} value={row[stackedColumn.key]} />\n          </span>\n        ))}\n      </div>\n    );\n  }\n\n  return <TextCell column={column} row={row} value={row[column.key]} />;\n}\n\nfunction TextCell({ column, row, value }: { column: TableColumn; row: TableRow; value: unknown }) {\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={column.link?.external ? \"noreferrer\" : undefined}\n      target={column.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!column.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Check aria-hidden=\"true\" className=\"size-3\" />\n        ) : (\n          <Copy aria-hidden=\"true\" className=\"size-3\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAClF,IAAI,OAAO,SAAS,SAClB,OACE,oBAAC,OAAD;EAAK,WAAU;aACX,OAAO,WAAW,CAAC,GAAG,KAAK,kBAC3B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;GAAU,QAAQ;GAAoB;GAAK,OAAO,IAAI,cAAc;EAAO,CAAA,EACvE,GAFK,cAAc,GAEnB,CACP;CACE,CAAA;CAIT,OAAO,oBAAC,UAAD;EAAkB;EAAa;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACtE;AAEA,SAAS,SAAS,EAAE,QAAQ,KAAK,SAAiE;CAChG,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,OAAO,MAAM,WAAW,eAAe,KAAA;EAC5C,QAAQ,OAAO,MAAM,WAAW,WAAW,KAAA;YAE1C;CACA,CAAA,IAEH;CAGF,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,OAAO,UACV,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aAJX,CAMG,SACC,oBAAC,OAAD;IAAO,eAAY;IAAO,WAAU;GAAU,CAAA,IAE9C,oBAAC,MAAD;IAAM,eAAY;IAAO,WAAU;GAAU,CAAA,GAE9C,SAAS,WAAW,MACf;IACJ;;AAEV"}

package/dist/table/components/table.d.ts

@@ -0,0 +1,3 @@
+import { RendererComponent } from '../../../../core/types';
+declare const TableComponent: RendererComponent<"table">;
+export default TableComponent;