@l3mpire/ui 2.5.4 → 2.7.1

package/USAGE.md

@@ -286,6 +286,66 @@ import { faMagnifyingGlassSolid, faEnvelopeSolid } from "@l3mpire/icons";
 
 ---
 
+### ChipInput
+
+```tsx
+import { ChipInput } from "@l3mpire/ui";
+
+const [values, setValues] = useState<string[]>([]);
+
+<ChipInput values={values} onChange={setValues} label="Does contain" placeholder="Write your value and press Enter" />
+<ChipInput values={values} onChange={setValues} label="Tags" error errorMessage="At least one value required" />
+<ChipInput values={values} onChange={setValues} label="Filter" size="sm" />
+```
+
+| Prop | Values |
+|---|---|
+| `size` | `"sm"`, `"md"` |
+| `values` | `string[]` (controlled) |
+| `onChange` | `(values: string[]) => void` |
+| `placeholder` | `string` |
+| `label` | `string` |
+| `error` | `boolean` |
+| `errorMessage` | `string` |
+| `disabled` | `boolean` |
+| `iconLeft` | `IconDefinition` |
+| `max` | `number` (max chips, 0 = unlimited) |
+
+Type a value and press Enter to create a chip. Backspace on empty input removes the last chip. Duplicate values are ignored.
+
+---
+
+### NumberInput
+
+```tsx
+import { NumberInput } from "@l3mpire/ui";
+
+const [value, setValue] = useState(1);
+
+<NumberInput value={value} onChange={setValue} label="Quantity" />
+<NumberInput value={value} onChange={setValue} label="Quantity" min={0} max={100} step={5} />
+<NumberInput value={value} onChange={setValue} label="Quantity" size="sm" />
+<NumberInput value={value} onChange={setValue} label="Quantity" error errorMessage="Value out of range" />
+```
+
+| Prop | Values |
+|---|---|
+| `size` | `"sm"`, `"md"` |
+| `value` | `number` (controlled) |
+| `defaultValue` | `number` (uncontrolled, default `0`) |
+| `onChange` | `(value: number) => void` |
+| `min` | `number` |
+| `max` | `number` |
+| `step` | `number` (default `1`) |
+| `label` | `string` |
+| `error` | `boolean` |
+| `errorMessage` | `string` |
+| `disabled` | `boolean` |
+
+Buttons disable automatically at min/max. Input auto-resizes for large numbers (>3 digits).
+
+---
+
 ### TextArea
 
 ```tsx
@@ -368,6 +428,9 @@ import { Select } from "@l3mpire/ui";
 | `error` | `boolean` |
 | `errorMessage` | `string` |
 | `icon` | `IconDefinition` |
+| `tags` | `string[]` (shows selected values as chips with overflow +X) |
+| `onTagRemove` | `(tag: string) => void` (remove chip callback) |
+| `multiCount` | `number` (shows "+N others" text, non-tags mode) |
 | `isOpen` | `boolean` (controlled) |
 | `onOpenChange` | `(open: boolean) => void` |
 | `disabled` | `boolean` |
@@ -733,6 +796,133 @@ const [open, setOpen] = React.useState(false);
 
 ---
 
+### DatePicker
+
+Composable date picker with single and range selection modes. All sub-components are optional except `DatePickerCalendar`.
+
+```tsx
+import {
+  DatePicker,
+  DatePickerCalendar,
+  DatePickerSelects,
+  DatePickerSuggestions,
+  DatePickerFooter,
+  DatePickerPanel,
+  DatePickerRoot,
+  DatePickerTrigger,
+  DatePickerPopover,
+  getDefaultSuggestions,
+  Button,
+} from "@l3mpire/ui";
+
+// Standalone range picker with all options
+<DatePicker mode="range" value={range} onValueChange={setRange}>
+  <DatePickerPanel>
+    <DatePickerCalendar header={<DatePickerSelects />} />
+    <DatePickerSuggestions suggestions={getDefaultSuggestions()} />
+  </DatePickerPanel>
+  <DatePickerFooter>
+    <Button appearance="ghost" intent="brand" size="lg">Cancel</Button>
+    <Button appearance="solid" intent="brand" size="lg">Apply</Button>
+  </DatePickerFooter>
+</DatePicker>
+
+// Minimal single date in a popover
+<DatePickerRoot>
+  <DatePickerTrigger asChild>
+    <Button>Pick date</Button>
+  </DatePickerTrigger>
+  <DatePickerPopover>
+    <DatePicker mode="single" value={date} onValueChange={setDate}>
+      <DatePickerCalendar />
+    </DatePicker>
+  </DatePickerPopover>
+</DatePickerRoot>
+```
+
+| Prop (DatePicker) | Type | Default |
+|---|---|---|
+| `mode` | `"single" \| "range"` | `"single"` |
+| `value` | `Date \| DateRange \| undefined` | — |
+| `onValueChange` | `(value: Date \| DateRange) => void` | — |
+| `defaultMonth` | `number` (0–11) | Current month |
+| `defaultYear` | `number` | Current year |
+
+| Composable part | Purpose |
+|---|---|
+| `DatePickerCalendar` | Month grid with prev/next navigation |
+| `DatePickerPanel` | Horizontal flex wrapper (calendar + suggestions) |
+| `DatePickerSelects` | From/to date display (read-only) |
+| `DatePickerSuggestions` | Preset period shortcuts (Today, This week, etc.) |
+| `DatePickerFooter` | Action bar (Cancel/Apply) |
+| `DatePickerRoot` / `DatePickerTrigger` / `DatePickerPopover` | Radix Popover wrappers |
+
+---
+
+### FilterSystem
+
+Composable filter system with inline chips, sort, property selector, and advanced filter popover.
+
+```tsx
+import {
+  FilterSystem,
+  FilterChip,
+  InteractiveFilterChip,
+  FilterBar, FilterBarLeft, FilterBarRight,
+  SortButton, FilterBarButton, SaveViewButton,
+  PropertySelector, AdvancedPopover, AdvancedChip,
+  getDefaultOperator, createFilterWithDefaults,
+  type FilterState, type PropertyDefinition, type SortField,
+} from "@l3mpire/ui";
+
+// Full interactive system (manages state internally)
+<FilterSystem
+  properties={PROPERTIES}
+  filterState={filterState}
+  onFilterStateChange={setFilterState}
+  sortFields={SORT_FIELDS}
+  actions={<><Button>Discard</Button><SaveViewButton /></>}
+>
+  <SearchBar size="sm" className="w-[200px]" />
+</FilterSystem>
+
+// Or compose manually with FilterBar
+<FilterBar>
+  <FilterBarLeft>
+    <SearchBar size="sm" />
+    <SortButton fields={sortFields} activeField="date" direction="asc" onChange={...} />
+    <InteractiveFilterChip propertyDef={...} condition={...} onUpdate={...} onDelete={...} />
+    <FilterBarButton count={2} />
+  </FilterBarLeft>
+  <FilterBarRight>
+    <SaveViewButton onSave={...} />
+  </FilterBarRight>
+</FilterBar>
+```
+
+| Component | Purpose |
+|---|---|
+| `FilterSystem` | Top-level orchestrator (manages add/edit/delete/convert flows) |
+| `FilterBar` / `FilterBarLeft` / `FilterBarRight` | Layout container |
+| `SortButton` | Sort by dropdown (field list + asc/desc) |
+| `FilterBarButton` | "Filters" trigger with optional badge count |
+| `FilterChip` | Presentational segmented chip |
+| `InteractiveFilterChip` | FilterChip with per-segment popovers (property, operator, value, kebab) |
+| `PropertySelector` | 2-level popover: categories → properties with search |
+| `AdvancedChip` | "Advanced filter (N)" pill with close button |
+| `AdvancedPopover` | Wide popover with Where/And rows |
+| `SaveViewButton` | Split button (Save view + dropdown chevron) |
+
+| Utility | Purpose |
+|---|---|
+| `OPERATORS_BY_TYPE` | Operators for each DataType |
+| `DEFAULT_OPERATOR_BY_TYPE` | Pre-selected operator per type |
+| `createFilterWithDefaults(propertyId, type)` | Creates FilterCondition with default operator |
+| `isNoValueOperator(op)` | True for is empty / is not empty / is true / is false |
+| `getValueInputType(type, op)` | Returns the input component name for a type+operator combo |
+
+---
+
 ### SidePanel
 
 Full-height panel that slides in from the right. Reuses `ModalHeader`, `ModalBody`, `ModalFooter` for composition.
@@ -972,6 +1162,8 @@ import { faUsersSolid } from "@l3mpire/icons";
 | Tag | x | x | | |
 | Link | x | x | | |
 | TextInput | x | x | | |
+| ChipInput | x | x | | |
+| NumberInput | x | x | | |
 | Select | x | x | | |
 | SearchBar | x | x | | |
 | Avatar | x | x | x | x |

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as React from 'react';
+import * as _l3mpire_icons from '@l3mpire/icons';
 import { IconDefinition } from '@l3mpire/icons';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -15,6 +16,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ColumnDef, SortingState, OnChangeFn, ColumnFiltersState, PaginationState, RowSelectionState, VisibilityState, ColumnOrderState, ColumnPinningState, Table as Table$1 } from '@tanstack/react-table';
 export { ColumnDef, ColumnFiltersState, RowSelectionState, SortingState, flexRender } from '@tanstack/react-table';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -243,6 +245,8 @@ interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     placeholder?: string;
     value?: string;
     multiCount?: number;
+    tags?: string[];
+    onTagRemove?: (tag: string) => void;
     icon?: IconDefinition;
     avatar?: React.ReactNode;
     flag?: React.ReactNode;
@@ -308,9 +312,44 @@ interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
+declare const chipInputVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ChipInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof chipInputVariants> {
+    values: string[];
+    onChange: (values: string[]) => void;
+    placeholder?: string;
+    label?: string;
+    labelType?: InputLabelProps["type"];
+    error?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+    iconLeft?: IconDefinition;
+    /** Max number of chips (0 = unlimited) */
+    max?: number;
+}
+declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "onChange">, VariantProps<typeof inputVariants> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    labelType?: InputLabelProps["type"];
+    error?: boolean;
+    errorMessage?: string;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
 declare const typographyVariants: (props?: ({
     variant?: "xs" | "sm" | "md" | "lg" | "h2" | "h3" | "h1" | null | undefined;
-    weight?: "bold" | "regular" | "medium" | null | undefined;
+    weight?: "bold" | "medium" | "regular" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
@@ -581,4 +620,320 @@ interface SidePanelContentProps extends React.ComponentPropsWithoutRef<typeof Di
 }
 declare const SidePanelContent: React.ForwardRefExoticComponent<SidePanelContentProps & React.RefAttributes<HTMLDivElement>>;
 
-export { Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, DateCell, type DateCellProps, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type FilterOperator, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, type Product, ProductLogo, type ProductLogoProps, RowActions, type RowActionsProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatusCell, type StatusCellProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, avatarVariants, badgeVariants, buttonVariants, cn, emptyStateVariants, infoMessageVariants, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useSidebarContext };
+declare const filterChipSegmentVariants: (props?: ({
+    type?: "property" | "button" | "operator" | "value" | "placeholder" | null | undefined;
+    hasBorder?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FilterChipSegmentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "type">, VariantProps<typeof filterChipSegmentVariants> {
+    /** Segment type determines content layout and text styling. */
+    segmentType?: "property" | "operator" | "value" | "placeholder" | "button";
+    /** Icon definition for Property segments. */
+    icon?: IconDefinition;
+    /** Text label for the segment. */
+    label?: string;
+    /** Optional badge count (shown on Value segments). */
+    badgeCount?: number;
+    /** Custom content slot (e.g., avatar in Value segment). */
+    adornment?: React.ReactNode;
+    /** Called when the kebab button is clicked (Button segment). */
+    onKebabClick?: (e: React.MouseEvent) => void;
+}
+declare const FilterChipSegment: React.ForwardRefExoticComponent<FilterChipSegmentProps & React.RefAttributes<HTMLDivElement>>;
+
+interface FilterChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Icon for the property segment. */
+    icon?: IconDefinition;
+    /** Property label. */
+    property: string;
+    /** Operator label (e.g., "Contains"). Omit for incomplete chips. */
+    operator?: string;
+    /** Value label. Omit if the filter has no value yet. */
+    value?: string;
+    /** Optional badge count on the value segment (e.g., multi-select count). */
+    badgeCount?: number;
+    /** Optional adornment in the value segment (e.g., avatar). */
+    valueAdornment?: React.ReactNode;
+    /** Called when the property segment is clicked. */
+    onPropertyClick?: () => void;
+    /** Called when the operator segment is clicked. */
+    onOperatorClick?: () => void;
+    /** Called when the value segment is clicked. */
+    onValueClick?: () => void;
+    /** Called when the kebab button is clicked. */
+    onKebabClick?: (e: React.MouseEvent) => void;
+}
+declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLDivElement>>;
+
+type DataType = "text" | "number" | "date" | "enum" | "tags" | "boolean" | "relation";
+type TextOperator = "contains" | "does not contain" | "is" | "is not" | "starts with" | "ends with" | "is empty" | "is not empty";
+type NumberOperator = "=" | "≠" | ">" | "<" | "≥" | "≤" | "is between" | "is empty" | "is not empty";
+type DateOperator = "is" | "is before" | "is after" | "is on or before" | "is on or after" | "is between" | "is relative" | "is empty" | "is not empty";
+type EnumOperator = "is" | "is not" | "is any of" | "is none of" | "is empty" | "is not empty";
+type TagsOperator = "contains" | "does not contain" | "contains any of" | "contains all of" | "is empty" | "is not empty";
+type BooleanOperator = "is true" | "is false";
+type RelationOperator = "is" | "is not" | "is any of" | "is none of" | "is empty" | "is not empty";
+type OperatorType = TextOperator | NumberOperator | DateOperator | EnumOperator | TagsOperator | BooleanOperator | RelationOperator;
+interface PropertyDefinition {
+    id: string;
+    label: string;
+    type: DataType;
+    icon: _l3mpire_icons.IconDefinition;
+    group: string;
+    groupLabel: string;
+    options?: string[];
+    relationConfig?: {
+        entity: string;
+        displayProperty: string;
+        searchable: boolean;
+        hasAvatar: boolean;
+    };
+}
+type FilterValue = string | number | boolean | Date | [number, number] | [Date, Date] | string[] | null;
+interface FilterCondition {
+    id: string;
+    propertyId: string;
+    operator: OperatorType | null;
+    value: FilterValue;
+}
+interface FilterState {
+    basicFilters: FilterCondition[];
+    advancedFilters: FilterCondition[];
+    sort: {
+        field: string;
+        direction: "asc" | "desc";
+    } | null;
+}
+
+declare const OPERATORS_BY_TYPE: Record<DataType, OperatorType[]>;
+declare const DEFAULT_OPERATOR_BY_TYPE: Record<DataType, OperatorType>;
+declare function isNoValueOperator(operator: OperatorType): boolean;
+declare function getDefaultOperator(type: DataType): OperatorType;
+declare function createFilterWithDefaults(propertyId: string, type: DataType): FilterCondition;
+declare function getValueInputType(type: DataType, operator: OperatorType): string | null;
+
+interface FilterBarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Composable filter bar layout. Splits into a left group (search, sort, chips,
+ * filters button) and a right group (discard, save). Pass children for the left
+ * side and use `actions` slot for the right side.
+ *
+ * ```tsx
+ * <FilterBar>
+ *   <FilterBarLeft>
+ *     <SearchBar ... />
+ *     <SortButton ... />
+ *     <FilterChip ... />
+ *     <FilterBarButton ... />
+ *   </FilterBarLeft>
+ *   <FilterBarRight>
+ *     <Button>Discard changes</Button>
+ *     <SaveViewButton ... />
+ *   </FilterBarRight>
+ * </FilterBar>
+ * ```
+ */
+declare const FilterBar: React.ForwardRefExoticComponent<FilterBarProps & React.RefAttributes<HTMLDivElement>>;
+interface FilterBarLeftProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const FilterBarLeft: React.ForwardRefExoticComponent<FilterBarLeftProps & React.RefAttributes<HTMLDivElement>>;
+interface FilterBarRightProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const FilterBarRight: React.ForwardRefExoticComponent<FilterBarRightProps & React.RefAttributes<HTMLDivElement>>;
+
+interface SortField {
+    id: string;
+    label: string;
+    icon: IconDefinition;
+}
+interface SortButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    fields: SortField[];
+    activeField: string;
+    direction: "asc" | "desc";
+    onChange?: (field: string, direction: "asc" | "desc") => void;
+}
+declare const SortButton: React.FC<SortButtonProps>;
+
+interface FilterBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Number of active filters (shown as badge if > 0). */
+    count?: number;
+}
+/**
+ * The "Filters" trigger button in the FilterBar.
+ * Outlined/secondary style matching the Figma spec.
+ */
+declare const FilterBarButton: React.ForwardRefExoticComponent<FilterBarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface SaveViewButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Label for the main action. */
+    label?: string;
+    /** Called when the main "Save view" button is clicked. */
+    onSave?: () => void;
+    /** Called when the chevron dropdown is clicked. */
+    onDropdown?: () => void;
+}
+/**
+ * Split button for saving filtered views.
+ * Left side: "Save view" (solid brand, rounded-left).
+ * Right side: chevron-down (solid brand, rounded-right).
+ */
+declare const SaveViewButton: React.ForwardRefExoticComponent<SaveViewButtonProps & React.RefAttributes<HTMLDivElement>>;
+
+interface OperatorSelectorProps {
+    dataType: DataType;
+    activeOperator: OperatorType | null;
+    onSelect: (operator: OperatorType) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare const OperatorSelector: React.FC<OperatorSelectorProps>;
+interface OperatorListProps {
+    dataType: DataType;
+    activeOperator: OperatorType | null;
+    onSelect: (operator: OperatorType) => void;
+}
+declare const OperatorList: React.FC<OperatorListProps>;
+
+interface ValueInputProps {
+    dataType: DataType;
+    operator: OperatorType;
+    value: FilterValue;
+    onChange: (value: FilterValue) => void;
+    onSubmit?: () => void;
+    options?: string[];
+    className?: string;
+}
+declare const ValueInput: React.FC<ValueInputProps>;
+
+interface PropertySelectorProps {
+    properties: PropertyDefinition[];
+    onSelect: (property: PropertyDefinition) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare const PropertySelector: React.FC<PropertySelectorProps>;
+
+interface KebabMenuProps {
+    onConvertToAdvanced?: () => void;
+    onDelete?: () => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare const KebabMenu: React.FC<KebabMenuProps>;
+
+interface FilterEditorProps {
+    propertyDef: PropertyDefinition;
+    condition: FilterCondition;
+    mode: "add" | "edit";
+    onUpdate: (condition: FilterCondition) => void;
+    onClose: () => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare const FilterEditor: React.FC<FilterEditorProps>;
+
+interface InteractiveFilterChipProps {
+    propertyDef: PropertyDefinition;
+    condition: FilterCondition;
+    /** All available properties (for the property segment popover). */
+    properties?: PropertyDefinition[];
+    /** "add" auto-opens the value popover. */
+    mode?: "add" | "edit";
+    autoOpen?: boolean;
+    onUpdate: (condition: FilterCondition) => void;
+    /** Called when the property is changed (e.g., pick a different property). */
+    onPropertyChange?: (property: PropertyDefinition) => void;
+    onDelete: () => void;
+    onConvertToAdvanced?: () => void;
+    className?: string;
+}
+declare const InteractiveFilterChip: React.FC<InteractiveFilterChipProps>;
+
+interface FilterSystemProps {
+    properties: PropertyDefinition[];
+    filterState: FilterState;
+    onFilterStateChange: (state: FilterState) => void;
+    sortFields?: SortField[];
+    children?: React.ReactNode;
+    actions?: React.ReactNode;
+    className?: string;
+}
+declare const FilterSystem: React.FC<FilterSystemProps>;
+
+interface AdvancedChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Number of advanced filters. */
+    count: number;
+    /** Called when the close (×) button is clicked. */
+    onClear?: () => void;
+}
+declare const AdvancedChip: React.ForwardRefExoticComponent<AdvancedChipProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface AdvancedRowProps {
+    /** "Where" for the first row, "And" for subsequent. */
+    connector: "Where" | "And";
+    propertyDef: PropertyDefinition;
+    condition: FilterCondition;
+    properties: PropertyDefinition[];
+    onUpdate: (condition: FilterCondition) => void;
+    onPropertyChange: (property: PropertyDefinition) => void;
+    onDelete: () => void;
+}
+declare const AdvancedRow: React.FC<AdvancedRowProps>;
+
+interface AdvancedPopoverProps {
+    filters: FilterCondition[];
+    properties: PropertyDefinition[];
+    onFiltersChange: (filters: FilterCondition[]) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: React.ReactNode;
+}
+declare const AdvancedPopover: React.FC<AdvancedPopoverProps>;
+
+type DateRange = {
+    from: Date;
+    to?: Date;
+};
+type DatePickerMode = "single" | "range";
+interface DatePickerSuggestion {
+    label: string;
+    getValue: () => Date | DateRange;
+}
+interface DatePickerProps extends React.HTMLAttributes<HTMLDivElement> {
+    mode?: DatePickerMode;
+    value?: Date | DateRange;
+    onValueChange?: (value: Date | DateRange) => void;
+    defaultMonth?: number;
+    defaultYear?: number;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+interface DatePickerSelectsProps extends React.HTMLAttributes<HTMLDivElement> {
+    formatDate?: (date: Date) => string;
+}
+declare const DatePickerSelects: React.ForwardRefExoticComponent<DatePickerSelectsProps & React.RefAttributes<HTMLDivElement>>;
+interface DatePickerCalendarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Content rendered above the calendar grid (e.g. DatePickerSelects). */
+    header?: React.ReactNode;
+}
+declare const DatePickerCalendar: React.ForwardRefExoticComponent<DatePickerCalendarProps & React.RefAttributes<HTMLDivElement>>;
+interface DatePickerSuggestionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    suggestions: DatePickerSuggestion[];
+    formatDate?: (date: Date) => string;
+}
+declare const DatePickerSuggestions: React.ForwardRefExoticComponent<DatePickerSuggestionsProps & React.RefAttributes<HTMLDivElement>>;
+interface DatePickerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const DatePickerFooter: React.ForwardRefExoticComponent<DatePickerFooterProps & React.RefAttributes<HTMLDivElement>>;
+interface DatePickerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const DatePickerPanel: React.ForwardRefExoticComponent<DatePickerPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare const DatePickerRoot: React.FC<PopoverPrimitive.PopoverProps>;
+declare const DatePickerTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DatePickerPopover: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function getDefaultSuggestions(referenceDate?: Date): DatePickerSuggestion[];
+
+export { AdvancedChip, type AdvancedChipProps, AdvancedPopover, type AdvancedPopoverProps, AdvancedRow, type AdvancedRowProps, Avatar, AvatarCell, type AvatarCellProps, type AvatarProps, Badge, type BadgeProps, type BooleanOperator, BrowserTab, BrowserTabItem, type BrowserTabItemProps, type BrowserTabProps, Button, ButtonCell, type ButtonCellProps, type ButtonProps, Checkbox, type CheckboxProps, ChipInput, type ChipInputProps, DEFAULT_OPERATOR_BY_TYPE, DataTable, DataTablePagination, type DataTablePaginationProps, type DataTableProps, type DataType, DateCell, type DateCellProps, type DateOperator, DatePicker, DatePickerCalendar, type DatePickerCalendarProps, DatePickerFooter, type DatePickerFooterProps, type DatePickerMode, DatePickerPanel, type DatePickerPanelProps, DatePickerPopover, type DatePickerProps, DatePickerRoot, DatePickerSelects, type DatePickerSelectsProps, type DatePickerSuggestion, DatePickerSuggestions, type DatePickerSuggestionsProps, DatePickerTrigger, type DateRange, Dialog, type DialogProps, DropdownMenu, DropdownMenuClear, type DropdownMenuClearProps, DropdownMenuContent, DropdownMenuHeading, type DropdownMenuHeadingProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuList, type DropdownMenuListProps, type DropdownMenuProps, DropdownMenuRadixItem, type DropdownMenuRadixItemProps, DropdownMenuRoot, DropdownMenuTrigger, EditableCell, type EditableCellProps, EmailCell, type EmailCellProps, EmptyState, type EmptyStateProps, type EnumOperator, FilterBar, FilterBarButton, type FilterBarButtonProps, FilterBarLeft, type FilterBarLeftProps, type FilterBarProps, FilterBarRight, type FilterBarRightProps, FilterChip, type FilterChipProps, FilterChipSegment, type FilterChipSegmentProps, type FilterCondition, FilterEditor, type FilterEditorProps, type FilterOperator, type FilterState, FilterSystem, type FilterSystemProps, type FilterValue, InfoMessage, type InfoMessageProps, InputLabel, type InputLabelProps, InteractiveFilterChip, type InteractiveFilterChipProps, KebabMenu, type KebabMenuProps, Link, LinkCell, type LinkCellProps, type LinkProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalOverlay, ModalTitle, ModalTrigger, NumberCell, type NumberCellProps, NumberInput, type NumberInputProps, type NumberOperator, OPERATORS_BY_TYPE, OperatorList, type OperatorListProps, OperatorSelector, type OperatorSelectorProps, type OperatorType, type Product, ProductLogo, type ProductLogoProps, type PropertyDefinition, PropertySelector, type PropertySelectorProps, type RelationOperator, RowActions, type RowActionsProps, SaveViewButton, type SaveViewButtonProps, SearchBar, type SearchBarProps, Select, type SelectProps, SidePanel, SidePanelClose, SidePanelContent, type SidePanelContentProps, SidePanelTrigger, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarHeader, SidebarHeadingItem, type SidebarHeadingItemProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SortButton, type SortButtonProps, type SortField, StatusCell, type StatusCellProps, Switch, type SwitchProps, TabContent, type TabContentProps, TabList, type TabListProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, type TabsProps, Tag, type TagProps, type TagsOperator, TextArea, type TextAreaProps, TextCell, type TextCellProps, TextInput, type TextInputProps, type TextOperator, Toast, type ToastProps, ToastProvider, ToastViewport, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, Typography, type TypographyProps, UserMenu, UserMenuInfoRow, type UserMenuInfoRowProps, type UserMenuProps, UserMenuSection, type UserMenuSectionProps, ValueInput, type ValueInputProps, avatarVariants, badgeVariants, buttonVariants, chipInputVariants, cn, createFilterWithDefaults, emptyStateVariants, filterChipSegmentVariants, getDefaultOperator, getDefaultSuggestions, getValueInputType, infoMessageVariants, isNoValueOperator, linkVariants, modalVariants, productLogoVariants, searchBarVariants, selectVariants, sidebarItemVariants, tagVariants, textInputVariants, toastVariants, tooltipContentVariants, typographyVariants, useSidebarContext };