import { CSSProperties as CSS } from 'react'; import { supportedCSSProperties } from './css-properties'; import type { WithResponsive, ColorScheme, Size } from '../types'; export type CSSPropertyValueType = 'string' | 'number' | 'any'; export type CSSProperty = { /** * CSS Property Type */ type: CSSPropertyValueType; /** * CSS Property */ property: string; /** * Value Transformer */ transformer?: (value: any) => any; }; export type SupportedCSSProperty = (typeof supportedCSSProperties)[number]; type MakeResponsive = { [K in keyof T]?: T[K] | WithResponsive; }; export type StandardCSSProps = MakeResponsive>; /** * CSS Properties type for Box component * This type maps all the CSS properties defined in cssSystemPropAlias to their corresponding React CSS types */ export interface CSSSystemProps extends StandardCSSProps { /** Shorthand for CSS property `padding` */ p?: WithResponsive; /** Shorthand for CSS property `paddingTop` */ pt?: WithResponsive; /** Shorthand for CSS property `paddingRight` */ pr?: WithResponsive; /** Shorthand for CSS property `paddingBottom` */ pb?: WithResponsive; /** Shorthand for CSS property `paddingLeft` */ pl?: WithResponsive; /** Shorthand for CSS property `paddingInline` */ px?: WithResponsive; /** Shorthand for CSS property `paddingBlock` */ py?: WithResponsive; /** Shorthand for CSS property `paddingInlineStart` */ ps?: WithResponsive; /** Shorthand for CSS property `paddingInlineEnd` */ pe?: WithResponsive; /** Shorthand for CSS property `margin` */ m?: WithResponsive; /** Shorthand for CSS property `marginTop` */ mt?: WithResponsive; /** Shorthand for CSS property `marginRight` */ mr?: WithResponsive; /** Shorthand for CSS property `marginBottom` */ mb?: WithResponsive; /** Shorthand for CSS property `marginLeft` */ ml?: WithResponsive; /** Shorthand for CSS property `marginInline` */ mx?: WithResponsive; /** Shorthand for CSS property `marginBlock` */ my?: WithResponsive; /** Shorthand for CSS property `marginInlineStart` */ ms?: WithResponsive; /** Shorthand for CSS property `marginInlineEnd` */ me?: WithResponsive; /** Shorthand for CSS property `width` */ w?: WithResponsive; /** Shorthand for CSS property `height` */ h?: WithResponsive; /** Shorthand for CSS property `minWidth` */ minw?: WithResponsive; /** Shorthand for CSS property `maxWidth` */ maxw?: WithResponsive; /** Shorthand for CSS property `minHeight` */ minh?: WithResponsive; /** Shorthand for CSS property `maxHeight` */ maxh?: WithResponsive; /** Shorthand for CSS property `display` */ display?: WithResponsive; /** Shorthand for CSS property `position` */ pos?: WithResponsive; /** Shorthand for CSS property `left` */ left?: WithResponsive; /** Shorthand for CSS property `top` */ top?: WithResponsive; /** Shorthand for CSS property `right` */ right?: WithResponsive; /** Shorthand for CSS property `bottom` */ bottom?: WithResponsive; /** Shorthand for CSS property `inset` */ inset?: WithResponsive; /** Shorthand for CSS property `insetInline` */ insetx?: WithResponsive; /** Shorthand for CSS property `insetBlock` */ insety?: WithResponsive; /** Shorthand for CSS property `boxSizing` */ bsz?: WithResponsive; /** Shorthand for CSS property `zIndex` */ z?: WithResponsive; /** Shorthand for CSS property `background` */ bg?: WithResponsive; /** Shorthand for CSS property `backgroundColor` */ bgc?: WithResponsive; /** Shorthand for CSS property `backgroundImage` */ bgi?: WithResponsive; /** Shorthand for CSS property `backgroundAttachment` */ bga?: WithResponsive; /** Shorthand for CSS property `backgroundPosition` */ bgp?: WithResponsive; /** Shorthand for CSS property `backgroundSize` */ bgsz?: WithResponsive; /** Shorthand for CSS property `backgroundRepeat` */ bgr?: WithResponsive; /** Shorthand for CSS property `color` */ c?: WithResponsive; /** Shorthand for CSS property `fontFamily` */ ff?: WithResponsive; /** Shorthand for CSS property `fontSize` */ fs?: WithResponsive; /** Shorthand for CSS property `fontWeight` */ fw?: WithResponsive; /** Shorthand for CSS property `textAlign` */ ta?: WithResponsive; /** Shorthand for CSS property `textTransform` */ tt?: WithResponsive; /** Shorthand for CSS property `textDecoration` */ td?: WithResponsive; /** Shorthand for CSS property `textDecorationStyle` */ tds?: WithResponsive; /** Shorthand for CSS property `textDecorationColor` */ tdc?: WithResponsive; /** Shorthand for CSS property `letterSpacing` */ lts?: WithResponsive; /** Shorthand for CSS property `lineHeight` */ lh?: WithResponsive; /** Shorthand for CSS property `border` */ bd?: WithResponsive; /** Shorthand for CSS property `borderStyle` */ bs?: WithResponsive; /** Shorthand for CSS property `borderColor` */ bc?: WithResponsive; /** Shorthand for CSS property `borderWidth` */ bw?: WithResponsive; /** Shorthand for CSS property `borderTop` */ bdt?: WithResponsive; /** Shorthand for CSS property `borderBottom` */ bdb?: WithResponsive; /** Shorthand for CSS property `borderLeft` */ bdl?: WithResponsive; /** Shorthand for CSS property `borderRight` */ bdr?: WithResponsive; /** Shorthand for CSS property `borderTopStyle` */ bdts?: WithResponsive; /** Shorthand for CSS property `borderBottomStyle` */ bdbs?: WithResponsive; /** Shorthand for CSS property `borderLeftStyle` */ bdls?: WithResponsive; /** Shorthand for CSS property `borderRightStyle` */ bdrs?: WithResponsive; /** Shorthand for CSS property `borderTopColor` */ bdtc?: WithResponsive; /** Shorthand for CSS property `borderBottomColor` */ bdbc?: WithResponsive; /** Shorthand for CSS property `borderLeftColor` */ bdlc?: WithResponsive; /** Shorthand for CSS property `borderRightColor` */ bdrc?: WithResponsive; /** Shorthand for CSS property `borderTopWidth` */ bdtw?: WithResponsive; /** Shorthand for CSS property `borderBottomWidth` */ bdbw?: WithResponsive; /** Shorthand for CSS property `borderLeftWidth` */ bdlw?: WithResponsive; /** Shorthand for CSS property `borderRightWidth` */ bdrw?: WithResponsive; /** Shorthand for CSS property `borderRadius` */ rounded?: WithResponsive; /** Shorthand for CSS property `boxShadow` */ shadow?: WithResponsive; /** CSS property `opacity` */ opacity?: WithResponsive; /** Shorthand for CSS property `gap` */ spacing?: WithResponsive; /** CSS property `gap` */ gap?: WithResponsive; /** CSS property `rowGap` */ rowgap?: WithResponsive; /** CSS property `columnGap` */ colgap?: WithResponsive; /** Shorthand for CSS property `alignItems` */ align?: WithResponsive; /** Shorthand for CSS property `justifyContent` */ justify?: WithResponsive; /** Shorthand for CSS property `alignSelf` */ self?: WithResponsive; /** Shorthand for CSS property `flexBasis` */ basis?: WithResponsive; /** Shorthand for CSS property `flex` */ flex?: WithResponsive; /** Shorthand for CSS property `flexGrow` */ grow?: WithResponsive; /** Shorthand for CSS property `order` */ order?: WithResponsive; /** Shorthand for CSS property `flexShrink` */ shrink?: WithResponsive; /** Shorthand for CSS property `flexDirection` */ direction?: WithResponsive; } export {};