@lattice-php/lattice 0.25.0 → 0.27.0

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

@@ -1,10 +1,10 @@
+import { apiFetch } from "../../core/api.js";
 import { useT } from "../../i18n/instance.js";
 import { prefixedTestId } from "../../core/test-id.js";
 import { useEffectDispatcher } from "../../effects/use-effect-dispatcher.js";
 import { Button } from "../../ui/button.js";
 import { Spinner } from "../../ui/spinner.js";
 import { ConfirmDialog } from "../../ui/confirm-dialog.js";
-import { apiFetch } from "../../core/api.js";
 import { runAction } from "../../action/lib/run-action.js";
 import { ActionForm } from "../../action/components/action-form.js";
 import { useState } from "react";
@@ -66,6 +66,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 					type: "button",
 					"data-test": prefixedTestId("bulk-action", action.id),
 					variant: action.variant,
+					emphasis: action.emphasis,
 					disabled: processing,
 					onClick: () => run(action),
 					children: [processing && /* @__PURE__ */ jsx(Spinner, {}), action.label]
@@ -77,6 +78,7 @@ function BulkBar({ actions, selectedKeys, allMatching, total, query, canSelectAl
 				confirmLabel: confirming.confirmation.confirmLabel ?? confirming.label,
 				cancelLabel: confirming.confirmation.cancelLabel ?? t("common.cancel", "Cancel"),
 				confirmVariant: confirming.variant,
+				confirmEmphasis: confirming.emphasis,
 				processing,
 				onConfirm: () => void submit(confirming),
 				onCancel: () => setConfirming(null)

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 { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"@lattice-php/lattice/table/lib/bulk\";\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 [processing, setProcessing] = useState(false);\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    setProcessing(true);\n\n    const ok = await runAction(\n      () =>\n        apiFetch(action.endpoint, {\n          method: action.method,\n          ref: action.ref,\n          body: JSON.stringify(selectionPayload()),\n          throwOnError: false,\n        }),\n      dispatch,\n    );\n\n    setProcessing(false);\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\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(\"table.bulk.all-selected\", \"All {{count}} selected\", { count })\n          : t(\"table.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(\"table.bulk.select-all-matching\", \"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={processing}\n            onClick={() => run(action)}\n          >\n            {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 ?? t(\"common.cancel\", \"Cancel\")}\n          confirmVariant={confirming.variant}\n          processing={processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? t(\"common.cancel\", \"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={() => {\n            setFilling(null);\n            onCompleted();\n          }}\n          placement={filling.modalSide ?? \"center\"}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n          width={filling.modalWidth ?? undefined}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,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,cAAc,IAAI;EAElB,MAAM,KAAK,MAAM,gBAEb,SAAS,OAAO,UAAU;GACxB,QAAQ,OAAO;GACf,KAAK,OAAO;GACZ,MAAM,KAAK,UAAU,iBAAiB,CAAC;GACvC,cAAc;EAChB,CAAC,GACH,QACF;EAEA,cAAc,KAAK;EAEnB,IAAI,IAAI;GACN,cAAc,IAAI;GAClB,YAAY;EACd;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,2BAA2B,0BAA0B,EAAE,MAAM,CAAC,IAChE,EAAE,uBAAuB,sBAAsB,EAAE,MAAM,CAAC;GACxD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,kCAAkC,iCAAiC,EAAE,MAAM,CAAC;GACzE,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;KACV,eAAe,IAAI,MAAM;eAN3B,CAQG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,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,EAAE,iBAAiB,QAAQ;IAC/E,gBAAgB,WAAW;IACf;IACZ,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe,EAAE,iBAAiB,QAAQ;IAC7E,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,iBAAiB;KACf,WAAW,IAAI;KACf,YAAY;IACd;IACA,WAAW,QAAQ,aAAa;IAChC,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;IAC9C,OAAO,QAAQ,cAAc,KAAA;GAC9B,CAAA;EAEA;;AAET"}
+{"version":3,"file":"bulk-bar.js","names":[],"sources":["../../../resources/js/table/components/bulk-bar.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ActionForm, runAction } from \"@lattice-php/lattice/action\";\nimport { apiFetch } from \"@lattice-php/lattice/core/api\";\nimport { useEffectDispatcher } from \"@lattice-php/lattice/effects/use-effect-dispatcher\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { ConfirmDialog } from \"@lattice-php/lattice/ui/confirm-dialog\";\nimport { Spinner } from \"@lattice-php/lattice/ui/spinner\";\nimport { prefixedTestId } from \"@lattice-php/lattice/core/test-id\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { BulkAction } from \"@lattice-php/lattice/table/lib/bulk\";\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 [processing, setProcessing] = useState(false);\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    setProcessing(true);\n\n    const ok = await runAction(\n      () =>\n        apiFetch(action.endpoint, {\n          method: action.method,\n          ref: action.ref,\n          body: JSON.stringify(selectionPayload()),\n          throwOnError: false,\n        }),\n      dispatch,\n    );\n\n    setProcessing(false);\n\n    if (ok) {\n      setConfirming(null);\n      onCompleted();\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(\"table.bulk.all-selected\", \"All {{count}} selected\", { count })\n          : t(\"table.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(\"table.bulk.select-all-matching\", \"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            emphasis={action.emphasis}\n            disabled={processing}\n            onClick={() => run(action)}\n          >\n            {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 ?? t(\"common.cancel\", \"Cancel\")}\n          confirmVariant={confirming.variant}\n          confirmEmphasis={confirming.emphasis}\n          processing={processing}\n          onConfirm={() => void submit(confirming)}\n          onCancel={() => setConfirming(null)}\n        />\n      )}\n\n      {filling?.form && (\n        <ActionForm\n          cancelLabel={filling.confirmation?.cancelLabel ?? t(\"common.cancel\", \"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={() => {\n            setFilling(null);\n            onCompleted();\n          }}\n          placement={filling.modalSide ?? \"center\"}\n          submitLabel={filling.confirmation?.confirmLabel ?? filling.label}\n          title={filling.confirmation?.title ?? filling.label}\n          width={filling.modalWidth ?? undefined}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,QAAQ,EACtB,SACA,cACA,aACA,OACA,OACA,sBACA,qBACA,eAUC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,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,cAAc,IAAI;EAElB,MAAM,KAAK,MAAM,gBAEb,SAAS,OAAO,UAAU;GACxB,QAAQ,OAAO;GACf,KAAK,OAAO;GACZ,MAAM,KAAK,UAAU,iBAAiB,CAAC;GACvC,cAAc;EAChB,CAAC,GACH,QACF;EAEA,cAAc,KAAK;EAEnB,IAAI,IAAI;GACN,cAAc,IAAI;GAClB,YAAY;EACd;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,2BAA2B,0BAA0B,EAAE,MAAM,CAAC,IAChE,EAAE,uBAAuB,sBAAsB,EAAE,MAAM,CAAC;GACxD,CAAA;GACL,wBACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,kCAAkC,iCAAiC,EAAE,MAAM,CAAC;GACzE,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,OAAO;KACjB,UAAU;KACV,eAAe,IAAI,MAAM;eAP3B,CASG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,OAAO,KACF;OAVD,OAAO,EAUN,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,EAAE,iBAAiB,QAAQ;IAC/E,gBAAgB,WAAW;IAC3B,iBAAiB,WAAW;IAChB;IACZ,iBAAiB,KAAK,OAAO,UAAU;IACvC,gBAAgB,cAAc,IAAI;GACnC,CAAA;GAGF,SAAS,QACR,oBAAC,YAAD;IACE,aAAa,QAAQ,cAAc,eAAe,EAAE,iBAAiB,QAAQ;IAC7E,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,iBAAiB;KACf,WAAW,IAAI;KACf,YAAY;IACd;IACA,WAAW,QAAQ,aAAa;IAChC,aAAa,QAAQ,cAAc,gBAAgB,QAAQ;IAC3D,OAAO,QAAQ,cAAc,SAAS,QAAQ;IAC9C,OAAO,QAAQ,cAAc,KAAA;GAC9B,CAAA;EAEA;;AAET"}

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

@@ -1,15 +1,12 @@
-import { cn } from "../../../lib/utils.js";
-import { coerceColor, namedColor, toneProps } from "../../../lib/color.js";
+import { Badge } from "../../../ui/badge.js";
 import { formatCell } from "../../lib/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;
-	const tone = toneProps(coerceColor(props.colors?.[String(value)]) ?? namedColor("gray"));
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("lt-cell-badge", tone.className),
-		style: tone.style,
+	return /* @__PURE__ */ jsx(Badge, {
+		color: props.colors?.[String(value)],
 		children: label
 	});
 };

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-php/lattice/lib/utils\";\nimport { coerceColor, namedColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/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 tone = toneProps(coerceColor(props.colors?.[String(value)]) ?? namedColor(\"gray\"));\n\n  return (\n    <span className={cn(\"lt-cell-badge\", tone.className)} style={tone.style}>\n      {label}\n    </span>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAGT,MAAM,OAAO,UAAU,YAAY,MAAM,SAAS,OAAO,KAAK,EAAE,KAAK,WAAW,MAAM,CAAC;CAEvF,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,KAAK,SAAS;EAAG,OAAO,KAAK;YAC/D;CACG,CAAA;AAEV"}
+{"version":3,"file":"badge-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/badge-cell.tsx"],"sourcesContent":["import { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/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  return <Badge color={props.colors?.[String(value)]}>{label}</Badge>;\n};\n"],"mappings":";;;;AAIA,IAAa,aAAkD,EAAE,QAAQ,OAAO,YAAY;CAC1F,MAAM,QAAQ,WAAW,OAAO,MAAM;CAEtC,IAAI,UAAU,IACZ,OAAO;CAGT,OAAO,oBAAC,OAAD;EAAO,OAAO,MAAM,SAAS,OAAO,KAAK;YAAK;CAAa,CAAA;AACpE"}

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

@@ -1,6 +1,5 @@
-import { cn } from "../../../lib/utils.js";
 import { DateTime } from "../../../i18n/date-time.js";
-import { coerceColor, namedColor, toneProps } from "../../../lib/color.js";
+import { Badge } from "../../../ui/badge.js";
 import { formatCell, resolveLink } from "../../lib/format.js";
 import { CopyableCell } from "./copyable-cell.js";
 import { jsx } from "react/jsx-runtime";
@@ -10,12 +9,10 @@ var TextCell = (args) => {
 	if (args.props.badge) return /* @__PURE__ */ jsx(SingleBadgeCell, { ...args });
 	return /* @__PURE__ */ jsx(PlainTextCell, { ...args });
 };
-function Badge({ label, color }) {
+function TextBadge({ label, color }) {
 	if (label === "") return null;
-	const tone = toneProps(coerceColor(color) ?? namedColor("gray"));
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("lt-cell-badge", tone.className),
-		style: tone.style,
+	return /* @__PURE__ */ jsx(Badge, {
+		color,
 		children: label
 	});
 }
@@ -27,7 +24,7 @@ function MultipleCell({ column, props, value }) {
 		className: "flex flex-wrap gap-1",
 		children: items.map((item, index) => {
 			const chip = item;
-			return /* @__PURE__ */ jsx(Badge, {
+			return /* @__PURE__ */ jsx(TextBadge, {
 				label: formatCell(chip.value, column),
 				color: chip.color
 			}, index);
@@ -36,7 +33,7 @@ function MultipleCell({ column, props, value }) {
 }
 function SingleBadgeCell({ column, props, row, value }) {
 	const colorKey = props.badge.colorKey;
-	return /* @__PURE__ */ jsx(Badge, {
+	return /* @__PURE__ */ jsx(TextBadge, {
 		label: formatCell(value, column),
 		color: String(row[colorKey] ?? "")
 	});

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 { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { coerceColor, namedColor, toneProps } from \"@lattice-php/lattice/lib/color\";\nimport type { ReactNode } from \"react\";\nimport { formatCell, resolveLink } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport type { ColumnPropsOf } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction Badge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  const tone = toneProps(coerceColor(color) ?? namedColor(\"gray\"));\n\n  return (\n    <span className={cn(\"lt-cell-badge\", tone.className)} style={tone.style}>\n      {label}\n    </span>\n  );\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <Badge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <Badge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\">).date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n\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  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  return (\n    <CopyableCell column={column} copyable={props.copyable} value={text}>\n      {content}\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;;AAWA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,MAAM,EAAE,OAAO,SAA8D;CACpF,IAAI,UAAU,IACZ,OAAO;CAGT,MAAM,OAAO,UAAU,YAAY,KAAK,KAAK,WAAW,MAAM,CAAC;CAE/D,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,KAAK,SAAS;EAAG,OAAO,KAAK;YAC/D;CACG,CAAA;AAEV;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,OAAD;IAAmB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EACvF,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,OAAD;EAAO,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AACvF;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,MAAuC;CACjE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CAErC,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,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,OACE,oBAAC,cAAD;EAAsB;EAAQ,UAAU,MAAM;EAAU,OAAO;YAC5D;CACW,CAAA;AAElB"}
+{"version":3,"file":"text-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/text-cell.tsx"],"sourcesContent":["import { DateTime } from \"@lattice-php/lattice/i18n\";\nimport { Badge } from \"@lattice-php/lattice/ui/badge\";\nimport type { ReactNode } from \"react\";\nimport { formatCell, resolveLink } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellArgs, ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport type { ColumnPropsOf } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\ntype TextProps = ColumnCellArgs<\"column.text\">[\"props\"];\n\nexport const TextCell: ColumnCellComponent<\"column.text\"> = (args) => {\n  if (args.props.multiple) {\n    return <MultipleCell {...args} />;\n  }\n\n  if (args.props.badge) {\n    return <SingleBadgeCell {...args} />;\n  }\n\n  return <PlainTextCell {...args} />;\n};\n\nfunction TextBadge({ label, color }: { label: string; color?: string | null }): ReactNode {\n  if (label === \"\") {\n    return null;\n  }\n\n  return <Badge color={color}>{label}</Badge>;\n}\n\nfunction MultipleCell({ column, props, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const items = Array.isArray(value) ? value : [];\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  if (!props.badge) {\n    return <span>{items.map((item) => formatCell(item, column)).join(\", \")}</span>;\n  }\n\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {items.map((item, index) => {\n        const chip = item as { value: unknown; color?: string };\n\n        return <TextBadge key={index} label={formatCell(chip.value, column)} color={chip.color} />;\n      })}\n    </div>\n  );\n}\n\nfunction SingleBadgeCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const colorKey = (props.badge as NonNullable<TextProps[\"badge\"]>).colorKey;\n\n  return <TextBadge label={formatCell(value, column)} color={String(row[colorKey] ?? \"\")} />;\n}\n\nfunction PlainTextCell({ column, props, row, value }: ColumnCellArgs<\"column.text\">): ReactNode {\n  const dateProps = (column.props as ColumnPropsOf<\"column.text\">).date;\n  const href = resolveLink(column, row, value);\n  const text = formatCell(value, column);\n\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  if (dateProps && !href && !props.copyable && value !== null && value !== undefined) {\n    return (\n      <DateTime value={value} dateStyle={dateProps.dateStyle} timeStyle={dateProps.timeStyle} />\n    );\n  }\n\n  return (\n    <CopyableCell column={column} copyable={props.copyable} value={text}>\n      {content}\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;AAUA,IAAa,YAAgD,SAAS;CACpE,IAAI,KAAK,MAAM,UACb,OAAO,oBAAC,cAAD,EAAc,GAAI,KAAO,CAAA;CAGlC,IAAI,KAAK,MAAM,OACb,OAAO,oBAAC,iBAAD,EAAiB,GAAI,KAAO,CAAA;CAGrC,OAAO,oBAAC,eAAD,EAAe,GAAI,KAAO,CAAA;AACnC;AAEA,SAAS,UAAU,EAAE,OAAO,SAA8D;CACxF,IAAI,UAAU,IACZ,OAAO;CAGT,OAAO,oBAAC,OAAD;EAAc;YAAQ;CAAa,CAAA;AAC5C;AAEA,SAAS,aAAa,EAAE,QAAQ,OAAO,SAAmD;CACxF,MAAM,QAAQ,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC;CAE9C,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,IAAI,CAAC,MAAM,OACT,OAAO,oBAAC,QAAD,EAAA,UAAO,MAAM,KAAK,SAAS,WAAW,MAAM,MAAM,CAAC,EAAE,KAAK,IAAI,EAAQ,CAAA;CAG/E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,MAAM,UAAU;GAC1B,MAAM,OAAO;GAEb,OAAO,oBAAC,WAAD;IAAuB,OAAO,WAAW,KAAK,OAAO,MAAM;IAAG,OAAO,KAAK;GAAQ,GAAlE,KAAkE;EAC3F,CAAC;CACE,CAAA;AAET;AAEA,SAAS,gBAAgB,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAChG,MAAM,WAAY,MAAM,MAA0C;CAElE,OAAO,oBAAC,WAAD;EAAW,OAAO,WAAW,OAAO,MAAM;EAAG,OAAO,OAAO,IAAI,aAAa,EAAE;CAAI,CAAA;AAC3F;AAEA,SAAS,cAAc,EAAE,QAAQ,OAAO,KAAK,SAAmD;CAC9F,MAAM,YAAa,OAAO,MAAuC;CACjE,MAAM,OAAO,YAAY,QAAQ,KAAK,KAAK;CAC3C,MAAM,OAAO,WAAW,OAAO,MAAM;CAErC,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,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,YAAY,UAAU,QAAQ,UAAU,KAAA,GACvE,OACE,oBAAC,UAAD;EAAiB;EAAO,WAAW,UAAU;EAAW,WAAW,UAAU;CAAY,CAAA;CAI7F,OACE,oBAAC,cAAD;EAAsB;EAAQ,UAAU,MAAM;EAAU,OAAO;YAC5D;CACW,CAAA;AAElB"}

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

@@ -59,7 +59,7 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 		}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
 			children: /* @__PURE__ */ jsx(IconButton, {
-				variant: "segmented",
+				emphasis: "segmented",
 				size: "md",
 				icon: "filter",
 				label: t("table.filter.column-filters", "{{label}} filters", { label }),
@@ -261,7 +261,7 @@ function FilterClauseRow({ column, type, operators, clause, processing, onOperat
 				className: "flex-1 text-sm font-medium",
 				children: operatorLabel(clause.operator)
 			}), /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
+				emphasis: "outline",
 				size: "icon",
 				icon: "trash-2",
 				"aria-label": t("table.filter.remove", "Remove {{label}} filter", { label }),

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

@@ -1 +1 @@
-{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type {\n  ColumnFilterOption,\n  FilterType,\n  Option,\n  Op,\n} from \"@lattice-php/lattice/types/generated\";\nimport { filterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type { FilterClause, FilterNode, TableColumn } from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\nimport { FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const { filter, label: rawLabel } = column.props;\n  const label = rawLabel ?? column.key;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"filter.select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onReplace={onReplace}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <IconButton\n            variant=\"segmented\"\n            size=\"md\"\n            icon=\"filter\"\n            label={t(\"table.filter.column-filters\", \"{{label}} filters\", { label })}\n            data-test={`filter-${column.key}`}\n            disabled={processing}\n          >\n            {clauses.length > 0 && (\n              <span 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\">\n                {clauses.length}\n              </span>\n            )}\n          </IconButton>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { filter, label } = column.props;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const clauseOptions = filter.clauseOptions ?? [];\n  const activeClauseOption = findActiveClauseOption(\n    clauses.map((entry) => entry.clause),\n    clauseOptions,\n  );\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = activeClauseOption\n    ? activeClauseOption.value\n    : multiple\n      ? active?.clause.value\n        ? active.clause.value.split(\",\")\n        : []\n      : (active?.clause.value ?? \"\");\n\n  const data: FilterNode<\"filter.select\"> = {\n    key: column.key,\n    type: \"filter.select\",\n    props: {\n      label,\n      options: filter.options,\n      multiple,\n      searchable: filter.searchable,\n      placeholder: null,\n    },\n    schema: [\n      {\n        type: \"field.select\",\n        key: column.key,\n        props: {\n          name: \"value\",\n          label,\n          options: filter.options,\n          multiple,\n          searchable: filter.searchable,\n          placeholder: null,\n        },\n      },\n    ],\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(filterValue(next).value);\n\n    if (serialized === \"\") {\n      onReplace(column.key, []);\n\n      return;\n    }\n\n    const clauseOption = clauseOptions.find((option) => option.value === serialized);\n\n    if (clauseOption) {\n      onReplace(column.key, clausesForOption(column.key, clauseOption));\n\n      return;\n    }\n\n    onReplace(column.key, [{ field: column.key, operator, value: serialized }]);\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={{ value }}\n      processing={processing}\n      bare\n      onChange={change}\n      onSearch={onSearch ? (_field, query, signal) => onSearch(query, signal) : undefined}\n    />\n  );\n}\n\nfunction clausesForOption(field: string, option: ColumnFilterOption): FilterClause[] {\n  return option.clauses.map((clause) => ({\n    field,\n    operator: clause.operator,\n    value: clause.value,\n  }));\n}\n\nfunction findActiveClauseOption(\n  clauses: FilterClause[],\n  options: ColumnFilterOption[],\n): ColumnFilterOption | undefined {\n  return options.find((option) => clausesMatch(clauses, clausesForOption(\"\", option)));\n}\n\nfunction clausesMatch(active: FilterClause[], expected: FilterClause[]): boolean {\n  if (active.length !== expected.length) {\n    return false;\n  }\n\n  return expected.every((clause) =>\n    active.some(\n      (current) => current.operator === clause.operator && current.value === clause.value,\n    ),\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.props.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <Button\n          variant=\"secondary\"\n          icon=\"plus\"\n          data-test={`filter-${column.key}-add`}\n          className=\"w-full\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          {t(\"table.filter.add\", \"Add filter\")}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const label = column.props.label ?? column.key;\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <NativeSelect\n            density=\"compact\"\n            aria-label={t(\"table.filter.operator\", \"{{label}} operator\", { label })}\n            data-test={`filter-${column.key}-operator`}\n            className=\"flex-1\"\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </NativeSelect>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <Button\n          variant=\"outline\"\n          size=\"icon\"\n          icon=\"trash-2\"\n          aria-label={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n          data-test={`filter-${column.key}-remove`}\n          disabled={processing}\n          onClick={onRemove}\n        />\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={label}\n          ariaLabel={t(\"table.filter.value\", \"{{label}} filter value\", { label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"column-filter-control.js","names":[],"sources":["../../../resources/js/table/components/column-filter-control.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { NativeSelect } from \"@lattice-php/lattice/ui/native-select\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type {\n  ColumnFilterOption,\n  FilterType,\n  Option,\n  Op,\n} from \"@lattice-php/lattice/types/generated\";\nimport { filterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type { FilterClause, FilterNode, TableColumn } from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\nimport { FilterValueInput } from \"./filter-value-input\";\n\ntype ColumnClause = { clause: FilterClause; index: number };\n\nexport function ColumnFilterControl({\n  column,\n  clauses,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const { filter, label: rawLabel } = column.props;\n  const label = rawLabel ?? column.key;\n\n  if (!filter) {\n    return null;\n  }\n\n  if (filter.control === \"filter.select\") {\n    return (\n      <ColumnSelectFilter\n        column={column}\n        clauses={clauses}\n        processing={processing}\n        onReplace={onReplace}\n        onSearch={onSearch}\n      />\n    );\n  }\n\n  const type = filter.type ?? \"text\";\n  const operators = filter.operators ?? [];\n  const defaultOperator = filter.defaultOperator ?? operators[0] ?? \"eq\";\n  const primary = clauses.find((entry) => entry.clause.operator === defaultOperator) ?? clauses[0];\n\n  function commitPrimary(value: string): void {\n    if (value === \"\") {\n      if (primary) {\n        onRemove(primary.index);\n      }\n\n      return;\n    }\n\n    if (primary) {\n      onUpdate(primary.index, { ...primary.clause, value });\n    } else {\n      onAdd({ field: column.key, operator: defaultOperator, value });\n    }\n  }\n\n  return (\n    <div className=\"flex min-w-0 max-w-80 items-stretch\">\n      <div className=\"min-w-0 flex-1\">\n        <FilterValueInput\n          type={type}\n          label={label}\n          value={primary?.clause.value ?? \"\"}\n          processing={processing}\n          withSearchIcon={type === \"text\" || type === \"number\"}\n          grouped\n          testId={`filter-${column.key}-value`}\n          onCommit={commitPrimary}\n          onClear={primary ? () => onRemove(primary.index) : undefined}\n        />\n      </div>\n      <Popover>\n        <PopoverTrigger asChild>\n          <IconButton\n            emphasis=\"segmented\"\n            size=\"md\"\n            icon=\"filter\"\n            label={t(\"table.filter.column-filters\", \"{{label}} filters\", { label })}\n            data-test={`filter-${column.key}`}\n            disabled={processing}\n          >\n            {clauses.length > 0 && (\n              <span 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\">\n                {clauses.length}\n              </span>\n            )}\n          </IconButton>\n        </PopoverTrigger>\n\n        <PopoverContent align=\"start\" className=\"w-80 p-4\">\n          <FilterClauseList\n            column={column}\n            clauses={clauses}\n            operators={operators}\n            defaultOperator={defaultOperator}\n            processing={processing}\n            onAdd={onAdd}\n            onUpdate={onUpdate}\n            onRemove={onRemove}\n          />\n        </PopoverContent>\n      </Popover>\n    </div>\n  );\n}\n\nfunction serializeColumnValue(value: unknown): string {\n  if (Array.isArray(value)) {\n    return value.join(\",\");\n  }\n\n  return typeof value === \"string\" ? value : \"\";\n}\n\nfunction ColumnSelectFilter({\n  column,\n  clauses,\n  processing,\n  onReplace,\n  onSearch,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  processing: boolean;\n  onReplace: (field: string, clauses: FilterClause[]) => void;\n  onSearch?: (query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { filter, label } = column.props;\n\n  if (!filter) {\n    return null;\n  }\n\n  const multiple = filter.multiple;\n  const operator = filter.defaultOperator;\n  const clauseOptions = filter.clauseOptions ?? [];\n  const activeClauseOption = findActiveClauseOption(\n    clauses.map((entry) => entry.clause),\n    clauseOptions,\n  );\n  const active = clauses.find((entry) => entry.clause.operator === operator) ?? clauses[0];\n  const value: unknown = activeClauseOption\n    ? activeClauseOption.value\n    : multiple\n      ? active?.clause.value\n        ? active.clause.value.split(\",\")\n        : []\n      : (active?.clause.value ?? \"\");\n\n  const data: FilterNode<\"filter.select\"> = {\n    key: column.key,\n    type: \"filter.select\",\n    props: {\n      label,\n      options: filter.options,\n      multiple,\n      searchable: filter.searchable,\n      placeholder: null,\n    },\n    schema: [\n      {\n        type: \"field.select\",\n        key: column.key,\n        props: {\n          name: \"value\",\n          label,\n          options: filter.options,\n          multiple,\n          searchable: filter.searchable,\n          placeholder: null,\n        },\n      },\n    ],\n  };\n\n  function change(next: unknown): void {\n    const serialized = serializeColumnValue(filterValue(next).value);\n\n    if (serialized === \"\") {\n      onReplace(column.key, []);\n\n      return;\n    }\n\n    const clauseOption = clauseOptions.find((option) => option.value === serialized);\n\n    if (clauseOption) {\n      onReplace(column.key, clausesForOption(column.key, clauseOption));\n\n      return;\n    }\n\n    onReplace(column.key, [{ field: column.key, operator, value: serialized }]);\n  }\n\n  return (\n    <TableFilterControl\n      filter={data}\n      value={{ value }}\n      processing={processing}\n      bare\n      onChange={change}\n      onSearch={onSearch ? (_field, query, signal) => onSearch(query, signal) : undefined}\n    />\n  );\n}\n\nfunction clausesForOption(field: string, option: ColumnFilterOption): FilterClause[] {\n  return option.clauses.map((clause) => ({\n    field,\n    operator: clause.operator,\n    value: clause.value,\n  }));\n}\n\nfunction findActiveClauseOption(\n  clauses: FilterClause[],\n  options: ColumnFilterOption[],\n): ColumnFilterOption | undefined {\n  return options.find((option) => clausesMatch(clauses, clausesForOption(\"\", option)));\n}\n\nfunction clausesMatch(active: FilterClause[], expected: FilterClause[]): boolean {\n  if (active.length !== expected.length) {\n    return false;\n  }\n\n  return expected.every((clause) =>\n    active.some(\n      (current) => current.operator === clause.operator && current.value === clause.value,\n    ),\n  );\n}\n\nfunction FilterClauseList({\n  column,\n  clauses,\n  operators,\n  defaultOperator,\n  processing,\n  onAdd,\n  onUpdate,\n  onRemove,\n}: {\n  column: TableColumn;\n  clauses: ColumnClause[];\n  operators: Op[];\n  defaultOperator: Op;\n  processing: boolean;\n  onAdd: (clause: FilterClause) => void;\n  onUpdate: (index: number, clause: FilterClause) => void;\n  onRemove: (index: number) => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const type = column.props.filter?.type ?? \"text\";\n  const [draftOperator, setDraftOperator] = useState(defaultOperator);\n  const [adding, setAdding] = useState(clauses.length === 0);\n\n  return (\n    <div className=\"grid gap-3\">\n      {clauses.map((entry) => (\n        <FilterClauseRow\n          key={entry.index}\n          column={column}\n          type={type}\n          operators={operators}\n          clause={entry.clause}\n          processing={processing}\n          onOperator={(operator) => onUpdate(entry.index, { ...entry.clause, operator })}\n          onValue={(value) =>\n            value === \"\" ? onRemove(entry.index) : onUpdate(entry.index, { ...entry.clause, value })\n          }\n          onRemove={() => onRemove(entry.index)}\n        />\n      ))}\n\n      {adding && (\n        <FilterClauseRow\n          column={column}\n          type={type}\n          operators={operators}\n          clause={{ field: column.key, operator: draftOperator, value: \"\" }}\n          processing={processing}\n          onOperator={(operator) => {\n            if (VALUELESS_FILTER_OPERATORS.has(operator)) {\n              onAdd({ field: column.key, operator, value: \"\" });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n              return;\n            }\n            setDraftOperator(operator);\n          }}\n          onValue={(value) => {\n            if (value !== \"\") {\n              onAdd({ field: column.key, operator: draftOperator, value });\n              setDraftOperator(defaultOperator);\n              setAdding(false);\n            }\n          }}\n          onRemove={() => setAdding(false)}\n        />\n      )}\n\n      <div className=\"border-t border-lt-border pt-3\">\n        <Button\n          variant=\"secondary\"\n          icon=\"plus\"\n          data-test={`filter-${column.key}-add`}\n          className=\"w-full\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          {t(\"table.filter.add\", \"Add filter\")}\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterClauseRow({\n  column,\n  type,\n  operators,\n  clause,\n  processing,\n  onOperator,\n  onValue,\n  onRemove,\n}: {\n  column: TableColumn;\n  type: FilterType;\n  operators: Op[];\n  clause: FilterClause;\n  processing: boolean;\n  onOperator: (operator: Op) => void;\n  onValue: (value: string) => void;\n  onRemove: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n  const label = column.props.label ?? column.key;\n  const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n  return (\n    <div className=\"grid gap-2\">\n      <div className=\"flex items-center gap-2\">\n        {operators.length > 1 ? (\n          <NativeSelect\n            density=\"compact\"\n            aria-label={t(\"table.filter.operator\", \"{{label}} operator\", { label })}\n            data-test={`filter-${column.key}-operator`}\n            className=\"flex-1\"\n            disabled={processing}\n            value={clause.operator}\n            onChange={(event) => onOperator(event.target.value as Op)}\n          >\n            {operators.map((operator) => (\n              <option key={operator} value={operator}>\n                {operatorLabel(operator)}\n              </option>\n            ))}\n          </NativeSelect>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <Button\n          emphasis=\"outline\"\n          size=\"icon\"\n          icon=\"trash-2\"\n          aria-label={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n          data-test={`filter-${column.key}-remove`}\n          disabled={processing}\n          onClick={onRemove}\n        />\n      </div>\n      {!valueless && (\n        <FilterValueInput\n          type={type}\n          label={label}\n          ariaLabel={t(\"table.filter.value\", \"{{label}} filter value\", { label })}\n          value={clause.value}\n          processing={processing}\n          onCommit={onValue}\n          onClear={() => onValue(\"\")}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -37,7 +37,7 @@ function FilterBar({ clauses, columnsByKey, indicators, processing, onRemoveClau
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
 					"data-test": "table-filters-reset",
-					className: "text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50",
+					className: "text-lt-muted-fg underline-offset-2 hover:underline disabled:text-lt-disabled-fg",
 					disabled: processing,
 					onClick: onReset,
 					children: t("table.filter.reset-all", "Reset all")

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

@@ -1 +1 @@
-{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  FilterIndicator,\n  FilterNode,\n  TableColumn,\n} from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\n\nexport function FilterBar({\n  clauses,\n  columnsByKey,\n  indicators,\n  processing,\n  onRemoveClause,\n  onChange,\n  onReset,\n}: {\n  clauses: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  indicators: FilterIndicator[];\n  processing: boolean;\n  onRemoveClause: (index: number) => void;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (clauses.length === 0 && indicators.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-lt-border px-4 py-3\">\n      <div className=\"flex flex-wrap items-center gap-2 text-sm\">\n        {clauses.map((clause, index) => {\n          const label = columnsByKey.get(clause.field)?.props.label ?? clause.field;\n          const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n          return (\n            <FilterChip\n              key={`${clause.field}-${clause.operator}-${index}`}\n              label={`${label} ${operatorLabel(clause.operator)}`}\n              value={valueless ? \"\" : clause.value}\n              removeTestId={`filter-chip-${clause.field}-remove`}\n              removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n              processing={processing}\n              onRemove={() => onRemoveClause(index)}\n            />\n          );\n        })}\n        {indicators.map((indicator) => (\n          <FilterChip\n            key={`${indicator.filter}:${indicator.label}:${indicator.value}`}\n            label={indicator.label}\n            value={indicator.value}\n            removeTestId={`table-filter-chip-${indicator.filter}-remove`}\n            removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", {\n              label: indicator.label,\n            })}\n            processing={processing}\n            onRemove={() => onChange(indicator.filter, undefined)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-test=\"table-filters-reset\"\n          className=\"text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50\"\n          disabled={processing}\n          onClick={onReset}\n        >\n          {t(\"table.filter.reset-all\", \"Reset all\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterChip({\n  label,\n  value,\n  removeTestId,\n  removeLabel,\n  processing,\n  onRemove,\n}: {\n  label: string;\n  value: string;\n  removeTestId: string;\n  removeLabel: string;\n  processing: boolean;\n  onRemove: () => void;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\">\n      <span>\n        {value === \"\" ? (\n          <span className=\"font-semibold\">{label}</span>\n        ) : (\n          <>\n            {`${label}: `}\n            <span className=\"font-semibold\">{value}</span>\n          </>\n        )}\n      </span>\n      <IconButton\n        size=\"xs\"\n        icon=\"x\"\n        label={removeLabel}\n        data-test={removeTestId}\n        disabled={processing}\n        onClick={onRemove}\n      />\n    </span>\n  );\n}\n\nexport function FilterMenu({\n  filters,\n  values,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filters: FilterNode[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onSearch?: (searchKey: string, query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n  const filtersLabel = t(\"table.filter.filters\", \"Filters\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"filter\"\n          label={filtersLabel}\n          data-test=\"table-filters-menu\"\n          disabled={processing}\n        >\n          {active.length > 0 && (\n            <span className=\"absolute -right-1 -top-1 inline-flex size-3.5 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium leading-none text-lt-primary-fg\">\n              {active.length}\n            </span>\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-80 p-4\">\n        <div className=\"grid gap-3\">\n          {filters.map((filter) => (\n            <div key={filter.key} className=\"grid gap-1\">\n              <TableFilterControl\n                filter={filter}\n                value={values[filter.key]}\n                processing={processing}\n                onChange={(value) => onChange(filter.key, value)}\n                onSearch={\n                  onSearch\n                    ? (field, query, signal) =>\n                        onSearch(`filter:${filter.key}.${field}`, query, signal)\n                    : undefined\n                }\n              />\n            </div>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../../resources/js/table/components/filter-bar.tsx"],"sourcesContent":["import { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isActiveFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport { operatorLabel, VALUELESS_FILTER_OPERATORS } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  FilterIndicator,\n  FilterNode,\n  TableColumn,\n} from \"@lattice-php/lattice/table/types\";\nimport { TableFilterControl } from \"./filter-controls\";\n\nexport function FilterBar({\n  clauses,\n  columnsByKey,\n  indicators,\n  processing,\n  onRemoveClause,\n  onChange,\n  onReset,\n}: {\n  clauses: FilterClause[];\n  columnsByKey: Map<string, TableColumn>;\n  indicators: FilterIndicator[];\n  processing: boolean;\n  onRemoveClause: (index: number) => void;\n  onChange: (key: string, value: unknown) => void;\n  onReset: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  if (clauses.length === 0 && indicators.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"border-b border-lt-border px-4 py-3\">\n      <div className=\"flex flex-wrap items-center gap-2 text-sm\">\n        {clauses.map((clause, index) => {\n          const label = columnsByKey.get(clause.field)?.props.label ?? clause.field;\n          const valueless = VALUELESS_FILTER_OPERATORS.has(clause.operator);\n\n          return (\n            <FilterChip\n              key={`${clause.field}-${clause.operator}-${index}`}\n              label={`${label} ${operatorLabel(clause.operator)}`}\n              value={valueless ? \"\" : clause.value}\n              removeTestId={`filter-chip-${clause.field}-remove`}\n              removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n              processing={processing}\n              onRemove={() => onRemoveClause(index)}\n            />\n          );\n        })}\n        {indicators.map((indicator) => (\n          <FilterChip\n            key={`${indicator.filter}:${indicator.label}:${indicator.value}`}\n            label={indicator.label}\n            value={indicator.value}\n            removeTestId={`table-filter-chip-${indicator.filter}-remove`}\n            removeLabel={t(\"table.filter.remove\", \"Remove {{label}} filter\", {\n              label: indicator.label,\n            })}\n            processing={processing}\n            onRemove={() => onChange(indicator.filter, undefined)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-test=\"table-filters-reset\"\n          className=\"text-lt-muted-fg underline-offset-2 hover:underline disabled:text-lt-disabled-fg\"\n          disabled={processing}\n          onClick={onReset}\n        >\n          {t(\"table.filter.reset-all\", \"Reset all\")}\n        </button>\n      </div>\n    </div>\n  );\n}\n\nfunction FilterChip({\n  label,\n  value,\n  removeTestId,\n  removeLabel,\n  processing,\n  onRemove,\n}: {\n  label: string;\n  value: string;\n  removeTestId: string;\n  removeLabel: string;\n  processing: boolean;\n  onRemove: () => void;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5 rounded-lt-sm bg-lt-muted px-2 py-1\">\n      <span>\n        {value === \"\" ? (\n          <span className=\"font-semibold\">{label}</span>\n        ) : (\n          <>\n            {`${label}: `}\n            <span className=\"font-semibold\">{value}</span>\n          </>\n        )}\n      </span>\n      <IconButton\n        size=\"xs\"\n        icon=\"x\"\n        label={removeLabel}\n        data-test={removeTestId}\n        disabled={processing}\n        onClick={onRemove}\n      />\n    </span>\n  );\n}\n\nexport function FilterMenu({\n  filters,\n  values,\n  processing,\n  onChange,\n  onSearch,\n}: {\n  filters: FilterNode[];\n  values: Record<string, unknown>;\n  processing: boolean;\n  onChange: (key: string, value: unknown) => void;\n  onSearch?: (searchKey: string, query: string, signal?: AbortSignal) => Promise<Option[]>;\n}) {\n  const { t } = useT(\"lattice\");\n  const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));\n  const filtersLabel = t(\"table.filter.filters\", \"Filters\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"filter\"\n          label={filtersLabel}\n          data-test=\"table-filters-menu\"\n          disabled={processing}\n        >\n          {active.length > 0 && (\n            <span className=\"absolute -right-1 -top-1 inline-flex size-3.5 items-center justify-center rounded-full bg-lt-primary text-[10px] font-medium leading-none text-lt-primary-fg\">\n              {active.length}\n            </span>\n          )}\n        </IconButton>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-80 p-4\">\n        <div className=\"grid gap-3\">\n          {filters.map((filter) => (\n            <div key={filter.key} className=\"grid gap-1\">\n              <TableFilterControl\n                filter={filter}\n                value={values[filter.key]}\n                processing={processing}\n                onChange={(value) => onChange(filter.key, value)}\n                onSearch={\n                  onSearch\n                    ? (field, query, signal) =>\n                        onSearch(`filter:${filter.key}.${field}`, query, signal)\n                    : undefined\n                }\n              />\n            </div>\n          ))}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/dist/table/components/pagination.js

@@ -15,7 +15,7 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 			ref: infiniteLoaderRef,
 			className: "flex items-center gap-2",
 			children: pagination.hasMore ? /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
+				emphasis: "outline",
 				"data-test": "pagination-load-more",
 				disabled: processing,
 				onClick: onLoadMore,
@@ -27,13 +27,13 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 		}) : mode === "simple" ? /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
 			children: [/* @__PURE__ */ jsx(Button, {
-				variant: "outline",
+				emphasis: "outline",
 				"data-test": "pagination-previous",
 				disabled: processing || currentPage <= 1,
 				onClick: () => onPage(currentPage - 1),
 				children: t("table.pagination.previous", "Previous")
 			}), /* @__PURE__ */ jsx(Button, {
-				variant: "outline",
+				emphasis: "outline",
 				"data-test": "pagination-next",
 				disabled: processing || !hasNextPage,
 				onClick: () => onPage(currentPage + 1),
@@ -43,14 +43,14 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 			className: "flex items-center gap-2",
 			children: [
 				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
+					emphasis: "outline",
 					"data-test": "pagination-previous",
 					disabled: processing || currentPage <= 1,
 					onClick: () => onPage(currentPage - 1),
 					children: t("table.pagination.previous", "Previous")
 				}),
 				visiblePages.map((pageNumber) => /* @__PURE__ */ jsx(Button, {
-					variant: "outline",
+					emphasis: "outline",
 					size: "icon",
 					"data-test": `pagination-page-${pageNumber}`,
 					disabled: processing || pageNumber === currentPage,
@@ -60,7 +60,7 @@ function TablePagination({ pagination, currentPage, processing, mode, hasNextPag
 					children: pageNumber
 				}, pageNumber)),
 				/* @__PURE__ */ jsx(Button, {
-					variant: "outline",
+					emphasis: "outline",
 					"data-test": "pagination-next",
 					disabled: processing || !hasNextPage,
 					onClick: () => onPage(currentPage + 1),

package/dist/table/components/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../../resources/js/table/components/pagination.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/lattice/types/generated\";\nimport type { TablePagination as TablePaginationData } from \"@lattice-php/lattice/table/types\";\n\nexport function TablePagination({\n  pagination,\n  currentPage,\n  processing,\n  mode,\n  hasNextPage,\n  visiblePages,\n  infiniteLoaderRef,\n  onPage,\n  onLoadMore,\n}: {\n  pagination: TablePaginationData;\n  currentPage: number;\n  processing: boolean;\n  mode: PaginationType;\n  hasNextPage: boolean;\n  visiblePages: number[];\n  infiniteLoaderRef: RefObject<HTMLDivElement | null>;\n  onPage: (page: number) => void;\n  onLoadMore: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      data-slot=\"table-pagination\"\n      className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\"\n    >\n      <span>\n        {pagination.total == null\n          ? t(\"table.pagination.page\", \"Page {{page}}\", { page: currentPage })\n          : t(\"table.pagination.showing\", \"Showing {{from}}-{{to}} of {{total}}\", {\n              from: pagination.from ?? 0,\n              to: pagination.to ?? 0,\n              total: pagination.total,\n            })}\n      </span>\n      {mode === \"infinite\" ? (\n        <div ref={infiniteLoaderRef} className=\"flex items-center gap-2\">\n          {pagination.hasMore ? (\n            <Button\n              variant=\"outline\"\n              data-test=\"pagination-load-more\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing\n                ? t(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.load-more\", \"Load more\")}\n            </Button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.all-loaded\", \"All rows loaded\")}\n            </span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          {visiblePages.map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              variant=\"outline\"\n              size=\"icon\"\n              data-test={`pagination-page-${pageNumber}`}\n              disabled={processing || pageNumber === currentPage}\n              aria-current={pageNumber === currentPage ? \"page\" : undefined}\n              aria-label={t(\"table.pagination.page\", \"Page {{page}}\", { page: pageNumber })}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </Button>\n          ))}\n          <Button\n            variant=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,QACA,cAWC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAFZ,CAIE,oBAAC,QAAD,EAAA,UACG,WAAW,SAAS,OACjB,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IACjE,EAAE,4BAA4B,wCAAwC;GACpE,MAAM,WAAW,QAAQ;GACzB,IAAI,WAAW,MAAM;GACrB,OAAO,WAAW;EACpB,CAAC,EACD,CAAA,GACL,SAAS,aACR,oBAAC,OAAD;GAAK,KAAK;GAAmB,WAAU;aACpC,WAAW,UACV,oBAAC,QAAD;IACE,SAAQ;IACR,aAAU;IACV,UAAU;IACV,SAAS;cAER,aACG,EAAE,4BAA4B,YAAY,IAC1C,EAAE,8BAA8B,WAAW;GACzC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,+BAA+B,iBAAiB;GAC/C,CAAA;EAEL,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IACE,SAAQ;IACR,aAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,QAAD;IACE,SAAQ;IACR,aAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,yBAAyB,MAAM;GAC5B,CAAA,CACL;OACH,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KACE,SAAQ;KACR,aAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,QAAD;KAEE,SAAQ;KACR,MAAK;KACL,aAAW,mBAAmB;KAC9B,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KAC5E,eAAe,OAAO,UAAU;eAE/B;IACK,GAVD,UAUC,CACT;IACD,oBAAC,QAAD;KACE,SAAQ;KACR,aAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,yBAAyB,MAAM;IAC5B,CAAA;GACL;OACH,IACD;;AAET"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../resources/js/table/components/pagination.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport type { PaginationType } from \"@lattice-php/lattice/types/generated\";\nimport type { TablePagination as TablePaginationData } from \"@lattice-php/lattice/table/types\";\n\nexport function TablePagination({\n  pagination,\n  currentPage,\n  processing,\n  mode,\n  hasNextPage,\n  visiblePages,\n  infiniteLoaderRef,\n  onPage,\n  onLoadMore,\n}: {\n  pagination: TablePaginationData;\n  currentPage: number;\n  processing: boolean;\n  mode: PaginationType;\n  hasNextPage: boolean;\n  visiblePages: number[];\n  infiniteLoaderRef: RefObject<HTMLDivElement | null>;\n  onPage: (page: number) => void;\n  onLoadMore: () => void;\n}) {\n  const { t } = useT(\"lattice\");\n\n  return (\n    <div\n      data-slot=\"table-pagination\"\n      className=\"flex items-center justify-between gap-3 border-t border-lt-border p-4 text-sm\"\n    >\n      <span>\n        {pagination.total == null\n          ? t(\"table.pagination.page\", \"Page {{page}}\", { page: currentPage })\n          : t(\"table.pagination.showing\", \"Showing {{from}}-{{to}} of {{total}}\", {\n              from: pagination.from ?? 0,\n              to: pagination.to ?? 0,\n              total: pagination.total,\n            })}\n      </span>\n      {mode === \"infinite\" ? (\n        <div ref={infiniteLoaderRef} className=\"flex items-center gap-2\">\n          {pagination.hasMore ? (\n            <Button\n              emphasis=\"outline\"\n              data-test=\"pagination-load-more\"\n              disabled={processing}\n              onClick={onLoadMore}\n            >\n              {processing\n                ? t(\"table.pagination.loading\", \"Loading...\")\n                : t(\"table.pagination.load-more\", \"Load more\")}\n            </Button>\n          ) : (\n            <span className=\"text-lt-muted-fg\">\n              {t(\"table.pagination.all-loaded\", \"All rows loaded\")}\n            </span>\n          )}\n        </div>\n      ) : mode === \"simple\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : mode === \"table\" ? (\n        <div className=\"flex items-center gap-2\">\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-previous\"\n            disabled={processing || currentPage <= 1}\n            onClick={() => onPage(currentPage - 1)}\n          >\n            {t(\"table.pagination.previous\", \"Previous\")}\n          </Button>\n          {visiblePages.map((pageNumber) => (\n            <Button\n              key={pageNumber}\n              emphasis=\"outline\"\n              size=\"icon\"\n              data-test={`pagination-page-${pageNumber}`}\n              disabled={processing || pageNumber === currentPage}\n              aria-current={pageNumber === currentPage ? \"page\" : undefined}\n              aria-label={t(\"table.pagination.page\", \"Page {{page}}\", { page: pageNumber })}\n              onClick={() => onPage(pageNumber)}\n            >\n              {pageNumber}\n            </Button>\n          ))}\n          <Button\n            emphasis=\"outline\"\n            data-test=\"pagination-next\"\n            disabled={processing || !hasNextPage}\n            onClick={() => onPage(currentPage + 1)}\n          >\n            {t(\"table.pagination.next\", \"Next\")}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;AAMA,SAAgB,gBAAgB,EAC9B,YACA,aACA,YACA,MACA,aACA,cACA,mBACA,QACA,cAWC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAFZ,CAIE,oBAAC,QAAD,EAAA,UACG,WAAW,SAAS,OACjB,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,YAAY,CAAC,IACjE,EAAE,4BAA4B,wCAAwC;GACpE,MAAM,WAAW,QAAQ;GACzB,IAAI,WAAW,MAAM;GACrB,OAAO,WAAW;EACpB,CAAC,EACD,CAAA,GACL,SAAS,aACR,oBAAC,OAAD;GAAK,KAAK;GAAmB,WAAU;aACpC,WAAW,UACV,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU;IACV,SAAS;cAER,aACG,EAAE,4BAA4B,YAAY,IAC1C,EAAE,8BAA8B,WAAW;GACzC,CAAA,IAER,oBAAC,QAAD;IAAM,WAAU;cACb,EAAE,+BAA+B,iBAAiB;GAC/C,CAAA;EAEL,CAAA,IACH,SAAS,WACX,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU,cAAc,eAAe;IACvC,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,6BAA6B,UAAU;GACpC,CAAA,GACR,oBAAC,QAAD;IACE,UAAS;IACT,aAAU;IACV,UAAU,cAAc,CAAC;IACzB,eAAe,OAAO,cAAc,CAAC;cAEpC,EAAE,yBAAyB,MAAM;GAC5B,CAAA,CACL;OACH,SAAS,UACX,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,QAAD;KACE,UAAS;KACT,aAAU;KACV,UAAU,cAAc,eAAe;KACvC,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,6BAA6B,UAAU;IACpC,CAAA;IACP,aAAa,KAAK,eACjB,oBAAC,QAAD;KAEE,UAAS;KACT,MAAK;KACL,aAAW,mBAAmB;KAC9B,UAAU,cAAc,eAAe;KACvC,gBAAc,eAAe,cAAc,SAAS,KAAA;KACpD,cAAY,EAAE,yBAAyB,iBAAiB,EAAE,MAAM,WAAW,CAAC;KAC5E,eAAe,OAAO,UAAU;eAE/B;IACK,GAVD,UAUC,CACT;IACD,oBAAC,QAAD;KACE,UAAS;KACT,aAAU;KACV,UAAU,cAAc,CAAC;KACzB,eAAe,OAAO,cAAc,CAAC;eAEpC,EAAE,yBAAyB,MAAM;IAC5B,CAAA;GACL;OACH,IACD;;AAET"}

package/dist/table/hooks/use-table.js

@@ -1,6 +1,6 @@
 import { LATTICE_EVENT } from "../../core/event-names.js";
-import { useWindowEvent } from "../../core/hooks/use-window-event.js";
 import { apiFetch, apiJson } from "../../core/api.js";
+import { useWindowEvent } from "../../core/hooks/use-window-event.js";
 import { getColumns, getPagination, getQuery, getRows } from "../lib/payload.js";
 import { isEmptyFilterValue, isFilterValue } from "../lib/filter-values.js";
 import { buildEndpoint, nextSort } from "../lib/query.js";
@@ -109,7 +109,8 @@ function useTable(node) {
 	const searchFilterOptions = useCallback(async (searchKey, search, signal) => {
 		if (!endpoint) return [];
 		const url = new URL(endpoint, window.location.origin);
-		url.searchParams.set("_search", searchKey);
+		url.searchParams.set("_sub", "search");
+		url.searchParams.set("_target", searchKey);
 		url.searchParams.set("_q", search);
 		const response = await apiFetch(`${url.pathname}${url.search}`, {
 			ref: componentRef,

package/dist/table/hooks/use-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-table.js","names":[],"sources":["../../../resources/js/table/hooks/use-table.ts"],"sourcesContent":["import { apiFetch, apiJson } from \"@lattice-php/lattice/core/api\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/core/event-names\";\nimport { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isEmptyFilterValue, isFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport {\n  getColumns,\n  getPagination,\n  getRows,\n  getQuery,\n} from \"@lattice-php/lattice/table/lib/payload\";\nimport { buildEndpoint, nextSort } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  TableColumn,\n  TableNode,\n  TableResult,\n  TableSort,\n  TableQuery,\n} from \"@lattice-php/lattice/table/types\";\n\nexport function useTable(node: TableNode) {\n  const columns = useMemo(() => getColumns(node.props?.columns), [node.props?.columns]);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialQuery = useMemo(() => getQuery(node.props?.query), [node.props?.query]);\n  const initialRows = useMemo(() => getRows(node.props?.data), [node.props?.data]);\n  const initialPagination = useMemo(\n    () => getPagination(node.props?.pagination),\n    [node.props?.pagination],\n  );\n  const [rows, setRows] = useState(initialRows);\n  const [pagination, setPagination] = useState(initialPagination);\n  const [query, setQuery] = useState(initialQuery);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? query.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextQuery: TableQuery, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const result = await apiJson<TableResult>(buildEndpoint(endpoint, nextQuery), {\n          ref: componentRef,\n        });\n        const resultQuery = getQuery(result.query);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setQuery(resultQuery);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...query,\n      page: 1,\n      sorts: nextSort(query.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...query,\n      page: 1,\n      sorts: query.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function applyFilters(next: FilterClause[]): void {\n    const nextQuery = { ...query, filters: next, page: 1 };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  function addFilter(clause: FilterClause): void {\n    applyFilters([...query.filters, clause]);\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    applyFilters(query.filters.map((current, position) => (position === index ? clause : current)));\n  }\n\n  function removeFilter(index: number): void {\n    applyFilters(query.filters.filter((_, current) => current !== index));\n  }\n\n  function replaceColumnFilters(field: string, clauses: FilterClause[]): void {\n    applyFilters([...query.filters.filter((clause) => clause.field !== field), ...clauses]);\n  }\n\n  function setTableFilter(key: string, value: unknown): void {\n    const next = { ...query.tableFilters };\n\n    if (isEmptyFilterValue(value) || !isFilterValue(value)) {\n      delete next[key];\n    } else {\n      next[key] = value;\n    }\n\n    const nextQuery = {\n      ...query,\n      tableFilters: next,\n      tableFilterIndicators: query.tableFilterIndicators.filter(\n        (indicator) => indicator.filter !== key,\n      ),\n      page: 1,\n    };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  function resetFilters(): void {\n    const nextQuery = {\n      ...query,\n      filters: [],\n      tableFilters: {},\n      tableFilterIndicators: [],\n      search: \"\",\n      page: 1,\n    };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  function setSearch(search: string): void {\n    const nextQuery = { ...query, search, page: 1 };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  const searchFilterOptions = useCallback(\n    async (searchKey: string, search: string, signal?: AbortSignal): Promise<Option[]> => {\n      if (!endpoint) {\n        return [];\n      }\n\n      const url = new URL(endpoint, window.location.origin);\n      url.searchParams.set(\"_search\", searchKey);\n      url.searchParams.set(\"_q\", search);\n\n      const response = await apiFetch(`${url.pathname}${url.search}`, {\n        ref: componentRef,\n        signal,\n        throwOnError: false,\n      });\n\n      if (!response.ok) {\n        return [];\n      }\n\n      const result = (await response.json()) as { options?: Option[] };\n\n      return result.options ?? [];\n    },\n    [endpoint, componentRef],\n  );\n\n  function goToPage(page: number): void {\n    void load({\n      ...query,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...query,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, query]);\n\n  useEffect(() => {\n    setRows(initialRows);\n    setPagination(initialPagination);\n    setQuery(initialQuery);\n    setProcessing(isLazy);\n    setHasLoaded(!isLazy);\n  }, [initialRows, initialPagination, initialQuery, isLazy]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(query);\n  }, [hasLoaded, isLazy, load, query]);\n\n  useWindowEvent(LATTICE_EVENT.reloadComponent, (event) => {\n    const detail = (event as ReloadComponentEvent).detail;\n\n    if (detail?.component === node.id) {\n      void load(query);\n    }\n  });\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\n    columns,\n    rows,\n    pagination,\n    query,\n    filters: query.filters,\n    tableFilters: query.tableFilters,\n    search: query.search,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    replaceColumnFilters,\n    setTableFilter,\n    resetFilters,\n    setSearch,\n    searchFilterOptions,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-table.js","names":[],"sources":["../../../resources/js/table/hooks/use-table.ts"],"sourcesContent":["import { apiFetch, apiJson } from \"@lattice-php/lattice/core/api\";\nimport { LATTICE_EVENT, type ReloadComponentEvent } from \"@lattice-php/lattice/core/event-names\";\nimport { useWindowEvent } from \"@lattice-php/lattice/core/hooks/use-window-event\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { Option } from \"@lattice-php/lattice/types/generated\";\nimport { isEmptyFilterValue, isFilterValue } from \"@lattice-php/lattice/table/lib/filter-values\";\nimport {\n  getColumns,\n  getPagination,\n  getRows,\n  getQuery,\n} from \"@lattice-php/lattice/table/lib/payload\";\nimport { buildEndpoint, nextSort } from \"@lattice-php/lattice/table/lib/query\";\nimport type {\n  FilterClause,\n  TableColumn,\n  TableNode,\n  TableResult,\n  TableSort,\n  TableQuery,\n} from \"@lattice-php/lattice/table/types\";\n\nexport function useTable(node: TableNode) {\n  const columns = useMemo(() => getColumns(node.props?.columns), [node.props?.columns]);\n  const endpoint = typeof node.props?.endpoint === \"string\" ? node.props.endpoint : null;\n  const componentRef = typeof node.props?.ref === \"string\" ? node.props.ref : \"\";\n  const isLazy = node.props?.lazy === true;\n  const initialQuery = useMemo(() => getQuery(node.props?.query), [node.props?.query]);\n  const initialRows = useMemo(() => getRows(node.props?.data), [node.props?.data]);\n  const initialPagination = useMemo(\n    () => getPagination(node.props?.pagination),\n    [node.props?.pagination],\n  );\n  const [rows, setRows] = useState(initialRows);\n  const [pagination, setPagination] = useState(initialPagination);\n  const [query, setQuery] = useState(initialQuery);\n  const [processing, setProcessing] = useState(isLazy);\n  const [hasLoaded, setHasLoaded] = useState(!isLazy);\n  const infiniteLoaderRef = useRef<HTMLDivElement | null>(null);\n  const currentPage = pagination.currentPage ?? query.page;\n  const isInfinite = (pagination.mode ?? \"table\") === \"infinite\";\n\n  const load = useCallback(\n    async (nextQuery: TableQuery, append = false): Promise<void> => {\n      if (!endpoint) {\n        return;\n      }\n\n      setProcessing(true);\n\n      try {\n        const result = await apiJson<TableResult>(buildEndpoint(endpoint, nextQuery), {\n          ref: componentRef,\n        });\n        const resultQuery = getQuery(result.query);\n        const resultRows = getRows(result.data);\n\n        setRows((currentRows) => (append ? [...currentRows, ...resultRows] : resultRows));\n        setPagination(getPagination(result.pagination));\n        setQuery(resultQuery);\n        setHasLoaded(true);\n      } finally {\n        setProcessing(false);\n      }\n    },\n    [endpoint, componentRef],\n  );\n\n  function sort(column: TableColumn): void {\n    void load({\n      ...query,\n      page: 1,\n      sorts: nextSort(query.sorts, column),\n    });\n  }\n\n  function clearSort(sort: TableSort): void {\n    void load({\n      ...query,\n      page: 1,\n      sorts: query.sorts.filter((currentSort) => currentSort.key !== sort.key),\n    });\n  }\n\n  function applyFilters(next: FilterClause[]): void {\n    const nextQuery = { ...query, filters: next, page: 1 };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  function addFilter(clause: FilterClause): void {\n    applyFilters([...query.filters, clause]);\n  }\n\n  function updateFilter(index: number, clause: FilterClause): void {\n    applyFilters(query.filters.map((current, position) => (position === index ? clause : current)));\n  }\n\n  function removeFilter(index: number): void {\n    applyFilters(query.filters.filter((_, current) => current !== index));\n  }\n\n  function replaceColumnFilters(field: string, clauses: FilterClause[]): void {\n    applyFilters([...query.filters.filter((clause) => clause.field !== field), ...clauses]);\n  }\n\n  function setTableFilter(key: string, value: unknown): void {\n    const next = { ...query.tableFilters };\n\n    if (isEmptyFilterValue(value) || !isFilterValue(value)) {\n      delete next[key];\n    } else {\n      next[key] = value;\n    }\n\n    const nextQuery = {\n      ...query,\n      tableFilters: next,\n      tableFilterIndicators: query.tableFilterIndicators.filter(\n        (indicator) => indicator.filter !== key,\n      ),\n      page: 1,\n    };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  function resetFilters(): void {\n    const nextQuery = {\n      ...query,\n      filters: [],\n      tableFilters: {},\n      tableFilterIndicators: [],\n      search: \"\",\n      page: 1,\n    };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  function setSearch(search: string): void {\n    const nextQuery = { ...query, search, page: 1 };\n\n    setQuery(nextQuery);\n    void load(nextQuery);\n  }\n\n  const searchFilterOptions = useCallback(\n    async (searchKey: string, search: string, signal?: AbortSignal): Promise<Option[]> => {\n      if (!endpoint) {\n        return [];\n      }\n\n      const url = new URL(endpoint, window.location.origin);\n      url.searchParams.set(\"_sub\", \"search\");\n      url.searchParams.set(\"_target\", searchKey);\n      url.searchParams.set(\"_q\", search);\n\n      const response = await apiFetch(`${url.pathname}${url.search}`, {\n        ref: componentRef,\n        signal,\n        throwOnError: false,\n      });\n\n      if (!response.ok) {\n        return [];\n      }\n\n      const result = (await response.json()) as { options?: Option[] };\n\n      return result.options ?? [];\n    },\n    [endpoint, componentRef],\n  );\n\n  function goToPage(page: number): void {\n    void load({\n      ...query,\n      page,\n    });\n  }\n\n  const loadMore = useCallback((): void => {\n    if (processing || !pagination.hasMore) {\n      return;\n    }\n\n    void load(\n      {\n        ...query,\n        page: pagination.nextPage ?? currentPage + 1,\n      },\n      true,\n    );\n  }, [currentPage, load, pagination.hasMore, pagination.nextPage, processing, query]);\n\n  useEffect(() => {\n    setRows(initialRows);\n    setPagination(initialPagination);\n    setQuery(initialQuery);\n    setProcessing(isLazy);\n    setHasLoaded(!isLazy);\n  }, [initialRows, initialPagination, initialQuery, isLazy]);\n\n  useEffect(() => {\n    if (!isLazy || hasLoaded) {\n      return;\n    }\n\n    void load(query);\n  }, [hasLoaded, isLazy, load, query]);\n\n  useWindowEvent(LATTICE_EVENT.reloadComponent, (event) => {\n    const detail = (event as ReloadComponentEvent).detail;\n\n    if (detail?.component === node.id) {\n      void load(query);\n    }\n  });\n\n  useEffect(() => {\n    if (\n      !isInfinite ||\n      !pagination.hasMore ||\n      processing ||\n      !infiniteLoaderRef.current ||\n      typeof IntersectionObserver === \"undefined\"\n    ) {\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          loadMore();\n        }\n      },\n      {\n        rootMargin: \"240px\",\n      },\n    );\n\n    observer.observe(infiniteLoaderRef.current);\n\n    return () => observer.disconnect();\n  }, [isInfinite, loadMore, pagination.hasMore, processing]);\n\n  return {\n    columns,\n    rows,\n    pagination,\n    query,\n    filters: query.filters,\n    tableFilters: query.tableFilters,\n    search: query.search,\n    addFilter,\n    updateFilter,\n    removeFilter,\n    replaceColumnFilters,\n    setTableFilter,\n    resetFilters,\n    setSearch,\n    searchFilterOptions,\n    processing,\n    hasLoaded,\n    infiniteLoaderRef,\n    sort,\n    clearSort,\n    goToPage,\n    loadMore,\n  };\n}\n"],"mappings":";;;;;;;;AAsBA,SAAgB,SAAS,MAAiB;CACxC,MAAM,UAAU,cAAc,WAAW,KAAK,OAAO,OAAO,GAAG,CAAC,KAAK,OAAO,OAAO,CAAC;CACpF,MAAM,WAAW,OAAO,KAAK,OAAO,aAAa,WAAW,KAAK,MAAM,WAAW;CAClF,MAAM,eAAe,OAAO,KAAK,OAAO,QAAQ,WAAW,KAAK,MAAM,MAAM;CAC5E,MAAM,SAAS,KAAK,OAAO,SAAS;CACpC,MAAM,eAAe,cAAc,SAAS,KAAK,OAAO,KAAK,GAAG,CAAC,KAAK,OAAO,KAAK,CAAC;CACnF,MAAM,cAAc,cAAc,QAAQ,KAAK,OAAO,IAAI,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;CAC/E,MAAM,oBAAoB,cAClB,cAAc,KAAK,OAAO,UAAU,GAC1C,CAAC,KAAK,OAAO,UAAU,CACzB;CACA,MAAM,CAAC,MAAM,WAAW,SAAS,WAAW;CAC5C,MAAM,CAAC,YAAY,iBAAiB,SAAS,iBAAiB;CAC9D,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,MAAM;CAClD,MAAM,oBAAoB,OAA8B,IAAI;CAC5D,MAAM,cAAc,WAAW,eAAe,MAAM;CACpD,MAAM,cAAc,WAAW,QAAQ,aAAa;CAEpD,MAAM,OAAO,YACX,OAAO,WAAuB,SAAS,UAAyB;EAC9D,IAAI,CAAC,UACH;EAGF,cAAc,IAAI;EAElB,IAAI;GACF,MAAM,SAAS,MAAM,QAAqB,cAAc,UAAU,SAAS,GAAG,EAC5E,KAAK,aACP,CAAC;GACD,MAAM,cAAc,SAAS,OAAO,KAAK;GACzC,MAAM,aAAa,QAAQ,OAAO,IAAI;GAEtC,SAAS,gBAAiB,SAAS,CAAC,GAAG,aAAa,GAAG,UAAU,IAAI,UAAW;GAChF,cAAc,cAAc,OAAO,UAAU,CAAC;GAC9C,SAAS,WAAW;GACpB,aAAa,IAAI;EACnB,UAAU;GACR,cAAc,KAAK;EACrB;CACF,GACA,CAAC,UAAU,YAAY,CACzB;CAEA,SAAS,KAAK,QAA2B;EACvC,KAAU;GACR,GAAG;GACH,MAAM;GACN,OAAO,SAAS,MAAM,OAAO,MAAM;EACrC,CAAC;CACH;CAEA,SAAS,UAAU,MAAuB;EACxC,KAAU;GACR,GAAG;GACH,MAAM;GACN,OAAO,MAAM,MAAM,QAAQ,gBAAgB,YAAY,QAAQ,KAAK,GAAG;EACzE,CAAC;CACH;CAEA,SAAS,aAAa,MAA4B;EAChD,MAAM,YAAY;GAAE,GAAG;GAAO,SAAS;GAAM,MAAM;EAAE;EAErD,SAAS,SAAS;EAClB,KAAU,SAAS;CACrB;CAEA,SAAS,UAAU,QAA4B;EAC7C,aAAa,CAAC,GAAG,MAAM,SAAS,MAAM,CAAC;CACzC;CAEA,SAAS,aAAa,OAAe,QAA4B;EAC/D,aAAa,MAAM,QAAQ,KAAK,SAAS,aAAc,aAAa,QAAQ,SAAS,OAAQ,CAAC;CAChG;CAEA,SAAS,aAAa,OAAqB;EACzC,aAAa,MAAM,QAAQ,QAAQ,GAAG,YAAY,YAAY,KAAK,CAAC;CACtE;CAEA,SAAS,qBAAqB,OAAe,SAA+B;EAC1E,aAAa,CAAC,GAAG,MAAM,QAAQ,QAAQ,WAAW,OAAO,UAAU,KAAK,GAAG,GAAG,OAAO,CAAC;CACxF;CAEA,SAAS,eAAe,KAAa,OAAsB;EACzD,MAAM,OAAO,EAAE,GAAG,MAAM,aAAa;EAErC,IAAI,mBAAmB,KAAK,KAAK,CAAC,cAAc,KAAK,GACnD,OAAO,KAAK;OAEZ,KAAK,OAAO;EAGd,MAAM,YAAY;GAChB,GAAG;GACH,cAAc;GACd,uBAAuB,MAAM,sBAAsB,QAChD,cAAc,UAAU,WAAW,GACtC;GACA,MAAM;EACR;EAEA,SAAS,SAAS;EAClB,KAAU,SAAS;CACrB;CAEA,SAAS,eAAqB;EAC5B,MAAM,YAAY;GAChB,GAAG;GACH,SAAS,CAAC;GACV,cAAc,CAAC;GACf,uBAAuB,CAAC;GACxB,QAAQ;GACR,MAAM;EACR;EAEA,SAAS,SAAS;EAClB,KAAU,SAAS;CACrB;CAEA,SAAS,UAAU,QAAsB;EACvC,MAAM,YAAY;GAAE,GAAG;GAAO;GAAQ,MAAM;EAAE;EAE9C,SAAS,SAAS;EAClB,KAAU,SAAS;CACrB;CAEA,MAAM,sBAAsB,YAC1B,OAAO,WAAmB,QAAgB,WAA4C;EACpF,IAAI,CAAC,UACH,OAAO,CAAC;EAGV,MAAM,MAAM,IAAI,IAAI,UAAU,OAAO,SAAS,MAAM;EACpD,IAAI,aAAa,IAAI,QAAQ,QAAQ;EACrC,IAAI,aAAa,IAAI,WAAW,SAAS;EACzC,IAAI,aAAa,IAAI,MAAM,MAAM;EAEjC,MAAM,WAAW,MAAM,SAAS,GAAG,IAAI,WAAW,IAAI,UAAU;GAC9D,KAAK;GACL;GACA,cAAc;EAChB,CAAC;EAED,IAAI,CAAC,SAAS,IACZ,OAAO,CAAC;EAKV,QAAO,MAFe,SAAS,KAAK,GAEtB,WAAW,CAAC;CAC5B,GACA,CAAC,UAAU,YAAY,CACzB;CAEA,SAAS,SAAS,MAAoB;EACpC,KAAU;GACR,GAAG;GACH;EACF,CAAC;CACH;CAEA,MAAM,WAAW,kBAAwB;EACvC,IAAI,cAAc,CAAC,WAAW,SAC5B;EAGF,KACE;GACE,GAAG;GACH,MAAM,WAAW,YAAY,cAAc;EAC7C,GACA,IACF;CACF,GAAG;EAAC;EAAa;EAAM,WAAW;EAAS,WAAW;EAAU;EAAY;CAAK,CAAC;CAElF,gBAAgB;EACd,QAAQ,WAAW;EACnB,cAAc,iBAAiB;EAC/B,SAAS,YAAY;EACrB,cAAc,MAAM;EACpB,aAAa,CAAC,MAAM;CACtB,GAAG;EAAC;EAAa;EAAmB;EAAc;CAAM,CAAC;CAEzD,gBAAgB;EACd,IAAI,CAAC,UAAU,WACb;EAGF,KAAU,KAAK;CACjB,GAAG;EAAC;EAAW;EAAQ;EAAM;CAAK,CAAC;CAEnC,eAAe,cAAc,kBAAkB,UAAU;EAGvD,IAFgB,MAA+B,QAEnC,cAAc,KAAK,IAC7B,KAAU,KAAK;CAEnB,CAAC;CAED,gBAAgB;EACd,IACE,CAAC,cACD,CAAC,WAAW,WACZ,cACA,CAAC,kBAAkB,WACnB,OAAO,yBAAyB,aAEhC;EAGF,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,IAAI,QAAQ,MAAM,UAAU,MAAM,cAAc,GAC9C,SAAS;EAEb,GACA,EACE,YAAY,QACd,CACF;EAEA,SAAS,QAAQ,kBAAkB,OAAO;EAE1C,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAY;EAAU,WAAW;EAAS;CAAU,CAAC;CAEzD,OAAO;EACL;EACA;EACA;EACA;EACA,SAAS,MAAM;EACf,cAAc,MAAM;EACpB,QAAQ,MAAM;EACd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/table/lib/bulk.d.ts

@@ -1,6 +1,6 @@
 import { Method } from '@inertiajs/core';
 import { Node } from '../../core/types.js';
-import { Action, ButtonVariant } from '../../types/generated.js';
+import { Action, Emphasis, Variant } from '../../types/generated.js';
 import { ActionNode } from '../types.js';
 export type BulkAction = {
     id: string;
@@ -8,7 +8,8 @@ export type BulkAction = {
     method: Method;
     endpoint: string;
     ref: string;
-    variant: ButtonVariant;
+    variant: Variant | null;
+    emphasis: Emphasis | null;
     confirmation: Action["confirmation"];
     form: Node | null;
     modalSide: Action["modalSide"];

package/dist/table/lib/bulk.js

@@ -11,7 +11,8 @@ function getBulkActions(actions) {
 			method: props.method ?? "post",
 			endpoint: props.endpoint,
 			ref: props.ref ?? "",
-			variant: props.variant ?? "default",
+			variant: props.variant,
+			emphasis: props.emphasis,
 			confirmation: props.confirmation,
 			form: props.form,
 			modalSide: props.modalSide,

package/dist/table/lib/bulk.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk.js","names":[],"sources":["../../../resources/js/table/lib/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { Action, ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport type { ActionNode } from \"@lattice-php/lattice/table/types\";\nimport { actionLabel } from \"@lattice-php/lattice/action/lib/action-label\";\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  modalSide: Action[\"modalSide\"];\n  modalWidth: Action[\"modalWidth\"];\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: actionLabel(node),\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        modalSide: props.modalSide,\n        modalWidth: props.modalWidth,\n      },\n    ];\n  });\n}\n"],"mappings":";;AAmBA,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,YAAY,IAAI;GACvB,QAAQ,MAAM,UAAU;GACxB,UAAU,MAAM;GAChB,KAAK,MAAM,OAAO;GAClB,SAAS,MAAM,WAAW;GAC1B,cAAc,MAAM;GACpB,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,YAAY,MAAM;EACpB,CACF;CACF,CAAC;AACH"}
+{"version":3,"file":"bulk.js","names":[],"sources":["../../../resources/js/table/lib/bulk.ts"],"sourcesContent":["import type { Method } from \"@inertiajs/core\";\nimport type { Node } from \"@lattice-php/lattice/core/types\";\nimport type { Action, Emphasis, Variant } from \"@lattice-php/lattice/types/generated\";\nimport type { ActionNode } from \"@lattice-php/lattice/table/types\";\nimport { actionLabel } from \"@lattice-php/lattice/action/lib/action-label\";\n\nexport type BulkAction = {\n  id: string;\n  label: string;\n  method: Method;\n  endpoint: string;\n  ref: string;\n  variant: Variant | null;\n  emphasis: Emphasis | null;\n  confirmation: Action[\"confirmation\"];\n  form: Node | null;\n  modalSide: Action[\"modalSide\"];\n  modalWidth: Action[\"modalWidth\"];\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: actionLabel(node),\n        method: props.method ?? \"post\",\n        endpoint: props.endpoint,\n        ref: props.ref ?? \"\",\n        variant: props.variant,\n        emphasis: props.emphasis,\n        confirmation: props.confirmation,\n        form: props.form,\n        modalSide: props.modalSide,\n        modalWidth: props.modalWidth,\n      },\n    ];\n  });\n}\n"],"mappings":";;AAoBA,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,YAAY,IAAI;GACvB,QAAQ,MAAM,UAAU;GACxB,UAAU,MAAM;GAChB,KAAK,MAAM,OAAO;GAClB,SAAS,MAAM;GACf,UAAU,MAAM;GAChB,cAAc,MAAM;GACpB,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,YAAY,MAAM;EACpB,CACF;CACF,CAAC;AACH"}

package/dist/toast/toast.js

@@ -2,10 +2,12 @@ import { LATTICE_EVENT } from "../core/event-names.js";
 import { isTranslatable } from "../i18n/translatable.js";
 //#region resources/js/toast/toast.ts
 var variants = [
+	"primary",
+	"secondary",
 	"success",
 	"info",
 	"warning",
-	"error"
+	"danger"
 ];
 function isVariant(value) {
 	return variants.some((variant) => variant === value);

package/dist/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../../resources/js/toast/toast.ts"],"sourcesContent":["import type { Toast as ToastMessage, Variant } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { isTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\n\nexport type { ToastMessage, Variant };\n\nconst variants = [\"success\", \"info\", \"warning\", \"error\"] as const satisfies readonly Variant[];\n\nexport function isVariant(value: unknown): value is Variant {\n  return variants.some((variant) => variant === value);\n}\n\nexport function normalizeToastMessage(value: unknown): ToastMessage | null {\n  if (typeof value !== \"object\" || value === null) {\n    return null;\n  }\n\n  const toast = value as Record<string, unknown>;\n\n  const rawMessage = toast.message;\n  const message =\n    typeof rawMessage === \"string\" ? rawMessage : isTranslatable(rawMessage) ? rawMessage : null;\n\n  if (message === null || message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (toast.action as ToastMessage[\"action\"]) ?? null,\n    dismissible: toast.dismissible !== false,\n    duration: typeof toast.duration === \"number\" ? toast.duration : null,\n    message,\n    persistent: toast.persistent === true,\n    variant: isVariant(toast.variant) ? toast.variant : \"success\",\n  };\n}\n\nexport function onToast(callback: (toast: ToastMessage) => void): () => void {\n  const listener = (event: Event): void => {\n    const toast = normalizeToastMessage((event as CustomEvent).detail);\n\n    if (toast) {\n      callback(toast);\n    }\n  };\n\n  window.addEventListener(LATTICE_EVENT.toast, listener);\n\n  return () => window.removeEventListener(LATTICE_EVENT.toast, listener);\n}\n"],"mappings":";;;AAMA,IAAM,WAAW;CAAC;CAAW;CAAQ;CAAW;AAAO;AAEvD,SAAgB,UAAU,OAAkC;CAC1D,OAAO,SAAS,MAAM,YAAY,YAAY,KAAK;AACrD;AAEA,SAAgB,sBAAsB,OAAqC;CACzE,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,QAAQ;CAEd,MAAM,aAAa,MAAM;CACzB,MAAM,UACJ,OAAO,eAAe,WAAW,aAAa,eAAe,UAAU,IAAI,aAAa;CAE1F,IAAI,YAAY,QAAQ,YAAY,IAClC,OAAO;CAGT,OAAO;EACL,QAAS,MAAM,UAAqC;EACpD,aAAa,MAAM,gBAAgB;EACnC,UAAU,OAAO,MAAM,aAAa,WAAW,MAAM,WAAW;EAChE;EACA,YAAY,MAAM,eAAe;EACjC,SAAS,UAAU,MAAM,OAAO,IAAI,MAAM,UAAU;CACtD;AACF;AAEA,SAAgB,QAAQ,UAAqD;CAC3E,MAAM,YAAY,UAAuB;EACvC,MAAM,QAAQ,sBAAuB,MAAsB,MAAM;EAEjE,IAAI,OACF,SAAS,KAAK;CAElB;CAEA,OAAO,iBAAiB,cAAc,OAAO,QAAQ;CAErD,aAAa,OAAO,oBAAoB,cAAc,OAAO,QAAQ;AACvE"}
+{"version":3,"file":"toast.js","names":[],"sources":["../../resources/js/toast/toast.ts"],"sourcesContent":["import type { Toast as ToastMessage, Variant } from \"@lattice-php/lattice/types/generated\";\nimport { LATTICE_EVENT } from \"@lattice-php/lattice/core/event-names\";\nimport { isTranslatable } from \"@lattice-php/lattice/i18n/translatable\";\n\nexport type { ToastMessage, Variant };\n\nconst variants = [\n  \"primary\",\n  \"secondary\",\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"danger\",\n] as const satisfies readonly Variant[];\n\nexport function isVariant(value: unknown): value is Variant {\n  return variants.some((variant) => variant === value);\n}\n\nexport function normalizeToastMessage(value: unknown): ToastMessage | null {\n  if (typeof value !== \"object\" || value === null) {\n    return null;\n  }\n\n  const toast = value as Record<string, unknown>;\n\n  const rawMessage = toast.message;\n  const message =\n    typeof rawMessage === \"string\" ? rawMessage : isTranslatable(rawMessage) ? rawMessage : null;\n\n  if (message === null || message === \"\") {\n    return null;\n  }\n\n  return {\n    action: (toast.action as ToastMessage[\"action\"]) ?? null,\n    dismissible: toast.dismissible !== false,\n    duration: typeof toast.duration === \"number\" ? toast.duration : null,\n    message,\n    persistent: toast.persistent === true,\n    variant: isVariant(toast.variant) ? toast.variant : \"success\",\n  };\n}\n\nexport function onToast(callback: (toast: ToastMessage) => void): () => void {\n  const listener = (event: Event): void => {\n    const toast = normalizeToastMessage((event as CustomEvent).detail);\n\n    if (toast) {\n      callback(toast);\n    }\n  };\n\n  window.addEventListener(LATTICE_EVENT.toast, listener);\n\n  return () => window.removeEventListener(LATTICE_EVENT.toast, listener);\n}\n"],"mappings":";;;AAMA,IAAM,WAAW;CACf;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,SAAgB,UAAU,OAAkC;CAC1D,OAAO,SAAS,MAAM,YAAY,YAAY,KAAK;AACrD;AAEA,SAAgB,sBAAsB,OAAqC;CACzE,IAAI,OAAO,UAAU,YAAY,UAAU,MACzC,OAAO;CAGT,MAAM,QAAQ;CAEd,MAAM,aAAa,MAAM;CACzB,MAAM,UACJ,OAAO,eAAe,WAAW,aAAa,eAAe,UAAU,IAAI,aAAa;CAE1F,IAAI,YAAY,QAAQ,YAAY,IAClC,OAAO;CAGT,OAAO;EACL,QAAS,MAAM,UAAqC;EACpD,aAAa,MAAM,gBAAgB;EACnC,UAAU,OAAO,MAAM,aAAa,WAAW,MAAM,WAAW;EAChE;EACA,YAAY,MAAM,eAAe;EACjC,SAAS,UAAU,MAAM,OAAO,IAAI,MAAM,UAAU;CACtD;AACF;AAEA,SAAgB,QAAQ,UAAqD;CAC3E,MAAM,YAAY,UAAuB;EACvC,MAAM,QAAQ,sBAAuB,MAAsB,MAAM;EAEjE,IAAI,OACF,SAAS,KAAK;CAElB;CAEA,OAAO,iBAAiB,cAAc,OAAO,QAAQ;CAErD,aAAa,OAAO,oBAAoB,cAAc,OAAO,QAAQ;AACvE"}

package/dist/toast/variant-styles.js

@@ -2,6 +2,20 @@ import { Icon } from "../icons/sprite.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/toast/variant-styles.tsx
 var variantStyles = {
+	primary: {
+		accent: "border-l-lt-primary",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			className: "size-lt-icon-lg shrink-0 text-lt-primary"
+		})
+	},
+	secondary: {
+		accent: "border-l-lt-secondary",
+		icon: /* @__PURE__ */ jsx(Icon, {
+			name: "info",
+			className: "size-lt-icon-lg shrink-0 text-lt-muted-fg"
+		})
+	},
 	success: {
 		accent: "border-l-lt-success",
 		icon: /* @__PURE__ */ jsx(Icon, {
@@ -23,7 +37,7 @@ var variantStyles = {
 			className: "size-lt-icon-lg shrink-0 text-lt-warning"
 		})
 	},
-	error: {
+	danger: {
 		accent: "border-l-lt-danger",
 		icon: /* @__PURE__ */ jsx(Icon, {
 			name: "circle-x",