import { ComponentSize } from '../util/component';
import { Generic } from '../generic';
import { direction } from '@synnaxlabs/x/spatial';
import { ReactElement } from 'react';

/** All possible alignments for the cross axis of a space */
export declare const ALIGNMENTS: readonly ["start", "center", "end", "stretch"];
/** The alignments for the cross axis of a space */
export type Alignment = (typeof ALIGNMENTS)[number];
/** All possible justifications for the main axis of a space */
export declare const JUSTIFICATIONS: readonly ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"];
/** The justification for the main axis of a space */
export type Justification = (typeof JUSTIFICATIONS)[number];
export type SpaceElementType = "div" | "header" | "nav" | "section" | "article" | "aside" | "footer" | "button" | "dialog" | "a" | "form";
export interface SpaceExtensionProps {
    empty?: boolean;
    size?: ComponentSize | number;
    direction?: direction.Crude;
    reverse?: boolean;
    justify?: Justification;
    align?: Alignment;
    grow?: boolean | number;
    shrink?: boolean | number;
    wrap?: boolean;
    el?: SpaceElementType;
    bordered?: boolean;
    rounded?: boolean;
}
export type SpaceProps<E extends SpaceElementType = "div"> = Omit<Generic.ElementProps<E>, "el"> & SpaceExtensionProps;
export declare const shouldReverse: (direction: direction.Crude, reverse?: boolean) => boolean;
/**
 * A component that orients its children in a row or column and adds
 * space between them. This is essentially a thin wrapped around a
 * flex component that makes it more 'reacty' to use.
 *
 * @param props - The props for the component. All unlisted props will be passed
 * to the underlying root element.
 * @param props.align - The off axis alignment of the children. The 'off' axis is the
 * opposite direction of props.direction. For example, if direction is 'x', then the
 * off axis is 'y'. See the {@link Alignment} for available options.
 * @param props.justify - The main axis justification of the children. The 'main' axis
 * is the same direction as props.direction. For example, if direction is 'x', then the
 * main axis is 'x'. See the {@link Justification} for available options.
 * @param props.grow - A boolean or number value that determines if the space should
 * grow in the flex-box sense. A value of true will set css flex-grow to 1. A value of
 * false will leave the css flex-grow unset. A number value will set the css flex-grow
 * to that number.
 * @param props.size - A string or number value that determines the amount of spacing
 * between items. If set to "small", "medium", or "large", the spacing will be determined
 * by the theme. If set to a number, the spacing will be that number of rem.
 * @param props.wrap - A boolean value that determines if the space should wrap its
 * children.
 * @param props.el - The element type to render as. Defaults to 'div'.
 */
export declare const Space: <E extends SpaceElementType = "div">(props: SpaceProps<E>) => ReactElement;
//# sourceMappingURL=Space.d.ts.map