@wallarm-org/design-system 0.12.0 → 0.13.0

package/dist/components/FilterInput/FilterInputField/FilterInputChip/ValueSegment.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../../utils/cn.js";
+import { segmentContainer, segmentTextVariants } from "./classes.js";
+import { Segment } from "./Segment.js";
+const ValueSegment = ({ children, error, valueParts, valueSeparator = ', ', errorValueIndices, editing, editText, onEditChange, onEditKeyDown, onEditBlur, className, ...domProps })=>{
+    if (valueParts && errorValueIndices && errorValueIndices.length > 0 && !editing) {
+        const isInteractive = !!domProps.onClick;
+        return /*#__PURE__*/ jsx("div", {
+            className: cn(segmentContainer, className),
+            "data-slot": "segment-value",
+            ...isInteractive && {
+                role: 'button',
+                'aria-label': 'Edit filter value'
+            },
+            ...domProps,
+            children: /*#__PURE__*/ jsx("p", {
+                className: segmentTextVariants({
+                    variant: 'value'
+                }),
+                children: valueParts.map((part, idx)=>/*#__PURE__*/ jsxs("span", {
+                        className: errorValueIndices.includes(idx) ? segmentTextVariants({
+                            variant: 'value',
+                            error: true
+                        }) : void 0,
+                        children: [
+                            part,
+                            idx < valueParts.length - 1 && valueSeparator
+                        ]
+                    }, idx))
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(Segment, {
+        variant: "value",
+        error: error,
+        editing: editing,
+        editText: editText,
+        onEditChange: onEditChange,
+        onEditKeyDown: onEditKeyDown,
+        onEditBlur: onEditBlur,
+        className: className,
+        ...domProps,
+        children: children
+    });
+};
+ValueSegment.displayName = 'ValueSegment';
+export { ValueSegment };

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

@@ -1,4 +1,4 @@
-/** Base chip container styles shared by QueryBarChip and QueryBarConnectorChip */
+/** Base chip container styles shared by FilterInputChip and FilterInputConnectorChip */
 export declare const chipVariants: (props?: ({
     error?: boolean | null | undefined;
     interactive?: boolean | null | undefined;
@@ -8,6 +8,7 @@ export declare const segmentContainer = "flex flex-col justify-center overflow-h
 /** Segment text styles by variant */
 export declare const segmentTextVariants: (props?: ({
     variant?: "operator" | "value" | "attribute" | null | undefined;
+    error?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Remove button styles — hidden by default, shown on chip hover or button focus */
 export declare const removeButtonVariants: (props?: ({

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

@@ -19,10 +19,34 @@ const segmentContainer = 'flex flex-col justify-center overflow-hidden p-2 leadi
 const segmentTextVariants = cva('truncate text-sm', {
     variants: {
         variant: {
-            attribute: 'font-normal text-text-primary',
-            operator: 'font-normal text-text-secondary',
-            value: 'font-medium text-text-info'
+            attribute: 'font-normal',
+            operator: 'font-normal',
+            value: 'font-medium'
+        },
+        error: {
+            true: 'text-text-danger',
+            false: ''
         }
+    },
+    compoundVariants: [
+        {
+            variant: 'attribute',
+            error: false,
+            className: 'text-text-primary'
+        },
+        {
+            variant: 'operator',
+            error: false,
+            className: 'text-text-secondary'
+        },
+        {
+            variant: 'value',
+            error: false,
+            className: 'text-text-info'
+        }
+    ],
+    defaultVariants: {
+        error: false
     }
 });
 const removeButtonVariants = cva('absolute -right-12 top-[-1px] bottom-[-1px] flex items-center justify-center p-0 cursor-pointer w-[18px] border border-solid border-l-0 rounded-r-8 opacity-0 group-hover/chip:opacity-100 focus:opacity-100 transition-opacity', {

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

@@ -0,0 +1,5 @@
+export { type ConnectorVariant, FilterInputConnectorChip, type FilterInputConnectorChipProps, } from '../FilterInputConnectorChip';
+export { type EditingContextValue, EditingProvider, useEditingContext } from './EditingContext';
+export { type ChipSegment, FilterInputChip, type FilterInputChipProps } from './FilterInputChip';
+export { FilterInputRemoveButton } from './FilterInputRemoveButton';
+export { Segment } from './Segment';

package/dist/components/FilterInput/FilterInputField/FilterInputChip/index.js

@@ -0,0 +1,6 @@
+import { FilterInputConnectorChip } from "../FilterInputConnectorChip/index.js";
+import { EditingProvider, useEditingContext } from "./EditingContext.js";
+import { FilterInputChip } from "./FilterInputChip.js";
+import { FilterInputRemoveButton } from "./FilterInputRemoveButton.js";
+import { Segment } from "./Segment.js";
+export { EditingProvider, FilterInputChip, FilterInputConnectorChip, FilterInputRemoveButton, Segment, useEditingContext };

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

@@ -1,9 +1,9 @@
-import type { FC } from 'react';
+import { type FC } from 'react';
 export type ConnectorVariant = 'and' | 'or';
-export interface QueryBarConnectorChipProps {
+export interface FilterInputConnectorChipProps {
     chipId: string;
     variant: ConnectorVariant;
     onChange: (chipId: string, value: 'and' | 'or') => void;
     className?: string;
 }
-export declare const QueryBarConnectorChip: FC<QueryBarConnectorChipProps>;
+export declare const FilterInputConnectorChip: FC<FilterInputConnectorChipProps>;

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

@@ -1,29 +1,49 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { CirclePlus } from "../../../../icons/CirclePlus.js";
 import { CircleSlash } from "../../../../icons/CircleSlash.js";
 import { cn } from "../../../../utils/cn.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem, DropdownMenuItemIcon, DropdownMenuItemText } from "../../../DropdownMenu/index.js";
 import { DropdownMenuTrigger } from "../../../DropdownMenu/DropdownMenuTrigger.js";
 import { Kbd, KbdGroup } from "../../../Kbd/index.js";
+import { useFilterInputContext } from "../../FilterInputContext/index.js";
+import { useFilterInputPositioning } from "../../hooks/useFilterInputPositioning.js";
 import { VARIANT_LABELS } from "../../lib/constants.js";
-import { chipVariants, segmentContainer } from "../QueryBarChip/classes.js";
+import { chipVariants, segmentContainer } from "../FilterInputChip/classes.js";
 import { connectorTextVariants } from "./classes.js";
-const QueryBarConnectorChip = ({ chipId, variant, onChange, className })=>{
+const FilterInputConnectorChip = ({ chipId, variant, onChange, className })=>{
+    const { menuOpen, closeAutocompleteMenu } = useFilterInputContext();
+    const [open, setOpen] = useState(false);
+    const triggerRef = useRef(null);
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (nextOpen) closeAutocompleteMenu();
+        setOpen(nextOpen);
+    }, [
+        closeAutocompleteMenu
+    ]);
+    useEffect(()=>{
+        if (menuOpen) setOpen(false);
+    }, [
+        menuOpen
+    ]);
+    const positioning = useFilterInputPositioning({
+        anchorRef: triggerRef
+    });
     const label = VARIANT_LABELS[variant];
     return /*#__PURE__*/ jsxs(DropdownMenu, {
-        positioning: {
-            placement: 'bottom',
-            gutter: 4
-        },
+        positioning: positioning,
+        open: open && !menuOpen,
+        onOpenChange: handleOpenChange,
         children: [
             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                 asChild: true,
                 children: /*#__PURE__*/ jsx("button", {
+                    ref: triggerRef,
                     type: "button",
                     className: cn(chipVariants({
                         interactive: true
                     }), 'max-w-[320px] outline-none focus-visible:outline-none', className),
-                    "data-slot": "query-bar-connector-chip",
+                    "data-slot": "filter-input-connector-chip",
                     "aria-label": `Logical operator: ${label}`,
                     children: /*#__PURE__*/ jsx("div", {
                         className: segmentContainer,
@@ -97,5 +117,5 @@ const QueryBarConnectorChip = ({ chipId, variant, onChange, className })=>{
         ]
     });
 };
-QueryBarConnectorChip.displayName = 'QueryBarConnectorChip';
-export { QueryBarConnectorChip };
+FilterInputConnectorChip.displayName = 'FilterInputConnectorChip';
+export { FilterInputConnectorChip };

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

@@ -0,0 +1 @@
+export { type ConnectorVariant, FilterInputConnectorChip, type FilterInputConnectorChipProps, } from './FilterInputConnectorChip';

package/dist/components/FilterInput/FilterInputField/FilterInputConnectorChip/index.js

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

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

@@ -0,0 +1,4 @@
+import type { FC, HTMLAttributes } from 'react';
+type FilterInputFieldProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export declare const FilterInputField: FC<FilterInputFieldProps>;
+export {};

package/dist/components/FilterInput/FilterInputField/FilterInputField.js

@@ -0,0 +1,152 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { cn } from "../../../utils/cn.js";
+import { inputVariants } from "../../Input/classes.js";
+import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
+import { useFilterInputContext } from "../FilterInputContext/index.js";
+import { isMenuRelated } from "../lib/index.js";
+import { ChipsWithGaps, TrailingGap } from "./ChipsWithGaps.js";
+import { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, buildingChipWrapperClass, filterInputContainerVariants, filterInputInnerVariants } from "./classes.js";
+import { EditingProvider } from "./FilterInputChip/EditingContext.js";
+import { FilterInputChip } from "./FilterInputChip/FilterInputChip.js";
+import { FilterInputFieldActions } from "./FilterInputFieldActions.js";
+import { FilterInputSearch } from "./FilterInputSearch.js";
+import { useChipsSplitting } from "./hooks/useChipsSplitting.js";
+import { useExpandCollapse } from "./hooks/useExpandCollapse.js";
+const FilterInputField = ({ className, ...props })=>{
+    const { chips, buildingChipData, buildingChipRef, insertIndex, insertAfterConnector, error, onInputClick, onGapClick, onChipClick, onConnectorChange, onChipRemove, editingChipId, editingSegment, segmentFilterText, onSegmentFilterChange, onCancelSegmentEdit, onCustomValueCommit, onCustomAttributeCommit, menuRef } = useFilterInputContext();
+    const hasContent = chips.length > 0 || null != buildingChipData;
+    const { isExpanded, isOverflowing, innerRef, toggleExpand, multiRow } = useExpandCollapse();
+    const { chipsBefore, chipsAfter, hideTrailingGap, hideLeadingGap } = useChipsSplitting(chips, insertIndex, insertAfterConnector);
+    const chipsGapProps = {
+        onChipClick,
+        onConnectorChange,
+        onChipRemove,
+        onGapClick
+    };
+    const handleSegmentEditKeyDown = useCallback((e)=>{
+        if ('Escape' === e.key) {
+            e.preventDefault();
+            onCancelSegmentEdit();
+            return;
+        }
+        if ('Enter' === e.key && !e.defaultPrevented) {
+            if ('value' === editingSegment) {
+                e.preventDefault();
+                onCustomValueCommit(segmentFilterText);
+                return;
+            }
+            if ('attribute' === editingSegment) {
+                e.preventDefault();
+                onCustomAttributeCommit(segmentFilterText);
+                return;
+            }
+        }
+        if ('ArrowDown' === e.key) {
+            e.preventDefault();
+            menuRef.current?.focus();
+        }
+    }, [
+        onCancelSegmentEdit,
+        editingSegment,
+        segmentFilterText,
+        onCustomValueCommit,
+        onCustomAttributeCommit,
+        menuRef
+    ]);
+    const handleSegmentEditBlur = useCallback((e)=>{
+        if (!isMenuRelated(e.relatedTarget)) onCancelSegmentEdit();
+    }, [
+        onCancelSegmentEdit
+    ]);
+    return /*#__PURE__*/ jsx(EditingProvider, {
+        editingChipId: editingChipId,
+        editingSegment: editingSegment,
+        segmentFilterText: segmentFilterText,
+        onSegmentFilterChange: onSegmentFilterChange,
+        onSegmentEditKeyDown: handleSegmentEditKeyDown,
+        onSegmentEditBlur: handleSegmentEditBlur,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: cn(inputVariants({
+                error
+            }), filterInputContainerVariants({
+                error,
+                multiRow
+            }), className),
+            "data-slot": "filter-input",
+            ...props,
+            children: [
+                /*#__PURE__*/ jsxs(ScrollArea, {
+                    className: "h-auto flex-1 min-w-0",
+                    style: {
+                        maxHeight: isExpanded ? void 0 : COLLAPSED_MAX_HEIGHT
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(ScrollAreaViewport, {
+                            style: {
+                                height: 'auto',
+                                maxHeight: 'inherit'
+                            },
+                            children: /*#__PURE__*/ jsxs("div", {
+                                ref: innerRef,
+                                className: cn(filterInputInnerVariants({
+                                    hasContent
+                                })),
+                                style: {
+                                    paddingRight: hasContent ? ACTIONS_PADDING : void 0
+                                },
+                                onClick: (e)=>{
+                                    if (e.target === e.currentTarget) onInputClick();
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(ChipsWithGaps, {
+                                        chips: chipsBefore,
+                                        hideTrailingGap: hideTrailingGap,
+                                        ...chipsGapProps
+                                    }),
+                                    buildingChipData ? /*#__PURE__*/ jsxs("div", {
+                                        ref: buildingChipRef,
+                                        className: cn(buildingChipWrapperClass, hasContent && 'ml-8'),
+                                        children: [
+                                            /*#__PURE__*/ jsx(FilterInputChip, {
+                                                building: true,
+                                                attribute: buildingChipData.attribute ?? '',
+                                                operator: buildingChipData.operator,
+                                                value: buildingChipData.value,
+                                                className: "border-none"
+                                            }),
+                                            /*#__PURE__*/ jsx(FilterInputSearch, {
+                                                hasContent: true
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ jsx(FilterInputSearch, {
+                                        hasContent: hasContent
+                                    }),
+                                    /*#__PURE__*/ jsx(ChipsWithGaps, {
+                                        chips: chipsAfter,
+                                        hideLeadingGap: hideLeadingGap,
+                                        ...chipsGapProps
+                                    }),
+                                    chipsAfter.length > 0 && /*#__PURE__*/ jsx(TrailingGap, {
+                                        chips: chipsAfter,
+                                        onGapClick: onGapClick
+                                    })
+                                ]
+                            })
+                        }),
+                        !isExpanded && /*#__PURE__*/ jsx(ScrollAreaScrollbar, {
+                            orientation: "vertical"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(FilterInputFieldActions, {
+                    isExpanded: isExpanded,
+                    isOverflowing: isOverflowing,
+                    onToggleExpand: toggleExpand
+                })
+            ]
+        })
+    });
+};
+FilterInputField.displayName = 'FilterInputField';
+export { FilterInputField };

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

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+export interface FilterInputFieldActionsProps {
+    isExpanded: boolean;
+    isOverflowing: boolean;
+    onToggleExpand: () => void;
+}
+export declare const FilterInputFieldActions: FC<FilterInputFieldActionsProps>;

package/dist/components/FilterInput/FilterInputField/FilterInputFieldActions.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Maximize2 } from "../../../icons/Maximize2.js";
+import { Minimize2 } from "../../../icons/Minimize2.js";
+import { X } from "../../../icons/X.js";
+import { Button } from "../../Button/index.js";
+import { Kbd } from "../../Kbd/Kbd.js";
+import { KbdGroup } from "../../Kbd/KbdGroup.js";
+import { Tooltip } from "../../Tooltip/Tooltip.js";
+import { TooltipContent } from "../../Tooltip/TooltipContent.js";
+import { TooltipTrigger } from "../../Tooltip/TooltipTrigger.js";
+import { useFilterInputContext } from "../FilterInputContext/index.js";
+const FilterInputFieldActions = ({ isExpanded, isOverflowing, onToggleExpand })=>{
+    const { chips, buildingChipData, showKeyboardHint, onClear } = useFilterInputContext();
+    const hasChips = chips.length > 0;
+    const hasContent = hasChips || null != buildingChipData;
+    const showExpandCollapse = isOverflowing || isExpanded;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "absolute right-8 top-0 z-10 flex items-center gap-8 pt-8",
+        children: [
+            showKeyboardHint && !hasContent && /*#__PURE__*/ jsxs(KbdGroup, {
+                children: [
+                    /*#__PURE__*/ jsx(Kbd, {
+                        children: "⌘"
+                    }),
+                    /*#__PURE__*/ jsx(Kbd, {
+                        children: "K"
+                    })
+                ]
+            }),
+            showExpandCollapse && /*#__PURE__*/ jsxs(Tooltip, {
+                children: [
+                    /*#__PURE__*/ jsx(TooltipTrigger, {
+                        asChild: true,
+                        children: /*#__PURE__*/ jsx(Button, {
+                            variant: "ghost",
+                            color: "neutral",
+                            size: "small",
+                            onClick: onToggleExpand,
+                            "aria-label": isExpanded ? 'Collapse' : 'Expand',
+                            className: "text-icon-secondary",
+                            children: isExpanded ? /*#__PURE__*/ jsx(Minimize2, {}) : /*#__PURE__*/ jsx(Maximize2, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(TooltipContent, {
+                        children: isExpanded ? 'Collapse' : 'Expand'
+                    })
+                ]
+            }),
+            hasChips && /*#__PURE__*/ jsx(Button, {
+                variant: "ghost",
+                color: "neutral",
+                size: "small",
+                onClick: onClear,
+                "aria-label": "Clear all filters",
+                className: "text-icon-secondary",
+                children: /*#__PURE__*/ jsx(X, {})
+            })
+        ]
+    });
+};
+FilterInputFieldActions.displayName = 'FilterInputFieldActions';
+export { FilterInputFieldActions };

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

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+interface FilterInputSearchProps {
+    hasContent: boolean;
+    minWidth?: number;
+}
+export declare const FilterInputSearch: FC<FilterInputSearchProps>;
+export {};

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

@@ -1,8 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useQueryBarContext } from "../QueryBarContext/index.js";
-import { queryBarInputVariants } from "./classes.js";
-const QueryBarFilterInput = ({ hasContent })=>{
-    const { inputText, inputRef, placeholder, error, menuOpen, onInputChange, onInputKeyDown, onInputClick } = useQueryBarContext();
+import { useFilterInputContext } from "../FilterInputContext/index.js";
+import { filterInputInputVariants } from "./classes.js";
+const CHAR_WIDTH_PX = 8;
+const FilterInputSearch = ({ hasContent, minWidth = 4 })=>{
+    const { inputText, inputRef, placeholder, error, menuOpen, onInputChange, onInputKeyDown, onInputClick } = useFilterInputContext();
     return /*#__PURE__*/ jsx("input", {
         ref: inputRef,
         type: "text",
@@ -17,12 +18,12 @@ const QueryBarFilterInput = ({ hasContent })=>{
         onClick: onInputClick,
         placeholder: hasContent ? void 0 : placeholder,
         style: hasContent ? {
-            width: `${Math.max(4, 8 * inputText.length)}px`
+            width: `${Math.max(minWidth, inputText.length * CHAR_WIDTH_PX)}px`
         } : void 0,
-        className: queryBarInputVariants({
+        className: filterInputInputVariants({
             hasContent
         })
     });
 };
-QueryBarFilterInput.displayName = 'QueryBarFilterInput';
-export { QueryBarFilterInput };
+FilterInputSearch.displayName = 'FilterInputSearch';
+export { FilterInputSearch };

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

@@ -0,0 +1,19 @@
+/** Max height (px) of the inner chip area when the query bar is collapsed. */
+export declare const COLLAPSED_MAX_HEIGHT: number;
+/** Right padding (px) applied to the chip area when content is present. */
+export declare const ACTIONS_PADDING: number;
+/** Outer filter-input container (combobox wrapper) */
+export declare const filterInputContainerVariants: (props?: ({
+    error?: boolean | null | undefined;
+    multiRow?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Inner scrollable chip area that delegates clicks to the input */
+export declare const filterInputInnerVariants: (props?: ({
+    hasContent?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Wrapper that visually groups the building chip and the filter input */
+export declare const buildingChipWrapperClass = "flex items-center gap-2 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg";
+/** Native input element inside the query bar */
+export declare const filterInputInputVariants: (props?: ({
+    hasContent?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/FilterInput/FilterInputField/classes.js

@@ -0,0 +1,54 @@
+import { cva } from "class-variance-authority";
+const VISIBLE_ROWS = 3;
+const CHIP_ROW_HEIGHT = 22;
+const ROW_GAP = 4;
+const PADDING_Y = 8;
+const EDGE_GAP = 8;
+const CONTAINER_BORDER = 2;
+const BOTTOM_REVEAL = 6;
+const COLLAPSED_MAX_HEIGHT = VISIBLE_ROWS * CHIP_ROW_HEIGHT + (VISIBLE_ROWS - 1) * ROW_GAP + PADDING_Y + EDGE_GAP + CONTAINER_BORDER + BOTTOM_REVEAL;
+const BUTTON_SIZE = 24;
+const BUTTON_COUNT = 2;
+const BUTTON_GAP = 8;
+const ACTIONS_RIGHT = 8;
+const ACTIONS_PADDING = BUTTON_COUNT * BUTTON_SIZE + BUTTON_GAP + ACTIONS_RIGHT;
+const filterInputContainerVariants = cva('relative flex min-h-40 w-full overflow-hidden px-0 focus-within:outline-none focus-within:ring-3', {
+    variants: {
+        error: {
+            true: 'focus-within:ring-focus-destructive',
+            false: 'focus-within:not-disabled:border-border-strong-primary focus-within:ring-focus-primary'
+        },
+        multiRow: {
+            true: 'items-start',
+            false: 'items-center'
+        }
+    },
+    defaultVariants: {
+        error: false,
+        multiRow: false
+    }
+});
+const filterInputInnerVariants = cva('flex min-h-full w-full cursor-text flex-wrap items-center gap-y-4 py-4', {
+    variants: {
+        hasContent: {
+            true: 'pl-4',
+            false: 'pl-12 pr-4'
+        }
+    },
+    defaultVariants: {
+        hasContent: false
+    }
+});
+const buildingChipWrapperClass = 'flex items-center gap-2 min-w-0 rounded-8 border border-solid border-border-strong-primary bg-badge-badge-bg';
+const filterInputInputVariants = cva('h-auto border-none bg-transparent p-0 text-sm shadow-none outline-none ring-0', {
+    variants: {
+        hasContent: {
+            true: 'mx-4',
+            false: 'flex-1'
+        }
+    },
+    defaultVariants: {
+        hasContent: false
+    }
+});
+export { ACTIONS_PADDING, COLLAPSED_MAX_HEIGHT, buildingChipWrapperClass, filterInputContainerVariants, filterInputInnerVariants, filterInputInputVariants };

package/dist/components/FilterInput/FilterInputField/hooks/useChipsSplitting.d.ts

@@ -0,0 +1,11 @@
+import type { FilterInputChipData } from '../../types';
+/**
+ * Splits the chip array into "before" and "after" groups around the insert cursor.
+ * Also computes gap visibility flags based on whether adjacent chips are connectors.
+ */
+export declare const useChipsSplitting: (chips: FilterInputChipData[], insertIndex: number, insertAfterConnector: boolean) => {
+    chipsBefore: FilterInputChipData[];
+    chipsAfter: FilterInputChipData[];
+    hideTrailingGap: boolean;
+    hideLeadingGap: boolean;
+};

package/dist/components/FilterInput/FilterInputField/hooks/useChipsSplitting.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+import { findChipSplitIndex } from "../../lib/index.js";
+const useChipsSplitting = (chips, insertIndex, insertAfterConnector)=>{
+    const chipSplitIndex = useMemo(()=>findChipSplitIndex(chips, insertIndex, insertAfterConnector), [
+        chips,
+        insertIndex,
+        insertAfterConnector
+    ]);
+    const chipsBefore = useMemo(()=>chips.slice(0, chipSplitIndex), [
+        chips,
+        chipSplitIndex
+    ]);
+    const chipsAfter = useMemo(()=>chips.slice(chipSplitIndex), [
+        chips,
+        chipSplitIndex
+    ]);
+    const lastBefore = chipsBefore[chipsBefore.length - 1];
+    const firstAfter = chipsAfter[0];
+    const hideTrailingGap = lastBefore?.variant === 'and' || lastBefore?.variant === 'or';
+    const hideLeadingGap = firstAfter?.variant === 'and' || firstAfter?.variant === 'or';
+    return {
+        chipsBefore,
+        chipsAfter,
+        hideTrailingGap,
+        hideLeadingGap
+    };
+};
+export { useChipsSplitting };

package/dist/components/FilterInput/FilterInputField/hooks/useExpandCollapse.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Manages the expand/collapse state for the query bar chip area.
+ *
+ * Uses a ResizeObserver on the inner container to detect when chip content
+ * exceeds `COLLAPSED_MAX_HEIGHT`. Automatically collapses back when chips
+ * are removed and the content fits within the limit.
+ */
+export declare const useExpandCollapse: () => {
+    readonly isExpanded: boolean;
+    readonly isOverflowing: boolean;
+    readonly innerRef: import("react").RefObject<HTMLDivElement | null>;
+    readonly toggleExpand: () => void;
+    readonly multiRow: boolean;
+};

package/dist/components/FilterInput/FilterInputField/hooks/useExpandCollapse.js

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { COLLAPSED_MAX_HEIGHT } from "../classes.js";
+const useExpandCollapse = ()=>{
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const innerRef = useRef(null);
+    useEffect(()=>{
+        const el = innerRef.current;
+        if (!el) return;
+        const check = ()=>{
+            const wouldOverflow = el.scrollHeight > COLLAPSED_MAX_HEIGHT;
+            if (isExpanded) {
+                if (!wouldOverflow) {
+                    setIsExpanded(false);
+                    setIsOverflowing(false);
+                }
+            } else setIsOverflowing(wouldOverflow);
+        };
+        const ro = new ResizeObserver(check);
+        ro.observe(el);
+        return ()=>ro.disconnect();
+    }, [
+        isExpanded
+    ]);
+    const toggleExpand = useCallback(()=>setIsExpanded((prev)=>!prev), []);
+    const multiRow = isOverflowing || isExpanded;
+    return {
+        isExpanded,
+        isOverflowing,
+        innerRef,
+        toggleExpand,
+        multiRow
+    };
+};
+export { useExpandCollapse };

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

@@ -0,0 +1,2 @@
+export { type ChipSegment, type ConnectorVariant, FilterInputChip, type FilterInputChipProps, FilterInputConnectorChip, type FilterInputConnectorChipProps, FilterInputRemoveButton, Segment, } from './FilterInputChip';
+export { FilterInputField } from './FilterInputField';

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

@@ -0,0 +1,3 @@
+import { FilterInputChip, FilterInputConnectorChip, FilterInputRemoveButton, Segment } from "./FilterInputChip/index.js";
+import { FilterInputField } from "./FilterInputField.js";
+export { FilterInputChip, FilterInputConnectorChip, FilterInputField, FilterInputRemoveButton, Segment };