@lattice-php/lattice 0.19.0 → 0.21.0

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

@@ -1,24 +1,21 @@
-import { useLocale } from "../../../i18n/locale.js";
-import { formatCell } from "../../lib/format.js";
-import { numericValue } from "../../../format/numeric.js";
-import { formatNumber } from "../../../format/number.js";
+import { NumericCell } from "./numeric-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/money-cell.tsx
 var MoneyCell = ({ column, props, row, value }) => {
-	const { locale } = useLocale();
-	if (numericValue(value) === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
 	const rawCode = props.currencyField ? row[props.currencyField] : void 0;
 	const code = props.currency ?? (typeof rawCode === "string" ? rawCode : null);
-	return /* @__PURE__ */ jsx("span", {
-		className: "tabular-nums",
-		children: formatNumber(value, {
+	return /* @__PURE__ */ jsx(NumericCell, {
+		column,
+		copyable: props.copyable,
+		value,
+		format: {
 			kind: "number",
 			notation: "standard",
 			minimumFractionDigits: props.minimumFractionDigits,
 			maximumFractionDigits: props.maximumFractionDigits,
 			currency: code,
 			unit: null
-		}, locale)
+		}
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"money-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/money-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatNumber } from \"@lattice-php/lattice/format/number\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const MoneyCell: ColumnCellComponent<\"column.money\"> = ({ column, props, row, value }) => {\n  const { locale } = useLocale();\n\n  if (numericValue(value) === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const rawCode = props.currencyField ? row[props.currencyField] : undefined;\n  const code = props.currency ?? (typeof rawCode === \"string\" ? rawCode : null);\n\n  const text = formatNumber(\n    value,\n    {\n      kind: \"number\",\n      notation: \"standard\",\n      minimumFractionDigits: props.minimumFractionDigits,\n      maximumFractionDigits: props.maximumFractionDigits,\n      currency: code,\n      unit: null,\n    },\n    locale,\n  );\n\n  return <span className=\"tabular-nums\">{text}</span>;\n};\n"],"mappings":";;;;;;AAMA,IAAa,aAAkD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC/F,MAAM,EAAE,WAAW,UAAU;CAE7B,IAAI,aAAa,KAAK,MAAM,MAC1B,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAGhD,MAAM,UAAU,MAAM,gBAAgB,IAAI,MAAM,iBAAiB,KAAA;CACjE,MAAM,OAAO,MAAM,aAAa,OAAO,YAAY,WAAW,UAAU;CAexE,OAAO,oBAAC,QAAD;EAAM,WAAU;YAbV,aACX,OACA;GACE,MAAM;GACN,UAAU;GACV,uBAAuB,MAAM;GAC7B,uBAAuB,MAAM;GAC7B,UAAU;GACV,MAAM;EACR,GACA,MAGqC;CAAW,CAAA;AACpD"}
+{"version":3,"file":"money-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/money-cell.tsx"],"sourcesContent":["import type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { NumericCell } from \"./numeric-cell\";\n\nexport const MoneyCell: ColumnCellComponent<\"column.money\"> = ({ column, props, row, value }) => {\n  const rawCode = props.currencyField ? row[props.currencyField] : undefined;\n  const code = props.currency ?? (typeof rawCode === \"string\" ? rawCode : null);\n\n  return (\n    <NumericCell\n      column={column}\n      copyable={props.copyable}\n      value={value}\n      format={{\n        kind: \"number\",\n        notation: \"standard\",\n        minimumFractionDigits: props.minimumFractionDigits,\n        maximumFractionDigits: props.maximumFractionDigits,\n        currency: code,\n        unit: null,\n      }}\n    />\n  );\n};\n"],"mappings":";;;AAGA,IAAa,aAAkD,EAAE,QAAQ,OAAO,KAAK,YAAY;CAC/F,MAAM,UAAU,MAAM,gBAAgB,IAAI,MAAM,iBAAiB,KAAA;CACjE,MAAM,OAAO,MAAM,aAAa,OAAO,YAAY,WAAW,UAAU;CAExE,OACE,oBAAC,aAAD;EACU;EACR,UAAU,MAAM;EACT;EACP,QAAQ;GACN,MAAM;GACN,UAAU;GACV,uBAAuB,MAAM;GAC7B,uBAAuB,MAAM;GAC7B,UAAU;GACV,MAAM;EACR;CACD,CAAA;AAEL"}

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

@@ -1,24 +1,19 @@
-import { useLocale } from "../../../i18n/locale.js";
-import { formatCell } from "../../lib/format.js";
-import { numericValue } from "../../../format/numeric.js";
-import { formatNumber } from "../../../format/number.js";
+import { NumericCell } from "./numeric-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/number-cell.tsx
-var NumberCell = ({ column, props, value }) => {
-	const { locale } = useLocale();
-	if (numericValue(value) === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
-	return /* @__PURE__ */ jsx("span", {
-		className: "tabular-nums",
-		children: formatNumber(value, {
-			kind: "number",
-			notation: props.compact ? "compact" : "standard",
-			minimumFractionDigits: props.minimumFractionDigits,
-			maximumFractionDigits: props.maximumFractionDigits,
-			currency: null,
-			unit: props.unit
-		}, locale)
-	});
-};
+var NumberCell = ({ column, props, value }) => /* @__PURE__ */ jsx(NumericCell, {
+	column,
+	copyable: props.copyable,
+	value,
+	format: {
+		kind: "number",
+		notation: props.compact ? "compact" : "standard",
+		minimumFractionDigits: props.minimumFractionDigits,
+		maximumFractionDigits: props.maximumFractionDigits,
+		currency: null,
+		unit: props.unit
+	}
+});
 //#endregion
 export { NumberCell };
 

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

@@ -1 +1 @@
-{"version":3,"file":"number-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/number-cell.tsx"],"sourcesContent":["import { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { formatNumber } from \"@lattice-php/lattice/format/number\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\n\nexport const NumberCell: ColumnCellComponent<\"column.number\"> = ({ column, props, value }) => {\n  const { locale } = useLocale();\n\n  if (numericValue(value) === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  const text = formatNumber(\n    value,\n    {\n      kind: \"number\",\n      notation: props.compact ? \"compact\" : \"standard\",\n      minimumFractionDigits: props.minimumFractionDigits,\n      maximumFractionDigits: props.maximumFractionDigits,\n      currency: null,\n      unit: props.unit,\n    },\n    locale,\n  );\n\n  return <span className=\"tabular-nums\">{text}</span>;\n};\n"],"mappings":";;;;;;AAMA,IAAa,cAAoD,EAAE,QAAQ,OAAO,YAAY;CAC5F,MAAM,EAAE,WAAW,UAAU;CAE7B,IAAI,aAAa,KAAK,MAAM,MAC1B,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAgBhD,OAAO,oBAAC,QAAD;EAAM,WAAU;YAbV,aACX,OACA;GACE,MAAM;GACN,UAAU,MAAM,UAAU,YAAY;GACtC,uBAAuB,MAAM;GAC7B,uBAAuB,MAAM;GAC7B,UAAU;GACV,MAAM,MAAM;EACd,GACA,MAGqC;CAAW,CAAA;AACpD"}
+{"version":3,"file":"number-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/number-cell.tsx"],"sourcesContent":["import type { ColumnCellComponent } from \"@lattice-php/lattice/table/registry\";\nimport { NumericCell } from \"./numeric-cell\";\n\nexport const NumberCell: ColumnCellComponent<\"column.number\"> = ({ column, props, value }) => (\n  <NumericCell\n    column={column}\n    copyable={props.copyable}\n    value={value}\n    format={{\n      kind: \"number\",\n      notation: props.compact ? \"compact\" : \"standard\",\n      minimumFractionDigits: props.minimumFractionDigits,\n      maximumFractionDigits: props.maximumFractionDigits,\n      currency: null,\n      unit: props.unit,\n    }}\n  />\n);\n"],"mappings":";;;AAGA,IAAa,cAAoD,EAAE,QAAQ,OAAO,YAChF,oBAAC,aAAD;CACU;CACR,UAAU,MAAM;CACT;CACP,QAAQ;EACN,MAAM;EACN,UAAU,MAAM,UAAU,YAAY;EACtC,uBAAuB,MAAM;EAC7B,uBAAuB,MAAM;EAC7B,UAAU;EACV,MAAM,MAAM;CACd;AACD,CAAA"}

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { NumberFormat } from '../../../types/index.js';
+import { TableColumn } from '../../types.js';
+/** Shared numeric cell body for the money and number columns. */
+export declare function NumericCell({ column, copyable, format, value, }: {
+    column: TableColumn;
+    copyable?: boolean | null;
+    format: NumberFormat;
+    value: unknown;
+}): ReactNode;

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

@@ -0,0 +1,25 @@
+import { useLocale } from "../../../i18n/locale.js";
+import { formatCell } from "../../lib/format.js";
+import { numericValue } from "../../../format/numeric.js";
+import { formatNumber } from "../../../format/number.js";
+import { CopyableCell } from "./copyable-cell.js";
+import { jsx } from "react/jsx-runtime";
+//#region resources/js/table/components/cells/numeric-cell.tsx
+/** Shared numeric cell body for the money and number columns. */
+function NumericCell({ column, copyable, format, value }) {
+	const { locale } = useLocale();
+	if (numericValue(value) === null) return /* @__PURE__ */ jsx("span", { children: formatCell(value, column) });
+	return /* @__PURE__ */ jsx(CopyableCell, {
+		column,
+		copyable,
+		value: String(value),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: formatNumber(value, format, locale)
+		})
+	});
+}
+//#endregion
+export { NumericCell };
+
+//# sourceMappingURL=numeric-cell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"numeric-cell.js","names":[],"sources":["../../../../resources/js/table/components/cells/numeric-cell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport type { NumberFormat } from \"@lattice-php/lattice/types\";\nimport { formatNumber } from \"@lattice-php/lattice/format/number\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatCell } from \"@lattice-php/lattice/table/lib/format\";\nimport type { TableColumn } from \"@lattice-php/lattice/table/types\";\nimport { CopyableCell } from \"./copyable-cell\";\n\n/** Shared numeric cell body for the money and number columns. */\nexport function NumericCell({\n  column,\n  copyable,\n  format,\n  value,\n}: {\n  column: TableColumn;\n  copyable?: boolean | null;\n  format: NumberFormat;\n  value: unknown;\n}): ReactNode {\n  const { locale } = useLocale();\n\n  if (numericValue(value) === null) {\n    return <span>{formatCell(value, column)}</span>;\n  }\n\n  return (\n    <CopyableCell column={column} copyable={copyable} value={String(value)}>\n      <span className=\"tabular-nums\">{formatNumber(value, format, locale)}</span>\n    </CopyableCell>\n  );\n}\n"],"mappings":";;;;;;;;AAUA,SAAgB,YAAY,EAC1B,QACA,UACA,QACA,SAMY;CACZ,MAAM,EAAE,WAAW,UAAU;CAE7B,IAAI,aAAa,KAAK,MAAM,MAC1B,OAAO,oBAAC,QAAD,EAAA,UAAO,WAAW,OAAO,MAAM,EAAQ,CAAA;CAGhD,OACE,oBAAC,cAAD;EAAsB;EAAkB;EAAU,OAAO,OAAO,KAAK;YACnE,oBAAC,QAAD;GAAM,WAAU;aAAgB,aAAa,OAAO,QAAQ,MAAM;EAAQ,CAAA;CAC9D,CAAA;AAElB"}

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

@@ -1,5 +1,5 @@
-import { Renderer } from "../../../core/renderer.js";
 import { materializeSchema } from "../../../core/materialize.js";
+import { Renderer } from "../../../core/renderer.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/stack-cell.tsx
 var StackCell = ({ column, row }) => /* @__PURE__ */ jsx("div", {

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

@@ -1,7 +1,8 @@
 import { cn } from "../../../lib/utils.js";
 import { DateTime } from "../../../i18n/date-time.js";
-import { CopyableText } from "../../../ui/copyable-text.js";
+import { coerceColor, namedColor, toneProps } from "../../../lib/color.js";
 import { formatCell, resolveLink } from "../../lib/format.js";
+import { CopyableCell } from "./copyable-cell.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/table/components/cells/text-cell.tsx
 var TextCell = (args) => {
@@ -11,8 +12,10 @@ var TextCell = (args) => {
 };
 function Badge({ label, color }) {
 	if (label === "") return null;
+	const tone = toneProps(coerceColor(color) ?? namedColor("gray"));
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("lt-cell-badge", `lt-cell-tone-${color || "gray"}`),
+		className: cn("lt-cell-badge", tone.className),
+		style: tone.style,
 		children: label
 	});
 }
@@ -54,11 +57,10 @@ function PlainTextCell({ column, props, row, value }) {
 		dateStyle: dateProps.dateStyle,
 		timeStyle: dateProps.timeStyle
 	});
-	if (!props.copyable) return content;
-	return /* @__PURE__ */ jsx(CopyableText, {
+	return /* @__PURE__ */ jsx(CopyableCell, {
+		column,
+		copyable: props.copyable,
 		value: text,
-		label: column.props.label ?? column.key,
-		testId: `copy-${column.key}`,
 		children: content
 	});
 }

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 { CopyableText } from \"@lattice-php/lattice/ui/copyable-text\";\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\";\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  return <span className={cn(\"lt-cell-badge\", `lt-cell-tone-${color || \"gray\"}`)}>{label}</span>;\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  if (!props.copyable) {\n    return content;\n  }\n\n  return (\n    <CopyableText\n      value={text}\n      label={column.props.label ?? column.key}\n      testId={`copy-${column.key}`}\n    >\n      {content}\n    </CopyableText>\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,MAAM,EAAE,OAAO,SAA8D;CACpF,IAAI,UAAU,IACZ,OAAO;CAGT,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,iBAAiB,gBAAgB,SAAS,QAAQ;YAAI;CAAY,CAAA;AAC/F;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,IAAI,CAAC,MAAM,UACT,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OAAO;EACP,OAAO,OAAO,MAAM,SAAS,OAAO;EACpC,QAAQ,QAAQ,OAAO;YAEtB;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 { 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"}

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

@@ -1,11 +1,12 @@
-import { cn } from "../../lib/utils.js";
-import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { Button } from "../../ui/button.js";
+import { IconButton } from "../../ui/icon-button.js";
 import { filterValue } from "../lib/filter-values.js";
 import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../lib/query.js";
+import { NativeSelect } from "../../ui/native-select.js";
 import { TableFilterControl } from "./filter-controls.js";
-import { FilterValueInput, fieldClass } from "./filter-value-input.js";
+import { FilterValueInput } from "./filter-value-input.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/column-filter-control.tsx
@@ -57,20 +58,17 @@ function ColumnFilterControl({ column, clauses, processing, onAdd, onUpdate, onR
 			})
 		}), /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 			asChild: true,
-			children: /* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-label": t("table.filter.columnFilters", "{{label}} filters", { label }),
+			children: /* @__PURE__ */ jsx(IconButton, {
+				variant: "segmented",
+				size: "md",
+				icon: "filter",
+				label: t("table.filter.column-filters", "{{label}} filters", { label }),
 				"data-test": `filter-${column.key}`,
-				className: "relative -ml-px inline-flex size-lt-control-md shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary",
 				disabled: processing,
-				children: [/* @__PURE__ */ jsx(Icon, {
-					name: "filter",
-					"aria-hidden": "true",
-					className: "size-lt-icon-md"
-				}), clauses.length > 0 && /* @__PURE__ */ jsx("span", {
+				children: clauses.length > 0 && /* @__PURE__ */ jsx("span", {
 					className: "absolute -right-1.5 -top-1.5 inline-flex size-4 items-center justify-center rounded-full bg-lt-primary text-xs font-medium text-lt-primary-fg",
 					children: clauses.length
-				})]
+				})
 			})
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			align: "start",
@@ -145,6 +143,7 @@ function ColumnSelectFilter({ column, clauses, processing, onReplace, onSearch }
 		filter: data,
 		value: { value },
 		processing,
+		bare: true,
 		onChange: change,
 		onSearch: onSearch ? (_field, query, signal) => onSearch(query, signal) : void 0
 	});
@@ -225,17 +224,14 @@ function FilterClauseList({ column, clauses, operators, defaultOperator, process
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "border-t border-lt-border pt-3",
-				children: /* @__PURE__ */ jsxs("button", {
-					type: "button",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					icon: "plus",
 					"data-test": `filter-${column.key}-add`,
-					className: "inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50",
+					className: "w-full",
 					disabled: processing,
 					onClick: () => setAdding(true),
-					children: [/* @__PURE__ */ jsx(Icon, {
-						name: "plus",
-						"aria-hidden": "true",
-						className: "size-lt-icon-md"
-					}), t("table.filter.add", "Add filter")]
+					children: t("table.filter.add", "Add filter")
 				})
 			})
 		]
@@ -249,10 +245,11 @@ function FilterClauseRow({ column, type, operators, clause, processing, onOperat
 		className: "grid gap-2",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [operators.length > 1 ? /* @__PURE__ */ jsx("select", {
+			children: [operators.length > 1 ? /* @__PURE__ */ jsx(NativeSelect, {
+				density: "compact",
 				"aria-label": t("table.filter.operator", "{{label}} operator", { label }),
 				"data-test": `filter-${column.key}-operator`,
-				className: cn(fieldClass, "flex-1"),
+				className: "flex-1",
 				disabled: processing,
 				value: clause.operator,
 				onChange: (event) => onOperator(event.target.value),
@@ -263,18 +260,14 @@ function FilterClauseRow({ column, type, operators, clause, processing, onOperat
 			}) : /* @__PURE__ */ jsx("span", {
 				className: "flex-1 text-sm font-medium",
 				children: operatorLabel(clause.operator)
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon",
+				icon: "trash-2",
 				"aria-label": t("table.filter.remove", "Remove {{label}} filter", { label }),
 				"data-test": `filter-${column.key}-remove`,
-				className: "inline-flex size-lt-control-md items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50",
 				disabled: processing,
-				onClick: onRemove,
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: "trash-2",
-					"aria-hidden": "true",
-					className: "size-lt-icon-md"
-				})
+				onClick: onRemove
 			})]
 		}), !valueless && /* @__PURE__ */ jsx(FilterValueInput, {
 			type,

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 { Icon } from \"@lattice-php/lattice/icons\";\nimport { useState } from \"react\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\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 { fieldClass, 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          <button\n            type=\"button\"\n            aria-label={t(\"table.filter.columnFilters\", \"{{label}} filters\", {\n              label,\n            })}\n            data-test={`filter-${column.key}`}\n            className=\"relative -ml-px inline-flex size-lt-control-md shrink-0 items-center justify-center rounded-r-lt-sm border border-lt-input disabled:opacity-50 data-[state=open]:z-10 data-[state=open]:border-lt-primary\"\n            disabled={processing}\n          >\n            <Icon name=\"filter\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\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          </button>\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      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          type=\"button\"\n          data-test={`filter-${column.key}-add`}\n          className=\"inline-flex w-full items-center justify-center gap-2 rounded-lt-sm bg-lt-muted px-3 py-2 text-sm font-medium hover:bg-lt-muted/70 disabled:opacity-50\"\n          disabled={processing}\n          onClick={() => setAdding(true)}\n        >\n          <Icon name=\"plus\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\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          <select\n            aria-label={t(\"table.filter.operator\", \"{{label}} operator\", { label })}\n            data-test={`filter-${column.key}-operator`}\n            className={cn(fieldClass, \"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          </select>\n        ) : (\n          <span className=\"flex-1 text-sm font-medium\">{operatorLabel(clause.operator)}</span>\n        )}\n        <button\n          type=\"button\"\n          aria-label={t(\"table.filter.remove\", \"Remove {{label}} filter\", { label })}\n          data-test={`filter-${column.key}-remove`}\n          className=\"inline-flex size-lt-control-md items-center justify-center rounded-lt-sm border border-lt-border hover:bg-lt-muted disabled:opacity-50\"\n          disabled={processing}\n          onClick={onRemove}\n        >\n          <Icon name=\"trash-2\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\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            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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"}

package/dist/table/components/column-header.d.ts

@@ -1,9 +1,9 @@
 import { HTMLAttributes } from 'react';
-import { TableColumn, TableState } from '../types.js';
-export declare function ColumnHeader({ column, processing, resizeHandleProps, sort, state, }: {
+import { TableColumn, TableQuery } from '../types.js';
+export declare function ColumnHeader({ column, processing, resizeHandleProps, sort, query, }: {
     column: TableColumn;
     processing: boolean;
     resizeHandleProps?: HTMLAttributes<HTMLDivElement>;
     sort: (column: TableColumn) => void;
-    state: TableState;
+    query: TableQuery;
 }): import("react").JSX.Element;

package/dist/table/components/column-header.js

@@ -1,5 +1,6 @@
 import { cn } from "../../lib/utils.js";
 import { Icon } from "../../icons/sprite.js";
+import { useT } from "../../i18n/instance.js";
 import { alignJustify, alignText } from "../lib/align.js";
 import { getColumnAriaSort, getColumnSort } from "../lib/query.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,8 +22,9 @@ function SortIndicator({ sort }) {
 		className: "size-lt-icon-sm shrink-0 opacity-50"
 	});
 }
-function ColumnHeader({ column, processing, resizeHandleProps, sort, state }) {
-	const columnSort = getColumnSort(state, column);
+function ColumnHeader({ column, processing, resizeHandleProps, sort, query }) {
+	const columnSort = getColumnSort(query, column);
+	const { t } = useT("lattice");
 	const { align, label, sortable } = column.props;
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-sort": getColumnAriaSort(columnSort),
@@ -30,7 +32,7 @@ function ColumnHeader({ column, processing, resizeHandleProps, sort, state }) {
 		role: "columnheader",
 		children: [sortable ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			"aria-label": `Sort ${label}`,
+			"aria-label": t("table.sort.column", "Sort {{label}}", { label }),
 			className: cn("flex w-full items-center gap-1.5 font-semibold", alignJustify(align)),
 			"data-test": `sort-${column.key}`,
 			disabled: processing,

package/dist/table/components/column-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"@lattice-php/lattice/table/lib/align\";\nimport { getColumnAriaSort, getColumnSort } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableState } from \"@lattice-php/lattice/table/types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  state,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  state: TableState;\n}) {\n  const columnSort = getColumnSort(state, column);\n  const { align, label, sortable } = column.props;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          aria-label={`Sort ${label}`}\n          className={cn(\"flex w-full items-center gap-1.5 font-semibold\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,EAAE,OAAO,OAAO,aAAa,OAAO;CAE1C,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,yEACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,WACC,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,QAAQ;GACpB,WAAW,GAAG,kDAAkD,aAAa,KAAK,CAAC;GACnF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI;GAAY,CAAA,GAC/E,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI;EAAY,CAAA,GAEvE,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}
+{"version":3,"file":"column-header.js","names":[],"sources":["../../../resources/js/table/components/column-header.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { HTMLAttributes } from \"react\";\nimport { alignJustify, alignText } from \"@lattice-php/lattice/table/lib/align\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { getColumnAriaSort, getColumnSort } from \"@lattice-php/lattice/table/lib/query\";\nimport type { TableColumn, TableSort, TableQuery } from \"@lattice-php/lattice/table/types\";\n\nfunction SortIndicator({ sort }: { sort: TableSort | undefined }) {\n  if (sort?.direction === \"asc\") {\n    return <Icon name=\"arrow-up\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  if (sort?.direction === \"desc\") {\n    return <Icon name=\"arrow-down\" aria-hidden=\"true\" className=\"size-lt-icon-sm shrink-0\" />;\n  }\n\n  return (\n    <Icon\n      name=\"chevrons-up-down\"\n      aria-hidden=\"true\"\n      className=\"size-lt-icon-sm shrink-0 opacity-50\"\n    />\n  );\n}\n\nexport function ColumnHeader({\n  column,\n  processing,\n  resizeHandleProps,\n  sort,\n  query,\n}: {\n  column: TableColumn;\n  processing: boolean;\n  resizeHandleProps?: HTMLAttributes<HTMLDivElement>;\n  sort: (column: TableColumn) => void;\n  query: TableQuery;\n}) {\n  const columnSort = getColumnSort(query, column);\n  const { t } = useT(\"lattice\");\n  const { align, label, sortable } = column.props;\n\n  return (\n    <div\n      aria-sort={getColumnAriaSort(columnSort)}\n      className={cn(\n        \"relative min-w-0 px-4 py-3 pr-5 align-middle font-semibold text-lt-fg\",\n        alignText(align),\n      )}\n      role=\"columnheader\"\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          aria-label={t(\"table.sort.column\", \"Sort {{label}}\", { label })}\n          className={cn(\"flex w-full items-center gap-1.5 font-semibold\", alignJustify(align))}\n          data-test={`sort-${column.key}`}\n          disabled={processing}\n          onClick={() => sort(column)}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", alignText(align))}>{label}</span>\n          <SortIndicator sort={columnSort} />\n        </button>\n      ) : (\n        <span className={cn(\"block truncate\", alignText(align))}>{label}</span>\n      )}\n      {resizeHandleProps && <div {...resizeHandleProps} />}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAS,cAAc,EAAE,QAAyC;CAChE,IAAI,MAAM,cAAc,OACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAW,eAAY;EAAO,WAAU;CAA4B,CAAA;CAGxF,IAAI,MAAM,cAAc,QACtB,OAAO,oBAAC,MAAD;EAAM,MAAK;EAAa,eAAY;EAAO,WAAU;CAA4B,CAAA;CAG1F,OACE,oBAAC,MAAD;EACE,MAAK;EACL,eAAY;EACZ,WAAU;CACX,CAAA;AAEL;AAEA,SAAgB,aAAa,EAC3B,QACA,YACA,mBACA,MACA,SAOC;CACD,MAAM,aAAa,cAAc,OAAO,MAAM;CAC9C,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,OAAO;CAE1C,OACE,qBAAC,OAAD;EACE,aAAW,kBAAkB,UAAU;EACvC,WAAW,GACT,yEACA,UAAU,KAAK,CACjB;EACA,MAAK;YANP,CAQG,WACC,qBAAC,UAAD;GACE,MAAK;GACL,cAAY,EAAE,qBAAqB,kBAAkB,EAAE,MAAM,CAAC;GAC9D,WAAW,GAAG,kDAAkD,aAAa,KAAK,CAAC;GACnF,aAAW,QAAQ,OAAO;GAC1B,UAAU;GACV,eAAe,KAAK,MAAM;aAN5B,CAQE,oBAAC,QAAD;IAAM,WAAW,GAAG,2BAA2B,UAAU,KAAK,CAAC;cAAI;GAAY,CAAA,GAC/E,oBAAC,eAAD,EAAe,MAAM,WAAa,CAAA,CAC5B;OAER,oBAAC,QAAD;GAAM,WAAW,GAAG,kBAAkB,UAAU,KAAK,CAAC;aAAI;EAAY,CAAA,GAEvE,qBAAqB,oBAAC,OAAD,EAAK,GAAI,kBAAoB,CAAA,CAChD;;AAET"}

package/dist/table/components/column-visibility-menu.js

@@ -1,24 +1,19 @@
-import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
 import { Checkbox } from "../../ui/checkbox.js";
+import { IconButton } from "../../ui/icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/table/components/column-visibility-menu.tsx
 function ColumnVisibilityMenu({ columns, hasHidden, isVisible, onReset, onToggle, processing, visibleColumnCount }) {
 	const { t } = useT("lattice");
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			"aria-label": t("table.columns.label", "Columns"),
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			icon: "columns-3",
+			label: t("table.columns.label", "Columns"),
 			"data-test": "table-columns-menu",
-			className: "relative inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50 data-[state=open]:bg-lt-muted data-[state=open]:text-lt-fg",
-			disabled: processing,
-			children: /* @__PURE__ */ jsx(Icon, {
-				name: "columns-3",
-				"aria-hidden": "true",
-				className: "size-lt-icon-md"
-			})
+			disabled: processing
 		})
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		align: "end",

package/dist/table/components/column-visibility-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"column-visibility-menu.js","names":[],"sources":["../../../resources/js/table/components/column-visibility-menu.tsx"],"sourcesContent":["import { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport type { ToggleableColumn } from \"@lattice-php/lattice/table/hooks/use-column-visibility\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\n\nexport function ColumnVisibilityMenu({\n  columns,\n  hasHidden,\n  isVisible,\n  onReset,\n  onToggle,\n  processing,\n  visibleColumnCount,\n}: {\n  columns: ToggleableColumn[];\n  hasHidden: boolean;\n  isVisible: (column: ToggleableColumn) => boolean;\n  onReset: () => void;\n  onToggle: (key: string, visible: boolean) => void;\n  processing: boolean;\n  visibleColumnCount: number;\n}) {\n  const { t } = useT(\"lattice\");\n  const columnsLabel = t(\"table.columns.label\", \"Columns\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          aria-label={columnsLabel}\n          data-test=\"table-columns-menu\"\n          className=\"relative inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50 data-[state=open]:bg-lt-muted data-[state=open]:text-lt-fg\"\n          disabled={processing}\n        >\n          <Icon name=\"columns-3\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-64 p-4\">\n        <div className=\"grid gap-3\">\n          {columns.map((column) => {\n            const visible = isVisible(column);\n            const lockedLast = visible && visibleColumnCount <= 1;\n\n            return (\n              <label key={column.key} className=\"flex items-center gap-2 text-base text-lt-fg\">\n                <Checkbox\n                  data-test={`table-column-toggle-${column.key}`}\n                  checked={visible}\n                  disabled={lockedLast}\n                  onCheckedChange={(next) => onToggle(column.key, next === true)}\n                />\n                <span>{column.props.label ?? column.key}</span>\n              </label>\n            );\n          })}\n          {hasHidden && (\n            <button\n              type=\"button\"\n              data-test=\"table-columns-reset\"\n              className=\"mt-1 justify-self-start text-sm text-lt-muted-fg hover:text-lt-fg\"\n              onClick={onReset}\n            >\n              {t(\"table.columns.reset\", \"Reset\")}\n            </button>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,qBAAqB,EACnC,SACA,WACA,WACA,SACA,UACA,YACA,sBASC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAG5B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;YACd,oBAAC,UAAD;GACE,MAAK;GACL,cAPa,EAAE,uBAAuB,SAO1B;GACZ,aAAU;GACV,WAAU;GACV,UAAU;aAEV,oBAAC,MAAD;IAAM,MAAK;IAAY,eAAY;IAAO,WAAU;GAAmB,CAAA;EACjE,CAAA;CACM,CAAA,GAChB,oBAAC,gBAAD;EAAgB,OAAM;EAAM,WAAU;YACpC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,WAAW;IACvB,MAAM,UAAU,UAAU,MAAM;IAChC,MAAM,aAAa,WAAW,sBAAsB;IAEpD,OACE,qBAAC,SAAD;KAAwB,WAAU;eAAlC,CACE,oBAAC,UAAD;MACE,aAAW,uBAAuB,OAAO;MACzC,SAAS;MACT,UAAU;MACV,kBAAkB,SAAS,SAAS,OAAO,KAAK,SAAS,IAAI;KAC9D,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAM,SAAS,OAAO,IAAU,CAAA,CACzC;OARK,OAAO,GAQZ;GAEX,CAAC,GACA,aACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,uBAAuB,OAAO;GAC3B,CAAA,CAEP;;CACS,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"column-visibility-menu.js","names":[],"sources":["../../../resources/js/table/components/column-visibility-menu.tsx"],"sourcesContent":["import { Checkbox } from \"@lattice-php/lattice/ui/checkbox\";\nimport type { ToggleableColumn } from \"@lattice-php/lattice/table/hooks/use-column-visibility\";\nimport { IconButton } from \"@lattice-php/lattice/ui/icon-button\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@lattice-php/lattice/ui/popover\";\n\nexport function ColumnVisibilityMenu({\n  columns,\n  hasHidden,\n  isVisible,\n  onReset,\n  onToggle,\n  processing,\n  visibleColumnCount,\n}: {\n  columns: ToggleableColumn[];\n  hasHidden: boolean;\n  isVisible: (column: ToggleableColumn) => boolean;\n  onReset: () => void;\n  onToggle: (key: string, visible: boolean) => void;\n  processing: boolean;\n  visibleColumnCount: number;\n}) {\n  const { t } = useT(\"lattice\");\n  const columnsLabel = t(\"table.columns.label\", \"Columns\");\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <IconButton\n          size=\"sm\"\n          icon=\"columns-3\"\n          label={columnsLabel}\n          data-test=\"table-columns-menu\"\n          disabled={processing}\n        />\n      </PopoverTrigger>\n      <PopoverContent align=\"end\" className=\"w-64 p-4\">\n        <div className=\"grid gap-3\">\n          {columns.map((column) => {\n            const visible = isVisible(column);\n            const lockedLast = visible && visibleColumnCount <= 1;\n\n            return (\n              <label key={column.key} className=\"flex items-center gap-2 text-base text-lt-fg\">\n                <Checkbox\n                  data-test={`table-column-toggle-${column.key}`}\n                  checked={visible}\n                  disabled={lockedLast}\n                  onCheckedChange={(next) => onToggle(column.key, next === true)}\n                />\n                <span>{column.props.label ?? column.key}</span>\n              </label>\n            );\n          })}\n          {hasHidden && (\n            <button\n              type=\"button\"\n              data-test=\"table-columns-reset\"\n              className=\"mt-1 justify-self-start text-sm text-lt-muted-fg hover:text-lt-fg\"\n              onClick={onReset}\n            >\n              {t(\"table.columns.reset\", \"Reset\")}\n            </button>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;AAMA,SAAgB,qBAAqB,EACnC,SACA,WACA,WACA,SACA,UACA,YACA,sBASC;CACD,MAAM,EAAE,MAAM,KAAK,SAAS;CAG5B,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;YACd,oBAAC,YAAD;GACE,MAAK;GACL,MAAK;GACL,OARa,EAAE,uBAAuB,SAQ/B;GACP,aAAU;GACV,UAAU;EACX,CAAA;CACa,CAAA,GAChB,oBAAC,gBAAD;EAAgB,OAAM;EAAM,WAAU;YACpC,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,QAAQ,KAAK,WAAW;IACvB,MAAM,UAAU,UAAU,MAAM;IAChC,MAAM,aAAa,WAAW,sBAAsB;IAEpD,OACE,qBAAC,SAAD;KAAwB,WAAU;eAAlC,CACE,oBAAC,UAAD;MACE,aAAW,uBAAuB,OAAO;MACzC,SAAS;MACT,UAAU;MACV,kBAAkB,SAAS,SAAS,OAAO,KAAK,SAAS,IAAI;KAC9D,CAAA,GACD,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAM,SAAS,OAAO,IAAU,CAAA,CACzC;OARK,OAAO,GAQZ;GAEX,CAAC,GACA,aACC,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,WAAU;IACV,SAAS;cAER,EAAE,uBAAuB,OAAO;GAC3B,CAAA,CAEP;;CACS,CAAA,CACT,EAAA,CAAA;AAEb"}

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

@@ -1,9 +1,9 @@
 import { Option } from '../../types/generated.js';
-import { FilterClause, FilterNode, TableColumn, TableFilterIndicator } from '../types.js';
+import { FilterClause, FilterIndicator, FilterNode, TableColumn } from '../types.js';
 export declare function FilterBar({ clauses, columnsByKey, indicators, processing, onRemoveClause, onChange, onReset, }: {
     clauses: FilterClause[];
     columnsByKey: Map<string, TableColumn>;
-    indicators: TableFilterIndicator[];
+    indicators: FilterIndicator[];
     processing: boolean;
     onRemoveClause: (index: number) => void;
     onChange: (key: string, value: unknown) => void;

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

@@ -1,6 +1,6 @@
-import { Icon } from "../../icons/sprite.js";
 import { useT } from "../../i18n/instance.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { IconButton } from "../../ui/icon-button.js";
 import { isActiveFilterValue } from "../lib/filter-values.js";
 import { VALUELESS_FILTER_OPERATORS, operatorLabel } from "../lib/query.js";
 import { TableFilterControl } from "./filter-controls.js";
@@ -40,7 +40,7 @@ function FilterBar({ clauses, columnsByKey, indicators, processing, onRemoveClau
 					className: "text-lt-muted-fg underline-offset-2 hover:underline disabled:opacity-50",
 					disabled: processing,
 					onClick: onReset,
-					children: t("table.filter.resetAll", "Reset all")
+					children: t("table.filter.reset-all", "Reset all")
 				})
 			]
 		})
@@ -55,18 +55,13 @@ function FilterChip({ label, value, removeTestId, removeLabel, processing, onRem
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [`${label}: `, /* @__PURE__ */ jsx("span", {
 			className: "font-semibold",
 			children: value
-		})] }) }), /* @__PURE__ */ jsx("button", {
-			type: "button",
+		})] }) }), /* @__PURE__ */ jsx(IconButton, {
+			size: "xs",
+			icon: "x",
+			label: removeLabel,
 			"data-test": removeTestId,
-			className: "inline-flex size-5 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-border disabled:opacity-50",
 			disabled: processing,
-			"aria-label": removeLabel,
-			onClick: onRemove,
-			children: /* @__PURE__ */ jsx(Icon, {
-				name: "x",
-				"aria-hidden": "true",
-				className: "size-lt-icon-sm"
-			})
+			onClick: onRemove
 		})]
 	});
 }
@@ -75,20 +70,16 @@ function FilterMenu({ filters, values, processing, onChange, onSearch }) {
 	const active = filters.filter((filter) => isActiveFilterValue(values[filter.key]));
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		asChild: true,
-		children: /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-label": t("table.filter.filters", "Filters"),
+		children: /* @__PURE__ */ jsx(IconButton, {
+			size: "sm",
+			icon: "filter",
+			label: t("table.filter.filters", "Filters"),
 			"data-test": "table-filters-menu",
-			className: "relative inline-flex size-7 shrink-0 items-center justify-center rounded-lt-sm text-lt-muted-fg hover:bg-lt-muted hover:text-lt-fg disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50 data-[state=open]:bg-lt-muted data-[state=open]:text-lt-fg",
 			disabled: processing,
-			children: [/* @__PURE__ */ jsx(Icon, {
-				name: "filter",
-				"aria-hidden": "true",
-				className: "size-lt-icon-md"
-			}), active.length > 0 && /* @__PURE__ */ jsx("span", {
+			children: active.length > 0 && /* @__PURE__ */ jsx("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",
 				children: active.length
-			})]
+			})
 		})
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		align: "end",