forge/src/types.ts
2025-12-26 21:59:26 -08:00

178 lines
8.0 KiB
TypeScript

export type TagDef = {
className?: string
base?: string
states?: Record<string, TagDef>,
parts?: Record<string, TagDef>
variants?: Record<string, TagDef | Record<string, TagDef>>
render?: (obj: any) => any
// layout-related
alignContent?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline'
alignItems?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end'
alignSelf?: 'auto' | 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end'
aspectRatio?: number | string
bottom?: number | string
boxSizing?: 'content-box' | 'border-box'
columnGap?: number | string
contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint'
display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'table-cell'
flex?: number | string
flexBasis?: number | string
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
flexGrow?: number
flexShrink?: number
flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
gap?: number | string
gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense'
gridColumn?: string
gridGap?: number | string
gridRow?: string
gridTemplateColumns?: string
gridTemplateRows?: string
height?: number | string
inset?: number | string
justifyContent?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'left' | 'right' | 'stretch'
justifyItems?: 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right'
justifySelf?: 'auto' | 'normal' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right'
left?: number | string
margin?: number | string
marginBottom?: number | string
marginLeft?: number | string
marginRight?: number | string
marginTop?: number | string
maxHeight?: number | string
maxWidth?: number | string
minHeight?: number | string
minWidth?: number | string
order?: number
overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip'
padding?: number | string
paddingBottom?: number | string
paddingLeft?: number | string
paddingRight?: number | string
paddingTop?: number | string
placeContent?: string
placeItems?: string
placeSelf?: string
position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
right?: number | string
rowGap?: number | string
top?: number | string
verticalAlign?: 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom' | 'sub' | 'super'
width?: number | string
zIndex?: number
// visual/theme-related
animation?: string
appearance?: 'none' | 'auto' | 'button' | 'textfield' | 'searchfield' | 'textarea' | 'checkbox' | 'radio'
backdropFilter?: string
background?: string
backgroundAttachment?: 'scroll' | 'fixed' | 'local'
backgroundClip?: 'border-box' | 'padding-box' | 'content-box' | 'text'
backgroundColor?: string
backgroundImage?: string
backgroundPosition?: string
backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round'
backgroundSize?: 'auto' | 'cover' | 'contain'
border?: string
borderBottom?: string
borderBottomColor?: string
borderBottomLeftRadius?: number | string
borderBottomRightRadius?: number | string
borderBottomStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
borderBottomWidth?: number | string
borderColor?: string
borderLeft?: string
borderLeftColor?: string
borderLeftStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
borderLeftWidth?: number | string
borderRadius?: number | string
borderRight?: string
borderRightColor?: string
borderRightStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
borderRightWidth?: number | string
borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
borderTop?: string
borderTopColor?: string
borderTopLeftRadius?: number | string
borderTopRightRadius?: number | string
borderTopStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden'
borderTopWidth?: number | string
borderWidth?: number | string
boxShadow?: string
clipPath?: string
color?: string
content?: string
cursor?: 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'col-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out'
filter?: string
fontFamily?: string
fontSize?: number | string
fontStyle?: 'normal' | 'italic' | 'oblique'
fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'bolder' | 'lighter' | number
isolation?: 'auto' | 'isolate'
letterSpacing?: number | string
lineHeight?: number | string
listStyle?: string
listStyleImage?: string
listStylePosition?: 'inside' | 'outside'
listStyleType?: 'none' | 'disc' | 'circle' | 'square' | 'decimal' | 'decimal-leading-zero' | 'lower-roman' | 'upper-roman' | 'lower-alpha' | 'upper-alpha' | 'lower-greek' | 'lower-latin' | 'upper-latin'
mixBlendMode?: 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'
objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
opacity?: number
outline?: string
outlineColor?: string
outlineOffset?: number | string
outlineStyle?: 'none' | 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'
outlineWidth?: number | string
pointerEvents?: 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all'
resize?: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline'
scrollBehavior?: 'auto' | 'smooth'
textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end'
textDecoration?: string
textDecorationColor?: string
textDecorationLine?: 'none' | 'underline' | 'overline' | 'line-through' | 'blink'
textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy'
textDecorationThickness?: number | string
textIndent?: number | string
textOverflow?: 'clip' | 'ellipsis' | string
textShadow?: string
textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana'
transform?: string
transition?: string
userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all'
visibility?: 'visible' | 'hidden' | 'collapse'
whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces'
willChange?: 'auto' | 'scroll-position' | 'contents'
wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'
wordSpacing?: number | string
wordWrap?: 'normal' | 'break-word' | 'anywhere'
overflowWrap?: 'normal' | 'break-word' | 'anywhere'
}
export const NonStyleKeys = new Set([
'className',
'base',
'states',
'parts',
'variants',
'render',
'styles',
])
export const UnitlessProps = new Set([
'animationIterationCount',
'aspectRatio',
'columnCount',
'flex',
'flexGrow',
'flexShrink',
'fontWeight',
'lineHeight',
'opacity',
'order',
'orphans',
'widows',
'zIndex'
])