@lattice-php/lattice 0.1.0 → 0.2.0

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

@@ -1,34 +1,45 @@
+import { Icon } from "../../icons/sprite.js";
 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, {
+	if (sort?.direction === "asc") return /* @__PURE__ */ jsx(Icon, {
+		name: "arrow-up",
 		"aria-hidden": "true",
-		className: "size-3.5"
+		className: "size-lt-icon-sm shrink-0"
 	});
-	if (sort?.direction === "desc") return /* @__PURE__ */ jsx(ArrowDown, {
+	if (sort?.direction === "desc") return /* @__PURE__ */ jsx(Icon, {
+		name: "arrow-down",
 		"aria-hidden": "true",
-		className: "size-3.5"
+		className: "size-lt-icon-sm shrink-0"
 	});
-	return /* @__PURE__ */ jsx(ChevronsUpDown, {
+	return /* @__PURE__ */ jsx(Icon, {
+		name: "chevrons-up-down",
 		"aria-hidden": "true",
-		className: "size-3.5 opacity-50"
+		className: "size-lt-icon-sm shrink-0 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",
+		className: "min-w-0 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",
+			"aria-label": `Sort ${column.label}`,
+			className: "flex w-full items-center gap-1.5 font-medium",
+			"data-test": `sort-${column.key}`,
 			disabled: processing,
 			onClick: () => sort(column),
-			children: [`Sort ${column.label}`, /* @__PURE__ */ jsx(SortIndicator, { sort: columnSort })]
-		}) : /* @__PURE__ */ jsx("span", { children: column.label })
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-left",
+				children: column.label
+			}), /* @__PURE__ */ jsx(SortIndicator, { sort: columnSort })]
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "block truncate",
+			children: column.label
+		})
 	});
 }
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\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 <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\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=\"min-w-0 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          aria-label={`Sort ${column.label}`}\n          className=\"flex w-full items-center gap-1.5 font-medium\"\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className=\"min-w-0 flex-1 truncate text-left\">{column.label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className=\"block truncate\">{column.label}</span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;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,cAAY,QAAQ,OAAO;GAC3B,WAAU;GACV,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAU;cAAqC,OAAO;GAAY,CAAA,GACxE,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAU;aAAkB,OAAO;EAAY,CAAA;CAEpD,CAAA;AAET"}

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

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

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

@@ -1,14 +1,14 @@
-import { flattenColumns } from "../payload.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.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]));
+function FilterStackBar({ filters, columnsByKey, processing, onRemove }) {
+	const { t } = useT("lattice");
 	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;
+			const label = columnsByKey.get(clause.field)?.label ?? 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", {
@@ -16,13 +16,15 @@ function FilterStackBar({ filters, columns, processing, onRemove }) {
 					children: clause.value
 				})] }), /* @__PURE__ */ jsx("button", {
 					type: "button",
+					"data-test": `filter-chip-${clause.field}-remove`,
 					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`,
+					"aria-label": t("filter.remove", "Remove {{label}} filter", { label }),
 					onClick: () => onRemove(index),
-					children: /* @__PURE__ */ jsx(X, {
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
 						"aria-hidden": "true",
-						className: "size-3.5"
+						className: "size-lt-icon-sm"
 					})
 				})]
 			}, `${clause.field}-${clause.operator}-${index}`);

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

@@ -1 +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"}
+{"version":3,"file":"filter-stack-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-stack-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport { operatorLabel } from \"../query\";\nimport type { FilterClause, TableColumn } from \"../types\";\n\nexport function FilterStackBar({\n  filters,\n  columnsByKey,\n  processing,\n  onRemove,\n}: {\n  filters: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  processing: boolean;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\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 = columnsByKey.get(clause.field)?.label ?? 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              data-test={`filter-chip-${clause.field}-remove`}\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={t(\"filter.remove\", \"Remove {{label}} filter\", { label })}\n              onClick={() => onRemove(index)}\n            >\n              <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,eAAe,EAC7B,SACA,cACA,YACA,YAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,QAAQ,KAAK,QAAQ,UAAU;GAC9B,MAAM,QAAQ,aAAa,IAAI,OAAO,KAAK,GAAG,SAAS,OAAO;GAE9D,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,aAAW,eAAe,OAAO,MAAM;KACvC,WAAU;KACV,UAAU;KACV,cAAY,EAAE,iBAAiB,2BAA2B,EAAE,MAAM,CAAC;KACnE,eAAe,SAAS,KAAK;eAE7B,oBAAC,MAAD;MAAM,MAAK;MAAI,eAAY;MAAO,WAAU;KAAmB,CAAA;IACzD,CAAA,CACJ;MAjBC,GAAG,OAAO,MAAM,GAAG,OAAO,SAAS,GAAG,OAiBvC;EAEV,CAAC;CACE,CAAA;AAET"}

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

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

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

@@ -1,39 +1,44 @@
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
 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 }) {
+var baseClass = "h-9 w-full min-w-0 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal";
+function FilterValueInput({ type, label, value, processing, withSearchIcon = false, grouped = false, ariaLabel, testId, onCommit, onClear }) {
+	const { t } = useT("lattice");
 	const [draft, setDraft] = useState(value);
-	const inputLabel = ariaLabel ?? `Filter ${label}`;
+	const inputLabel = ariaLabel ?? t("filter.filterBy", "Filter {{label}}", { label });
+	const groupedClass = grouped ? "rounded-r-none" : "";
 	useEffect(() => {
 		setDraft(value);
 	}, [value]);
 	if (type === "boolean") return /* @__PURE__ */ jsxs("select", {
 		"aria-label": inputLabel,
-		className: baseClass,
+		"data-test": testId,
+		className: `${baseClass} ${groupedClass}`,
 		disabled: processing,
 		value,
 		onChange: (event) => onCommit(event.target.value),
 		children: [
 			/* @__PURE__ */ jsx("option", {
 				value: "",
-				children: "All"
+				children: t("filter.all", "All")
 			}),
 			/* @__PURE__ */ jsx("option", {
 				value: "true",
-				children: "True"
+				children: t("filter.true", "True")
 			}),
 			/* @__PURE__ */ jsx("option", {
 				value: "false",
-				children: "False"
+				children: t("filter.false", "False")
 			})
 		]
 	});
 	if (type === "date") return /* @__PURE__ */ jsx("input", {
 		type: "date",
 		"aria-label": inputLabel,
-		className: baseClass,
+		"data-test": testId,
+		className: `${baseClass} ${groupedClass}`,
 		disabled: processing,
 		value: draft,
 		onChange: (event) => {
@@ -42,16 +47,18 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 		}
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative flex items-center",
+		className: "relative flex w-full min-w-0 items-center",
 		children: [
-			withSearchIcon && /* @__PURE__ */ jsx(Search, {
+			withSearchIcon && /* @__PURE__ */ jsx(Icon, {
+				name: "search",
 				"aria-hidden": "true",
-				className: "pointer-events-none absolute left-2 size-4 text-lt-muted-fg"
+				className: "pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg"
 			}),
 			/* @__PURE__ */ jsx("input", {
 				type: type === "number" ? "number" : "text",
 				"aria-label": inputLabel,
-				className: `${baseClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
+				"data-test": testId,
+				className: `${baseClass} ${groupedClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
 				disabled: processing,
 				value: draft,
 				onChange: (event) => setDraft(event.target.value),
@@ -64,13 +71,15 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 			}),
 			onClear && draft !== "" && /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": `Clear ${label} filter`,
+				"aria-label": t("filter.clear", "Clear {{label}} filter", { label }),
+				"data-test": testId ? `${testId}-clear` : void 0,
 				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, {
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "x",
 					"aria-hidden": "true",
-					className: "size-3.5"
+					className: "size-lt-icon-sm"
 				})
 			})
 		]

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

@@ -1 +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"}
+{"version":3,"file":"filter-value-input.js","names":[],"sources":["../../../resources/js/table/components/filter-value-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { FilterType } from \"@lattice/lattice/types/generated\";\n\nconst baseClass =\n  \"h-9 w-full min-w-0 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  grouped = false,\n  ariaLabel,\n  testId,\n  onCommit,\n  onClear,\n}: {\n  type: FilterType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  grouped?: boolean;\n  ariaLabel?: string;\n  testId?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? t(\"filter.filterBy\", \"Filter {{label}}\", { label });\n  const groupedClass = grouped ? \"rounded-r-none\" : \"\";\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <select\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${baseClass} ${groupedClass}`}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"filter.false\", \"False\")}</option>\n      </select>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <input\n        type=\"date\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${baseClass} ${groupedClass}`}\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 w-full min-w-0 items-center\">\n      {withSearchIcon && (\n        <Icon\n          name=\"search\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg\"\n        />\n      )}\n      <input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${baseClass} ${groupedClass} ${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={t(\"filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\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          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAM,YACJ;AAEF,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,UAAU,OACV,WACA,QACA,UACA,WAYC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,EAAE,mBAAmB,oBAAoB,EAAE,MAAM,CAAC;CAClF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,UAAU,GAAG;EAC3B,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD;GAQE,oBAAC,UAAD;IAAQ,OAAM;cAAI,EAAE,cAAc,KAAK;GAAU,CAAA;GACjD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,eAAe,MAAM;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,gBAAgB,OAAO;GAAU,CAAA;EACpD;;CAIZ,IAAI,SAAS,QACX,OACE,oBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,UAAU,GAAG;EAC3B,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,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,SAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC9F,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,EAAE,gBAAgB,0BAA0B,EAAE,MAAM,CAAC;IACjE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EAEP;;AAET"}

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

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { PaginationType } from '../../../../generated/types';
+import { PaginationType } from '../../types/generated';
 import { TablePagination as TablePaginationData } from '../types';
 export declare function TablePagination({ pagination, currentPage, processing, mode, hasNextPage, visiblePages, infiniteLoaderRef, onPage, onLoadMore, }: {
     pagination: TablePaginationData;

package/dist/table/components/pagination.js

@@ -1,61 +1,73 @@
+import { useT } from "../../i18n/instance.js";
 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 }) {
+	const { t } = useT("lattice");
 	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", {
+		children: [/* @__PURE__ */ jsx("span", { children: pagination.total === void 0 ? t("pagination.page", "Page {{page}}", { page: currentPage }) : t("pagination.showing", "Showing {{from}}-{{to}} of {{total}}", {
+			from: pagination.from ?? 0,
+			to: pagination.to ?? 0,
+			total: pagination.total
+		}) }), mode === "infinite" ? /* @__PURE__ */ jsx("div", {
 			ref: infiniteLoaderRef,
 			className: "flex items-center gap-2",
 			children: pagination.hasMore ? /* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-test": "pagination-load-more",
 				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"
+				children: processing ? t("pagination.loading", "Loading...") : t("pagination.loadMore", "Load more")
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "text-lt-muted-fg",
-				children: "All rows loaded"
+				children: t("pagination.allLoaded", "All rows loaded")
 			})
 		}) : mode === "simple" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-test": "pagination-previous",
 				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"
+				children: t("pagination.previous", "Previous")
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-test": "pagination-next",
 				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"
+				children: t("pagination.next", "Next")
 			})]
 		}) : mode === "table" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
+					"data-test": "pagination-previous",
 					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"
+					children: t("pagination.previous", "Previous")
 				}),
 				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx("button", {
 					type: "button",
+					"data-test": `pagination-page-${pageNumber}`,
 					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}`,
+					"aria-label": t("pagination.page", "Page {{page}}", { page: pageNumber }),
 					onClick: () => onPage(pageNumber),
 					children: pageNumber
 				}, pageNumber)),
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
+					"data-test": "pagination-next",
 					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"
+					children: t("pagination.next", "Next")
 				})
 			]
 		}) : null]

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

@@ -1 +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"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../resources/js/table/components/pagination.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { PaginationType } from \"@lattice/lattice/types/generated\";\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  const { t } = useT(\"lattice\");\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          ? t(\"pagination.page\", \"Page {{page}}\", { page: currentPage })\n          : t(\"pagination.showing\", \"Showing {{from}}-{{to}} of {{total}}\", {\n              from: pagination.from ?? 0,\n              to: pagination.to ?? 0,\n              total: pagination.total,\n            })}\n      </span>\n      {mode === \"infinite\" ? (\n        <div ref={infiniteLoaderRef} className=\"flex items-center gap-2\">\n          {pagination.hasMore ? (\n            <button\n              type=\"button\"\n              data-test=\"pagination-load-more\"\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\n                ? t(\"pagination.loading\", \"Loading...\")\n                : t(\"pagination.loadMore\", \"Load more\")}\n            </button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">{t(\"pagination.allLoaded\", \"All rows loaded\")}</span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            data-test=\"pagination-previous\"\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            {t(\"pagination.previous\", \"Previous\")}\n          </button>\n          <button\n            type=\"button\"\n            data-test=\"pagination-next\"\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            {t(\"pagination.next\", \"Next\")}\n          </button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <button\n            type=\"button\"\n            data-test=\"pagination-previous\"\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            {t(\"pagination.previous\", \"Previous\")}\n          </button>\n          {visiblePages.map((pageNumber) => (\n            <button\n              key={pageNumber}\n              type=\"button\"\n              data-test={`pagination-page-${pageNumber}`}\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={t(\"pagination.page\", \"Page {{page}}\", { page: pageNumber })}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </button>\n          ))}\n          <button\n            type=\"button\"\n            data-test=\"pagination-next\"\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            {t(\"pagination.next\", \"Next\")}\n          </button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;AAKA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,QACA,cAWC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD,EAAA,UACG,WAAW,UAAU,KAAA,IAClB,EAAE,mBAAmB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IAC3D,EAAE,sBAAsB,wCAAwC;GAC9D,MAAM,WAAW,QAAQ;GACzB,IAAI,WAAW,MAAM;GACrB,OAAO,WAAW;EACpB,CAAC,EACD,CAAA,GACL,SAAS,aACR,oBAAC,OAAD;GAAK,KAAK;GAAmB,WAAU;aACpC,WAAW,UACV,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU;IACV,SAAS;cAER,aACG,EAAE,sBAAsB,YAAY,IACpC,EAAE,uBAAuB,WAAW;GAClC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cAAoB,EAAE,wBAAwB,iBAAiB;GAAQ,CAAA;EAEtF,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,uBAAuB,UAAU;GAC9B,CAAA,GACR,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,mBAAmB,MAAM;GACtB,CAAA,CACL;OACH,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,UAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,uBAAuB,UAAU;IAC9B,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,UAAD;KAEE,MAAK;KACL,aAAW,mBAAmB;KAC9B,WAAU;KACV,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,EAAE,mBAAmB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KACtE,eAAe,OAAO,UAAU;eAE/B;IACK,GAVD,UAUC,CACT;IACD,oBAAC,UAAD;KACE,MAAK;KACL,aAAU;KACV,WAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,mBAAmB,MAAM;IACtB,CAAA;GACL;OACH,IACD;;AAET"}

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

@@ -1,6 +1,6 @@
 import { TableColumn, TableSort, TableState } from '../types';
-export declare function SortBar({ columns, state, processing, onClear, }: {
-    columns: TableColumn[];
+export declare function SortBar({ columnsByKey, state, processing, onClear, }: {
+    columnsByKey: Map<string, TableColumn>;
     state: TableState;
     processing: boolean;
     onClear: (sort: TableSort) => void;

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

@@ -1,13 +1,13 @@
-import { getSortColumn, getSortDirectionLabel } from "../query.js";
+import { Icon } from "../../icons/sprite.js";
+import { 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 }) {
+function SortBar({ columnsByKey, 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;
+			const label = columnsByKey.get(sort.key)?.label ?? sort.key;
+			const arrow = sort.direction === "desc" ? "arrow-down" : "arrow-up";
 			return /* @__PURE__ */ jsxs("span", {
 				className: "inline-flex items-center gap-1.5",
 				children: [
@@ -15,10 +15,12 @@ function SortBar({ columns, state, processing, onClear }) {
 						className: "font-medium",
 						children: `${index + 1}. ${label}`
 					}),
-					/* @__PURE__ */ jsx(Chevron, {
+					/* @__PURE__ */ jsx(Icon, {
+						name: arrow,
 						role: "img",
+						"aria-hidden": false,
 						"aria-label": getSortDirectionLabel(sort.direction),
-						className: "size-3.5 text-lt-muted-fg"
+						className: "size-lt-icon-sm text-lt-muted-fg"
 					}),
 					/* @__PURE__ */ jsx("button", {
 						type: "button",
@@ -27,9 +29,9 @@ function SortBar({ columns, state, processing, onClear }) {
 						"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"
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "x",
+							className: "size-lt-icon-sm"
 						})
 					})
 				]

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

@@ -1 +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"}
+{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice/lattice/icons\";\nimport { getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, 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 = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\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            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm 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              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,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,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}

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

@@ -1,4 +1,4 @@
-import { Node } from '../../../../core/types';
+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

@@ -10,7 +10,7 @@ function TableActionNode({ node }) {
 	});
 	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
+		children: node.schema?.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,

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

@@ -1 +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"}
+{"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.schema?.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,QAAQ,KAAK,WAAW,UAC5B,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

@@ -2,4 +2,4 @@ import { TableColumn, TableRow } from '../types';
 export declare function ColumnCell({ column, row }: {
     column: TableColumn;
     row: TableRow;
-}): import("react").JSX.Element;
+}): string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

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

@@ -1,10 +1,17 @@
-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";
+import { useColumnRegistry } from "../../provider.js";
+import { BadgeCell } from "./cells/badge-cell.js";
+import { IconCell } from "./cells/icon-cell.js";
+import { ImageCell } from "./cells/image-cell.js";
+import { TextCell } from "./cells/text-cell.js";
+import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/table-cell.tsx
 function ColumnCell({ column, row }) {
+	const customRenderer = useColumnRegistry()[column.type];
+	if (customRenderer) return customRenderer({
+		column,
+		row,
+		value: row[column.key]
+	});
 	if (column.type === "stack") return /* @__PURE__ */ jsx("div", {
 		className: "grid gap-1",
 		children: (column.columns ?? []).map((stackedColumn) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TextCell, {
@@ -13,50 +20,24 @@ function ColumnCell({ column, row }) {
 			value: row[stackedColumn.key]
 		}) }, stackedColumn.key))
 	});
+	if (column.type === "badge") return /* @__PURE__ */ jsx(BadgeCell, {
+		column,
+		value: row[column.key]
+	});
+	if (column.type === "icon") return /* @__PURE__ */ jsx(IconCell, {
+		column,
+		value: row[column.key]
+	});
+	if (column.type === "image") return /* @__PURE__ */ jsx(ImageCell, {
+		column,
+		value: row[column.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 };