@kopexa/filter 0.0.25 → 0.0.26

package/dist/index.js

@@ -33,12 +33,15 @@ var index_exports = {};
 __export(index_exports, {
   Filter: () => Filter,
   FilterActive: () => FilterActive,
+  FilterBar: () => FilterBar,
   FilterGroup: () => FilterGroup,
   FilterItem: () => FilterItem,
   FilterMenu: () => FilterMenu,
   FilterMenuSeparator: () => FilterMenuSeparator,
   FilterTrigger: () => FilterTrigger,
   FilterValueEditor: () => FilterValueEditor,
+  SearchFilterBar: () => SearchFilterBar,
+  filterBarMessages: () => filterBarMessages,
   filterMessages: () => messages,
   useFilterContext: () => useFilterContext
 });
@@ -381,6 +384,58 @@ var messages = (0, import_i18n.defineMessages)({
     id: "filter.operator.is_not_empty",
     defaultMessage: "is not empty",
     description: "Operator: is not empty"
+  },
+  // Additional UI strings
+  loading: {
+    id: "filter.loading",
+    defaultMessage: "Loading...",
+    description: "Loading state text"
+  },
+  boolean_true: {
+    id: "filter.boolean_true",
+    defaultMessage: "Yes",
+    description: "Boolean true value display"
+  },
+  boolean_false: {
+    id: "filter.boolean_false",
+    defaultMessage: "No",
+    description: "Boolean false value display"
+  },
+  range_min: {
+    id: "filter.range_min",
+    defaultMessage: "Min",
+    description: "Minimum value placeholder for range inputs"
+  },
+  range_max: {
+    id: "filter.range_max",
+    defaultMessage: "Max",
+    description: "Maximum value placeholder for range inputs"
+  },
+  // Accessibility labels
+  remove_filter: {
+    id: "filter.remove_filter",
+    defaultMessage: "Remove {field} filter",
+    description: "Accessibility label for remove filter button"
+  },
+  operator_label: {
+    id: "filter.operator_label",
+    defaultMessage: "{field} operator",
+    description: "Accessibility label for operator select"
+  },
+  value_label: {
+    id: "filter.value_label",
+    defaultMessage: "{field} value",
+    description: "Accessibility label for value input"
+  },
+  value_min_label: {
+    id: "filter.value_min_label",
+    defaultMessage: "{field} minimum value",
+    description: "Accessibility label for minimum value input"
+  },
+  value_max_label: {
+    id: "filter.value_max_label",
+    defaultMessage: "{field} maximum value",
+    description: "Accessibility label for maximum value input"
   }
 });
 
@@ -522,27 +577,29 @@ function ValueInput({
             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)(
+        /* @__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.jsx)(
           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 }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex items-center gap-2", children: [
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "size-4 flex-shrink-0", 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) => (
+      const selectedValues = Array.isArray(value) ? value.filter(
+        (v) => typeof v === "string" && v.length > 1
+      ) : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "space-y-1 max-h-[200px] overflow-auto p-1", 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",
+            className: "flex items-center gap-2 cursor-pointer hover:bg-muted/50 rounded-md px-2 py-1.5",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 import_checkbox.Checkbox,
@@ -555,11 +612,12 @@ function ValueInput({
                       onChange(selectedValues.filter((v) => v !== option.value));
                     }
                   },
-                  disabled: option.disabled
+                  disabled: option.disabled,
+                  className: "flex-shrink-0 border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary [&_svg]:text-primary-foreground"
                 }
               ),
-              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.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm truncate", children: option.label })
             ]
           },
           option.value
@@ -671,6 +729,7 @@ function FilterField({ filter }) {
   const field = fields.get(filter.fieldId);
   if (!field) return null;
   const availableOperators = (_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type];
+  const hasSingleOperator = availableOperators.length === 1;
   const getOperatorLabel = (op) => {
     const opKey = `op_${op}`;
     return messages[opKey] ? t.formatMessage(messages[opKey]) : op;
@@ -695,20 +754,29 @@ function FilterField({ filter }) {
       field.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "size-4 flex-shrink-0", children: field.icon }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: field.label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: styles.fieldOperator(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldOperator(), children: hasSingleOperator ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "span",
+      {
+        className: styles.fieldOperatorSelect(),
+        style: { width: operatorWidth },
+        children: currentOperatorLabel
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "select",
         {
           className: styles.fieldOperatorSelect(),
           value: filter.operator,
           onChange: handleOperatorChange,
-          title: currentOperatorLabel,
+          "aria-label": t.formatMessage(messages.operator_label, {
+            field: field.label
+          }),
           style: { width: operatorWidth },
           children: availableOperators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: op, children: getOperatorLabel(op) }, op))
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronDownIcon, { className: styles.fieldOperatorIcon() })
-    ] }),
+    ] }) }),
     useInlineInput && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(InlineValueInput, { filter, field }),
     useInlineSwitch && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldValue(), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_switch.Switch,
@@ -728,7 +796,9 @@ function FilterField({ filter }) {
         type: "button",
         className: styles.fieldRemove(),
         onClick: () => removeFilter(filter.id),
-        "aria-label": "Remove filter",
+        "aria-label": t.formatMessage(messages.remove_filter, {
+          field: field.label
+        }),
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.CloseIcon, { className: "size-3" })
       }
     )
@@ -757,6 +827,8 @@ function InlineValueInput({
   const placeholder = (_a = field.placeholder) != null ? _a : t.formatMessage(messages.enter_value);
   if (filter.operator === "between") {
     const [min, max] = Array.isArray(filter.value) ? filter.value : [void 0, void 0];
+    const minPlaceholder = t.formatMessage(messages.range_min);
+    const maxPlaceholder = t.formatMessage(messages.range_max);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: (0, import_shared_utils2.cn)(styles.fieldValue(), "gap-1"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "input",
@@ -768,8 +840,11 @@ function InlineValueInput({
             const val = e.target.value ? Number(e.target.value) : void 0;
             updateFilter(filter.id, { value: [val, max] });
           },
-          placeholder: "Min",
-          style: { width: getInputWidth(min, "Min", 3) },
+          placeholder: minPlaceholder,
+          "aria-label": t.formatMessage(messages.value_min_label, {
+            field: field.label
+          }),
+          style: { width: getInputWidth(min, minPlaceholder, 3) },
           min: field.min,
           max: field.max,
           step: field.step
@@ -786,8 +861,11 @@ function InlineValueInput({
             const val = e.target.value ? Number(e.target.value) : void 0;
             updateFilter(filter.id, { value: [min, val] });
           },
-          placeholder: "Max",
-          style: { width: getInputWidth(max, "Max", 3) },
+          placeholder: maxPlaceholder,
+          "aria-label": t.formatMessage(messages.value_max_label, {
+            field: field.label
+          }),
+          style: { width: getInputWidth(max, maxPlaceholder, 3) },
           min: field.min,
           max: field.max,
           step: field.step
@@ -803,6 +881,9 @@ function InlineValueInput({
       value: filter.value !== void 0 && filter.value !== null ? String(filter.value) : "",
       onChange: handleChange,
       placeholder,
+      "aria-label": t.formatMessage(messages.value_label, {
+        field: field.label
+      }),
       style: { width: getInputWidth(filter.value, placeholder, 6) },
       min: field.min,
       max: field.max,
@@ -815,7 +896,8 @@ function PopoverValueEditor({
   field
 }) {
   const { styles, updateFilter } = useFilterContext();
-  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field);
+  const t = (0, import_i18n3.useSafeIntl)();
+  const valueDisplay = field.renderValue ? field.renderValue({ filter, field }) : getValueDisplay(filter, field, t);
   const hasValue = filter.value !== void 0 && filter.value !== null && filter.value !== "" && !(Array.isArray(filter.value) && filter.value.length === 0);
   const handleCustomChange = (value) => {
     updateFilter(filter.id, { value });
@@ -828,7 +910,7 @@ function PopoverValueEditor({
         render: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {}),
         nativeButton: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : "Select..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: styles.fieldValueText(), children: hasValue ? valueDisplay : t.formatMessage(messages.select_value) }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ChevronDownIcon, { className: styles.fieldValueIcon() })
         ]
       }
@@ -855,7 +937,7 @@ function PopoverValueEditor({
     )
   ] });
 }
-function getValueDisplay(filter, field) {
+function getValueDisplay(filter, field, t) {
   var _a, _b, _c, _d;
   const { value, operator } = filter;
   if (operator === "is_empty" || operator === "is_not_empty") {
@@ -865,19 +947,20 @@ function getValueDisplay(filter, field) {
     return null;
   }
   if (field.type === "boolean") {
-    return value ? "Yes" : "No";
+    return value ? t.formatMessage(messages.boolean_true) : t.formatMessage(messages.boolean_false);
   }
   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 null;
-    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]);
+  if (field.type === "multiselect") {
+    const values = Array.isArray(value) ? value.filter((v) => typeof v === "string" && v.length > 1) : [];
+    if (values.length === 0) return null;
+    if (values.length === 1 && field.options) {
+      const option = field.options.find((o) => o.value === values[0]);
+      return (_b = option == null ? void 0 : option.label) != null ? _b : String(values[0]);
     }
-    return `${value.length} selected`;
+    return `${values.length} selected`;
   }
   if (field.type === "date" && value instanceof Date) {
     return value.toLocaleDateString();
@@ -896,6 +979,7 @@ function getValueDisplay(filter, field) {
 
 // src/filter-menu.tsx
 var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
+var import_i18n4 = require("@kopexa/i18n");
 var import_shared_utils3 = require("@kopexa/shared-utils");
 var import_react = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -903,6 +987,7 @@ function FilterMenu(props) {
   var _a;
   const { children, className } = props;
   const { fields, styles, addFilter, allowMultiple, value } = useFilterContext();
+  const t = (0, import_i18n4.useSafeIntl)();
   const fieldGroups = /* @__PURE__ */ new Map();
   for (const [id, field] of fields) {
     const group = field.group;
@@ -919,7 +1004,7 @@ function FilterMenu(props) {
         "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: [
+        children: fields.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-2 py-3 text-sm text-muted-foreground text-center", children: t.formatMessage(messages.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);
@@ -1026,14 +1111,14 @@ FilterMenuSeparator.displayName = "FilterMenuSeparator";
 
 // src/filter-trigger.tsx
 var import_dropdown_menu3 = require("@kopexa/dropdown-menu");
-var import_i18n4 = require("@kopexa/i18n");
+var import_i18n5 = 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)();
+  const t = (0, import_i18n5.useSafeIntl)();
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     import_dropdown_menu3.DropdownMenu.Trigger,
     {
@@ -1048,16 +1133,1163 @@ function FilterTrigger(props) {
   );
 }
 FilterTrigger.displayName = "FilterTrigger";
+
+// src/filter-bar.tsx
+var import_i18n7 = require("@kopexa/i18n");
+var import_shared_utils6 = require("@kopexa/shared-utils");
+var import_use_controllable_state = require("@kopexa/use-controllable-state");
+var import_react3 = require("react");
+
+// src/filter-bar-internal.tsx
+var import_button = require("@kopexa/button");
+var import_checkbox2 = require("@kopexa/checkbox");
+var import_command = require("@kopexa/command");
+var import_dropdown_menu4 = require("@kopexa/dropdown-menu");
+var import_icons3 = require("@kopexa/icons");
+var import_input2 = require("@kopexa/input");
+var import_popover2 = require("@kopexa/popover");
+var import_shared_utils5 = require("@kopexa/shared-utils");
+var import_react2 = require("react");
+
+// src/filter-bar-types.ts
+var DEFAULT_FILTER_BAR_OPERATORS = {
+  select: ["equals", "not_equals", "is_empty", "is_not_empty"],
+  multiselect: ["equals", "not_equals", "is_empty", "is_not_empty"],
+  text: [
+    "equals",
+    "not_equals",
+    "contains",
+    "not_contains",
+    "starts_with",
+    "ends_with",
+    "is_empty",
+    "is_not_empty"
+  ],
+  number: [
+    "equals",
+    "not_equals",
+    "gt",
+    "lt",
+    "gte",
+    "lte",
+    "is_empty",
+    "is_not_empty"
+  ],
+  custom: ["equals", "not_equals"]
+};
+
+// src/filter-bar-internal.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function AddFilterDropdown(props) {
+  const { fieldGroups, isFieldAvailable, onAddFilter, i18n, disabled } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dropdown_menu4.DropdownMenu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu4.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_button.Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "rounded-full border-dashed",
+        disabled,
+        startContent: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.PlusIcon, { className: "size-4" }),
+        children: i18n.addFilter
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu4.DropdownMenu.Content, { align: "start", className: "min-w-[200px]", children: Array.from(fieldGroups.entries()).map(([groupLabel, groupFields]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dropdown_menu4.DropdownMenu.Group, { children: [
+      groupLabel && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu4.DropdownMenu.Label, { children: groupLabel }),
+      groupFields.map((field) => {
+        const available = isFieldAvailable(field.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_dropdown_menu4.DropdownMenu.Item,
+          {
+            disabled: field.disabled || !available,
+            onSelect: () => onAddFilter(field.id),
+            children: [
+              field.icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-4 text-muted-foreground mr-2", children: field.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: field.label })
+            ]
+          },
+          field.id
+        );
+      })
+    ] }, groupLabel != null ? groupLabel : "ungrouped")) })
+  ] });
+}
+function FilterPill(props) {
+  var _a;
+  const {
+    filter,
+    field,
+    i18n,
+    onUpdate,
+    onRemove,
+    autoOpen,
+    onAutoOpenComplete,
+    disabled
+  } = props;
+  const [open, setOpen] = (0, import_react2.useState)(autoOpen != null ? autoOpen : false);
+  const operators = (_a = field.operators) != null ? _a : DEFAULT_FILTER_BAR_OPERATORS[field.type];
+  const isEmptyOperator = filter.operator === "is_empty" || filter.operator === "is_not_empty";
+  const hasCustomRenderer = !!field.customRenderer;
+  const useInlineInput = !hasCustomRenderer && (field.type === "text" || field.type === "number");
+  const usePopover = !useInlineInput && !isEmptyOperator;
+  const handleOpenChange = (0, import_react2.useCallback)(
+    (isOpen) => {
+      setOpen(isOpen);
+      if (!isOpen && autoOpen) {
+        onAutoOpenComplete == null ? void 0 : onAutoOpenComplete();
+      }
+    },
+    [autoOpen, onAutoOpenComplete]
+  );
+  const valueDisplay = (0, import_react2.useMemo)(() => {
+    var _a2, _b;
+    if (isEmptyOperator) return null;
+    if (filter.value === null || filter.value === "") return null;
+    if (field.type === "select" && field.options) {
+      const option = field.options.find((o) => o.value === filter.value);
+      return (_a2 = option == null ? void 0 : option.label) != null ? _a2 : String(filter.value);
+    }
+    if (field.type === "multiselect") {
+      const values = Array.isArray(filter.value) ? filter.value.filter(
+        (v) => typeof v === "string" && v.length > 1
+      ) : [];
+      if (values.length === 0) return null;
+      if (values.length === 1 && field.options) {
+        const option = field.options.find((o) => o.value === values[0]);
+        return (_b = option == null ? void 0 : option.label) != null ? _b : values[0];
+      }
+      return `${values.length} selected`;
+    }
+    return String(filter.value);
+  }, [filter.value, field, isEmptyOperator]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "div",
+    {
+      "data-slot": "filter-pill",
+      className: (0, import_shared_utils5.cn)(
+        "group inline-flex items-center rounded-full overflow-hidden",
+        "border border-border bg-background",
+        "transition-all hover:shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "span",
+          {
+            className: (0, import_shared_utils5.cn)(
+              "bg-muted text-foreground font-medium text-xs",
+              "flex items-center gap-1.5 flex-shrink-0",
+              "rounded-l-full px-3 py-1.5"
+            ),
+            children: [
+              field.icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "size-4 flex-shrink-0", children: field.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: field.label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          OperatorDropdown,
+          {
+            operator: filter.operator,
+            operators,
+            i18n,
+            onChange: (op) => {
+              const newUpdates = { operator: op };
+              if (op === "is_empty" || op === "is_not_empty") {
+                newUpdates.value = null;
+              }
+              onUpdate(newUpdates);
+            },
+            disabled
+          }
+        ),
+        useInlineInput && !isEmptyOperator && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          InlineValueInput2,
+          {
+            filter,
+            field,
+            i18n,
+            onUpdate,
+            disabled
+          }
+        ),
+        usePopover && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_popover2.Popover.Root, { open, onOpenChange: handleOpenChange, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            import_popover2.Popover.Trigger,
+            {
+              className: (0, import_shared_utils5.cn)(
+                "bg-background text-foreground text-xs",
+                "flex items-center gap-1 px-2.5 py-1.5",
+                "cursor-pointer hover:bg-muted/30"
+              ),
+              nativeButton: false,
+              render: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", {}),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate max-w-[150px]", children: valueDisplay != null ? valueDisplay : i18n.selectValue }),
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.ChevronDownIcon, { className: "size-3.5 opacity-60 flex-shrink-0" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_popover2.Popover.Content,
+            {
+              "data-slot": "filter-editor",
+              className: "p-0 w-[280px]",
+              align: "start",
+              showArrow: false,
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                ValueEditor,
+                {
+                  filter,
+                  field,
+                  i18n,
+                  onUpdate,
+                  onClose: () => handleOpenChange(false)
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            className: (0, import_shared_utils5.cn)(
+              "size-5 rounded-full flex items-center justify-center flex-shrink-0",
+              "hover:bg-destructive/10 hover:text-destructive",
+              "transition-colors cursor-pointer mr-1"
+            ),
+            disabled,
+            "aria-label": `Remove ${field.label} filter`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.CloseIcon, { className: "size-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+function OperatorDropdown(props) {
+  const { operator, operators, i18n, onChange, disabled } = props;
+  const hasSingleOperator = operators.length === 1;
+  const currentLabel = i18n.operators[operator];
+  if (hasSingleOperator) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: (0, import_shared_utils5.cn)(
+          "bg-primary text-primary-foreground",
+          "flex items-center px-3 py-0.5",
+          "rounded-full shadow-sm mx-1 my-0.5",
+          "text-xs font-normal"
+        ),
+        children: currentLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_dropdown_menu4.DropdownMenu.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu4.DropdownMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_shared_utils5.cn)(
+          "bg-primary text-primary-foreground",
+          "flex items-center gap-1 px-3 py-0.5",
+          "rounded-full shadow-sm mx-1 my-0.5",
+          "text-xs font-normal cursor-pointer",
+          "hover:bg-primary/90 transition-colors"
+        ),
+        children: [
+          currentLabel,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.ChevronDownIcon, { className: "size-3 opacity-70" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_dropdown_menu4.DropdownMenu.Content, { align: "start", className: "min-w-[140px]", children: operators.map((op) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_dropdown_menu4.DropdownMenu.Item,
+      {
+        onSelect: () => onChange(op),
+        className: "gap-2",
+        children: [
+          op === operator && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.CheckIcon, { className: "size-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: op !== operator ? "pl-6" : "", children: i18n.operators[op] })
+        ]
+      },
+      op
+    )) })
+  ] });
+}
+function getInputWidth2(value, placeholder, minWidth = 4) {
+  const displayValue = value !== void 0 && value !== null && value !== "" ? String(value) : placeholder;
+  const width = Math.max(displayValue.length + 1, minWidth);
+  return `${width}ch`;
+}
+function InlineValueInput2(props) {
+  var _a;
+  const { filter, field, i18n, onUpdate, disabled } = props;
+  const placeholder = (_a = field.placeholder) != null ? _a : i18n.enterValue;
+  const handleChange = (e) => {
+    const val = e.target.value;
+    if (field.type === "number") {
+      onUpdate({ value: val ? Number(val) : null });
+    } else {
+      onUpdate({ value: val });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      className: (0, import_shared_utils5.cn)(
+        "bg-background text-foreground text-xs",
+        "flex items-center gap-1 px-2.5 py-1.5"
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "input",
+        {
+          type: field.type === "number" ? "number" : "text",
+          className: (0, import_shared_utils5.cn)(
+            "bg-transparent border-none outline-none",
+            "placeholder:text-muted-foreground",
+            "text-xs"
+          ),
+          value: filter.value !== void 0 && filter.value !== null ? String(filter.value) : "",
+          onChange: handleChange,
+          placeholder,
+          "aria-label": `${field.label} value`,
+          style: { width: getInputWidth2(filter.value, placeholder, 6) },
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          disabled
+        }
+      )
+    }
+  );
+}
+function ValueEditor(props) {
+  var _a, _b, _c, _d;
+  const { filter, field, i18n, onUpdate, onClose } = props;
+  if (field.customRenderer) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-3", children: field.customRenderer({
+      field,
+      value: filter.value,
+      onChange: (value) => onUpdate({ value })
+    }) });
+  }
+  if (field.type === "select" && field.options) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      SelectEditor,
+      {
+        options: field.options,
+        value: filter.value,
+        onChange: (value) => {
+          onUpdate({ value });
+          onClose();
+        },
+        i18n
+      }
+    );
+  }
+  if (field.type === "multiselect" && field.options) {
+    const currentValue = Array.isArray(filter.value) ? filter.value.filter(
+      (v) => typeof v === "string" && v.length > 1
+    ) : [];
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      MultiselectEditor,
+      {
+        options: field.options,
+        value: currentValue,
+        onChange: (value) => onUpdate({ value }),
+        i18n
+      }
+    );
+  }
+  if (field.type === "text") {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      TextEditor,
+      {
+        value: (_a = filter.value) != null ? _a : "",
+        onChange: (value) => onUpdate({ value }),
+        placeholder: (_b = field.placeholder) != null ? _b : i18n.enterValue,
+        validation: field.validation,
+        onClose
+      }
+    );
+  }
+  if (field.type === "number") {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      NumberEditor,
+      {
+        value: (_c = filter.value) != null ? _c : null,
+        onChange: (value) => onUpdate({ value }),
+        placeholder: (_d = field.placeholder) != null ? _d : i18n.enterValue,
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        onClose
+      }
+    );
+  }
+  return null;
+}
+function SelectEditor(props) {
+  const { options = [], value, onChange, i18n } = props;
+  const [search, setSearch] = (0, import_react2.useState)("");
+  const filteredOptions = (0, import_react2.useMemo)(() => {
+    if (!search) return options;
+    const lower = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(lower) || o.value.toLowerCase().includes(lower)
+    );
+  }, [options, search]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_command.Command.Root, { shouldFilter: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_command.Command.Input,
+      {
+        placeholder: i18n.searchPlaceholder,
+        value: search,
+        onValueChange: setSearch
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_command.Command.List, { className: "max-h-[300px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_command.Command.Empty, { children: i18n.noResults }),
+      filteredOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        import_command.Command.Item,
+        {
+          value: option.value,
+          onSelect: () => onChange(option.value),
+          className: "flex items-center gap-2 min-w-0",
+          children: [
+            option.icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate flex-1 min-w-0", children: option.label }),
+            value === option.value && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_icons3.CheckIcon, { className: "size-4 flex-shrink-0" })
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] });
+}
+function MultiselectEditor(props) {
+  const { options = [], value, onChange, i18n } = props;
+  const [search, setSearch] = (0, import_react2.useState)("");
+  const filteredOptions = (0, import_react2.useMemo)(() => {
+    if (!search) return options;
+    const lower = search.toLowerCase();
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(lower) || o.value.toLowerCase().includes(lower)
+    );
+  }, [options, search]);
+  const toggleOption = (0, import_react2.useCallback)(
+    (optionValue) => {
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_command.Command.Root, { shouldFilter: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_command.Command.Input,
+      {
+        placeholder: i18n.searchPlaceholder,
+        value: search,
+        onValueChange: setSearch
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_command.Command.List, { className: "max-h-[300px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_command.Command.Empty, { children: i18n.noResults }),
+      filteredOptions.map((option) => {
+        const isSelected = value.includes(option.value);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          import_command.Command.Item,
+          {
+            value: option.value,
+            onSelect: () => toggleOption(option.value),
+            className: "flex items-center gap-2 min-w-0",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_checkbox2.Checkbox,
+                {
+                  checked: isSelected,
+                  className: "flex-shrink-0 border-border bg-background data-[state=checked]:bg-primary data-[state=checked]:border-primary [&_svg]:text-primary-foreground"
+                }
+              ),
+              option.icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-shrink-0 [&>*]:size-5", children: option.icon }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "truncate flex-1 min-w-0", children: option.label })
+            ]
+          },
+          option.value
+        );
+      })
+    ] })
+  ] });
+}
+function TextEditor(props) {
+  const {
+    value: initialValue,
+    onChange,
+    placeholder,
+    validation,
+    onClose
+  } = props;
+  const [localValue, setLocalValue] = (0, import_react2.useState)(initialValue);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const inputRef = (0, import_react2.useRef)(null);
+  const validate = (0, import_react2.useCallback)(
+    (val) => {
+      var _a;
+      if (!validation) return true;
+      if (validation.pattern) {
+        const regex = new RegExp(validation.pattern);
+        if (!regex.test(val)) {
+          setError((_a = validation.message) != null ? _a : "Invalid format");
+          return false;
+        }
+      }
+      if (validation.validate) {
+        const result = validation.validate(val);
+        if (result !== true) {
+          setError(typeof result === "string" ? result : "Invalid value");
+          return false;
+        }
+      }
+      setError(null);
+      return true;
+    },
+    [validation]
+  );
+  const handleSubmit = (0, import_react2.useCallback)(() => {
+    if (validate(localValue)) {
+      onChange(localValue);
+      onClose();
+    }
+  }, [localValue, validate, onChange, onClose]);
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [handleSubmit, onClose]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-3 space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_input2.Input,
+      {
+        ref: inputRef,
+        type: "text",
+        value: localValue,
+        onChange: (e) => {
+          setLocalValue(e.target.value);
+          setError(null);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder,
+        className: "w-full",
+        autoFocus: true
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { variant: "ghost", size: "sm", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { size: "sm", onClick: handleSubmit, children: "Apply" })
+    ] })
+  ] });
+}
+function NumberEditor(props) {
+  const {
+    value: initialValue,
+    onChange,
+    placeholder,
+    min,
+    max,
+    step,
+    onClose
+  } = props;
+  const [localValue, setLocalValue] = (0, import_react2.useState)(
+    initialValue !== null ? String(initialValue) : ""
+  );
+  const inputRef = (0, import_react2.useRef)(null);
+  const handleSubmit = (0, import_react2.useCallback)(() => {
+    const numValue = localValue === "" ? null : Number(localValue);
+    onChange(numValue);
+    onClose();
+  }, [localValue, onChange, onClose]);
+  const handleKeyDown = (0, import_react2.useCallback)(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSubmit();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    },
+    [handleSubmit, onClose]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "p-3 space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_input2.Input,
+      {
+        ref: inputRef,
+        type: "number",
+        value: localValue,
+        onChange: (e) => setLocalValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        placeholder,
+        min,
+        max,
+        step,
+        className: "w-full",
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { variant: "ghost", size: "sm", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_button.Button, { size: "sm", onClick: handleSubmit, children: "Apply" })
+    ] })
+  ] });
+}
+
+// src/filter-bar-messages.ts
+var import_i18n6 = require("@kopexa/i18n");
+var filterBarMessages = (0, import_i18n6.defineMessages)({
+  add_filter: {
+    id: "filter-bar.add_filter",
+    defaultMessage: "Add Filter",
+    description: "Button text for adding a new filter"
+  },
+  clear_all: {
+    id: "filter-bar.clear_all",
+    defaultMessage: "Clear all",
+    description: "Button text for clearing all filters"
+  },
+  no_results: {
+    id: "filter-bar.no_results",
+    defaultMessage: "No results found",
+    description: "Message when search returns no results"
+  },
+  search_placeholder: {
+    id: "filter-bar.search_placeholder",
+    defaultMessage: "Search...",
+    description: "Placeholder for search input"
+  },
+  select_value: {
+    id: "filter-bar.select_value",
+    defaultMessage: "Select value...",
+    description: "Placeholder for value selection"
+  },
+  enter_value: {
+    id: "filter-bar.enter_value",
+    defaultMessage: "Enter value...",
+    description: "Placeholder for value input"
+  },
+  apply: {
+    id: "filter-bar.apply",
+    defaultMessage: "Apply",
+    description: "Button text for applying a filter value"
+  },
+  cancel: {
+    id: "filter-bar.cancel",
+    defaultMessage: "Cancel",
+    description: "Button text for canceling"
+  },
+  // Operators
+  op_equals: {
+    id: "filter-bar.operator.equals",
+    defaultMessage: "is",
+    description: "Operator: equals"
+  },
+  op_not_equals: {
+    id: "filter-bar.operator.not_equals",
+    defaultMessage: "is not",
+    description: "Operator: not equals"
+  },
+  op_contains: {
+    id: "filter-bar.operator.contains",
+    defaultMessage: "contains",
+    description: "Operator: contains"
+  },
+  op_not_contains: {
+    id: "filter-bar.operator.not_contains",
+    defaultMessage: "does not contain",
+    description: "Operator: does not contain"
+  },
+  op_starts_with: {
+    id: "filter-bar.operator.starts_with",
+    defaultMessage: "starts with",
+    description: "Operator: starts with"
+  },
+  op_ends_with: {
+    id: "filter-bar.operator.ends_with",
+    defaultMessage: "ends with",
+    description: "Operator: ends with"
+  },
+  op_gt: {
+    id: "filter-bar.operator.gt",
+    defaultMessage: "greater than",
+    description: "Operator: greater than"
+  },
+  op_lt: {
+    id: "filter-bar.operator.lt",
+    defaultMessage: "less than",
+    description: "Operator: less than"
+  },
+  op_gte: {
+    id: "filter-bar.operator.gte",
+    defaultMessage: "greater or equal",
+    description: "Operator: greater than or equal"
+  },
+  op_lte: {
+    id: "filter-bar.operator.lte",
+    defaultMessage: "less or equal",
+    description: "Operator: less than or equal"
+  },
+  op_is_empty: {
+    id: "filter-bar.operator.is_empty",
+    defaultMessage: "is empty",
+    description: "Operator: is empty"
+  },
+  op_is_not_empty: {
+    id: "filter-bar.operator.is_not_empty",
+    defaultMessage: "is not empty",
+    description: "Operator: is not empty"
+  },
+  // Accessibility
+  remove_filter: {
+    id: "filter-bar.remove_filter",
+    defaultMessage: "Remove {field} filter",
+    description: "Accessibility label for remove filter button"
+  },
+  operator_label: {
+    id: "filter-bar.operator_label",
+    defaultMessage: "{field} operator",
+    description: "Accessibility label for operator dropdown"
+  },
+  value_label: {
+    id: "filter-bar.value_label",
+    defaultMessage: "{field} value",
+    description: "Accessibility label for value editor"
+  },
+  // Multiselect
+  selected_count: {
+    id: "filter-bar.selected_count",
+    defaultMessage: "{count} selected",
+    description: "Display text for multiselect with multiple selections"
+  }
+});
+
+// src/filter-bar.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function FilterBar(props) {
+  const {
+    fields,
+    value: valueProp,
+    defaultValue = [],
+    onChange,
+    i18n: i18nProp,
+    className,
+    allowMultiple = true,
+    disabled = false
+  } = props;
+  const t = (0, import_i18n7.useSafeIntl)();
+  const instanceId = (0, import_react3.useId)();
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: valueProp,
+    defaultValue,
+    onChange
+  });
+  const [sessionFilterId, setSessionFilterId] = (0, import_react3.useState)(null);
+  const i18n = (0, import_react3.useMemo)(() => {
+    const defaultI18n = {
+      addFilter: t.formatMessage(filterBarMessages.add_filter),
+      clearAll: t.formatMessage(filterBarMessages.clear_all),
+      noResults: t.formatMessage(filterBarMessages.no_results),
+      searchPlaceholder: t.formatMessage(filterBarMessages.search_placeholder),
+      selectValue: t.formatMessage(filterBarMessages.select_value),
+      enterValue: t.formatMessage(filterBarMessages.enter_value),
+      operators: {
+        equals: t.formatMessage(filterBarMessages.op_equals),
+        not_equals: t.formatMessage(filterBarMessages.op_not_equals),
+        contains: t.formatMessage(filterBarMessages.op_contains),
+        not_contains: t.formatMessage(filterBarMessages.op_not_contains),
+        starts_with: t.formatMessage(filterBarMessages.op_starts_with),
+        ends_with: t.formatMessage(filterBarMessages.op_ends_with),
+        gt: t.formatMessage(filterBarMessages.op_gt),
+        lt: t.formatMessage(filterBarMessages.op_lt),
+        gte: t.formatMessage(filterBarMessages.op_gte),
+        lte: t.formatMessage(filterBarMessages.op_lte),
+        is_empty: t.formatMessage(filterBarMessages.op_is_empty),
+        is_not_empty: t.formatMessage(filterBarMessages.op_is_not_empty)
+      }
+    };
+    return {
+      ...defaultI18n,
+      ...i18nProp,
+      operators: {
+        ...defaultI18n.operators,
+        ...i18nProp == null ? void 0 : i18nProp.operators
+      }
+    };
+  }, [t, i18nProp]);
+  const fieldGroups = (0, import_react3.useMemo)(() => {
+    var _a;
+    const groups = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      const group = field.group;
+      if (!groups.has(group)) {
+        groups.set(group, []);
+      }
+      (_a = groups.get(group)) == null ? void 0 : _a.push(field);
+    }
+    return groups;
+  }, [fields]);
+  const addFilter = (0, import_react3.useCallback)(
+    (fieldId) => {
+      var _a;
+      const field = fields.find((f) => f.id === fieldId);
+      if (!field) return;
+      if (!allowMultiple && value.some((f) => f.fieldId === fieldId)) {
+        return;
+      }
+      const newFilter = {
+        id: `${instanceId}-${fieldId}-${Date.now()}`,
+        fieldId,
+        operator: (_a = field.defaultOperator) != null ? _a : "equals",
+        value: field.type === "multiselect" ? [] : null
+      };
+      setValue([...value, newFilter]);
+      setSessionFilterId(newFilter.id);
+    },
+    [fields, value, setValue, allowMultiple, instanceId]
+  );
+  const updateFilter = (0, import_react3.useCallback)(
+    (filterId, updates) => {
+      setValue(
+        value.map((f) => f.id === filterId ? { ...f, ...updates } : f)
+      );
+    },
+    [value, setValue]
+  );
+  const removeFilter = (0, import_react3.useCallback)(
+    (filterId) => {
+      setValue(value.filter((f) => f.id !== filterId));
+      if (sessionFilterId === filterId) {
+        setSessionFilterId(null);
+      }
+    },
+    [value, setValue, sessionFilterId]
+  );
+  const clearFilters = (0, import_react3.useCallback)(() => {
+    setValue([]);
+    setSessionFilterId(null);
+  }, [setValue]);
+  const isFieldAvailable = (0, import_react3.useCallback)(
+    (fieldId) => {
+      if (allowMultiple) return true;
+      return !value.some((f) => f.fieldId === fieldId);
+    },
+    [value, allowMultiple]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      "data-slot": "filter-bar",
+      className: (0, import_shared_utils6.cn)("flex flex-wrap items-center gap-2", className),
+      children: [
+        value.map((filter) => {
+          const field = fields.find((f) => f.id === filter.fieldId);
+          if (!field) return null;
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            FilterPill,
+            {
+              filter,
+              field,
+              i18n,
+              onUpdate: (updates) => updateFilter(filter.id, updates),
+              onRemove: () => removeFilter(filter.id),
+              autoOpen: sessionFilterId === filter.id,
+              onAutoOpenComplete: () => setSessionFilterId(null),
+              disabled
+            },
+            filter.id
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AddFilterDropdown,
+          {
+            fieldGroups,
+            isFieldAvailable,
+            onAddFilter: addFilter,
+            i18n,
+            disabled
+          }
+        ),
+        value.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: clearFilters,
+            className: "text-xs text-muted-foreground hover:text-foreground cursor-pointer transition-colors underline-offset-2 hover:underline",
+            disabled,
+            children: i18n.clearAll
+          }
+        )
+      ]
+    }
+  );
+}
+FilterBar.displayName = "FilterBar";
+
+// src/search-filter-bar.tsx
+var import_i18n8 = require("@kopexa/i18n");
+var import_icons4 = require("@kopexa/icons");
+var import_shared_utils7 = require("@kopexa/shared-utils");
+var import_spinner = require("@kopexa/spinner");
+var import_use_controllable_state2 = require("@kopexa/use-controllable-state");
+var import_use_debounced_callback = require("@kopexa/use-debounced-callback");
+var import_react4 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function SearchFilterBar(props) {
+  const {
+    fields,
+    filters: filtersProp,
+    defaultFilters = [],
+    onFiltersChange,
+    search: searchProp,
+    defaultSearch = "",
+    onSearchChange,
+    onSearchValueChange,
+    searchDebounce = 300,
+    searchPlaceholder,
+    searchLoading = false,
+    i18n: i18nProp,
+    className,
+    allowMultiple = true,
+    disabled = false,
+    endContent
+  } = props;
+  const t = (0, import_i18n8.useSafeIntl)();
+  const instanceId = (0, import_react4.useId)();
+  const [filters, setFilters] = (0, import_use_controllable_state2.useControllableState)({
+    value: filtersProp,
+    defaultValue: defaultFilters,
+    onChange: onFiltersChange
+  });
+  const [search, setSearch] = (0, import_use_controllable_state2.useControllableState)({
+    value: searchProp,
+    defaultValue: defaultSearch,
+    onChange: onSearchChange
+  });
+  const [sessionFilterId, setSessionFilterId] = (0, import_react4.useState)(null);
+  const i18n = (0, import_react4.useMemo)(() => {
+    const defaultI18n = {
+      addFilter: t.formatMessage(filterBarMessages.add_filter),
+      clearAll: t.formatMessage(filterBarMessages.clear_all),
+      noResults: t.formatMessage(filterBarMessages.no_results),
+      searchPlaceholder: t.formatMessage(filterBarMessages.search_placeholder),
+      selectValue: t.formatMessage(filterBarMessages.select_value),
+      enterValue: t.formatMessage(filterBarMessages.enter_value),
+      operators: {
+        equals: t.formatMessage(filterBarMessages.op_equals),
+        not_equals: t.formatMessage(filterBarMessages.op_not_equals),
+        contains: t.formatMessage(filterBarMessages.op_contains),
+        not_contains: t.formatMessage(filterBarMessages.op_not_contains),
+        starts_with: t.formatMessage(filterBarMessages.op_starts_with),
+        ends_with: t.formatMessage(filterBarMessages.op_ends_with),
+        gt: t.formatMessage(filterBarMessages.op_gt),
+        lt: t.formatMessage(filterBarMessages.op_lt),
+        gte: t.formatMessage(filterBarMessages.op_gte),
+        lte: t.formatMessage(filterBarMessages.op_lte),
+        is_empty: t.formatMessage(filterBarMessages.op_is_empty),
+        is_not_empty: t.formatMessage(filterBarMessages.op_is_not_empty)
+      }
+    };
+    return {
+      ...defaultI18n,
+      ...i18nProp,
+      operators: {
+        ...defaultI18n.operators,
+        ...i18nProp == null ? void 0 : i18nProp.operators
+      }
+    };
+  }, [t, i18nProp]);
+  const fieldGroups = (0, import_react4.useMemo)(() => {
+    var _a;
+    const groups = /* @__PURE__ */ new Map();
+    for (const field of fields) {
+      const group = field.group;
+      if (!groups.has(group)) {
+        groups.set(group, []);
+      }
+      (_a = groups.get(group)) == null ? void 0 : _a.push(field);
+    }
+    return groups;
+  }, [fields]);
+  const addFilter = (0, import_react4.useCallback)(
+    (fieldId) => {
+      var _a;
+      const field = fields.find((f) => f.id === fieldId);
+      if (!field) return;
+      if (!allowMultiple && filters.some((f) => f.fieldId === fieldId)) {
+        return;
+      }
+      const newFilter = {
+        id: `${instanceId}-${fieldId}-${Date.now()}`,
+        fieldId,
+        operator: (_a = field.defaultOperator) != null ? _a : "equals",
+        value: field.type === "multiselect" ? [] : null
+      };
+      setFilters([...filters, newFilter]);
+      setSessionFilterId(newFilter.id);
+    },
+    [fields, filters, setFilters, allowMultiple, instanceId]
+  );
+  const updateFilter = (0, import_react4.useCallback)(
+    (filterId, updates) => {
+      setFilters(
+        filters.map((f) => f.id === filterId ? { ...f, ...updates } : f)
+      );
+    },
+    [filters, setFilters]
+  );
+  const removeFilter = (0, import_react4.useCallback)(
+    (filterId) => {
+      setFilters(filters.filter((f) => f.id !== filterId));
+      if (sessionFilterId === filterId) {
+        setSessionFilterId(null);
+      }
+    },
+    [filters, setFilters, sessionFilterId]
+  );
+  const clearFilters = (0, import_react4.useCallback)(() => {
+    setFilters([]);
+    setSessionFilterId(null);
+  }, [setFilters]);
+  const isFieldAvailable = (0, import_react4.useCallback)(
+    (fieldId) => {
+      if (allowMultiple) return true;
+      return !filters.some((f) => f.fieldId === fieldId);
+    },
+    [filters, allowMultiple]
+  );
+  const debouncedSearchCallback = (0, import_use_debounced_callback.useDebounceCallback)((value) => {
+    onSearchValueChange == null ? void 0 : onSearchValueChange(value);
+  }, searchDebounce);
+  const handleSearchChange = (0, import_react4.useCallback)(
+    (e) => {
+      const value = e.target.value;
+      setSearch(value);
+      if (onSearchValueChange) {
+        debouncedSearchCallback(value);
+      }
+    },
+    [setSearch, onSearchValueChange, debouncedSearchCallback]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      "data-slot": "search-filter-bar",
+      className: (0, import_shared_utils7.cn)("flex items-center gap-2 w-full", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: (0, import_shared_utils7.cn)(
+              "flex flex-1 flex-wrap items-center gap-2",
+              "border border-input rounded-lg",
+              "bg-background",
+              "px-3 py-2",
+              "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1",
+              "transition-shadow",
+              disabled && "opacity-50 pointer-events-none"
+            ),
+            children: [
+              filters.map((filter) => {
+                const field = fields.find((f) => f.id === filter.fieldId);
+                if (!field) return null;
+                return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  FilterPill,
+                  {
+                    filter,
+                    field,
+                    i18n,
+                    onUpdate: (updates) => updateFilter(filter.id, updates),
+                    onRemove: () => removeFilter(filter.id),
+                    autoOpen: sessionFilterId === filter.id,
+                    onAutoOpenComplete: () => setSessionFilterId(null),
+                    disabled
+                  },
+                  filter.id
+                );
+              }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                AddFilterDropdown,
+                {
+                  fieldGroups,
+                  isFieldAvailable,
+                  onAddFilter: addFilter,
+                  i18n,
+                  disabled
+                }
+              ),
+              filters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: clearFilters,
+                  className: "text-xs text-muted-foreground hover:text-foreground cursor-pointer transition-colors underline-offset-2 hover:underline",
+                  disabled,
+                  children: i18n.clearAll
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex flex-1 items-center gap-2 min-w-[120px]", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons4.SearchIcon, { className: "size-4 text-muted-foreground flex-shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: search,
+                    onChange: handleSearchChange,
+                    placeholder: searchPlaceholder != null ? searchPlaceholder : i18n.searchPlaceholder,
+                    disabled,
+                    className: (0, import_shared_utils7.cn)(
+                      "flex-1 bg-transparent border-none outline-none",
+                      "text-sm placeholder:text-muted-foreground",
+                      "min-w-0"
+                    )
+                  }
+                ),
+                searchLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_spinner.Spinner, { size: "xs", className: "flex-shrink-0" })
+              ] })
+            ]
+          }
+        ),
+        endContent
+      ]
+    }
+  );
+}
+SearchFilterBar.displayName = "SearchFilterBar";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Filter,
   FilterActive,
+  FilterBar,
   FilterGroup,
   FilterItem,
   FilterMenu,
   FilterMenuSeparator,
   FilterTrigger,
   FilterValueEditor,
+  SearchFilterBar,
+  filterBarMessages,
   filterMessages,
   useFilterContext
 });