@wallarm-org/design-system 0.12.0 → 0.13.0

package/dist/components/Calendar/Calendar.d.ts

@@ -39,6 +39,8 @@ export interface CalendarProps {
     closeOnSelect?: boolean;
     /** Whether calendar is readonly (display only, no date selection allowed). Default: false */
     readonly?: boolean;
+    /** Controlled focused date — navigates the calendar view to this date */
+    focusedValue?: DateValue;
     /** Compound components (CalendarTrigger, CalendarContent, etc.) */
     children?: ReactNode;
 }

package/dist/components/Calendar/Calendar.js

@@ -112,7 +112,7 @@ const DEFAULT_RANGE_PRESETS = [
         shortcut: '9'
     }
 ];
-const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true, value, defaultValue, onChange, minDate, maxDate, isDateUnavailable, disallowDisabledDatesInRange = false, open, defaultOpen, onOpenChange, closeOnSelect = true, readonly = false, children })=>{
+const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true, value, defaultValue, onChange, minDate, maxDate, isDateUnavailable, disallowDisabledDatesInRange = false, open, defaultOpen, onOpenChange, closeOnSelect = true, readonly = false, focusedValue, children })=>{
     const isRange = 'range' === type;
     const numOfMonths = isRange ? 2 : 1;
     const hasUnavailableDateInRange = useCallback((start, end)=>{
@@ -176,6 +176,7 @@ const Calendar = ({ type = 'single', showTime = false, showKeyboardHints = true,
         max: maxDate,
         isDateUnavailable: isDateUnavailable,
         outsideDaySelectable: true,
+        focusedValue: focusedValue,
         closeOnSelect: closeOnSelect,
         children: /*#__PURE__*/ jsx(CalendarProvider, {
             value: contextValue,

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

@@ -1,6 +1,6 @@
 import type { FC, HTMLAttributes } from 'react';
 import type { ExprNode, FieldMetadata } from './types';
-export interface QueryBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
     /**
      * Available fields from backend API config
      */
@@ -28,9 +28,9 @@ export interface QueryBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     showKeyboardHint?: boolean;
 }
 /**
- * QueryBar - Self-contained filter component.
+ * FilterInput - Self-contained filter component.
  * Handles autocomplete flow (field → operator → value), chip creation, and expression management.
  * Supports multiple conditions joined by AND/OR connectors.
  * Just pass `fields` config from backend API and it works.
  */
-export declare const QueryBar: FC<QueryBarProps>;
+export declare const FilterInput: FC<FilterInputProps>;

package/dist/components/FilterInput/FilterInput.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+import { cn } from "../../utils/cn.js";
+import { FilterInputProvider, useFilterInputContextValue } from "./FilterInputContext/index.js";
+import { FilterInputErrors, parseFilterInputErrors } from "./FilterInputErrors/index.js";
+import { FilterInputField } from "./FilterInputField/index.js";
+import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
+import { useFilterInputAutocomplete, useFilterInputExpression } from "./hooks/index.js";
+const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
+    const inputRef = useRef(null);
+    const containerRef = useRef(null);
+    const buildingChipRef = useRef(null);
+    const { conditions, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
+        fields,
+        value,
+        onChange,
+        error
+    });
+    const autocomplete = useFilterInputAutocomplete({
+        fields,
+        conditions,
+        chips,
+        upsertCondition,
+        removeCondition,
+        removeConditionAtIndex,
+        clearAll,
+        setConnectorValue,
+        containerRef,
+        buildingChipRef,
+        inputRef
+    });
+    const contextValue = useFilterInputContextValue({
+        chips,
+        autocomplete,
+        buildingChipRef,
+        inputRef,
+        placeholder,
+        error,
+        showKeyboardHint
+    });
+    const errors = useMemo(()=>parseFilterInputErrors(conditions, fields), [
+        conditions,
+        fields
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        ref: containerRef,
+        className: cn('relative flex w-full flex-col gap-4', className),
+        onFocus: autocomplete.handleFocus,
+        onBlur: autocomplete.handleBlur,
+        children: [
+            /*#__PURE__*/ jsx(FilterInputProvider, {
+                value: contextValue,
+                children: /*#__PURE__*/ jsx(FilterInputField, {
+                    ...props
+                })
+            }),
+            /*#__PURE__*/ jsx(FilterInputMenu, {
+                fields: fields,
+                autocomplete: autocomplete
+            }),
+            /*#__PURE__*/ jsx(FilterInputErrors, {
+                errors: errors
+            })
+        ]
+    });
+};
+FilterInput.displayName = 'FilterInput';
+export { FilterInput };

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

@@ -0,0 +1,2 @@
+import type { FilterInputContextValue } from './types';
+export declare const FilterInputContext: import("react").Context<FilterInputContextValue | null>;

package/dist/components/FilterInput/FilterInputContext/FilterInputContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const FilterInputContext = createContext(null);
+export { FilterInputContext };

package/dist/components/FilterInput/FilterInputContext/FilterInputProvider.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react';
+import type { FilterInputContextValue } from './types';
+interface FilterInputProviderProps {
+    value: FilterInputContextValue;
+    children: ReactNode;
+}
+export declare const FilterInputProvider: FC<FilterInputProviderProps>;
+export {};

package/dist/components/FilterInput/FilterInputContext/FilterInputProvider.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { FilterInputContext } from "./FilterInputContext.js";
+const FilterInputProvider = ({ value, children })=>/*#__PURE__*/ jsx(FilterInputContext.Provider, {
+        value: value,
+        children: children
+    });
+FilterInputProvider.displayName = 'FilterInputProvider';
+export { FilterInputProvider };

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

@@ -0,0 +1,4 @@
+export { FilterInputProvider } from './FilterInputProvider';
+export type { BuildingChipData, FilterInputContextValue } from './types';
+export { useFilterInputContext } from './useFilterInputContext';
+export { useFilterInputContextValue } from './useFilterInputContextValue';

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

@@ -0,0 +1,4 @@
+import { FilterInputProvider } from "./FilterInputProvider.js";
+import { useFilterInputContext } from "./useFilterInputContext.js";
+import { useFilterInputContextValue } from "./useFilterInputContextValue.js";
+export { FilterInputProvider, useFilterInputContext, useFilterInputContextValue };

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

@@ -1,13 +1,13 @@
 import type { ChangeEvent, KeyboardEvent, Ref, RefObject } from 'react';
-import type { ChipSegment } from '../QueryBarInput/QueryBarChip';
-import type { QueryBarChipData } from '../types';
+import type { ChipSegment } from '../FilterInputField/FilterInputChip';
+import type { FilterInputChipData } from '../types';
 export interface BuildingChipData {
     attribute: string;
     operator?: string;
     value?: string;
 }
-export interface QueryBarContextValue {
-    chips: QueryBarChipData[];
+export interface FilterInputContextValue {
+    chips: FilterInputChipData[];
     buildingChipData: BuildingChipData | null;
     buildingChipRef: Ref<HTMLDivElement>;
     inputText: string;
@@ -35,4 +35,6 @@ export interface QueryBarContextValue {
     onCustomAttributeCommit: (customText: string) => void;
     /** Ref to the currently open menu content element */
     menuRef: RefObject<HTMLDivElement | null>;
+    /** Close autocomplete menu (used by connector chip to enforce single-dropdown constraint) */
+    closeAutocompleteMenu: () => void;
 }

package/dist/components/FilterInput/FilterInputContext/useFilterInputContext.d.ts

@@ -0,0 +1,2 @@
+import type { FilterInputContextValue } from './types';
+export declare const useFilterInputContext: () => FilterInputContextValue;

package/dist/components/FilterInput/FilterInputContext/useFilterInputContext.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { FilterInputContext } from "./FilterInputContext.js";
+const useFilterInputContext = ()=>{
+    const ctx = useContext(FilterInputContext);
+    if (!ctx) throw new Error('useFilterInputContext must be used within a <FilterInput> component');
+    return ctx;
+};
+export { useFilterInputContext };

package/dist/components/{QueryBar/QueryBarContext/useQueryBarContextValue.d.ts → FilterInput/FilterInputContext/useFilterInputContextValue.d.ts}

@@ -1,7 +1,7 @@
 import type { RefObject } from 'react';
-import type { ChipSegment } from '../QueryBarInput/QueryBarChip';
-import type { MenuState, QueryBarChipData } from '../types';
-import type { BuildingChipData, QueryBarContextValue } from './types';
+import type { ChipSegment } from '../FilterInputField/FilterInputChip';
+import type { FilterInputChipData, MenuState } from '../types';
+import type { BuildingChipData, FilterInputContextValue } from './types';
 interface AutocompleteForContext {
     buildingChipData: BuildingChipData | null;
     inputText: string;
@@ -24,9 +24,10 @@ interface AutocompleteForContext {
     handleCustomValueCommit: (customText: string) => void;
     handleCustomAttributeCommit: (customText: string) => void;
     menuRef: RefObject<HTMLDivElement | null>;
+    closeAutocompleteMenu: () => void;
 }
-interface UseQueryBarContextValueOptions {
-    chips: QueryBarChipData[];
+interface UseFilterInputContextValueOptions {
+    chips: FilterInputChipData[];
     autocomplete: AutocompleteForContext;
     buildingChipRef: RefObject<HTMLDivElement | null>;
     inputRef: RefObject<HTMLInputElement | null>;
@@ -34,5 +35,5 @@ interface UseQueryBarContextValueOptions {
     error: boolean;
     showKeyboardHint: boolean;
 }
-export declare const useQueryBarContextValue: ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint, }: UseQueryBarContextValueOptions) => QueryBarContextValue;
+export declare const useFilterInputContextValue: ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint, }: UseFilterInputContextValueOptions) => FilterInputContextValue;
 export {};

package/dist/components/{QueryBar/QueryBarContext/useQueryBarContextValue.js → FilterInput/FilterInputContext/useFilterInputContextValue.js}

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-const useQueryBarContextValue = ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint })=>useMemo(()=>({
+const useFilterInputContextValue = ({ chips, autocomplete, buildingChipRef, inputRef, placeholder, error, showKeyboardHint })=>useMemo(()=>({
             chips,
             buildingChipData: autocomplete.buildingChipData,
             buildingChipRef,
@@ -26,7 +26,8 @@ const useQueryBarContextValue = ({ chips, autocomplete, buildingChipRef, inputRe
             onCancelSegmentEdit: autocomplete.cancelSegmentEdit,
             onCustomValueCommit: autocomplete.handleCustomValueCommit,
             onCustomAttributeCommit: autocomplete.handleCustomAttributeCommit,
-            menuRef: autocomplete.menuRef
+            menuRef: autocomplete.menuRef,
+            closeAutocompleteMenu: autocomplete.closeAutocompleteMenu
         }), [
         chips,
         autocomplete.buildingChipData,
@@ -50,10 +51,11 @@ const useQueryBarContextValue = ({ chips, autocomplete, buildingChipRef, inputRe
         autocomplete.handleCustomValueCommit,
         autocomplete.handleCustomAttributeCommit,
         autocomplete.menuRef,
+        autocomplete.closeAutocompleteMenu,
         buildingChipRef,
         inputRef,
         placeholder,
         error,
         showKeyboardHint
     ]);
-export { useQueryBarContextValue };
+export { useFilterInputContextValue };

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

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+export interface FilterInputErrorsProps {
+    errors: string[];
+}
+export declare const FilterInputErrors: FC<FilterInputErrorsProps>;

package/dist/components/FilterInput/FilterInputErrors/FilterInputErrors.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Alert } from "../../Alert/Alert.js";
+import { AlertContent } from "../../Alert/AlertContent.js";
+import { AlertDescription } from "../../Alert/AlertDescription.js";
+import { AlertIcon } from "../../Alert/AlertIcon.js";
+import { AlertTitle } from "../../Alert/AlertTitle.js";
+const FilterInputErrors = ({ errors })=>{
+    if (0 === errors.length) return null;
+    const title = 1 === errors.length ? 'Filter contains 1 issue:' : `Filter contains ${errors.length} issues:`;
+    return /*#__PURE__*/ jsxs(Alert, {
+        color: "destructive",
+        children: [
+            /*#__PURE__*/ jsx(AlertIcon, {}),
+            /*#__PURE__*/ jsxs(AlertContent, {
+                children: [
+                    /*#__PURE__*/ jsx(AlertTitle, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ jsx(AlertDescription, {
+                        lineClamp: 0,
+                        children: /*#__PURE__*/ jsx("ul", {
+                            className: "list-disc ms-[21px]",
+                            children: errors.map((err, idx)=>/*#__PURE__*/ jsx("li", {
+                                    children: err
+                                }, idx))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+FilterInputErrors.displayName = 'FilterInputErrors';
+export { FilterInputErrors };

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

@@ -0,0 +1,2 @@
+export { FilterInputErrors, type FilterInputErrorsProps } from './FilterInputErrors';
+export { parseFilterInputErrors } from './parseFilterInputErrors';

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

@@ -0,0 +1,3 @@
+import { FilterInputErrors } from "./FilterInputErrors.js";
+import { parseFilterInputErrors } from "./parseFilterInputErrors.js";
+export { FilterInputErrors, parseFilterInputErrors };

package/dist/components/FilterInput/FilterInputErrors/parseFilterInputErrors.d.ts

@@ -0,0 +1,6 @@
+import type { Condition, FieldMetadata } from '../types';
+/**
+ * Parse conditions into human-readable error messages.
+ * Pure function — no React, no side effects.
+ */
+export declare const parseFilterInputErrors: (conditions: Condition[], fields: FieldMetadata[]) => string[];

package/dist/components/FilterInput/FilterInputErrors/parseFilterInputErrors.js

@@ -0,0 +1,34 @@
+import { isValidFieldValue } from "../hooks/useFilterInputAutocomplete/valueCommitHelpers.js";
+import { getFieldValues } from "../lib/index.js";
+const parseFilterInputErrors = (conditions, fields)=>{
+    const errors = [];
+    for (const condition of conditions){
+        if (!condition.error) continue;
+        const field = fields.find((f)=>f.name === condition.field);
+        const label = field?.label || condition.field;
+        switch(condition.error){
+            case 'attribute':
+                errors.push(`Unknown field ${condition.field}`);
+                break;
+            case 'value':
+                if (field && Array.isArray(condition.value)) {
+                    const fv = getFieldValues(field);
+                    if (fv.length > 0) {
+                        const invalidValues = condition.value.filter((v)=>!isValidFieldValue(fv, v));
+                        if (invalidValues.length > 0) {
+                            const formatted = invalidValues.map((v)=>String(v)).join(', ');
+                            errors.push(`Invalid value for ${label}: ${formatted}`);
+                            break;
+                        }
+                    }
+                }
+                errors.push(`Invalid value for ${label}`);
+                break;
+            default:
+                errors.push(`Invalid condition for ${label}`);
+                break;
+        }
+    }
+    return errors;
+};
+export { parseFilterInputErrors };

package/dist/components/{QueryBar/QueryBarInput → FilterInput/FilterInputField}/ChipsWithGaps.d.ts

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
-import type { QueryBarChipData } from '../types';
-import type { ChipSegment } from './QueryBarChip';
+import type { FilterInputChipData } from '../types';
+import type { ChipSegment } from './FilterInputChip';
 interface ChipsWithGapsProps {
-    chips: QueryBarChipData[];
+    chips: FilterInputChipData[];
     hideLeadingGap?: boolean;
     hideTrailingGap?: boolean;
     onChipClick: (chipId: string, segment: ChipSegment, anchorRect: DOMRect) => void;
@@ -17,7 +17,7 @@ interface ChipsWithGapsProps {
 export declare const ChipsWithGaps: FC<ChipsWithGapsProps>;
 /** Trailing gap rendered once after chipsAfter in the parent layout. */
 export declare const TrailingGap: FC<{
-    chips: QueryBarChipData[];
+    chips: FilterInputChipData[];
     onGapClick: (conditionIndex: number, afterConnector: boolean) => void;
 }>;
 export {};

package/dist/components/{QueryBar/QueryBarInput → FilterInput/FilterInputField}/ChipsWithGaps.js

@@ -1,7 +1,8 @@
 import { Fragment, jsx } from "react/jsx-runtime";
+import { CONNECTOR_ID_PATTERN } from "../lib/index.js";
+import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
+import { FilterInputConnectorChip } from "./FilterInputConnectorChip/index.js";
 import { InsertionGap } from "./InsertionGap/index.js";
-import { QueryBarChip } from "./QueryBarChip/QueryBarChip.js";
-import { QueryBarConnectorChip } from "./QueryBarConnectorChip/index.js";
 const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, onConnectorChange, onChipRemove, onGapClick })=>{
     const elements = [];
     let connectorIndex = 0;
@@ -11,18 +12,21 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
         const isConnector = 'and' === chip.variant || 'or' === chip.variant;
         if (isCondition) elements.push(/*#__PURE__*/ jsx("div", {
             className: "shrink-0 cursor-pointer hover:z-10",
-            children: /*#__PURE__*/ jsx(QueryBarChip, {
+            children: /*#__PURE__*/ jsx(FilterInputChip, {
                 chipId: chip.id,
                 attribute: chip.attribute ?? '',
                 operator: chip.operator,
                 value: chip.value,
                 error: chip.error,
+                valueParts: chip.valueParts,
+                valueSeparator: chip.valueSeparator,
+                errorValueIndices: chip.errorValueIndices,
                 onRemove: ()=>onChipRemove(chip.id),
                 onSegmentClick: (segment, anchorRect)=>onChipClick(chip.id, segment, anchorRect)
             })
         }, chip.id));
         else if (isConnector) {
-            const match = chip.id.match(/^connector-(\d+)$/);
+            const match = chip.id.match(CONNECTOR_ID_PATTERN);
             const condIdx = match ? Number(match[1]) : 0;
             const isFirst = 0 === connectorIndex;
             const isLast = connectorIndex === connectorCount - 1;
@@ -31,7 +35,7 @@ const ChipsWithGaps = ({ chips, hideLeadingGap, hideTrailingGap, onChipClick, on
             }, `gap-before-${chip.id}`));
             elements.push(/*#__PURE__*/ jsx("div", {
                 className: "shrink-0",
-                children: /*#__PURE__*/ jsx(QueryBarConnectorChip, {
+                children: /*#__PURE__*/ jsx(FilterInputConnectorChip, {
                     chipId: chip.id,
                     variant: chip.variant,
                     onChange: onConnectorChange

package/dist/components/{QueryBar/QueryBarInput/QueryBarChip → FilterInput/FilterInputField/FilterInputChip}/EditingContext.d.ts

@@ -1,5 +1,5 @@
 import { type FC, type FocusEvent, type KeyboardEvent, type ReactNode } from 'react';
-import type { ChipSegment } from './QueryBarChip';
+import type { ChipSegment } from './FilterInputChip';
 export interface EditingContextValue {
     editingChipId: string | null;
     editingSegment: ChipSegment | null;

package/dist/components/FilterInput/FilterInputField/FilterInputChip/FilterInputChip.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes } from 'react';
+import type { ChipErrorSegment } from '../../types';
+export type ChipSegment = 'attribute' | 'operator' | 'value';
+export interface FilterInputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    chipId?: string;
+    attribute: string;
+    operator?: string;
+    value?: string;
+    error?: ChipErrorSegment;
+    valueParts?: string[];
+    valueSeparator?: string;
+    errorValueIndices?: number[];
+    building?: boolean;
+    onRemove?: () => void;
+    onSegmentClick?: (segment: ChipSegment, anchorRect: DOMRect) => void;
+}
+export declare const FilterInputChip: FC<FilterInputChipProps>;

package/dist/components/{QueryBar/QueryBarInput/QueryBarChip/QueryBarChip.js → FilterInput/FilterInputField/FilterInputChip/FilterInputChip.js}

@@ -3,11 +3,13 @@ import { useCallback, useRef } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { chipVariants } from "./classes.js";
 import { useEditingContext } from "./EditingContext.js";
+import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
 import { OperatorSegment } from "./OperatorSegment.js";
-import { QueryBarRemoveButton } from "./QueryBarRemoveButton.js";
 import { Segment } from "./Segment.js";
-const QueryBarChip = ({ chipId, attribute, operator, value, error = false, building = false, onRemove, onSegmentClick, className, ...props })=>{
+import { ValueSegment } from "./ValueSegment.js";
+const FilterInputChip = ({ chipId, attribute, operator, value, error = false, valueParts, valueSeparator, errorValueIndices, building = false, onRemove, onSegmentClick, className, ...props })=>{
     const interactive = !building;
+    const hasError = !!error;
     const chipRef = useRef(null);
     const editing = useEditingContext();
     const isEditingThisChip = null != editing && null != chipId && editing.editingChipId === chipId;
@@ -33,15 +35,16 @@ const QueryBarChip = ({ chipId, attribute, operator, value, error = false, build
     return /*#__PURE__*/ jsxs("div", {
         ref: chipRef,
         className: cn(chipVariants({
-            error,
+            error: hasError,
             interactive
         }), 'max-w-[600px]', className),
-        "data-slot": "query-bar-condition-chip",
+        "data-slot": "filter-input-condition-chip",
         ...props,
         children: [
             /*#__PURE__*/ jsx(Segment, {
                 variant: "attribute",
                 className: "shrink-0",
+                error: true === error || 'attribute' === error,
                 onClick: interactive ? (e)=>handleSegmentClick('attribute', e) : void 0,
                 ...segmentEditProps('attribute'),
                 children: attribute
@@ -51,19 +54,22 @@ const QueryBarChip = ({ chipId, attribute, operator, value, error = false, build
                 onClick: interactive ? (e)=>handleSegmentClick('operator', e) : void 0,
                 children: operator
             }),
-            value && /*#__PURE__*/ jsx(Segment, {
-                variant: "value",
+            value && /*#__PURE__*/ jsx(ValueSegment, {
                 className: "min-w-0 max-w-[400px]",
+                error: 'value' !== activeSegment && (true === error || 'value' === error),
+                valueParts: valueParts,
+                valueSeparator: valueSeparator,
+                errorValueIndices: errorValueIndices,
                 onClick: interactive ? (e)=>handleSegmentClick('value', e) : void 0,
                 ...segmentEditProps('value'),
                 children: value
             }),
-            onRemove && /*#__PURE__*/ jsx(QueryBarRemoveButton, {
-                error: error,
+            onRemove && /*#__PURE__*/ jsx(FilterInputRemoveButton, {
+                error: hasError,
                 onRemove: onRemove
             })
         ]
     });
 };
-QueryBarChip.displayName = 'QueryBarChip';
-export { QueryBarChip };
+FilterInputChip.displayName = 'FilterInputChip';
+export { FilterInputChip };

package/dist/components/{QueryBar/QueryBarInput/QueryBarChip/QueryBarRemoveButton.d.ts → FilterInput/FilterInputField/FilterInputChip/FilterInputRemoveButton.d.ts}

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-export declare const QueryBarRemoveButton: FC<{
+export declare const FilterInputRemoveButton: FC<{
     error: boolean;
     onRemove: () => void;
 }>;

package/dist/components/{QueryBar/QueryBarInput/QueryBarChip/QueryBarRemoveButton.js → FilterInput/FilterInputField/FilterInputChip/FilterInputRemoveButton.js}

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { X } from "../../../../icons/X.js";
 import { removeButtonVariants } from "./classes.js";
-const QueryBarRemoveButton = ({ error, onRemove })=>/*#__PURE__*/ jsx("button", {
+const FilterInputRemoveButton = ({ error, onRemove })=>/*#__PURE__*/ jsx("button", {
         type: "button",
         onClick: (e)=>{
             e.stopPropagation();
@@ -10,11 +10,11 @@ const QueryBarRemoveButton = ({ error, onRemove })=>/*#__PURE__*/ jsx("button",
         className: removeButtonVariants({
             error
         }),
-        "data-slot": "query-bar-chip-delete",
+        "data-slot": "filter-input-chip-delete",
         "aria-label": "Remove filter",
         children: /*#__PURE__*/ jsx(X, {
             size: "sm"
         })
     });
-QueryBarRemoveButton.displayName = 'QueryBarRemoveButton';
-export { QueryBarRemoveButton };
+FilterInputRemoveButton.displayName = 'FilterInputRemoveButton';
+export { FilterInputRemoveButton };

package/dist/components/{QueryBar/QueryBarInput/QueryBarChip → FilterInput/FilterInputField/FilterInputChip}/Segment.d.ts

@@ -3,6 +3,7 @@ type SegmentVariant = 'attribute' | 'operator' | 'value';
 type SegmentProps = HTMLAttributes<HTMLDivElement> & {
     variant: SegmentVariant;
     children: string;
+    error?: boolean;
     editing?: boolean;
     editText?: string;
     onEditChange?: (text: string) => void;

package/dist/components/{QueryBar/QueryBarInput/QueryBarChip → FilterInput/FilterInputField/FilterInputChip}/Segment.js

@@ -2,15 +2,16 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../../../utils/cn.js";
 import { segmentContainer, segmentTextVariants } from "./classes.js";
-const Segment = ({ variant, children, className, editing, editText, onEditChange, onEditKeyDown, onEditBlur, ...props })=>{
+const Segment = ({ variant, children, className, error, editing, editText, onEditChange, onEditKeyDown, onEditBlur, ...props })=>{
     const textRef = useRef(null);
     const inputRef = useRef(null);
     const sizerRef = useRef(null);
     const lastTextWidthRef = useRef(0);
     const [inputWidth, setInputWidth] = useState(void 0);
     useEffect(()=>{
-        if (editing || !textRef.current) return;
-        lastTextWidthRef.current = textRef.current.getBoundingClientRect().width;
+        if (editing) return;
+        const width = textRef.current?.getBoundingClientRect().width ?? 8 * children.length;
+        lastTextWidthRef.current = width;
     }, [
         editing,
         children
@@ -34,7 +35,7 @@ const Segment = ({ variant, children, className, editing, editText, onEditChange
     ]);
     useEffect(()=>{
         if (!editing) return void setInputWidth(void 0);
-        const sizerWidth = sizerRef.current?.getBoundingClientRect().width ?? 0;
+        const sizerWidth = sizerRef.current?.getBoundingClientRect().width ?? (editText?.length ?? 0) * 8;
         setInputWidth(Math.max(20, lastTextWidthRef.current, sizerWidth));
     }, [
         editing,
@@ -60,7 +61,8 @@ const Segment = ({ variant, children, className, editing, editText, onEditChange
                     onBlur: onEditBlur,
                     "aria-label": `Filter ${variant}`,
                     className: cn(segmentTextVariants({
-                        variant
+                        variant,
+                        error
                     }), 'bg-transparent border-none outline-none p-0 m-0'),
                     style: {
                         width: `${inputWidth ?? Math.max(20, lastTextWidthRef.current)}px`
@@ -69,7 +71,8 @@ const Segment = ({ variant, children, className, editing, editText, onEditChange
                 /*#__PURE__*/ jsx("span", {
                     ref: sizerRef,
                     className: cn(segmentTextVariants({
-                        variant
+                        variant,
+                        error
                     }), 'invisible absolute whitespace-pre'),
                     "aria-hidden": true,
                     children: editText || ' '
@@ -78,7 +81,8 @@ const Segment = ({ variant, children, className, editing, editText, onEditChange
         }) : /*#__PURE__*/ jsx("p", {
             ref: textRef,
             className: segmentTextVariants({
-                variant
+                variant,
+                error
             }),
             children: children
         })

package/dist/components/FilterInput/FilterInputField/FilterInputChip/ValueSegment.d.ts

@@ -0,0 +1,18 @@
+import type { FC, FocusEvent, HTMLAttributes, KeyboardEvent } from 'react';
+interface ValueSegmentProps extends HTMLAttributes<HTMLDivElement> {
+    children: string;
+    error?: boolean;
+    /** Individual display parts for multi-value chips */
+    valueParts?: string[];
+    /** Separator between parts (default: ", ") */
+    valueSeparator?: string;
+    /** Indices of invalid values in valueParts */
+    errorValueIndices?: number[];
+    editing?: boolean;
+    editText?: string;
+    onEditChange?: (text: string) => void;
+    onEditKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onEditBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+}
+export declare const ValueSegment: FC<ValueSegmentProps>;
+export {};