import { type CSSProperties } from "react";
import { type IsEmptyObject, type OverridableStringUnion } from "../types.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-box-gap"?: string | number;
        "--rmd-box-padding"?: string | number;
        "--rmd-box-padding-h"?: string | number;
        "--rmd-box-padding-v"?: string | number;
        "--rmd-box-item-min-size"?: string | number;
        "--rmd-box-item-min-height"?: string | number;
        "--rmd-box-columns"?: string | number;
        "--rmd-box-row-max-height"?: string;
        "--rmd-box-auto-rows-height"?: string;
        "--rmd-box-phone-columns"?: number | string;
        "--rmd-box-phone-item-min-height"?: number | string;
        "--rmd-box-phone-item-min-size"?: number | string;
        "--rmd-box-tablet-columns"?: number | string;
        "--rmd-box-tablet-item-min-size"?: number | string;
        "--rmd-box-tablet-item-min-height"?: number | string;
        "--rmd-box-desktop-columns"?: number | string;
        "--rmd-box-desktop-item-min-size"?: number | string;
        "--rmd-box-desktop-item-min-height"?: number | string;
        "--rmd-box-large-desktop-columns"?: number | string;
        "--rmd-box-large-desktop-item-min-size"?: number | string;
        "--rmd-box-large-desktop-item-min-height"?: number | string;
    }
}
/** @since 6.2.0 */
export interface BoxAlignItemsOverrides {
}
/** @since 6.2.0 */
export interface BoxJustifyContentOverrides {
}
/** @since 6.2.0 */
export interface BoxGridNameOverrides {
}
/**
 * @since 6.0.0
 */
export type BoxAlignItems = OverridableStringUnion<"start" | "flex-start" | "center" | "end" | "flex-end" | "stretch", BoxAlignItemsOverrides>;
/**
 * @since 6.0.0
 */
export type BoxJustifyContent = OverridableStringUnion<BoxAlignItems | "space-around" | "space-between" | "space-evenly", BoxJustifyContentOverrides>;
/**
 * @since 6.0.0
 */
export type BoxFlexDirection = "row" | "column";
/**
 * @since 6.0.0
 */
export type BoxGridColumns = "fit" | "fill" | number;
/**
 * @since 6.2.0
 */
export type BoxGridName = IsEmptyObject<BoxGridNameOverrides> extends true ? string : OverridableStringUnion<never, BoxGridNameOverrides>;
/**
 * @since 6.0.0
 */
export type BoxBreakpoints = "phone" | "tablet" | "desktop" | "largeDesktop";
/**
 * @since 6.0.0
 */
export type BoxGridBreakpointColumns = {
    [key in BoxBreakpoints]?: BoxGridColumns;
};
/**
 * @since 6.0.0
 */
export type BoxGridBreakpointItemSize = {
    [key in BoxBreakpoints]?: string;
};
/**
 * @since 6.0.0
 */
export interface BoxOptions {
    className?: string;
    /**
     * Set this to `true` to use `display: grid` instead of `display: flex`.
     *
     * @defaultValue `false`
     */
    grid?: boolean;
    /**
     * Set this to `true` to apply `width: 100%`. This can be useful when using
     * nested box layouts.
     *
     * @defaultValue `false`
     */
    fullWidth?: boolean;
    /**
     * Set this to `true` to prevent gap between items.
     *
     * @defaultValue `false`
     */
    disableGap?: boolean | "row" | "column";
    /**
     * Set this to `true` to set `flex-wrap: nowrap`.
     *
     * @defaultValue `false`
     */
    disableWrap?: boolean;
    /**
     * Set this to `true` to disable the default padding.
     *
     * @defaultValue `false`
     */
    disablePadding?: boolean;
    /**
     * This should match one of the names in the `$box-grids` map. So for example:
     *
     * ```scss
     * @use "react-md" with (
     *   $box-grids: (
     *     small: (
     *       min: 5rem
     *     ),
     *     medium: (
     *       min: 7rem,
     *       gap: 0.5rem,
     *       padding: 2rem,
     *     ),
     *   ),
     * );
     * ```
     *
     * ```ts
     * declare module "@react-md/core/box/styles" {
     *   interface BoxGridNameOverrides {
     *     small: true;
     *     medium: true;
     *   }
     * }
     * ```
     *
     * The `gridName` should be `"small" | "medium"`.
     *
     * @defaultValue `""`
     */
    gridName?: BoxGridName;
    /**
     * The default behavior for a grid is to automatically determine the number
     * of columns to render by placing as many items as possible with a specific
     * item min-width and the defined gap between items. Once the number of
     * columns has been determined, place the items in the grid and expand to the
     * full column width.
     *
     * This prop is a convenience prop to control how to display items when there
     * are not enough to span all columns without a separate SCSS file.
     *
     * i.e. 3 items were provided but 4 can be rendered.
     *
     * - `"fit"` - fill the entire width with columns and stretch columns to fill
     *   the remaining space
     * - `"fill"` - fill the entire width with columns and add empty columns to
     *   fill the remaining space
     * - `number` - ignore the auto layout behavior and specify the number of
     *   columns to use instead.
     *
     * If additional responsive behavior is required, an object can be provided
     * to define the column behavior for: phone, tablet, desktop, or
     * largeDesktop.
     *
     * @see {@link gridItemSize} for how the number of columns are determined.
     * @defaultValue `"fit"`
     */
    gridColumns?: BoxGridColumns | BoxGridBreakpointColumns;
    /**
     * This prop can be used to override the default `--rmd-box-item-min-size`
     * for the grid without a separate SCSS file. Since this is set as a CSS variable,
     * the value must be a number with a unit to work correctly. i.e. `10rem`
     * instead of `160`.
     *
     * If additional responsive behavior is required, an object can be provided
     * to define the column behavior for: phone, tablet, desktop, or
     * largeDesktop.
     *
     * @see {@link https://react-md.dev/sassdoc/box#variables-box-item-min-size}
     */
    gridItemSize?: string | BoxGridBreakpointItemSize;
    /**
     * Set this to `true` to enable equal height rows within the grid based
     * on the current `max-height`. This requires the `max-height` to be set
     * on the `Box` either by:
     *
     * - a custom class name that sets `max-height`
     * - `core.box-set-var(auto-rows-height, VALUE)` on the box or a parent element
     *
     * @defaultValue `false`
     */
    gridAutoRows?: boolean;
    /**
     * @defaultValue `""`
     */
    align?: BoxAlignItems;
    /**
     * The default value is really `center` or whatever the
     * `$box-default-align-items` is set to.
     *
     * @defaultValue `""`
     */
    justify?: BoxJustifyContent;
    /**
     * Set this to `true` to set `flex-direction: column` which will stack all
     * items in the box.
     *
     * @defaultValue `false`
     */
    stacked?: boolean;
    /**
     * Set this to `true` to reverse the `flex-direction`. i.e.
     * - `flex-direction: row-reverse`
     * - `flex-direction: column-reverse`
     *
     * @defaultValue `false`
     */
    reversed?: boolean;
}
/**
 * Applies the `className` from the `Box` component to any element.
 *
 * @example Simple Example
 * ```tsx
 * return (
 *   <form className={box({ stacked: true})}>
 *     {children}
 *   </form>
 * );
 * ```
 *
 * If custom media query breakpoints are required, use the {@link boxStyles}
 * function instead which will also set the CSS variables.
 *
 * @see {@link boxStyles}
 * @since 6.0.0
 */
export declare function box(options?: BoxOptions): string;
/**
 * @since 6.0.0
 */
export interface BoxStyles {
    style?: CSSProperties;
    className: string;
}
/**
 * @since 6.0.0
 */
export interface BoxStylesOptions extends BoxOptions {
    style?: CSSProperties;
}
/**
 * Used to apply the styles from the `Box` component to any element by
 * providing a `style` object with CSS variables and a `className`.
 *
 * If you do not need to  use
 *
 * @example Simple Example
 * ```tsx
 * return (
 *   <form
 *     {...boxStyles({
 *        grid: true,
 *        gridColumns: {
 *          phone: 1,
 *          desktop: 3,
 *        },
 *        gridItemSize:  {
 *          tablet: "12rem",
 *        },
 *     })}
 *   >
 *     {children}
 *   </form>
 * );
 * ```
 *
 * @see {@link box}
 * @since 6.0.0
 */
export declare function boxStyles(options: BoxStylesOptions): BoxStyles;
