@wallarm-org/design-system 0.12.0 → 0.13.0

package/dist/components/{QueryBar/hooks/useQueryBarExpression → FilterInput/hooks/useFilterInputExpression}/buildChips.js

@@ -1,41 +1,72 @@
 import { getDateDisplayLabel, getOperatorLabel } from "../../lib/index.js";
+import { getInvalidValueIndices } from "../useFilterInputAutocomplete/valueCommitHelpers.js";
 const makeConditionChip = (i, conditions, fields, error)=>{
     const condition = conditions[i];
-    const chipError = condition?.error || error;
+    const chipError = condition?.error || (error ? true : void 0);
     if (!condition) return {
         id: `chip-${i}`,
         variant: 'chip',
         attribute: '',
         operator: '',
         value: '',
-        error
+        error: error || void 0
     };
     const field = fields.find((f)=>f.name === condition.field);
-    let displayValue;
-    let hasInvalidDate = false;
-    if (field?.type === 'date') if (Array.isArray(condition.value)) {
-        const parts = condition.value.map((v)=>getDateDisplayLabel(String(v)));
-        hasInvalidDate = parts.some((p)=>'Invalid Date' === p);
-        displayValue = parts.join(' – ');
-    } else {
-        displayValue = getDateDisplayLabel(String(condition.value ?? ''));
-        hasInvalidDate = 'Invalid Date' === displayValue;
-    }
-    else if (Array.isArray(condition.value)) displayValue = condition.value.map((v)=>field?.values?.find((opt)=>opt.value === v)?.label ?? String(v)).join(', ');
-    else {
-        displayValue = String(condition.value ?? '');
-        if (field?.values) {
-            const opt = field.values.find((o)=>o.value === condition.value);
-            if (opt) displayValue = opt.label;
-        }
-    }
-    return {
+    const baseChip = {
         id: `chip-${i}`,
         variant: 'chip',
         attribute: field?.label || condition.field,
-        operator: getOperatorLabel(condition.operator, field?.type || 'string'),
+        operator: getOperatorLabel(condition.operator, field?.type || 'string')
+    };
+    if (field?.type === 'date') {
+        if (Array.isArray(condition.value)) {
+            const parts = condition.value.map((v)=>getDateDisplayLabel(String(v)));
+            const invalidIndices = parts.reduce((acc, p, idx)=>{
+                if ('Invalid Date' === p) acc.push(idx);
+                return acc;
+            }, []);
+            return {
+                ...baseChip,
+                value: parts.join(' – '),
+                error: chipError || (invalidIndices.length > 0 ? 'value' : void 0),
+                ...invalidIndices.length > 0 && {
+                    valueParts: parts,
+                    valueSeparator: ' – ',
+                    errorValueIndices: invalidIndices
+                }
+            };
+        }
+        const displayValue = getDateDisplayLabel(String(condition.value ?? ''));
+        return {
+            ...baseChip,
+            value: displayValue,
+            error: chipError || ('Invalid Date' === displayValue ? 'value' : void 0)
+        };
+    }
+    if (Array.isArray(condition.value)) {
+        const valueParts = condition.value.map((v)=>field?.values?.find((opt)=>opt.value === v)?.label ?? String(v));
+        const invalidIndices = field ? getInvalidValueIndices(field, condition.value) : [];
+        return {
+            ...baseChip,
+            value: valueParts.join(', '),
+            error: chipError || (invalidIndices.length > 0 ? 'value' : void 0),
+            ...valueParts.length > 1 && {
+                valueParts
+            },
+            ...invalidIndices.length > 0 && {
+                errorValueIndices: invalidIndices
+            }
+        };
+    }
+    let displayValue = String(condition.value ?? '');
+    if (field?.values) {
+        const opt = field.values.find((o)=>o.value === condition.value);
+        if (opt) displayValue = opt.label;
+    }
+    return {
+        ...baseChip,
         value: displayValue,
-        error: chipError || hasInvalidDate
+        error: chipError
     };
 };
 const buildChips = (conditions, connectors, fields, error)=>{

package/dist/components/FilterInput/hooks/useFilterInputExpression/index.d.ts

@@ -0,0 +1 @@
+export { useFilterInputExpression } from './useFilterInputExpression';

package/dist/components/FilterInput/hooks/useFilterInputExpression/index.js

@@ -0,0 +1,2 @@
+import { useFilterInputExpression } from "./useFilterInputExpression.js";
+export { useFilterInputExpression };

package/dist/components/{QueryBar/hooks/useQueryBarExpression/useQueryBarExpression.d.ts → FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.d.ts}

@@ -1,15 +1,15 @@
-import type { Condition, ExprNode, FieldMetadata, FilterOperator } from '../../types';
-interface UseQueryBarExpressionOptions {
+import type { ChipErrorSegment, Condition, ExprNode, FieldMetadata, FilterOperator } from '../../types';
+interface UseFilterInputExpressionOptions {
     fields: FieldMetadata[];
     value?: ExprNode | null;
     onChange?: (expression: ExprNode | null) => void;
     error: boolean;
 }
-export declare const useQueryBarExpression: ({ fields, value, onChange, error, }: UseQueryBarExpressionOptions) => {
+export declare const useFilterInputExpression: ({ fields, value, onChange, error, }: UseFilterInputExpressionOptions) => {
     conditions: Condition[];
     connectors: ("and" | "or")[];
-    chips: import("../..").QueryBarChipData[];
-    upsertCondition: (field: FieldMetadata, operator: FilterOperator, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: boolean, dateOrigin?: "relative" | "absolute") => void;
+    chips: import("../..").FilterInputChipData[];
+    upsertCondition: (field: FieldMetadata, operator: FilterOperator, val: string | number | boolean | null | Array<string | number | boolean>, editingChipId?: string | null, atIndex?: number, error?: ChipErrorSegment, dateOrigin?: "relative" | "absolute") => void;
     removeCondition: (chipId: string) => void;
     removeConditionAtIndex: (idx: number) => void;
     clearAll: () => void;

package/dist/components/{QueryBar/hooks/useQueryBarExpression/useQueryBarExpression.js → FilterInput/hooks/useFilterInputExpression/useFilterInputExpression.js}

@@ -1,12 +1,20 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { chipIdToConditionIndex } from "../../lib/index.js";
+import { CONNECTOR_ID_PATTERN, chipIdToConditionIndex } from "../../lib/index.js";
 import { buildChips } from "./buildChips.js";
 import { buildExpression, expressionToConditions } from "./expression.js";
 const EMPTY_STATE = {
     conditions: [],
     connectors: []
 };
-const useQueryBarExpression = ({ fields, value, onChange, error })=>{
+const removeConnectorAtConditionIndex = (connectors, idx)=>{
+    const updated = [
+        ...connectors
+    ];
+    if (0 === idx && updated.length > 0) updated.splice(0, 1);
+    else if (idx > 0 && idx - 1 < updated.length) updated.splice(idx - 1, 1);
+    return updated;
+};
+const useFilterInputExpression = ({ fields, value, onChange, error })=>{
     const [state, setState] = useState(EMPTY_STATE);
     useEffect(()=>{
         if (void 0 !== value) {
@@ -72,7 +80,7 @@ const useQueryBarExpression = ({ fields, value, onChange, error })=>{
                 const missing = newConditions.length - 1 - prev.connectors.length;
                 newConnectors = missing > 0 ? [
                     ...prev.connectors,
-                    ...Array(missing).fill('and')
+                    ...new Array(missing).fill('and')
                 ] : prev.connectors;
             }
             const next = {
@@ -90,11 +98,7 @@ const useQueryBarExpression = ({ fields, value, onChange, error })=>{
         if (null === idx) return;
         setState((prev)=>{
             const newConditions = prev.conditions.filter((_, i)=>i !== idx);
-            const newConnectors = [
-                ...prev.connectors
-            ];
-            if (0 === idx && newConnectors.length > 0) newConnectors.splice(0, 1);
-            else if (idx > 0 && idx - 1 < newConnectors.length) newConnectors.splice(idx - 1, 1);
+            const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
             const next = {
                 conditions: newConditions,
                 connectors: newConnectors
@@ -109,11 +113,7 @@ const useQueryBarExpression = ({ fields, value, onChange, error })=>{
         setState((prev)=>{
             if (idx < 0 || idx >= prev.conditions.length) return prev;
             const newConditions = prev.conditions.filter((_, i)=>i !== idx);
-            const newConnectors = [
-                ...prev.connectors
-            ];
-            if (0 === idx && newConnectors.length > 0) newConnectors.splice(0, 1);
-            else if (idx > 0 && idx - 1 < newConnectors.length) newConnectors.splice(idx - 1, 1);
+            const newConnectors = removeConnectorAtConditionIndex(prev.connectors, idx);
             const next = {
                 conditions: newConditions,
                 connectors: newConnectors
@@ -131,7 +131,7 @@ const useQueryBarExpression = ({ fields, value, onChange, error })=>{
         onChange
     ]);
     const setConnectorValue = useCallback((connectorId, value)=>{
-        const match = connectorId.match(/^connector-(\d+)$/);
+        const match = connectorId.match(CONNECTOR_ID_PATTERN);
         if (!match) return;
         const condIdx = Number(match[1]);
         const connectorIdx = condIdx - 1;
@@ -161,4 +161,4 @@ const useQueryBarExpression = ({ fields, value, onChange, error })=>{
         setConnectorValue
     };
 };
-export { useQueryBarExpression };
+export { useFilterInputExpression };

package/dist/components/FilterInput/hooks/useFilterInputPositioning.d.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+interface UseFilterInputPositioningProps {
+    /** Ref to the trigger element (used for X anchor and container lookup via closest) */
+    anchorRef?: RefObject<HTMLElement | null>;
+    /** Explicit container ref (skips closest lookup) */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Override horizontal anchor calculation (receives containerRect, returns left px) */
+    getAnchorLeft?: (containerRect: DOMRect) => number;
+}
+/**
+ * Shared positioning hook for all FilterInput dropdowns.
+ * Anchors vertically to the query bar container and horizontally to the trigger element.
+ * @param deps - extra values that force positioning recalculation (e.g. insertIndex)
+ */
+export declare const useFilterInputPositioning: ({ anchorRef, containerRef, getAnchorLeft }: UseFilterInputPositioningProps, deps?: unknown[]) => {
+    placement: "bottom-start";
+    gutter: number;
+    getAnchorRect: () => {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+    } | null;
+};
+export {};

package/dist/components/FilterInput/hooks/useFilterInputPositioning.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { QUERY_BAR_SELECTOR, buildContainerAnchoredRect } from "../lib/index.js";
+const useFilterInputPositioning = ({ anchorRef, containerRef, getAnchorLeft }, deps = [])=>useMemo(()=>({
+            placement: 'bottom-start',
+            gutter: 4,
+            getAnchorRect: ()=>{
+                const containerEl = containerRef?.current ?? anchorRef?.current?.closest(QUERY_BAR_SELECTOR);
+                const containerRect = containerEl?.getBoundingClientRect();
+                if (!containerRect) return null;
+                const left = getAnchorLeft ? getAnchorLeft(containerRect) : anchorRef?.current?.getBoundingClientRect().left ?? containerRect.left;
+                return buildContainerAnchoredRect(containerRect, left);
+            }
+        }), [
+        anchorRef,
+        containerRef,
+        getAnchorLeft,
+        ...deps
+    ]);
+export { useFilterInputPositioning };

package/dist/components/FilterInput/index.d.ts

@@ -0,0 +1,4 @@
+export { FilterInput, type FilterInputProps } from './FilterInput';
+export { FilterInputChip, type FilterInputChipProps } from './FilterInputField';
+export { FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, FilterInputValueMenu, type FilterInputValueMenuProps, type ValueOption, } from './FilterInputMenu';
+export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';

package/dist/components/FilterInput/index.js

@@ -0,0 +1,4 @@
+import { FilterInput } from "./FilterInput.js";
+import { FilterInputChip } from "./FilterInputField/index.js";
+import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
+export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu };

package/dist/components/{QueryBar → FilterInput}/lib/conditions.d.ts

@@ -1,4 +1,4 @@
-import type { QueryBarChipData } from '../types';
+import type { FilterInputChipData } from '../types';
 /** Map a chip ID (e.g. "chip-2") back to condition index */
 export declare const chipIdToConditionIndex: (chipId: string) => number | null;
 /**
@@ -6,4 +6,4 @@ export declare const chipIdToConditionIndex: (chipId: string) => number | null;
  * When `afterConnector` is true, split AFTER the connector preceding the target chip.
  * When false, split BEFORE the connector.
  */
-export declare const findChipSplitIndex: (chips: QueryBarChipData[], conditionInsertIndex: number, afterConnector?: boolean) => number;
+export declare const findChipSplitIndex: (chips: FilterInputChipData[], conditionInsertIndex: number, afterConnector?: boolean) => number;

package/dist/components/{QueryBar → FilterInput}/lib/constants.d.ts

@@ -1,4 +1,4 @@
-import type { FieldType, FilterOperator, QueryBarChipVariant } from '../types';
+import type { FieldType, FilterInputChipVariant, FilterOperator } from '../types';
 /**
  * Operators that require no value (unary)
  */
@@ -11,10 +11,18 @@ export declare const MULTI_SELECT_OPERATORS: readonly FilterOperator[];
  * Pattern to extract condition index from chip ID (e.g. "chip-2" → 2)
  */
 export declare const CHIP_ID_PATTERN: RegExp;
+/**
+ * Pattern to extract condition index from connector ID (e.g. "connector-2" → 2)
+ */
+export declare const CONNECTOR_ID_PATTERN: RegExp;
+/**
+ * DOM selector for the FilterInput root element
+ */
+export declare const QUERY_BAR_SELECTOR = "[data-slot=\"filter-input\"]";
 /**
  * Labels for non-chip filter chip variants (connectors, brackets)
  */
-export declare const VARIANT_LABELS: Partial<Record<QueryBarChipVariant, string>>;
+export declare const VARIANT_LABELS: Partial<Record<FilterInputChipVariant, string>>;
 /**
  * Operator Symbol Mapping
  * Maps operators to their raw symbol displayed on the right side of menus

package/dist/components/{QueryBar → FilterInput}/lib/constants.js

@@ -7,6 +7,8 @@ const MULTI_SELECT_OPERATORS = [
     'not_in'
 ];
 const CHIP_ID_PATTERN = /^chip-(\d+)$/;
+const CONNECTOR_ID_PATTERN = /^connector-(\d+)$/;
+const QUERY_BAR_SELECTOR = '[data-slot="filter-input"]';
 const VARIANT_LABELS = {
     and: 'AND',
     or: 'OR',
@@ -45,19 +47,39 @@ const OPERATOR_LABELS = {
 };
 const OPERATOR_LABELS_BY_TYPE = {
     string: {
+        '=': 'is',
+        '!=': 'is not',
+        in: 'in',
+        like: 'like',
+        not_like: 'not like',
         is_null: 'is set',
         is_not_null: 'is not set'
     },
-    integer: {},
-    float: {},
+    integer: {
+        '=': 'is',
+        '!=': 'is not',
+        '>': 'greater',
+        '<': 'less',
+        '>=': 'greater or equal',
+        '<=': 'less or equal',
+        in: 'in'
+    },
+    float: {
+        '=': 'is',
+        '!=': 'is not',
+        '>': 'greater',
+        '<': 'less',
+        '>=': 'greater or equal',
+        '<=': 'less or equal'
+    },
     date: {
+        '=': 'is',
+        '!=': 'is not',
         '>': 'after',
-        '>=': 'on or after',
         '<': 'before',
+        '>=': 'on or after',
         '<=': 'on or before',
-        '=': 'on',
-        '!=': 'not on',
-        between: 'between'
+        between: 'in between'
     },
     boolean: {
         '=': 'is true',
@@ -141,4 +163,4 @@ const OPERATORS_BY_TYPE = {
         ]
     ]
 };
-export { CHIP_ID_PATTERN, MULTI_SELECT_OPERATORS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, VARIANT_LABELS };
+export { CHIP_ID_PATTERN, CONNECTOR_ID_PATTERN, MULTI_SELECT_OPERATORS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS };

package/dist/components/FilterInput/lib/dom.d.ts

@@ -0,0 +1,17 @@
+/** Check if an element belongs to a menu/portal overlay (dropdown, date-picker, etc.) */
+export declare const isMenuRelated: (el: HTMLElement | null) => boolean;
+/**
+ * Build a DOMRect-compatible object anchored vertically to the container
+ * and horizontally to the given left position. Used by all FilterInput dropdowns
+ * so they share the same vertical gap from the container bottom edge.
+ */
+export declare const buildContainerAnchoredRect: (containerRect: DOMRect, anchorLeft: number, anchorRight?: number) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};

package/dist/components/FilterInput/lib/dom.js

@@ -0,0 +1,12 @@
+const isMenuRelated = (el)=>!!(el?.closest('[role="menu"]') || el?.closest('[data-scope="menu"]') || el?.closest('[data-scope="date-picker"]') || el?.closest('[data-part="content"]'));
+const buildContainerAnchoredRect = (containerRect, anchorLeft, anchorRight = containerRect.right)=>({
+        x: anchorLeft,
+        y: containerRect.top,
+        width: anchorRight - anchorLeft,
+        height: containerRect.height,
+        top: containerRect.top,
+        bottom: containerRect.bottom,
+        left: anchorLeft,
+        right: anchorRight
+    });
+export { buildContainerAnchoredRect, isMenuRelated };

package/dist/components/FilterInput/lib/fields.d.ts

@@ -0,0 +1,12 @@
+import type { FieldMetadata, FieldValueOption } from '../types';
+/**
+ * Get normalized value options for a field.
+ * `values` (full FieldValueOption[]) takes precedence over `options` (string[] shorthand).
+ * `options` strings are converted to `{ value: s, label: s }`.
+ */
+export declare const getFieldValues: (field: FieldMetadata) => FieldValueOption[];
+/**
+ * Check if a field has predefined values (from `values` or `options`).
+ * Returns false for freeform fields (`options: []` or no values at all).
+ */
+export declare const hasFieldValues: (field: FieldMetadata) => boolean;

package/dist/components/FilterInput/lib/fields.js

@@ -0,0 +1,10 @@
+const getFieldValues = (field)=>{
+    const fromValues = field.values ?? [];
+    const fromOptions = field.options?.map((s)=>({
+            value: s,
+            label: s
+        })) ?? [];
+    return fromValues.length > 0 ? fromValues : fromOptions;
+};
+const hasFieldValues = (field)=>getFieldValues(field).length > 0;
+export { getFieldValues, hasFieldValues };

package/dist/components/FilterInput/lib/index.d.ts

@@ -0,0 +1,8 @@
+export type { DatePreset } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
+export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
+export { chipIdToConditionIndex, findChipSplitIndex } from './conditions';
+export { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, OPERATORS_BY_TYPE, QUERY_BAR_SELECTOR, VARIANT_LABELS, } from './constants';
+export { buildContainerAnchoredRect, isMenuRelated } from './dom';
+export { getFieldValues, hasFieldValues } from './fields';
+export { filterAndSort } from './filterSort';
+export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, } from './operators';

package/dist/components/FilterInput/lib/index.js

@@ -0,0 +1,8 @@
+import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
+import { chipIdToConditionIndex, findChipSplitIndex } from "./conditions.js";
+import { CONNECTOR_ID_PATTERN, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS } from "./constants.js";
+import { buildContainerAnchoredRect, isMenuRelated } from "./dom.js";
+import { getFieldValues, hasFieldValues } from "./fields.js";
+import { filterAndSort } from "./filterSort.js";
+import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
+export { CONNECTOR_ID_PATTERN, DATE_PRESETS, NO_VALUE_OPERATORS, OPERATORS_BY_TYPE, OPERATOR_LABELS, OPERATOR_LABELS_BY_TYPE, OPERATOR_SYMBOLS, QUERY_BAR_SELECTOR, VARIANT_LABELS, buildContainerAnchoredRect, chipIdToConditionIndex, filterAndSort, findChipSplitIndex, formatDateForChip, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, hasFieldValues, isBetweenOperator, isDatePreset, isMenuRelated, isMultiSelectOperator, isNoValueOperator };

package/dist/components/{QueryBar → FilterInput}/types.d.ts

@@ -1,18 +1,26 @@
 import type { ReactNode } from 'react';
 /**
- * QueryBar Chip Variant Types
+ * FilterInput Chip Variant Types
  */
-export type QueryBarChipVariant = 'chip' | 'and' | 'or' | '(' | ')';
+export type FilterInputChipVariant = 'chip' | 'and' | 'or' | '(' | ')';
 /**
- * QueryBar Chip Data Interface
+ * FilterInput Chip Data Interface
  */
-export interface QueryBarChipData {
+/** Which segment of a chip has an error: attribute or value (true = whole chip) */
+export type ChipErrorSegment = boolean | 'attribute' | 'value';
+export interface FilterInputChipData {
     id: string;
-    variant: QueryBarChipVariant;
+    variant: FilterInputChipVariant;
     attribute?: string;
     operator?: string;
     value?: string;
-    error?: boolean;
+    error?: ChipErrorSegment;
+    /** Individual display parts for multi-value chips (avoids comma-split issues) */
+    valueParts?: string[];
+    /** Separator between valueParts (default: ", ") */
+    valueSeparator?: string;
+    /** Indices of invalid values in a multi-value chip (e.g. "in" operator) */
+    errorValueIndices?: number[];
 }
 /**
  * Field Type for filter attributes
@@ -45,6 +53,12 @@ export interface FieldMetadata {
     operators?: FilterOperator[];
     default?: string | number | boolean;
     values?: FieldValueOption[];
+    /**
+     * Shorthand for simple string values (e.g. `["GET", "POST", "PUT"]`).
+     * Automatically converted to `FieldValueOption[]` where `value === label`.
+     * Empty array `[]` means freeform input — no dropdown, user types any value.
+     */
+    options?: string[];
 }
 /**
  * Expression Tree Types
@@ -57,8 +71,8 @@ export interface Condition {
     field: string;
     operator: FilterOperator;
     value: string | number | boolean | null | Array<string | number | boolean>;
-    /** Per-condition validation error (e.g. value not in allowed list) */
-    error?: boolean;
+    /** Per-condition validation error: true = whole chip, 'attribute'/'value' = specific segment */
+    error?: ChipErrorSegment;
     /** For date fields: tracks whether the value originated as relative preset or absolute date */
     dateOrigin?: 'relative' | 'absolute';
 }
@@ -81,7 +95,7 @@ export type MenuState = 'closed' | 'field' | 'operator' | 'value';
 /**
  * Item in a dropdown menu
  */
-export interface QueryBarDropdownItem {
+export interface FilterInputDropdownItem {
     /** Unique identifier */
     id: string;
     /** Display label */
@@ -100,18 +114,18 @@ export interface QueryBarDropdownItem {
     /** Whether item shows a submenu arrow */
     hasSubmenu?: boolean;
     /** Custom renderer for item content */
-    renderContent?: (item: QueryBarDropdownItem) => ReactNode;
+    renderContent?: (item: FilterInputDropdownItem) => ReactNode;
 }
 /**
  * Section in a dropdown menu (group of items)
  */
-export interface QueryBarDropdownSection {
+export interface FilterInputDropdownSection {
     /** Unique identifier */
     id: string;
     /** Optional section title/header */
     title?: string;
     /** Items in this section */
-    items: QueryBarDropdownItem[];
+    items: FilterInputDropdownItem[];
     /** Whether to show separator after this section */
     showSeparator?: boolean;
 }

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { DateTime, type DateTimeProps } from './components/DateTime';
 export { Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerFooter, DrawerFooterControls, type DrawerFooterControlsProps, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerPositioner, type DrawerPositionerProps, type DrawerProps, DrawerResizeHandle, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, drawerContentVariants, drawerPositionerVariants, useDrawerContext, } from './components/Drawer';
 export { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, } from './components/DropdownMenu';
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from './components/Field';
+export { type Condition, type ExprNode, type FieldMetadata, type FieldType, FilterInput, FilterInputChip, type FilterInputChipData, type FilterInputChipProps, type FilterInputChipVariant, FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, type FilterInputProps, type FilterOperator, type Group, } from './components/FilterInput';
 export { Flex, type FlexProps } from './components/Flex';
 export { Heading, type HeadingProps } from './components/Heading';
 export { Input, type InputProps } from './components/Input';
@@ -24,7 +25,6 @@ export { NumberInput, type NumberInputProps } from './components/NumberInput';
 export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge';
 export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
-export { type Condition, type ExprNode, type FieldMetadata, type FieldType, type FilterOperator, type Group, QueryBar, QueryBarChip, type QueryBarChipData, type QueryBarChipProps, type QueryBarChipVariant, QueryBarFieldMenu, type QueryBarFieldMenuProps, QueryBarOperatorMenu, type QueryBarOperatorMenuProps, type QueryBarProps, } from './components/QueryBar';
 export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';

package/dist/index.js

@@ -12,6 +12,7 @@ import { DateTime } from "./components/DateTime/index.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerPositionerVariants, useDrawerContext } from "./components/Drawer/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem } from "./components/DropdownMenu/index.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/Field/index.js";
+import { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu } from "./components/FilterInput/index.js";
 import { Flex } from "./components/Flex/index.js";
 import { Heading } from "./components/Heading/index.js";
 import { Input } from "./components/Input/index.js";
@@ -24,7 +25,6 @@ import { NumberInput } from "./components/NumberInput/index.js";
 import { NumericBadge } from "./components/NumericBadge/index.js";
 import { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTooltip/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover/index.js";
-import { QueryBar, QueryBarChip, QueryBarFieldMenu, QueryBarOperatorMenu } from "./components/QueryBar/index.js";
 import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from "./components/Radio/index.js";
 import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
 import { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
@@ -46,4 +46,4 @@ import { ToggleButton } from "./components/ToggleButton/index.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, DateTime, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, QueryBar, QueryBarChip, QueryBarFieldMenu, QueryBarOperatorMenu, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useCalendarContext, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, DateTime, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, HStack, Heading, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, MONTH_NAMES, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, Popover, PopoverContent, PopoverTrigger, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Separator, Skeleton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, Tour, VStack, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, proxyTypes, sourceLabels, toaster, useCalendarContext, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };