@lattice-php/lattice 0.18.0 → 0.20.0

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

@@ -1,5 +1,4 @@
 import { FilterType } from '../../types/generated.js';
-export declare const fieldClass: string;
 export declare function FilterValueInput({ type, label, value, processing, withSearchIcon, grouped, ariaLabel, testId, onCommit, onClear, }: {
     type: FilterType;
     label: string;

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

@@ -1,22 +1,25 @@
+import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
-import { controlSurface } from "../../ui/control.js";
+import { Input } from "../../ui/input.js";
+import { IconButton } from "../../ui/icon-button.js";
+import { NativeSelect } from "../../ui/native-select.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/filter-value-input.tsx
-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 ?? t("table.filter.filterBy", "Filter {{label}}", { label });
+	const inputLabel = ariaLabel ?? t("table.filter.filter-by", "Filter {{label}}", { label });
 	const groupedClass = grouped ? "rounded-r-none" : "";
 	useEffect(() => {
 		setDraft(value);
 	}, [value]);
-	if (type === "boolean") return /* @__PURE__ */ jsxs("select", {
+	if (type === "boolean") return /* @__PURE__ */ jsxs(NativeSelect, {
+		density: "compact",
 		"aria-label": inputLabel,
 		"data-test": testId,
-		className: `${fieldClass} ${groupedClass}`,
+		className: groupedClass,
 		disabled: processing,
 		value,
 		onChange: (event) => onCommit(event.target.value),
@@ -35,11 +38,12 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 			})
 		]
 	});
-	if (type === "date") return /* @__PURE__ */ jsx("input", {
+	if (type === "date") return /* @__PURE__ */ jsx(Input, {
 		type: "date",
+		density: "compact",
 		"aria-label": inputLabel,
 		"data-test": testId,
-		className: `${fieldClass} ${groupedClass}`,
+		className: groupedClass,
 		disabled: processing,
 		value: draft,
 		onChange: (event) => {
@@ -55,11 +59,12 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 				"aria-hidden": "true",
 				className: "pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg"
 			}),
-			/* @__PURE__ */ jsx("input", {
+			/* @__PURE__ */ jsx(Input, {
 				type: type === "number" ? "number" : "text",
+				density: "compact",
 				"aria-label": inputLabel,
 				"data-test": testId,
-				className: `${fieldClass} ${groupedClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
+				className: cn(groupedClass, withSearchIcon && "pl-8", onClear && "pr-8"),
 				disabled: processing,
 				value: draft,
 				onChange: (event) => setDraft(event.target.value),
@@ -70,23 +75,19 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 					if (draft !== value) onCommit(draft);
 				}
 			}),
-			onClear && draft !== "" && /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": t("table.filter.clear", "Clear {{label}} filter", { label }),
+			onClear && draft !== "" && /* @__PURE__ */ jsx(IconButton, {
+				size: "xs",
+				icon: "x",
+				label: t("table.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-lt-sm hover:bg-lt-muted disabled:opacity-50",
+				className: "absolute right-1 size-6",
 				disabled: processing,
-				onClick: onClear,
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: "x",
-					"aria-hidden": "true",
-					className: "size-lt-icon-sm"
-				})
+				onClick: onClear
 			})
 		]
 	});
 }
 //#endregion
-export { FilterValueInput, fieldClass };
+export { FilterValueInput };
 
 //# 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 { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { controlSurface } from \"@lattice-php/lattice/ui/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(\"table.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(\"table.filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"table.filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"table.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(\"table.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-lt-sm 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,yBAAyB,oBAAoB,EAAE,MAAM,CAAC;CACxF,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,oBAAoB,KAAK;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,qBAAqB,MAAM;GAAU,CAAA;GAC7D,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,sBAAsB,OAAO;GAAU,CAAA;EAC1D;;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,sBAAsB,0BAA0B,EAAE,MAAM,CAAC;IACvE,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"}
+{"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 { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { FilterType } from \"@lattice-php/lattice/types/generated\";\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(\"table.filter.filter-by\", \"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      <NativeSelect\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={groupedClass}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"table.filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"table.filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"table.filter.false\", \"False\")}</option>\n      </NativeSelect>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <Input\n        type=\"date\"\n        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={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        density=\"compact\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={cn(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        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 size-6\"\n          disabled={processing}\n          onClick={onClear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,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,0BAA0B,oBAAoB,EAAE,MAAM,CAAC;CACzF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,cAAD;EACE,SAAQ;EACR,cAAY;EACZ,aAAW;EACX,WAAW;EACX,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YAPlD;GASE,oBAAC,UAAD;IAAQ,OAAM;cAAI,EAAE,oBAAoB,KAAK;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,qBAAqB,MAAM;GAAU,CAAA;GAC7D,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,sBAAsB,OAAO;GAAU,CAAA;EACpD;;CAIlB,IAAI,SAAS,QACX,OACE,oBAAC,OAAD;EACE,MAAK;EACL,SAAQ;EACR,cAAY;EACZ,aAAW;EACX,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,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,OAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,SAAQ;IACR,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,cAAc,kBAAkB,QAAQ,WAAW,MAAM;IACvE,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,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,0BAA0B,EAAE,MAAM,CAAC;IAClE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}

package/dist/table/components/pagination.js

@@ -1,4 +1,5 @@
 import { useT } from "../../i18n/instance.js";
+import { Button } from "../../ui/button.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 }) {
@@ -13,30 +14,27 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 		}) }), mode === "infinite" ? /* @__PURE__ */ jsx("div", {
 			ref: infiniteLoaderRef,
 			className: "flex items-center gap-2",
-			children: pagination.hasMore ? /* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: pagination.hasMore ? /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				"data-test": "pagination-load-more",
-				className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 				disabled: processing,
 				onClick: onLoadMore,
-				children: processing ? t("table.pagination.loading", "Loading...") : t("table.pagination.loadMore", "Load more")
+				children: processing ? t("table.pagination.loading", "Loading...") : t("table.pagination.load-more", "Load more")
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "text-lt-muted-fg",
-				children: t("table.pagination.allLoaded", "All rows loaded")
+				children: t("table.pagination.all-loaded", "All rows loaded")
 			})
 		}) : mode === "simple" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx("button", {
-				type: "button",
+			children: [/* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				"data-test": "pagination-previous",
-				className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 				disabled: processing || currentPage <= 1,
 				onClick: () => onPage(currentPage - 1),
 				children: t("table.pagination.previous", "Previous")
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
 				"data-test": "pagination-next",
-				className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 				disabled: processing || !hasNextPage,
 				onClick: () => onPage(currentPage + 1),
 				children: t("table.pagination.next", "Next")
@@ -44,28 +42,26 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 		}) : mode === "table" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
 					"data-test": "pagination-previous",
-					className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 					disabled: processing || currentPage <= 1,
 					onClick: () => onPage(currentPage - 1),
 					children: t("table.pagination.previous", "Previous")
 				}),
-				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx("button", {
-					type: "button",
+				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
 					"data-test": `pagination-page-${pageNumber}`,
-					className: "inline-flex size-lt-control-md 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": t("table.pagination.page", "Page {{page}}", { page: pageNumber }),
 					onClick: () => onPage(pageNumber),
 					children: pageNumber
 				}, pageNumber)),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
 					"data-test": "pagination-next",
-					className: "h-lt-control-md rounded-lt-sm border border-lt-border px-3 font-medium disabled:opacity-50",
 					disabled: processing || !hasNextPage,
 					onClick: () => onPage(currentPage + 1),
 					children: t("table.pagination.next", "Next")

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 { useT } from \"@lattice-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/lattice/types/generated\";\nimport type { TablePagination as TablePaginationData } from \"@lattice-php/lattice/table/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\n      data-slot=\"table-pagination\"\n      className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\"\n    >\n      <span>\n        {pagination.total == null\n          ? t(\"table.pagination.page\", \"Page {{page}}\", { page: currentPage })\n          : t(\"table.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-lt-control-md 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(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.loadMore\", \"Load more\")}\n            </button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.allLoaded\", \"All rows loaded\")}\n            </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-lt-control-md 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(\"table.pagination.previous\", \"Previous\")}\n          </button>\n          <button\n            type=\"button\"\n            data-test=\"pagination-next\"\n            className=\"h-lt-control-md 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(\"table.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-lt-control-md 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(\"table.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-lt-control-md 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(\"table.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-lt-control-md 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(\"table.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;EACE,aAAU;EACV,WAAU;YAFZ,CAIE,oBAAC,QAAD,EAAA,UACG,WAAW,SAAS,OACjB,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IACjE,EAAE,4BAA4B,wCAAwC;GACpE,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,4BAA4B,YAAY,IAC1C,EAAE,6BAA6B,WAAW;GACxC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,8BAA8B,iBAAiB;GAC9C,CAAA;EAEL,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,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,yBAAyB,MAAM;GAC5B,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,6BAA6B,UAAU;IACpC,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,yBAAyB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KAC5E,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,yBAAyB,MAAM;IAC5B,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 { Button } from \"@lattice-php/lattice/ui/button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/lattice/types/generated\";\nimport type { TablePagination as TablePaginationData } from \"@lattice-php/lattice/table/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\n      data-slot=\"table-pagination\"\n      className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\"\n    >\n      <span>\n        {pagination.total == null\n          ? t(\"table.pagination.page\", \"Page {{page}}\", { page: currentPage })\n          : t(\"table.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              variant=\"outline\"\n              data-test=\"pagination-load-more\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing\n                ? t(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.load-more\", \"Load more\")}\n            </Button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.all-loaded\", \"All rows loaded\")}\n            </span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          {visiblePages.map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              variant=\"outline\"\n              size=\"icon\"\n              data-test={`pagination-page-${pageNumber}`}\n              disabled={processing || pageNumber === currentPage}\n              aria-current={pageNumber === currentPage ? \"page\" : undefined}\n              aria-label={t(\"table.pagination.page\", \"Page {{page}}\", { page: pageNumber })}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </Button>\n          ))}\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,QACA,cAWC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAFZ,CAIE,oBAAC,QAAD,EAAA,UACG,WAAW,SAAS,OACjB,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IACjE,EAAE,4BAA4B,wCAAwC;GACpE,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,QAAD;IACE,SAAQ;IACR,aAAU;IACV,UAAU;IACV,SAAS;cAER,aACG,EAAE,4BAA4B,YAAY,IAC1C,EAAE,8BAA8B,WAAW;GACzC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,+BAA+B,iBAAiB;GAC/C,CAAA;EAEL,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IACE,SAAQ;IACR,aAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,QAAD;IACE,SAAQ;IACR,aAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,yBAAyB,MAAM;GAC5B,CAAA,CACL;OACH,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KACE,SAAQ;KACR,aAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,QAAD;KAEE,SAAQ;KACR,MAAK;KACL,aAAW,mBAAmB;KAC9B,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KAC5E,eAAe,OAAO,UAAU;eAE/B;IACK,GAVD,UAUC,CACT;IACD,oBAAC,QAAD;KACE,SAAQ;KACR,aAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,yBAAyB,MAAM;IAC5B,CAAA;GACL;OACH,IACD;;AAET"}

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

@@ -1,7 +1,7 @@
-import { TableColumn, TableSort, TableState } from '../types.js';
-export declare function SortBar({ columnsByKey, state, processing, onClear, }: {
+import { TableColumn, TableSort, TableQuery } from '../types.js';
+export declare function SortBar({ columnsByKey, query, processing, onClear, }: {
     columnsByKey: Map<string, TableColumn>;
-    state: TableState;
+    query: TableQuery;
     processing: boolean;
     onClear: (sort: TableSort) => void;
 }): import("react").JSX.Element;

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

@@ -1,11 +1,14 @@
 import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { IconButton } from "../../ui/icon-button.js";
 import { getSortDirectionLabel } from "../lib/query.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/sort-bar.tsx
-function SortBar({ columnsByKey, state, processing, onClear }) {
+function SortBar({ columnsByKey, query, processing, onClear }) {
+	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: state.sorts.map((sort, index) => {
+		children: query.sorts.map((sort, index) => {
 			const label = columnsByKey.get(sort.key)?.props.label ?? sort.key;
 			const arrow = sort.direction === "desc" ? "arrow-down" : "arrow-up";
 			return /* @__PURE__ */ jsxs("span", {
@@ -22,17 +25,13 @@ function SortBar({ columnsByKey, state, processing, onClear }) {
 						"aria-label": getSortDirectionLabel(sort.direction),
 						className: "size-lt-icon-sm text-lt-muted-fg"
 					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50",
-						disabled: processing,
-						"aria-label": `Clear ${label} sort`,
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "xs",
+						icon: "x",
+						label: t("table.sort.clear", "Clear {{label}} sort", { label }),
 						"data-test": `clear-${sort.key}-sort`,
-						onClick: () => onClear(sort),
-						children: /* @__PURE__ */ jsx(Icon, {
-							name: "x",
-							className: "size-lt-icon-sm"
-						})
+						disabled: processing,
+						onClick: () => onClear(sort)
 					})
 				]
 			}, sort.key);

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 { Icon } from \"@lattice-php/lattice/icons\";\nimport { getSortDirectionLabel } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableState } from \"@lattice-php/lattice/table/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?.props.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-lt-sm 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,MAAM,SAAS,KAAK;GAC1C,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"}
+{"version":3,"file":"sort-bar.js","names":[],"sources":["../../../resources/js/table/components/sort-bar.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { getSortDirectionLabel } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableQuery } from \"@lattice-php/lattice/table/types\";\n\nexport function SortBar({\n  columnsByKey,\n  query,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  query: TableQuery;\n  processing: boolean;\n  onClear: (sort: TableSort) => 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      {query.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.props.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            <IconButton\n              size=\"xs\"\n              icon=\"x\"\n              label={t(\"table.sort.clear\", \"Clear {{label}} sort\", { label })}\n              data-test={`clear-${sort.key}-sort`}\n              disabled={processing}\n              onClick={() => onClear(sort)}\n            />\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,MAAM,SAAS,KAAK;GAC1C,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,YAAD;MACE,MAAK;MACL,MAAK;MACL,OAAO,EAAE,oBAAoB,wBAAwB,EAAE,MAAM,CAAC;MAC9D,aAAW,SAAS,KAAK,IAAI;MAC7B,UAAU;MACV,eAAe,QAAQ,IAAI;KAC5B,CAAA;IACG;MAjBK,KAAK,GAiBV;EAEV,CAAC;CACE,CAAA;AAET"}

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

@@ -0,0 +1,9 @@
+/**
+ * The table-level quick-search box. Keystrokes update the input immediately and
+ * commit the term to the server after a short debounce; an externally-changed
+ * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.
+ */
+export declare function TableSearch({ value, onSearch, }: {
+    value: string;
+    onSearch: (term: string) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,75 @@
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
+import { Input } from "../../ui/input.js";
+import { IconButton } from "../../ui/icon-button.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region resources/js/table/components/table-search.tsx
+var DEBOUNCE_MS = 300;
+/**
+* The table-level quick-search box. Keystrokes update the input immediately and
+* commit the term to the server after a short debounce; an externally-changed
+* value (e.g. a filter reset) is adopted without echoing keystroke round-trips.
+*/
+function TableSearch({ value, onSearch }) {
+	const { t } = useT("lattice");
+	const [term, setTerm] = useState(value);
+	const timer = useRef(null);
+	const committed = useRef(value);
+	useEffect(() => {
+		if (value !== committed.current) {
+			committed.current = value;
+			setTerm(value);
+		}
+	}, [value]);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	function commit(next) {
+		committed.current = next;
+		onSearch(next);
+	}
+	function change(next) {
+		setTerm(next);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => commit(next), DEBOUNCE_MS);
+	}
+	function clear() {
+		if (timer.current) clearTimeout(timer.current);
+		setTerm("");
+		commit("");
+	}
+	const label = t("table.search.placeholder", "Search");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full max-w-xs",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				name: "search",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg"
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				type: "search",
+				"data-test": "table-search",
+				value: term,
+				placeholder: label,
+				"aria-label": label,
+				onChange: (event) => change(event.target.value),
+				className: cn("px-8", "[&::-webkit-search-cancel-button]:hidden")
+			}),
+			term !== "" && /* @__PURE__ */ jsx(IconButton, {
+				size: "xs",
+				icon: "x",
+				label: t("table.search.clear", "Clear search"),
+				"data-test": "table-search-clear",
+				className: "absolute right-1.5 top-1/2 -translate-y-1/2",
+				onClick: clear
+			})
+		]
+	});
+}
+//#endregion
+export { TableSearch };
+
+//# sourceMappingURL=table-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-search.js","names":[],"sources":["../../../resources/js/table/components/table-search.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nconst DEBOUNCE_MS = 300;\n\n/**\n * The table-level quick-search box. Keystrokes update the input immediately and\n * commit the term to the server after a short debounce; an externally-changed\n * value (e.g. a filter reset) is adopted without echoing keystroke round-trips.\n */\nexport function TableSearch({\n  value,\n  onSearch,\n}: {\n  value: string;\n  onSearch: (term: string) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [term, setTerm] = useState(value);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const committed = useRef(value);\n\n  useEffect(() => {\n    if (value !== committed.current) {\n      committed.current = value;\n      setTerm(value);\n    }\n  }, [value]);\n\n  useEffect(\n    () => () => {\n      if (timer.current) {\n        clearTimeout(timer.current);\n      }\n    },\n    [],\n  );\n\n  function commit(next: string): void {\n    committed.current = next;\n    onSearch(next);\n  }\n\n  function change(next: string): void {\n    setTerm(next);\n\n    if (timer.current) {\n      clearTimeout(timer.current);\n    }\n\n    timer.current = setTimeout(() => commit(next), DEBOUNCE_MS);\n  }\n\n  function clear(): void {\n    if (timer.current) {\n      clearTimeout(timer.current);\n    }\n\n    setTerm(\"\");\n    commit(\"\");\n  }\n\n  const label = t(\"table.search.placeholder\", \"Search\");\n\n  return (\n    <div className=\"relative w-full max-w-xs\">\n      <Icon\n        name=\"search\"\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute left-2.5 top-1/2 size-lt-icon-sm -translate-y-1/2 text-lt-muted-fg\"\n      />\n      <Input\n        type=\"search\"\n        data-test=\"table-search\"\n        value={term}\n        placeholder={label}\n        aria-label={label}\n        onChange={(event) => change(event.target.value)}\n        className={cn(\"px-8\", \"[&::-webkit-search-cancel-button]:hidden\")}\n      />\n      {term !== \"\" && (\n        <IconButton\n          size=\"xs\"\n          icon=\"x\"\n          label={t(\"table.search.clear\", \"Clear search\")}\n          data-test=\"table-search-clear\"\n          className=\"absolute right-1.5 top-1/2 -translate-y-1/2\"\n          onClick={clear}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,cAAc;;;;;;AAOpB,SAAgB,YAAY,EAC1B,OACA,YAIC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,OAA6C,IAAI;CAC/D,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,UAAU,UAAU,SAAS;GAC/B,UAAU,UAAU;GACpB,QAAQ,KAAK;EACf;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,sBACc;EACV,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;CAE9B,GACA,CAAC,CACH;CAEA,SAAS,OAAO,MAAoB;EAClC,UAAU,UAAU;EACpB,SAAS,IAAI;CACf;CAEA,SAAS,OAAO,MAAoB;EAClC,QAAQ,IAAI;EAEZ,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;EAG5B,MAAM,UAAU,iBAAiB,OAAO,IAAI,GAAG,WAAW;CAC5D;CAEA,SAAS,QAAc;EACrB,IAAI,MAAM,SACR,aAAa,MAAM,OAAO;EAG5B,QAAQ,EAAE;EACV,OAAO,EAAE;CACX;CAEA,MAAM,QAAQ,EAAE,4BAA4B,QAAQ;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GACD,oBAAC,OAAD;IACE,MAAK;IACL,aAAU;IACV,OAAO;IACP,aAAa;IACb,cAAY;IACZ,WAAW,UAAU,OAAO,MAAM,OAAO,KAAK;IAC9C,WAAW,GAAG,QAAQ,0CAA0C;GACjE,CAAA;GACA,SAAS,MACR,oBAAC,YAAD;IACE,MAAK;IACL,MAAK;IACL,OAAO,EAAE,sBAAsB,cAAc;IAC7C,aAAU;IACV,WAAU;IACV,SAAS;GACV,CAAA;EAEA;;AAET"}