/**
 * @file OverflowList.tsx
 * @input Uses React, StyleX, useOverflow hook
 * @output Exports OverflowList component and OverflowListProps type
 * @position Core implementation; consumed by index.ts
 *
 * Renders a horizontal list of items, hiding those that don't fit in the
 * available width and optionally showing an overflow indicator. Supports an
 * optional item cap (`maxVisibleItems`) and bounded multi-row wrapping
 * (`maxRows`). Uses a hidden measurement container to avoid flickering.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/OverflowList/index.ts (exports if types change)
 * - /packages/cli/assets/templates/blocks/components/OverflowList/ (showcase blocks)
 */
import { type ReactNode, type ReactElement } from 'react';
import type { BaseProps } from '../BaseProps';
import type { SpacingStep } from '../utils/types';
export interface OverflowItem {
    /** The React element for this item */
    child: ReactElement;
    /** The index of this item in the original children list */
    index: number;
}
export interface OverflowListProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the visible container element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * The items to render. Each child should be a single element.
     */
    children: ReactNode;
    /**
     * Gap between items as a spacing token step.
     * Accepts: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10
     * @default 2
     */
    gap?: SpacingStep;
    /**
     * Minimum number of items to always show.
     * @default 0
     */
    minVisibleItems?: number;
    /**
     * Maximum number of items to ever show, even when they all fit. The ceiling
     * partner to `minVisibleItems`; extra items collapse into the overflow
     * indicator. Leave undefined for no cap. If it is less than
     * `minVisibleItems`, the floor wins (and a dev-only warning is logged).
     * @default undefined
     */
    maxVisibleItems?: number;
    /**
     * Wrap items across up to this many rows before collapsing the remainder
     * into the overflow indicator. Leave undefined (or set `1`) for the default
     * single-line behavior. A number, not a boolean — unbounded wrapping is a
     * plain flex-wrap layout, not overflow collapse. Assumes uniform row height.
     * @default undefined
     */
    maxRows?: number;
    /**
     * Which end to collapse items from.
     * @default 'end'
     */
    collapseFrom?: 'start' | 'end';
    /**
     * Which element to observe for overflow calculations.
     * - `'observeSelf'`: uses the container's own width (default)
     * - `'observeParent'`: observes the parent element's content width
     *   for overflow calculations. This keeps the overflow list
     *   content-sized while still detecting available space for
     *   grow-back. Siblings that don't fit can wrap and be clipped by
     *   the parent's overflow.
     * @default 'observeSelf'
     */
    behavior?: 'observeParent' | 'observeSelf';
    /**
     * Render function for the overflow indicator. Receives the list of
     * items that are not visible, each with its original index. Only called
     * when there are overflowing items.
     *
     * The indicator is automatically measured in a hidden container to
     * reserve the correct amount of space.
     *
     * @example
     * ```
     * const labels = ['Save', 'Edit', 'Share'];
     * <OverflowList
     *   overflowRenderer={(overflowItems) => (
     *     <DropdownMenu
     *       button={{label: `+${overflowItems.length}`, variant: 'ghost'}}
     *       items={overflowItems.map(({index}) => ({ label: labels[index] }))}
     *     />
     *   )}>
     *   {labels.map(l => <Button key={l} label={l} />)}
     * </OverflowList>
     * ```
     */
    overflowRenderer?: (overflowItems: OverflowItem[]) => ReactNode;
}
/**
 * A horizontal list that hides items that don't fit and shows an overflow indicator.
 *
 * Uses a hidden measurement container to determine which items fit without
 * causing visual flickering. The overflow indicator is also measured
 * automatically so no manual width value is needed.
 *
 * @example
 * ```
 * <OverflowList
 *   gap={2}
 *   overflowRenderer={(items) => (
 *     <Button label={`+${items.length} more`} variant="ghost" />
 *   )}>
 *   <Button label="Action 1" />
 *   <Button label="Action 2" />
 *   <Button label="Action 3" />
 *   <Button label="Action 4" />
 * </OverflowList>
 * ```
 */
export declare function OverflowList({ children, gap, minVisibleItems, maxVisibleItems, maxRows, collapseFrom, behavior, overflowRenderer, xstyle, className, style, ref, ...props }: OverflowListProps): import("react").JSX.Element;
export declare namespace OverflowList {
    var displayName: string;
}
//# sourceMappingURL=OverflowList.d.ts.map