@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/cjs/components/DataTableFilterChips/index.native.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableFilterChips_exports = {};
+__export(DataTableFilterChips_exports, {
+  DataTableFilterChips: () => DataTableFilterChips
+});
+module.exports = __toCommonJS(DataTableFilterChips_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_forms = require("@multiplatform.one/forms");
+var import_forms2 = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.native.js");
+var import_filterFields = require("../../utils/filterFields.native.js");
+var import_DataTableStateContext = require("../DataTable/DataTableStateContext.native.js");
+function DataTableFilterChips() {
+  var _ref;
+  var _ctx_computed;
+  var ctx = (0, import_DataTableStateContext.useDataTableState)();
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var fields = (_ref = ctx === null || ctx === void 0 ? void 0 : (_ctx_computed = ctx.computed) === null || _ctx_computed === void 0 ? void 0 : _ctx_computed.filterFields) !== null && _ref !== void 0 ? _ref : [];
+  var fieldFor = (0, import_react.useCallback)(function (id) {
+    return fields.find(function (f) {
+      return f.id === id;
+    });
+  }, [fields]);
+  var chips = (0, import_react.useMemo)(function () {
+    var _ctx_state_filters, _ctx_state_columnFilters;
+    if (!ctx) return [];
+    var items = [];
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      var _loop = function () {
+        var filter = _step.value;
+        var _ref2, _ref1;
+        var field = fieldFor(filter.columnId);
+        var label = (0, import_filterFields.getFilterChipLabel)((_ref2 = (_ref1 = field === null || field === void 0 ? void 0 : field.label) !== null && _ref1 !== void 0 ? _ref1 : filter.label) !== null && _ref2 !== void 0 ? _ref2 : filter.columnId, filter.value, field === null || field === void 0 ? void 0 : field.options);
+        items.push({
+          key: `advanced-${filter.id}`,
+          label,
+          target: {
+            kind: "advanced",
+            filterId: filter.id
+          },
+          onRemove: function onRemove() {
+            return ctx.actions.removeFilter(filter.id);
+          }
+        });
+      };
+      for (var _iterator = ((_ctx_state_filters = ctx.state.filters) !== null && _ctx_state_filters !== void 0 ? _ctx_state_filters : [])[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) _loop();
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    var _iteratorNormalCompletion1 = true,
+      _didIteratorError1 = false,
+      _iteratorError1 = void 0;
+    try {
+      var _loop1 = function () {
+        var columnFilter = _step1.value;
+        var _ref2;
+        if (!(0, import_filterFields.isFilterValueShape)(columnFilter.value)) return "continue";
+        var field = fieldFor(columnFilter.id);
+        var label = (0, import_filterFields.getFilterChipLabel)((_ref2 = field === null || field === void 0 ? void 0 : field.label) !== null && _ref2 !== void 0 ? _ref2 : columnFilter.id, columnFilter.value, field === null || field === void 0 ? void 0 : field.options);
+        items.push({
+          key: `column-${columnFilter.id}`,
+          label,
+          target: {
+            kind: "column",
+            columnId: columnFilter.id
+          },
+          onRemove: function onRemove() {
+            var _ctx_table_getColumn;
+            return (_ctx_table_getColumn = ctx.table.getColumn(columnFilter.id)) === null || _ctx_table_getColumn === void 0 ? void 0 : _ctx_table_getColumn.setFilterValue(void 0);
+          }
+        });
+      };
+      for (var _iterator1 = ((_ctx_state_columnFilters = ctx.state.columnFilters) !== null && _ctx_state_columnFilters !== void 0 ? _ctx_state_columnFilters : [])[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = true) _loop1();
+    } catch (err) {
+      _didIteratorError1 = true;
+      _iteratorError1 = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion1 && _iterator1.return != null) {
+          _iterator1.return();
+        }
+      } finally {
+        if (_didIteratorError1) {
+          throw _iteratorError1;
+        }
+      }
+    }
+    return items;
+  }, [ctx, ctx === null || ctx === void 0 ? void 0 : ctx.state.filters, ctx === null || ctx === void 0 ? void 0 : ctx.state.columnFilters, fieldFor]);
+  var handleClearAll = (0, import_react.useCallback)(function () {
+    if (!ctx) return;
+    ctx.actions.setFilters([]);
+    ctx.table.setColumnFilters(function (prev) {
+      return prev.filter(function (cf) {
+        return !(0, import_filterFields.isFilterValueShape)(cf.value);
+      });
+    });
+  }, [ctx]);
+  if (!ctx || chips.length === 0) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: "$2",
+    paddingVertical: "$1.5",
+    "aria-label": (0, import_t.t)("Active filters"),
+    children: [chips.map(function (chip) {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        role: "button",
+        tabIndex: 0,
+        "aria-label": (0, import_t.t)("Edit filter {{label}}", {
+          label: chip.label
+        }),
+        cursor: "pointer",
+        ...knobProps.borderRadius,
+        focusVisibleStyle: {
+          outlineColor: "$outlineColor",
+          outlineWidth: 2,
+          outlineStyle: "solid"
+        },
+        onPress: function onPress() {
+          var _ctx_filterUi;
+          return (_ctx_filterUi = ctx.filterUi) === null || _ctx_filterUi === void 0 ? void 0 : _ctx_filterUi.requestEdit(chip.target);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === "Enter" || e.key === " ") {
+            var _ctx_filterUi;
+            e.preventDefault();
+            (_ctx_filterUi = ctx.filterUi) === null || _ctx_filterUi === void 0 ? void 0 : _ctx_filterUi.requestEdit(chip.target);
+          }
+        },
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms2.Chip, {
+          color: "blue",
+          onDismiss: chip.onRemove,
+          children: chip.label
+        })
+      }, chip.key);
+    }), chips.length >= 2 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      size: "$2",
+      chromeless: true,
+      onPress: handleClearAll,
+      children: (0, import_t.t)("Clear all")
+    })]
+  });
+}
+//# sourceMappingURL=index.native.js.map

package/dist/cjs/components/DataTableFilterChips/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","DataTableFilterChips_exports","__export","DataTableFilterChips","module","exports","import_jsx_runtime","require","import_forms","import_forms2","import_theme","import_react","import_tamagui","import_t","import_filterFields","import_DataTableStateContext","_ref","_ctx_computed","ctx","useDataTableState","knobProps","useResolvedKnobs","fields","computed","filterFields","fieldFor","useCallback","id","find","f","chips","useMemo","_ctx_state_filters","_ctx_state_columnFilters","items","_iteratorNormalCompletion","_didIteratorError","_iteratorError","_loop","filter","_step","_ref2","_ref1","field","columnId","label","getFilterChipLabel","options","push","key","target","kind","filterId","onRemove","actions","removeFilter","_iterator","state","filters","Symbol","iterator","next","done","err","return","_iteratorNormalCompletion1","_didIteratorError1","_iteratorError1","_loop1","columnFilter","_step1","isFilterValueShape","_ctx_table_getColumn","table","getColumn","setFilterValue","_iterator1","columnFilters"],"sources":["../../../../src/components/DataTableFilterChips/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/DataTableFilters/index.cjs

@@ -31,6 +31,7 @@ var import_react2 = require("react");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_filterUtils = require("../../utils/filterUtils.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTableFilters(props) {
@@ -53,7 +54,6 @@ function DataTableFilters(props) {
   const canAddMoreFilters = filters.length < maxFilters;
   const handleAddFilter = filter => {
     onAddFilter(filter);
-    setShowFilterBuilder(false);
   };
   const handleUpdateFilter = (filterId, updates) => {
     const updatedFilters = filters.map(filter => filter.id === filterId ? {
@@ -88,7 +88,7 @@ function DataTableFilters(props) {
               size: 16
             }),
             disabled: !canAddMoreFilters,
-            children: "Add Filter"
+            children: (0, import_t.t)("Add Filter")
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
           ...knobProps.borderRadius,
@@ -123,7 +123,7 @@ function DataTableFilters(props) {
         icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
           size: 16
         }),
-        children: "Clear"
+        children: (0, import_t.t)("Clear")
       })]
     });
   }
@@ -149,7 +149,7 @@ function DataTableFilters(props) {
           fontSize: "$4",
           fontWeight: "600",
           id: "filters-heading",
-          children: "Filters"
+          children: (0, import_t.t)("Filters")
         }), showFilterCount && filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           backgroundColor: "$accentBackground",
           paddingHorizontal: "$2",
@@ -164,8 +164,12 @@ function DataTableFilters(props) {
         })]
       }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         ...{
-          tag: "fieldset"
+          render: "fieldset"
         },
+        borderWidth: 0,
+        margin: 0,
+        padding: 0,
+        minWidth: 0,
         alignItems: "center",
         gap: "$2",
         "aria-label": "Filter management actions",
@@ -184,7 +188,7 @@ function DataTableFilters(props) {
               "aria-label": "Add new filter",
               "aria-expanded": showFilterBuilder,
               "aria-haspopup": "dialog",
-              children: "Add Filter"
+              children: (0, import_t.t)("Add Filter")
             })
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
             ...knobProps.borderRadius,
@@ -223,14 +227,14 @@ function DataTableFilters(props) {
             size: 16
           }),
           "aria-label": "Clear all filters",
-          children: "Clear All"
+          children: (0, import_t.t)("Clear All")
         })]
       })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), filters.length > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
       maxHeight: 200,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
         ...{
-          tag: "ul"
+          render: "ul"
         },
         gap: "$2",
         padding: 0,
@@ -247,7 +251,7 @@ function DataTableFilters(props) {
       })
     }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       ...{
-        tag: "output"
+        render: "output"
       },
       padding: "$4",
       alignItems: "center",
@@ -255,7 +259,7 @@ function DataTableFilters(props) {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: "$3",
         color: "$color10",
-        children: "No filters applied"
+        children: (0, import_t.t)("No filters applied")
       })
     })]
   });
@@ -330,7 +334,7 @@ function FilterBuilder({
       return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         gap: "$2",
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          placeholder: "Min value",
+          placeholder: (0, import_t.t)("Min value"),
           value: filterValues[0] || "",
           onChangeText: text => {
             const newValues = [...filterValues];
@@ -338,7 +342,7 @@ function FilterBuilder({
             setFilterValues(newValues);
           }
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          placeholder: "Max value",
+          placeholder: (0, import_t.t)("Max value"),
           value: filterValues[1] || "",
           onChangeText: text => {
             const newValues = [...filterValues];
@@ -386,7 +390,7 @@ function FilterBuilder({
         });
       }
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-        placeholder: "Enter values separated by commas",
+        placeholder: (0, import_t.t)("Enter values separated by commas"),
         value: filterValues.join(", "),
         onChangeText: text => {
           setFilterValues(text.split(",").map(v => v.trim()));
@@ -395,15 +399,15 @@ function FilterBuilder({
     }
     if (selectedColumn.type === "date") {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-        label: "Value",
-        placeholder: "YYYY-MM-DD",
+        label: (0, import_t.t)("Value"),
+        placeholder: (0, import_t.t)("YYYY-MM-DD"),
         value: filterValue,
         onChangeText: setFilterValue
       });
     }
     if (selectedColumn.type === "boolean") {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-        label: "Value",
+        label: (0, import_t.t)("Value"),
         value: filterValue,
         onValueChange: v => {
           if (typeof v === "string") {
@@ -412,17 +416,17 @@ function FilterBuilder({
         },
         options: [{
           value: "true",
-          label: "True"
+          label: (0, import_t.t)("True")
         }, {
           value: "false",
-          label: "False"
+          label: (0, import_t.t)("False")
         }],
-        placeholder: "Select value"
+        placeholder: (0, import_t.t)("Select value")
       });
     }
     if (selectedColumn.options) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-        label: "Value",
+        label: (0, import_t.t)("Value"),
         value: filterValue,
         onValueChange: v => {
           if (typeof v === "string") {
@@ -433,12 +437,12 @@ function FilterBuilder({
           value: option.value.toString(),
           label: option.label
         })),
-        placeholder: "Select value"
+        placeholder: (0, import_t.t)("Select value")
       });
     }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-      label: "Value",
-      placeholder: "Enter value",
+      label: (0, import_t.t)("Value"),
+      placeholder: (0, import_t.t)("Enter value"),
       value: filterValue,
       onChangeText: setFilterValue,
       ...(selectedColumn.type === "number" && {
@@ -453,9 +457,9 @@ function FilterBuilder({
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: "$4",
       fontWeight: "600",
-      children: "Add Filter"
+      children: (0, import_t.t)("Add Filter")
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-      label: "Column",
+      label: (0, import_t.t)("Column"),
       value: selectedColumnId,
       onValueChange: v => {
         if (typeof v === "string") {
@@ -463,9 +467,9 @@ function FilterBuilder({
         }
       },
       options: columnOptions,
-      placeholder: "Select column"
+      placeholder: (0, import_t.t)("Select column")
     }), selectedColumnId && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-      label: "Condition",
+      label: (0, import_t.t)("Condition"),
       value: selectedOperator,
       onValueChange: v => {
         if (typeof v === "string") {
@@ -480,12 +484,12 @@ function FilterBuilder({
         size: knobProps.sizeToken,
         variant: "outlined",
         onPress: onCancel,
-        children: "Cancel"
+        children: (0, import_t.t)("Cancel")
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
         size: knobProps.sizeToken,
         onPress: handleAddFilter,
         disabled: !selectedColumnId || !selectedOperator,
-        children: "Add Filter"
+        children: (0, import_t.t)("Add Filter")
       })]
     })]
   });
@@ -503,7 +507,7 @@ function ActiveFilter({
   const column = availableColumns.find(col => col.id === filter.columnId);
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     ...{
-      tag: "li"
+      render: "li"
     },
     alignItems: "center",
     justifyContent: "space-between",
@@ -596,5 +600,6 @@ function getOperatorLabel(operator) {
     isAnyOf: "Is any of",
     isNoneOf: "Is none of"
   };
-  return labels[operator] || operator;
+  const label = labels[operator];
+  return label ? (0, import_t.t)(label) : operator;
 }

package/dist/cjs/components/DataTableFilters/index.native.js

@@ -34,6 +34,7 @@ var import_react2 = require("react");
 var import_forms = require("@multiplatform.one/forms");
 var import_tamagui = require("tamagui");
 var import_filterUtils = require("../../utils/filterUtils.native.js");
+var import_t = require("../../shared/t.native.js");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.native.js");
 function DataTableFilters(props) {
   var _ref, _props_filters, _ref1, _props_onFiltersChange, _ref2, _props_onAddFilter, _ref3, _props_onRemoveFilter, _ref4, _props_onClearFilters, _props_availableColumns;
@@ -56,7 +57,6 @@ function DataTableFilters(props) {
   var canAddMoreFilters = filters.length < maxFilters;
   var handleAddFilter = function handleAddFilter2(filter) {
     onAddFilter(filter);
-    setShowFilterBuilder(false);
   };
   var handleUpdateFilter = function handleUpdateFilter2(filterId, updates) {
     var updatedFilters = filters.map(function (filter) {
@@ -93,7 +93,7 @@ function DataTableFilters(props) {
               size: 16
             }),
             disabled: !canAddMoreFilters,
-            children: "Add Filter"
+            children: (0, import_t.t)("Add Filter")
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
           ...knobProps.borderRadius,
@@ -130,7 +130,7 @@ function DataTableFilters(props) {
         icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {
           size: 16
         }),
-        children: "Clear"
+        children: (0, import_t.t)("Clear")
       })]
     });
   }
@@ -157,7 +157,7 @@ function DataTableFilters(props) {
           fontSize: "$4",
           fontWeight: "600",
           id: "filters-heading",
-          children: "Filters"
+          children: (0, import_t.t)("Filters")
         }), showFilterCount && filters.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           backgroundColor: "$accentBackground",
           paddingHorizontal: "$2",
@@ -172,8 +172,12 @@ function DataTableFilters(props) {
         })]
       }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         ...{
-          tag: "fieldset"
+          render: "fieldset"
         },
+        borderWidth: 0,
+        margin: 0,
+        padding: 0,
+        minWidth: 0,
         alignItems: "center",
         gap: "$2",
         "aria-label": "Filter management actions",
@@ -192,7 +196,7 @@ function DataTableFilters(props) {
               "aria-label": "Add new filter",
               "aria-expanded": showFilterBuilder,
               "aria-haspopup": "dialog",
-              children: "Add Filter"
+              children: (0, import_t.t)("Add Filter")
             })
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
             ...knobProps.borderRadius,
@@ -233,7 +237,7 @@ function DataTableFilters(props) {
             size: 16
           }),
           "aria-label": "Clear all filters",
-          children: "Clear All"
+          children: (0, import_t.t)("Clear All")
         })]
       })]
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* Active Filters */
@@ -241,7 +245,7 @@ function DataTableFilters(props) {
       maxHeight: 200,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
         ...{
-          tag: "ul"
+          render: "ul"
         },
         gap: "$2",
         padding: 0,
@@ -264,7 +268,7 @@ function DataTableFilters(props) {
       })
     }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
       ...{
-        tag: "output"
+        render: "output"
       },
       padding: "$4",
       alignItems: "center",
@@ -272,7 +276,7 @@ function DataTableFilters(props) {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
         fontSize: "$3",
         color: "$color10",
-        children: "No filters applied"
+        children: (0, import_t.t)("No filters applied")
       })
     })]
   });
@@ -358,7 +362,7 @@ function FilterBuilder(param) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         gap: "$2",
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          placeholder: "Min value",
+          placeholder: (0, import_t.t)("Min value"),
           value: filterValues[0] || "",
           onChangeText: function onChangeText(text) {
             var newValues = [...filterValues];
@@ -366,7 +370,7 @@ function FilterBuilder(param) {
             setFilterValues(newValues);
           }
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-          placeholder: "Max value",
+          placeholder: (0, import_t.t)("Max value"),
           value: filterValues[1] || "",
           onChangeText: function onChangeText(text) {
             var newValues = [...filterValues];
@@ -418,7 +422,7 @@ function FilterBuilder(param) {
         });
       }
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-        placeholder: "Enter values separated by commas",
+        placeholder: (0, import_t.t)("Enter values separated by commas"),
         value: filterValues.join(", "),
         onChangeText: function onChangeText(text) {
           setFilterValues(text.split(",").map(function (v) {
@@ -429,15 +433,15 @@ function FilterBuilder(param) {
     }
     if (selectedColumn.type === "date") {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-        label: "Value",
-        placeholder: "YYYY-MM-DD",
+        label: (0, import_t.t)("Value"),
+        placeholder: (0, import_t.t)("YYYY-MM-DD"),
         value: filterValue,
         onChangeText: setFilterValue
       });
     }
     if (selectedColumn.type === "boolean") {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-        label: "Value",
+        label: (0, import_t.t)("Value"),
         value: filterValue,
         onValueChange: function onValueChange(v) {
           if (typeof v === "string") {
@@ -446,17 +450,17 @@ function FilterBuilder(param) {
         },
         options: [{
           value: "true",
-          label: "True"
+          label: (0, import_t.t)("True")
         }, {
           value: "false",
-          label: "False"
+          label: (0, import_t.t)("False")
         }],
-        placeholder: "Select value"
+        placeholder: (0, import_t.t)("Select value")
       });
     }
     if (selectedColumn.options) {
       return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-        label: "Value",
+        label: (0, import_t.t)("Value"),
         value: filterValue,
         onValueChange: function onValueChange(v) {
           if (typeof v === "string") {
@@ -469,12 +473,12 @@ function FilterBuilder(param) {
             label: option.label
           };
         }),
-        placeholder: "Select value"
+        placeholder: (0, import_t.t)("Select value")
       });
     }
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-      label: "Value",
-      placeholder: "Enter value",
+      label: (0, import_t.t)("Value"),
+      placeholder: (0, import_t.t)("Enter value"),
       value: filterValue,
       onChangeText: setFilterValue,
       ...(selectedColumn.type === "number" && {
@@ -489,10 +493,10 @@ function FilterBuilder(param) {
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: "$4",
       fontWeight: "600",
-      children: "Add Filter"
+      children: (0, import_t.t)("Add Filter")
     }), /* Column Selection */
     /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-      label: "Column",
+      label: (0, import_t.t)("Column"),
       value: selectedColumnId,
       onValueChange: function onValueChange(v) {
         if (typeof v === "string") {
@@ -500,10 +504,10 @@ function FilterBuilder(param) {
         }
       },
       options: columnOptions,
-      placeholder: "Select column"
+      placeholder: (0, import_t.t)("Select column")
     }), /* Operator Selection */
     selectedColumnId && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Select, {
-      label: "Condition",
+      label: (0, import_t.t)("Condition"),
       value: selectedOperator,
       onValueChange: function onValueChange(v) {
         if (typeof v === "string") {
@@ -520,12 +524,12 @@ function FilterBuilder(param) {
         size: knobProps.sizeToken,
         variant: "outlined",
         onPress: onCancel,
-        children: "Cancel"
+        children: (0, import_t.t)("Cancel")
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
         size: knobProps.sizeToken,
         onPress: handleAddFilter,
         disabled: !selectedColumnId || !selectedOperator,
-        children: "Add Filter"
+        children: (0, import_t.t)("Add Filter")
       })]
     })]
   });
@@ -546,7 +550,7 @@ function ActiveFilter(param) {
   });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
     ...{
-      tag: "li"
+      render: "li"
     },
     alignItems: "center",
     justifyContent: "space-between",
@@ -638,6 +642,7 @@ function getOperatorLabel(operator) {
     isAnyOf: "Is any of",
     isNoneOf: "Is none of"
   };
-  return labels[operator] || operator;
+  var label = labels[operator];
+  return label ? (0, import_t.t)(label) : operator;
 }
 //# sourceMappingURL=index.native.js.map