@kopexa/filter 0.0.2

package/dist/filter-i18n.d.ts

@@ -0,0 +1,20 @@
+import { FilterOperator } from './filter-types.js';
+import 'react';
+
+/**
+ * i18n configuration for the Filter component
+ */
+interface FilterI18nConfig {
+    addFilter: string;
+    clearAll: string;
+    noFields: string;
+    selectValue: string;
+    enterValue: string;
+    operators: Record<FilterOperator, string>;
+}
+/**
+ * Default English translations
+ */
+declare const DEFAULT_I18N: FilterI18nConfig;
+
+export { DEFAULT_I18N, type FilterI18nConfig };

package/dist/filter-i18n.js

@@ -0,0 +1,52 @@
+"use client";
+"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);
+
+// src/filter-i18n.ts
+var filter_i18n_exports = {};
+__export(filter_i18n_exports, {
+  DEFAULT_I18N: () => DEFAULT_I18N
+});
+module.exports = __toCommonJS(filter_i18n_exports);
+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"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_I18N
+});

package/dist/filter-i18n.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  DEFAULT_I18N
+} from "./chunk-3WNAREG6.mjs";
+export {
+  DEFAULT_I18N
+};

package/dist/filter-menu.d.mts

@@ -0,0 +1,65 @@
+import { FilterFieldType, FilterOption, FilterOperator } from './filter-types.mjs';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FilterMenuProps {
+    /** Children (FilterGroup, FilterItem components) */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * FilterMenu renders both:
+ * 1. A hidden container where FilterItems register themselves (always mounted)
+ * 2. The actual dropdown content with menu items based on registered fields
+ */
+declare function FilterMenu(props: FilterMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace FilterMenu {
+    var displayName: string;
+}
+interface FilterGroupProps {
+    /** Group label */
+    label?: string;
+    /** Children (FilterItem components) */
+    children?: ReactNode;
+}
+declare function FilterGroup(props: FilterGroupProps): react_jsx_runtime.JSX.Element;
+declare namespace FilterGroup {
+    var displayName: string;
+}
+interface FilterItemProps {
+    /** Field ID (must be unique) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Icon */
+    icon?: ReactNode;
+    /** Field type */
+    type: FilterFieldType;
+    /** Options for select/multiselect */
+    options?: FilterOption[];
+    /** Custom operators */
+    operators?: FilterOperator[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Min value (for number) */
+    min?: number;
+    /** Max value (for number) */
+    max?: number;
+    /** Step value (for number) */
+    step?: number;
+    /** Enable search (for select) */
+    searchable?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+declare function FilterItem(props: FilterItemProps): null;
+declare namespace FilterItem {
+    var displayName: string;
+}
+declare function FilterMenuSeparator(): react_jsx_runtime.JSX.Element;
+declare namespace FilterMenuSeparator {
+    var displayName: string;
+}
+
+export { FilterGroup, type FilterGroupProps, FilterItem, type FilterItemProps, FilterMenu, type FilterMenuProps, FilterMenuSeparator };

package/dist/filter-menu.d.ts

@@ -0,0 +1,65 @@
+import { FilterFieldType, FilterOption, FilterOperator } from './filter-types.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FilterMenuProps {
+    /** Children (FilterGroup, FilterItem components) */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * FilterMenu renders both:
+ * 1. A hidden container where FilterItems register themselves (always mounted)
+ * 2. The actual dropdown content with menu items based on registered fields
+ */
+declare function FilterMenu(props: FilterMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace FilterMenu {
+    var displayName: string;
+}
+interface FilterGroupProps {
+    /** Group label */
+    label?: string;
+    /** Children (FilterItem components) */
+    children?: ReactNode;
+}
+declare function FilterGroup(props: FilterGroupProps): react_jsx_runtime.JSX.Element;
+declare namespace FilterGroup {
+    var displayName: string;
+}
+interface FilterItemProps {
+    /** Field ID (must be unique) */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Icon */
+    icon?: ReactNode;
+    /** Field type */
+    type: FilterFieldType;
+    /** Options for select/multiselect */
+    options?: FilterOption[];
+    /** Custom operators */
+    operators?: FilterOperator[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Min value (for number) */
+    min?: number;
+    /** Max value (for number) */
+    max?: number;
+    /** Step value (for number) */
+    step?: number;
+    /** Enable search (for select) */
+    searchable?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+declare function FilterItem(props: FilterItemProps): null;
+declare namespace FilterItem {
+    var displayName: string;
+}
+declare function FilterMenuSeparator(): react_jsx_runtime.JSX.Element;
+declare namespace FilterMenuSeparator {
+    var displayName: string;
+}
+
+export { FilterGroup, type FilterGroupProps, FilterItem, type FilterItemProps, FilterMenu, type FilterMenuProps, FilterMenuSeparator };

package/dist/filter-menu.js

@@ -0,0 +1,169 @@
+"use client";
+"use strict";
+"use client";
+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);
+
+// src/filter-menu.tsx
+var filter_menu_exports = {};
+__export(filter_menu_exports, {
+  FilterGroup: () => FilterGroup,
+  FilterItem: () => FilterItem,
+  FilterMenu: () => FilterMenu,
+  FilterMenuSeparator: () => FilterMenuSeparator
+});
+module.exports = __toCommonJS(filter_menu_exports);
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_react = 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-menu.tsx
+var import_jsx_runtime = 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_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "none" }, "aria-hidden": "true", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_dropdown_menu.DropdownMenu.Content,
+      {
+        "data-slot": "filter-menu",
+        className: (0, import_shared_utils.cn)("min-w-[220px]", className),
+        align: "start",
+        children: fields.size === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+          groupLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.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_runtime.jsxs)(
+              import_dropdown_menu.DropdownMenu.Item,
+              {
+                "data-slot": "filter-item",
+                disabled: isDisabled,
+                onSelect: () => addFilter(field.id),
+                children: [
+                  field.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.menuItemIcon(), children: field.icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(FilterGroupProvider, { label, children });
+}
+FilterGroup.displayName = "FilterGroup";
+var FilterGroupContext = (0, import_react.createContext)(void 0);
+function FilterGroupProvider({
+  label,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)(import_dropdown_menu.DropdownMenu.Separator, { "data-slot": "filter-menu-separator" });
+}
+FilterMenuSeparator.displayName = "FilterMenuSeparator";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FilterGroup,
+  FilterItem,
+  FilterMenu,
+  FilterMenuSeparator
+});

package/dist/filter-menu.mjs

@@ -0,0 +1,15 @@
+"use client";
+"use client";
+import {
+  FilterGroup,
+  FilterItem,
+  FilterMenu,
+  FilterMenuSeparator
+} from "./chunk-TBHYZZSX.mjs";
+import "./chunk-I3Z2T4N2.mjs";
+export {
+  FilterGroup,
+  FilterItem,
+  FilterMenu,
+  FilterMenuSeparator
+};

package/dist/filter-trigger.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DropdownMenu } from '@kopexa/dropdown-menu';
+import { ComponentProps, ReactNode } from 'react';
+
+interface FilterTriggerProps extends Omit<ComponentProps<typeof DropdownMenu.Trigger>, "asChild"> {
+    /** Custom icon */
+    icon?: ReactNode;
+}
+declare function FilterTrigger(props: FilterTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace FilterTrigger {
+    var displayName: string;
+}
+
+export { FilterTrigger, type FilterTriggerProps };

package/dist/filter-trigger.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DropdownMenu } from '@kopexa/dropdown-menu';
+import { ComponentProps, ReactNode } from 'react';
+
+interface FilterTriggerProps extends Omit<ComponentProps<typeof DropdownMenu.Trigger>, "asChild"> {
+    /** Custom icon */
+    icon?: ReactNode;
+}
+declare function FilterTrigger(props: FilterTriggerProps): react_jsx_runtime.JSX.Element;
+declare namespace FilterTrigger {
+    var displayName: string;
+}
+
+export { FilterTrigger, type FilterTriggerProps };

package/dist/filter-trigger.js

@@ -0,0 +1,170 @@
+"use client";
+"use strict";
+"use client";
+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);
+
+// src/filter-trigger.tsx
+var filter_trigger_exports = {};
+__export(filter_trigger_exports, {
+  FilterTrigger: () => FilterTrigger
+});
+module.exports = __toCommonJS(filter_trigger_exports);
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_i18n2 = require("@kopexa/i18n");
+var import_icons = require("@kopexa/icons");
+var import_shared_utils = require("@kopexa/shared-utils");
+
+// 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/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-trigger.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FilterTrigger(props) {
+  const { className, children, icon, ...rest } = props;
+  const { styles } = useFilterContext();
+  const t = (0, import_i18n2.useSafeIntl)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_dropdown_menu.DropdownMenu.Trigger,
+    {
+      "data-slot": "filter-trigger",
+      className: (0, import_shared_utils.cn)(styles.trigger(), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.triggerIcon(), children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.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 = {
+  FilterTrigger
+});

package/dist/filter-trigger.mjs

@@ -0,0 +1,10 @@
+"use client";
+"use client";
+import {
+  FilterTrigger
+} from "./chunk-EF4VI36D.mjs";
+import "./chunk-URDCG5NI.mjs";
+import "./chunk-I3Z2T4N2.mjs";
+export {
+  FilterTrigger
+};

package/dist/filter-types.d.mts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+/**
+ * Filter field types supported by the component
+ */
+type FilterFieldType = "text" | "number" | "select" | "multiselect" | "date" | "daterange" | "boolean";
+/**
+ * Filter operators for comparing values
+ */
+type FilterOperator = "equals" | "not_equals" | "contains" | "not_contains" | "starts_with" | "ends_with" | "gt" | "lt" | "gte" | "lte" | "between" | "is_empty" | "is_not_empty";
+/**
+ * Option for select/multiselect fields
+ */
+interface FilterOption {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+/**
+ * An active filter value
+ */
+interface FilterValue {
+    id: string;
+    fieldId: string;
+    operator: FilterOperator;
+    value: unknown;
+}
+/**
+ * Configuration for a filter field
+ */
+interface FilterFieldConfig {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    type: FilterFieldType;
+    operators?: FilterOperator[];
+    options?: FilterOption[];
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    searchable?: boolean;
+    group?: string;
+    disabled?: boolean;
+}
+/**
+ * Default operators per field type
+ */
+declare const DEFAULT_OPERATORS: Record<FilterFieldType, FilterOperator[]>;
+/**
+ * Get default operator for a field type
+ */
+declare function getDefaultOperator(type: FilterFieldType): FilterOperator;
+/**
+ * Generate a unique filter ID
+ */
+declare function generateFilterId(): string;
+
+export { DEFAULT_OPERATORS, type FilterFieldConfig, type FilterFieldType, type FilterOperator, type FilterOption, type FilterValue, generateFilterId, getDefaultOperator };