import { type ReactElement } from 'react';
import type { FilterCompositionProps } from './FilterComposition.types.js';
/**
 * Compound component that arranges `SegmentSelector`, `FilterField`,
 * `TimeframeSelector`, and `ApplyButton` in the standard order with a built-in
 * responsive layout.
 *
 * Built-in slots are always rendered in their canonical order regardless of
 * their JSX position. Any custom children that are not built-in slots are
 * interleaved based on their JSX position relative to the built-in slots,
 * falling into one of five zones:
 *
 * - Zone A: before `SegmentSelector`
 * - Zone B: between `SegmentSelector` and `FilterField`
 * - Zone C: between `FilterField` and `TimeframeSelector`
 * - Zone D: between `TimeframeSelector` and `ApplyButton`
 * - Zone E: after `ApplyButton`
 *
 * @remarks
 * The responsive placement of the built-in slots is fixed. Custom-child zones
 * follow a default responsive order, but a consumer may relocate their own
 * custom zone at the tablet or mobile breakpoint by setting the corresponding
 * order variable on the composition (targeting the
 * `strato-filter-composition__zone--{a..e}` class hooks, or inline):
 * `--strato-fc-zone-<zone>-order-{tablet,mobile}`. Order defaults are spaced by
 * 10, so e.g. `--strato-fc-zone-b-order-mobile: 15` places zone B between the
 * SegmentSelector (10) and TimeframeSelector (20) on mobile. This changes visual
 * order only; DOM and tab order stay canonical.
 *
 * @example
 * ```tsx
 * <FilterComposition id="my-filter">
 *   <CustomToolbarStart />
 *   <FilterComposition.SegmentSelector />
 *   <CustomZoneBContent />
 *   <FilterComposition.FilterField />
 *   <CustomZoneCContent />
 *   <FilterComposition.TimeframeSelector />
 *   <CustomZoneDContent />
 *   <FilterComposition.ApplyButton />
 *   <CustomToolbarEnd />
 * </FilterComposition>
 * ```
 *
 * @public
 */
export declare const FilterComposition: ((props: FilterCompositionProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
    FilterField: (props: import("./sub-components/FilterCompositionFilterField.js").FilterCompositionFilterFieldProps & import("react").RefAttributes<import("../index.js").FilterFieldRef>) => import("react").ReactElement | null;
    SegmentSelector: (props: import("./sub-components/FilterCompositionSegmentSelector.js").FilterCompositionSegmentSelectorProps & import("react").RefAttributes<import("../index.js").SegmentSelectorRef<HTMLButtonElement>>) => import("react").ReactElement | null;
    TimeframeSelector: (props: import("./sub-components/FilterCompositionTimeframeSelector.js").FilterCompositionTimeframeSelectorProps & import("react").RefAttributes<import("../../index.js").TimeRangePickerRef<HTMLDivElement>>) => import("react").ReactElement | null;
    ApplyButton: (props: import("./sub-components/FilterCompositionApplyButton.js").FilterCompositionApplyButtonProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactElement | null;
};
//# sourceMappingURL=FilterComposition.d.ts.map