@lattice-php/lattice 0.1.0 → 0.3.0

package/dist/table/bulk.d.ts

@@ -1,18 +1,14 @@
 import { Method } from '@inertiajs/core';
-export type BulkActionVariant = "default" | "destructive" | "ghost" | "link" | "outline" | "secondary";
-export type BulkActionConfirmation = {
-    cancelLabel?: string;
-    confirmLabel?: string;
-    description?: string;
-    title?: string;
-};
+import { Node } from '../core/types';
+import { Action, ActionNode, ButtonVariant } from '../types/generated';
 export type BulkAction = {
     id: string;
     label: string;
     method: Method;
     endpoint: string;
     ref: string;
-    variant: BulkActionVariant;
-    confirmation: BulkActionConfirmation | null;
+    variant: ButtonVariant;
+    confirmation: Action["confirmation"];
+    form: Node | null;
 };
-export declare function getBulkActions(value: unknown): BulkAction[];
+export declare function getBulkActions(actions: ActionNode[] | undefined): BulkAction[];

package/dist/table/bulk.js

@@ -1,40 +1,18 @@
 //#region resources/js/table/bulk.ts
-var methods = [
-	"delete",
-	"get",
-	"patch",
-	"post",
-	"put"
-];
-function asString(value, fallback = "") {
-	return typeof value === "string" ? value : fallback;
-}
-function asMethod(value) {
-	return methods.includes(value) ? value : "post";
-}
-function asVariant(value) {
-	return typeof value === "string" ? value : "default";
-}
-function asConfirmation(value) {
-	if (typeof value !== "object" || value === null || Array.isArray(value)) return null;
-	return value;
-}
-function getBulkActions(value) {
-	if (!Array.isArray(value)) return [];
-	return value.flatMap((item) => {
-		if (typeof item !== "object" || item === null) return [];
-		const record = item;
-		const props = typeof record.props === "object" && record.props !== null ? record.props : {};
-		const endpoint = asString(props.endpoint);
-		if (endpoint === "") return [];
+function getBulkActions(actions) {
+	return (actions ?? []).flatMap((node) => {
+		if (node.type === "action.group") return [];
+		const props = node.props;
+		if (!props.endpoint) return [];
 		return [{
-			id: asString(record.id),
-			label: asString(props.label, "Run action"),
-			method: asMethod(props.method),
-			endpoint,
-			ref: asString(props.ref),
-			variant: asVariant(props.variant),
-			confirmation: asConfirmation(props.confirmation)
+			id: node.id ?? "",
+			label: props.label ?? "Run action",
+			method: props.method ?? "post",
+			endpoint: props.endpoint,
+			ref: props.ref ?? "",
+			variant: props.variant ?? "default",
+			confirmation: props.confirmation,
+			form: props.form
 		}];
 	});
 }

package/dist/table/bulk.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\n\nexport type BulkActionVariant =\n  | \"default\"\n  | \"destructive\"\n  | \"ghost\"\n  | \"link\"\n  | \"outline\"\n  | \"secondary\";\n\nexport type BulkActionConfirmation = {\n  cancelLabel?: string;\n  confirmLabel?: string;\n  description?: string;\n  title?: string;\n};\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: BulkActionVariant;\n  confirmation: BulkActionConfirmation | null;\n};\n\nconst methods = [\"delete\", \"get\", \"patch\", \"post\", \"put\"] satisfies Method[];\n\nfunction asString(value: unknown, fallback = \"\"): string {\n  return typeof value === \"string\" ? value : fallback;\n}\n\nfunction asMethod(value: unknown): Method {\n  return methods.includes(value as Method) ? (value as Method) : \"post\";\n}\n\nfunction asVariant(value: unknown): BulkActionVariant {\n  return typeof value === \"string\" ? (value as BulkActionVariant) : \"default\";\n}\n\nfunction asConfirmation(value: unknown): BulkActionConfirmation | null {\n  if (typeof value !== \"object\" || value === null || Array.isArray(value)) {\n    return null;\n  }\n\n  return value as BulkActionConfirmation;\n}\n\nexport function getBulkActions(value: unknown): BulkAction[] {\n  if (!Array.isArray(value)) {\n    return [];\n  }\n\n  return value.flatMap((item): BulkAction[] => {\n    if (typeof item !== \"object\" || item === null) {\n      return [];\n    }\n\n    const record = item as Record<string, unknown>;\n    const props =\n      typeof record.props === \"object\" && record.props !== null\n        ? (record.props as Record<string, unknown>)\n        : {};\n    const endpoint = asString(props.endpoint);\n\n    if (endpoint === \"\") {\n      return [];\n    }\n\n    return [\n      {\n        id: asString(record.id),\n        label: asString(props.label, \"Run action\"),\n        method: asMethod(props.method),\n        endpoint,\n        ref: asString(props.ref),\n        variant: asVariant(props.variant),\n        confirmation: asConfirmation(props.confirmation),\n      },\n    ];\n  });\n}\n"],"mappings":";AA2BA,IAAM,UAAU;CAAC;CAAU;CAAO;CAAS;CAAQ;AAAK;AAExD,SAAS,SAAS,OAAgB,WAAW,IAAY;CACvD,OAAO,OAAO,UAAU,WAAW,QAAQ;AAC7C;AAEA,SAAS,SAAS,OAAwB;CACxC,OAAO,QAAQ,SAAS,KAAe,IAAK,QAAmB;AACjE;AAEA,SAAS,UAAU,OAAmC;CACpD,OAAO,OAAO,UAAU,WAAY,QAA8B;AACpE;AAEA,SAAS,eAAe,OAA+C;CACrE,IAAI,OAAO,UAAU,YAAY,UAAU,QAAQ,MAAM,QAAQ,KAAK,GACpE,OAAO;CAGT,OAAO;AACT;AAEA,SAAgB,eAAe,OAA8B;CAC3D,IAAI,CAAC,MAAM,QAAQ,KAAK,GACtB,OAAO,CAAC;CAGV,OAAO,MAAM,SAAS,SAAuB;EAC3C,IAAI,OAAO,SAAS,YAAY,SAAS,MACvC,OAAO,CAAC;EAGV,MAAM,SAAS;EACf,MAAM,QACJ,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,OAChD,OAAO,QACR,CAAC;EACP,MAAM,WAAW,SAAS,MAAM,QAAQ;EAExC,IAAI,aAAa,IACf,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,SAAS,OAAO,EAAE;GACtB,OAAO,SAAS,MAAM,OAAO,YAAY;GACzC,QAAQ,SAAS,MAAM,MAAM;GAC7B;GACA,KAAK,SAAS,MAAM,GAAG;GACvB,SAAS,UAAU,MAAM,OAAO;GAChC,cAAc,eAAe,MAAM,YAAY;EACjD,CACF;CACF,CAAC;AACH"}
+{"version":3,"file":"bulk.js","names":[],"sources":["../../resources/js/table/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { Action, ActionNode, ButtonVariant } from \"@lattice-php/lattice/types/generated\";\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: ButtonVariant;\n  confirmation: Action[\"confirmation\"];\n  form: Node | null;\n};\n\nexport function getBulkActions(actions: ActionNode[] | undefined): BulkAction[] {\n  return (actions ?? []).flatMap((node): BulkAction[] => {\n    if (node.type === \"action.group\") {\n      return [];\n    }\n\n    const props = node.props;\n\n    if (!props.endpoint) {\n      return [];\n    }\n\n    return [\n      {\n        id: node.id ?? \"\",\n        label: props.label ?? \"Run action\",\n        method: props.method ?? \"post\",\n        endpoint: props.endpoint,\n        ref: props.ref ?? \"\",\n        variant: props.variant ?? \"default\",\n        confirmation: props.confirmation,\n        form: props.form,\n      },\n    ];\n  });\n}\n"],"mappings":";AAeA,SAAgB,eAAe,SAAiD;CAC9E,QAAQ,WAAW,CAAC,GAAG,SAAS,SAAuB;EACrD,IAAI,KAAK,SAAS,gBAChB,OAAO,CAAC;EAGV,MAAM,QAAQ,KAAK;EAEnB,IAAI,CAAC,MAAM,UACT,OAAO,CAAC;EAGV,OAAO,CACL;GACE,IAAI,KAAK,MAAM;GACf,OAAO,MAAM,SAAS;GACtB,QAAQ,MAAM,UAAU;GACxB,UAAU,MAAM;GAChB,KAAK,MAAM,OAAO;GAClB,SAAS,MAAM,WAAW;GAC1B,cAAc,MAAM;GACpB,MAAM,MAAM;EACd,CACF;CACF,CAAC;AACH"}

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

@@ -1,15 +1,26 @@
-import { withRefHeader } from "../../core/component-ref.js";
+import { withHeaders } from "../../core/headers.js";
+import { prefixedTestId } from "../../core/test-id.js";
 import { Button } from "../../core/components/button.js";
+import { useT } from "../../i18n/instance.js";
 import { Spinner } from "../../core/components/spinner.js";
 import { ConfirmDialog } from "../../core/components/confirm-dialog.js";
-import { dispatchActionEffects, dispatchActionError, getActionEffects } from "../../action/effects.js";
+import { dispatchActionError, getActionEffects } from "../../effects/dispatch.js";
+import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
+import { ActionForm } from "../../action/components/action-form.js";
 import { useState } from "react";
 import { useHttp } from "@inertiajs/react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/bulk-bar.tsx
 function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAllMatching, onSelectAllMatching, onCompleted }) {
+	const { t } = useT("lattice");
 	const http = useHttp({});
+	const dispatch = useEffectDispatcher();
 	const [confirming, setConfirming] = useState(null);
+	const [filling, setFilling] = useState(null);
+	const selectionPayload = () => allMatching ? {
+		allMatching: true,
+		...query
+	} : { selected: selectedKeys };
 	async function submit(action) {
 		try {
 			http.transform((data) => ({
@@ -19,7 +30,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 					...query
 				} : { selected: selectedKeys }
 			}));
-			dispatchActionEffects(getActionEffects((await http[action.method](action.endpoint, { headers: withRefHeader(action.ref ?? "") })).effects));
+			dispatch(getActionEffects((await http[action.method](action.endpoint, { headers: withHeaders(action.ref ?? "") })).effects));
 			setConfirming(null);
 			onCompleted();
 		} catch (error) {
@@ -27,6 +38,10 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		}
 	}
 	function run(action) {
+		if (action.form) {
+			setFilling(action);
+			return;
+		}
 		if (action.confirmation) {
 			setConfirming(action);
 			return;
@@ -39,18 +54,20 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				className: "font-medium",
-				children: allMatching ? `All ${count} selected` : `${count} selected`
+				children: allMatching ? t("bulk.allSelected", "All {{count}} selected", { count }) : t("bulk.selected", "{{count}} selected", { count })
 			}),
 			canSelectAllMatching && /* @__PURE__ */ jsx("button", {
 				type: "button",
+				"data-test": "bulk-select-all-matching",
 				className: "font-medium text-lt-primary underline underline-offset-2",
 				onClick: onSelectAllMatching,
-				children: `Select all ${total} matching`
+				children: t("bulk.selectAllMatching", "Select all {{total}} matching", { total })
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-wrap items-center gap-2",
 				children: actions.map((action) => /* @__PURE__ */ jsxs(Button, {
 					type: "button",
+					"data-test": prefixedTestId("bulk-action", action.id),
 					variant: action.variant,
 					disabled: http.processing,
 					onClick: () => run(action),
@@ -59,13 +76,30 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 			}),
 			confirming?.confirmation && /* @__PURE__ */ jsx(ConfirmDialog, {
 				title: confirming.confirmation.title ?? confirming.label,
-				description: confirming.confirmation.description,
+				description: confirming.confirmation.description ?? void 0,
 				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
 				cancelLabel: confirming.confirmation.cancelLabel ?? "Cancel",
 				confirmVariant: confirming.variant,
 				processing: http.processing,
 				onConfirm: () => void submit(confirming),
 				onCancel: () => setConfirming(null)
+			}),
+			filling?.form && /* @__PURE__ */ jsx(ActionForm, {
+				cancelLabel: filling.confirmation?.cancelLabel ?? "Cancel",
+				componentRef: filling.ref,
+				description: filling.confirmation?.description ?? void 0,
+				endpoint: filling.endpoint,
+				extraData: selectionPayload(),
+				formNode: filling.form,
+				method: filling.method,
+				onClose: () => setFilling(null),
+				onSuccess: (response) => {
+					dispatch(getActionEffects(response.effects));
+					setFilling(null);
+					onCompleted();
+				},
+				submitLabel: filling.confirmation?.confirmLabel ?? filling.label,
+				title: filling.confirmation?.title ?? filling.label
 			})
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport {\n  dispatchActionEffects,\n  dispatchActionError,\n  getActionEffects,\n} from \"@lattice/lattice/action/effects\";\nimport type { ActionEffect } from \"@lattice/lattice/action/effects\";\nimport { withRefHeader } from \"@lattice/lattice/core/component-ref\";\nimport { Button } from \"@lattice/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice/lattice/core/components/spinner\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkResponse = {\n  data?: Record<string, unknown>;\n  effects?: ActionEffect[];\n  ok?: boolean;\n};\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const http = useHttp<BulkData, BulkResponse>({});\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n\n  async function submit(action: BulkAction): Promise<void> {\n    try {\n      http.transform((data) => ({\n        ...data,\n        ...(allMatching ? { allMatching: true, ...query } : { selected: selectedKeys }),\n      }));\n\n      const response = await http[action.method](action.endpoint, {\n        headers: withRefHeader(action.ref ?? \"\"),\n      });\n\n      dispatchActionEffects(getActionEffects(response.effects));\n      setConfirming(null);\n      onCompleted();\n    } catch (error) {\n      dispatchActionError(error);\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching ? `All ${count} selected` : `${count} selected`}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {`Select all ${total} matching`}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,OAAO,QAAgC,CAAC,CAAC;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CAEpE,eAAe,OAAO,QAAmC;EACvD,IAAI;GACF,KAAK,WAAW,UAAU;IACxB,GAAG;IACH,GAAI,cAAc;KAAE,aAAa;KAAM,GAAG;IAAM,IAAI,EAAE,UAAU,aAAa;GAC/E,EAAE;GAMF,sBAAsB,kBAAiB,MAJhB,KAAK,OAAO,QAAQ,OAAO,UAAU,EAC1D,SAAS,cAAc,OAAO,OAAO,EAAE,EACzC,CAAC,GAE+C,OAAO,CAAC;GACxD,cAAc,IAAI;GAClB,YAAY;EACd,SAAS,OAAO;GACd,oBAAoB,KAAK;EAC3B;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cAAc,OAAO,MAAM,aAAa,GAAG,MAAM;GAC9C,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,SAAS;cAER,cAAc,MAAM;GACf,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAL3B,CAOG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OARD,OAAO,EAQN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa;IACrC,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;EAEA;;AAET"}
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useHttp } from \"@inertiajs/react\";\nimport { useState } from \"react\";\nimport { ActionForm } from \"@lattice-php/lattice/action/components/action-form\";\nimport { dispatchActionError, getActionEffects } from \"@lattice-php/lattice/effects/dispatch\";\nimport type { ActionResponse } from \"@lattice-php/lattice/effects/dispatch\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { withHeaders } from \"@lattice-php/lattice/core/headers\";\nimport { Button } from \"@lattice-php/lattice/core/components/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/core/components/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/core/components/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"../bulk\";\n\ntype BulkData = {\n  allMatching?: boolean;\n  selected?: string[];\n};\n\nexport function BulkBar({\n  actions,\n  selectedKeys,\n  allMatching,\n  total,\n  query,\n  canSelectAllMatching,\n  onSelectAllMatching,\n  onCompleted,\n}: {\n  actions: BulkAction[];\n  selectedKeys: string[];\n  allMatching: boolean;\n  total?: number;\n  query: Record<string, unknown>;\n  canSelectAllMatching: boolean;\n  onSelectAllMatching: () => void;\n  onCompleted: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const http = useHttp<BulkData, ActionResponse>({});\n  const dispatch = useEffectDispatcher();\n  const [confirming, setConfirming] = useState<BulkAction | null>(null);\n  const [filling, setFilling] = useState<BulkAction | null>(null);\n\n  const selectionPayload = (): Record<string, unknown> =>\n    allMatching ? { allMatching: true, ...query } : { selected: selectedKeys };\n\n  async function submit(action: BulkAction): Promise<void> {\n    try {\n      http.transform((data) => ({\n        ...data,\n        ...(allMatching ? { allMatching: true, ...query } : { selected: selectedKeys }),\n      }));\n\n      const response = await http[action.method](action.endpoint, {\n        headers: withHeaders(action.ref ?? \"\"),\n      });\n\n      dispatch(getActionEffects(response.effects));\n      setConfirming(null);\n      onCompleted();\n    } catch (error) {\n      dispatchActionError(error);\n    }\n  }\n\n  function run(action: BulkAction): void {\n    if (action.form) {\n      setFilling(action);\n\n      return;\n    }\n\n    if (action.confirmation) {\n      setConfirming(action);\n\n      return;\n    }\n\n    void submit(action);\n  }\n\n  const count = allMatching ? (total ?? selectedKeys.length) : selectedKeys.length;\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-3 border-b border-lt-border bg-lt-muted/50 p-4 text-sm\">\n      <span className=\"font-medium\">\n        {allMatching\n          ? t(\"bulk.allSelected\", \"All {{count}} selected\", { count })\n          : t(\"bulk.selected\", \"{{count}} selected\", { count })}\n      </span>\n      {canSelectAllMatching && (\n        <button\n          type=\"button\"\n          data-test=\"bulk-select-all-matching\"\n          className=\"font-medium text-lt-primary underline underline-offset-2\"\n          onClick={onSelectAllMatching}\n        >\n          {t(\"bulk.selectAllMatching\", \"Select all {{total}} matching\", { total })}\n        </button>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {actions.map((action) => (\n          <Button\n            key={action.id}\n            type=\"button\"\n            data-test={prefixedTestId(\"bulk-action\", action.id)}\n            variant={action.variant}\n            disabled={http.processing}\n            onClick={() => run(action)}\n          >\n            {http.processing && <Spinner />}\n            {action.label}\n          </Button>\n        ))}\n      </div>\n\n      {confirming?.confirmation && (\n        <ConfirmDialog\n          title={confirming.confirmation.title ?? confirming.label}\n          description={confirming.confirmation.description ?? undefined}\n          confirmLabel={confirming.confirmation.confirmLabel ?? confirming.label}\n          cancelLabel={confirming.confirmation.cancelLabel ?? \"Cancel\"}\n          confirmVariant={confirming.variant}\n          processing={http.processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? \"Cancel\"}\n          componentRef={filling.ref}\n          description={filling.confirmation?.description ?? undefined}\n          endpoint={filling.endpoint}\n          extraData={selectionPayload()}\n          formNode={filling.form}\n          method={filling.method}\n          onClose={() => setFilling(null)}\n          onSuccess={(response) => {\n            dispatch(getActionEffects(response.effects));\n            setFilling(null);\n            onCompleted();\n          }}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,OAAO,QAAkC,CAAC,CAAC;CACjD,MAAM,WAAW,oBAAoB;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAA4B,IAAI;CACpE,MAAM,CAAC,SAAS,cAAc,SAA4B,IAAI;CAE9D,MAAM,yBACJ,cAAc;EAAE,aAAa;EAAM,GAAG;CAAM,IAAI,EAAE,UAAU,aAAa;CAE3E,eAAe,OAAO,QAAmC;EACvD,IAAI;GACF,KAAK,WAAW,UAAU;IACxB,GAAG;IACH,GAAI,cAAc;KAAE,aAAa;KAAM,GAAG;IAAM,IAAI,EAAE,UAAU,aAAa;GAC/E,EAAE;GAMF,SAAS,kBAAiB,MAJH,KAAK,OAAO,QAAQ,OAAO,UAAU,EAC1D,SAAS,YAAY,OAAO,OAAO,EAAE,EACvC,CAAC,GAEkC,OAAO,CAAC;GAC3C,cAAc,IAAI;GAClB,YAAY;EACd,SAAS,OAAO;GACd,oBAAoB,KAAK;EAC3B;CACF;CAEA,SAAS,IAAI,QAA0B;EACrC,IAAI,OAAO,MAAM;GACf,WAAW,MAAM;GAEjB;EACF;EAEA,IAAI,OAAO,cAAc;GACvB,cAAc,MAAM;GAEpB;EACF;EAEA,OAAY,MAAM;CACpB;CAEA,MAAM,QAAQ,cAAe,SAAS,aAAa,SAAU,aAAa;CAE1E,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,QAAD;IAAM,WAAU;cACb,cACG,EAAE,oBAAoB,0BAA0B,EAAE,MAAM,CAAC,IACzD,EAAE,iBAAiB,sBAAsB,EAAE,MAAM,CAAC;GAClD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,0BAA0B,iCAAiC,EAAE,MAAM,CAAC;GACjE,CAAA;GAEV,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,WACZ,qBAAC,QAAD;KAEE,MAAK;KACL,aAAW,eAAe,eAAe,OAAO,EAAE;KAClD,SAAS,OAAO;KAChB,UAAU,KAAK;KACf,eAAe,IAAI,MAAM;eAN3B,CAQG,KAAK,cAAc,oBAAC,SAAD,CAAU,CAAA,GAC7B,OAAO,KACF;OATD,OAAO,EASN,CACT;GACE,CAAA;GAEJ,YAAY,gBACX,oBAAC,eAAD;IACE,OAAO,WAAW,aAAa,SAAS,WAAW;IACnD,aAAa,WAAW,aAAa,eAAe,KAAA;IACpD,cAAc,WAAW,aAAa,gBAAgB,WAAW;IACjE,aAAa,WAAW,aAAa,eAAe;IACpD,gBAAgB,WAAW;IAC3B,YAAY,KAAK;IACjB,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe;IAClD,cAAc,QAAQ;IACtB,aAAa,QAAQ,cAAc,eAAe,KAAA;IAClD,UAAU,QAAQ;IAClB,WAAW,iBAAiB;IAC5B,UAAU,QAAQ;IAClB,QAAQ,QAAQ;IAChB,eAAe,WAAW,IAAI;IAC9B,YAAY,aAAa;KACvB,SAAS,iBAAiB,SAAS,OAAO,CAAC;KAC3C,WAAW,IAAI;KACf,YAAY;IACd;IACA,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;GAC/C,CAAA;EAEA;;AAET"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const BadgeCell: ColumnCellComponent<"column.badge">;

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

@@ -0,0 +1,16 @@
+import { cn } from "../../../lib/utils.js";
+import { formatCell } from "../../format.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/badge-cell.tsx
+var BadgeCell = ({ column, props, value }) => {
+	const label = formatCell(value, column);
+	if (label === "") return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("lt-cell-badge", `lt-cell-tone-${props.colors?.[String(value)] ?? "gray"}`),
+		children: label
+	});
+};
+//#endregion
+export { BadgeCell };
+
+//# sourceMappingURL=badge-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/badge-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { formatCell } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const BadgeCell: ColumnCellComponent<\"column.badge\"> = ({ column, props, value }) => {\n  const label = formatCell(value, column);\n\n  if (label === \"\") {\n    return null;\n  }\n\n  const color = props.colors?.[String(value)] ?? \"gray\";\n\n  return <span className={cn(\"lt-cell-badge\", `lt-cell-tone-${color}`)}>{label}</span>;\n};\n"],"mappings":";;;;AAIA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAKT,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,gBAF9B,MAAM,SAAS,OAAO,KAAK,MAAM,QAEoB;YAAI;CAAY,CAAA;AACrF"}

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

@@ -0,0 +1,3 @@
+import { ColumnCellComponent } from '../../registry';
+/** Renders a boolean column as a check (truthy) or cross (falsy) icon. */
+export declare const BooleanCell: ColumnCellComponent<"column.boolean">;

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

@@ -0,0 +1,23 @@
+import { cn } from "../../../lib/utils.js";
+import { Icon } from "../../../icons/sprite.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/boolean-cell.tsx
+function isTruthy(value) {
+	return value === true || value === 1 || value === "1" || value === "true";
+}
+/** Renders a boolean column as a check (truthy) or cross (falsy) icon. */
+var BooleanCell = ({ value }) => {
+	const truthy = isTruthy(value);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": String(truthy),
+		role: "img",
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: truthy ? "check" : "x",
+			className: cn("size-lt-icon-md", truthy ? "text-lt-success" : "text-lt-muted-fg")
+		})
+	});
+};
+//#endregion
+export { BooleanCell };
+
+//# sourceMappingURL=boolean-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/boolean-cell.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nfunction isTruthy(value: unknown): boolean {\n  return value === true || value === 1 || value === \"1\" || value === \"true\";\n}\n\n/** Renders a boolean column as a check (truthy) or cross (falsy) icon. */\nexport const BooleanCell: ColumnCellComponent<\"column.boolean\"> = ({ value }) => {\n  const truthy = isTruthy(value);\n\n  return (\n    <span aria-label={String(truthy)} role=\"img\">\n      <Icon\n        name={truthy ? \"check\" : \"x\"}\n        className={cn(\"size-lt-icon-md\", truthy ? \"text-lt-success\" : \"text-lt-muted-fg\")}\n      />\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,SAAS,SAAS,OAAyB;CACzC,OAAO,UAAU,QAAQ,UAAU,KAAK,UAAU,OAAO,UAAU;AACrE;;AAGA,IAAa,eAAsD,EAAE,YAAY;CAC/E,MAAM,SAAS,SAAS,KAAK;CAE7B,OACE,oBAAC,QAAD;EAAM,cAAY,OAAO,MAAM;EAAG,MAAK;YACrC,oBAAC,MAAD;GACE,MAAM,SAAS,UAAU;GACzB,WAAW,GAAG,mBAAmB,SAAS,oBAAoB,kBAAkB;EACjF,CAAA;CACG,CAAA;AAEV"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const IconCell: ColumnCellComponent<"column.icon">;

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

@@ -0,0 +1,21 @@
+import { cn } from "../../../lib/utils.js";
+import { IconRenderer } from "../../../icons/icon-renderer.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/icon-cell.tsx
+var IconCell = ({ props, value }) => {
+	const icon = props.icons?.[String(value)] ?? props.icon ?? void 0;
+	if (!icon) return null;
+	const color = props.colors?.[String(value)];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": String(value),
+		className: cn("lt-cell-icon", color && `lt-cell-tone-${color}`),
+		children: /* @__PURE__ */ jsx(IconRenderer, {
+			className: "size-lt-icon-md",
+			icon
+		})
+	});
+};
+//#endregion
+export { IconCell };
+
+//# sourceMappingURL=icon-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/icon-cell.tsx"],"sourcesContent":["import { IconRenderer } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const IconCell: ColumnCellComponent<\"column.icon\"> = ({ props, value }) => {\n  const icon = props.icons?.[String(value)] ?? props.icon ?? undefined;\n\n  if (!icon) {\n    return null;\n  }\n\n  const color = props.colors?.[String(value)];\n\n  return (\n    <span\n      aria-label={String(value)}\n      className={cn(\"lt-cell-icon\", color && `lt-cell-tone-${color}`)}\n    >\n      <IconRenderer className=\"size-lt-icon-md\" icon={icon} />\n    </span>\n  );\n};\n"],"mappings":";;;;AAIA,IAAa,YAAgD,EAAE,OAAO,YAAY;CAChF,MAAM,OAAO,MAAM,QAAQ,OAAO,KAAK,MAAM,MAAM,QAAQ,KAAA;CAE3D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,MAAM,SAAS,OAAO,KAAK;CAEzC,OACE,oBAAC,QAAD;EACE,cAAY,OAAO,KAAK;EACxB,WAAW,GAAG,gBAAgB,SAAS,gBAAgB,OAAO;YAE9D,oBAAC,cAAD;GAAc,WAAU;GAAwB;EAAO,CAAA;CACnD,CAAA;AAEV"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const ImageCell: ColumnCellComponent<"column.image">;

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

@@ -0,0 +1,23 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/image-cell.tsx
+var ImageCell = ({ column, props, value }) => {
+	const url = typeof value === "string" ? value : "";
+	if (url === "") return null;
+	const size = props.size ?? 32;
+	return /* @__PURE__ */ jsx("img", {
+		alt: column.label,
+		src: url,
+		width: size,
+		height: size,
+		className: cn("object-cover", props.circular ? "rounded-full" : "rounded-lt-sm"),
+		style: {
+			width: size,
+			height: size
+		}
+	});
+};
+//#endregion
+export { ImageCell };
+
+//# sourceMappingURL=image-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/image-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const ImageCell: ColumnCellComponent<\"column.image\"> = ({ column, props, value }) => {\n  const url = typeof value === \"string\" ? value : \"\";\n\n  if (url === \"\") {\n    return null;\n  }\n\n  const size = props.size ?? 32;\n\n  return (\n    <img\n      alt={column.label}\n      src={url}\n      width={size}\n      height={size}\n      className={cn(\"object-cover\", props.circular ? \"rounded-full\" : \"rounded-lt-sm\")}\n      style={{ width: size, height: size }}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ;CAEhD,IAAI,QAAQ,IACV,OAAO;CAGT,MAAM,OAAO,MAAM,QAAQ;CAE3B,OACE,oBAAC,OAAD;EACE,KAAK,OAAO;EACZ,KAAK;EACL,OAAO;EACP,QAAQ;EACR,WAAW,GAAG,gBAAgB,MAAM,WAAW,iBAAiB,eAAe;EAC/E,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CACpC,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const MoneyCell: ColumnCellComponent<"column.money">;

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

@@ -0,0 +1,28 @@
+import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../format.js";
+import { numericValue } from "./numeric.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/money-cell.tsx
+var MoneyCell = ({ column, props, row, value }) => {
+	const { locale } = useLocale();
+	const number = numericValue(value);
+	if (number === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
+	const rawCode = props.currencyField ? row[props.currencyField] : void 0;
+	const code = props.currency ?? (typeof rawCode === "string" ? rawCode : "");
+	const fractionDigits = {
+		minimumFractionDigits: props.minimumFractionDigits ?? void 0,
+		maximumFractionDigits: props.maximumFractionDigits ?? void 0
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: code ? new Intl.NumberFormat(locale, {
+			style: "currency",
+			currency: code,
+			...fractionDigits
+		}).format(number) : new Intl.NumberFormat(locale, fractionDigits).format(number)
+	});
+};
+//#endregion
+export { MoneyCell };
+
+//# sourceMappingURL=money-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"money-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/money-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatCell } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\nimport { numericValue } from \"./numeric\";\n\nexport const MoneyCell: ColumnCellComponent<\"column.money\"> = ({ column, props, row, value }) => {\n  const { locale } = useLocale();\n  const number = numericValue(value);\n\n  if (number === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const rawCode = props.currencyField ? row[props.currencyField] : undefined;\n  const code = props.currency ?? (typeof rawCode === \"string\" ? rawCode : \"\");\n  const fractionDigits = {\n    minimumFractionDigits: props.minimumFractionDigits ?? undefined,\n    maximumFractionDigits: props.maximumFractionDigits ?? undefined,\n  };\n\n  const text = code\n    ? new Intl.NumberFormat(locale, {\n        style: \"currency\",\n        currency: code,\n        ...fractionDigits,\n      }).format(number)\n    : new Intl.NumberFormat(locale, fractionDigits).format(number);\n\n  return <span className=\"tabular-nums\">{text}</span>;\n};\n"],"mappings":";;;;;AAKA,IAAa,aAAkD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC/F,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,SAAS,aAAa,KAAK;CAEjC,IAAI,WAAW,MACb,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAGhD,MAAM,UAAU,MAAM,gBAAgB,IAAI,MAAM,iBAAiB,KAAA;CACjE,MAAM,OAAO,MAAM,aAAa,OAAO,YAAY,WAAW,UAAU;CACxE,MAAM,iBAAiB;EACrB,uBAAuB,MAAM,yBAAyB,KAAA;EACtD,uBAAuB,MAAM,yBAAyB,KAAA;CACxD;CAUA,OAAO,oBAAC,QAAD;EAAM,WAAU;YARV,OACT,IAAI,KAAK,aAAa,QAAQ;GAC5B,OAAO;GACP,UAAU;GACV,GAAG;EACL,CAAC,EAAE,OAAO,MAAM,IAChB,IAAI,KAAK,aAAa,QAAQ,cAAc,EAAE,OAAO,MAAM;CAEb,CAAA;AACpD"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const NumberCell: ColumnCellComponent<"column.number">;

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

@@ -0,0 +1,25 @@
+import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../format.js";
+import { numericValue } from "./numeric.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/number-cell.tsx
+var NumberCell = ({ column, props, value }) => {
+	const { locale } = useLocale();
+	const number = numericValue(value);
+	if (number === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums",
+		children: new Intl.NumberFormat(locale, {
+			minimumFractionDigits: props.minimumFractionDigits ?? void 0,
+			maximumFractionDigits: props.maximumFractionDigits ?? void 0,
+			...props.unit ? {
+				style: "unit",
+				unit: props.unit
+			} : {}
+		}).format(number)
+	});
+};
+//#endregion
+export { NumberCell };
+
+//# sourceMappingURL=number-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/number-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatCell } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\nimport { numericValue } from \"./numeric\";\n\nexport const NumberCell: ColumnCellComponent<\"column.number\"> = ({ column, props, value }) => {\n  const { locale } = useLocale();\n  const number = numericValue(value);\n\n  if (number === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const text = new Intl.NumberFormat(locale, {\n    minimumFractionDigits: props.minimumFractionDigits ?? undefined,\n    maximumFractionDigits: props.maximumFractionDigits ?? undefined,\n    ...(props.unit ? { style: \"unit\" as const, unit: props.unit } : {}),\n  }).format(number);\n\n  return <span className=\"tabular-nums\">{text}</span>;\n};\n"],"mappings":";;;;;AAKA,IAAa,cAAoD,EAAE,QAAQ,OAAO,YAAY;CAC5F,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,SAAS,aAAa,KAAK;CAEjC,IAAI,WAAW,MACb,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAShD,OAAO,oBAAC,QAAD;EAAM,WAAU;YANV,IAAI,KAAK,aAAa,QAAQ;GACzC,uBAAuB,MAAM,yBAAyB,KAAA;GACtD,uBAAuB,MAAM,yBAAyB,KAAA;GACtD,GAAI,MAAM,OAAO;IAAE,OAAO;IAAiB,MAAM,MAAM;GAAK,IAAI,CAAC;EACnE,CAAC,EAAE,OAAO,MAE6B;CAAW,CAAA;AACpD"}

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

@@ -0,0 +1,2 @@
+/** Parses a cell value to a finite number, or null when it isn't numeric. */
+export declare function numericValue(value: unknown): number | null;

package/dist/table/components/cells/numeric.js

@@ -0,0 +1,10 @@
+//#region resources/js/table/components/cells/numeric.ts
+/** Parses a cell value to a finite number, or null when it isn't numeric. */
+function numericValue(value) {
+	const number = typeof value === "number" ? value : Number(value);
+	return value !== null && value !== void 0 && value !== "" && !Number.isNaN(number) ? number : null;
+}
+//#endregion
+export { numericValue };
+
+//# sourceMappingURL=numeric.js.map

package/dist/table/components/cells/numeric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numeric.js","names":[],"sources":["../../../../resources/js/table/components/cells/numeric.ts"],"sourcesContent":["/** Parses a cell value to a finite number, or null when it isn't numeric. */\nexport function numericValue(value: unknown): number | null {\n  const number = typeof value === \"number\" ? value : Number(value);\n\n  return value !== null && value !== undefined && value !== \"\" && !Number.isNaN(number)\n    ? number\n    : null;\n}\n"],"mappings":";;AACA,SAAgB,aAAa,OAA+B;CAC1D,MAAM,SAAS,OAAO,UAAU,WAAW,QAAQ,OAAO,KAAK;CAE/D,OAAO,UAAU,QAAQ,UAAU,KAAA,KAAa,UAAU,MAAM,CAAC,OAAO,MAAM,MAAM,IAChF,SACA;AACN"}

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

@@ -0,0 +1,3 @@
+import { ColumnCellComponent } from '../../registry';
+/** Renders a stack column's nested columns as stacked text rows. */
+export declare const StackCell: ColumnCellComponent<"column.stack">;

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

@@ -0,0 +1,17 @@
+import { TextCell } from "./text-cell.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/stack-cell.tsx
+/** Renders a stack column's nested columns as stacked text rows. */
+var StackCell = ({ column, row }) => /* @__PURE__ */ jsx("div", {
+	className: "grid gap-1",
+	children: (column.columns ?? []).map((stackedColumn) => /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(TextCell, {
+		column: stackedColumn,
+		props: stackedColumn.props ?? {},
+		row,
+		value: row[stackedColumn.key]
+	}) }, stackedColumn.key))
+});
+//#endregion
+export { StackCell };
+
+//# sourceMappingURL=stack-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stack-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/stack-cell.tsx"],"sourcesContent":["import type { ColumnCellComponent } from \"../../registry\";\nimport type { ColumnPropsOf } from \"../../types\";\nimport { TextCell } from \"./text-cell\";\n\n/** Renders a stack column's nested columns as stacked text rows. */\nexport const StackCell: ColumnCellComponent<\"column.stack\"> = ({ column, row }) => (\n  <div className=\"grid gap-1\">\n    {(column.columns ?? []).map((stackedColumn) => (\n      <span key={stackedColumn.key}>\n        <TextCell\n          column={stackedColumn}\n          props={(stackedColumn.props ?? {}) as ColumnPropsOf<\"column.text\">}\n          row={row}\n          value={row[stackedColumn.key]}\n        />\n      </span>\n    ))}\n  </div>\n);\n"],"mappings":";;;;AAKA,IAAa,aAAkD,EAAE,QAAQ,UACvE,oBAAC,OAAD;CAAK,WAAU;YACX,OAAO,WAAW,CAAC,GAAG,KAAK,kBAC3B,oBAAC,QAAD,EAAA,UACE,oBAAC,UAAD;EACE,QAAQ;EACR,OAAQ,cAAc,SAAS,CAAC;EAC3B;EACL,OAAO,IAAI,cAAc;CAC1B,CAAA,EACG,GAPK,cAAc,GAOnB,CACP;AACE,CAAA"}

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

@@ -0,0 +1,2 @@
+import { ColumnCellComponent } from '../../registry';
+export declare const TextCell: ColumnCellComponent<"column.text">;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice-php/lattice/clipboard\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { ColumnCellComponent } from \"../../registry\";\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = ({ column, props, row, value }) => {\n  const text = formatCell(value, column);\n  const [copied, setCopied] = useState(false);\n  const href = resolveLink(column, row, value);\n  const content = href ? (\n    <a\n      className=\"underline underline-offset-2\"\n      href={href}\n      rel={props.link?.external ? \"noreferrer\" : undefined}\n      target={props.link?.external ? \"_blank\" : undefined}\n    >\n      {text}\n    </a>\n  ) : (\n    text\n  );\n\n  useEffect(() => {\n    if (!copied) {\n      return;\n    }\n\n    const timeout = window.setTimeout(() => setCopied(false), 1500);\n\n    return () => window.clearTimeout(timeout);\n  }, [copied]);\n\n  function handleCopy(): void {\n    void copyToClipboard(text);\n    setCopied(true);\n  }\n\n  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-2\">\n      <span>{content}</span>\n      <button\n        type=\"button\"\n        data-test={`copy-${column.key}`}\n        className=\"inline-flex items-center gap-1 rounded border border-lt-border px-2 py-1 text-xs\"\n        aria-label={`${copied ? \"Copied\" : \"Copy\"} ${column.label}`}\n        onClick={handleCopy}\n      >\n        {copied ? (\n          <Icon name=\"check\" className=\"size-lt-icon-xs\" />\n        ) : (\n          <Icon name=\"copy\" className=\"size-lt-icon-xs\" />\n        )}\n        {copied ? \"Copied\" : \"Copy\"}\n      </button>\n    </span>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,YAAgD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC7F,MAAM,OAAO,WAAW,OAAO,MAAM;CACrC,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,UAAU,OACd,oBAAC,KAAD;EACE,WAAU;EACJ;EACN,KAAK,MAAM,MAAM,WAAW,eAAe,KAAA;EAC3C,QAAQ,MAAM,MAAM,WAAW,WAAW,KAAA;YAEzC;CACA,CAAA,IAEH;CAGF,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,UAAU,OAAO,iBAAiB,UAAU,KAAK,GAAG,IAAI;EAE9D,aAAa,OAAO,aAAa,OAAO;CAC1C,GAAG,CAAC,MAAM,CAAC;CAEX,SAAS,aAAmB;EAC1B,gBAAqB,IAAI;EACzB,UAAU,IAAI;CAChB;CAEA,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD,EAAA,UAAO,QAAc,CAAA,GACrB,qBAAC,UAAD;GACE,MAAK;GACL,aAAW,QAAQ,OAAO;GAC1B,WAAU;GACV,cAAY,GAAG,SAAS,WAAW,OAAO,GAAG,OAAO;GACpD,SAAS;aALX,CAOG,SACC,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA,IAEhD,oBAAC,MAAD;IAAM,MAAK;IAAO,WAAU;GAAmB,CAAA,GAEhD,SAAS,WAAW,MACf;IACJ;;AAEV"}

package/dist/table/components/column-filter-control.d.ts

@@ -1,14 +1,16 @@
 import { FilterClause, TableColumn } from '../types';
+import { FilterOptionSearch } from './filter-controls';
 type ColumnClause = {
     clause: FilterClause;
     index: number;
 };
-export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, }: {
+export declare function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch, }: {
     column: TableColumn;
     clauses: ColumnClause[];
     processing: boolean;
     onAdd: (clause: FilterClause) => void;
     onUpdate: (index: number, clause: FilterClause) => void;
     onRemove: (index: number) => void;
+    onSearch?: FilterOptionSearch;
 }): import("react").JSX.Element | null;
 export {};