@patreon/studio

import type { CSSProp } from 'styled-components'; import type { OpaqueResponsive, ValueOrResponsive } from '../..'; import type { StylableProps } from '../../types/component'; import type { ColorToken } from '../../types/tokens'; export declare type Border = boolean | string; declare type Element = 'address' | 'article' | 'aside' | 'div' | 'footer' | 'header' | 'main' | 'nav' | 'section' | 'li'; declare type CornerRadius = 'none' | 'small' | 'default' | 'imageDefault' | 'circle'; declare type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'; declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'; declare type AlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'; declare type BorderStyle = 'none' | 'solid' | 'dashed' | 'dotted'; declare type Display = 'block' | 'flex' | 'grid' | 'inherit' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline' | 'none'; declare type FlexBasis = number | string | 'auto'; declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'; declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'; declare type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; declare type MaxHeight = 'none' | 'fill-available' | 'fit-content' | 'max-content' | 'min-content'; declare type MaxWidth = 'none' | 'fit-content' | 'max-content' | 'min-content'; declare type MinHeight = 'none' | 'fill-available' | 'fit-content' | 'max-content' | 'min-content'; declare type MinWidth = 'none' | 'fit-content' | 'max-content' | 'min-content'; declare type Overflow = 'visible' | 'hidden' | 'scroll' | 'auto'; declare type Position = 'static' | 'relative' | 'absolute' | 'fixed'; declare type TextAlign = 'left' | 'center' | 'right'; declare type VerticalAlign = 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom'; declare type Height = 'auto' | 'fit-content' | '100%' | 'inherit' | 'max-content' | 'min-content'; declare type Width = 'auto' | 'fit-content' | '100%' | 'inherit' | 'max-content' | 'min-content'; /** * @deprecated Use styled.div`` instead. If you need responsive properties, use the `mediaForBreakpoint` utility */ export interface BoxProps extends React.AriaAttributes, StylableProps { /** * See flexbox section below */ alignContent?: ValueOrResponsive<AlignContent>; /** * See flexbox section below */ alignItems?: ValueOrResponsive<AlignItems>; /** * See flexbox section below */ alignSelf?: ValueOrResponsive<AlignSelf>; /** * See border section below */ b?: ValueOrResponsive<Border>; /** * See border section below */ bb?: ValueOrResponsive<Border>; /** * See border section below */ bl?: ValueOrResponsive<Border>; /** * See border section below */ br?: ValueOrResponsive<Border>; /** * See border section below */ bt?: ValueOrResponsive<Border>; /** * Accepts token value */ backgroundColor?: ValueOrResponsive<ColorToken>; /** * Accepts an token value * @default tokens.global.border.action.default */ borderColor?: ColorToken; /** * See border section below */ borderStrokeWidth?: string; /** * See border section below * @default "solid" */ borderStyle?: BorderStyle; /** * Accepts any React node */ children?: React.ReactNode; /** * Corner/border radius, using theme keywords */ cornerRadius?: ValueOrResponsive<CornerRadius>; /** * Custom css (via styled-components/css) */ css?: CSSProp; /** * String descriptor for testing */ 'data-tag'?: string; /** * CSS [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display). Accepts `<Responsive>` values. Keyword values are `none`, `block`, `flex`, `inline-block`, `inline-flex`, `inline`, and `inherit`. `<div>` (default element) defaults to `block`. */ display?: ValueOrResponsive<Display>; /** * The HTML element the `<Box>` is rendered as. * @default "div" */ el?: Element; /** * See flexbox section below */ flexBasis?: ValueOrResponsive<FlexBasis>; /** * See flexbox section below */ flexDirection?: ValueOrResponsive<FlexDirection>; /** * See flexbox section below */ flexGrow?: ValueOrResponsive<number>; /** * See flexbox section below */ flexShrink?: ValueOrResponsive<number>; /** * See flexbox section below */ flexWrap?: ValueOrResponsive<FlexWrap>; /** * Sets `height: 100%` */ fluidHeight?: ValueOrResponsive<boolean>; /** * Sets `width: 100%` */ fluidWidth?: ValueOrResponsive<boolean>; /** * CSS [height](https://developer.mozilla.org/en-US/docs/Web/CSS/height). Accepts `<Responsive>` values. */ height?: ValueOrResponsive<number | string | Height>; /** * HTML id property. */ id?: string; /** * See flexbox section below */ justifyContent?: ValueOrResponsive<JustifyContent>; /** * See margin & padding section below */ m?: ValueOrResponsive<number>; /** * CSS [max-height](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height). Accepts `<Responsive>` values. */ maxHeight?: ValueOrResponsive<number | string | MaxHeight>; /** * CSS [max-width](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width). Accepts `<Responsive>` values. */ maxWidth?: ValueOrResponsive<number | string | MaxWidth>; /** * See margin & padding section below */ mb?: ValueOrResponsive<number>; /** * See margin & padding section below */ mh?: ValueOrResponsive<number>; /** * CSS [min-height](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height). Accepts `<Responsive>` values. */ minHeight?: ValueOrResponsive<number | string | MinHeight>; /** * CSS [min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width). Accepts `<Responsive>` values. */ minWidth?: ValueOrResponsive<number | string | MinWidth>; /** * See margin & padding section below */ ml?: ValueOrResponsive<number>; /** * See margin & padding section below */ mr?: ValueOrResponsive<number>; /** * See margin & padding section below */ mt?: ValueOrResponsive<number>; /** * See margin & padding section below */ mv?: ValueOrResponsive<number>; /** * Callback function for Box click. */ onClick?: (e: React.MouseEvent<HTMLElement>) => void; /** * Callback function for Box mouseEnter. */ onMouseEnter?: (e: React.MouseEvent<HTMLElement>) => void; /** * Callback function for Box mouseLeave. */ onMouseLeave?: (e: React.MouseEvent<HTMLElement>) => void; /** * See flexbox section below */ order?: ValueOrResponsive<number>; /** * CSS [overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow). Accepts `<Responsive>` values. */ overflow?: ValueOrResponsive<Overflow>; /** * See margin & padding section below */ p?: ValueOrResponsive<number>; /** * See margin & padding section below */ pl?: ValueOrResponsive<number>; /** * See margin & padding section below */ pr?: ValueOrResponsive<number>; /** * See margin & padding section below */ pt?: ValueOrResponsive<number>; /** * See margin & padding section below */ pb?: ValueOrResponsive<number>; /** * See margin & padding section below */ pv?: ValueOrResponsive<number>; /** * See margin & padding section below */ ph?: ValueOrResponsive<number>; /** * CSS [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position). Accepts `<Responsive>` values. */ position?: ValueOrResponsive<Position>; /** * Horizontal alignment of an inline or table-cell box. `<Text>` should still be used to compose text. * See [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) for more info. * Accepts `<Responsive>` values. */ textAlign?: ValueOrResponsive<TextAlign>; /** * Vertical alignment of an inline or table-cell box. * See [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) for more info. * Accepts `<Responsive>` values. */ verticalAlign?: ValueOrResponsive<VerticalAlign>; /** * CSS [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width). Accepts `<Responsive>` values. */ width?: ValueOrResponsive<number | string | Width>; } export declare type StyledProps = Required<Pick<BoxProps, 'borderColor' | 'borderStyle'>> & Pick<BoxProps, 'borderStrokeWidth' | 'css' | 'children' | 'data-tag' | 'el' | 'id' | 'onClick' | 'onMouseEnter' | 'onMouseLeave'> & { alignContent: OpaqueResponsive<AlignContent>; alignItems: OpaqueResponsive<AlignItems>; alignSelf: OpaqueResponsive<AlignSelf>; backgroundColor: OpaqueResponsive<ColorToken>; cornerRadius: OpaqueResponsive<CornerRadius>; display: OpaqueResponsive<Display>; flexBasis: OpaqueResponsive<FlexBasis>; flexDirection: OpaqueResponsive<FlexDirection>; flexGrow: OpaqueResponsive<number>; flexShrink: OpaqueResponsive<number>; flexWrap: OpaqueResponsive<FlexWrap>; fluidHeight: OpaqueResponsive<boolean>; fluidWidth: OpaqueResponsive<boolean>; height: OpaqueResponsive<number | string | Height>; justifyContent: OpaqueResponsive<JustifyContent>; maxHeight: OpaqueResponsive<number | string | MaxHeight>; maxWidth: OpaqueResponsive<number | string | MaxWidth>; minHeight: OpaqueResponsive<number | string | MinHeight>; minWidth: OpaqueResponsive<number | string | MinWidth>; order: OpaqueResponsive<number>; overflow: OpaqueResponsive<Overflow>; position: OpaqueResponsive<Position>; textAlign: OpaqueResponsive<TextAlign>; verticalAlign: OpaqueResponsive<VerticalAlign>; width: OpaqueResponsive<number | string | Width>; b: OpaqueResponsive<Border>; bt: OpaqueResponsive<Border>; br: OpaqueResponsive<Border>; bb: OpaqueResponsive<Border>; bl: OpaqueResponsive<Border>; p: OpaqueResponsive<number>; pv: OpaqueResponsive<number>; ph: OpaqueResponsive<number>; pt: OpaqueResponsive<number>; pr: OpaqueResponsive<number>; pb: OpaqueResponsive<number>; pl: OpaqueResponsive<number>; m: OpaqueResponsive<number>; mv: OpaqueResponsive<number>; mh: OpaqueResponsive<number>; mt: OpaqueResponsive<number>; mr: OpaqueResponsive<number>; mb: OpaqueResponsive<number>; ml: OpaqueResponsive<number>; }; export {};