@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/table/components/filter-controls.js

@@ -0,0 +1,256 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { filterOptions, stringProp } from "../filter-values.js";
+import { Checkbox } from "../../core/components/checkbox.js";
+import { Combobox } from "../../core/components/combobox.js";
+import { fieldClass } from "./filter-value-input.js";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/table/components/filter-controls.tsx
+/**
+* Renders the control for a single dedicated table filter, dispatching on the
+* filter's `type`. The current value comes from the table state; `onChange`
+* pushes a new value (an empty value clears the filter).
+*/
+function TableFilterControl({ filter, value, processing, onChange, onSearch }) {
+	switch (filter.type) {
+		case "select":
+			if (filter.props.searchable === true && onSearch) return /* @__PURE__ */ jsx(SearchableSelectControl, {
+				filter,
+				value,
+				processing,
+				onChange,
+				onSearch
+			});
+			return filter.props.multiple === true ? /* @__PURE__ */ jsx(MultiSelectControl, {
+				filter,
+				value,
+				processing,
+				onChange
+			}) : /* @__PURE__ */ jsx(SelectControl, {
+				filter,
+				value,
+				processing,
+				onChange
+			});
+		case "ternary": return /* @__PURE__ */ jsx(TernaryControl, {
+			filter,
+			value,
+			processing,
+			onChange
+		});
+		case "date-range": return /* @__PURE__ */ jsx(DateRangeControl, {
+			filter,
+			value,
+			processing,
+			onChange
+		});
+		case "toggle": return /* @__PURE__ */ jsx(ToggleControl, {
+			filter,
+			value,
+			processing,
+			onChange
+		});
+		default: return null;
+	}
+}
+function SelectControl({ filter, value, processing, onChange }) {
+	const { t } = useT("lattice");
+	const placeholder = stringProp(filter, "placeholder", t("filter.all", "All"));
+	return /* @__PURE__ */ jsxs("select", {
+		"aria-label": filter.label,
+		"data-test": `table-filter-${filter.key}`,
+		className: fieldClass,
+		disabled: processing,
+		value: typeof value === "string" ? value : "",
+		onChange: (event) => onChange(event.target.value),
+		children: [/* @__PURE__ */ jsx("option", {
+			value: "",
+			children: placeholder
+		}), filterOptions(filter).map((option) => /* @__PURE__ */ jsx("option", {
+			value: option.value,
+			children: option.label
+		}, option.value))]
+	});
+}
+function MultiSelectControl({ filter, value, processing, onChange }) {
+	const { t } = useT("lattice");
+	const [open, setOpen] = useState(false);
+	const selected = Array.isArray(value) ? value : [];
+	function toggle(optionValue) {
+		onChange(selected.includes(optionValue) ? selected.filter((item) => item !== optionValue) : [...selected, optionValue]);
+	}
+	const summary = selected.length === 0 ? stringProp(filter, "placeholder", t("filter.all", "All")) : t("filter.selectedCount", "{{amount}} selected", { amount: selected.length });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-label": filter.label,
+			"aria-expanded": open,
+			"data-test": `table-filter-${filter.key}`,
+			className: `${fieldClass} flex items-center justify-between gap-2`,
+			disabled: processing,
+			onClick: () => setOpen((current) => !current),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: summary
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "chevron-down",
+				"aria-hidden": "true",
+				className: "size-lt-icon-sm shrink-0"
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "absolute z-10 mt-1 min-w-full rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md",
+			children: filterOptions(filter).map((option) => /* @__PURE__ */ jsxs("label", {
+				className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-lt-muted",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					"aria-label": option.label,
+					"data-test": `table-filter-${filter.key}-${option.value}`,
+					checked: selected.includes(option.value),
+					disabled: processing,
+					onCheckedChange: () => toggle(option.value)
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: option.label
+				})]
+			}, option.value))
+		})]
+	});
+}
+function SearchableSelectControl({ filter, value, processing, onChange, onSearch }) {
+	const { t } = useT("lattice");
+	const multiple = filter.props.multiple === true;
+	const [open, setOpen] = useState(false);
+	const [results, setResults] = useState(() => filterOptions(filter));
+	const [loading, setLoading] = useState(false);
+	const selected = multiple ? Array.isArray(value) ? value : [] : typeof value === "string" && value !== "" ? [value] : [];
+	const labels = new Map([...filterOptions(filter), ...results].map((option) => [option.value, option.label]));
+	const summary = selected.length === 0 ? stringProp(filter, "placeholder", t("filter.all", "All")) : multiple ? t("filter.selectedCount", "{{amount}} selected", { amount: selected.length }) : labels.get(selected[0]) ?? selected[0];
+	function search(query) {
+		setLoading(true);
+		onSearch(query).then((options) => {
+			setResults(options);
+			setLoading(false);
+		});
+	}
+	function choose(optionValue) {
+		onChange(multiple ? selected.includes(optionValue) ? selected.filter((item) => item !== optionValue) : [...selected, optionValue] : optionValue);
+	}
+	return /* @__PURE__ */ jsx(Combobox, {
+		contentClassName: "w-60",
+		loading,
+		multiple,
+		onSearch: search,
+		onSelect: choose,
+		open,
+		onOpenChange: setOpen,
+		options: results,
+		searchLabel: t("filter.search", "Search"),
+		selected,
+		testId: `table-filter-${filter.key}`,
+		trigger: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: summary
+		}), /* @__PURE__ */ jsx(Icon, {
+			name: "chevron-down",
+			"aria-hidden": "true",
+			className: "size-lt-icon-sm shrink-0"
+		})] }),
+		triggerClassName: cn(fieldClass, "flex items-center justify-between gap-2"),
+		triggerProps: {
+			"aria-label": filter.label,
+			"data-test": `table-filter-${filter.key}`,
+			disabled: processing
+		}
+	});
+}
+function TernaryControl({ filter, value, processing, onChange }) {
+	const { t } = useT("lattice");
+	const placeholder = stringProp(filter, "placeholder", t("filter.all", "All"));
+	const trueLabel = stringProp(filter, "trueLabel", t("filter.true", "True"));
+	const falseLabel = stringProp(filter, "falseLabel", t("filter.false", "False"));
+	return /* @__PURE__ */ jsxs("select", {
+		"aria-label": filter.label,
+		"data-test": `table-filter-${filter.key}`,
+		className: fieldClass,
+		disabled: processing,
+		value: typeof value === "string" ? value : "",
+		onChange: (event) => onChange(event.target.value),
+		children: [
+			/* @__PURE__ */ jsx("option", {
+				value: "",
+				children: placeholder
+			}),
+			/* @__PURE__ */ jsx("option", {
+				value: "true",
+				children: trueLabel
+			}),
+			/* @__PURE__ */ jsx("option", {
+				value: "false",
+				children: falseLabel
+			})
+		]
+	});
+}
+function DateRangeControl({ filter, value, processing, onChange }) {
+	const { t } = useT("lattice");
+	const range = value && typeof value === "object" ? value : {};
+	function commit(next) {
+		onChange({
+			from: next.from ?? "",
+			until: next.until ?? ""
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "date",
+				"aria-label": t("filter.from", "{{label}} from", { label: filter.label }),
+				"data-test": `table-filter-${filter.key}-from`,
+				className: fieldClass,
+				disabled: processing,
+				value: range.from ?? "",
+				onChange: (event) => commit({
+					...range,
+					from: event.target.value
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-lt-muted-fg",
+				"aria-hidden": "true",
+				children: "–"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "date",
+				"aria-label": t("filter.until", "{{label}} until", { label: filter.label }),
+				"data-test": `table-filter-${filter.key}-until`,
+				className: fieldClass,
+				disabled: processing,
+				value: range.until ?? "",
+				onChange: (event) => commit({
+					...range,
+					until: event.target.value
+				})
+			})
+		]
+	});
+}
+function ToggleControl({ filter, value, processing, onChange }) {
+	const checked = value === "1" || value === true || value === "true";
+	return /* @__PURE__ */ jsxs("label", {
+		className: "flex h-9 cursor-pointer items-center gap-2 text-sm",
+		children: [/* @__PURE__ */ jsx(Checkbox, {
+			"aria-label": filter.label,
+			"data-test": `table-filter-${filter.key}`,
+			checked,
+			disabled: processing,
+			onCheckedChange: (next) => onChange(next === true ? "1" : "")
+		}), /* @__PURE__ */ jsx("span", { children: filter.label })]
+	});
+}
+//#endregion
+export { TableFilterControl };
+
+//# sourceMappingURL=filter-controls.js.map

package/dist/table/components/filter-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-controls.js","names":[],"sources":["../../../resources/js/table/components/filter-controls.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport { Checkbox } from \"@lattice-php/lattice/core/components/checkbox\";\nimport { Combobox } from \"@lattice-php/lattice/core/components/combobox\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { FilterData, Option } from \"@lattice-php/lattice/types/generated\";\nimport { filterOptions, stringProp } from \"../filter-values\";\nimport { fieldClass } from \"./filter-value-input\";\n\nexport type DateRangeValue = { from?: string; until?: string };\n\nexport type FilterOptionSearch = (query: string) => Promise<Option[]>;\n\n/**\n * Renders the control for a single dedicated table filter, dispatching on the\n * filter's `type`. The current value comes from the table state; `onChange`\n * pushes a new value (an empty value clears the filter).\n */\nexport function TableFilterControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch?: FilterOptionSearch;\n}) {\n  switch (filter.type) {\n    case \"select\":\n      if (filter.props.searchable === true && onSearch) {\n        return (\n          <SearchableSelectControl\n            filter={filter}\n            value={value}\n            processing={processing}\n            onChange={onChange}\n            onSearch={onSearch}\n          />\n        );\n      }\n\n      return filter.props.multiple === true ? (\n        <MultiSelectControl\n          filter={filter}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n        />\n      ) : (\n        <SelectControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    case \"ternary\":\n      return (\n        <TernaryControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    case \"date-range\":\n      return (\n        <DateRangeControl\n          filter={filter}\n          value={value}\n          processing={processing}\n          onChange={onChange}\n        />\n      );\n    case \"toggle\":\n      return (\n        <ToggleControl filter={filter} value={value} processing={processing} onChange={onChange} />\n      );\n    default:\n      return null;\n  }\n}\n\nfunction SelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const placeholder = stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"));\n\n  return (\n    <select\n      aria-label={filter.label}\n      data-test={`table-filter-${filter.key}`}\n      className={fieldClass}\n      disabled={processing}\n      value={typeof value === \"string\" ? value : \"\"}\n      onChange={(event) => onChange(event.target.value)}\n    >\n      <option value=\"\">{placeholder}</option>\n      {filterOptions(filter).map((option) => (\n        <option key={option.value} value={option.value}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction MultiSelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n  const selected = Array.isArray(value) ? (value as string[]) : [];\n\n  function toggle(optionValue: string): void {\n    const next = selected.includes(optionValue)\n      ? selected.filter((item) => item !== optionValue)\n      : [...selected, optionValue];\n\n    onChange(next);\n  }\n\n  const summary =\n    selected.length === 0\n      ? stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"))\n      : t(\"filter.selectedCount\", \"{{amount}} selected\", { amount: selected.length });\n\n  return (\n    <div className=\"relative\">\n      <button\n        type=\"button\"\n        aria-label={filter.label}\n        aria-expanded={open}\n        data-test={`table-filter-${filter.key}`}\n        className={`${fieldClass} flex items-center justify-between gap-2`}\n        disabled={processing}\n        onClick={() => setOpen((current) => !current)}\n      >\n        <span className=\"truncate\">{summary}</span>\n        <Icon name=\"chevron-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />\n      </button>\n      {open && (\n        <div className=\"absolute z-10 mt-1 min-w-full rounded-lt-sm border border-lt-border bg-lt-bg p-1 shadow-md\">\n          {filterOptions(filter).map((option) => (\n            <label\n              key={option.value}\n              className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-lt-muted\"\n            >\n              <Checkbox\n                aria-label={option.label}\n                data-test={`table-filter-${filter.key}-${option.value}`}\n                checked={selected.includes(option.value)}\n                disabled={processing}\n                onCheckedChange={() => toggle(option.value)}\n              />\n              <span className=\"truncate\">{option.label}</span>\n            </label>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction SearchableSelectControl({\n  filter,\n  value,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n  onSearch: FilterOptionSearch;\n}) {\n  const { t } = useT(\"lattice\");\n  const multiple = filter.props.multiple === true;\n  const [open, setOpen] = useState(false);\n  const [results, setResults] = useState<Option[]>(() => filterOptions(filter));\n  const [loading, setLoading] = useState(false);\n\n  const selected = multiple\n    ? Array.isArray(value)\n      ? (value as string[])\n      : []\n    : typeof value === \"string\" && value !== \"\"\n      ? [value]\n      : [];\n\n  const labels = new Map(\n    [...filterOptions(filter), ...results].map((option) => [option.value, option.label]),\n  );\n  const summary =\n    selected.length === 0\n      ? stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"))\n      : multiple\n        ? t(\"filter.selectedCount\", \"{{amount}} selected\", { amount: selected.length })\n        : (labels.get(selected[0]) ?? selected[0]);\n\n  function search(query: string): void {\n    setLoading(true);\n    void onSearch(query).then((options) => {\n      setResults(options);\n      setLoading(false);\n    });\n  }\n\n  function choose(optionValue: string): void {\n    onChange(\n      multiple\n        ? selected.includes(optionValue)\n          ? selected.filter((item) => item !== optionValue)\n          : [...selected, optionValue]\n        : optionValue,\n    );\n  }\n\n  return (\n    <Combobox\n      contentClassName=\"w-60\"\n      loading={loading}\n      multiple={multiple}\n      onSearch={search}\n      onSelect={choose}\n      open={open}\n      onOpenChange={setOpen}\n      options={results}\n      searchLabel={t(\"filter.search\", \"Search\")}\n      selected={selected}\n      testId={`table-filter-${filter.key}`}\n      trigger={\n        <>\n          <span className=\"truncate\">{summary}</span>\n          <Icon name=\"chevron-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />\n        </>\n      }\n      triggerClassName={cn(fieldClass, \"flex items-center justify-between gap-2\")}\n      triggerProps={{\n        \"aria-label\": filter.label,\n        \"data-test\": `table-filter-${filter.key}`,\n        disabled: processing,\n      }}\n    />\n  );\n}\n\nfunction TernaryControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const placeholder = stringProp(filter, \"placeholder\", t(\"filter.all\", \"All\"));\n  const trueLabel = stringProp(filter, \"trueLabel\", t(\"filter.true\", \"True\"));\n  const falseLabel = stringProp(filter, \"falseLabel\", t(\"filter.false\", \"False\"));\n\n  return (\n    <select\n      aria-label={filter.label}\n      data-test={`table-filter-${filter.key}`}\n      className={fieldClass}\n      disabled={processing}\n      value={typeof value === \"string\" ? value : \"\"}\n      onChange={(event) => onChange(event.target.value)}\n    >\n      <option value=\"\">{placeholder}</option>\n      <option value=\"true\">{trueLabel}</option>\n      <option value=\"false\">{falseLabel}</option>\n    </select>\n  );\n}\n\nfunction DateRangeControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const range: DateRangeValue = value && typeof value === \"object\" ? (value as DateRangeValue) : {};\n\n  function commit(next: DateRangeValue): void {\n    onChange({ from: next.from ?? \"\", until: next.until ?? \"\" });\n  }\n\n  return (\n    <div className=\"flex items-center gap-1\">\n      <input\n        type=\"date\"\n        aria-label={t(\"filter.from\", \"{{label}} from\", { label: filter.label })}\n        data-test={`table-filter-${filter.key}-from`}\n        className={fieldClass}\n        disabled={processing}\n        value={range.from ?? \"\"}\n        onChange={(event) => commit({ ...range, from: event.target.value })}\n      />\n      <span className=\"text-lt-muted-fg\" aria-hidden=\"true\">\n        –\n      </span>\n      <input\n        type=\"date\"\n        aria-label={t(\"filter.until\", \"{{label}} until\", { label: filter.label })}\n        data-test={`table-filter-${filter.key}-until`}\n        className={fieldClass}\n        disabled={processing}\n        value={range.until ?? \"\"}\n        onChange={(event) => commit({ ...range, until: event.target.value })}\n      />\n    </div>\n  );\n}\n\nfunction ToggleControl({\n  filter,\n  value,\n  processing,\n  onChange,\n}: {\n  filter: FilterData;\n  value: unknown;\n  processing: boolean;\n  onChange: (value: unknown) => void;\n}) {\n  const checked = value === \"1\" || value === true || value === \"true\";\n\n  return (\n    <label className=\"flex h-9 cursor-pointer items-center gap-2 text-sm\">\n      <Checkbox\n        aria-label={filter.label}\n        data-test={`table-filter-${filter.key}`}\n        checked={checked}\n        disabled={processing}\n        onCheckedChange={(next) => onChange(next === true ? \"1\" : \"\")}\n      />\n      <span>{filter.label}</span>\n    </label>\n  );\n}\n"],"mappings":"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"}

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-php/lattice/icons\";\nimport { useT } from \"@lattice-php/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,14 @@
-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 const fieldClass: string;
+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,45 @@
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { controlSurface } from "../../core/components/control.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 fieldClass = controlSurface({ density: "compact" });
+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: `${fieldClass} ${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: `${fieldClass} ${groupedClass}`,
 		disabled: processing,
 		value: draft,
 		onChange: (event) => {
@@ -42,16 +48,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: `${fieldClass} ${groupedClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
 				disabled: processing,
 				value: draft,
 				onChange: (event) => setDraft(event.target.value),
@@ -64,19 +72,21 @@ 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"
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { FilterValueInput };
+export { FilterValueInput, fieldClass };
 
 //# sourceMappingURL=filter-value-input.js.map

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-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { controlSurface } from \"@lattice-php/lattice/core/components/control\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\n\nexport const fieldClass = controlSurface({ density: \"compact\" });\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={`${fieldClass} ${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={`${fieldClass} ${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={`${fieldClass} ${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":";;;;;;AAMA,IAAa,aAAa,eAAe,EAAE,SAAS,UAAU,CAAC;AAE/D,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,WAAW,GAAG;EAC5B,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,WAAW,GAAG;EAC5B,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,WAAW,GAAG,aAAa,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC/F,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 == null ? 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-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/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 == null\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,SAAS,OACjB,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"}