@lattice-php/lattice 0.2.0 → 0.3.0

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 { ActionForm } from \"@lattice/lattice/action/components/action-form\";\nimport {\n  dispatchActionEffects,\n  dispatchActionError,\n  getActionEffects,\n} from \"@lattice/lattice/action/effects\";\nimport type { ActionResponse } 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 { useT } from \"@lattice/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 [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: 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.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={`bulk-action-${action.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\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            dispatchActionEffects(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":";;;;;;;;;;;AAqBA,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,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,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,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,OAAO,MAAM,YAAY,EAAE,QAAQ,QAAQ,GAAG;KACxE,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,sBAAsB,iBAAiB,SAAS,OAAO,CAAC;KACxD,WAAW,IAAI;KACf,YAAY;IACd;IACA,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;GAC/C,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

@@ -1,5 +1,2 @@
-import { TableColumn } from '../../types';
-export declare function BadgeCell({ column, value }: {
-    column: TableColumn;
-    value: unknown;
-}): import("react").JSX.Element | null;
+import { ColumnCellComponent } from '../../registry';
+export declare const BadgeCell: ColumnCellComponent<"column.badge">;

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

@@ -2,14 +2,14 @@ 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
-function BadgeCell({ column, value }) {
+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-${column.props?.colors?.[String(value)] ?? "gray"}`),
+		className: cn("lt-cell-badge", `lt-cell-tone-${props.colors?.[String(value)] ?? "gray"}`),
 		children: label
 	});
-}
+};
 //#endregion
 export { BadgeCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"badge-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/badge-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice/lattice/lib/utils\";\nimport type { BadgeColumnProps } from \"@lattice/lattice/types/generated\";\nimport { formatCell } from \"../../format\";\nimport type { TableColumn } from \"../../types\";\n\nexport function BadgeCell({ column, value }: { column: TableColumn; value: unknown }) {\n  const label = formatCell(value, column);\n\n  if (label === \"\") {\n    return null;\n  }\n\n  const props = column.props as BadgeColumnProps | null;\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":";;;;AAKA,SAAgB,UAAU,EAAE,QAAQ,SAAkD;CACpF,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAMT,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,gBAH9B,OAAO,OACA,SAAS,OAAO,KAAK,MAAM,QAEmB;YAAI;CAAY,CAAA;AACrF"}
+{"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

@@ -1,5 +1,2 @@
-import { TableColumn } from '../../types';
-export declare function IconCell({ column, value }: {
-    column: TableColumn;
-    value: unknown;
-}): import("react").JSX.Element | null;
+import { ColumnCellComponent } from '../../registry';
+export declare const IconCell: ColumnCellComponent<"column.icon">;

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

@@ -2,11 +2,10 @@ 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
-function IconCell({ column, value }) {
-	const props = column.props;
-	const icon = props?.icons?.[String(value)] ?? props?.icon ?? void 0;
+var IconCell = ({ props, value }) => {
+	const icon = props.icons?.[String(value)] ?? props.icon ?? void 0;
 	if (!icon) return null;
-	const color = props?.colors?.[String(value)];
+	const color = props.colors?.[String(value)];
 	return /* @__PURE__ */ jsx("span", {
 		"aria-label": String(value),
 		className: cn("lt-cell-icon", color && `lt-cell-tone-${color}`),
@@ -15,7 +14,7 @@ function IconCell({ column, value }) {
 			icon
 		})
 	});
-}
+};
 //#endregion
 export { IconCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"icon-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/icon-cell.tsx"],"sourcesContent":["import { IconRenderer } from \"@lattice/lattice/icons\";\nimport { cn } from \"@lattice/lattice/lib/utils\";\nimport type { IconColumnProps } from \"@lattice/lattice/types/generated\";\nimport type { TableColumn } from \"../../types\";\n\nexport function IconCell({ column, value }: { column: TableColumn; value: unknown }) {\n  const props = column.props as IconColumnProps | null;\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":";;;;AAKA,SAAgB,SAAS,EAAE,QAAQ,SAAkD;CACnF,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,OAAO,QAAQ,OAAO,KAAK,MAAM,OAAO,QAAQ,KAAA;CAE7D,IAAI,CAAC,MACH,OAAO;CAGT,MAAM,QAAQ,OAAO,SAAS,OAAO,KAAK;CAE1C,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"}
+{"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

@@ -1,5 +1,2 @@
-import { TableColumn } from '../../types';
-export declare function ImageCell({ column, value }: {
-    column: TableColumn;
-    value: unknown;
-}): import("react").JSX.Element | null;
+import { ColumnCellComponent } from '../../registry';
+export declare const ImageCell: ColumnCellComponent<"column.image">;

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

@@ -1,23 +1,22 @@
 import { cn } from "../../../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/image-cell.tsx
-function ImageCell({ column, value }) {
+var ImageCell = ({ column, props, value }) => {
 	const url = typeof value === "string" ? value : "";
 	if (url === "") return null;
-	const props = column.props;
-	const size = props?.size ?? 32;
+	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"),
+		className: cn("object-cover", props.circular ? "rounded-full" : "rounded-lt-sm"),
 		style: {
 			width: size,
 			height: size
 		}
 	});
-}
+};
 //#endregion
 export { ImageCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"image-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/image-cell.tsx"],"sourcesContent":["import { cn } from \"@lattice/lattice/lib/utils\";\nimport type { ImageColumnProps } from \"@lattice/lattice/types/generated\";\nimport type { TableColumn } from \"../../types\";\n\nexport function ImageCell({ column, value }: { column: TableColumn; value: unknown }) {\n  const url = typeof value === \"string\" ? value : \"\";\n\n  if (url === \"\") {\n    return null;\n  }\n\n  const props = column.props as ImageColumnProps | null;\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":";;;AAIA,SAAgB,UAAU,EAAE,QAAQ,SAAkD;CACpF,MAAM,MAAM,OAAO,UAAU,WAAW,QAAQ;CAEhD,IAAI,QAAQ,IACV,OAAO;CAGT,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,OAAO,QAAQ;CAE5B,OACE,oBAAC,OAAD;EACE,KAAK,OAAO;EACZ,KAAK;EACL,OAAO;EACP,QAAQ;EACR,WAAW,GAAG,gBAAgB,OAAO,WAAW,iBAAiB,eAAe;EAChF,OAAO;GAAE,OAAO;GAAM,QAAQ;EAAK;CACpC,CAAA;AAEL"}
+{"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

@@ -1,6 +1,2 @@
-import { TableColumn, TableRow } from '../../types';
-export declare function TextCell({ column, row, value, }: {
-    column: TableColumn;
-    row: TableRow;
-    value: unknown;
-}): string | import("react").JSX.Element;
+import { ColumnCellComponent } from '../../registry';
+export declare const TextCell: ColumnCellComponent<"column.text">;

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

@@ -4,16 +4,15 @@ 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
-function TextCell({ column, row, value }) {
-	const props = column.props;
+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,
+		rel: props.link?.external ? "noreferrer" : void 0,
+		target: props.link?.external ? "_blank" : void 0,
 		children: text
 	}) : text;
 	useEffect(() => {
@@ -25,7 +24,7 @@ function TextCell({ column, row, value }) {
 		copyToClipboard(text);
 		setCopied(true);
 	}
-	if (!props?.copyable) return content;
+	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", {
@@ -43,7 +42,7 @@ function TextCell({ column, row, value }) {
 			}), copied ? "Copied" : "Copy"]
 		})]
 	});
-}
+};
 //#endregion
 export { TextCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { copyToClipboard } from \"@lattice/lattice/clipboard\";\nimport { Icon } from \"@lattice/lattice/icons\";\nimport type { TextColumnProps } from \"@lattice/lattice/types/generated\";\nimport { useEffect, useState } from \"react\";\nimport { formatCell, resolveLink } from \"../../format\";\nimport type { TableColumn, TableRow } from \"../../types\";\n\nexport function TextCell({\n  column,\n  row,\n  value,\n}: {\n  column: TableColumn;\n  row: TableRow;\n  value: unknown;\n}) {\n  const props = column.props as TextColumnProps | null;\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":";;;;;;AAOA,SAAgB,SAAS,EACvB,QACA,KACA,SAKC;CACD,MAAM,QAAQ,OAAO;CACrB,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,OAAO,MAAM,WAAW,eAAe,KAAA;EAC5C,QAAQ,OAAO,MAAM,WAAW,WAAW,KAAA;YAE1C;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,OAAO,UACV,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"}
+{"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 {};

package/dist/table/components/column-filter-control.js

@@ -1,15 +1,26 @@
+import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../core/components/popover.js";
 import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../query.js";
-import { FilterValueInput } from "./filter-value-input.js";
+import { FilterValueInput, fieldClass } from "./filter-value-input.js";
+import { TableFilterControl } from "./filter-controls.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Popover from "@radix-ui/react-popover";
 //#region resources/js/table/components/column-filter-control.tsx
-function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove }) {
+function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch }) {
 	const { t } = useT("lattice");
 	const filter = column.filter;
 	if (!filter) return null;
+	if (filter.control === "select") return /* @__PURE__ */ jsx(ColumnSelectFilter, {
+		column,
+		clauses,
+		processing,
+		onAdd,
+		onUpdate,
+		onRemove,
+		onSearch
+	});
 	const type = filter.type ?? "text";
 	const operators = filter.operators ?? [];
 	const defaultOperator = filter.defaultOperator ?? operators[0] ?? "eq";
@@ -30,7 +41,7 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 max-w-44 items-stretch",
+		className: "flex min-w-0 max-w-80 items-stretch",
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "min-w-0 flex-1",
 			children: /* @__PURE__ */ jsx(FilterValueInput, {
@@ -44,7 +55,7 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 				onCommit: commitPrimary,
 				onClear: primary ? () => onRemove(primary.index) : void 0
 			})
-		}), /* @__PURE__ */ jsxs(Popover.Root, { children: [/* @__PURE__ */ jsx(Popover.Trigger, {
+		}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsxs("button", {
 				type: "button",
@@ -57,14 +68,13 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 					"aria-hidden": "true",
 					className: "size-lt-icon-md"
 				}), clauses.length > 0 && /* @__PURE__ */ jsx("span", {
-					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium text-lt-primary-fg",
+					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg",
 					children: clauses.length
 				})]
 			})
-		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
-			className: "z-50 w-80 rounded-lt border border-lt-border bg-lt-bg p-4 shadow-lg",
-			sideOffset: 4,
+			className: "w-80 p-4",
 			children: /* @__PURE__ */ jsx(FilterClauseList, {
 				column,
 				clauses,
@@ -75,7 +85,59 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 				onUpdate,
 				onRemove
 			})
-		}) })] })]
+		})] })]
+	});
+}
+function serializeColumnValue(value) {
+	if (Array.isArray(value)) return value.join(",");
+	return typeof value === "string" ? value : "";
+}
+/**
+* Renders a column's option dropdown by reusing the shared table-filter select
+* control, mapping its value to/from a single `eq` clause (or an `in` clause
+* carrying a comma-joined value when the column is `multiple`).
+*/
+function ColumnSelectFilter({ column, clauses, processing, onAdd, onUpdate, onRemove, onSearch }) {
+	const filter = column.filter;
+	if (!filter) return null;
+	const multiple = filter.multiple;
+	const operator = filter.defaultOperator;
+	const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];
+	const value = multiple ? active?.clause.value ? active.clause.value.split(",") : [] : active?.clause.value ?? "";
+	const data = {
+		key: column.key,
+		label: column.label,
+		type: "select",
+		props: {
+			options: filter.options,
+			multiple,
+			searchable: filter.searchable,
+			placeholder: null
+		}
+	};
+	function change(next) {
+		const serialized = serializeColumnValue(next);
+		if (serialized === "") {
+			if (active) onRemove(active.index);
+			return;
+		}
+		if (active) onUpdate(active.index, {
+			...active.clause,
+			operator,
+			value: serialized
+		});
+		else onAdd({
+			field: column.key,
+			operator,
+			value: serialized
+		});
+	}
+	return /* @__PURE__ */ jsx(TableFilterControl, {
+		filter: data,
+		value,
+		processing,
+		onChange: change,
+		onSearch
 	});
 }
 function FilterClauseList({ column, clauses, operators, defaultOperator, processing, onAdd, onUpdate, onRemove }) {
@@ -166,7 +228,7 @@ function FilterClauseRow({ column, type, operators, clause, processing, onOperat
 			children: [operators.length > 1 ? /* @__PURE__ */ jsx("select", {
 				"aria-label": t("filter.operator", "{{label}} operator", { label: column.label }),
 				"data-test": `filter-${column.key}-operator`,
-				className: "h-9 flex-1 rounded-lt-sm border border-lt-input bg-lt-bg px-2 text-sm font-normal",
+				className: cn(fieldClass, "flex-1"),
 				disabled: processing,
 				value: clause.operator,
 				onChange: (event) => onOperator(event.target.value),