import { ColorKeyword, SizeKeyword } from './scales';
import { MaybeAllValuesShorthandProperty, MaybeTwoValuesShorthandProperty } from './utils';
import { DisplayProps } from './outer-layout';
import { GlobalProps } from './global';
import { ComponentChildren } from './children';
import { AccessibilityRoleProps, AccessibilityVisibilityProps } from './accessibility';
import { BackgroundProps } from './theming';
type PaddingKeyword = SizeKeyword | 'none';
interface PaddingProps {
    /**
     * Adjust the padding of all edges.
     *
     * 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
     * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
     *
     * - 4 values: `block-start inline-end block-end inline-start`
     * - 3 values: `block-start inline block-end`
     * - 2 values: `block inline`
     *
     * For example:
     * - `large` means block-start, inline-end, block-end and inline-start paddings are `large`.
     * - `large none` means block-start and block-end paddings are `large`, inline-start and inline-end paddings are `none`.
     * - `large none large` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `none`.
     * - `large none large small` means block-start padding is `large`, inline-end padding is `none`, block-end padding is `large` and inline-start padding is `small`.
     *
     * A padding value of `auto` will use the default padding for the closest container that has had its usual padding removed.
     *
     * @default 'none'
     */
    padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
    /**
     * Adjust the block-padding.
     *
     * - `large none` means block-start padding is `large`, block-end padding is `none`.
     *
     * This overrides the block value of `padding`.
     *
     * @default '' - meaning no override
     */
    paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
    /**
     * Adjust the block-start padding.
     *
     * This overrides the block-start value of `paddingBlock`.
     *
     * @default '' - meaning no override
     */
    paddingBlockStart?: PaddingKeyword | '';
    /**
     * Adjust the block-end padding.
     *
     * This overrides the block-end value of `paddingBlock`.
     *
     * @default '' - meaning no override
     */
    paddingBlockEnd?: PaddingKeyword | '';
    /**
     * Adjust the inline padding.
     *
     * - `large none` means inline-start padding is `large`, inline-end padding is `none`.
     *
     * This overrides the inline value of `padding`.
     *
     * @default '' - meaning no override
     */
    paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | '';
    /**
     * Adjust the inline-start padding.
     *
     * This overrides the inline-start value of `paddingInline`.
     *
     * @default '' - meaning no override
     */
    paddingInlineStart?: PaddingKeyword | '';
    /**
     * Adjust the inline-end padding.
     *
     * This overrides the inline-end value of `paddingInline`.
     *
     * @default '' - meaning no override
     */
    paddingInlineEnd?: PaddingKeyword | '';
}
export type SizeUnits = `${number}px` | `${number}%` | `0`;
export type SizeUnitsOrAuto = SizeUnits | 'auto';
export type SizeUnitsOrNone = SizeUnits | 'none';
export interface SizingProps {
    /**
     * Adjust the block size.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
     *
     * @default 'auto'
     */
    blockSize?: SizeUnitsOrAuto;
    /**
     * Adjust the minimum block size.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
     *
     * @default '0'
     */
    minBlockSize?: SizeUnits;
    /**
     * Adjust the maximum block size.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
     *
     * @default 'none'
     */
    maxBlockSize?: SizeUnitsOrNone;
    /**
     * Adjust the inline size.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
     *
     * @default 'auto'
     */
    inlineSize?: SizeUnitsOrAuto;
    /**
     * Adjust the minimum inline size.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
     *
     * @default '0'
     */
    minInlineSize?: SizeUnits;
    /**
     * Adjust the maximum inline size.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
     *
     * @default 'none'
     */
    maxInlineSize?: SizeUnitsOrNone;
}
export type BorderStyleKeyword = 'none' | 'solid' | 'dashed' | 'dotted' | 'auto';
export type BorderSizeKeyword = SizeKeyword | 'none';
export type BorderRadiusKeyword = SizeKeyword | 'none';
/**
 * Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.
 */
export type BorderShorthand = BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`;
export interface BorderProps {
    /**
     * Set the border via the shorthand property.
     *
     * This can be a size, optionally followed by a color, optionally followed by a style.
     *
     * If the color is not specified, it will be `base`.
     *
     * If the style is not specified, it will be `auto`.
     *
     * Values can be overridden by `borderWidth`, `borderStyle`, and `borderColor`.
     *
     * @example
     * // The following are equivalent:
     * <Box border="large-100 strong dashed" />
     * <Box borderWidth="large-100" borderColor="strong" borderStyle="dashed" />
     *
     * @default 'none' - equivalent to `none base auto`.
     */
    border?: BorderShorthand;
    /**
     * Set the width of the border.
     *
     * If set, it takes precedence over the `border` property's width.
     *
     * Like CSS, up to 4 values can be specified.
     *
     * If one value is specified, it applies to all sides.
     *
     * If two values are specified, they apply to the block sides and inline sides respectively.
     *
     * If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
     *
     * If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
     *
     * @default '' - meaning no override
     */
    borderWidth?: MaybeAllValuesShorthandProperty<BorderSizeKeyword> | '';
    /**
     * Set the style of the border.
     *
     * If set, it takes precedence over the `border` property's style.
     *
     * Like CSS, up to 4 values can be specified.
     *
     * If one value is specified, it applies to all sides.
     *
     * If two values are specified, they apply to the block sides and inline sides respectively.
     *
     * If three values are specified, they apply to the block-start, both inline sides, and block-end respectively.
     *
     * If four values are specified, they apply to the block-start, block-end, inline-start, and inline-end sides respectively.
     *
     * @default '' - meaning no override
     */
    borderStyle?: MaybeAllValuesShorthandProperty<BorderStyleKeyword> | '';
    /**
     * Set the color of the border.
     *
     * If set, it takes precedence over the `border` property's color.
     *
     * @default '' - meaning no override
     */
    borderColor?: ColorKeyword | '';
    /**
     * Set the radius of the border.
     *
     * 1-to-4-value syntax (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) is
     * supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:
     *
     * - 4 values: `start-start start-end end-end end-start`
     * - 3 values: `start-start (start-end & end-start) start-end`
     * - 2 values: `(start-start & end-end) (start-end & end-start)`
     *
     * For example:
     * - `small-100` means start-start, start-end, end-end and end-start border radii are `small-100`.
     * - `small-100 none` means start-start and end-end border radii are `small-100`, start-end and end-start border radii are `none`.
     * - `small-100 none large-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `none`.
     * - `small-100 none large-100 small-100` means start-start border radius is `small-100`, start-end border radius is `none`, end-end border radius is `large-100` and end-start border radius is `small-100`.
     *
     * @defaultValue 'none'
     */
    borderRadius?: MaybeAllValuesShorthandProperty<BorderRadiusKeyword>;
}
export interface OverflowProps {
    /**
     * Sets the overflow behavior of the element.
     *
     * `hidden`: clips the content when it is larger than the element’s container.
     * The element will not be scrollable and the users will not be able
     * to access the clipped content by dragging or using a scroll wheel on a mouse.
     *
     * `visible`: the content that extends beyond the element’s container is visible.
     *
     * @default 'visible'
     */
    overflow?: 'hidden' | 'visible';
}
export interface BaseBoxProps extends GlobalProps, AccessibilityVisibilityProps, BackgroundProps, DisplayProps, SizingProps, PaddingProps, BorderProps, OverflowProps {
    /**
     * The content of the Box.
     */
    children?: ComponentChildren;
    /**
     * A label that describes the purpose or contents of the element.
     * When set, it will be announced to users using assistive technologies and will provide them with more context.
     *
     * Only use this when the element's content is not enough context for users using assistive technologies.
     */
    accessibilityLabel?: string;
}
export interface BaseBoxPropsWithRole extends BaseBoxProps, AccessibilityRoleProps {
}
export {};