import { direction, xy } from '@synnaxlabs/x';
import { RefObject } from 'react';
import { Flex } from '../flex';
/** Props for the {@link Resize.Multiple} component. */
export interface MultipleProps extends Flex.BoxProps {
    sizeDistribution: number[];
    onDragHandle: (e: ResizeStartEvent, i: number) => void;
}
export type ResizeStartEvent = xy.Client & {
    preventDefault: () => void;
};
/** Props for the {@link Resize.useMultiple} hook. */
export interface UseMultipleProps {
    count: number;
    onResize?: (sizes: number[]) => void;
    direction?: direction.Crude;
    initialSizes?: number[];
    minSize?: number;
}
/** Return value of the {@link Resize.useMultiple} hook. */
export interface UseMultipleReturn {
    setSize: (i: number, size?: number) => void;
    props: Pick<MultipleProps, "sizeDistribution" | "onDragHandle" | "direction"> & {
        ref: RefObject<HTMLDivElement | null>;
    };
}
interface MultipleState {
    sizeDistribution: number[];
    root: number | null;
}
/**
 * A hook that implements the control logic for {@link Resize.Multiple}. This hook
 * should be used in conjunction with {@link Resize.Multiple}.
 *
 * @param props - The a component props.
 * @param props.count - The number of panels to render. This should be the same as the
 * number of children passed to {@link Resize.Multiple}.
 * @param props.onResize - A callback executed when the panels are resized.
 * @param props.initialSizes - The initial sizes of the panels. This should be an array of
 * numbers, where each number is the initial size of the corresponding panel either in pixels
 * or as a decimal percentage. If this array is not provided (or is shorter than the expected length),
 *  the (remaining) panels will be evenly distributed across the container.
 * @param props.direction - The direction in which the panels should be draggable. This should
 * be Default: "x"
 * @param props.minSize - The smallest size the panels can be resized to. Defaults to 100.
 *
 * @returns The props that should be passed to {@link Resize.Multiple} along with a few
 * utility functions. setSize can be used to manually set the size of a particular panel.
 */
export declare const useMultiple: ({ onResize, count, initialSizes, minSize, direction, }: UseMultipleProps) => UseMultipleReturn;
/**
 * A set of panels that can be resized within their container. Resize.Multiple must be
 * used in conjunction with {@link Resize.useMultiple}.
 *
 * @param props - The component props. All unused props will be passed to the div
 * containing the div containing the panels. Generally these props should not be provided
 * directly, and you should instead spread the props returned from {@link Resize.useMultiple}.
 * The only exceptions to this are stylistic props (e.g. className, style, etc.) as well
 * as the `children` prop.
 */
export declare const Multiple: ({ ref, direction: direction_, children: _children, sizeDistribution, onDragHandle: onDrag, className, ...rest }: MultipleProps) => import("react/jsx-runtime").JSX.Element;
export declare const calculateDiffPercentage: (prev: MultipleState, parentSize: number, dragging: number, clientPos?: number, targetSize?: number) => number;
export {};
//# sourceMappingURL=Multiple.d.ts.map