@wallarm-org/design-system 0.28.0-rc-feature-WDS-96-update-data-input-component.5 → 0.28.0

package/dist/components/DateInput/DateInput.js

@@ -5,11 +5,9 @@ import { useDateField } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { cn } from "../../utils/cn.js";
-import { getDefaultTemporalPlaceholder, useTemporalField } from "../TemporalCore/index.js";
+import { useTemporalField } from "../TemporalCore/index.js";
 import { DateInputInternal } from "./DateInputInternal.js";
-const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder = getDefaultTemporalPlaceholder({
-    granularity
-}), showTimeDropdown, timeStep, hourCycle, size, className, ...props }, forwardedRef)=>{
+const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder, showTimeDropdown, timeStep, hourCycle, className, ...props }, forwardedRef)=>{
     const { locale } = useLocale();
     const ref = useRef(null);
     const finalRef = forwardedRef || ref;
@@ -48,7 +46,6 @@ const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defa
             showTimeDropdown: showTimeDropdown,
             timeStep: timeStep,
             hourCycle: hourCycle,
-            size: size,
             className: cn('w-full')
         })
     });

package/dist/components/DateInput/DateInputInternal.js

@@ -4,7 +4,7 @@ import { CalendarDateTime, getLocalTimeZone, now } from "@internationalized/date
 import { cn } from "../../utils/cn.js";
 import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
 import { TemporalClear, TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
-const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent, error, disabled, placeholder, showTimeDropdown, timeStep = 30, hourCycle, size = 'default', ...props }, ref)=>{
+const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent, error, disabled, placeholder, showTimeDropdown, timeStep = 30, hourCycle, ...props }, ref)=>{
     const dropdownRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -53,24 +53,22 @@ const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent
     });
     const currentTimeValue = state.value && hasTimeSegments ? state.value : null;
     return /*#__PURE__*/ jsxs(InputGroup, {
-        size: size,
         children: [
             IconComponent && /*#__PURE__*/ jsx(InputGroupAddon, {
                 children: /*#__PURE__*/ jsx(IconComponent, {})
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: cn('relative flex-1 h-full', !IconComponent && 'pl-12'),
+                className: cn('relative flex-1', !IconComponent && 'pl-12'),
                 onKeyDownCapture: handleKeyDownCapture,
                 children: [
                     showPlaceholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
-                        text: placeholder,
-                        className: cn(!IconComponent && 'pl-12')
+                        text: placeholder
                     }),
                     /*#__PURE__*/ jsx(TemporalSegmentGroup, {
                         ...props,
                         ref: ref,
                         "data-slot": "input",
-                        className: cn('h-full', showPlaceholder && 'opacity-0'),
+                        className: cn('h-36', showPlaceholder && 'opacity-0'),
                         "aria-invalid": error || void 0,
                         "aria-disabled": disabled || void 0,
                         state: state,

package/dist/components/DateInput/types.d.ts

@@ -1,6 +1,5 @@
 import type { FC } from 'react';
 import type { SvgIconProps } from '../../icons';
-import type { InputGroupSize } from '../InputGroup';
 export interface DateInputBaseProps {
     /** Optional icon component to display at the start of the input */
     icon?: FC<SvgIconProps>;
@@ -16,8 +15,6 @@ export interface DateInputBaseProps {
     timeStep?: number;
     /** Hour cycle for time display: 12-hour (AM/PM) or 24-hour format */
     hourCycle?: 12 | 24;
-    /** Visual size of the input. Default: 'default' (36px) */
-    size?: InputGroupSize;
     /**
      * className prop
      */

package/dist/components/DateRangeInput/DateRangeContext/DateRangeProvider.js

@@ -1,13 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
+import { forwardRef, useCallback, useRef } from "react";
+import { CalendarDate } from "@internationalized/date";
 import { useDateRangePicker } from "@react-aria/datepicker";
 import { useDateRangePickerState } from "@react-stately/datepicker";
-import { getDefaultTemporalPlaceholder, useTemporalField } from "../../TemporalCore/index.js";
+import { useTemporalField } from "../../TemporalCore/index.js";
 import { DateRangeContext } from "./context.js";
-const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, granularity = 'day', hourCycle, placeholder = getDefaultTemporalPlaceholder({
-    granularity,
-    isRange: true
-}), showTimeDropdown, timeStep, icon, size }, forwardedRef)=>{
+const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, granularity = 'day', hourCycle, placeholder, showTimeDropdown, timeStep, icon }, forwardedRef)=>{
     const ref = useRef(null);
     const finalRef = forwardedRef || ref;
     const startRef = useRef(null);
@@ -17,9 +15,20 @@ const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlle
         defaultValue,
         onChange
     });
+    const handleChangeWithValidation = useCallback((newValue)=>{
+        if (void 0 === newValue) return void handleChange(null);
+        if (newValue?.start && newValue?.end) {
+            const startDate = new CalendarDate(newValue.start.year, newValue.start.month, newValue.start.day);
+            const endDate = new CalendarDate(newValue.end.year, newValue.end.month, newValue.end.day);
+            if (endDate.compare(startDate) < 0) return;
+        }
+        handleChange(newValue);
+    }, [
+        handleChange
+    ]);
     const state = useDateRangePickerState({
         value,
-        onChange: (newValue)=>handleChange(newValue ?? null),
+        onChange: handleChangeWithValidation,
         isDisabled: disabled,
         isReadOnly: readOnly,
         granularity,
@@ -51,8 +60,7 @@ const DateRangeProvider = /*#__PURE__*/ forwardRef(({ children, value: controlle
             showTimeDropdown,
             timeStep,
             hourCycle,
-            icon,
-            size
+            icon
         },
         children: children
     });

package/dist/components/DateRangeInput/DateRangeContext/types.d.ts

@@ -4,7 +4,6 @@ import type { DateRangePickerState } from '@react-stately/datepicker';
 import type { AriaDatePickerProps } from '@react-types/datepicker';
 import type { GroupDOMAttributes } from '@react-types/shared';
 import type { SvgIconProps } from '../../../icons';
-import type { InputGroupSize } from '../../InputGroup';
 export interface DateRangeContextValue {
     groupProps: GroupDOMAttributes;
     startFieldProps: AriaDatePickerProps<DateValue>;
@@ -22,5 +21,4 @@ export interface DateRangeContextValue {
     timeStep?: number;
     hourCycle?: 12 | 24;
     icon?: FC<SvgIconProps>;
-    size?: InputGroupSize;
 }

package/dist/components/DateRangeInput/DateRangeGroup.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
-const dateRangeGroupVariants = cva(cn('relative group/temporal flex-1 h-full flex items-center gap-4', 'focus-within:outline-none', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed'));
+const dateRangeGroupVariants = cva(cn('group/temporal flex-1 h-full flex items-center gap-4', 'focus-within:outline-none', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed'));
 const DateRangeGroup = ({ children })=>{
     const context = useDateRangeContext();
     const { groupProps = {}, finalRef, disabled, error } = context ?? {};

package/dist/components/DateRangeInput/DateRangeInputInternal.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
-import { TemporalClear, TemporalPlaceholder } from "../TemporalCore/index.js";
+import { TemporalClear } from "../TemporalCore/index.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
 import { DateRangeGroup } from "./DateRangeGroup.js";
 import { DateRangeSegmentGroup } from "./DateRangeSegmentGroup.js";
@@ -11,7 +11,6 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
     const context = useDateRangeContext();
     const [startHasValue, setStartHasValue] = useState(false);
     const [endHasValue, setEndHasValue] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
     const [clearKey, setClearKey] = useState(0);
     const hasAnyValue = startHasValue || endHasValue;
     const handleClear = useCallback(()=>{
@@ -21,47 +20,30 @@ const DateRangeInputInternal = ({ icon: IconComponent })=>{
     }, [
         context
     ]);
-    const handleFocusCapture = ()=>setIsFocused(true);
-    const handleBlurCapture = (event)=>{
-        if (!event.currentTarget.contains(event.relatedTarget)) setIsFocused(false);
-    };
     if (!context) return null;
-    const { startFieldProps, startRef, endFieldProps, endRef, disabled, placeholder, size } = context;
-    const showPlaceholder = Boolean(placeholder && !hasAnyValue && !isFocused);
+    const { startFieldProps, startRef, endFieldProps, endRef, disabled } = context;
     return /*#__PURE__*/ jsx("div", {
         className: cn('**:data-[slot=input]:first:pr-0 **:data-[slot=input]:last:pl-0 min-w-284'),
-        onFocusCapture: handleFocusCapture,
-        onBlurCapture: handleBlurCapture,
         children: /*#__PURE__*/ jsxs(InputGroup, {
-            size: size,
             children: [
                 IconComponent && /*#__PURE__*/ jsx(InputGroupAddon, {
                     children: /*#__PURE__*/ jsx(IconComponent, {})
                 }),
                 /*#__PURE__*/ jsxs(DateRangeGroup, {
                     children: [
-                        showPlaceholder && placeholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
-                            text: placeholder,
-                            className: cn(!IconComponent && 'pl-12')
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            className: cn('contents', showPlaceholder && '[&>*]:opacity-0'),
-                            children: [
-                                /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
-                                    ...startFieldProps,
-                                    ref: startRef,
-                                    type: "start",
-                                    onHasPartialValueChange: setStartHasValue
-                                }, `start-${clearKey}`),
-                                /*#__PURE__*/ jsx(DateRangeSeparator, {}),
-                                /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
-                                    ...endFieldProps,
-                                    ref: endRef,
-                                    type: "end",
-                                    onHasPartialValueChange: setEndHasValue
-                                }, `end-${clearKey}`)
-                            ]
-                        })
+                        /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
+                            ...startFieldProps,
+                            ref: startRef,
+                            type: "start",
+                            onHasPartialValueChange: setStartHasValue
+                        }, `start-${clearKey}`),
+                        /*#__PURE__*/ jsx(DateRangeSeparator, {}),
+                        /*#__PURE__*/ jsx(DateRangeSegmentGroup, {
+                            ...endFieldProps,
+                            ref: endRef,
+                            type: "end",
+                            onHasPartialValueChange: setEndHasValue
+                        }, `end-${clearKey}`)
                     ]
                 }),
                 /*#__PURE__*/ jsx(InputGroupAddon, {

package/dist/components/DateRangeInput/DateRangeSegment.js

@@ -1,10 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
-import { useDateRangeContext } from "./DateRangeContext/index.js";
-const DateRangeSegment = ({ children, icon: IconComponent })=>{
-    const context = useDateRangeContext();
-    return /*#__PURE__*/ jsxs(InputGroup, {
-        size: context?.size,
+const DateRangeSegment = ({ children, icon: IconComponent })=>/*#__PURE__*/ jsxs(InputGroup, {
         children: [
             IconComponent && /*#__PURE__*/ jsx(InputGroupAddon, {
                 children: /*#__PURE__*/ jsx(IconComponent, {})
@@ -12,5 +8,4 @@ const DateRangeSegment = ({ children, icon: IconComponent })=>{
             children
         ]
     });
-};
 export { DateRangeSegment };

package/dist/components/DateRangeInput/DateRangeSegmentGroup.js

@@ -5,13 +5,14 @@ import { useDateField } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { cn } from "../../utils/cn.js";
-import { TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
+import { TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
 import { useDateRangeContext } from "./DateRangeContext/index.js";
 const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValueChange, ...props }, ref)=>{
     const context = useDateRangeContext();
-    const { disabled = false, error = false, readOnly = false, showTimeDropdown, timeStep = 30, hourCycle, icon } = context ?? {};
+    const { disabled = false, error = false, readOnly = false, placeholder, showTimeDropdown, timeStep = 30, hourCycle, icon } = context ?? {};
     const { locale } = useLocale();
     const dropdownRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const blurTimeoutRef = useRef(null);
     const fieldState = useDateFieldState({
@@ -23,6 +24,7 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
     });
     const { fieldProps } = useDateField(props, fieldState, ref);
     const hasPartialValue = fieldState.segments.some((seg)=>seg.isEditable && !seg.isPlaceholder);
+    const showPlaceholder = placeholder && !hasPartialValue && !isFocused;
     useEffect(()=>{
         onHasPartialValueChange?.(hasPartialValue);
     }, [
@@ -32,6 +34,7 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
     const hasTimeSegments = fieldState.segments.some((seg)=>'hour' === seg.type || 'minute' === seg.type);
     const hasDateSegments = fieldState.segments.some((seg)=>'year' === seg.type || 'month' === seg.type || 'day' === seg.type);
     const handleFocus = ()=>{
+        setIsFocused(true);
         if (blurTimeoutRef.current) {
             clearTimeout(blurTimeoutRef.current);
             blurTimeoutRef.current = null;
@@ -41,6 +44,7 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
         if (showTimeDropdown && hasTimeSegments && !isDropdownOpen) setIsDropdownOpen(true);
     };
     const handleBlur = ()=>{
+        setIsFocused(false);
         blurTimeoutRef.current = window.setTimeout(()=>{
             setIsDropdownOpen(false);
         }, 200);
@@ -80,15 +84,19 @@ const DateRangeSegmentGroup = /*#__PURE__*/ forwardRef(({ type, onHasPartialValu
     const currentTimeValue = fieldState.value && hasTimeSegments ? fieldState.value : null;
     const hasIcon = Boolean(icon);
     return /*#__PURE__*/ jsxs("div", {
-        className: cn('relative h-full', !hasIcon && 'start' === type && 'pl-12'),
+        className: cn('relative flex-1', !hasIcon && 'pl-12'),
         onKeyDownCapture: handleKeyDownCapture,
         onClick: handleClick,
         children: [
+            showPlaceholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
+                text: placeholder,
+                className: "overflow-hidden text-ellipsis"
+            }),
             /*#__PURE__*/ jsx(TemporalSegmentGroup, {
                 ...fieldProps,
                 ref: ref,
                 "data-slot": "input",
-                className: cn('h-full'),
+                className: cn('h-36', showPlaceholder && 'opacity-0'),
                 "aria-disabled": disabled || void 0,
                 "aria-invalid": error || void 0,
                 "data-field-type": type,

package/dist/components/DateRangeInput/DateRangeSeparator.d.ts

@@ -1,7 +1,6 @@
 import type { FC } from 'react';
 /**
- * Visual separator between start and end date fields in a date range input.
- * Renders a Unicode right arrow as plain text.
+ * Visual separator (arrow icon) between start and end date fields in a date range input.
  * Used within DateRangeProvider for custom compositions.
  *
  * @example

package/dist/components/DateRangeInput/DateRangeSeparator.js

@@ -1,9 +1,12 @@
 import { jsx } from "react/jsx-runtime";
+import { ArrowRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 const DateRangeSeparator = ()=>/*#__PURE__*/ jsx("span", {
-        className: cn('text-sm text-text-secondary select-none'),
+        className: cn('text-icon-secondary select-none'),
         "aria-hidden": "true",
-        children: "→"
+        children: /*#__PURE__*/ jsx(ArrowRight, {
+            size: "md"
+        })
     });
 DateRangeSeparator.displayName = 'DateRangeSeparator';
 export { DateRangeSeparator };

package/dist/components/DateRangeInput/types.d.ts

@@ -2,7 +2,6 @@ import type { FC } from 'react';
 import type { DateValue } from '@react-aria/datepicker';
 import type { RangeValue } from '@react-types/shared';
 import type { SvgIconProps } from '../../icons';
-import type { InputGroupSize } from '../InputGroup';
 export interface DateRangeBaseProps {
     /** Optional icon component to display at the start of the input */
     icon?: FC<SvgIconProps>;
@@ -18,8 +17,6 @@ export interface DateRangeBaseProps {
     showTimeDropdown?: boolean;
     /** Time interval in minutes for dropdown options. Default: 30 */
     timeStep?: number;
-    /** Visual size of the input. Default: 'default' (36px) */
-    size?: InputGroupSize;
 }
 export interface DateRangeInputProps extends DateRangeBaseProps {
     /** Controlled value - range with start and end dates */

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

@@ -1,6 +1,20 @@
 import type { FC, HTMLAttributes } from 'react';
 import type { ExprNode, FieldMetadata } from './types';
 export interface FilterInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /**
+     * Filter-field configurations driving the autocomplete. Most fields are
+     * passed through as-is, but a few names are **reserved** and auto-wired
+     * with design-system helpers (`acceptChar` / `normalize` / `getSuggestions`
+     * / `validate`). Current reserved names:
+     *
+     *   - `status_code` — HTTP status code field (mask suggestions, format
+     *     validation, digit-or-X input filter, partial-input normalization).
+     *
+     * Consumer-supplied callbacks always override the auto-wiring, so you can
+     * opt out per-field. For the same helpers on a field with a different
+     * `name`, import the factories (`createStatusCodeSuggestions`, …) and
+     * attach them manually.
+     */
     fields?: FieldMetadata[];
     value?: ExprNode | null;
     onChange?: (expression: ExprNode | null) => void;

package/dist/components/FilterInput/FilterInput.js

@@ -6,7 +6,8 @@ import { FilterInputErrors, parseFilterInputErrors } from "./FilterInputErrors/i
 import { FilterInputField } from "./FilterInputField/index.js";
 import { FilterInputMenu } from "./FilterInputMenu/FilterInputMenu.js";
 import { useFilterInputAutocomplete, useFilterInputExpression, useFilterInputSelection } from "./hooks/index.js";
-const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
+import { applyKnownFieldHelpers } from "./lib/applyKnownFieldHelpers.js";
+const FilterInput = ({ fields: rawFields = [], value, onChange, placeholder = 'Type to filter...', error = false, showKeyboardHint = false, className, ...props })=>{
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const buildingChipRef = useRef(null);
@@ -15,6 +16,9 @@ const FilterInput = ({ fields = [], value, onChange, placeholder = 'Type to filt
         if (el) chipRegistryRef.current.set(id, el);
         else chipRegistryRef.current.delete(id);
     }, []);
+    const fields = useMemo(()=>applyKnownFieldHelpers(rawFields), [
+        rawFields
+    ]);
     const { conditions, connectors, chips, upsertCondition, removeCondition, removeConditionAtIndex, clearAll, setConnectorValue } = useFilterInputExpression({
         fields,
         value,

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

@@ -1,5 +1,5 @@
 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 { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, type StatusCodeSuggestionsOptions, serializeExpression, } from './lib';
+export { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, type FilterParseError, isFilterParseError, parseExpression, serializeExpression, } from './lib';
 export type { Condition, ExprNode, FieldMetadata, FieldType, FieldValueOption, FilterInputChipData, FilterInputChipVariant, FilterOperator, Group, } from './types';

package/dist/components/FilterInput/index.js

@@ -1,5 +1,5 @@
 import { FilterInput } from "./FilterInput.js";
 import { FilterInputChip } from "./FilterInputField/index.js";
 import { FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu } from "./FilterInputMenu/index.js";
-import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
-export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };
+import { applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression } from "./lib/index.js";
+export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, FilterInputValueMenu, applyFieldValueTransforms, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, isFilterParseError, parseExpression, serializeExpression };

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

@@ -0,0 +1,11 @@
+import type { ExprNode, FieldMetadata } from '../types';
+/**
+ * Walk an expression tree and apply each field's `serializeValue` hook to the
+ * matching condition's value. Typical use: consumer has the UI-facing
+ * `ExprNode` (e.g. status code chip with `"2XX"`) and wants the backend
+ * payload to carry the transformed form (`"2"`).
+ *
+ * Returns the original node (by reference) when nothing changed, so
+ * downstream memoization stays stable.
+ */
+export declare const applyFieldValueTransforms: (expr: ExprNode | null, fields: FieldMetadata[]) => ExprNode | null;

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

@@ -0,0 +1,43 @@
+const transformConditionValue = (condition, fieldsByName)=>{
+    const field = fieldsByName.get(condition.field);
+    const transform = field?.serializeValue;
+    if (!transform) return condition;
+    const { value } = condition;
+    if (null == value) return condition;
+    if (Array.isArray(value)) {
+        const next = value.map((v)=>transform(v));
+        if (next.every((v, i)=>v === value[i])) return condition;
+        return {
+            ...condition,
+            value: next
+        };
+    }
+    const next = transform(value);
+    if (next === value) return condition;
+    return {
+        ...condition,
+        value: next
+    };
+};
+const transformGroup = (group, fieldsByName)=>{
+    const children = group.children.map((child)=>transformNode(child, fieldsByName));
+    if (children.every((c, i)=>c === group.children[i])) return group;
+    return {
+        ...group,
+        children
+    };
+};
+const transformNode = (node, fieldsByName)=>{
+    if ('condition' === node.type) return transformConditionValue(node, fieldsByName);
+    return transformGroup(node, fieldsByName);
+};
+const applyFieldValueTransforms = (expr, fields)=>{
+    if (!expr) return expr;
+    if (!fields.some((f)=>f.serializeValue)) return expr;
+    const fieldsByName = new Map(fields.map((f)=>[
+            f.name,
+            f
+        ]));
+    return transformNode(expr, fieldsByName);
+};
+export { applyFieldValueTransforms };

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

@@ -0,0 +1,21 @@
+import type { FieldMetadata } from '../types';
+/**
+ * Decorate `fields` in place with design-system helpers for known field names.
+ * `FilterInput` calls this on the `fields` prop before rendering.
+ *
+ * Reserved names and what they auto-attach (unless the consumer already
+ * provided a value for that slot):
+ *
+ * | `name`        | Attaches                                                                                   |
+ * | ------------- | ------------------------------------------------------------------------------------------ |
+ * | `status_code` | HTTP status code: `acceptChar`, `normalize`, `getSuggestions`, `validate`, `serializeValue` |
+ *
+ * Consumer-supplied callbacks always win over the auto-wired ones. If the
+ * backend uses a different name (e.g. `http_status_code`), the helpers are
+ * NOT applied — the consumer must either rename the field to match or wire
+ * the factories (`createStatusCode*`) manually.
+ *
+ * The returned array has **reference-stable identity** when no field matches,
+ * so downstream `useMemo` that depends on it does not invalidate unnecessarily.
+ */
+export declare const applyKnownFieldHelpers: (fields: FieldMetadata[]) => FieldMetadata[];

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

@@ -0,0 +1,29 @@
+import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.js";
+const KNOWN_FIELD_HELPERS = {
+    status_code: ()=>({
+            acceptChar: createStatusCodeInputFilter(),
+            normalize: createStatusCodeNormalizer(),
+            getSuggestions: createStatusCodeSuggestions(),
+            validate: createStatusCodeValidator(),
+            serializeValue: createStatusCodeSerializer()
+        })
+};
+const applyKnownFieldHelpers = (fields)=>{
+    let changed = false;
+    const out = fields.map((field)=>{
+        const factory = KNOWN_FIELD_HELPERS[field.name];
+        if (!factory) return field;
+        const helpers = factory();
+        changed = true;
+        return {
+            ...field,
+            acceptChar: field.acceptChar ?? helpers.acceptChar,
+            normalize: field.normalize ?? helpers.normalize,
+            getSuggestions: field.getSuggestions ?? helpers.getSuggestions,
+            validate: field.validate ?? helpers.validate,
+            serializeValue: field.serializeValue ?? helpers.serializeValue
+        };
+    });
+    return changed ? out : fields;
+};
+export { applyKnownFieldHelpers };

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

@@ -1,6 +1,8 @@
 export type { DatePreset } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
 export { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset, } from '../FilterInputMenu/FilterInputDateValueMenu/constants';
 export { applyAcceptChar } from './applyAcceptChar';
+export { applyFieldValueTransforms } from './applyFieldValueTransforms';
+export { applyKnownFieldHelpers } from './applyKnownFieldHelpers';
 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';
@@ -10,4 +12,4 @@ export { getCurrentValueTokenText, getValueFilterText } from './menuFilterText';
 export { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator, } from './operators';
 export { type FilterParseError, isFilterParseError, parseExpression } from './parseExpression';
 export { serializeExpression } from './serializeExpression';
-export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, type StatusCodeSuggestionsOptions, } from './statusCode';
+export { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, } from './statusCode';

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

@@ -1,5 +1,7 @@
 import { DATE_PRESETS, formatDateForChip, getDateDisplayLabel, isDatePreset } from "../FilterInputMenu/FilterInputDateValueMenu/constants.js";
 import { applyAcceptChar } from "./applyAcceptChar.js";
+import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
+import { applyKnownFieldHelpers } from "./applyKnownFieldHelpers.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";
@@ -9,5 +11,5 @@ import { getCurrentValueTokenText, getValueFilterText } from "./menuFilterText.j
 import { getOperatorFromLabel, getOperatorLabel, isBetweenOperator, isMultiSelectOperator, isNoValueOperator } from "./operators.js";
 import { isFilterParseError, parseExpression } from "./parseExpression/index.js";
 import { serializeExpression } from "./serializeExpression.js";
-import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.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, applyAcceptChar, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };
+import { createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator } from "./statusCode/index.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, applyAcceptChar, applyFieldValueTransforms, applyKnownFieldHelpers, buildContainerAnchoredRect, chipIdToConditionIndex, createStatusCodeInputFilter, createStatusCodeNormalizer, createStatusCodeSerializer, createStatusCodeSuggestions, createStatusCodeValidator, filterAndSort, findChipSplitIndex, formatDateForChip, getCurrentValueTokenText, getDateDisplayLabel, getFieldValues, getOperatorFromLabel, getOperatorLabel, getValueFilterText, hasFieldValues, hasStaticAllowlist, isBetweenOperator, isDatePreset, isFilterParseError, isMenuRelated, isMultiSelectOperator, isNoValueOperator, parseExpression, serializeExpression };

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

@@ -1,6 +1,16 @@
-import type { ExprNode } from '../types';
+import type { ExprNode, FieldMetadata } from '../types';
 /**
  * Serialize an expression tree to a canonical text string.
  * Top-level conditions are sorted alphabetically by field name.
+ *
+ * **Pass `fields` when the output targets the backend.** Per-field
+ * `serializeValue` hooks run first, so values like the status-code mask
+ * `"2XX"` become `"2"` in the emitted string. Omitting `fields` keeps the
+ * UI-facing values verbatim — useful for clipboard round-trip, debug
+ * display, or any case where the output feeds `parseExpression` back. If
+ * you forget `fields` on the path to the backend, the placeholder `X`s
+ * ride through silently — name the backend call-site helper explicitly
+ * (e.g. `const query = serializeExpression(expr, fields)`) to make the
+ * intent obvious at callsite.
  */
-export declare const serializeExpression: (expr: ExprNode | null) => string;
+export declare const serializeExpression: (expr: ExprNode | null, fields?: FieldMetadata[]) => string;

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

@@ -1,3 +1,4 @@
+import { applyFieldValueTransforms } from "./applyFieldValueTransforms.js";
 const quoteValue = (v)=>`"${v}"`;
 const serializeValue = (condition)=>{
     if ('is_null' === condition.operator || 'is_not_null' === condition.operator) return '';
@@ -27,8 +28,10 @@ const serializeNode = (node, isTopLevel)=>{
     if ('condition' === node.type) return serializeCondition(node);
     return serializeGroup(node, isTopLevel);
 };
-const serializeExpression = (expr)=>{
+const serializeExpression = (expr, fields)=>{
     if (!expr) return '';
-    return serializeNode(expr, true);
+    const normalized = fields ? applyFieldValueTransforms(expr, fields) : expr;
+    if (!normalized) return '';
+    return serializeNode(normalized, true);
 };
 export { serializeExpression };

package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Build the `serializeValue` callback for the HTTP status code field. Strips
+ * trailing mask placeholders (`X` / `x`) from the UI value so the backend
+ * receives the shorter class form:
+ *
+ *   "2XX" → "2"
+ *   "22X" → "22"
+ *   "222" → "222"
+ *   "4XX" → "4"
+ *   "40X" → "40"
+ *
+ * Anything that isn't a status-code-shaped string (e.g. a number, boolean,
+ * or freeform text) is returned unchanged so invalid committed values still
+ * surface in the backend payload for the parser to reject.
+ */
+export declare const createStatusCodeSerializer: () => ((value: string | number | boolean) => string | number | boolean);

package/dist/components/FilterInput/lib/statusCode/createStatusCodeSerializer.js

@@ -0,0 +1,6 @@
+const createStatusCodeSerializer = ()=>(value)=>{
+        if ('string' != typeof value) return value;
+        if (!/^\d[\dX]{0,2}$/i.test(value)) return value;
+        return value.replace(/X+$/i, '');
+    };
+export { createStatusCodeSerializer };