import { CSSProperties } from 'react';
export interface BaseStyleProps extends CSSBackgroundProps, CSSBorderProps, CSSLayoutProps, CSSPositioningProps, CSSSizingProps, CSSSpacingProps {
}
export interface BoxStyleProps extends BaseStyleProps {
    /**
     * Display of the container.
     * Use `Flex` component for flex related display.
     */
    display?: 'block' | 'inline' | 'inline-block' | 'none';
}
export interface CSSBackgroundProps {
    /**
     * The background color for the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/background-color}
     */
    backgroundColor?: CSSColorValue;
}
export interface CSSBorderProps {
    /**
     * The border radius for the bottom end corner of the element, depending on the layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-end-radius}
     */
    borderEndEndRadius?: CSSBorderValue;
    /**
     * The border radius for the bottom start corner of the element, depending on the layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-end-start-radius}
     */
    borderEndStartRadius?: CSSBorderValue;
    /**
     * The border radius on all four sides of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius}
     */
    borderRadius?: CSSBorderValue;
    /**
     * The border radius for the top end corner of the element, depending on the layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-end-radius}
     */
    borderStartEndRadius?: CSSBorderValue;
    /**
     * The border radius for the top start corner of the element, depending on the layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/border-start-start-radius}
     */
    borderStartStartRadius?: CSSBorderValue;
}
export type CSSBorderValue = 'radius-0x' | 'radius-1x' | 'radius-2x' | 'radius-full' | 'radius-none';
export type CSSColorValue = 'accent-100' | 'accent-150' | 'accent-200' | 'accent-250' | 'accent-300' | 'accent-350' | 'accent-400' | 'accent-450' | 'accent-500' | 'accent-550' | 'accent-600' | 'accent-650' | 'accent-700' | 'accent-750' | 'accent-800' | 'accent-850' | 'blue-50' | 'blue-100' | 'blue-200' | 'blue-300' | 'blue-400' | 'blue-500' | 'blue-600' | 'blue-700' | 'gold-50' | 'gold-100' | 'gold-200' | 'gold-300' | 'gold-400' | 'gold-500' | 'gold-600' | 'gold-700' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'green-700' | 'neutral-000' | 'neutral-100' | 'neutral-200' | 'neutral-300' | 'neutral-400' | 'neutral-500' | 'neutral-600' | 'neutral-700' | 'orange-50' | 'orange-100' | 'orange-200' | 'orange-300' | 'orange-400' | 'orange-500' | 'orange-600' | 'orange-700' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'red-400' | 'red-500' | 'red-600' | 'red-700';
export interface CSSLayoutProps {
    /**
     * Overrides the alignItems property of a flex or grid container.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-self}
     */
    alignSelf?: CSSProperties['alignSelf'];
    /**
     * When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex}
     */
    flex?: CSSProperties['flex'];
    /**
     * When used in a flex layout, specifies the initial main size of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis}
     */
    flexBasis?: CSSProperties['flexBasis'];
    /**
     * When used in a flex layout, specifies how the element will grow to fit the space available.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow}
     */
    flexGrow?: CSSProperties['flexGrow'];
    /**
     * When used in a flex layout, specifies how the element will shrink to fit the space available.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink}
     */
    flexShrink?: CSSProperties['flexShrink'];
    /**
     * Specifies how the element is justified inside a flex or grid container.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self}
     */
    justifySelf?: CSSProperties['justifySelf'];
    /**
     * The layout order for the element within a flex or grid container.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/order}
     */
    order?: CSSProperties['order'];
    /**
     * Species what to do when the element's content is too long to fit its size.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}
     */
    overflow?: CSSProperties['overflow'];
}
export interface CSSPositioningProps {
    /**
     * The bottom position for the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/bottom}
     */
    bottom?: CSSProperties['bottom'] | CSSSpacingValue;
    /**
     * The logical end position for the element, depending on layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end}
     */
    insetInlineEnd?: CSSProperties['insetInlineEnd'] | CSSSpacingValue;
    /**
     * The logical start position for the element, depending on layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start}
     */
    insetInlineStart?: CSSProperties['insetInlineStart'] | CSSSpacingValue;
    /**
     * Specifies how the element is positioned.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/position}
     */
    position?: CSSProperties['position'];
    /**
     * The top position for the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/top}
     */
    top?: CSSProperties['top'] | CSSSpacingValue;
}
export interface CSSSizingProps {
    /**
     * The height of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/height}
     */
    height?: CSSProperties['height'];
    /**
     * The maximum height of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-height}
     */
    maxHeight?: CSSProperties['maxHeight'];
    /**
     * The maximum width of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/max-width}
     */
    maxWidth?: CSSProperties['maxWidth'];
    /**
     * The minimum height of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-height}
     */
    minHeight?: CSSProperties['minHeight'];
    /**
     * The minimum width of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/min-width}
     */
    minWidth?: CSSProperties['minWidth'];
    /**
     * The width of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/width}
     */
    width?: CSSProperties['width'];
}
export interface CSSSpacingProps {
    /**
     * The margin for all four sides of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin}
     */
    margin?: CSSSpacingValue;
    /**
     * The `margin-block` CSS shorthand property defines the logical block start and end margins of an element,
     * which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
     *
     * This property is a shorthand for the following CSS properties:
     * - `margin-block-start`
     * - `margin-block-end`
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block}
     */
    marginBlock?: CSSSpacingValue;
    /**
     * The `margin-block-end` CSS property defines the logical block end margin of an element,
     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
     *
     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end}
     */
    marginBlockEnd?: CSSSpacingValue;
    /**
     * The `margin-block-start` CSS property defines the logical block start margin of an element,
     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
     *
     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start}
     */
    marginBlockStart?: CSSSpacingValue;
    /**
     * The margin-inline CSS shorthand property defines both the logical inline start and end margins of an element,
     * which maps to physical margins depending on the element's writing mode, directionality, and text orientation.
     *
     * This property is a shorthand for the following CSS properties:
     * - `margin-inline-start`
     * - `margin-inline-end`
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline}
     */
    marginInline?: CSSSpacingValue;
    /**
     * The `margin-inline-end` CSS property defines the logical inline end margin of an element,
     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
     *
     * In other words, it corresponds to the `margin-top`, `margin-right`, `margin-bottom` or `margin-left` property
     * depending on the values defined for writing-mode, direction, and text-orientation.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-end}
     */
    marginInlineEnd?: CSSSpacingValue;
    /**
     * The `margin-inline-start` CSS property defines the logical inline start margin of an element,
     * which maps to a physical margin depending on the element's writing mode, directionality, and text orientation.
     *
     * It corresponds to the `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` property depending
     * on the values defined for `writing-mode`, `direction`, and `text-orientation`.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start}
     */
    marginInlineStart?: CSSSpacingValue;
    /**
     * The padding for all four sides of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding}
     */
    padding?: CSSSpacingValue;
    /**
     *
     * @see {@link }
     */
    paddingBlock?: CSSSpacingValue;
    /**
     *
     * @see {@link }
     */
    paddingBlockEnd?: CSSSpacingValue;
    /**
     *
     * @see {@link }
     */
    paddingBlockStart?: CSSSpacingValue;
    /**
     * The padding for both the logical inline start and end sides of the element.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline}
     */
    paddingInline?: CSSSpacingValue;
    /**
     * The padding for the logical end side of an element, depending on layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end}
     */
    paddingInlineEnd?: CSSSpacingValue;
    /**
     * The padding for the logical start side of the element, depending on layout direction.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-start}
     */
    paddingInlineStart?: CSSSpacingValue;
}
export type CSSSpacingValue = 'space-0x' | 'space-1x' | 'space-2x' | 'space-3x' | 'space-4x' | 'space-5x' | 'space-6x' | 'space-7x' | 'space-8x' | 'space-9x' | 'space-10x';
export interface FlexStyleProps extends BaseStyleProps {
    /**
     * The distribution of space around child items along the cross axis.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-content}
     */
    alignContent?: CSSProperties['alignContent'];
    /**
     * The alignment of children within their container.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/align-items}
     */
    alignItems?: CSSProperties['alignItems'];
    /**
     * The space to display between columns.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap}
     */
    columnGap?: CSSSpacingValue;
    /**
     * The direction in which to layout children.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction}
     */
    direction?: CSSProperties['flexDirection'];
    /**
     * Flex display of the container.
     */
    display?: 'flex' | 'inline-flex' | 'none';
    /**
     * The space to display between both rows and columns.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/gap}
     */
    gap?: CSSSpacingValue;
    /**
     * The distribution of space around items along the main axis.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content}
     */
    justifyContent?: CSSProperties['justifyContent'];
    /**
     * The space to display between rows.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap}
     */
    rowGap?: CSSSpacingValue;
    /**
     * Whether to wrap items onto multiple lines.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap}
     */
    wrap?: CSSProperties['flexWrap'];
}