From 26136e70f5f92e119f99a88869f0bd9f0e580a5a Mon Sep 17 00:00:00 2001
From: Maxime Princelle <maxime@princelle.org>
Date: Mon, 10 Nov 2025 16:37:18 +0100
Subject: [PATCH 1/3] feat: add Filters component

---
 docs/content/docs/2.components/filters.md     | 1061 +++++++++++++++++
 .../nuxt/app/composables/useNavigation.ts     |    1 +
 .../nuxt/app/pages/components/filters.vue     |  707 +++++++++++
 src/runtime/components/Filters.vue            |  267 +++++
 .../components/filters/AddFilterPopover.vue   |  709 +++++++++++
 .../filters/FilterContextProvider.vue         |   59 +
 .../components/filters/FilterDatePicker.vue   |   69 ++
 .../components/filters/FilterDateRange.vue    |   83 ++
 .../filters/FilterDateTimeRange.vue           |   91 ++
 src/runtime/components/filters/FilterItem.vue |   95 ++
 .../components/filters/FilterNumberRange.vue  |  101 ++
 .../filters/FilterOperatorDropdown.vue        |  105 ++
 .../components/filters/FilterTimeRange.vue    |   91 ++
 .../filters/FilterValueSelector.vue           |  443 +++++++
 .../filters/SelectOptionsPopover.vue          |  122 ++
 src/runtime/composables/useFilterContext.ts   |   53 +
 src/runtime/types/filter.ts                   |  204 ++++
 src/runtime/types/index.ts                    |    1 +
 src/runtime/utils/fields.ts                   |  137 +++
 src/runtime/utils/operators.ts                |  272 +++++
 src/runtime/utils/validation.ts               |  105 ++
 21 files changed, 4776 insertions(+)
 create mode 100644 docs/content/docs/2.components/filters.md
 create mode 100644 playgrounds/nuxt/app/pages/components/filters.vue
 create mode 100644 src/runtime/components/Filters.vue
 create mode 100644 src/runtime/components/filters/AddFilterPopover.vue
 create mode 100644 src/runtime/components/filters/FilterContextProvider.vue
 create mode 100644 src/runtime/components/filters/FilterDatePicker.vue
 create mode 100644 src/runtime/components/filters/FilterDateRange.vue
 create mode 100644 src/runtime/components/filters/FilterDateTimeRange.vue
 create mode 100644 src/runtime/components/filters/FilterItem.vue
 create mode 100644 src/runtime/components/filters/FilterNumberRange.vue
 create mode 100644 src/runtime/components/filters/FilterOperatorDropdown.vue
 create mode 100644 src/runtime/components/filters/FilterTimeRange.vue
 create mode 100644 src/runtime/components/filters/FilterValueSelector.vue
 create mode 100644 src/runtime/components/filters/SelectOptionsPopover.vue
 create mode 100644 src/runtime/composables/useFilterContext.ts
 create mode 100644 src/runtime/types/filter.ts
 create mode 100644 src/runtime/utils/fields.ts
 create mode 100644 src/runtime/utils/operators.ts
 create mode 100644 src/runtime/utils/validation.ts

diff --git a/docs/content/docs/2.components/filters.md b/docs/content/docs/2.components/filters.md
new file mode 100644
index 0000000000..b70fb81fab
--- /dev/null
+++ b/docs/content/docs/2.components/filters.md
@@ -0,0 +1,1061 @@
+---
+description: A component to display and manage filters (kinda looks like Linear filters)
+category: data
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Filters.vue
+---
+
+## Usage
+
+The Filters component allows you to create powerful filtering interfaces for your data. It supports over 15 field types, 30+ customizable operators, hierarchical navigation, and a [Linear-inspired interface](https://linear.app/docs/filters).
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Full name'
+      type: 'text'
+      placeholder: 'Enter a name...'
+      icon: 'lucide:user'
+      operators:
+        - value: 'contains'
+          label: 'contains'
+        - value: 'starts_with'
+          label: 'starts with'
+        - value: 'is'
+          label: 'is'
+    - key: 'status'
+      label: 'Status'
+      type: 'select'
+      options:
+        - value: 'active'
+          label: 'Active'
+        - value: 'inactive'
+          label: 'Inactive'
+        - value: 'pending'
+          label: 'Pending'
+        - value: 'archived'
+          label: 'Archived'
+      icon: 'lucide:check-circle'
+    - key: 'age'
+      label: 'Age'
+      type: 'number'
+      defaultOperator: 'equals'
+      min: 0
+      max: 120
+      step: 1
+      placeholder: 'Enter an age...'
+      icon: 'lucide:calendar'
+    - key: 'tags'
+      label: 'Tags'
+      type: 'multiselect'
+      options:
+        - value: 'important'
+          label: 'Important'
+        - value: 'urgent'
+          label: 'Urgent'
+        - value: 'normal'
+          label: 'Normal'
+      maxSelections: 4
+      icon: 'lucide:tag'
+    - key: 'createdAt'
+      label: 'Creation date'
+      type: 'date'
+      icon: 'lucide:calendar-days'
+    - key: 'isActive'
+      label: 'Active'
+      type: 'boolean'
+      onLabel: 'Yes'
+      offLabel: 'No'
+      icon: 'lucide:toggle-left'
+---
+::
+
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/tree/v4/playgrounds/nuxt/app/pages/components/filters.vue" aria-label="View source code"}
+This example demonstrates the most common use case of the `Filters` component. Check out the source code on GitHub.
+::
+
+### Basic Setup
+
+Use the `filters` prop to manage active filters and the `fields` prop to define available filterable fields.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+      icon: 'lucide:user'
+    - key: 'status'
+      label: 'Status'
+      type: 'select'
+      options:
+        - value: 'active'
+          label: 'Active'
+        - value: 'inactive'
+          label: 'Inactive'
+---
+::
+
+### Fields Configuration
+
+Fields can be configured with various properties:
+
+- `key`: [Unique identifier for the field.]{class="text-muted"}
+- `label`: [Display label for the field.]{class="text-muted"}
+- `type`: [Field type (`text`, `number`, `date`, `select`, `multiselect`, `boolean`, `email`, `url`, `tel`, `time`, `datetime`, `custom`, `separator`).]{class="text-muted"}
+- `icon`: [Icon to display (Nuxt Icon format, e.g., `lucide:user`).]{class="text-muted"}
+- `placeholder`: [Placeholder text for input fields.]{class="text-muted"}
+- `operators`: [Custom operators for this field (overrides defaults).]{class="text-muted"}
+- `defaultOperator`: [Default operator to use when creating a filter.]{class="text-muted"}
+- `options`: [Options for `select` and `multiselect` fields.]{class="text-muted"}
+- `validation`: [Custom validation function or regex pattern.]{class="text-muted"}
+- `children`: [Nested fields for hierarchical navigation.]{class="text-muted"}
+
+## Field Types
+
+### Text
+
+Text input field with search and optional validation.
+
+**Available operators:** `contains`, `not_contains`, `starts_with`, `ends_with`, `is`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+      placeholder: 'Enter a name...'
+      icon: 'lucide:user'
+      pattern: '^[A-Za-z]+$'
+      validation: (value) => {
+        if (typeof value !== 'string' || value.length <= 2) {
+          return 'Name must contain at least 3 characters'
+        }
+      }
+---
+::
+
+### Number
+
+Numeric input field with min/max/step constraints.
+
+**Available operators:** `equals`, `not_equals`, `greater_than`, `less_than`, `between`, `not_between`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'age'
+      label: 'Age'
+      type: 'number'
+      min: 0
+      max: 120
+      step: 1
+      placeholder: 'Enter an age...'
+---
+::
+
+### Number Range
+
+For numeric fields, when the `between` or `not_between` operator is selected, the component automatically displays two inputs (min/max) via `FilterNumberRange`.
+
+**Note:** There is no separate `numberrange` type. Use `type: 'number'` with the `between` or `not_between` operator.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'priceRange'
+      label: 'Price'
+      type: 'number'
+      min: 0
+      max: 1000
+      step: 10
+      defaultOperator: 'between'
+---
+::
+
+### Date
+
+Single date picker.
+
+**Available operators:** `before`, `after`, `is`, `is_not`, `between`, `not_between`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'createdAt'
+      label: 'Created at'
+      type: 'date'
+      icon: 'lucide:calendar'
+---
+::
+
+### Date Range
+
+For date fields, when the `between` or `not_between` operator is selected, the component automatically displays two date pickers (start/end) via `FilterDateRange`.
+
+**Note:** There is no separate `daterange` type. Use `type: 'date'` with the `between` or `not_between` operator.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'dateRange'
+      label: 'Period'
+      type: 'date'
+      icon: 'lucide:calendar-range'
+      defaultOperator: 'between'
+---
+::
+
+### Select
+
+Single selection dropdown.
+
+**Available operators:** `is`, `is_not`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'status'
+      label: 'Status'
+      type: 'select'
+      options:
+        - value: 'active'
+          label: 'Active'
+          icon: 'lucide:check-circle'
+        - value: 'inactive'
+          label: 'Inactive'
+          icon: 'lucide:x-circle'
+      searchable: true
+      icon: 'lucide:check-circle'
+---
+::
+
+### Multiselect
+
+Multiple selection dropdown.
+
+**Available operators:** `is_any_of`, `is_not_any_of`, `includes_all`, `excludes_all`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'tags'
+      label: 'Tags'
+      type: 'multiselect'
+      options:
+        - value: 'important'
+          label: 'Important'
+        - value: 'urgent'
+          label: 'Urgent'
+        - value: 'normal'
+          label: 'Normal'
+      maxSelections: 5
+      searchable: true
+---
+::
+
+**Special features:**
+- Real-time updates when adding/removing options
+- Popover stays open to allow multiple selections
+- Displays selection count in the button
+
+### Boolean
+
+On/off toggle with customizable labels.
+
+**Available operators:** `is`, `is_not`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'isActive'
+      label: 'Active'
+      type: 'boolean'
+      onLabel: 'Yes'
+      offLabel: 'No'
+      icon: 'lucide:toggle-left'
+---
+::
+
+### Email
+
+Email input field with automatic format validation.
+
+**Available operators:** `contains`, `not_contains`, `starts_with`, `ends_with`, `is`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'email'
+      label: 'Email'
+      type: 'email'
+      placeholder: 'email@example.com'
+      icon: 'lucide:mail'
+---
+::
+
+### URL
+
+URL input field with automatic format validation.
+
+**Available operators:** `contains`, `not_contains`, `starts_with`, `ends_with`, `is`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'website'
+      label: 'Website'
+      type: 'url'
+      placeholder: 'https://example.com'
+      icon: 'lucide:globe'
+---
+::
+
+### Tel
+
+Phone input field with automatic format validation.
+
+**Available operators:** `contains`, `not_contains`, `starts_with`, `ends_with`, `is`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'phone'
+      label: 'Phone'
+      type: 'tel'
+      placeholder: '+33 6 12 34 56 78'
+      icon: 'lucide:phone'
+---
+::
+
+### Time
+
+Time picker.
+
+**Available operators:** `before`, `after`, `is`, `between`, `not_between`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'startTime'
+      label: 'Start time'
+      type: 'time'
+      icon: 'lucide:clock'
+---
+::
+
+### DateTime
+
+Combined date and time picker.
+
+**Available operators:** `before`, `after`, `is`, `between`, `not_between`, `empty`, `not_empty`
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'appointment'
+      label: 'Appointment'
+      type: 'datetime'
+      icon: 'lucide:calendar-clock'
+---
+::
+
+### Custom
+
+Allows using a custom Vue component for rendering.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'customField'
+      label: 'Custom field'
+      type: 'custom'
+      customRenderer: defineAsyncComponent(() => import('./CustomFilter.vue'))
+---
+::
+
+The custom component will receive the following props:
+- `field`: Field configuration
+- `values`: Current values
+- `onChange`: Function to update values
+- `operator`: Current operator
+
+## Operators
+
+### Available Operators by Type
+
+| Operator | Supported Types | Description |
+|----------|----------------|-------------|
+| `is` | select, boolean, date, time, datetime, text, email, url, tel | Exact equality |
+| `is_not` | select, boolean, date | Inequality |
+| `is_any_of` | multiselect | One of the values |
+| `is_not_any_of` | multiselect | None of the values |
+| `includes_all` | multiselect | Includes all values |
+| `excludes_all` | multiselect | Excludes all values |
+| `contains` | text, email, url, tel | Contains text |
+| `not_contains` | text, email, url, tel | Does not contain text |
+| `starts_with` | text, email, url, tel | Starts with |
+| `ends_with` | text, email, url, tel | Ends with |
+| `equals` | number | Equal to |
+| `not_equals` | number | Not equal to |
+| `greater_than` | number | Greater than |
+| `less_than` | number | Less than |
+| `before` | date, time, datetime | Before |
+| `after` | date, time, datetime | After |
+| `between` | number, date, time, datetime | Between two values (automatically displays a range) |
+| `not_between` | number, date, time, datetime | Not between (automatically displays a range) |
+| `empty` | All | Is empty |
+| `not_empty` | All | Is not empty |
+
+### Default Operator
+
+You can define a default operator for a field:
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'status'
+      label: 'Status'
+      type: 'select'
+      defaultOperator: 'is_not'
+      options:
+        - value: 'active'
+          label: 'Active'
+        - value: 'inactive'
+          label: 'Inactive'
+---
+::
+
+## Examples
+
+### Hierarchical Navigation
+
+Fields can be organized hierarchically with unlimited depth, similar to Linear's interface.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name-structure'
+      label: 'Name'
+      icon: 'lucide:user'
+      children:
+        - key: 'firstName'
+          label: 'First name'
+          type: 'text'
+          placeholder: 'Enter a first name...'
+          icon: 'lucide:user'
+        - key: 'lastName'
+          label: 'Last name'
+          type: 'text'
+          placeholder: 'Enter a last name...'
+          icon: 'lucide:user'
+    - key: 'contact'
+      label: 'Contact'
+      icon: 'lucide:mail'
+      children:
+        - key: 'email'
+          label: 'Email'
+          type: 'email'
+          placeholder: 'email@example.com'
+          icon: 'lucide:mail'
+        - key: 'phone'
+          label: 'Phone'
+          type: 'tel'
+          placeholder: '+33 6 12 34 56 78'
+          icon: 'lucide:phone'
+---
+::
+
+**Behavior:**
+- When selecting a parent field, a new popover opens to the right with child fields
+- Navigation can be infinitely nested
+- Each navigation level is independent
+- Search works at each level
+- Popovers automatically close when selecting a final field
+
+### Field Grouping
+
+Organize fields into groups for better organization.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - group: 'Personal Information'
+      fields:
+        - key: 'name'
+          label: 'Full name'
+          type: 'text'
+          placeholder: 'Enter a name...'
+          icon: 'lucide:user'
+        - key: 'age'
+          label: 'Age'
+          type: 'number'
+          min: 0
+          max: 120
+          step: 1
+          placeholder: 'Enter an age...'
+          icon: 'lucide:calendar'
+    - group: 'Contact'
+      fields:
+        - key: 'email'
+          label: 'Email'
+          type: 'email'
+          placeholder: 'email@example.com'
+          icon: 'lucide:mail'
+        - key: 'phone'
+          label: 'Phone'
+          type: 'tel'
+          placeholder: '+33 6 12 34 56 78'
+          icon: 'lucide:phone'
+    - group: 'Status'
+      fields:
+        - key: 'status'
+          label: 'Status'
+          type: 'select'
+          options:
+            - value: 'active'
+              label: 'Active'
+            - value: 'inactive'
+              label: 'Inactive'
+            - value: 'pending'
+              label: 'Pending'
+          icon: 'lucide:check-circle'
+        - key: 'isActive'
+          label: 'Active'
+          type: 'boolean'
+          onLabel: 'Yes'
+          offLabel: 'No'
+          icon: 'lucide:toggle-left'
+---
+::
+
+Groups are displayed with headers in the selection popover.
+
+### Custom Operators
+
+Define custom operators for each field.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Full name'
+      type: 'text'
+      placeholder: 'Enter a name...'
+      icon: 'lucide:user'
+      operators:
+        - value: 'contains'
+          label: 'contains'
+        - value: 'starts_with'
+          label: 'starts with'
+        - value: 'is'
+          label: 'is'
+    - key: 'age'
+      label: 'Age'
+      type: 'number'
+      placeholder: 'Enter an age...'
+      icon: 'lucide:calendar'
+      operators:
+        - value: 'equals'
+          label: 'equals'
+        - value: 'greater_than'
+          label: 'greater than'
+        - value: 'less_than'
+          label: 'less than'
+        - value: 'between'
+          label: 'between'
+---
+::
+
+### Validation
+
+The filter system includes automatic and customizable validation with visual error display.
+
+#### Automatic Validation
+
+`email`, `url`, and `tel` fields have built-in automatic format validation:
+
+- **Email**: Valid email format (e.g., `user@example.com`)
+- **URL**: Valid URL format with or without http/https scheme, supports multiple subdomains (e.g., `https://example.com` or `example.com`)
+- **Phone**: Valid phone format accepting digits, spaces, dashes, parentheses, and the + sign (e.g., `+33 6 12 34 56 78`)
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'filters-validation-automatic-example'
+highlights:
+  - 49
+  - 57
+class: '!py-4'
+---
+::
+
+#### Custom Validation
+
+You can add custom validation via two methods:
+
+**1. Regex Pattern:**
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'code'
+      label: 'Product code'
+      type: 'text'
+      pattern: '^[A-Z]{3}-[0-9]{3}$'
+---
+::
+
+**2. Validation Function:**
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'score'
+      label: 'Score'
+      type: 'number'
+      validation: (value) => {
+        if (typeof value !== 'number') {
+          return 'Score must be a number'
+        }
+        if (value < 0) {
+          return 'Score cannot be negative'
+        }
+        if (value > 100) {
+          return 'Score cannot exceed 100'
+        }
+      }
+---
+::
+
+**Note:** The validation function can return:
+- `undefined`, `null`, or `false`: Value is valid (no need to return explicitly)
+- `true`: Value is invalid (default error message from `i18n.validation.invalid`)
+- `string`: Value is invalid with custom error message
+
+#### Conditional Validation
+
+Strict validation (full format) only applies to operators requiring a complete value (`is`, `equals`, etc.). For partial search operators (`contains`, `starts_with`, etc.), full format validation is disabled to allow partial searches.
+
+For example, with an email field and the `starts_with` operator, you can enter "john" without error, whereas with the `is` operator, a complete email is required.
+
+#### Error Display
+
+Validation errors are displayed visually:
+- Input turns red (`color="error"`) and stays red even without focus
+- A tooltip appears above the input with the error message
+- The tooltip appears automatically when the input is focused or hovered and there's an error
+
+Error messages can be customized via `i18n.validation`:
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'email'
+      label: 'Email'
+      type: 'email'
+  i18n:
+    validation:
+      invalidEmail: 'Invalid email format'
+      invalidUrl: 'Invalid URL format'
+      invalidTel: 'Invalid phone format'
+      invalid: 'Invalid input format'
+---
+::
+
+### Internationalization
+
+All texts can be customized via the `i18n` prop. The configuration is merged with default English values, so you only need to override what you want to change.
+
+The `i18n` prop accepts a partial `FilterI18nConfig` object.
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Nom'
+      type: 'text'
+    - key: 'status'
+      label: 'Statut'
+      type: 'select'
+      options:
+        - value: 'active'
+          label: 'Actif'
+        - value: 'inactive'
+          label: 'Inactif'
+  i18n:
+    addFilter: 'Ajouter un filtre'
+    searchFields: 'Rechercher un champ...'
+    noFieldsFound: 'Aucun champ trouvé.'
+    operators:
+      contains: 'contient'
+      is: 'est'
+      isNot: "n'est pas"
+      startsWith: 'commence par'
+      endsWith: 'se termine par'
+      empty: 'est vide'
+      notEmpty: "n'est pas vide"
+    placeholders:
+      enterField: (fieldType) => `Entrer ${fieldType}...`
+      selectField: 'Sélectionner...'
+      searchField: (fieldName) => `Rechercher ${fieldName.toLowerCase()}...`
+    validation:
+      invalidEmail: 'Format d\'email invalide'
+      invalidUrl: 'Format d\'URL invalide'
+      invalidTel: 'Format de téléphone invalide'
+      invalid: 'Format d\'entrée invalide'
+---
+::
+
+**Note:** The system includes English translations by default. You can override any part of the configuration, and the merge function will combine your custom values with the defaults.
+
+### Variants
+
+The component supports two visual variants:
+
+- `outline` (default): Visible borders
+- `solid`: Colored background without borders
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+items:
+  variant:
+    - outline
+    - solid
+props:
+  variant: 'outline'
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+---
+::
+
+### Sizes
+
+Three sizes are available:
+
+- `sm`: Small size
+- `md` (default): Medium size
+- `lg`: Large size
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+items:
+  size:
+    - sm
+    - md
+    - lg
+props:
+  size: 'md'
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+---
+::
+
+### Radius
+
+- `md` (default): Rounded borders
+- `full`: Fully rounded borders
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+items:
+  radius:
+    - md
+    - full
+props:
+  radius: 'md'
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+---
+::
+
+### Custom Add Button
+
+You can completely customize the add button:
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+  addButtonText: 'Add filter'
+  addButtonIcon: 'i-lucide-plus'
+  addButtonClassName: 'custom-class'
+---
+::
+
+Or use a custom component:
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'filters-custom-button-example'
+highlights:
+  - 85
+  - 95
+class: '!py-4'
+---
+::
+
+### Multiple Filters per Field
+
+By default, `allowMultiple` is enabled, allowing multiple filters for the same field.
+
+To disable this feature:
+
+::component-code
+---
+collapse: true
+class: '!py-4'
+ignore:
+  - filters
+  - fields
+props:
+  allowMultiple: false
+  filters: []
+  fields:
+    - key: 'name'
+      label: 'Name'
+      type: 'text'
+---
+::
+
+When `allowMultiple` is `false`, fields already used in a filter are no longer available in the selection list.
+
+### Filter Management
+
+Filters can be added via:
+1. The "Add filter" button
+2. Hierarchical navigation for nested fields
+3. Programmatically via the `change` event
+
+Each filter can be modified:
+- **Field**: Not modifiable after creation (delete and recreate)
+- **Operator**: Modifiable via the operator dropdown
+- **Values**: Modifiable via input components
+
+Filters can be removed via:
+- The remove button (X) on each filter
+- Programmatically by filtering the filters array
+
+## API
+
+### Props
+
+:component-props
+
+### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `change` | `Filter[]` | Emitted when filters change |
+
+## Changelog
+
+:component-changelog
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index 5398023167..a206c46612 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -31,6 +31,7 @@ const components = [
   'error',
   'field-group',
   'file-upload',
+  'filters',
   'footer',
   'form-field',
   'form',
diff --git a/playgrounds/nuxt/app/pages/components/filters.vue b/playgrounds/nuxt/app/pages/components/filters.vue
new file mode 100644
index 0000000000..bbf396a378
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/filters.vue
@@ -0,0 +1,707 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { Filter, FilterFieldsConfig, FilterFieldConfig, FiltersVariant, FiltersSize, FiltersRadius, TableColumn } from '@nuxt/ui'
+
+const UBadge = resolveComponent('UBadge')
+
+// Local function to flatten fields (used in filtering)
+function flattenFieldsConfig(config: FilterFieldsConfig): FilterFieldConfig[] {
+  const flatFields: FilterFieldConfig[] = []
+  const collect = (fields: FilterFieldConfig[]) => {
+    for (const field of fields) {
+      if (field.type) {
+        flatFields.push(field)
+      }
+      if (field.children) {
+        collect(field.children)
+      }
+    }
+  }
+  if (Array.isArray(config)) {
+    collect(config as FilterFieldConfig[])
+  }
+  return flatFields
+}
+
+const variants = ['solid', 'outline']
+const sizes = ['sm', 'md', 'lg']
+const radiuses = ['md', 'full']
+
+const attrs = reactive({
+  variant: ['outline'],
+  size: ['sm'],
+  radius: ['md']
+})
+
+const prettyJson = ref(false)
+
+// Filter state
+const filters = ref<Filter[]>([])
+
+// Available fields configuration
+const fields: FilterFieldsConfig = [
+  {
+    key: 'name',
+    label: 'Full name',
+    type: 'text',
+    placeholder: 'Enter a name...',
+    icon: 'lucide:user',
+    validation: (value) => {
+      // It should not contain numbers
+      if (/\d/.test(String(value))) {
+        return 'Name must not contain numbers'
+      }
+      if (String(value).length < 3) {
+        return 'Name must contain at least 3 characters'
+      }
+    },
+    operators: [
+      { value: 'contains', label: 'contains' },
+      { value: 'starts_with', label: 'starts with' },
+      { value: 'is', label: 'is' }
+    ]
+  },
+  {
+    key: 'name-structure',
+    label: 'Name',
+    icon: 'lucide:user',
+    children: [
+      {
+        key: 'firstName',
+        label: 'First name',
+        type: 'text',
+        placeholder: 'Enter a first name...',
+        icon: 'lucide:user'
+      },
+      {
+        key: 'lastName',
+        label: 'Last name',
+        type: 'text',
+        placeholder: 'Enter a last name...',
+        icon: 'lucide:user'
+      }
+    ]
+  },
+  {
+    key: 'age',
+    label: 'Age',
+    type: 'number',
+    defaultOperator: 'equals',
+    min: 0,
+    max: 120,
+    step: 1,
+    placeholder: 'Enter an age...',
+    validation: (value) => {
+      if (Number(value) < 18) {
+        return 'Age must be greater than 18 years'
+      }
+      if (Number(value) > 20) {
+        return 'Age must be less than 20 years'
+      }
+    },
+    icon: 'lucide:calendar'
+  },
+  {
+    key: 'score',
+    label: 'Score',
+    type: 'number',
+    min: 0,
+    max: 100,
+    step: 1,
+    placeholder: 'Enter a score...',
+    icon: 'lucide:star',
+    validation: (value) => {
+      // Custom validation: score must be between 0 and 100
+      const num = Number(value)
+      return !Number.isNaN(num) && num >= 0 && num <= 100
+    }
+  },
+  {
+    key: 'email',
+    label: 'Email',
+    type: 'email',
+    placeholder: 'mail@example.com',
+    icon: 'lucide:mail'
+  },
+  {
+    key: 'website',
+    label: 'Website',
+    type: 'url',
+    placeholder: 'https://example.com',
+    icon: 'lucide:globe'
+  },
+  {
+    key: 'phone',
+    label: 'Phone',
+    type: 'tel',
+    placeholder: '+33 6 12 34 56 78',
+    icon: 'lucide:phone'
+  },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'select',
+    options: [
+      { value: 'active', label: 'Active' },
+      { value: 'inactive', label: 'Inactive' },
+      { value: 'pending', label: 'Pending' },
+      { value: 'archived', label: 'Archived' }
+    ],
+    icon: 'lucide:check-circle'
+  },
+  {
+    key: 'tags',
+    label: 'Tags',
+    type: 'multiselect',
+    options: [
+      { value: 'important', label: 'Important' },
+      { value: 'urgent', label: 'Urgent' },
+      { value: 'normal', label: 'Normal' },
+      { value: 'low', label: 'Low' }
+    ],
+    maxSelections: 4,
+    icon: 'lucide:tag'
+  },
+  {
+    key: 'createdAt',
+    label: 'Creation date',
+    type: 'date',
+    icon: 'lucide:calendar-days'
+  },
+  {
+    key: 'dateRange',
+    label: 'Date range',
+    type: 'date',
+    defaultOperator: 'between',
+    icon: 'lucide:calendar-range'
+  },
+  {
+    key: 'startTime',
+    label: 'Start time',
+    type: 'time',
+    icon: 'lucide:clock'
+  },
+  {
+    key: 'appointment',
+    label: 'Appointment',
+    type: 'datetime',
+    icon: 'lucide:calendar-clock'
+  },
+  {
+    key: 'isActive',
+    label: 'Active',
+    type: 'boolean',
+    onLabel: 'Yes',
+    offLabel: 'No',
+    icon: 'lucide:toggle-left'
+  }
+]
+
+// Test data
+const data = ref([
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    name: 'John Doe',
+    age: 30,
+    score: 85,
+    email: 'john.doe@example.com',
+    website: 'https://johndoe.com',
+    phone: '+33612345678',
+    status: 'active',
+    tags: ['important', 'urgent'],
+    createdAt: '2024-01-15',
+    dateRange: ['2024-01-10', '2024-01-20'],
+    startTime: '09:00',
+    appointment: '2024-01-15T14:30',
+    isActive: true
+  },
+  {
+    id: 2,
+    firstName: 'Jane',
+    lastName: 'Smith',
+    name: 'Jane Smith',
+    age: 25,
+    score: 72,
+    email: 'jane.smith@example.com',
+    website: 'https://janesmith.net',
+    phone: '+33623456789',
+    status: 'inactive',
+    tags: ['normal'],
+    createdAt: '2024-01-20',
+    dateRange: ['2024-01-15', '2024-01-25'],
+    startTime: '10:30',
+    appointment: '2024-01-20T16:00',
+    isActive: false
+  },
+  {
+    id: 3,
+    firstName: 'Bob',
+    lastName: 'Johnson',
+    name: 'Bob Johnson',
+    age: 35,
+    score: 95,
+    email: 'bob.johnson@example.com',
+    website: 'https://bobjohnson.org',
+    phone: '+33634567890',
+    status: 'pending',
+    tags: ['urgent', 'important'],
+    createdAt: '2024-02-01',
+    dateRange: ['2024-01-28', '2024-02-05'],
+    startTime: '08:15',
+    appointment: '2024-02-01T09:00',
+    isActive: true
+  },
+  {
+    id: 4,
+    firstName: 'Alice',
+    lastName: 'Williams',
+    name: 'Alice Williams',
+    age: 28,
+    score: 68,
+    email: 'alice.williams@example.com',
+    website: 'https://alicewilliams.io',
+    phone: '+33645678901',
+    status: 'active',
+    tags: ['normal', 'low'],
+    createdAt: '2024-02-10',
+    dateRange: ['2024-02-05', '2024-02-15'],
+    startTime: '11:45',
+    appointment: '2024-02-10T13:30',
+    isActive: true
+  },
+  {
+    id: 5,
+    firstName: 'Charlie',
+    lastName: 'Brown',
+    name: 'Charlie Brown',
+    age: 42,
+    score: 55,
+    email: 'charlie.brown@example.com',
+    website: 'https://charliebrown.co',
+    phone: '+33656789012',
+    status: 'archived',
+    tags: ['low'],
+    createdAt: '2024-01-05',
+    dateRange: ['2024-01-01', '2024-01-10'],
+    startTime: '14:20',
+    appointment: '2024-01-05T15:45',
+    isActive: false
+  },
+  {
+    id: 6,
+    firstName: 'Diana',
+    lastName: 'Prince',
+    name: 'Diana Prince',
+    age: 29,
+    score: 90,
+    email: 'diana.prince@example.com',
+    website: 'https://dianaprince.com',
+    phone: '+33667890123',
+    status: 'active',
+    tags: ['important'],
+    createdAt: '2024-02-15',
+    dateRange: ['2024-02-12', '2024-02-20'],
+    startTime: '07:30',
+    appointment: '2024-02-15T10:15',
+    isActive: true
+  }
+])
+
+// Filtering function
+const filteredData = computed(() => {
+  if (filters.value.length === 0) {
+    return data.value
+  }
+
+  return data.value.filter((item: (typeof data.value)[0]) => {
+    return filters.value.every((filter: Filter) => {
+      const allFields = flattenFieldsConfig(fields)
+      const field = allFields.find(
+        (f: FilterFieldConfig) => f.key === filter.field
+      )
+      if (!field) {
+        return true
+      }
+
+      const value = item[filter.field as keyof typeof item]
+
+      switch (filter.operator) {
+        case 'contains':
+          return String(value)
+            .toLowerCase()
+            .includes(String(filter.values[0]).toLowerCase())
+        case 'not_contains':
+          return !String(value)
+            .toLowerCase()
+            .includes(String(filter.values[0]).toLowerCase())
+        case 'starts_with':
+          return String(value)
+            .toLowerCase()
+            .startsWith(String(filter.values[0]).toLowerCase())
+        case 'ends_with':
+          return String(value)
+            .toLowerCase()
+            .endsWith(String(filter.values[0]).toLowerCase())
+        case 'is':
+          return value === filter.values[0]
+        case 'is_not':
+          return value !== filter.values[0]
+        case 'is_any_of':
+          return Array.isArray(filter.values) && filter.values.includes(value)
+        case 'is_not_any_of':
+          return Array.isArray(filter.values) && !filter.values.includes(value)
+        case 'includes_all':
+          return (
+            Array.isArray(value)
+            && Array.isArray(filter.values)
+            && filter.values.every((v: unknown) =>
+              (value as unknown[]).includes(v)
+            )
+          )
+        case 'excludes_all':
+          return (
+            Array.isArray(value)
+            && Array.isArray(filter.values)
+            && filter.values.every(
+              (v: unknown) => !(value as unknown[]).includes(v)
+            )
+          )
+        case 'equals':
+          return Number(value) === Number(filter.values[0])
+        case 'not_equals':
+          return Number(value) !== Number(filter.values[0])
+        case 'greater_than':
+          return Number(value) > Number(filter.values[0])
+        case 'less_than':
+          return Number(value) < Number(filter.values[0])
+        case 'between':
+          // Support pour number, date, time et datetime
+          if (field.type === 'time') {
+            return (
+              String(value) >= String(filter.values[0])
+              && String(value) <= String(filter.values[1])
+            )
+          }
+          if (field.type === 'datetime') {
+            return (
+              new Date(String(value)) >= new Date(String(filter.values[0]))
+                && new Date(String(value)) <= new Date(String(filter.values[1]))
+            )
+          }
+          if (field.type === 'date') {
+            return (
+              new Date(String(value)) >= new Date(String(filter.values[0]))
+                && new Date(String(value)) <= new Date(String(filter.values[1]))
+            )
+          }
+          // number
+          return (
+            Number(value) >= Number(filter.values[0])
+            && Number(value) <= Number(filter.values[1])
+          )
+        case 'not_between':
+          return (
+            Number(value) < Number(filter.values[0])
+            || Number(value) > Number(filter.values[1])
+          )
+        case 'before':
+          // Support pour date, datetime et time
+          if (field.type === 'time') {
+            return String(value) < String(filter.values[0])
+          }
+          return new Date(String(value)) < new Date(String(filter.values[0]))
+        case 'after':
+          // Support pour date, datetime et time
+          if (field.type === 'time') {
+            return String(value) > String(filter.values[0])
+          }
+          return new Date(String(value)) > new Date(String(filter.values[0]))
+        case 'empty':
+          return (
+            value === null
+            || value === undefined
+            || value === ''
+            || (Array.isArray(value) && value.length === 0)
+          )
+        case 'not_empty':
+          return (
+            value !== null
+            && value !== undefined
+            && value !== ''
+            && (!Array.isArray(value) || value.length > 0)
+          )
+        default:
+          return true
+      }
+    })
+  })
+})
+
+function onFiltersChange(newFilters: Filter[]) {
+  filters.value = newFilters
+}
+
+function getStatusColor(status: string) {
+  switch (status) {
+    case 'active':
+      return 'success'
+    case 'inactive':
+      return 'neutral'
+    case 'pending':
+      return 'warning'
+    case 'archived':
+      return 'error'
+    default:
+      return 'neutral'
+  }
+}
+
+function getStatusLabel(status: string) {
+  switch (status) {
+    case 'active':
+      return 'Active'
+    case 'inactive':
+      return 'Inactive'
+    case 'pending':
+      return 'Pending'
+    case 'archived':
+      return 'Archived'
+    default:
+      return status
+  }
+}
+
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+function formatDateTime(dateTime: string) {
+  return new Date(dateTime).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+// Type for table data
+type DataItem = typeof data.value[0]
+
+// Table columns
+const columns: TableColumn<DataItem>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ row }) => {
+      const item = row.original
+      return h('div', { class: 'flex items-center gap-2' }, [
+        h('span', { class: 'font-semibold' }, item.name),
+        item.isActive && h(UBadge, { color: 'success', variant: 'subtle', size: 'sm' }, () => 'Active')
+      ])
+    }
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue('status') as string
+      const color = getStatusColor(status)
+      return h(UBadge, { color, variant: 'subtle' }, () => getStatusLabel(status))
+    }
+  },
+  {
+    accessorKey: 'age',
+    header: 'Age',
+    cell: ({ row }) => `${row.getValue('age')} years`
+  },
+  {
+    accessorKey: 'score',
+    header: 'Score',
+    cell: ({ row }) => row.getValue('score')
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    cell: ({ row }) => h('span', { class: 'lowercase' }, row.getValue('email'))
+  },
+  {
+    accessorKey: 'website',
+    header: 'Website',
+    cell: ({ row }) => {
+      const website = row.getValue('website') as string
+      return h('a', {
+        href: website,
+        target: '_blank',
+        rel: 'noopener noreferrer',
+        class: 'text-primary hover:underline'
+      }, website)
+    }
+  },
+  {
+    accessorKey: 'phone',
+    header: 'Phone',
+    cell: ({ row }) => row.getValue('phone')
+  },
+  {
+    accessorKey: 'createdAt',
+    header: 'Created on',
+    cell: ({ row }) => formatDate(row.getValue('createdAt') as string)
+  },
+  {
+    accessorKey: 'startTime',
+    header: 'Time',
+    cell: ({ row }) => row.getValue('startTime')
+  },
+  {
+    accessorKey: 'appointment',
+    header: 'Appointment',
+    cell: ({ row }) => formatDateTime(row.getValue('appointment') as string)
+  },
+  {
+    accessorKey: 'tags',
+    header: 'Tags',
+    cell: ({ row }) => {
+      const tags = row.getValue('tags') as string[]
+      return h('div', { class: 'flex gap-1 flex-wrap' }, tags.map(tag =>
+        h(UBadge, { key: tag, color: 'neutral', variant: 'subtle', size: 'md' }, () => tag)
+      ))
+    }
+  }
+]
+</script>
+
+<template>
+  <Navbar>
+    <USelect
+      v-model="attrs.variant"
+      :items="variants"
+      multiple
+      placeholder="Variant"
+    />
+    <USelect v-model="attrs.size" :items="sizes" multiple placeholder="Size" />
+    <USelect
+      v-model="attrs.radius"
+      :items="radiuses"
+      multiple
+      placeholder="Radius"
+    />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs" class="flex flex-col gap-4 w-full" container-class="w-full align-start justify-start">
+    <div class="w-full bg-muted rounded-sm p-4">
+      <UFilters
+        :filters="filters"
+        :fields="fields"
+        :variant="props?.variant as FiltersVariant"
+        :size="props?.size as FiltersSize"
+        :radius="props?.radius as FiltersRadius"
+        @change="onFiltersChange"
+      />
+    </div>
+  </Matrix>
+
+  <UCard class="w-full">
+    <template #header>
+      <h3 class="text-lg font-semibold">
+        Debug - Active filters (JSON)
+      </h3>
+    </template>
+    <pre class="p-4 bg-gray-100 dark:bg-gray-900 rounded text-xs overflow-auto">{{ JSON.stringify(filters, null, prettyJson ? 2 : 0) }}</pre>
+    <USwitch v-model="prettyJson" label="Pretty JSON" class="mt-2" />
+  </UCard>
+
+  <UCollapsible class="flex flex-col gap-2 w-full">
+    <UButton
+      class="group"
+      icon="i-lucide-bar-chart"
+      trailing-icon="i-lucide-chevron-down"
+      color="neutral"
+      variant="outline"
+      label="Display results on test data"
+      block
+      :ui="{ trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200' }"
+    />
+
+    <template #content>
+      <div class="space-y-4 w-full p-4 bg-gray-50 rounded-sm">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <UCard>
+            <template #header>
+              <h3 class="text-lg font-semibold">
+                Active filters
+              </h3>
+            </template>
+            <div class="text-3xl font-bold text-primary">
+              {{ filters.length }}
+            </div>
+          </UCard>
+          <UCard>
+            <template #header>
+              <h3 class="text-lg font-semibold">
+                Filtered results
+              </h3>
+            </template>
+            <div class="text-3xl font-bold text-primary">
+              {{ filteredData.length }}
+            </div>
+          </UCard>
+          <UCard>
+            <template #header>
+              <h3 class="text-lg font-semibold">
+                Total items
+              </h3>
+            </template>
+            <div class="text-3xl font-bold text-primary">
+              {{ data.length }}
+            </div>
+          </UCard>
+        </div>
+
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h2 class="text-xl font-semibold">
+                Filtered results
+              </h2>
+              <UButton
+                v-if="filters.length > 0"
+                color="neutral"
+                variant="ghost"
+                size="sm"
+                @click="filters = []"
+              >
+                Reset filters
+              </UButton>
+            </div>
+          </template>
+
+          <div v-if="filteredData.length === 0">
+            <div class="text-center py-12 text-gray-500">
+              <UIcon
+                name="lucide:filter-x"
+                class="h-12 w-12 mx-auto mb-4 opacity-50"
+              />
+              <p class="text-lg">
+                No results match the selected filters
+              </p>
+            </div>
+          </div>
+
+          <UTable
+            v-else
+            :columns="columns"
+            :data="filteredData"
+            class="border border-accented rounded-sm"
+          />
+        </UCard>
+      </div>
+    </template>
+  </UCollapsible>
+</template>
diff --git a/src/runtime/components/Filters.vue b/src/runtime/components/Filters.vue
new file mode 100644
index 0000000000..1ab69cde51
--- /dev/null
+++ b/src/runtime/components/Filters.vue
@@ -0,0 +1,267 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<!--
+  Main component of the filter system
+  Manages the display and manipulation of a list of active filters
+  Provides a shared context to all child components via FilterContextProvider
+-->
+<template>
+  <FilterContextProvider
+    :variant="variant"
+    :size="size"
+    :radius="radius"
+    :i18n="mergedI18n"
+    :cursor-pointer="cursorPointer"
+    :class-name="className"
+    :show-add-button="showAddButton"
+    :add-button-text="addButtonText"
+    :add-button-icon="addButtonIcon"
+    :add-button-class-name="addButtonClassName"
+    :add-button="addButton"
+    :show-search-input="showSearchInput"
+    :trigger="trigger"
+    :allow-multiple="allowMultiple"
+  >
+    <div :class="containerClasses">
+      <!-- Filtres actifs -->
+      <FilterItem
+        v-for="filter in filters"
+        :key="filter.id"
+        :filter="filter"
+        :field="fieldsMap[filter.field]"
+        @update="(updates: Partial<Filter>) => updateFilter(filter.id, updates)"
+        @remove="removeFilter(filter.id)"
+      />
+
+      <!-- Bouton ajouter filtre -->
+      <AddFilterPopover
+        v-if="showAddButton && selectableFields.length > 0"
+        :fields="fields"
+        :filters="filters"
+        :allow-multiple="allowMultiple"
+        @add-filter="handleAddFilter"
+        @update-filter="updateFilter"
+      />
+    </div>
+  </FilterContextProvider>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type {
+  Filter,
+  FilterFieldsConfig,
+  FilterFieldConfig,
+  FilterI18nConfig,
+  FiltersVariant,
+  FiltersSize,
+  FiltersRadius,
+  FilterOperatorValue
+} from '../types/filter'
+import { computed } from 'vue'
+import { mergeI18nConfig } from '../utils/operators'
+import { flattenFieldsConfig, getFieldsMap } from '../utils/fields'
+import FilterContextProvider from './filters/FilterContextProvider.vue'
+import FilterItem from './filters/FilterItem.vue'
+import AddFilterPopover from './filters/AddFilterPopover.vue'
+
+interface Props {
+  filters?: Filter[]
+  fields: FilterFieldsConfig
+  onChange?: (filters: Filter[]) => void
+  className?: string
+  showAddButton?: boolean
+  addButtonText?: string
+  addButtonIcon?: string
+  addButtonClassName?: string
+  addButton?: Component
+  variant?: FiltersVariant
+  size?: FiltersSize
+  radius?: FiltersRadius
+  i18n?: Partial<FilterI18nConfig>
+  showSearchInput?: boolean
+  cursorPointer?: boolean
+  trigger?: Component
+  allowMultiple?: boolean
+  popoverContentClassName?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  filters: () => [],
+  onChange: undefined,
+  className: '',
+  showAddButton: true,
+  addButtonText: 'Add filter',
+  addButtonIcon: 'lucide:list-filter-plus',
+  addButtonClassName: '',
+  addButton: undefined,
+  variant: 'outline',
+  size: 'sm',
+  radius: 'md',
+  i18n: () => ({}),
+  showSearchInput: true,
+  cursorPointer: true,
+  trigger: undefined,
+  allowMultiple: true,
+  popoverContentClassName: ''
+})
+
+const emit = defineEmits<{
+  change: [filters: Filter[]]
+}>()
+
+// Merges custom i18n configuration with default values
+const mergedI18n = computed(() => mergeI18nConfig(props.i18n))
+
+// Creates a map of fields for quick access by key
+const fieldsMap = computed(() => getFieldsMap(props.fields))
+
+// Calculates CSS classes for the container based on variant and size
+const containerClasses = computed(() => {
+  const base = 'flex flex-wrap items-center'
+  const gap = props.variant === 'solid' ? 'gap-2' : props.size === 'sm' ? 'gap-1.5' : props.size === 'lg' ? 'gap-3.5' : 'gap-2.5'
+  return [base, gap, props.className].filter(Boolean).join(' ')
+})
+
+// Determines which fields can be selected to create a new filter
+// Excludes separators and already used fields if allowMultiple is false
+const selectableFields = computed(() => {
+  const flatFields = flattenFieldsConfig(props.fields)
+  return flatFields.filter((field) => {
+    if (!field.key || field.type === 'separator') {
+      return false
+    }
+    if (props.allowMultiple) {
+      return true
+    }
+    return !props.filters.some(filter => filter.field === field.key)
+  })
+})
+
+/**
+ * Generates a unique identifier for a filter
+ * Combines timestamp and random string to ensure uniqueness
+ * @returns Unique identifier in format "filter-{timestamp}-{random}"
+ */
+function generateFilterId(): string {
+  return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+}
+
+/**
+ * Updates an existing filter with new values
+ * Automatically clears values for empty/not_empty operators
+ */
+function updateFilter(filterId: string, updates: Partial<Filter>) {
+  const updatedFilters = props.filters.map(f =>
+    f.id === filterId ? { ...f, ...updates } : f
+  )
+  // Clear values for empty/not_empty operators
+  if (updates.operator === 'empty' || updates.operator === 'not_empty') {
+    const filterIndex = updatedFilters.findIndex(f => f.id === filterId)
+    if (filterIndex >= 0 && updatedFilters[filterIndex]) {
+      updatedFilters[filterIndex].values = []
+    }
+  }
+  emit('change', updatedFilters)
+  props.onChange?.(updatedFilters)
+}
+
+/**
+ * Removes a filter from the list
+ */
+function removeFilter(filterId: string) {
+  const updatedFilters = props.filters.filter(f => f.id !== filterId)
+  emit('change', updatedFilters)
+  props.onChange?.(updatedFilters)
+}
+
+/**
+ * Adds a new filter to the list
+ * Automatically determines the operator and default values based on field type
+ * @param fieldKey - Key of the field to add
+ * @param operator - Operator to use (default: field's default operator)
+ * @param values - Values to use (default: field's default values)
+ * @param callback - Function called with the created filter ID (for real-time updates)
+ */
+function handleAddFilter(fieldKey: string, operator?: FilterOperatorValue, values: unknown[] = [], callback?: (filterId: string) => void) {
+  const field = fieldsMap.value[fieldKey]
+  if (!field?.key) {
+    return
+  }
+
+  const defaultOperator = operator || field.defaultOperator || getDefaultOperatorForField(field)
+  const defaultValues = values.length > 0 ? values : getDefaultValuesForField(field)
+
+  const newFilter: Filter = {
+    id: generateFilterId(),
+    field: field.key,
+    operator: defaultOperator,
+    values: defaultValues
+  }
+
+  const updatedFilters = [...props.filters, newFilter]
+  emit('change', updatedFilters)
+  props.onChange?.(updatedFilters)
+
+  // Call the callback with the created filter ID
+  if (callback) {
+    callback(newFilter.id)
+  }
+}
+
+/**
+ * Determines the default operator for a given field
+ * For booleans, always returns 'is'
+ */
+function getDefaultOperatorForField(field: FilterFieldConfig): FilterOperatorValue {
+  if (field.type === 'boolean') {
+    return 'is'
+  }
+  return 'is'
+}
+
+/**
+ * Determines default values for a field based on its type
+ * Handles special cases for ranges (between/not_between) and specific types
+ */
+function getDefaultValuesForField(field: FilterFieldConfig): unknown[] {
+  if (['text', 'email', 'url', 'tel'].includes(field.type || '')) {
+    return ['']
+  }
+  if (field.type === 'number') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForField(field)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return [field.min || 0, field.max || 100]
+    }
+    return ['']
+  }
+  if (field.type === 'date') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForField(field)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return ['', '']
+    }
+    return ['']
+  }
+  if (field.type === 'datetime') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForField(field)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return ['', '']
+    }
+    return ['']
+  }
+  if (field.type === 'time') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForField(field)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return ['', '']
+    }
+    return ['']
+  }
+  if (field.type === 'boolean') {
+    return [false]
+  }
+  return []
+}
+</script>
diff --git a/src/runtime/components/filters/AddFilterPopover.vue b/src/runtime/components/filters/AddFilterPopover.vue
new file mode 100644
index 0000000000..f45a23bb9e
--- /dev/null
+++ b/src/runtime/components/filters/AddFilterPopover.vue
@@ -0,0 +1,709 @@
+<!--
+  Complex component managing the addition of new filters via a nested popover system
+  Supports hierarchical navigation in fields with children
+  Manages field, operator and value selection via multiple coordinated popovers
+-->
+<template>
+  <div class="relative">
+    <!-- Main popover for field selection -->
+    <UPopover
+      v-model:open="isOpen"
+      :content="{
+        side: 'bottom',
+        align: 'start',
+        sideOffset: 8,
+        collisionPadding: 20,
+        avoidCollisions: true,
+        disableUpdateOnLayoutShift: true
+      }"
+      @update:open="handleMainPopoverClose"
+    >
+      <template #default>
+        <UButton
+          v-if="!context.addButton"
+          :icon="context.addButtonIcon || 'lucide:list-filter-plus'"
+          :variant="areFiltersSet ? 'outline' : 'solid'"
+          :size="context.size"
+          :class="[
+            context.radius === 'full' ? 'rounded-full' : 'rounded-md',
+            context.addButtonClassName,
+            'h-full'
+          ]"
+          :style="{ marginTop: '1px' /* Button is slightly higher than the filters */ }"
+          :ui="{
+            base: 'font-medium'
+          }"
+        >
+          {{ areFiltersSet ? '' : (context.addButtonText || context.i18n.addFilter) }}
+        </UButton>
+        <component
+          :is="context.addButton"
+          v-else-if="context.addButton"
+          @click="isOpen = true"
+        />
+      </template>
+
+      <template #content>
+        <div
+          ref="mainPopoverContentRef"
+          class="w-[200px] p-0"
+        >
+          <UCommandPalette
+            v-model="selectedFieldItem"
+            virtualize
+            :fuse="{ resultLimit: 1000 /* NOTE: This is a hack because the is a default limit of 12 items */ }"
+            :groups="fieldGroups"
+            :placeholder="context.i18n.searchFields"
+            selected-icon="lucide:dot"
+            :ui="{
+              input: '[&>input]:h-8 [&>input]:text-sm'
+            }"
+            @update:model-value="handleFieldSelect"
+            @highlight="handleHighlight"
+          >
+            <template #empty>
+              <div class="py-4 text-center text-sm text-gray-500">
+                {{ context.i18n.noFieldsFound }}
+              </div>
+            </template>
+
+            <!-- Show chevron icon for fields with options -->
+            <template #item-trailing="{ item }">
+              <UIcon
+                v-if="hasOptions(item.id)"
+                name="i-lucide-chevron-right"
+                class="ml-auto h-4 w-4 opacity-60"
+              />
+            </template>
+          </UCommandPalette>
+        </div>
+      </template>
+    </UPopover>
+
+    <!-- Nested navigation popovers for fields with children -->
+    <UPopover
+      v-for="(level, index) in fieldNavigationStack"
+      :key="`field-navigation-${index}-${level.parent.key}`"
+      :open="true"
+      :reference="level.reference"
+      :content="{
+        side: 'right',
+        align: 'start',
+        sideOffset: 8,
+        collisionPadding: 20,
+        avoidCollisions: true,
+        disableUpdateOnLayoutShift: true
+      }"
+    >
+      <template #content>
+        <div class="w-[200px] p-0">
+          <UCommandPalette
+            v-model="level.selectedItem"
+            virtualize
+            :fuse="{ resultLimit: 1000 /* NOTE: This is a hack because the is a default limit of 12 items */ }"
+            :groups="getFieldPaletteGroupsForFields(level.fields)"
+            :placeholder="context.i18n.searchFields"
+            selected-icon="lucide:dot"
+            :ui="{
+              input: '[&>input]:h-8 [&>input]:text-sm'
+            }"
+            @update:model-value="(item) => handleNestedFieldSelect(index, item)"
+            @highlight="(highlighted) => handleNestedHighlight(index, highlighted)"
+          >
+            <template #empty>
+              <div class="py-4 text-center text-sm text-gray-500">
+                {{ context.i18n.noFieldsFound }}
+              </div>
+            </template>
+
+            <template #item-trailing="{ item }">
+              <UIcon
+                v-if="hasOptions(item.id)"
+                name="i-lucide-chevron-right"
+                class="ml-auto h-4 w-4 opacity-60"
+              />
+            </template>
+          </UCommandPalette>
+        </div>
+      </template>
+    </UPopover>
+
+    <!-- Nested popover for option selection (opens to the right) -->
+    <UPopover
+      v-if="selectedField && isOptionsPopoverOpen"
+      :open="isOptionsPopoverOpen"
+      :reference="optionsPopoverReference"
+      :content="{
+        side: 'right',
+        align: 'start',
+        sideOffset: 8,
+        collisionPadding: 20,
+        avoidCollisions: true,
+        disableUpdateOnLayoutShift: true
+      }"
+      @update:open="handleNestedPopoverClose"
+    >
+      <template #content>
+        <div class="w-[200px] p-0">
+          <SelectOptionsPopover
+            :field="selectedField"
+            :values="tempValues"
+            @change="handleSelectChange"
+            @close="handleClose"
+          />
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FilterFieldsConfig, FilterFieldConfig, Filter, FilterOperatorValue } from '../../types/filter'
+import type { CommandPaletteItem } from '../../types'
+import { useFilterContext } from '../../composables/useFilterContext'
+import { ref, computed, nextTick } from 'vue'
+import { collectAllFields, getFieldGroups, hasGroups } from '../../utils/fields'
+import { getDefaultOperatorForFieldType } from '../../utils/operators'
+import SelectOptionsPopover from './SelectOptionsPopover.vue'
+import UButton from '../Button.vue'
+import UCommandPalette from '../CommandPalette.vue'
+import UIcon from '../Icon.vue'
+import UPopover from '../Popover.vue'
+
+interface Props {
+  fields: FilterFieldsConfig
+  filters: Filter[]
+  allowMultiple: boolean
+}
+
+interface FieldNavigationLevel {
+  parent: FilterFieldConfig
+  fields: FilterFieldConfig[]
+  anchor: HTMLElement | null
+  reference?: { getBoundingClientRect: () => DOMRect }
+  selectedItem?: CommandPaletteItem | CommandPaletteItem[]
+  lastHighlightRef?: HTMLElement | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  addFilter: [fieldKey: string, operator?: FilterOperatorValue, values?: unknown[], callback?: (filterId: string) => void]
+  updateFilter: [filterId: string, updates: Partial<Filter>]
+}>()
+
+const context = useFilterContext()
+const isOpen = ref(false)
+const selectedFieldItem = ref<CommandPaletteItem | CommandPaletteItem[]>()
+const selectedField = ref<FilterFieldConfig | null>(null)
+const tempValues = ref<unknown[]>([])
+const isOptionsPopoverOpen = ref(false)
+const highlightedItemRef = ref<HTMLElement | null>(null)
+const mainPopoverContentRef = ref<HTMLElement | null>(null)
+const isCreatingNewFilter = ref(true)
+const currentFilterId = ref<string | null>(null)
+// Navigation stack to manage nested field levels
+const fieldNavigationStack = ref<FieldNavigationLevel[]>([])
+
+const areFiltersSet = computed(() => {
+  return props.filters.length > 0
+})
+
+// Calculates the reference for positioning the options popover
+const optionsPopoverReference = computed(() => {
+  const refElement = highlightedItemRef.value || mainPopoverContentRef.value
+  if (!refElement) {
+    return undefined
+  }
+  return {
+    getBoundingClientRect: () => refElement.getBoundingClientRect()
+  }
+})
+
+const allFieldsMap = computed<Record<string, FilterFieldConfig>>(() => {
+  const map: Record<string, FilterFieldConfig> = {}
+  collectAllFields(props.fields).forEach((field) => {
+    if (field.key) {
+      map[field.key] = field
+    }
+  })
+  return map
+})
+
+/**
+ * Checks if a field has children (hierarchical navigation)
+ */
+function fieldHasChildren(field: FilterFieldConfig | undefined): boolean {
+  return Boolean(field && field.children && field.children.length > 0)
+}
+
+/**
+ * Determines if a field can be selected to create a filter
+ * Checks if the field is not already used (if allowMultiple is false)
+ */
+function isFieldSelectable(field: FilterFieldConfig): boolean {
+  if (!field.key || !field.type) {
+    return false
+  }
+  if (props.allowMultiple) {
+    return true
+  }
+  return !props.filters.some(filter => filter.field === field.key)
+}
+
+/**
+ * Builds command palette items from a list of fields
+ * Manages disabled state for non-selectable fields
+ */
+function buildPaletteItems(fields: FilterFieldConfig[]): CommandPaletteItem[] {
+  const items: CommandPaletteItem[] = []
+  for (const field of fields) {
+    if (!field.key) {
+      continue
+    }
+    const hasChildren = fieldHasChildren(field)
+    const disabled = !hasChildren && !isFieldSelectable(field)
+    if (disabled && !hasChildren) {
+      continue
+    }
+    items.push({
+      id: field.key,
+      label: field.label,
+      icon: typeof field.icon === 'string' ? field.icon : undefined,
+      disabled
+    })
+  }
+  return items
+}
+
+/**
+ * Creates palette groups for a given list of fields
+ */
+function getFieldPaletteGroupsForFields(fields: FilterFieldConfig[]) {
+  const items = buildPaletteItems(fields)
+  return items.length > 0
+    ? [{ id: 'fields', items }]
+    : []
+}
+
+const fieldGroups = computed(() => {
+  if (hasGroups(props.fields)) {
+    return getFieldGroups(props.fields)
+      .map((group) => {
+        const items = buildPaletteItems(group.fields)
+        if (items.length === 0) {
+          return null
+        }
+        return {
+          id: group.group,
+          label: group.group,
+          items
+        }
+      })
+      .filter((group): group is { id: string, label: string, items: CommandPaletteItem[] } => group !== null)
+  }
+
+  const rootFields = Array.isArray(props.fields) ? (props.fields as FilterFieldConfig[]) : []
+  const items = buildPaletteItems(rootFields)
+  return items.length > 0 ? [{ id: 'fields', items }] : []
+})
+
+/**
+ * Checks if a field has options to select (select/multiselect) or children
+ */
+function hasOptions(fieldKey: string | undefined): boolean {
+  if (!fieldKey) {
+    return false
+  }
+  const field = allFieldsMap.value[fieldKey]
+  if (!field) {
+    return false
+  }
+  if (fieldHasChildren(field)) {
+    return true
+  }
+  return field.type === 'select' || field.type === 'multiselect'
+}
+
+/**
+ * Creates a reference for popover positioning
+ */
+function createReference(anchor: HTMLElement | null) {
+  if (!anchor) {
+    return undefined
+  }
+  return {
+    getBoundingClientRect: () => anchor.getBoundingClientRect()
+  }
+}
+
+/**
+ * Opens a new navigation level for child fields
+ * Manages the navigation stack to enable hierarchical navigation
+ */
+function openFieldNavigationLevel(levelIndex: number, parentField: FilterFieldConfig, anchor: HTMLElement | null) {
+  const children = (parentField.children ?? []).filter((child) => {
+    return fieldHasChildren(child) || isFieldSelectable(child)
+  })
+
+  if (children.length === 0) {
+    closeFieldNavigationLevels(levelIndex)
+    return
+  }
+
+  const newLevel: FieldNavigationLevel = {
+    parent: parentField,
+    fields: children,
+    anchor,
+    reference: createReference(anchor),
+    selectedItem: undefined,
+    lastHighlightRef: null
+  }
+
+  const truncatedStack = fieldNavigationStack.value.slice(0, levelIndex) as FieldNavigationLevel[]
+  truncatedStack.push(newLevel)
+  fieldNavigationStack.value = truncatedStack
+  isCreatingNewFilter.value = true
+  currentFilterId.value = null
+}
+
+/**
+ * Closes navigation levels from a given index
+ */
+function closeFieldNavigationLevels(startIndex: number) {
+  if (fieldNavigationStack.value.length > startIndex) {
+    fieldNavigationStack.value = fieldNavigationStack.value.slice(0, startIndex)
+  }
+}
+
+/**
+ * Handles hovering over a field in the palette
+ * Automatically opens navigation or options popovers based on field type
+ */
+function handleFieldHighlighted(field: FilterFieldConfig, anchor: HTMLElement | null, nextLevelIndex: number) {
+  if (fieldHasChildren(field)) {
+    openFieldNavigationLevel(nextLevelIndex, field, anchor)
+    highlightedItemRef.value = anchor
+    isOptionsPopoverOpen.value = false
+    selectedField.value = null
+    return
+  }
+
+  closeFieldNavigationLevels(nextLevelIndex)
+  highlightedItemRef.value = anchor
+
+  if (!field.type) {
+    selectedField.value = null
+    isOptionsPopoverOpen.value = false
+    return
+  }
+
+  if (!isFieldSelectable(field) && currentFilterId.value === null) {
+    selectedField.value = null
+    isOptionsPopoverOpen.value = false
+    return
+  }
+
+  if (field.type === 'select' || field.type === 'multiselect') {
+    selectedField.value = field
+    let existingFilter: Filter | undefined
+    if (!isCreatingNewFilter.value) {
+      if (currentFilterId.value) {
+        existingFilter = props.filters.find(filter => filter.id === currentFilterId.value)
+      }
+      if (!existingFilter) {
+        existingFilter = props.filters.find(filter => filter.field === field.key)
+      }
+    }
+    tempValues.value = field.type === 'multiselect' && existingFilter ? existingFilter.values : []
+    nextTick(() => {
+      isOptionsPopoverOpen.value = true
+    })
+  } else {
+    selectedField.value = null
+    isOptionsPopoverOpen.value = false
+  }
+}
+
+/**
+ * Handles field selection in the main palette
+ */
+function handleFieldSelect(item: CommandPaletteItem | CommandPaletteItem[]) {
+  const selectedItem = Array.isArray(item) ? item[0] : item
+  if (!selectedItem || !selectedItem.id) {
+    return
+  }
+  const field = allFieldsMap.value[selectedItem.id]
+  if (!field) {
+    return
+  }
+
+  const anchor = highlightedItemRef.value || mainPopoverContentRef.value
+
+  if (fieldHasChildren(field)) {
+    openFieldNavigationLevel(0, field, anchor)
+    return
+  }
+
+  if (!isFieldSelectable(field) && currentFilterId.value === null) {
+    return
+  }
+
+  handleFieldSelectInternal(field)
+}
+
+/**
+ * Handles hovering in the main palette
+ */
+function handleHighlight(highlighted: { ref: HTMLElement, value: CommandPaletteItem } | undefined) {
+  if (!highlighted) {
+    closeFieldNavigationLevels(0)
+    isOptionsPopoverOpen.value = false
+    selectedField.value = null
+    return
+  }
+
+  const field = allFieldsMap.value[highlighted.value.id]
+  if (!field) {
+    return
+  }
+
+  if (!fieldHasChildren(field)) {
+    highlightedItemRef.value = highlighted.ref
+  }
+
+  handleFieldHighlighted(field, highlighted.ref, 0)
+}
+
+/**
+ * Handles hovering in nested navigation palettes
+ */
+function handleNestedHighlight(levelIndex: number, highlighted: { ref: HTMLElement, value: CommandPaletteItem } | undefined) {
+  const level = fieldNavigationStack.value[levelIndex]
+  if (!level) {
+    return
+  }
+
+  if (!highlighted) {
+    closeFieldNavigationLevels(levelIndex + 1)
+    return
+  }
+
+  const field = level.fields.find(f => f.key === highlighted.value.id)
+  if (!field) {
+    return
+  }
+
+  level.lastHighlightRef = highlighted.ref
+  fieldNavigationStack.value = fieldNavigationStack.value.slice() as FieldNavigationLevel[]
+
+  handleFieldHighlighted(field, highlighted.ref, levelIndex + 1)
+}
+
+/**
+ * Processes internal field selection
+ * Creates the filter or opens the options popover based on field type
+ */
+function handleFieldSelectInternal(field: FilterFieldConfig) {
+  if (!field.key || !field.type) {
+    return
+  }
+
+  if (!isFieldSelectable(field) && currentFilterId.value === null) {
+    return
+  }
+
+  closeFieldNavigationLevels(0)
+
+  if (field.type === 'select' || field.type === 'multiselect') {
+    selectedField.value = field
+    let existingFilter: Filter | undefined
+    if (!isCreatingNewFilter.value) {
+      if (currentFilterId.value) {
+        existingFilter = props.filters.find(filter => filter.id === currentFilterId.value)
+      }
+      if (!existingFilter) {
+        existingFilter = props.filters.find(filter => filter.field === field.key)
+      }
+    }
+    tempValues.value = field.type === 'multiselect' && existingFilter ? existingFilter.values : []
+    if (!highlightedItemRef.value && mainPopoverContentRef.value) {
+      highlightedItemRef.value = mainPopoverContentRef.value
+    }
+    nextTick(() => {
+      isOptionsPopoverOpen.value = true
+    })
+    return
+  }
+
+  const defaultOperator = field.defaultOperator || getDefaultOperatorForFieldType(field.type)
+  const defaultValues = getDefaultValuesForField(field)
+
+  emit('addFilter', field.key, defaultOperator, defaultValues, (filterId) => {
+    currentFilterId.value = filterId
+    isCreatingNewFilter.value = false
+  })
+  isOpen.value = false
+}
+
+/**
+ * Handles field selection in a nested navigation palette
+ */
+function handleNestedFieldSelect(levelIndex: number, item: CommandPaletteItem | CommandPaletteItem[]) {
+  const selectedItem = Array.isArray(item) ? item[0] : item
+  if (!selectedItem || !selectedItem.id) {
+    return
+  }
+
+  const level = fieldNavigationStack.value[levelIndex]
+  if (!level) {
+    return
+  }
+
+  const field = level.fields.find(f => f.key === selectedItem.id)
+  if (!field) {
+    return
+  }
+
+  const anchor = level.lastHighlightRef || level.anchor
+
+  if (fieldHasChildren(field)) {
+    openFieldNavigationLevel(levelIndex + 1, field, anchor ?? null)
+    return
+  }
+
+  if (anchor) {
+    highlightedItemRef.value = anchor
+  }
+
+  if (!isFieldSelectable(field) && currentFilterId.value === null) {
+    return
+  }
+
+  handleFieldSelectInternal(field)
+}
+
+/**
+ * Handles selection change in the options popover
+ * Creates or updates the filter based on context
+ */
+function handleSelectChange(values: unknown[], shouldClose: boolean = true) {
+  if (!selectedField.value || !selectedField.value.key || !selectedField.value.type) {
+    return
+  }
+
+  const defaultOperator = selectedField.value.defaultOperator
+    || (selectedField.value.type === 'multiselect' ? 'is_any_of' : 'is')
+
+  if (!shouldClose && selectedField.value.type === 'multiselect' && currentFilterId.value) {
+    emit('updateFilter', currentFilterId.value, { values })
+    tempValues.value = values
+    return
+  }
+
+  emit('addFilter', selectedField.value.key, defaultOperator, values, (filterId) => {
+    currentFilterId.value = filterId
+    isCreatingNewFilter.value = false
+  })
+
+  if (shouldClose) {
+    isOpen.value = false
+    isOptionsPopoverOpen.value = false
+    selectedField.value = null
+    tempValues.value = []
+    currentFilterId.value = null
+    isCreatingNewFilter.value = true
+  } else {
+    tempValues.value = values
+  }
+}
+
+/**
+ * Closes all popovers and resets state
+ */
+function handleClose() {
+  isOpen.value = false
+  isOptionsPopoverOpen.value = false
+  selectedField.value = null
+  tempValues.value = []
+  highlightedItemRef.value = null
+  currentFilterId.value = null
+  isCreatingNewFilter.value = true
+  closeFieldNavigationLevels(0)
+}
+
+/**
+ * Handles nested options popover close
+ */
+function handleNestedPopoverClose(open: boolean) {
+  if (!open) {
+    isOptionsPopoverOpen.value = false
+    selectedField.value = null
+  }
+}
+
+/**
+ * Handles main popover close
+ */
+function handleMainPopoverClose(open: boolean) {
+  if (!open) {
+    isOptionsPopoverOpen.value = false
+    selectedField.value = null
+    highlightedItemRef.value = null
+    tempValues.value = []
+    currentFilterId.value = null
+    isCreatingNewFilter.value = true
+    closeFieldNavigationLevels(0)
+  } else {
+    tempValues.value = []
+    currentFilterId.value = null
+    isCreatingNewFilter.value = true
+  }
+}
+
+/**
+ * Determines default values for a field based on its type
+ * Handles special cases for ranges and specific types
+ */
+function getDefaultValuesForField(field: FilterFieldConfig): unknown[] {
+  if (['text', 'email', 'url', 'tel'].includes(field.type || '')) {
+    return ['']
+  }
+  if (field.type === 'number') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForFieldType(field.type)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return [field.min || 0, field.max || 100]
+    }
+    return ['']
+  }
+  if (field.type === 'date') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForFieldType(field.type)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return ['', '']
+    }
+    return ['']
+  }
+  if (field.type === 'datetime') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForFieldType(field.type)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return ['', '']
+    }
+    return ['']
+  }
+  if (field.type === 'time') {
+    // If default operator is 'between' or 'not_between', return a range
+    const defaultOp = field.defaultOperator || getDefaultOperatorForFieldType(field.type)
+    if (defaultOp === 'between' || defaultOp === 'not_between') {
+      return ['', '']
+    }
+    return ['']
+  }
+  if (field.type === 'boolean') {
+    return [false]
+  }
+  return []
+}
+</script>
diff --git a/src/runtime/components/filters/FilterContextProvider.vue b/src/runtime/components/filters/FilterContextProvider.vue
new file mode 100644
index 0000000000..61113c3422
--- /dev/null
+++ b/src/runtime/components/filters/FilterContextProvider.vue
@@ -0,0 +1,59 @@
+<!--
+  Context provider for the filter system
+  Provides shared configuration (variant, size, i18n) to all child components
+  Uses Vue's provide/inject API for context propagation
+-->
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type {
+  FilterI18nConfig,
+  FiltersVariant,
+  FiltersSize,
+  FiltersRadius
+} from '../../types/filter'
+import { computed, provide } from 'vue'
+import { FilterContext } from '../../composables/useFilterContext'
+
+interface Props {
+  variant: FiltersVariant
+  size: FiltersSize
+  radius: FiltersRadius
+  i18n: FilterI18nConfig
+  cursorPointer: boolean
+  className?: string
+  showAddButton?: boolean
+  addButtonText?: string
+  addButtonIcon?: string
+  addButtonClassName?: string
+  addButton?: Component
+  showSearchInput?: boolean
+  trigger?: Component
+  allowMultiple?: boolean
+}
+
+const props = defineProps<Props>()
+
+// Creates the reactive context value that will be provided to child components
+const contextValue = computed(() => ({
+  variant: props.variant,
+  size: props.size,
+  radius: props.radius,
+  i18n: props.i18n,
+  cursorPointer: props.cursorPointer,
+  className: props.className,
+  showAddButton: props.showAddButton,
+  addButtonText: props.addButtonText,
+  addButtonIcon: props.addButtonIcon,
+  addButtonClassName: props.addButtonClassName,
+  addButton: props.addButton,
+  showSearchInput: props.showSearchInput,
+  trigger: props.trigger,
+  allowMultiple: props.allowMultiple
+}))
+
+provide(FilterContext, contextValue)
+</script>
diff --git a/src/runtime/components/filters/FilterDatePicker.vue b/src/runtime/components/filters/FilterDatePicker.vue
new file mode 100644
index 0000000000..502f5b913f
--- /dev/null
+++ b/src/runtime/components/filters/FilterDatePicker.vue
@@ -0,0 +1,69 @@
+<!--
+  Single date selection component
+  Uses UInput of type "date" for simple selection
+-->
+<template>
+  <UInput
+    :model-value="inputValue"
+    type="date"
+    :disabled="disabled"
+    :size="size"
+    :variant="variant === 'none' ? 'outline' : variant"
+    :placeholder="placeholder"
+    class="rounded-none"
+    :ui="{
+      base: 'rounded-none'
+    }"
+    @update:model-value="handleUpdate"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import UInput from '../Input.vue'
+
+interface Props {
+  modelValue: string | null
+  disabled?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  variant?: 'outline' | 'none'
+  placeholder?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md',
+  variant: 'outline',
+  placeholder: 'Select a date'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | null]
+}>()
+
+// Converts ISO value (YYYY-MM-DD) to format expected by date input
+const inputValue = computed(() => {
+  if (!props.modelValue) {
+    return ''
+  }
+  // If value is already in YYYY-MM-DD format, return it as is
+  // Otherwise, try to convert it
+  if (props.modelValue.match(/^\d{4}-\d{2}-\d{2}$/)) {
+    return props.modelValue
+  }
+  // Attempt conversion from full ISO format
+  try {
+    const date = new Date(props.modelValue)
+    if (!Number.isNaN(date.getTime())) {
+      return date.toISOString().split('T')[0]
+    }
+  } catch {
+    // Ignore parsing errors
+  }
+  return ''
+})
+
+function handleUpdate(value: string | null) {
+  emit('update:modelValue', value || null)
+}
+</script>
diff --git a/src/runtime/components/filters/FilterDateRange.vue b/src/runtime/components/filters/FilterDateRange.vue
new file mode 100644
index 0000000000..5bef9e0a9c
--- /dev/null
+++ b/src/runtime/components/filters/FilterDateRange.vue
@@ -0,0 +1,83 @@
+<!--
+  Date range selection component (start date and end date)
+  Combines two FilterDatePicker components with a separator badge
+  Uses UFieldGroup to visually link the two selectors
+-->
+<template>
+  <UFieldGroup :size="size">
+    <FilterDatePicker
+      :model-value="modelValue[0]"
+      :disabled="disabled"
+      :size="size"
+      :variant="variant"
+      class="rounded-s-md"
+      @update:model-value="updateStartDate"
+    />
+    <UBadge
+      :size="getBadgeSize(size)"
+      color="neutral"
+      variant="outline"
+      class="rounded-none"
+      :ui="{
+        label: 'justify-start whitespace-nowrap'
+      }"
+    >
+      {{ toLabel }}
+    </UBadge>
+    <FilterDatePicker
+      :model-value="modelValue[1]"
+      :disabled="disabled"
+      :size="size"
+      :variant="variant"
+      class="rounded-e-md"
+      @update:model-value="updateEndDate"
+    />
+  </UFieldGroup>
+</template>
+
+<script setup lang="ts">
+import type { FiltersSize } from '../../types/filter'
+import { getBadgeSize } from '../../utils/operators'
+import FilterDatePicker from './FilterDatePicker.vue'
+import UFieldGroup from '../FieldGroup.vue'
+import UBadge from '../Badge.vue'
+
+interface Props {
+  modelValue: [string | null, string | null]
+  disabled?: boolean
+  size?: FiltersSize
+  variant?: 'outline' | 'none'
+  toLabel?: string
+  notifyDatesSwapped?: {
+    title: string
+    description: string
+  }
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md',
+  variant: 'outline',
+  toLabel: 'to'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: [string | null, string | null]]
+}>()
+
+/**
+ * Updates start date while preserving end date
+ * If start date is after end date, swaps the two dates
+ */
+function updateStartDate(value: string | null) {
+  emit('update:modelValue', [value, props.modelValue[1]])
+}
+
+/**
+ * Updates end date while preserving start date
+ * If end date is before start date, swaps the two dates
+ */
+function updateEndDate(value: string | null) {
+  emit('update:modelValue', [props.modelValue[0], value])
+}
+</script>
diff --git a/src/runtime/components/filters/FilterDateTimeRange.vue b/src/runtime/components/filters/FilterDateTimeRange.vue
new file mode 100644
index 0000000000..3f090f6d4e
--- /dev/null
+++ b/src/runtime/components/filters/FilterDateTimeRange.vue
@@ -0,0 +1,91 @@
+<!--
+  Date/time range selection component (datetime-local)
+  Combines two datetime-local inputs with a separator badge
+  Uses UFieldGroup to visually link the two selectors
+-->
+<template>
+  <UFieldGroup :size="size">
+    <UInput
+      :model-value="modelValue[0] || ''"
+      type="datetime-local"
+      :disabled="disabled"
+      :size="size"
+      variant="outline"
+      :placeholder="placeholderStart"
+      class="rounded-none"
+      :ui="{
+        base: 'rounded-none'
+      }"
+      @update:model-value="updateStartDateTime"
+    />
+    <UBadge
+      :size="getBadgeSize(size)"
+      color="neutral"
+      variant="outline"
+      class="rounded-none"
+      :ui="{
+        label: 'justify-start whitespace-nowrap'
+      }"
+    >
+      {{ toLabel }}
+    </UBadge>
+    <UInput
+      :model-value="modelValue[1] || ''"
+      type="datetime-local"
+      :disabled="disabled"
+      :size="size"
+      variant="outline"
+      :placeholder="placeholderEnd"
+      class="rounded-none"
+      :ui="{
+        base: 'rounded-none'
+      }"
+      @update:model-value="updateEndDateTime"
+    />
+  </UFieldGroup>
+</template>
+
+<script setup lang="ts">
+import type { FiltersSize } from '../../types/filter'
+import { getBadgeSize } from '../../utils/operators'
+import UFieldGroup from '../FieldGroup.vue'
+import UInput from '../Input.vue'
+import UBadge from '../Badge.vue'
+
+interface Props {
+  modelValue: [string | null, string | null]
+  disabled?: boolean
+  size?: FiltersSize
+  variant?: 'outline' | 'none'
+  toLabel?: string
+  placeholderStart?: string
+  placeholderEnd?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md',
+  variant: 'outline',
+  toLabel: 'and',
+  placeholderStart: 'Start date/time',
+  placeholderEnd: 'End date/time'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: [string | null, string | null]]
+}>()
+
+/**
+ * Updates start date/time while preserving end date/time
+ */
+function updateStartDateTime(value: string | null) {
+  emit('update:modelValue', [value || null, props.modelValue[1]])
+}
+
+/**
+ * Updates end date/time while preserving start date/time
+ */
+function updateEndDateTime(value: string | null) {
+  emit('update:modelValue', [props.modelValue[0], value || null])
+}
+</script>
diff --git a/src/runtime/components/filters/FilterItem.vue b/src/runtime/components/filters/FilterItem.vue
new file mode 100644
index 0000000000..5da9201720
--- /dev/null
+++ b/src/runtime/components/filters/FilterItem.vue
@@ -0,0 +1,95 @@
+<!--
+  Component representing an individual active filter
+  Displays the field, operator and value selector in a styled field group
+  Allows filter modification and removal
+-->
+<template>
+  <UFieldGroup
+    :size="context.size"
+    :class="filterItemClasses"
+    data-slot="filter-item"
+  >
+    <!-- Field Label Badge -->
+    <UBadge
+      :color="context.variant === 'solid' ? 'neutral' : 'neutral'"
+      :variant="context.variant === 'solid' ? 'subtle' : 'outline'"
+      :size="getBadgeSize(context.size)"
+      :class="[
+        'rounded-s-md',
+        context.radius === 'full' ? 'rounded-s-full' : '',
+        'justify-start whitespace-nowrap'
+      ]"
+      :ui="{
+        label: 'whitespace-nowrap'
+      }"
+      :icon="field?.icon && typeof field.icon === 'string' ? field.icon : undefined"
+    >
+      {{ field?.label || filter.field }}
+    </UBadge>
+
+    <!-- Operator Dropdown -->
+    <FilterOperatorDropdown
+      v-if="field"
+      :field="field"
+      :operator="filter.operator"
+      :values="filter.values"
+      @change="(op: FilterOperatorValue) => $emit('update', { operator: op })"
+    />
+
+    <!-- Value Selector -->
+    <FilterValueSelector
+      v-if="field"
+      :field="field"
+      :values="filter.values"
+      :operator="filter.operator"
+      @change="(vals) => $emit('update', { values: vals })"
+    />
+
+    <!-- Remove Button -->
+    <UButton
+      :color="context.variant === 'solid' ? 'neutral' : 'neutral'"
+      :variant="context.variant === 'solid' ? 'subtle' : 'outline'"
+      :size="context.size"
+      :class="[
+        'rounded-e-md',
+        context.radius === 'full' ? 'rounded-e-full' : ''
+      ]"
+      icon="i-lucide-x"
+      square
+      @click="$emit('remove')"
+    />
+  </UFieldGroup>
+</template>
+
+<script setup lang="ts">
+import type { Filter, FilterFieldConfig, FilterOperatorValue } from '../../types/filter'
+import { useFilterContext } from '../../composables/useFilterContext'
+import { computed } from 'vue'
+import { getBadgeSize } from '../../utils/operators'
+import FilterOperatorDropdown from './FilterOperatorDropdown.vue'
+import FilterValueSelector from './FilterValueSelector.vue'
+import UButton from '../Button.vue'
+import UBadge from '../Badge.vue'
+import UFieldGroup from '../FieldGroup.vue'
+
+interface Props {
+  filter: Filter
+  field?: FilterFieldConfig
+}
+
+defineProps<Props>()
+
+defineEmits<{
+  update: [updates: Partial<Filter>]
+  remove: []
+}>()
+
+const context = useFilterContext()
+
+// Calculates CSS classes for the filter container based on variant
+const filterItemClasses = computed(() => {
+  const base = 'shadow-xs shadow-black/5'
+  const gap = context.variant === 'solid' ? '' : ''
+  return [base, gap].filter(Boolean).join(' ')
+})
+</script>
diff --git a/src/runtime/components/filters/FilterNumberRange.vue b/src/runtime/components/filters/FilterNumberRange.vue
new file mode 100644
index 0000000000..59551b4762
--- /dev/null
+++ b/src/runtime/components/filters/FilterNumberRange.vue
@@ -0,0 +1,101 @@
+<!--
+  Number range selection component (min/max)
+  Combines two number inputs with a separator badge
+  Uses UFieldGroup to visually link the two selectors
+  Supports min, max and step constraints
+-->
+<template>
+  <UFieldGroup :size="size">
+    <UInput
+      :model-value="modelValue[0] || 0"
+      type="number"
+      :disabled="disabled"
+      :size="size"
+      :variant="variant"
+      :min="min"
+      :max="max"
+      :step="step"
+      :placeholder="minLabel"
+      class="rounded-none"
+      :ui="{
+        base: 'rounded-none'
+      }"
+      @update:model-value="updateMin"
+    />
+    <UBadge
+      :size="getBadgeSize(size)"
+      color="neutral"
+      variant="outline"
+      class="rounded-none"
+      :ui="{
+        label: 'justify-start whitespace-nowrap'
+      }"
+    >
+      {{ toLabel }}
+    </UBadge>
+    <UInput
+      :model-value="modelValue[1] || 0"
+      type="number"
+      :disabled="disabled"
+      :size="size"
+      :variant="variant"
+      :min="min"
+      :max="max"
+      :step="step"
+      :placeholder="maxLabel"
+      class="rounded-none"
+      :ui="{
+        base: 'rounded-none'
+      }"
+      @update:model-value="updateMax"
+    />
+  </UFieldGroup>
+</template>
+
+<script setup lang="ts">
+import type { FiltersSize } from '../../types/filter'
+import { getBadgeSize } from '../../utils/operators'
+import UFieldGroup from '../FieldGroup.vue'
+import UInput from '../Input.vue'
+import UBadge from '../Badge.vue'
+
+interface Props {
+  modelValue: [number | null, number | null]
+  disabled?: boolean
+  size?: FiltersSize
+  variant?: 'outline' | 'none'
+  min?: number
+  max?: number
+  step?: number
+  minLabel?: string
+  maxLabel?: string
+  toLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md',
+  variant: 'outline',
+  minLabel: 'Min',
+  maxLabel: 'Max',
+  toLabel: 'to'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: [number | null, number | null]]
+}>()
+
+/**
+ * Updates minimum value while preserving maximum value
+ */
+function updateMin(value: number | null) {
+  emit('update:modelValue', [value, props.modelValue[1]])
+}
+
+/**
+ * Updates maximum value while preserving minimum value
+ */
+function updateMax(value: number | null) {
+  emit('update:modelValue', [props.modelValue[0], value])
+}
+</script>
diff --git a/src/runtime/components/filters/FilterOperatorDropdown.vue b/src/runtime/components/filters/FilterOperatorDropdown.vue
new file mode 100644
index 0000000000..4c0f7b964b
--- /dev/null
+++ b/src/runtime/components/filters/FilterOperatorDropdown.vue
@@ -0,0 +1,105 @@
+<!--
+  Dropdown component for selecting a filter operator
+  Displays available operators for the given field type
+  Highlights the currently selected operator
+-->
+<template>
+  <UDropdownMenu
+    :items="dropdownItems"
+    :size="context.size"
+    :ui="{
+      content: 'w-fit min-w-fit',
+      item: 'text-sm'
+    }"
+    @select="handleSelect"
+  >
+    <UButton
+      :color="context.variant === 'solid' ? 'neutral' : 'neutral'"
+      :variant="context.variant === 'solid' ? 'subtle' : 'outline'"
+      :size="context.size"
+      class="rounded-none whitespace-nowrap"
+      :ui="{
+        label: 'whitespace-nowrap'
+      }"
+    >
+      {{ operatorLabel }}
+      <template #trailing>
+        <UIcon
+          name="i-lucide-chevron-down"
+          class="h-4 w-4 opacity-60 shrink-0"
+        />
+      </template>
+    </UButton>
+
+    <template #item-trailing="{ item }">
+      <UIcon
+        v-if="item.value === operator"
+        name="i-lucide-check"
+        class="ml-auto text-primary"
+      />
+    </template>
+  </UDropdownMenu>
+</template>
+
+<script setup lang="ts">
+import type { FilterFieldConfig, FilterOperatorValue } from '../../types/filter'
+import { useFilterContext } from '../../composables/useFilterContext'
+import { computed } from 'vue'
+import { getOperatorsForFieldType } from '../../utils/operators'
+import type { DropdownMenuItem } from '../../types'
+import UButton from '../Button.vue'
+import UIcon from '../Icon.vue'
+import UDropdownMenu from '../DropdownMenu.vue'
+
+interface Props {
+  field: FilterFieldConfig
+  operator: FilterOperatorValue
+  values: unknown[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  change: [operator: FilterOperatorValue]
+}>()
+
+const context = useFilterContext()
+
+// Gets available operators for field type
+const operators = computed(() => {
+  if (!props.field.type) {
+    return []
+  }
+  return getOperatorsForFieldType(props.field.type, props.field.operators)
+})
+
+// Calculates current operator label for display
+const operatorLabel = computed(() => {
+  const op = operators.value.find(o => o.value === props.operator)
+  if (op) {
+    return op.label
+  }
+  return context.i18n.helpers.formatOperator(props.operator)
+})
+
+// Builds dropdown menu items from available operators
+const dropdownItems = computed<DropdownMenuItem[]>(() => {
+  return operators.value.map(op => ({
+    label: op.label,
+    value: op.value,
+    onSelect: () => {
+      emit('change', op.value as FilterOperatorValue)
+    }
+  }))
+})
+
+/**
+ * Handles operator selection in the dropdown
+ */
+function handleSelect(item: DropdownMenuItem | DropdownMenuItem[]) {
+  const selectedItem = Array.isArray(item) ? item[0] : item
+  if (selectedItem?.value) {
+    emit('change', selectedItem.value as FilterOperatorValue)
+  }
+}
+</script>
diff --git a/src/runtime/components/filters/FilterTimeRange.vue b/src/runtime/components/filters/FilterTimeRange.vue
new file mode 100644
index 0000000000..ee4b8926f3
--- /dev/null
+++ b/src/runtime/components/filters/FilterTimeRange.vue
@@ -0,0 +1,91 @@
+<!--
+  Time range selection component (time)
+  Combines two time inputs with a separator badge
+  Uses UFieldGroup to visually link the two selectors
+-->
+<template>
+  <UFieldGroup :size="size">
+    <UInput
+      :model-value="modelValue[0] || ''"
+      type="time"
+      :disabled="disabled"
+      :size="size"
+      variant="outline"
+      :placeholder="placeholderStart"
+      class="rounded-none"
+      :ui="{
+        base: 'rounded-none'
+      }"
+      @update:model-value="updateStartTime"
+    />
+    <UBadge
+      :size="getBadgeSize(size)"
+      color="neutral"
+      variant="outline"
+      class="rounded-none"
+      :ui="{
+        label: 'justify-start whitespace-nowrap'
+      }"
+    >
+      {{ toLabel }}
+    </UBadge>
+    <UInput
+      :model-value="modelValue[1] || ''"
+      type="time"
+      :disabled="disabled"
+      :size="size"
+      variant="outline"
+      :placeholder="placeholderEnd"
+      class="rounded-none"
+      :ui="{
+        base: 'rounded-none'
+      }"
+      @update:model-value="updateEndTime"
+    />
+  </UFieldGroup>
+</template>
+
+<script setup lang="ts">
+import type { FiltersSize } from '../../types/filter'
+import { getBadgeSize } from '../../utils/operators'
+import UFieldGroup from '../FieldGroup.vue'
+import UInput from '../Input.vue'
+import UBadge from '../Badge.vue'
+
+interface Props {
+  modelValue: [string | null, string | null]
+  disabled?: boolean
+  size?: FiltersSize
+  variant?: 'outline' | 'none'
+  toLabel?: string
+  placeholderStart?: string
+  placeholderEnd?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'md',
+  variant: 'outline',
+  toLabel: 'and',
+  placeholderStart: 'Start time',
+  placeholderEnd: 'End time'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: [string | null, string | null]]
+}>()
+
+/**
+ * Updates start time while preserving end time
+ */
+function updateStartTime(value: string | null) {
+  emit('update:modelValue', [value || null, props.modelValue[1]])
+}
+
+/**
+ * Updates end time while preserving start time
+ */
+function updateEndTime(value: string | null) {
+  emit('update:modelValue', [props.modelValue[0], value || null])
+}
+</script>
diff --git a/src/runtime/components/filters/FilterValueSelector.vue b/src/runtime/components/filters/FilterValueSelector.vue
new file mode 100644
index 0000000000..23b8a653b9
--- /dev/null
+++ b/src/runtime/components/filters/FilterValueSelector.vue
@@ -0,0 +1,443 @@
+<!--
+  Smart value selector component for a filter
+  Automatically selects the correct input component based on field type and operator
+  Supports all field types: text, number, date, select, boolean, etc.
+  Handles special cases like ranges (between/not_between) and operators without values (empty/not_empty)
+-->
+<template>
+  <!-- Hide value input for empty/not_empty operators -->
+  <template v-if="operator !== 'empty' && operator !== 'not_empty'">
+    <!-- Custom renderer -->
+    <component
+      :is="field.customRenderer"
+      v-if="field.customRenderer"
+      :field="field"
+      :values="values"
+      :operator="operator"
+      @change="(vals: unknown[]) => $emit('change', vals)"
+    />
+
+    <!-- Boolean -->
+    <UButton
+      v-else-if="field.type === 'boolean'"
+      :color="context.variant === 'solid' ? 'neutral' : 'neutral'"
+      :variant="context.variant === 'solid' ? 'subtle' : 'outline'"
+      :size="context.size"
+      class="rounded-none"
+      disabled
+    >
+      <USwitch
+        :model-value="values[0] === true"
+        size="xs"
+        @update:model-value="(checked: boolean) => $emit('change', [checked])"
+        @click.stop
+      />
+      <span
+        v-if="field.onLabel && field.offLabel"
+        class="text-xs text-muted-foreground ml-2"
+      >
+        {{ values[0] === true ? field.onLabel : field.offLabel }}
+      </span>
+    </UButton>
+
+    <!-- Select/Multiselect -->
+    <USelectMenu
+      v-else-if="field.type === 'select' || field.type === 'multiselect'"
+      :model-value="selectedItems"
+      :items="selectItems"
+      :placeholder="field.placeholder || context.i18n.select"
+      :size="context.size"
+      :search-input="field.searchable !== false"
+      :multiple="field.type === 'multiselect'"
+      class="rounded-none"
+      @update:model-value="handleSelectUpdate"
+    />
+
+    <!-- Use FilterNumberRange for number with between/not_between operators -->
+    <FilterNumberRange
+      v-else-if="field.type === 'number' && (operator === 'between' || operator === 'not_between')"
+      :model-value="getNumberRangeValue()"
+      :size="context.size"
+      :variant="context.variant === 'solid' ? 'outline' : 'outline'"
+      :min="field.min"
+      :max="field.max"
+      :step="field.step"
+      :min-label="context.i18n.min"
+      :max-label="context.i18n.max"
+      :to-label="context.i18n.toAlt"
+      class="rounded-none"
+      @update:model-value="handleNumberRangeUpdate"
+    />
+
+    <!-- Use FilterTimeRange for time with between/not_between operators -->
+    <FilterTimeRange
+      v-else-if="field.type === 'time' && (operator === 'between' || operator === 'not_between')"
+      :model-value="getDateRangeValue()"
+      :size="context.size"
+      :variant="context.variant === 'solid' ? 'outline' : 'outline'"
+      :to-label="context.i18n.toAlt"
+      class="rounded-none"
+      @update:model-value="handleDateRangeUpdate"
+    />
+
+    <!-- Use FilterDateTimeRange for datetime with between/not_between operators -->
+    <FilterDateTimeRange
+      v-else-if="field.type === 'datetime' && (operator === 'between' || operator === 'not_between')"
+      :model-value="getDateRangeValue()"
+      :size="context.size"
+      :variant="context.variant === 'solid' ? 'outline' : 'outline'"
+      :to-label="context.i18n.toAlt"
+      class="rounded-none"
+      @update:model-value="handleDateRangeUpdate"
+    />
+
+    <!-- Use UInput directly for simple types (except date, time, datetime and number with range operators) -->
+    <UTooltip
+      v-else-if="['text', 'number', 'email', 'url', 'tel', 'time', 'datetime'].includes(field.type || '')"
+      :open="shouldShowTooltip"
+      :text="validationError || ''"
+      :disabled="!validationError"
+      :content="{ side: 'top' }"
+    >
+      <UInput
+        :model-value="getSingleValue() || ''"
+        :type="getInputType()"
+        :placeholder="field.placeholder || context.i18n.placeholders.enterValue"
+        :size="context.size"
+        :variant="context.variant === 'solid' ? 'outline' : 'outline'"
+        :color="validationError ? 'error' : undefined"
+        :highlight="!!validationError"
+        class="rounded-none"
+        :ui="{
+          base: 'rounded-none'
+        }"
+        @update:model-value="handleSingleValueUpdate"
+        @focus="isInputFocused = true"
+        @blur="isInputFocused = false"
+        @mouseenter="isInputHovered = true"
+        @mouseleave="isInputHovered = false"
+      />
+    </UTooltip>
+
+    <!-- Use FilterDateRange for date with between/not_between operators -->
+    <FilterDateRange
+      v-else-if="field.type === 'date' && (operator === 'between' || operator === 'not_between')"
+      :model-value="getDateRangeValue()"
+      :size="context.size"
+      :variant="context.variant === 'solid' ? 'outline' : 'outline'"
+      :to-label="context.i18n.toAlt"
+      class="rounded-none"
+      @update:model-value="handleDateRangeUpdate"
+    />
+
+    <!-- Use FilterDatePicker for date (single date) -->
+    <UTooltip
+      v-else-if="field.type === 'date'"
+      :open="shouldShowTooltip"
+      :text="validationError || ''"
+      :disabled="!validationError"
+      :content="{ side: 'top' }"
+    >
+      <div
+        @focusin="isInputFocused = true"
+        @focusout="isInputFocused = false"
+        @mouseenter="isInputHovered = true"
+        @mouseleave="isInputHovered = false"
+      >
+        <FilterDatePicker
+          :model-value="dateValue"
+          :size="context.size"
+          :variant="context.variant === 'solid' ? 'outline' : 'outline'"
+          :placeholder="field.placeholder || context.i18n.placeholders.selectField"
+          class="rounded-none"
+          :class="{ 'ring-2 ring-error': validationError }"
+          @update:model-value="handleSingleValueUpdate"
+        />
+      </div>
+    </UTooltip>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { FilterFieldConfig, FilterOperatorValue } from '../../types/filter'
+import { useFilterContext } from '../../composables/useFilterContext'
+import { ref, computed, watch, nextTick } from 'vue'
+import { validateFilterValue, validateEmail, validateUrl, validateTel } from '../../utils/validation'
+import FilterDateRange from './FilterDateRange.vue'
+import FilterDateTimeRange from './FilterDateTimeRange.vue'
+import FilterTimeRange from './FilterTimeRange.vue'
+import FilterNumberRange from './FilterNumberRange.vue'
+import FilterDatePicker from './FilterDatePicker.vue'
+import UButton from '../Button.vue'
+import USwitch from '../Switch.vue'
+import USelectMenu from '../SelectMenu.vue'
+import UTooltip from '../Tooltip.vue'
+import UInput from '../Input.vue'
+
+interface Props {
+  field: FilterFieldConfig
+  values: unknown[]
+  operator: FilterOperatorValue
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  change: [values: unknown[]]
+}>()
+
+const context = useFilterContext()
+
+// State for validation errors
+const validationError = ref<string | null>(null)
+
+// State to track input focus and hover
+const isInputFocused = ref(false)
+const isInputHovered = ref(false)
+
+// Computed to determine if tooltip should be open
+const shouldShowTooltip = computed(() => {
+  return !!validationError.value && (isInputFocused.value || isInputHovered.value)
+})
+
+/**
+ * Determines the HTML input type to use based on field type
+ */
+function getInputType(): 'text' | 'email' | 'url' | 'tel' | 'date' | 'time' | 'datetime-local' | 'number' {
+  if (!props.field.type) {
+    return 'text'
+  }
+  if (props.field.type === 'datetime') {
+    return 'datetime-local'
+  }
+  return props.field.type as 'text' | 'email' | 'url' | 'tel' | 'date' | 'time' | 'datetime-local' | 'number'
+}
+
+/**
+ * Extracts the first value from the values array (for simple inputs)
+ */
+function getSingleValue(): string | number | null {
+  if (props.values.length === 0) {
+    return null
+  }
+  return props.values[0] as string | number
+}
+
+/**
+ * Determines if the operator requires strict validation (complete value)
+ * Partial search operators (contains, starts_with, etc.) don't require strict validation
+ */
+function requiresStrictValidation(): boolean {
+  const partialOperators: FilterOperatorValue[] = [
+    'contains',
+    'not_contains',
+    'starts_with',
+    'ends_with',
+    'greater_than',
+    'less_than',
+    'before',
+    'after'
+  ]
+  return !partialOperators.includes(props.operator)
+}
+
+/**
+ * Validates a value according to field type and configuration
+ * @param value - Value to validate
+ * @returns true if value is valid, false otherwise
+ */
+function validateValue(value: string | number | null): boolean {
+  // Reset error at start
+  validationError.value = null
+
+  if (value === null || value === '') {
+    return true
+  }
+
+  const stringValue = String(value)
+
+  // Automatic validation based on field type (only for operators requiring strict validation)
+  if (requiresStrictValidation()) {
+    if (props.field.type === 'email') {
+      if (!validateEmail(stringValue)) {
+        const errorMsg = context.i18n?.validation?.invalidEmail || 'Invalid email format'
+        validationError.value = errorMsg
+        return false
+      }
+    } else if (props.field.type === 'url') {
+      if (!validateUrl(stringValue)) {
+        const errorMsg = context.i18n?.validation?.invalidUrl || 'Invalid URL format'
+        validationError.value = errorMsg
+        return false
+      }
+    } else if (props.field.type === 'tel') {
+      if (!validateTel(stringValue)) {
+        const errorMsg = context.i18n?.validation?.invalidTel || 'Invalid phone format'
+        validationError.value = errorMsg
+        return false
+      }
+    }
+  }
+
+  // Validation with pattern or custom function (only if defined)
+  // For partial operators, we still validate the pattern if defined
+  // as it can be useful to validate allowed characters even in a partial search
+  if (props.field.pattern || props.field.validation) {
+    const validationResult = validateFilterValue(value, props.field.pattern, props.field.validation)
+    if (!validationResult.isValid) {
+      // Use custom error message if provided, otherwise use default message
+      const errorMsg = validationResult.errorMessage || context.i18n?.validation?.invalid || 'Invalid input format'
+      validationError.value = errorMsg
+      return false
+    }
+  }
+
+  return true
+}
+
+/**
+ * Handles update of a simple value (non-range)
+ * Validates the value and displays errors, but always emits the value to keep synchronization
+ */
+function handleSingleValueUpdate(value: string | number | null) {
+  if (value === null || value === '') {
+    validationError.value = null
+    emit('change', [])
+    return
+  }
+
+  // Validate value immediately on input
+  validateValue(value)
+
+  // Emit value even if invalid to keep synchronization
+  // Parent can use validateFilter() to check validity
+  emit('change', [value])
+}
+
+// Builds items for select/multiselect components
+const selectItems = computed(() => {
+  return props.field.options?.map(opt => ({
+    label: opt.label,
+    value: opt.value,
+    icon: typeof opt.icon === 'string' ? opt.icon : undefined
+  })) || []
+})
+
+// Determines selected items for select/multiselect components
+const selectedItems = computed(() => {
+  if (props.field.type === 'multiselect') {
+    return selectItems.value.filter(item => props.values.includes(item.value as string | number))
+  }
+  if (props.values.length > 0) {
+    return selectItems.value.find(item => item.value === props.values[0])
+  }
+  return undefined
+})
+
+/**
+ * Handles selection update for select/multiselect fields
+ */
+function handleSelectUpdate(item: { label: string, value: unknown } | { label: string, value: unknown }[] | undefined) {
+  if (!item) {
+    emit('change', [])
+    return
+  }
+  if (Array.isArray(item)) {
+    emit('change', item.map(i => i.value))
+  } else {
+    emit('change', [item.value])
+  }
+}
+
+/**
+ * Extracts range values for date/datetime/time types
+ */
+function getDateRangeValue(): [string | null, string | null] {
+  if (props.values.length < 2) {
+    return [null, null]
+  }
+  return [
+    props.values[0] as string | null,
+    props.values[1] as string | null
+  ]
+}
+
+/**
+ * Extracts range values for number type
+ */
+function getNumberRangeValue(): [number | null, number | null] {
+  if (props.values.length < 2) {
+    return [null, null]
+  }
+  return [
+    props.values[0] as number | null,
+    props.values[1] as number | null
+  ]
+}
+
+/**
+ * Handles update of a date/datetime/time range
+ * Preserves tuple structure even with null values to maintain reactivity
+ */
+function handleDateRangeUpdate(value: [string | null, string | null]) {
+  // Don't filter null values to maintain tuple structure
+  // Otherwise reactivity is broken as we go from [val, null] to [val] then to [val, val2]
+  emit('change', [value[0] || '', value[1] || ''])
+}
+
+/**
+ * Handles update of a number range
+ * Filters null values to keep only defined values
+ */
+function handleNumberRangeUpdate(value: [number | null, number | null]) {
+  emit('change', value.filter(v => v !== null))
+}
+
+// Date value for FilterDatePicker (returns string | null)
+const dateValue = computed(() => {
+  const value = getSingleValue()
+  return value === null ? null : String(value)
+})
+
+// Validate existing value on load and when it changes
+watch(
+  () => props.values,
+  () => {
+    // Use nextTick to ensure context is available
+    nextTick(() => {
+      const value = getSingleValue()
+      validateValue(value)
+    })
+  },
+  { immediate: true, deep: true }
+)
+
+// Revalidate when field changes (to account for pattern/validation changes)
+watch(
+  () => [props.field.pattern, props.field.validation, props.field.type],
+  () => {
+    nextTick(() => {
+      const value = getSingleValue()
+      if (value !== null && value !== '') {
+        validateValue(value)
+      }
+    })
+  },
+  { deep: true }
+)
+
+// Revalidate when operator changes (as validation depends on operator)
+watch(
+  () => props.operator,
+  () => {
+    nextTick(() => {
+      const value = getSingleValue()
+      if (value !== null && value !== '') {
+        validateValue(value)
+      } else {
+        validationError.value = null
+      }
+    })
+  }
+)
+</script>
diff --git a/src/runtime/components/filters/SelectOptionsPopover.vue b/src/runtime/components/filters/SelectOptionsPopover.vue
new file mode 100644
index 0000000000..bdab63dde7
--- /dev/null
+++ b/src/runtime/components/filters/SelectOptionsPopover.vue
@@ -0,0 +1,122 @@
+<!--
+  Option selection component in a popover
+  Uses UCommandPalette to enable search and multiple selection
+  Organizes options into groups (selected / available)
+-->
+<template>
+  <UCommandPalette
+    v-model="selectedValues"
+    :groups="commandGroups"
+    :placeholder="context.i18n.placeholders.searchField(field.label || '')"
+    :ui="{
+      input: '[&>input]:h-8 [&>input]:text-sm'
+    }"
+    :multiple="isMultiSelect"
+    @update:model-value="handleChange"
+  >
+    <template #empty>
+      <div class="py-4 text-center text-sm text-gray-500">
+        {{ context.i18n.noResultsFound }}
+      </div>
+    </template>
+  </UCommandPalette>
+</template>
+
+<script setup lang="ts">
+import type { CommandPaletteItem } from '../../types'
+import type { FilterFieldConfig } from '../../types/filter'
+import { useFilterContext } from '../../composables/useFilterContext'
+import { ref, computed, watch } from 'vue'
+import UCommandPalette from '../CommandPalette.vue'
+
+interface Props {
+  field: FilterFieldConfig
+  values: unknown[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  change: [values: unknown[], shouldClose?: boolean]
+  close: []
+}>()
+
+const context = useFilterContext()
+const selectedValues = ref<CommandPaletteItem[]>([])
+
+// Determines if multiselect mode is enabled
+const isMultiSelect = computed(() => props.field.type === 'multiselect' || props.values.length > 1)
+
+// Initializes selectedValues from props.values to synchronize state
+watch(
+  () => props.values,
+  (newValues) => {
+    if (props.field.options) {
+      selectedValues.value = props.field.options
+        .filter(opt => newValues.includes(opt.value))
+        .map(opt => ({
+          id: String(opt.value),
+          label: opt.label,
+          icon: typeof opt.icon === 'string' ? opt.icon : undefined
+        })) as CommandPaletteItem[]
+    }
+  },
+  { immediate: true }
+)
+
+// Organizes options into groups: selected first, then available
+const commandGroups = computed(() => {
+  if (!props.field.options) {
+    return []
+  }
+
+  const selectedOptions = props.field.options.filter(opt => props.values.includes(opt.value))
+  const unselectedOptions = props.field.options.filter(opt => !props.values.includes(opt.value))
+
+  const groups: Array<{ id: string, items: CommandPaletteItem[] }> = []
+
+  if (selectedOptions.length > 0) {
+    groups.push({
+      id: 'selected',
+      items: selectedOptions.map(opt => ({
+        id: String(opt.value),
+        label: opt.label,
+        icon: typeof opt.icon === 'string' ? opt.icon : undefined
+      }))
+    })
+  }
+
+  if (unselectedOptions.length > 0) {
+    groups.push({
+      id: 'available',
+      items: unselectedOptions.map(opt => ({
+        id: String(opt.value),
+        label: opt.label,
+        icon: typeof opt.icon === 'string' ? opt.icon : undefined
+      }))
+    })
+  }
+
+  return groups
+})
+
+/**
+ * Handles selection change in the palette
+ * Automatically closes popover for simple selections, stays open for multiselect
+ */
+function handleChange(items: CommandPaletteItem | CommandPaletteItem[]) {
+  const selectedItems = Array.isArray(items) ? items : [items]
+  const newValues = selectedItems
+    .map((item) => {
+      const option = props.field.options?.find(opt => String(opt.value) === item.id)
+      return option?.value
+    })
+    .filter((v): v is unknown => v !== undefined)
+
+  if (isMultiSelect.value) {
+    emit('change', newValues, false)
+  } else {
+    emit('change', newValues, true)
+  }
+}
+</script>
diff --git a/src/runtime/composables/useFilterContext.ts b/src/runtime/composables/useFilterContext.ts
new file mode 100644
index 0000000000..8a3b827d0d
--- /dev/null
+++ b/src/runtime/composables/useFilterContext.ts
@@ -0,0 +1,53 @@
+import { inject } from 'vue'
+import type {
+  FilterI18nConfig,
+  FiltersVariant,
+  FiltersSize,
+  FiltersRadius
+} from '../types/filter'
+import type { Component } from 'vue'
+
+/**
+ * Composable and context for the filter system
+ * Allows sharing configuration (variant, size, i18n) between all child components
+ */
+
+/**
+ * Value of the context shared between all filter components
+ * Contains visual and functional configuration
+ */
+export interface FilterContextValue {
+  variant: FiltersVariant
+  size: FiltersSize
+  radius: FiltersRadius
+  i18n: FilterI18nConfig
+  cursorPointer: boolean
+  className?: string
+  showAddButton?: boolean
+  addButtonText?: string
+  addButtonIcon?: string
+  addButtonClassName?: string
+  addButton?: Component
+  showSearchInput?: boolean
+  trigger?: Component
+  allowMultiple?: boolean // Allows multiple filters on the same field
+}
+
+/**
+ * Unique symbol for Vue context injection
+ * Ensures context uniqueness in the component tree
+ */
+export const FilterContext = Symbol('FilterContext') as symbol
+
+/**
+ * Composable to access the filter context
+ * @throws Error if used outside a FilterContextProvider
+ * @returns The filter context configuration
+ */
+export function useFilterContext(): FilterContextValue {
+  const context = inject<FilterContextValue>(FilterContext)
+  if (!context) {
+    throw new Error('useFilterContext must be used within FilterContextProvider')
+  }
+  return context
+}
diff --git a/src/runtime/types/filter.ts b/src/runtime/types/filter.ts
new file mode 100644
index 0000000000..88df88f5ea
--- /dev/null
+++ b/src/runtime/types/filter.ts
@@ -0,0 +1,204 @@
+import type { Component } from 'vue'
+
+/**
+ * Field types supported by the filter system
+ * Each type determines available operators and the input component used
+ */
+export type FilterFieldType
+  = | 'select'
+    | 'multiselect'
+    | 'date'
+    | 'text'
+    | 'number'
+    | 'boolean'
+    | 'email'
+    | 'url'
+    | 'tel'
+    | 'time'
+    | 'datetime'
+    | 'custom'
+    | 'separator'
+
+/**
+ * Possible values for filter operators
+ * Covers comparison operations, text search, ranges, etc.
+ */
+export type FilterOperatorValue
+  = | 'is'
+    | 'is_not'
+    | 'is_any_of'
+    | 'is_not_any_of'
+    | 'includes_all'
+    | 'excludes_all'
+    | 'before'
+    | 'after'
+    | 'between'
+    | 'not_between'
+    | 'contains'
+    | 'not_contains'
+    | 'starts_with'
+    | 'ends_with'
+    | 'is_exactly'
+    | 'equals'
+    | 'not_equals'
+    | 'greater_than'
+    | 'less_than'
+    | 'overlaps'
+    | 'includes'
+    | 'excludes'
+    | 'includes_all_of'
+    | 'includes_any_of'
+    | 'empty'
+    | 'not_empty'
+
+/**
+ * Visual variants for filter components
+ */
+export type FiltersVariant = 'solid' | 'outline'
+export type FiltersSize = 'sm' | 'md' | 'lg'
+export type FiltersRadius = 'md' | 'full'
+
+/**
+ * Option available for a select or multiselect field type
+ * @template T - Type of the option value
+ */
+export interface FilterOption<T = unknown> {
+  value: T
+  label: string
+  icon?: string | Component
+}
+
+/**
+ * Definition of a filter operator with its label and capabilities
+ */
+export interface FilterOperator {
+  value: FilterOperatorValue
+  label: string
+  supportsMultiple?: boolean
+}
+
+/**
+ * Complete configuration of a filterable field
+ * Defines the type, options, available operators, validation constraints, etc.
+ * @template T - Type of field values
+ */
+export interface FilterFieldConfig<T = unknown> {
+  key: string
+  label: string
+  icon?: string | Component
+  type?: FilterFieldType
+  options?: FilterOption<T>[]
+  operators?: FilterOperator[]
+  placeholder?: string
+  searchable?: boolean
+  className?: string
+  defaultOperator?: FilterOperatorValue
+  popoverContentClassName?: string
+  maxSelections?: number
+  min?: number
+  max?: number
+  step?: number
+  prefix?: string | Component
+  suffix?: string | Component
+  pattern?: string
+  validation?: (value: unknown) => boolean | string | null | undefined
+  allowCustomValues?: boolean
+  onLabel?: string
+  offLabel?: string
+  customRenderer?: Component
+  children?: FilterFieldConfig<T>[] // Allows creation of nested/hierarchical fields
+}
+
+/**
+ * Field group for organization in the interface
+ * Allows grouping fields by category
+ */
+export interface FilterFieldGroup {
+  group: string
+  fields: FilterFieldConfig[]
+}
+
+/**
+ * Configuration of filterable fields
+ * Can be either a simple array of fields, or an array of groups
+ */
+export type FilterFieldsConfig = FilterFieldConfig[] | FilterFieldGroup[]
+
+/**
+ * Internationalization configuration for the filter system
+ */
+export interface FilterI18nConfig {
+  addFilter: string
+  searchFields: string
+  noFieldsFound: string
+  noResultsFound: string
+  select: string
+  true: string
+  false: string
+  min: string
+  max: string
+  to: string
+  toAlt: string
+  typeAndPressEnter: string
+  selected: string
+  selectedCount: string
+  percent: string
+  defaultCurrency: string
+  defaultColor: string
+  addFilterTitle: string
+  operators: {
+    is: string
+    isNot: string
+    isAnyOf: string
+    isNotAnyOf: string
+    includesAll: string
+    excludesAll: string
+    before: string
+    after: string
+    between: string
+    notBetween: string
+    contains: string
+    notContains: string
+    startsWith: string
+    endsWith: string
+    isExactly: string
+    equals: string
+    notEquals: string
+    greaterThan: string
+    lessThan: string
+    overlaps: string
+    includes: string
+    excludes: string
+    includesAllOf: string
+    includesAnyOf: string
+    empty: string
+    notEmpty: string
+  }
+  placeholders: { // Contextual help texts for input fields
+    enterField: (fieldType: string) => string
+    selectField: string
+    searchField: (fieldName: string) => string
+    enterKey: string
+    enterValue: string
+  }
+  helpers: {
+    formatOperator: (operator: string) => string
+  }
+  validation: {
+    invalidEmail: string
+    invalidUrl: string
+    invalidTel: string
+    invalid: string
+  }
+}
+
+/**
+ * Represents an active filter with its field, operator and values
+ * @template T - Type of filter values (default unknown for flexibility)
+ */
+export interface Filter<T = unknown> {
+  id: string
+  field: string
+  operator: FilterOperatorValue
+  values: T[]
+}
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 8dc0924ce2..823a1efc4e 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -111,3 +111,4 @@ export * from '../components/locale/LocaleSelect.vue'
 export * from './form'
 export * from './locale'
 export * from './tv'
+export * from './filter'
diff --git a/src/runtime/utils/fields.ts b/src/runtime/utils/fields.ts
new file mode 100644
index 0000000000..95836a0f5b
--- /dev/null
+++ b/src/runtime/utils/fields.ts
@@ -0,0 +1,137 @@
+import type { FilterFieldsConfig, FilterFieldConfig, FilterFieldGroup } from '../types/filter'
+
+/**
+ * Utilities for manipulating field configurations
+ * Handles flattening, searching, and grouping of fields
+ */
+
+/**
+ * Recursively processes a list of fields by applying a callback function
+ * Allows traversing fields and their children recursively
+ */
+function processFieldsRecursively(
+  fields: FilterFieldConfig[],
+  onField: (field: FilterFieldConfig) => void
+) {
+  for (const field of fields) {
+    onField(field)
+    if (field.children && field.children.length > 0) {
+      processFieldsRecursively(field.children, onField)
+    }
+  }
+}
+
+/**
+ * Flattens a field configuration into a simple array
+ * Converts groups and nested fields into a flat list
+ * @param config - Field configuration (simple or grouped)
+ * @returns Flat array of all fields that have a defined type
+ */
+export function flattenFieldsConfig(
+  config: FilterFieldsConfig
+): FilterFieldConfig[] {
+  const flatFields: FilterFieldConfig[] = []
+
+  const collect = (fields: FilterFieldConfig[]) => {
+    processFieldsRecursively(fields, (field) => {
+      if (field.type) {
+        flatFields.push(field)
+      }
+    })
+  }
+
+  if (Array.isArray(config)) {
+    collect(config as FilterFieldConfig[])
+  } else {
+    const groups = config as FilterFieldGroup[]
+    for (const group of groups) {
+      collect(group.fields)
+    }
+  }
+
+  return flatFields
+}
+
+/**
+ * Searches for a field by its key in the configuration
+ * @param config - Field configuration
+ * @param key - Key of the field to search for
+ * @returns The found field configuration, or undefined
+ */
+export function findFieldConfig(
+  config: FilterFieldsConfig,
+  key: string
+): FilterFieldConfig | undefined {
+  const fields = flattenFieldsConfig(config)
+  return fields.find(field => field.key === key)
+}
+
+/**
+ * Extracts groups from a field configuration
+ * @param config - Field configuration
+ * @returns Array of groups (empty if config is not grouped)
+ */
+export function getFieldGroups(config: FilterFieldsConfig): FilterFieldGroup[] {
+  if (Array.isArray(config)) {
+    return []
+  }
+  return config as FilterFieldGroup[]
+}
+
+/**
+ * Checks if a configuration contains groups
+ * @param config - Field configuration
+ * @returns true if the configuration is grouped, false otherwise
+ */
+export function hasGroups(config: FilterFieldsConfig): boolean {
+  if (Array.isArray(config)) {
+    return false
+  }
+  const groups = config as FilterFieldGroup[]
+  return groups.length > 0 && groups[0] !== undefined && 'group' in groups[0]
+}
+
+/**
+ * Creates a map of fields indexed by their key for quick access
+ * @param config - Field configuration
+ * @returns Object with field keys as properties
+ */
+export function getFieldsMap(config: FilterFieldsConfig): Record<string, FilterFieldConfig> {
+  const flatFields = flattenFieldsConfig(config)
+  return flatFields.reduce(
+    (acc, field) => {
+      if (field.key) {
+        acc[field.key] = field
+      }
+      return acc
+    },
+    {} as Record<string, FilterFieldConfig>
+  )
+}
+
+/**
+ * Collects all fields from a configuration, including those without a type
+ * Differs from flattenFieldsConfig which only returns fields with a type
+ * @param config - Field configuration
+ * @returns Array of all fields (including separators and parent fields)
+ */
+export function collectAllFields(config: FilterFieldsConfig): FilterFieldConfig[] {
+  const allFields: FilterFieldConfig[] = []
+
+  const collect = (fields: FilterFieldConfig[]) => {
+    processFieldsRecursively(fields, (field) => {
+      allFields.push(field)
+    })
+  }
+
+  if (Array.isArray(config)) {
+    collect(config as FilterFieldConfig[])
+  } else {
+    const groups = config as FilterFieldGroup[]
+    for (const group of groups) {
+      collect(group.fields)
+    }
+  }
+
+  return allFields
+}
diff --git a/src/runtime/utils/operators.ts b/src/runtime/utils/operators.ts
new file mode 100644
index 0000000000..23e11f038b
--- /dev/null
+++ b/src/runtime/utils/operators.ts
@@ -0,0 +1,272 @@
+import type {
+  FilterFieldType,
+  FilterOperator,
+  FilterOperatorValue,
+  FilterI18nConfig,
+  FiltersSize
+} from '../types/filter'
+
+/**
+ * Utilities for managing filter operators
+ * Defines default operators for each field type and handles internationalization
+ */
+
+/**
+ * Default operators available for each field type
+ * Each field type has a set of logical operators adapted to its usage
+ */
+export const defaultOperators: Record<FilterFieldType, FilterOperator[]> = {
+  text: [
+    { value: 'contains', label: 'contains' },
+    { value: 'not_contains', label: 'does not contain' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+    { value: 'is', label: 'is' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  number: [
+    { value: 'equals', label: 'equals' },
+    { value: 'not_equals', label: 'not equals' },
+    { value: 'greater_than', label: 'greater than' },
+    { value: 'less_than', label: 'less than' },
+    { value: 'between', label: 'between' },
+    { value: 'not_between', label: 'not between' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  date: [
+    { value: 'before', label: 'before' },
+    { value: 'after', label: 'after' },
+    { value: 'is', label: 'is' },
+    { value: 'is_not', label: 'is not' },
+    { value: 'between', label: 'between' },
+    { value: 'not_between', label: 'not between' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  select: [
+    { value: 'is', label: 'is' },
+    { value: 'is_not', label: 'is not' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  multiselect: [
+    { value: 'is_any_of', label: 'is any of' },
+    { value: 'is_not_any_of', label: 'is not any of' },
+    { value: 'includes_all', label: 'includes all' },
+    { value: 'excludes_all', label: 'excludes all' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  boolean: [
+    { value: 'is', label: 'is' },
+    { value: 'is_not', label: 'is not' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  email: [
+    { value: 'contains', label: 'contains' },
+    { value: 'not_contains', label: 'does not contain' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+    { value: 'is', label: 'is' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  url: [
+    { value: 'contains', label: 'contains' },
+    { value: 'not_contains', label: 'does not contain' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+    { value: 'is', label: 'is' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  tel: [
+    { value: 'contains', label: 'contains' },
+    { value: 'not_contains', label: 'does not contain' },
+    { value: 'starts_with', label: 'starts with' },
+    { value: 'ends_with', label: 'ends with' },
+    { value: 'is', label: 'is' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  time: [
+    { value: 'before', label: 'before' },
+    { value: 'after', label: 'after' },
+    { value: 'is', label: 'is' },
+    { value: 'between', label: 'between' },
+    { value: 'not_between', label: 'not between' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  datetime: [
+    { value: 'before', label: 'before' },
+    { value: 'after', label: 'after' },
+    { value: 'is', label: 'is' },
+    { value: 'between', label: 'between' },
+    { value: 'not_between', label: 'not between' },
+    { value: 'empty', label: 'is empty' },
+    { value: 'not_empty', label: 'is not empty' }
+  ],
+  custom: [],
+  separator: [] // Separators don't have operators
+}
+
+/**
+ * Gets available operators for a given field type
+ * Uses custom operators if provided, otherwise default operators
+ * @param fieldType - Field type to get operators for
+ * @param customOperators - Optional custom operators for this field
+ * @returns List of available operators for this field type
+ */
+export function getOperatorsForFieldType(
+  fieldType: FilterFieldType,
+  customOperators?: FilterOperator[]
+): FilterOperator[] {
+  if (customOperators && customOperators.length > 0) {
+    return customOperators
+  }
+  return defaultOperators[fieldType] || []
+}
+
+/**
+ * Determines the default operator for a field type
+ * @param fieldType - Field type
+ * @param customDefault - Optional custom default operator
+ * @returns The default operator (first in the list or 'is' if none)
+ */
+export function getDefaultOperatorForFieldType(
+  fieldType: FilterFieldType,
+  customDefault?: FilterOperatorValue
+): FilterOperatorValue {
+  if (customDefault) {
+    return customDefault
+  }
+  const operators = defaultOperators[fieldType]
+  if (operators && operators.length > 0 && operators[0]) {
+    return operators[0].value
+  }
+  return 'is'
+}
+
+/**
+ * Default internationalization configuration (English)
+ * Contains all texts displayed in the filter interface
+ */
+export const defaultI18n: FilterI18nConfig = {
+  addFilter: 'Filter',
+  searchFields: 'Search...',
+  noFieldsFound: 'No fields found.',
+  noResultsFound: 'No results found.',
+  select: 'Select...',
+  true: 'True',
+  false: 'False',
+  min: 'Min',
+  max: 'Max',
+  to: 'to',
+  toAlt: 'and',
+  typeAndPressEnter: 'Type and press Enter to add a tag',
+  selected: 'selected',
+  selectedCount: 'selected',
+  percent: '%',
+  defaultCurrency: '$',
+  defaultColor: '#000000',
+  addFilterTitle: 'Filter',
+  operators: {
+    is: 'is',
+    isNot: 'is not',
+    isAnyOf: 'is any of',
+    isNotAnyOf: 'is not any of',
+    includesAll: 'includes all',
+    excludesAll: 'excludes all',
+    before: 'before',
+    after: 'after',
+    between: 'between',
+    notBetween: 'not between',
+    contains: 'contains',
+    notContains: 'does not contain',
+    startsWith: 'starts with',
+    endsWith: 'ends with',
+    isExactly: 'is exactly',
+    equals: 'equals',
+    notEquals: 'not equals',
+    greaterThan: 'greater than',
+    lessThan: 'less than',
+    overlaps: 'overlaps',
+    includes: 'includes',
+    excludes: 'excludes',
+    includesAllOf: 'includes all of',
+    includesAnyOf: 'includes any of',
+    empty: 'is empty',
+    notEmpty: 'is not empty'
+  },
+  placeholders: {
+    enterField: (fieldType: string) => `Enter ${fieldType}...`,
+    selectField: 'Select...',
+    searchField: (fieldName: string) => `Search ${fieldName.toLowerCase()}...`,
+    enterKey: 'Enter a key...',
+    enterValue: 'Enter a value...'
+  },
+  helpers: {
+    formatOperator: (operator: string) => operator.replace(/_/g, ' ')
+  },
+  validation: {
+    invalidEmail: 'Invalid email format',
+    invalidUrl: 'Invalid URL format',
+    invalidTel: 'Invalid phone format',
+    invalid: 'Invalid input format'
+  }
+}
+
+/**
+ * Merges a custom i18n configuration with the default configuration
+ * Custom values override default values
+ * @param custom - Partial custom i18n configuration
+ * @returns Complete merged i18n configuration
+ */
+export function mergeI18nConfig(
+  custom?: Partial<FilterI18nConfig>
+): FilterI18nConfig {
+  if (!custom) {
+    return defaultI18n
+  }
+
+  return {
+    ...defaultI18n,
+    ...custom,
+    operators: {
+      ...defaultI18n.operators,
+      ...(custom.operators || {})
+    },
+    placeholders: {
+      ...defaultI18n.placeholders,
+      ...(custom.placeholders || {})
+    },
+    helpers: {
+      ...defaultI18n.helpers,
+      ...(custom.helpers || {})
+    },
+    validation: {
+      ...defaultI18n.validation,
+      ...(custom.validation || {})
+    }
+  }
+}
+
+/**
+ * Determines badge size based on filter size
+ * @param size - Filter size
+ * @returns Badge size
+ */
+export function getBadgeSize(size: FiltersSize): 'md' | 'lg' | 'xl' {
+  switch (size) {
+    case 'sm':
+      return 'md'
+    case 'md':
+      return 'lg'
+    case 'lg':
+      return 'xl'
+  }
+}
diff --git a/src/runtime/utils/validation.ts b/src/runtime/utils/validation.ts
new file mode 100644
index 0000000000..a83f1499d5
--- /dev/null
+++ b/src/runtime/utils/validation.ts
@@ -0,0 +1,105 @@
+import type { Filter } from '../types/filter'
+
+/**
+ * Validation utilities and ID generation for filters
+ * Provides functions to validate filters and their values
+ */
+
+/**
+ * Generates a unique identifier for a filter
+ * Combines timestamp and random string to ensure uniqueness
+ * @returns Unique identifier in format "filter-{timestamp}-{random}"
+ */
+export function generateFilterId(): string {
+  return `filter-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+}
+
+/**
+ * Validates that a filter contains all required properties
+ * @param filter - Filter to validate
+ * @returns true if the filter is valid, false otherwise
+ */
+export function validateFilter(filter: Filter): boolean {
+  if (!filter.id || !filter.field || !filter.operator) {
+    return false
+  }
+  return true
+}
+
+/**
+ * Result of a validation with optional error message
+ */
+export interface ValidationResult {
+  isValid: boolean
+  errorMessage?: string | null
+}
+
+/**
+ * Validates a filter value according to a regex pattern or custom validation function
+ * @param value - Value to validate
+ * @param pattern - Optional regex pattern for validation
+ * @param validation - Optional custom validation function
+ *   - Returns `undefined`, `null` or `false`: value is valid
+ *   - Returns `true`: value is invalid (default error message)
+ *   - Returns `string`: value is invalid with custom error message
+ * @returns Validation result with optional error message
+ */
+export function validateFilterValue(
+  value: unknown,
+  pattern?: string,
+  validation?: (value: unknown) => boolean | string | null | undefined
+): ValidationResult {
+  if (validation) {
+    const result = validation(value)
+    // undefined, null or false = valid (no need to return explicitly)
+    if (result === undefined || result === null || result === false) {
+      return { isValid: true }
+    }
+    // string = invalid with custom message
+    if (typeof result === 'string') {
+      return { isValid: false, errorMessage: result }
+    }
+    // true = invalid without custom message
+    return { isValid: false }
+  }
+  if (pattern && typeof value === 'string') {
+    const regex = new RegExp(pattern)
+    const isValid = regex.test(value)
+    return { isValid }
+  }
+  return { isValid: true }
+}
+
+/**
+ * Validates email format
+ * @param email - Email address to validate
+ * @returns true if email is valid, false otherwise
+ */
+export function validateEmail(email: string): boolean {
+  const emailRegex = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/
+  return emailRegex.test(email)
+}
+
+/**
+ * Validates URL format via regular expression
+ * Allows URLs with or without schema (http, https)
+ * Supports multiple subdomains (N subdomains)
+ * @param url - URL to validate
+ * @returns true if URL appears valid, false otherwise
+ */
+export function validateUrl(url: string): boolean {
+  // Supports http(s)://, N subdomains, TLD 2+ characters, optionally a path
+  const urlRegex = /^(?:https?:\/\/)?(?:[\w-]+\.)+[\w-]{2,}(?:\/\S*)?$/i
+  return urlRegex.test(url)
+}
+
+/**
+ * Validates phone number format
+ * Accepts digits, spaces, dashes, parentheses and the + sign
+ * @param tel - Phone number to validate
+ * @returns true if number is valid, false otherwise
+ */
+export function validateTel(tel: string): boolean {
+  const telRegex = /^[\d\s\-+()]+$/
+  return telRegex.test(tel)
+}

From b8e17a35ad19c9743e4ea419b00563c5d394684a Mon Sep 17 00:00:00 2001
From: Maxime Princelle <maxime@princelle.org>
Date: Mon, 10 Nov 2025 17:05:48 +0100
Subject: [PATCH 2/3] doc: clean up doc

---
 docs/content/docs/2.components/filters.md | 103 +---------------------
 1 file changed, 1 insertion(+), 102 deletions(-)

diff --git a/docs/content/docs/2.components/filters.md b/docs/content/docs/2.components/filters.md
index b70fb81fab..f4213817c2 100644
--- a/docs/content/docs/2.components/filters.md
+++ b/docs/content/docs/2.components/filters.md
@@ -774,7 +774,7 @@ props:
       label: 'Score'
       type: 'number'
       validation: (value) => {
-        if (typeof value !== 'number') {
+        if (!/^\d+(\.\d+)?$/.test(String(value))) {
           return 'Score must be a number'
         }
         if (value < 0) {
@@ -889,27 +889,6 @@ The component supports two visual variants:
 - `outline` (default): Visible borders
 - `solid`: Colored background without borders
 
-::component-code
----
-collapse: true
-class: '!py-4'
-ignore:
-  - filters
-  - fields
-items:
-  variant:
-    - outline
-    - solid
-props:
-  variant: 'outline'
-  filters: []
-  fields:
-    - key: 'name'
-      label: 'Name'
-      type: 'text'
----
-::
-
 ### Sizes
 
 Three sizes are available:
@@ -918,91 +897,11 @@ Three sizes are available:
 - `md` (default): Medium size
 - `lg`: Large size
 
-::component-code
----
-collapse: true
-class: '!py-4'
-ignore:
-  - filters
-  - fields
-items:
-  size:
-    - sm
-    - md
-    - lg
-props:
-  size: 'md'
-  filters: []
-  fields:
-    - key: 'name'
-      label: 'Name'
-      type: 'text'
----
-::
-
 ### Radius
 
 - `md` (default): Rounded borders
 - `full`: Fully rounded borders
 
-::component-code
----
-collapse: true
-class: '!py-4'
-ignore:
-  - filters
-  - fields
-items:
-  radius:
-    - md
-    - full
-props:
-  radius: 'md'
-  filters: []
-  fields:
-    - key: 'name'
-      label: 'Name'
-      type: 'text'
----
-::
-
-### Custom Add Button
-
-You can completely customize the add button:
-
-::component-code
----
-collapse: true
-class: '!py-4'
-ignore:
-  - filters
-  - fields
-props:
-  filters: []
-  fields:
-    - key: 'name'
-      label: 'Name'
-      type: 'text'
-  addButtonText: 'Add filter'
-  addButtonIcon: 'i-lucide-plus'
-  addButtonClassName: 'custom-class'
----
-::
-
-Or use a custom component:
-
-::component-example
----
-prettier: true
-collapse: true
-name: 'filters-custom-button-example'
-highlights:
-  - 85
-  - 95
-class: '!py-4'
----
-::
-
 ### Multiple Filters per Field
 
 By default, `allowMultiple` is enabled, allowing multiple filters for the same field.

From 81d2b980e44a34cdb6646d86e766b3f64cfd9972 Mon Sep 17 00:00:00 2001
From: Maxime Princelle <maxime@princelle.org>
Date: Mon, 10 Nov 2025 17:06:08 +0100
Subject: [PATCH 3/3] refactor(Filters): simplify default operator logic and
 enhance filter context injection

---
 src/runtime/components/Filters.vue          | 9 +++------
 src/runtime/composables/useFilterContext.ts | 6 +++---
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/runtime/components/Filters.vue b/src/runtime/components/Filters.vue
index 1ab69cde51..0f0a943e7f 100644
--- a/src/runtime/components/Filters.vue
+++ b/src/runtime/components/Filters.vue
@@ -58,7 +58,7 @@ import type {
   FilterOperatorValue
 } from '../types/filter'
 import { computed } from 'vue'
-import { mergeI18nConfig } from '../utils/operators'
+import { mergeI18nConfig, getDefaultOperatorForFieldType } from '../utils/operators'
 import { flattenFieldsConfig, getFieldsMap } from '../utils/fields'
 import FilterContextProvider from './filters/FilterContextProvider.vue'
 import FilterItem from './filters/FilterItem.vue'
@@ -210,13 +210,10 @@ function handleAddFilter(fieldKey: string, operator?: FilterOperatorValue, value
 
 /**
  * Determines the default operator for a given field
- * For booleans, always returns 'is'
+ * Uses the utility function to get the correct default operator for each field type
  */
 function getDefaultOperatorForField(field: FilterFieldConfig): FilterOperatorValue {
-  if (field.type === 'boolean') {
-    return 'is'
-  }
-  return 'is'
+  return getDefaultOperatorForFieldType(field.type, field.defaultOperator)
 }
 
 /**
diff --git a/src/runtime/composables/useFilterContext.ts b/src/runtime/composables/useFilterContext.ts
index 8a3b827d0d..e2fad909ae 100644
--- a/src/runtime/composables/useFilterContext.ts
+++ b/src/runtime/composables/useFilterContext.ts
@@ -1,4 +1,4 @@
-import { inject } from 'vue'
+import { inject, unref } from 'vue'
 import type {
   FilterI18nConfig,
   FiltersVariant,
@@ -45,9 +45,9 @@ export const FilterContext = Symbol('FilterContext') as symbol
  * @returns The filter context configuration
  */
 export function useFilterContext(): FilterContextValue {
-  const context = inject<FilterContextValue>(FilterContext)
+  const context = inject(FilterContext)
   if (!context) {
     throw new Error('useFilterContext must be used within FilterContextProvider')
   }
-  return context
+  return unref(context)
 }