import type { Mode } from '@beamwind/types' ; import * as is from './is' ; const join = ( parts , separator = '-' ) : string => parts . join ( separator ) ; const isColor = ( color ) : boolean => { if ( typeof Option === 'function' ) { const s = new Option ( ) . style ; s . color = color ; return s . color !== '' ; } return /^#[\da-f]{3,8}$/i . test ( color ) ; } ; const asSize = ( value ) : string | undefined => /[-+]?(?:\d*\.)?\d+(?:ch|r?em|ex|ic|r?lh|v(?:[hwib]|min|max)|px|cm|mm|in|p[ct]|%)/ . test ( value ) ? value : undefined ; const asAngle = ( value ) : string | undefined => /[-+]?(?:\d*\.)?\d+(?:deg|g?rad|turn)/ . test ( value ) ? value : undefined ; const asTime = ( value ) : string | undefined => /[-+]?(?:\d*\.)?\d+m?s/ . test ( value ) ? value : undefined ; const asNumber = ( value ) : string | undefined => ( is . numberLike ( value ) ? value : undefined ) ; let match ; const withUnit = ( value , unit ? ) : string => ( unit ? value + unit : value ) ; const divide = ( dividend , divisor , unit ? , factor ? ) : string => withUnit ( String ( Number ( ( ( Number ( dividend ) / Number ( divisor ) ) * ( factor || 1 ) ) . toFixed ( 6 ) ) ) , unit ) ; const convert = ( value , unit , screenUnit ? ) : undefined | string => { if ( value === 'px' ) return '1px' ; if ( screenUnit && value === 'screen' ) { return `100v${ screenUnit }` ; } if ( is . numberLike ( value ) ) { return unit === 'rem' ? divide ( value , 4 , 'rem' ) : withUnit ( value , unit ) ; } if ( unit === 'rem' && ( match = /^(-?\d+)\/(-?\d+)$/ . exec ( value ) ) ) { return divide ( match [ 1 ] , match [ 2 ] , '%' , 100 ) ; } } ; export const play = ( parent ) : Mode => ( { unknown ( section , parts , optional , theme ) { let value ; switch ( section ) { case 'borderWidth' : case 'divideWidth' : case 'ringWidth' : case 'ringOffsetWidth' : case 'borderRadius' : if ( parts . length === 1 ) { value = convert ( parts [ 0 ] , 'px' ) || asSize ( parts [ 0 ] ) ; } break ; case 'spacing' : case 'letterSpacing' : case 'lineHeight' : case 'gap' : case 'inset' : case 'translate' : case 'fontSize' : if ( parts . length === 1 ) { value = convert ( parts [ 0 ] , 'rem' ) || asSize ( parts [ 0 ] ) ; } break ; case 'durations' : case 'transitionDuration' : case 'transitionDelay' : if ( parts . length === 1 ) { value = convert ( parts [ 0 ] , 'ms' ) || asTime ( parts [ 0 ] ) ; } break ; case 'opacity' : case 'backgroundOpacity' : case 'borderOpacity' : case 'scale' : if ( parts . length === 1 ) { value = asNumber ( parts [ 0 ] ) && divide ( parts [ 0 ] , 100 ) ; } break ; case 'rotate' : case 'skew' : if ( parts . length === 1 ) { value = convert ( parts [ 0 ] , 'deg' ) || asAngle ( parts [ 0 ] ) ; } break ; case 'width' : case 'maxWidth' : if ( parts . length === 1 ) { value = convert ( parts [ 0 ] , 'rem' , 'w' ) || asSize ( parts [ 0 ] ) ; } break ; case 'height' : case 'maxHeight' : if ( parts . length === 1 ) { value = convert ( parts [ 0 ] , 'rem' , 'h' ) || asSize ( parts [ 0 ] ) ; } break ; case 'gradientColorStops' : case 'borderColor' : case 'backgroundColor' : case 'colors' : case 'divideColor' : case 'fill' : case 'placeholderColor' : case 'ringColor' : case 'ringOffsetColor' : case 'stroke' : case 'textColor' : if ( parts . length === 1 ) { if ( parts [ 0 ] === 'current' ) { return 'currentColor' ; } if ( isColor ( parts [ 0 ] ) ) { return parts [ 0 ] ; } } break ; case 'order' : case 'strokeWidth' : case 'fontWeight' : case 'zIndex' : if ( parts . length === 1 ) { value = asNumber ( parts [ 0 ] ) ; } break ; case 'transitionProperty' : case 'transitionTimingFunction' : if ( parts . length > 0 ) { return join ( parts ) as any ; } break ; } return value == null ? parent . unknown ( section , parts , optional , theme ) : value ; } , warn : parent . warn , } ) ;