@kopexa/filter 0.0.2

package/dist/index.js

@@ -0,0 +1,909 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Filter: () => Filter,
+  FilterActive: () => FilterActive,
+  FilterGroup: () => FilterGroup,
+  FilterItem: () => FilterItem,
+  FilterMenu: () => FilterMenu,
+  FilterMenuSeparator: () => FilterMenuSeparator,
+  FilterTrigger: () => FilterTrigger,
+  FilterValueEditor: () => FilterValueEditor,
+  filterMessages: () => messages,
+  useFilterContext: () => useFilterContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/filter.tsx
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var React = __toESM(require("react"));
+
+// src/filter-context.tsx
+var import_react_utils = require("@kopexa/react-utils");
+var [FilterProvider, useFilterContext] = (0, import_react_utils.createContext)({
+  name: "FilterContext",
+  strict: true,
+  errorMessage: "useFilterContext must be used within a Filter component. Make sure to wrap your FilterMenu, FilterTrigger, etc. inside a <Filter> component."
+});
+
+// src/filter-i18n.ts
+var DEFAULT_I18N = {
+  addFilter: "Add Filter",
+  clearAll: "Clear all",
+  noFields: "No filter options available",
+  selectValue: "Select value...",
+  enterValue: "Enter value...",
+  operators: {
+    equals: "is",
+    not_equals: "is not",
+    contains: "contains",
+    not_contains: "does not contain",
+    starts_with: "starts with",
+    ends_with: "ends with",
+    gt: "greater than",
+    lt: "less than",
+    gte: "greater or equal",
+    lte: "less or equal",
+    between: "between",
+    is_empty: "is empty",
+    is_not_empty: "is not empty"
+  }
+};
+
+// src/filter-types.ts
+var DEFAULT_OPERATORS = {
+  text: [
+    "equals",
+    "not_equals",
+    "contains",
+    "not_contains",
+    "starts_with",
+    "ends_with",
+    "is_empty",
+    "is_not_empty"
+  ],
+  number: ["equals", "not_equals", "gt", "lt", "gte", "lte", "between"],
+  select: ["equals", "not_equals", "is_empty", "is_not_empty"],
+  multiselect: ["equals", "not_equals", "is_empty", "is_not_empty"],
+  date: ["equals", "not_equals", "gt", "lt", "gte", "lte", "between"],
+  daterange: ["between"],
+  boolean: ["equals"]
+};
+function getDefaultOperator(type) {
+  switch (type) {
+    case "text":
+      return "contains";
+    case "number":
+    case "date":
+    case "select":
+    case "multiselect":
+      return "equals";
+    case "daterange":
+      return "between";
+    case "boolean":
+      return "equals";
+    default:
+      return "equals";
+  }
+}
+
+// src/filter.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Filter(props) {
+  const {
+    value = [],
+    onChange,
+    allowMultiple = true,
+    size = "md",
+    variant = "outline",
+    i18n,
+    className,
+    children,
+    ...rest
+  } = props;
+  const mergedI18n = React.useMemo(
+    () => ({
+      ...DEFAULT_I18N,
+      ...i18n,
+      operators: {
+        ...DEFAULT_I18N.operators,
+        ...i18n == null ? void 0 : i18n.operators
+      }
+    }),
+    [i18n]
+  );
+  const styles = React.useMemo(
+    () => (0, import_theme.filter)({ size, variant }),
+    [size, variant]
+  );
+  const [fields, setFields] = React.useState(
+    /* @__PURE__ */ new Map()
+  );
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [editingFilterId, setEditingFilterId] = React.useState(
+    null
+  );
+  const registerField = React.useCallback((field) => {
+    setFields((prev) => {
+      const next = new Map(prev);
+      next.set(field.id, field);
+      return next;
+    });
+  }, []);
+  const unregisterField = React.useCallback((fieldId) => {
+    setFields((prev) => {
+      const next = new Map(prev);
+      next.delete(fieldId);
+      return next;
+    });
+  }, []);
+  const updateFilter = React.useCallback(
+    (filterId, updates) => {
+      const newFilters = value.map((filter) => {
+        if (filter.id === filterId) {
+          const updated = { ...filter, ...updates };
+          if (updates.operator === "is_empty" || updates.operator === "is_not_empty") {
+            updated.value = void 0;
+          }
+          return updated;
+        }
+        return filter;
+      });
+      onChange == null ? void 0 : onChange(newFilters);
+    },
+    [value, onChange]
+  );
+  const removeFilter = React.useCallback(
+    (filterId) => {
+      onChange == null ? void 0 : onChange(value.filter((f) => f.id !== filterId));
+    },
+    [value, onChange]
+  );
+  const clearFilters = React.useCallback(() => {
+    onChange == null ? void 0 : onChange([]);
+  }, [onChange]);
+  const addFilter = React.useCallback(
+    (fieldKey) => {
+      const field = fields.get(fieldKey);
+      if (!field) return;
+      const defaultOperator = getDefaultOperator(field.type);
+      const newFilter = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
+        fieldId: fieldKey,
+        operator: defaultOperator,
+        value: void 0
+      };
+      onChange == null ? void 0 : onChange([...value, newFilter]);
+    },
+    [fields, value, onChange]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      // State
+      value,
+      fields,
+      allowMultiple,
+      // Style
+      styles,
+      size: size != null ? size : "md",
+      variant: variant != null ? variant : "outline",
+      i18n: mergedI18n,
+      // Actions
+      addFilter,
+      updateFilter,
+      removeFilter,
+      clearFilters,
+      // Field registration
+      registerField,
+      unregisterField,
+      // Menu state
+      menuOpen,
+      setMenuOpen,
+      // Editor state
+      editingFilterId,
+      setEditingFilterId
+    }),
+    [
+      value,
+      fields,
+      allowMultiple,
+      styles,
+      size,
+      variant,
+      mergedI18n,
+      addFilter,
+      updateFilter,
+      removeFilter,
+      clearFilters,
+      registerField,
+      unregisterField,
+      menuOpen,
+      editingFilterId
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Root, { open: menuOpen, onOpenChange: setMenuOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "data-slot": "filter",
+      className: (0, import_shared_utils.cn)(styles.root(), className),
+      ...rest,
+      children
+    }
+  ) }) });
+}
+Filter.displayName = "Filter";
+
+// src/filter-active.tsx
+var import_i18n3 = require("@kopexa/i18n");
+var import_icons = require("@kopexa/icons");
+var import_popover = require("@kopexa/popover");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+
+// src/filter-value-editor.tsx
+var import_checkbox = require("@kopexa/checkbox");
+var import_i18n2 = require("@kopexa/i18n");
+var import_input = require("@kopexa/input");
+var import_select = require("@kopexa/select");
+
+// src/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  add_filter: {
+    id: "filter.add_filter",
+    defaultMessage: "Add Filter",
+    description: "Button text for adding a new filter"
+  },
+  clear_all: {
+    id: "filter.clear_all",
+    defaultMessage: "Clear all",
+    description: "Button text for clearing all filters"
+  },
+  no_fields: {
+    id: "filter.no_fields",
+    defaultMessage: "No filter options available",
+    description: "Message when no filter fields are configured"
+  },
+  apply: {
+    id: "filter.apply",
+    defaultMessage: "Apply",
+    description: "Button text for applying a filter value"
+  },
+  cancel: {
+    id: "filter.cancel",
+    defaultMessage: "Cancel",
+    description: "Button text for canceling filter editing"
+  },
+  select_value: {
+    id: "filter.select_value",
+    defaultMessage: "Select value...",
+    description: "Placeholder for value selection"
+  },
+  enter_value: {
+    id: "filter.enter_value",
+    defaultMessage: "Enter value...",
+    description: "Placeholder for value input"
+  },
+  // Operators
+  op_equals: {
+    id: "filter.operator.equals",
+    defaultMessage: "is",
+    description: "Operator: equals"
+  },
+  op_not_equals: {
+    id: "filter.operator.not_equals",
+    defaultMessage: "is not",
+    description: "Operator: not equals"
+  },
+  op_contains: {
+    id: "filter.operator.contains",
+    defaultMessage: "contains",
+    description: "Operator: contains"
+  },
+  op_not_contains: {
+    id: "filter.operator.not_contains",
+    defaultMessage: "does not contain",
+    description: "Operator: does not contain"
+  },
+  op_starts_with: {
+    id: "filter.operator.starts_with",
+    defaultMessage: "starts with",
+    description: "Operator: starts with"
+  },
+  op_ends_with: {
+    id: "filter.operator.ends_with",
+    defaultMessage: "ends with",
+    description: "Operator: ends with"
+  },
+  op_gt: {
+    id: "filter.operator.gt",
+    defaultMessage: "greater than",
+    description: "Operator: greater than"
+  },
+  op_lt: {
+    id: "filter.operator.lt",
+    defaultMessage: "less than",
+    description: "Operator: less than"
+  },
+  op_gte: {
+    id: "filter.operator.gte",
+    defaultMessage: "greater or equal",
+    description: "Operator: greater than or equal"
+  },
+  op_lte: {
+    id: "filter.operator.lte",
+    defaultMessage: "less or equal",
+    description: "Operator: less than or equal"
+  },
+  op_between: {
+    id: "filter.operator.between",
+    defaultMessage: "between",
+    description: "Operator: between"
+  },
+  op_is_empty: {
+    id: "filter.operator.is_empty",
+    defaultMessage: "is empty",
+    description: "Operator: is empty"
+  },
+  op_is_not_empty: {
+    id: "filter.operator.is_not_empty",
+    defaultMessage: "is not empty",
+    description: "Operator: is not empty"
+  }
+});
+
+// src/filter-value-editor.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function FilterValueEditor({ filter, field }) {
+  var _a;
+  const { styles, updateFilter, setEditingFilterId } = useFilterContext();
+  const t = (0, import_i18n2.useSafeIntl)();
+  const operators = (_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type];
+  const handleOperatorChange = (newOperator) => {
+    updateFilter(filter.id, { operator: newOperator });
+    if (newOperator === "is_empty" || newOperator === "is_not_empty") {
+      setEditingFilterId(null);
+    }
+  };
+  const handleValueChange = (newValue) => {
+    updateFilter(filter.id, { value: newValue });
+  };
+  const handleSelectValue = (newValue) => {
+    updateFilter(filter.id, { value: newValue });
+    setEditingFilterId(null);
+  };
+  const getOperatorLabel = (op) => {
+    const key = `op_${op}`;
+    return messages[key] ? t.formatMessage(messages[key]) : op;
+  };
+  const needsValue = filter.operator !== "is_empty" && filter.operator !== "is_not_empty";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-slot": "filter-value-editor", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.editorHeader(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.editorTitle(), children: field.label }) }),
+    operators.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.editorOperator(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_select.Select,
+      {
+        value: filter.operator,
+        onValueChange: (val) => handleOperatorChange(val),
+        size: "sm",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Trigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Value, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Content, { children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Item, { value: op, children: getOperatorLabel(op) }, op)) })
+        ]
+      }
+    ) }),
+    needsValue && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: styles.editorInput(), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      ValueInput,
+      {
+        field,
+        operator: filter.operator,
+        value: filter.value,
+        onChange: handleValueChange,
+        onSelect: handleSelectValue
+      }
+    ) })
+  ] });
+}
+function ValueInput({
+  field,
+  operator,
+  value,
+  onChange,
+  onSelect
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const t = (0, import_i18n2.useSafeIntl)();
+  switch (field.type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_input.Input,
+        {
+          value: String(value != null ? value : ""),
+          onChange: (e) => onChange(e.target.value),
+          placeholder: (_a = field.placeholder) != null ? _a : t.formatMessage(messages.enter_value),
+          size: "sm",
+          autoFocus: true
+        }
+      );
+    case "number":
+      if (operator === "between") {
+        const [min, max] = Array.isArray(value) ? value : [void 0, void 0];
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_input.Input,
+            {
+              type: "number",
+              value: min != null ? min : "",
+              onChange: (e) => onChange([
+                e.target.value ? Number(e.target.value) : void 0,
+                max
+              ]),
+              placeholder: "Min",
+              min: field.min,
+              max: field.max,
+              step: field.step,
+              size: "sm",
+              autoFocus: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_input.Input,
+            {
+              type: "number",
+              value: max != null ? max : "",
+              onChange: (e) => onChange([
+                min,
+                e.target.value ? Number(e.target.value) : void 0
+              ]),
+              placeholder: "Max",
+              min: field.min,
+              max: field.max,
+              step: field.step,
+              size: "sm"
+            }
+          )
+        ] });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_input.Input,
+        {
+          type: "number",
+          value: value !== void 0 && value !== null ? String(value) : "",
+          onChange: (e) => onChange(e.target.value ? Number(e.target.value) : void 0),
+          placeholder: (_b = field.placeholder) != null ? _b : t.formatMessage(messages.enter_value),
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          size: "sm",
+          autoFocus: true
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_select.Select, { value: String(value != null ? value : ""), onValueChange: onSelect, size: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Trigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_select.Select.Value,
+          {
+            placeholder: (_c = field.placeholder) != null ? _c : t.formatMessage(messages.select_value)
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_select.Select.Content, { children: (_d = field.options) == null ? void 0 : _d.map((option) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_select.Select.Item,
+          {
+            value: option.value,
+            disabled: option.disabled,
+            children: [
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-2 size-4", children: option.icon }),
+              option.label
+            ]
+          },
+          option.value
+        )) })
+      ] });
+    case "multiselect": {
+      const selectedValues = Array.isArray(value) ? value : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-2 max-h-[200px] overflow-auto", children: (_e = field.options) == null ? void 0 : _e.map((option) => (
+        // biome-ignore lint/a11y/noLabelWithoutControl: Checkbox is a custom form control inside the label
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "label",
+          {
+            className: "flex items-center gap-2 cursor-pointer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_checkbox.Checkbox,
+                {
+                  checked: selectedValues.includes(option.value),
+                  onCheckedChange: (checked) => {
+                    if (checked) {
+                      onChange([...selectedValues, option.value]);
+                    } else {
+                      onChange(selectedValues.filter((v) => v !== option.value));
+                    }
+                  },
+                  disabled: option.disabled
+                }
+              ),
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-4", children: option.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm", children: option.label })
+            ]
+          },
+          option.value
+        )
+      )) });
+    }
+    case "boolean":
+      return (
+        // biome-ignore lint/a11y/noLabelWithoutControl: Checkbox is a custom form control inside the label
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_checkbox.Checkbox,
+            {
+              checked: Boolean(value),
+              onCheckedChange: (checked) => onSelect(Boolean(checked))
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm", children: field.label })
+        ] })
+      );
+    case "date":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_input.Input,
+        {
+          type: "date",
+          value: value instanceof Date ? value.toISOString().split("T")[0] : String(value != null ? value : ""),
+          onChange: (e) => onChange(e.target.value ? new Date(e.target.value) : void 0),
+          size: "sm"
+        }
+      );
+    case "daterange": {
+      const [start, end] = Array.isArray(value) ? value : [void 0, void 0];
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_input.Input,
+          {
+            type: "date",
+            value: start instanceof Date ? start.toISOString().split("T")[0] : String(start != null ? start : ""),
+            onChange: (e) => onChange([
+              e.target.value ? new Date(e.target.value) : void 0,
+              end
+            ]),
+            size: "sm"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted-foreground", children: "-" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_input.Input,
+          {
+            type: "date",
+            value: end instanceof Date ? end.toISOString().split("T")[0] : String(end != null ? end : ""),
+            onChange: (e) => onChange([
+              start,
+              e.target.value ? new Date(e.target.value) : void 0
+            ]),
+            size: "sm"
+          }
+        )
+      ] });
+    }
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_input.Input,
+        {
+          value: String(value != null ? value : ""),
+          onChange: (e) => onChange(e.target.value),
+          placeholder: (_f = field.placeholder) != null ? _f : t.formatMessage(messages.enter_value),
+          size: "sm"
+        }
+      );
+  }
+}
+
+// src/filter-active.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FilterActive(props) {
+  const { showClearAll = true, className, ...rest } = props;
+  const { value, styles, clearFilters } = useFilterContext();
+  const t = (0, import_i18n3.useSafeIntl)();
+  if (value.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      "data-slot": "filter-active",
+      className: (0, import_shared_utils2.cn)(styles.active(), className),
+      ...rest,
+      children: [
+        value.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FilterField, { filter }, filter.id)),
+        showClearAll && value.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            className: styles.clearAll(),
+            onClick: clearFilters,
+            children: t.formatMessage(messages.clear_all)
+          }
+        )
+      ]
+    }
+  );
+}
+FilterActive.displayName = "FilterActive";
+function FilterField({ filter }) {
+  const { fields, styles, removeFilter, editingFilterId, setEditingFilterId } = useFilterContext();
+  const t = (0, import_i18n3.useSafeIntl)();
+  const field = fields.get(filter.fieldId);
+  if (!field) return null;
+  const isEditing = editingFilterId === filter.id;
+  const operatorKey = `op_${filter.operator}`;
+  const operatorLabel = messages[operatorKey] ? t.formatMessage(messages[operatorKey]) : filter.operator;
+  const valueDisplay = getValueDisplay(filter, field);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_popover.Popover.Root,
+    {
+      open: isEditing,
+      onOpenChange: (open) => setEditingFilterId(open ? filter.id : null),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_popover.Popover.Trigger, { "data-slot": "filter-field", className: styles.field(), children: [
+          field.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.menuItemIcon(), children: field.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldLabel(), children: field.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldOperator(), children: operatorLabel }),
+          valueDisplay && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldValue(), children: valueDisplay }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              className: styles.fieldRemove(),
+              onClick: (e) => {
+                e.stopPropagation();
+                removeFilter(filter.id);
+              },
+              "aria-label": "Remove filter",
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.CloseIcon, { className: "size-3" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_popover.Popover.Content,
+          {
+            "data-slot": "filter-editor",
+            className: styles.editor(),
+            align: "start",
+            showArrow: false,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FilterValueEditor, { filter, field })
+          }
+        )
+      ]
+    }
+  );
+}
+function getValueDisplay(filter, field) {
+  var _a, _b, _c, _d;
+  const { value, operator } = filter;
+  if (operator === "is_empty" || operator === "is_not_empty") {
+    return null;
+  }
+  if (value === void 0 || value === null || value === "") {
+    return "...";
+  }
+  if (field.type === "boolean") {
+    return value ? "Yes" : "No";
+  }
+  if (field.type === "select" && field.options) {
+    const option = field.options.find((o) => o.value === value);
+    return (_a = option == null ? void 0 : option.label) != null ? _a : String(value);
+  }
+  if (field.type === "multiselect" && Array.isArray(value)) {
+    if (value.length === 0) return "...";
+    if (value.length === 1 && field.options) {
+      const option = field.options.find((o) => o.value === value[0]);
+      return (_b = option == null ? void 0 : option.label) != null ? _b : String(value[0]);
+    }
+    return `${value.length} selected`;
+  }
+  if (field.type === "date" && value instanceof Date) {
+    return value.toLocaleDateString();
+  }
+  if (field.type === "daterange" && Array.isArray(value)) {
+    const [start, end] = value;
+    const startStr = start instanceof Date ? start.toLocaleDateString() : "...";
+    const endStr = end instanceof Date ? end.toLocaleDateString() : "...";
+    return `${startStr} - ${endStr}`;
+  }
+  if (operator === "between" && Array.isArray(value)) {
+    return `${(_c = value[0]) != null ? _c : "..."} - ${(_d = value[1]) != null ? _d : "..."}`;
+  }
+  return String(value);
+}
+
+// src/filter-menu.tsx
+var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_react = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function FilterMenu(props) {
+  var _a;
+  const { children, className } = props;
+  const { fields, styles, addFilter, allowMultiple, value } = useFilterContext();
+  const fieldGroups = /* @__PURE__ */ new Map();
+  for (const [id, field] of fields) {
+    const group = field.group;
+    if (!fieldGroups.has(group)) {
+      fieldGroups.set(group, /* @__PURE__ */ new Map());
+    }
+    (_a = fieldGroups.get(group)) == null ? void 0 : _a.set(id, field);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "none" }, "aria-hidden": "true", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_dropdown_menu2.DropdownMenu.Content,
+      {
+        "data-slot": "filter-menu",
+        className: (0, import_shared_utils3.cn)("min-w-[220px]", className),
+        align: "start",
+        children: fields.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: "Loading..." }) : Array.from(fieldGroups.entries()).map(([groupLabel, groupFields]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_dropdown_menu2.DropdownMenu.Group, { children: [
+          groupLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dropdown_menu2.DropdownMenu.Label, { children: groupLabel }),
+          Array.from(groupFields.values()).map((field) => {
+            const hasFilter = value.some((f) => f.fieldId === field.id);
+            const isDisabled = field.disabled || !allowMultiple && hasFilter;
+            return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              import_dropdown_menu2.DropdownMenu.Item,
+              {
+                "data-slot": "filter-item",
+                disabled: isDisabled,
+                onSelect: () => addFilter(field.id),
+                children: [
+                  field.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: styles.menuItemIcon(), children: field.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: field.label })
+                ]
+              },
+              field.id
+            );
+          })
+        ] }, groupLabel != null ? groupLabel : "ungrouped"))
+      }
+    )
+  ] });
+}
+FilterMenu.displayName = "FilterMenu";
+function FilterGroup(props) {
+  const { label, children } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterGroupProvider, { label, children });
+}
+FilterGroup.displayName = "FilterGroup";
+var FilterGroupContext = (0, import_react.createContext)(void 0);
+function FilterGroupProvider({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FilterGroupContext.Provider, { value: label, children });
+}
+function useFilterGroup() {
+  return (0, import_react.useContext)(FilterGroupContext);
+}
+function FilterItem(props) {
+  const {
+    id,
+    label,
+    icon,
+    type,
+    options,
+    operators,
+    placeholder,
+    min,
+    max,
+    step,
+    searchable,
+    disabled
+  } = props;
+  const { registerField, unregisterField } = useFilterContext();
+  const group = useFilterGroup();
+  (0, import_react.useLayoutEffect)(() => {
+    registerField({
+      id,
+      label,
+      icon,
+      type,
+      options,
+      operators,
+      placeholder,
+      min,
+      max,
+      step,
+      searchable,
+      group,
+      disabled
+    });
+    return () => unregisterField(id);
+  }, [
+    id,
+    label,
+    icon,
+    type,
+    options,
+    operators,
+    placeholder,
+    min,
+    max,
+    step,
+    searchable,
+    group,
+    disabled,
+    registerField,
+    unregisterField
+  ]);
+  return null;
+}
+FilterItem.displayName = "FilterItem";
+function FilterMenuSeparator() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_dropdown_menu2.DropdownMenu.Separator, { "data-slot": "filter-menu-separator" });
+}
+FilterMenuSeparator.displayName = "FilterMenuSeparator";
+
+// src/filter-trigger.tsx
+var import_dropdown_menu3 = require("@kopexa/dropdown-menu");
+var import_i18n4 = require("@kopexa/i18n");
+var import_icons2 = require("@kopexa/icons");
+var import_shared_utils4 = require("@kopexa/shared-utils");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function FilterTrigger(props) {
+  const { className, children, icon, ...rest } = props;
+  const { styles } = useFilterContext();
+  const t = (0, import_i18n4.useSafeIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_dropdown_menu3.DropdownMenu.Trigger,
+    {
+      "data-slot": "filter-trigger",
+      className: (0, import_shared_utils4.cn)(styles.trigger(), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: styles.triggerIcon(), children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_icons2.PlusIcon, { className: "size-4" }) }),
+        children != null ? children : t.formatMessage(messages.add_filter)
+      ]
+    }
+  );
+}
+FilterTrigger.displayName = "FilterTrigger";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Filter,
+  FilterActive,
+  FilterGroup,
+  FilterItem,
+  FilterMenu,
+  FilterMenuSeparator,
+  FilterTrigger,
+  FilterValueEditor,
+  filterMessages,
+  useFilterContext
+});