@lattice-php/lattice 0.2.0 → 0.3.0

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

@@ -1,9 +1,10 @@
 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";
 //#region resources/js/table/components/filter-value-input.tsx
-var baseClass = "h-9 w-full min-w-0 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal";
+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);
@@ -15,7 +16,7 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 	if (type === "boolean") return /* @__PURE__ */ jsxs("select", {
 		"aria-label": inputLabel,
 		"data-test": testId,
-		className: `${baseClass} ${groupedClass}`,
+		className: `${fieldClass} ${groupedClass}`,
 		disabled: processing,
 		value,
 		onChange: (event) => onCommit(event.target.value),
@@ -38,7 +39,7 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 		type: "date",
 		"aria-label": inputLabel,
 		"data-test": testId,
-		className: `${baseClass} ${groupedClass}`,
+		className: `${fieldClass} ${groupedClass}`,
 		disabled: processing,
 		value: draft,
 		onChange: (event) => {
@@ -58,7 +59,7 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 				type: type === "number" ? "number" : "text",
 				"aria-label": inputLabel,
 				"data-test": testId,
-				className: `${baseClass} ${groupedClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
+				className: `${fieldClass} ${groupedClass} ${withSearchIcon ? "pl-8" : ""} ${onClear ? "pr-8" : ""}`,
 				disabled: processing,
 				value: draft,
 				onChange: (event) => setDraft(event.target.value),
@@ -86,6 +87,6 @@ function FilterValueInput({ type, label, value, processing, withSearchIcon = fal
 	});
 }
 //#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 { Icon } from \"@lattice/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { useT } from \"@lattice/lattice/i18n\";\nimport type { FilterType } from \"@lattice/lattice/types/generated\";\n\nconst baseClass =\n  \"h-9 w-full min-w-0 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal\";\n\nexport function FilterValueInput({\n  type,\n  label,\n  value,\n  processing,\n  withSearchIcon = false,\n  grouped = false,\n  ariaLabel,\n  testId,\n  onCommit,\n  onClear,\n}: {\n  type: FilterType;\n  label: string;\n  value: string;\n  processing: boolean;\n  withSearchIcon?: boolean;\n  grouped?: boolean;\n  ariaLabel?: string;\n  testId?: string;\n  onCommit: (value: string) => void;\n  onClear?: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const [draft, setDraft] = useState(value);\n  const inputLabel = ariaLabel ?? t(\"filter.filterBy\", \"Filter {{label}}\", { label });\n  const groupedClass = grouped ? \"rounded-r-none\" : \"\";\n\n  useEffect(() => {\n    setDraft(value);\n  }, [value]);\n\n  if (type === \"boolean\") {\n    return (\n      <select\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${baseClass} ${groupedClass}`}\n        disabled={processing}\n        value={value}\n        onChange={(event) => onCommit(event.target.value)}\n      >\n        <option value=\"\">{t(\"filter.all\", \"All\")}</option>\n        <option value=\"true\">{t(\"filter.true\", \"True\")}</option>\n        <option value=\"false\">{t(\"filter.false\", \"False\")}</option>\n      </select>\n    );\n  }\n\n  if (type === \"date\") {\n    return (\n      <input\n        type=\"date\"\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${baseClass} ${groupedClass}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => {\n          setDraft(event.target.value);\n          onCommit(event.target.value);\n        }}\n      />\n    );\n  }\n\n  return (\n    <div className=\"relative flex w-full min-w-0 items-center\">\n      {withSearchIcon && (\n        <Icon\n          name=\"search\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute left-2 size-lt-icon-md text-lt-muted-fg\"\n        />\n      )}\n      <input\n        type={type === \"number\" ? \"number\" : \"text\"}\n        aria-label={inputLabel}\n        data-test={testId}\n        className={`${baseClass} ${groupedClass} ${withSearchIcon ? \"pl-8\" : \"\"} ${onClear ? \"pr-8\" : \"\"}`}\n        disabled={processing}\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            onCommit(draft);\n          }\n        }}\n        onBlur={() => {\n          if (draft !== value) {\n            onCommit(draft);\n          }\n        }}\n      />\n      {onClear && draft !== \"\" && (\n        <button\n          type=\"button\"\n          aria-label={t(\"filter.clear\", \"Clear {{label}} filter\", { label })}\n          data-test={testId ? `${testId}-clear` : undefined}\n          className=\"absolute right-1 inline-flex size-6 items-center justify-center rounded hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onClear}\n        >\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-sm\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAKA,IAAM,YACJ;AAEF,SAAgB,iBAAiB,EAC/B,MACA,OACA,OACA,YACA,iBAAiB,OACjB,UAAU,OACV,WACA,QACA,UACA,WAYC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CACxC,MAAM,aAAa,aAAa,EAAE,mBAAmB,oBAAoB,EAAE,MAAM,CAAC;CAClF,MAAM,eAAe,UAAU,mBAAmB;CAElD,gBAAgB;EACd,SAAS,KAAK;CAChB,GAAG,CAAC,KAAK,CAAC;CAEV,IAAI,SAAS,WACX,OACE,qBAAC,UAAD;EACE,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,UAAU,GAAG;EAC3B,UAAU;EACH;EACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;YANlD;GAQE,oBAAC,UAAD;IAAQ,OAAM;cAAI,EAAE,cAAc,KAAK;GAAU,CAAA;GACjD,oBAAC,UAAD;IAAQ,OAAM;cAAQ,EAAE,eAAe,MAAM;GAAU,CAAA;GACvD,oBAAC,UAAD;IAAQ,OAAM;cAAS,EAAE,gBAAgB,OAAO;GAAU,CAAA;EACpD;;CAIZ,IAAI,SAAS,QACX,OACE,oBAAC,SAAD;EACE,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,UAAU,GAAG;EAC3B,UAAU;EACV,OAAO;EACP,WAAW,UAAU;GACnB,SAAS,MAAM,OAAO,KAAK;GAC3B,SAAS,MAAM,OAAO,KAAK;EAC7B;CACD,CAAA;CAIL,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,kBACC,oBAAC,MAAD;IACE,MAAK;IACL,eAAY;IACZ,WAAU;GACX,CAAA;GAEH,oBAAC,SAAD;IACE,MAAM,SAAS,WAAW,WAAW;IACrC,cAAY;IACZ,aAAW;IACX,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,iBAAiB,SAAS,GAAG,GAAG,UAAU,SAAS;IAC9F,UAAU;IACV,OAAO;IACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,YAAY,UAAU;KACpB,IAAI,MAAM,QAAQ,SAChB,SAAS,KAAK;IAElB;IACA,cAAc;KACZ,IAAI,UAAU,OACZ,SAAS,KAAK;IAElB;GACD,CAAA;GACA,WAAW,UAAU,MACpB,oBAAC,UAAD;IACE,MAAK;IACL,cAAY,EAAE,gBAAgB,0BAA0B,EAAE,MAAM,CAAC;IACjE,aAAW,SAAS,GAAG,OAAO,UAAU,KAAA;IACxC,WAAU;IACV,UAAU;IACV,SAAS;cAET,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EAEP;;AAET"}
+{"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.js

@@ -5,7 +5,7 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 	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 ? t("pagination.page", "Page {{page}}", { page: currentPage }) : t("pagination.showing", "Showing {{from}}-{{to}} of {{total}}", {
+		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

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

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/lattice/icons\";\nimport { getSortDirectionLabel } from \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}
+{"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 \"../query\";\nimport type { TableColumn, TableSort, TableState } from \"../types\";\n\nexport function SortBar({\n  columnsByKey,\n  state,\n  processing,\n  onClear,\n}: {\n  columnsByKey: Map<string, TableColumn>;\n  state: TableState;\n  processing: boolean;\n  onClear: (sort: TableSort) => void;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center gap-4 border-b border-lt-border px-4 py-2.5 text-sm\">\n      {state.sorts.map((sort, index) => {\n        const column = columnsByKey.get(sort.key);\n        const label = column?.label ?? sort.key;\n        const arrow = sort.direction === \"desc\" ? \"arrow-down\" : \"arrow-up\";\n\n        return (\n          <span key={sort.key} className=\"inline-flex items-center gap-1.5\">\n            <span className=\"font-medium\">{`${index + 1}. ${label}`}</span>\n            <Icon\n              name={arrow}\n              role=\"img\"\n              aria-hidden={false}\n              aria-label={getSortDirectionLabel(sort.direction)}\n              className=\"size-lt-icon-sm text-lt-muted-fg\"\n            />\n            <button\n              type=\"button\"\n              className=\"inline-flex size-5 items-center justify-center rounded text-lt-muted-fg hover:bg-lt-muted disabled:opacity-50\"\n              disabled={processing}\n              aria-label={`Clear ${label} sort`}\n              data-test={`clear-${sort.key}-sort`}\n              onClick={() => onClear(sort)}\n            >\n              <Icon name=\"x\" className=\"size-lt-icon-sm\" />\n            </button>\n          </span>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;AAIA,SAAgB,QAAQ,EACtB,cACA,OACA,YACA,WAMC;CACD,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,MAAM,KAAK,MAAM,UAAU;GAEhC,MAAM,QADS,aAAa,IAAI,KAAK,GACvB,GAAQ,SAAS,KAAK;GACpC,MAAM,QAAQ,KAAK,cAAc,SAAS,eAAe;GAEzD,OACE,qBAAC,QAAD;IAAqB,WAAU;cAA/B;KACE,oBAAC,QAAD;MAAM,WAAU;gBAAe,GAAG,QAAQ,EAAE,IAAI;KAAc,CAAA;KAC9D,oBAAC,MAAD;MACE,MAAM;MACN,MAAK;MACL,eAAa;MACb,cAAY,sBAAsB,KAAK,SAAS;MAChD,WAAU;KACX,CAAA;KACD,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,UAAU;MACV,cAAY,SAAS,MAAM;MAC3B,aAAW,SAAS,KAAK,IAAI;MAC7B,eAAe,QAAQ,IAAI;gBAE3B,oBAAC,MAAD;OAAM,MAAK;OAAI,WAAU;MAAmB,CAAA;KACtC,CAAA;IACJ;MAnBK,KAAK,GAmBV;EAEV,CAAC;CACE,CAAA;AAET"}

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

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

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

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

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

@@ -1,39 +1,29 @@
-import { useColumnRegistry } from "../../provider.js";
+import { useColumnRegistry } from "../../core/registry-context.js";
+import { columnCell } from "../registry.js";
 import { BadgeCell } from "./cells/badge-cell.js";
+import { BooleanCell } from "./cells/boolean-cell.js";
 import { IconCell } from "./cells/icon-cell.js";
 import { ImageCell } from "./cells/image-cell.js";
+import { MoneyCell } from "./cells/money-cell.js";
+import { NumberCell } from "./cells/number-cell.js";
 import { TextCell } from "./cells/text-cell.js";
+import { StackCell } from "./cells/stack-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/table-cell.tsx
+var builtinColumnCells = {
+	"column.badge": columnCell(BadgeCell),
+	"column.boolean": columnCell(BooleanCell),
+	"column.icon": columnCell(IconCell),
+	"column.image": columnCell(ImageCell),
+	"column.money": columnCell(MoneyCell),
+	"column.number": columnCell(NumberCell),
+	"column.stack": columnCell(StackCell),
+	"column.text": columnCell(TextCell)
+};
 function ColumnCell({ column, row }) {
-	const customRenderer = useColumnRegistry()[column.type];
-	if (customRenderer) return customRenderer({
-		column,
-		row,
-		value: row[column.key]
-	});
-	if (column.type === "stack") return /* @__PURE__ */ jsx("div", {
-		className: "grid gap-1",
-		children: (column.columns ?? []).map((stackedColumn) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TextCell, {
-			column: stackedColumn,
-			row,
-			value: row[stackedColumn.key]
-		}) }, stackedColumn.key))
-	});
-	if (column.type === "badge") return /* @__PURE__ */ jsx(BadgeCell, {
-		column,
-		value: row[column.key]
-	});
-	if (column.type === "icon") return /* @__PURE__ */ jsx(IconCell, {
-		column,
-		value: row[column.key]
-	});
-	if (column.type === "image") return /* @__PURE__ */ jsx(ImageCell, {
-		column,
-		value: row[column.key]
-	});
-	return /* @__PURE__ */ jsx(TextCell, {
+	return /* @__PURE__ */ jsx(useColumnRegistry()[column.type] ?? builtinColumnCells[column.type] ?? builtinColumnCells["column.text"], {
 		column,
+		props: column.props ?? {},
 		row,
 		value: row[column.key]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"../../provider\";\nimport type { TableColumn, TableRow } from \"../types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const columnRegistry = useColumnRegistry();\n  const customRenderer = columnRegistry[column.type];\n\n  if (customRenderer) {\n    return customRenderer({ column, row, value: row[column.key] });\n  }\n\n  if (column.type === \"stack\") {\n    return (\n      <div className=\"grid gap-1\">\n        {(column.columns ?? []).map((stackedColumn) => (\n          <span key={stackedColumn.key}>\n            <TextCell column={stackedColumn} row={row} value={row[stackedColumn.key]} />\n          </span>\n        ))}\n      </div>\n    );\n  }\n\n  if (column.type === \"badge\") {\n    return <BadgeCell column={column} value={row[column.key]} />;\n  }\n\n  if (column.type === \"icon\") {\n    return <IconCell column={column} value={row[column.key]} />;\n  }\n\n  if (column.type === \"image\") {\n    return <ImageCell column={column} value={row[column.key]} />;\n  }\n\n  return <TextCell column={column} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAElF,MAAM,iBADiB,kBACA,EAAe,OAAO;CAE7C,IAAI,gBACF,OAAO,eAAe;EAAE;EAAQ;EAAK,OAAO,IAAI,OAAO;CAAK,CAAC;CAG/D,IAAI,OAAO,SAAS,SAClB,OACE,oBAAC,OAAD;EAAK,WAAU;aACX,OAAO,WAAW,CAAC,GAAG,KAAK,kBAC3B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;GAAU,QAAQ;GAAoB;GAAK,OAAO,IAAI,cAAc;EAAO,CAAA,EACvE,GAFK,cAAc,GAEnB,CACP;CACE,CAAA;CAIT,IAAI,OAAO,SAAS,SAClB,OAAO,oBAAC,WAAD;EAAmB;EAAQ,OAAO,IAAI,OAAO;CAAO,CAAA;CAG7D,IAAI,OAAO,SAAS,QAClB,OAAO,oBAAC,UAAD;EAAkB;EAAQ,OAAO,IAAI,OAAO;CAAO,CAAA;CAG5D,IAAI,OAAO,SAAS,SAClB,OAAO,oBAAC,WAAD;EAAmB;EAAQ,OAAO,IAAI,OAAO;CAAO,CAAA;CAG7D,OAAO,oBAAC,UAAD;EAAkB;EAAa;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AACtE"}
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../resources/js/table/components/table-cell.tsx"],"sourcesContent":["import { useColumnRegistry } from \"../../provider\";\nimport { columnCell, type ColumnRegistry } from \"../registry\";\nimport type { TableColumn, TableRow } from \"../types\";\nimport { BadgeCell } from \"./cells/badge-cell\";\nimport { BooleanCell } from \"./cells/boolean-cell\";\nimport { IconCell } from \"./cells/icon-cell\";\nimport { ImageCell } from \"./cells/image-cell\";\nimport { MoneyCell } from \"./cells/money-cell\";\nimport { NumberCell } from \"./cells/number-cell\";\nimport { StackCell } from \"./cells/stack-cell\";\nimport { TextCell } from \"./cells/text-cell\";\n\n// Built-in cells live with the (lazy-loaded) table feature rather than the\n// eager registry, so they stay code-split. Consumer-registered columns are\n// merged on top and win on type collisions.\nconst builtinColumnCells: ColumnRegistry = {\n  \"column.badge\": columnCell(BadgeCell),\n  \"column.boolean\": columnCell(BooleanCell),\n  \"column.icon\": columnCell(IconCell),\n  \"column.image\": columnCell(ImageCell),\n  \"column.money\": columnCell(MoneyCell),\n  \"column.number\": columnCell(NumberCell),\n  \"column.stack\": columnCell(StackCell),\n  \"column.text\": columnCell(TextCell),\n};\n\nexport function ColumnCell({ column, row }: { column: TableColumn; row: TableRow }) {\n  const customCells = useColumnRegistry();\n  const Cell =\n    customCells[column.type] ??\n    builtinColumnCells[column.type] ??\n    builtinColumnCells[\"column.text\"];\n\n  return <Cell column={column} props={column.props ?? {}} row={row} value={row[column.key]} />;\n}\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,qBAAqC;CACzC,gBAAgB,WAAW,SAAS;CACpC,kBAAkB,WAAW,WAAW;CACxC,eAAe,WAAW,QAAQ;CAClC,gBAAgB,WAAW,SAAS;CACpC,gBAAgB,WAAW,SAAS;CACpC,iBAAiB,WAAW,UAAU;CACtC,gBAAgB,WAAW,SAAS;CACpC,eAAe,WAAW,QAAQ;AACpC;AAEA,SAAgB,WAAW,EAAE,QAAQ,OAA+C;CAOlF,OAAO,oBANa,kBAElB,EAAY,OAAO,SACnB,mBAAmB,OAAO,SAC1B,mBAAmB,gBAEd;EAAc;EAAQ,OAAO,OAAO,SAAS,CAAC;EAAQ;EAAK,OAAO,IAAI,OAAO;CAAO,CAAA;AAC7F"}

package/dist/table/components/table.js

@@ -1,12 +1,19 @@
+import { cn } from "../../lib/utils.js";
+import { nodeIdentity } from "../../core/test-id.js";
+import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { useColumnResizing } from "../../core/use-column-resizing.js";
+import { alignJustifyItems, alignText } from "../align.js";
 import { getBulkActions } from "../bulk.js";
 import { flattenColumns, getRowActions, getRowKey } from "../payload.js";
-import { getColumnGridTemplate, getQueryParams, getVisiblePages } from "../query.js";
+import { getQueryParams, getTableSizingColumns, getTableUtilityTracks, getVisiblePages } from "../query.js";
 import { useTableSelection } from "../use-table-selection.js";
 import { useTable } from "../use-table.js";
+import { Checkbox } from "../../core/components/checkbox.js";
 import { BulkBar } from "./bulk-bar.js";
 import { ColumnFilterControl } from "./column-filter-control.js";
 import { ColumnHeader } from "./column-header.js";
+import { FilterBar } from "./filter-bar.js";
 import { FilterStackBar } from "./filter-stack-bar.js";
 import { TablePagination } from "./pagination.js";
 import { SortBar } from "./sort-bar.js";
@@ -17,7 +24,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/table.tsx
 var TableComponent = ({ node }) => {
 	const { t } = useT("lattice");
-	const { columns, rows, pagination, state, filters, addFilter, updateFilter, removeFilter, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
+	const { columns, rows, pagination, state, filters, tableFilters, addFilter, updateFilter, removeFilter, setTableFilter, resetFilters, searchFilterOptions, processing, hasLoaded, infiniteLoaderRef, sort, clearSort, goToPage, loadMore } = useTable(node);
 	const bulkActions = useMemo(() => getBulkActions(node.props?.bulkActions), [node.props?.bulkActions]);
 	const hasBulkActions = bulkActions.length > 0;
 	const rowEntries = useMemo(() => rows.map((row, index) => ({
@@ -39,171 +46,203 @@ var TableComponent = ({ node }) => {
 		clause,
 		index
 	}));
-	const gridTemplateColumns = useMemo(() => getColumnGridTemplate(columns, hasActions, hasBulkActions), [
-		columns,
-		hasActions,
-		hasBulkActions
-	]);
+	const filterDefinitions = useMemo(() => Array.isArray(node.props?.filters) ? node.props.filters : [], [node.props?.filters]);
+	const hasActiveFilters = filters.length > 0 || Object.keys(tableFilters).length > 0;
+	const sizingColumns = useMemo(() => getTableSizingColumns(columns), [columns]);
+	const utilityTracks = useMemo(() => getTableUtilityTracks(hasActions, hasBulkActions), [hasActions, hasBulkActions]);
+	const resizingEnabled = node.props?.resizableColumns === true;
+	const resizeStorageIdentity = nodeIdentity(node);
+	const { getResizeHandleProps, gridTemplateColumns, hasOverrides, resetColumns } = useColumnResizing({
+		columns: sizingColumns,
+		enabled: resizingEnabled,
+		leadingTracks: utilityTracks.leadingTracks,
+		showIndicator: node.props?.resizeIndicator === true,
+		storageKey: resizingEnabled && resizeStorageIdentity ? `lattice:table-columns:${resizeStorageIdentity}` : void 0,
+		trailingTracks: utilityTracks.trailingTracks
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		"data-lattice-component": node.id,
-		className: "overflow-x-auto rounded-lt-sm border border-lt-border",
-		children: [
-			hasBulkActions && selection.active && /* @__PURE__ */ jsx(BulkBar, {
-				actions: bulkActions,
-				selectedKeys: selection.selectedKeys,
-				allMatching: selection.allMatching,
-				total: pagination.total,
-				query: getQueryParams(state),
-				canSelectAllMatching: selection.allVisibleSelected && !selection.allMatching && pagination.total !== void 0 && pagination.total > selection.selectedKeys.length,
-				onSelectAllMatching: selection.selectAllMatching,
-				onCompleted: selection.clear
-			}),
-			filters.length > 0 && /* @__PURE__ */ jsx(FilterStackBar, {
-				filters,
-				columnsByKey,
-				processing,
-				onRemove: removeFilter
-			}),
-			state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
-				columnsByKey,
-				state,
-				processing,
-				onClear: clearSort
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "min-w-full text-sm",
-				role: "table",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "border-b border-lt-border bg-lt-muted/50",
-					role: "rowgroup",
+		className: "relative",
+		children: [hasOverrides && /* @__PURE__ */ jsx("button", {
+			"aria-label": t("a11y.resetColumnWidths", "Reset column widths"),
+			className: "absolute right-1 top-1 z-10 hidden rounded-lt-sm p-1 text-lt-muted-fg hover:text-lt-fg md:inline-flex",
+			"data-test": "table-reset-columns",
+			onClick: resetColumns,
+			title: t("a11y.resetColumnWidths", "Reset column widths"),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "rotate-ccw",
+				className: "size-lt-icon-sm"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "overflow-x-auto rounded-lt-sm border border-lt-border",
+			children: [
+				filterDefinitions.length > 0 && /* @__PURE__ */ jsx(FilterBar, {
+					filters: filterDefinitions,
+					values: tableFilters,
+					processing,
+					hasActiveFilters,
+					onChange: setTableFilter,
+					onReset: resetFilters,
+					onSearch: searchFilterOptions
+				}),
+				hasBulkActions && selection.active && /* @__PURE__ */ jsx(BulkBar, {
+					actions: bulkActions,
+					selectedKeys: selection.selectedKeys,
+					allMatching: selection.allMatching,
+					total: pagination.total ?? void 0,
+					query: getQueryParams(state),
+					canSelectAllMatching: selection.allVisibleSelected && !selection.allMatching && pagination.total != null && pagination.total > selection.selectedKeys.length,
+					onSelectAllMatching: selection.selectAllMatching,
+					onCompleted: selection.clear
+				}),
+				filters.length > 0 && /* @__PURE__ */ jsx(FilterStackBar, {
+					filters,
+					columnsByKey,
+					processing,
+					onRemove: removeFilter
+				}),
+				state.sorts.length > 0 && /* @__PURE__ */ jsx(SortBar, {
+					columnsByKey,
+					state,
+					processing,
+					onClear: clearSort
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-full text-sm",
+					role: "table",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]",
-						role: "row",
-						style: { "--lattice-table-columns": gridTemplateColumns },
-						children: [
-							hasBulkActions && /* @__PURE__ */ jsx("div", {
-								className: "flex items-center px-4 py-3",
-								role: "columnheader",
-								children: /* @__PURE__ */ jsx("input", {
-									type: "checkbox",
-									"aria-label": t("a11y.selectAllRows", "Select all rows"),
-									"data-test": "select-all",
-									checked: selection.allSelected,
-									onChange: selection.toggleAll
-								})
-							}),
-							columns.map((column) => /* @__PURE__ */ jsx(ColumnHeader, {
-								column,
-								processing,
-								sort,
-								state
-							}, column.key)),
-							hasActions && /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-3 text-right align-middle font-medium text-lt-muted-fg",
-								role: "columnheader",
-								children: /* @__PURE__ */ jsx("span", {
-									className: "sr-only",
-									children: node.props?.actionsLabel
-								})
-							})
-						]
-					}), hasFilters && /* @__PURE__ */ jsxs("div", {
-						className: "hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]",
-						role: "row",
-						style: { "--lattice-table-columns": gridTemplateColumns },
-						children: [
-							hasBulkActions && /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-2",
-								role: "cell"
-							}),
-							columns.map((column) => /* @__PURE__ */ jsx("div", {
-								className: "min-w-0 px-2 py-2",
-								role: "cell",
-								children: column.filter?.enabled && /* @__PURE__ */ jsx(ColumnFilterControl, {
+						className: "border-b border-lt-border bg-lt-muted/50",
+						role: "rowgroup",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "hidden min-w-full md:grid md:grid-cols-[var(--lattice-table-columns)]",
+							role: "row",
+							style: { "--lattice-table-columns": gridTemplateColumns },
+							children: [
+								hasBulkActions && /* @__PURE__ */ jsx("div", {
+									className: "flex items-center px-4 py-3",
+									role: "columnheader",
+									children: /* @__PURE__ */ jsx(Checkbox, {
+										"aria-label": t("a11y.selectAllRows", "Select all rows"),
+										"data-test": "select-all",
+										checked: selection.allSelected,
+										onCheckedChange: () => selection.toggleAll()
+									})
+								}),
+								columns.map((column, index) => /* @__PURE__ */ jsx(ColumnHeader, {
 									column,
-									clauses: filterEntries.filter((entry) => entry.clause.field === column.key),
 									processing,
-									onAdd: addFilter,
-									onUpdate: updateFilter,
-									onRemove: removeFilter
+									resizeHandleProps: resizingEnabled ? getResizeHandleProps(sizingColumns[index]) : void 0,
+									sort,
+									state
+								}, column.key)),
+								hasActions && /* @__PURE__ */ jsx("div", {
+									className: "px-4 py-3 text-right align-middle font-medium text-lt-muted-fg",
+									role: "columnheader",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: node.props?.actionsLabel
+									})
 								})
-							}, column.key)),
-							hasActions && /* @__PURE__ */ jsx("div", {
-								className: "px-4 py-2",
-								role: "cell"
-							})
-						]
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					role: "rowgroup",
-					children: !hasLoaded ? /* @__PURE__ */ jsx("div", {
-						className: "p-4 text-lt-muted-fg",
-						role: "row",
-						children: /* @__PURE__ */ jsx("div", {
-							role: "cell",
-							children: t("table.loading", "Loading rows...")
-						})
-					}) : rowEntries.length === 0 ? /* @__PURE__ */ jsx("div", {
-						className: "p-8 text-center text-lt-muted-fg",
-						role: "row",
-						children: /* @__PURE__ */ jsx("div", {
-							role: "cell",
-							children: node.props?.emptyLabel
-						})
-					}) : rowEntries.map(({ row, actions, key }) => {
-						return /* @__PURE__ */ jsxs("div", {
-							className: `grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${striped ? "odd:bg-lt-muted/30" : ""}`,
+							]
+						}), hasFilters && /* @__PURE__ */ jsxs("div", {
+							className: "hidden min-w-full border-t border-lt-border md:grid md:grid-cols-[var(--lattice-table-columns)]",
 							role: "row",
 							style: { "--lattice-table-columns": gridTemplateColumns },
 							children: [
 								hasBulkActions && /* @__PURE__ */ jsx("div", {
-									className: "flex items-center p-4",
-									role: "cell",
-									children: /* @__PURE__ */ jsx("input", {
-										type: "checkbox",
-										"aria-label": t("a11y.selectRow", "Select row {{key}}", { key }),
-										"data-test": `select-row-${key}`,
-										checked: selection.isSelected(key),
-										onChange: () => selection.toggle(key)
-									})
+									className: "px-4 py-2",
+									role: "cell"
 								}),
-								columns.map((column) => /* @__PURE__ */ jsxs("div", {
-									className: "grid min-w-0 gap-1 p-4 align-middle",
+								columns.map((column) => /* @__PURE__ */ jsx("div", {
+									className: "min-w-0 px-2 py-2",
 									role: "cell",
-									children: [/* @__PURE__ */ jsx("span", {
-										"aria-hidden": "true",
-										className: "text-xs font-medium text-lt-muted-fg md:hidden",
-										children: column.label
-									}), /* @__PURE__ */ jsx("div", {
-										className: "min-w-0 truncate",
-										children: /* @__PURE__ */ jsx(ColumnCell, {
-											column,
-											row
-										})
-									})]
+									children: column.filter?.enabled && /* @__PURE__ */ jsx(ColumnFilterControl, {
+										column,
+										clauses: filterEntries.filter((entry) => entry.clause.field === column.key),
+										processing,
+										onAdd: addFilter,
+										onUpdate: updateFilter,
+										onRemove: removeFilter,
+										onSearch: (query) => searchFilterOptions(column.key, query)
+									})
 								}, column.key)),
-								actions.length > 0 && /* @__PURE__ */ jsx("div", {
-									className: "flex items-center justify-start gap-2 p-4 md:justify-end",
-									role: "cell",
-									children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
+								hasActions && /* @__PURE__ */ jsx("div", {
+									className: "px-4 py-2",
+									role: "cell"
 								})
 							]
-						}, key);
-					})
-				})]
-			}),
-			hasLoaded && /* @__PURE__ */ jsx(TablePagination, {
-				pagination,
-				currentPage,
-				processing,
-				mode,
-				hasNextPage,
-				visiblePages,
-				infiniteLoaderRef,
-				onPage: goToPage,
-				onLoadMore: loadMore
-			})
-		]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						role: "rowgroup",
+						children: !hasLoaded ? /* @__PURE__ */ jsx("div", {
+							className: "p-4 text-lt-muted-fg",
+							role: "row",
+							children: /* @__PURE__ */ jsx("div", {
+								role: "cell",
+								children: t("table.loading", "Loading rows...")
+							})
+						}) : rowEntries.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "p-8 text-center text-lt-muted-fg",
+							role: "row",
+							children: /* @__PURE__ */ jsx("div", {
+								role: "cell",
+								children: node.props?.emptyLabel
+							})
+						}) : rowEntries.map(({ row, actions, key }) => {
+							return /* @__PURE__ */ jsxs("div", {
+								className: `grid grid-cols-1 border-b border-lt-border last:border-b-0 md:grid-cols-[var(--lattice-table-columns)] ${striped ? "odd:bg-lt-muted/30" : ""}`,
+								role: "row",
+								style: { "--lattice-table-columns": gridTemplateColumns },
+								children: [
+									hasBulkActions && /* @__PURE__ */ jsx("div", {
+										className: "flex items-center p-4",
+										role: "cell",
+										children: /* @__PURE__ */ jsx(Checkbox, {
+											"aria-label": t("a11y.selectRow", "Select row {{key}}", { key }),
+											"data-test": `select-row-${key}`,
+											checked: selection.isSelected(key),
+											onCheckedChange: () => selection.toggle(key)
+										})
+									}),
+									columns.map((column) => /* @__PURE__ */ jsxs("div", {
+										className: cn("grid min-w-0 gap-1 p-4 align-middle", alignText(column.align), alignJustifyItems(column.align)),
+										role: "cell",
+										children: [/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "text-xs font-medium text-lt-muted-fg md:hidden",
+											children: column.label
+										}), /* @__PURE__ */ jsx("div", {
+											className: "min-w-0 truncate",
+											children: /* @__PURE__ */ jsx(ColumnCell, {
+												column,
+												row
+											})
+										})]
+									}, column.key)),
+									actions.length > 0 && /* @__PURE__ */ jsx("div", {
+										className: "flex items-center justify-start gap-2 p-4 md:justify-end",
+										role: "cell",
+										children: actions.map((action, actionIndex) => /* @__PURE__ */ jsx(TableActionNode, { node: action }, action.key ?? action.id ?? actionIndex))
+									})
+								]
+							}, key);
+						})
+					})]
+				}),
+				hasLoaded && /* @__PURE__ */ jsx(TablePagination, {
+					pagination,
+					currentPage,
+					processing,
+					mode,
+					hasNextPage,
+					visiblePages,
+					infiniteLoaderRef,
+					onPage: goToPage,
+					onLoadMore: loadMore
+				})
+			]
+		})]
 	});
 };
 //#endregion