@tamagui/react-native-web-lite
Version:
React Native for Web
322 lines (299 loc) • 8.3 kB
text/typescript
/**
* Copyright (c) Nicolas Gallagher.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type { ColorValue, DimensionValue } from './types'
type NumberOrString = number | string
/**
* Animations and transitions
*/
type AnimationDirection = 'alternate' | 'alternate-reverse' | 'normal' | 'reverse'
type AnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both'
type AnimationIterationCount = number | 'infinite'
type AnimationKeyframes = string | Object
type AnimationPlayState = 'paused' | 'running'
export type AnimationStyles = {
animationDelay?: string | Array<string> | null
animationDirection?: AnimationDirection | Array<AnimationDirection> | null
animationDuration?: string | Array<string> | null
animationFillMode?: AnimationFillMode | Array<AnimationFillMode> | null
animationIterationCount?:
| AnimationIterationCount
| Array<AnimationIterationCount>
| null
animationKeyframes?: AnimationKeyframes | Array<AnimationKeyframes> | null
animationPlayState?: AnimationPlayState | Array<AnimationPlayState> | null
animationTimingFunction?: string | Array<string> | null
transitionDelay?: string | Array<string> | null
transitionDuration?: string | Array<string> | null
transitionProperty?: string | Array<string> | null
transitionTimingFunction?: string | Array<string> | null
}
/**
* Border
*/
type BorderRadiusValue = number | string
type BorderStyleValue = 'solid' | 'dotted' | 'dashed'
export type BorderStyles = {
borderColor?: ColorValue | null
borderBottomColor?: ColorValue | null
borderEndColor?: ColorValue | null
borderLeftColor?: ColorValue | null
borderRightColor?: ColorValue | null
borderStartColor?: ColorValue | null
borderTopColor?: ColorValue | null
borderRadius?: BorderRadiusValue | null
borderBottomEndRadius?: BorderRadiusValue | null
borderBottomLeftRadius?: BorderRadiusValue | null
borderBottomRightRadius?: BorderRadiusValue | null
borderBottomStartRadius?: BorderRadiusValue | null
borderTopEndRadius?: BorderRadiusValue | null
borderTopLeftRadius?: BorderRadiusValue | null
borderTopRightRadius?: BorderRadiusValue | null
borderTopStartRadius?: BorderRadiusValue | null
borderStyle?: BorderStyleValue | null
borderBottomStyle?: BorderStyleValue | null
borderEndStyle?: BorderStyleValue | null
borderLeftStyle?: BorderStyleValue | null
borderRightStyle?: BorderStyleValue | null
borderStartStyle?: BorderStyleValue | null
borderTopStyle?: BorderStyleValue | null
}
/**
* Interactions
*/
type CursorValue =
| 'alias'
| 'all-scroll'
| 'auto'
| 'cell'
| 'context-menu'
| 'copy'
| 'crosshair'
| 'default'
| 'grab'
| 'grabbing'
| 'help'
| 'pointer'
| 'progress'
| 'wait'
| 'text'
| 'vertical-text'
| 'move'
| 'none'
| 'no-drop'
| 'not-allowed'
| 'zoom-in' // resize
| 'zoom-out'
| 'col-resize'
| 'e-resize'
| 'ew-resize'
| 'n-resize'
| 'ne-resize'
| 'ns-resize'
| 'nw-resize'
| 'row-resize'
| 's-resize'
| 'se-resize'
| 'sw-resize'
| 'w-resize'
| 'nesw-resize'
| 'nwse-resize'
type TouchActionValue =
| 'auto'
| 'inherit'
| 'manipulation'
| 'none'
| 'pan-down'
| 'pan-left'
| 'pan-right'
| 'pan-up'
| 'pan-x'
| 'pan-y'
| 'pinch-zoom'
type UserSelect = 'all' | 'auto' | 'contain' | 'none' | 'text'
export type InteractionStyles = {
// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Formal_syntax
cursor?: CursorValue | null
// https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Formal_syntax
touchAction?: TouchActionValue | null
// https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#Formal_syntax_2
userSelect?: UserSelect | null
willChange?: string | null
}
/**
* Layout
*/
type OverflowValue = 'auto' | 'hidden' | 'scroll' | 'visible'
type VisiblilityValue = 'hidden' | 'visible'
export type LayoutStyles = {
alignContent?:
| 'center'
| 'flex-end'
| 'flex-start'
| 'space-around'
| 'space-between'
| 'stretch'
alignItems?: 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | null
alignSelf?:
| 'auto'
| 'baseline'
| 'center'
| 'flex-end'
| 'flex-start'
| 'stretch'
| null
aspectRatio?: number | null
backfaceVisibility?: VisiblilityValue | null
borderWidth?: DimensionValue | null
borderBottomWidth?: DimensionValue | null
borderEndWidth?: DimensionValue | null
borderLeftWidth?: DimensionValue | null
borderRightWidth?: DimensionValue | null
borderStartWidth?: DimensionValue | null
borderTopWidth?: DimensionValue | null
bottom?: DimensionValue | null
boxSizing?: 'border-box' | 'content-box' | 'padding-box' | null
direction?: 'inherit' | 'ltr' | 'rtl' | null
display?: string | null
end?: DimensionValue | null
flex?: number | null
flexBasis?: DimensionValue | null
flexDirection?: 'column' | 'column-reverse' | 'row' | 'row-reverse' | null
flexGrow?: number | null
flexShrink?: number | null
flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse' | null
height?: DimensionValue | null
justifyContent?:
| 'center'
| 'flex-end'
| 'flex-start'
| 'space-around'
| 'space-between'
| 'space-evenly'
| null
left?: DimensionValue | null
margin?: DimensionValue | null
marginBottom?: DimensionValue | null
marginHorizontal?: DimensionValue | null
marginEnd?: DimensionValue | null
marginLeft?: DimensionValue | null
marginRight?: DimensionValue | null
marginStart?: DimensionValue | null
marginTop?: DimensionValue | null
marginVertical?: DimensionValue | null
maxHeight?: DimensionValue | null
maxWidth?: DimensionValue | null
minHeight?: DimensionValue | null
minWidth?: DimensionValue | null
order?: number | null
overflow?: OverflowValue | null
overflowX?: OverflowValue | null
overflowY?: OverflowValue | null
padding?: DimensionValue | null
paddingBottom?: DimensionValue | null
paddingHorizontal?: DimensionValue | null
paddingEnd?: DimensionValue | null
paddingLeft?: DimensionValue | null
paddingRight?: DimensionValue | null
paddingStart?: DimensionValue | null
paddingTop?: DimensionValue | null
paddingVertical?: DimensionValue | null
position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky' | null
right?: DimensionValue | null
start?: DimensionValue | null
top?: DimensionValue | null
visibility?: VisiblilityValue | null
width?: DimensionValue | null
zIndex?: number | null
/**
* @platform web
*/
gridAutoColumns?: string | null
gridAutoFlow?: string | null
gridAutoRows?: string | null
gridColumnEnd?: string | null
gridColumnGap?: string | null
gridColumnStart?: string | null
gridRowEnd?: string | null
gridRowGap?: string | null
gridRowStart?: string | null
gridTemplateColumns?: string | null
gridTemplateRows?: string | null
gridTemplateAreas?: string | null
}
/**
* Shadows
*/
export type ShadowStyles = {
shadowColor?: ColorValue | null
shadowOffset?: {
width?: DimensionValue
height?: DimensionValue
}
shadowOpacity?: number | null
shadowRadius?: DimensionValue | null
}
/**
* Transforms
*/
export type TransformStyles = {
perspective?: NumberOrString | null
perspectiveOrigin?: string | null
transform?: Array<
| {
readonly perspective: NumberOrString
}
| {
readonly rotate: string
}
| {
readonly rotateX: string
}
| {
readonly rotateY: string
}
| {
readonly rotateZ: string
}
| {
readonly scale: number
}
| {
readonly scaleX: number
}
| {
readonly scaleY: number
}
| {
readonly scaleZ: number
}
| {
readonly scale3d: string
}
| {
readonly skewX: string
}
| {
readonly skewY: string
}
| {
readonly translateX: NumberOrString
}
| {
readonly translateY: NumberOrString
}
| {
readonly translateZ: NumberOrString
}
| {
readonly translate3d: string
}
>
transformOrigin?: string | null
transformStyle?: 'flat' | 'preserve-3d' | null
}