import React from 'react';
import { ButtonProps, ButtonLinkProps } from '../button/button.js';
import { DropdownProps } from '../dropdown/dropdown.js';
import { FormControlProps } from '../form/formcontrol/formcontrol.js';
import { AProps } from '../typography/a/a.js';

type ToolbarItem = AProps | ButtonProps | ButtonLinkProps | DropdownProps | FormControlProps | "spacer" | React.ReactNode;
type ToolbarProps = React.PropsWithChildren<React.HTMLAttributes<HTMLElement>> & {
    /** Aligns the contents based on the current direction. */
    align?: "start" | "center" | "end" | "space-between";
    /** The position of `children` compared to `items`. */
    childrenPosition?: "before" | "after";
    /** Can be used to extend the className. */
    className?: string;
    /** Whether the toolbar shows items horizontally or vertically, mobile devices always use vertical. */
    direction?: "h" | "v" | "horizontal" | "vertical";
    /** Whether the direction is responsive. */
    directionResponsive?: boolean;
    /** When set to true, gap between items is removed. */
    compact?: boolean;
    /** Whether to stretch this component. */
    justify?: "h" | "v" | boolean;
    /** Whether to apply padding to the toolbar. */
    pad?: "v" | "h" | boolean;
    /** The size of the padding. */
    padSize?: "s" | "xs";
    /** When set to true, padding is applied to A components to match Button component's height. */
    padA?: boolean;
    /** Can be set to `fit-content` to apply auto sizing based on content width. */
    size?: "fit-content";
    /** When set tot true, toolbar will be positioned using display: sticky. */
    sticky?: false | "top" | "bottom";
    /** The variant (style) of the toolbar. */
    variant?: "normal" | "primary" | "accent" | "alt" | "transparent";
    /** The items shown inside the toolbar, alternatively, can opt to use children instead. */
    items?: ToolbarItem[];
    /**
     * Allows default props of items to be partially overridden based on the component type, this improves the styling
     * of certain components when rendered in a Toolbar.
     */
    overrideItemProps?: boolean;
};
/**
 * A flexible and customizable toolbar component for arranging and aligning
 * various interactive elements such as `A`, `Button`, `ButtonLink` and `Dropdown`.
 */
declare function Toolbar({ children, childrenPosition, className, align, compact, direction: _direction, directionResponsive, justify, pad, padA, padSize, size, sticky, variant, items, overrideItemProps, ...props }: ToolbarProps): React.JSX.Element;
/**
 * Toolbar "spacer" separates items in a toolbar.
 */
declare const ToolbarSpacer: () => React.JSX.Element;

export { Toolbar, ToolbarSpacer };
export type { ToolbarItem, ToolbarProps };