native-stylex/dist/index.esm.js

NativeStyleX is a utility-first CSS framework for React Native. It enables fast and responsive styling using predefined utility classes without writing custom styles.

import{Dimensions as e}from"react-native";const t={0:0,1:4,2:8,4:16,6:24,8:32,10:40,12:48,16:64,20:80,24:96,32:128,40:160,48:192,56:224,64:256,72:288,80:320,85:350,96:384},{width:o,height:r}=e.get("screen"),{width:i,height:d}=e.get("window"),n={"text-primary":{color:"blue"},"text-secondary":{color:"#6c757d"},"text-success":{color:"green"},"text-danger":{color:"red"},"text-warning":{color:"orange"},"text-info":{color:"cyan"},"text-light":{color:"#f8f9fa"},"text-medium-black":{color:"#212529"},"text-white":{color:"#ffffff"},"text-black":{color:"#000000"},"text-transparent":{color:"transparent"},"bg-primary":{backgroundColor:"blue"},"bg-secondary":{backgroundColor:"#6c757d"},"bg-success":{backgroundColor:"green"},"bg-danger":{backgroundColor:"red"},"bg-warning":{backgroundColor:"orange"},"bg-info":{backgroundColor:"cyan"},"bg-light":{backgroundColor:"#f8f9fa"},"bg-medium-black":{backgroundColor:"#212529"},"bg-white":{backgroundColor:"#ffffff"},"bg-black":{backgroundColor:"#000000"},"bg-transparent":{backgroundColor:"transparent"},"border-0":{borderWidth:0},"border-1":{borderWidth:1},"border-2":{borderWidth:2},"border-4":{borderWidth:4},"border-8":{borderWidth:8},"border-t":{borderTopWidth:1},"border-b":{borderBottomWidth:1},"border-l":{borderLeftWidth:1},"border-r":{borderRightWidth:1},"border-t-2":{borderTopWidth:2},"border-b-2":{borderBottomWidth:2},"border-l-2":{borderLeftWidth:2},"border-r-2":{borderRightWidth:2},"border-none":{borderWidth:0},"border-solid":{borderStyle:"solid"},"border-dashed":{borderStyle:"dashed"},"border-dotted":{borderStyle:"dotted"},"border-primary":{borderColor:"#007bff"},"border-secondary":{borderColor:"#6c757d"},"border-success":{borderColor:"#28a745"},"border-danger":{borderColor:"#dc3545"},"border-warning":{borderColor:"#ffc107"},"border-info":{borderColor:"#17a2b8"},"border-light":{borderColor:"#f8f9fa"},"border-dark":{borderColor:"#343a40"},"border-black":{borderColor:"#000"},"border-white":{borderColor:"#fff"},"border-red-500":{borderColor:"#f56565"},"border-green-500":{borderColor:"#48bb78"},"border-blue-500":{borderColor:"#4299e1"},"border-warning-500":{borderColor:"#ecc94b"},"border-purple-500":{borderColor:"#9f7aea"},"border-opacity-0":{borderColor:"rgba(0,0,0,0)"},"border-opacity-25":{borderColor:"rgba(0,0,0,0.25)"},"border-opacity-50":{borderColor:"rgba(0,0,0,0.50)"},"border-opacity-75":{borderColor:"rgba(0,0,0,0.75)"},"border-opacity-100":{borderColor:"rgba(0,0,0,1)"},"rounded-none":{borderRadius:0},...Object.entries({vs:4,sm:6,md:8,lg:12,xl:16,"2xl":20,"3xl":25,"4xl":30,"5xl":35,full:9999}).reduce(((e,[t,o])=>(e[`rounded-${t}`]={borderRadius:o},e[`rounded-t-${t}`]={borderTopLeftRadius:o,borderTopRightRadius:o},e[`rounded-b-${t}`]={borderBottomLeftRadius:o,borderBottomRightRadius:o},e[`rounded-l-${t}`]={borderTopLeftRadius:o,borderBottomLeftRadius:o},e[`rounded-r-${t}`]={borderTopRightRadius:o,borderBottomRightRadius:o},e[`rounded-tl-${t}`]={borderTopLeftRadius:o},e[`rounded-tr-${t}`]={borderTopRightRadius:o},e[`rounded-bl-${t}`]={borderBottomLeftRadius:o},e[`rounded-br-${t}`]={borderBottomRightRadius:o},e)),{}),"font-vs":{fontSize:10},"font-xs":{fontSize:12},"font-sm":{fontSize:14},"font-md":{fontSize:16},"font-lg":{fontSize:18},"font-xl":{fontSize:20},"font-2xl":{fontSize:24},"font-3xl":{fontSize:28},"font-4xl":{fontSize:32},"font-5xl":{fontSize:36},"font-6xl":{fontSize:40},"font-thin":{fontWeight:"100"},"font-extralight":{fontWeight:"200"},"font-light":{fontWeight:"300"},"font-normal":{fontWeight:"400"},"font-medium":{fontWeight:"500"},"font-semibold":{fontWeight:"600"},"font-bold":{fontWeight:"700"},"font-extrabold":{fontWeight:"800"},"font-heavy":{fontWeight:"900"},"text-italic":{fontStyle:"italic"},"text-underline":{textDecorationLine:"underline"},"text-line-through":{textDecorationLine:"line-through"},"text-underline-line-through":{textDecorationLine:"underline line-through"},"text-left":{textAlign:"left"},"text-center":{textAlign:"center"},"text-right":{textAlign:"right"},"text-justify":{textAlign:"justify"},"vertical-auto":{verticalAlign:"auto"},"vertical-bottom":{verticalAlign:"bottom"},"vertical-middle":{verticalAlign:"middle"},"vertical-top":{verticalAlign:"top"},"elevation-2":{elevation:2},"elevation-4":{elevation:4},"elevation-6":{elevation:6},"elevation-8":{elevation:8},"m-1":{margin:5},"m-2":{margin:10},"m-3":{margin:15},"m-4":{margin:20},"m-5":{margin:25},"mx-1":{marginLeft:5,marginRight:5},"mx-2":{marginLeft:10,marginRight:10},"mx-3":{marginLeft:15,marginRight:15},"mx-4":{marginLeft:20,marginRight:20},"mx-5":{marginLeft:25,marginRight:25},"my-1":{marginTop:5,marginBottom:5},"my-2":{marginTop:10,marginBottom:10},"my-3":{marginTop:15,marginBottom:15},"my-4":{marginTop:20,marginBottom:20},"my-5":{marginTop:25,marginBottom:25},"mt-1":{marginTop:5},"mt-2":{marginTop:10},"mt-3":{marginTop:15},"mt-4":{marginTop:20},"mt-5":{marginTop:25},"mb-1":{marginBottom:5},"mb-2":{marginBottom:10},"mb-3":{marginBottom:15},"mb-4":{marginBottom:20},"mb-5":{marginBottom:25},"ml-1":{marginLeft:5},"ml-2":{marginLeft:10},"ml-3":{marginLeft:15},"ml-4":{marginLeft:20},"ml-5":{marginLeft:25},"mr-1":{marginRight:5},"mr-2":{marginRight:10},"mr-3":{marginRight:15},"mr-4":{marginRight:20},"mr-5":{marginRight:25},"p-1":{padding:5},"p-2":{padding:10},"p-3":{padding:15},"p-4":{padding:20},"p-5":{padding:25},"px-1":{paddingLeft:5,paddingRight:5},"px-2":{paddingLeft:10,paddingRight:10},"px-3":{paddingLeft:15,paddingRight:15},"px-4":{paddingLeft:20,paddingRight:20},"px-5":{paddingLeft:25,paddingRight:25},"py-1":{paddingTop:5,paddingBottom:5},"py-2":{paddingTop:10,paddingBottom:10},"py-3":{paddingTop:15,paddingBottom:15},"py-4":{paddingTop:20,paddingBottom:20},"py-5":{paddingTop:25,paddingBottom:25},"pt-1":{paddingTop:5},"pt-2":{paddingTop:10},"pt-3":{paddingTop:15},"pt-4":{paddingTop:20},"pt-5":{paddingTop:25},"pb-1":{paddingBottom:5},"pb-2":{paddingBottom:10},"pb-3":{paddingBottom:15},"pb-4":{paddingBottom:20},"pb-5":{paddingBottom:25},"pl-1":{paddingLeft:5},"pl-2":{paddingLeft:10},"pl-3":{paddingLeft:15},"pl-4":{paddingLeft:20},"pl-5":{paddingLeft:25},"pr-1":{paddingRight:5},"pr-2":{paddingRight:10},"pr-3":{paddingRight:15},"pr-4":{paddingRight:20},"pr-5":{paddingRight:25},"h-full":{height:"100%"},"h-auto":{height:"auto"},"vh-screen":{height:"100vh"},"max-h-full":{maxHeight:"100%"},"max-vh-screen":{maxHeight:"100vh"},"min-h-full":{minHeight:"100%"},"min-vh-screen":{minHeight:"100vh"},...Object.entries(t).reduce(((e,[t,o])=>(e[`h-${t}`]={height:o},e)),{}),"w-screen":{width:o},"h-screen":{height:r},"w-window":{width:i},"h-window":{height:d},"w-1/2-screen":{width:o/2},"h-1/2-screen":{height:r/2},"w-1/2-window":{width:i/2},"h-1/2-window":{height:d/2},"w-1/3-screen":{width:o/3},"h-1/3-screen":{height:r/3},"w-1/3-window":{width:i/3},"h-1/3-window":{height:d/3},"w-1/4-screen":{width:o/4},"h-1/4-screen":{height:r/4},"w-1/4-window":{width:i/4},"h-1/4-window":{height:d/4},"w-3/4-screen":{width:3*o/4},"h-3/4-screen":{height:3*r/4},"w-3/4-window":{width:3*i/4},"h-3/4-window":{height:3*d/4},"w-1/5-screen":{width:o/5},"h-1/5-screen":{height:r/5},"w-1/6-screen":{width:o/6},"h-1/6-screen":{height:r/6},"w-1/5-window":{width:i/5},"h-1/5-window":{height:d/5},"w-1/6-window":{width:i/6},"h-1/6-window":{height:d/6},"w-1/1-screen":{width:o},"h-1/1-screen":{height:r},"w-1/1-window":{width:i},"h-1/1-window":{height:d},"w-full":{width:"100%"},"w-auto":{width:"auto"},"vw-screen":{width:"100vw"},"max-w-full":{maxWidth:"100%"},"max-vw-screen":{maxWidth:"100vw"},"min-w-full":{minWidth:"100%"},"min-vw-screen":{minWidth:"100vw"},...Object.entries(t).reduce(((e,[t,o])=>(e[`w-${t}`]={width:o},e)),{}),"d-flex":{display:"flex"},hidden:{display:"none"},"flex-1":{flex:1},"flex-row":{flexDirection:"row"},"flex-col":{flexDirection:"column"},"flex-wrap":{flexWrap:"wrap"},"flex-nowrap":{flexWrap:"nowrap"},"justify-start":{justifyContent:"flex-start"},"justify-end":{justifyContent:"flex-end"},"justify-center":{justifyContent:"center"},"justify-between":{justifyContent:"space-between"},"justify-around":{justifyContent:"space-around"},"justify-evenly":{justifyContent:"space-evenly"},"items-start":{alignItems:"flex-start"},"items-end":{alignItems:"flex-end"},"items-center":{alignItems:"center"},"items-stretch":{alignItems:"stretch"},"self-auto":{alignSelf:"auto"},"self-start":{alignSelf:"flex-start"},"self-end":{alignSelf:"flex-end"},"self-center":{alignSelf:"center"},"self-stretch":{alignSelf:"stretch"},"gap-1":{gap:4},"gap-2":{gap:8},"gap-3":{gap:12},"gap-4":{gap:16},"gap-5":{gap:20},"col-gap-1":{columnGap:4},"col-gap-2":{columnGap:8},"col-gap-3":{columnGap:12},"col-gap-4":{columnGap:16},"col-gap-5":{columnGap:20},"row-gap-1":{rowGap:4},"row-gap-2":{rowGap:8},"row-gap-3":{rowGap:12},"row-gap-4":{rowGap:16},"row-gap-5":{rowGap:20},absolute:{position:"absolute"},relative:{position:"relative"},"top-0":{top:0},"top-5":{top:5},"top-10":{top:10},"right-0":{right:0},"right-5":{right:5},"right-10":{right:10},"bottom-0":{bottom:0},"bottom-5":{bottom:5},"bottom-10":{bottom:10},"left-0":{left:0},"left-5":{left:5},"left-10":{left:10},"overflow-hidden":{overflow:"hidden"},"overflow-visible":{overflow:"visible"},"overflow-scroll":{overflow:"scroll"},"z-0":{zIndex:0},"z-10":{zIndex:10},"z-20":{zIndex:20},"z-50":{zIndex:50},"z-100":{zIndex:100},"opacity-0":{opacity:0},"opacity-25":{opacity:.25},"opacity-50":{opacity:.5},"opacity-75":{opacity:.75},"opacity-100":{opacity:1},...Object.entries({red:["#fee2e2","#fecaca","#fca5a5","#f87171","#ef4444","#dc2626","#b91c1c","#991b1b","#7f1d1d"],green:["#d1fae5","#a7f3d0","#6ee7b7","#34d399","#10b981","#059669","#047857","#065f46","#064e3b"],blue:["#dbeafe","#bfdbfe","#93c5fd","#60a5fa","#3b82f6","#2563eb","#1d4ed8","#1e40af","#1e3a8a"],info:["#d1e9ff","#c5e1f5","#b3d7f4","#a1c9f2","#8fb3f0","#79a8ee","#6897e8","#598ae4","#4a7ae0"],pink:["#ffd7e6","#ffc5c5","#ffb6c1","#ffa2a2","#ff99a2","#ff8c8c","#ff7a7a","#ff6666","#ff5555"],warning:["#ffffe6","#ffffd2","#ffffc2","#ffffb3","#ffffa1","#ffff8f","#ffff7a","#ffff66","#ffff55"],slate:["#e2e8f0","#d1d5db","#b8c2cc","#9ea7b3","#85929e","#768696","#677a8f","#577d8a","#4784a2"],gray:["#f9f9f9","#e5e5e5","#d3d3d3","#c2c2c2","#b1b1b1","#a0a0a0","#8f8f8f","#7f7f7f","#6f6f6f"],violet:["#c7b8ea","#b57be8","#a855e3","#944ce5","#7f4ae5","#6c3ae5","#5939e5","#4f2de5","#4518e5"]}).reduce(((e,[t,o])=>(o.forEach(((o,r)=>{const i=100*(r+1);e[`border-${t}-${i}`]={borderColor:o},e[`text-${t}-${i}`]={color:o},e[`bg-${t}-${i}`]={backgroundColor:o}})),e)),{})};e.get("screen"),e.get("window");const a=e=>e.reduce(((e,t)=>{let o;const r=t.match(/^([\w-]+)\[(.+)\]$/),i=t.match(/^font-\[(.*?)\]$/),d=t.match(/^(w|h)-\[[^\]]+\]-(screen|window)$/);if(i){const t=i[1];return{...e,fontFamily:t||"sans-serif"}}if(d){const e=d[1],t=d[0].match(/\[([^\]]+)\]/)[1],r=d[2];"w"!==e&&"h"!==e||"screen"!==r&&"window"!==r||(t.split(/[/\*\-]/).map(Number),o={width:180})}else o=n[t];if(r){const e=r[1],t=r[2],i=isNaN(Number(t))?t:Number(t);if("bg-"===e)o={backgroundColor:t};else if("text-"===e)o={color:t};else if("w-"===e)o={width:isNaN(Number(t))?t:Number(t)};else if("h-"===e)o={height:isNaN(Number(t))?t:Number(t)};else if("minW-"===e)o={minWidth:Number(t)};else if("maxW-"===e)o={maxWidth:Number(t)};else if("minH-"===e)o={minHeight:Number(t)};else if("maxH-"===e)o={maxHeight:Number(t)};else if("font-"===e)o={fontSize:Number(t)};else if("border-"===e)o={borderWidth:Number(t)};else if("border-color-"===e)o={borderColor:t};else if("borderOpacity-"===e)o={borderColor:`rgba(0,0,0,${Number(t)})`};else if("borderTop-"===e)o={borderTopWidth:Number(t)};else if("borderBottom-"===e)o={borderBottomWidth:Number(t)};else if("borderLeft-"===e)o={borderLeftWidth:Number(t)};else if("borderRight-"===e)o={borderRightWidth:Number(t)};else if("rounded-"===e)o={borderRadius:Number(t)};else if("m-"===e)o={margin:i};else if("mt-"===e)o={marginTop:i};else if("mb-"===e)o={marginBottom:i};else if("ml-"===e)o={marginLeft:i};else if("mr-"===e)o={marginRight:i};else if("my-"===e)o={marginTop:i,marginBottom:i};else if("mx-"===e)o={marginLeft:i,marginRight:i};else if("p-"===e)o={padding:i};else if("pt-"===e)o={paddingTop:i};else if("pb-"===e)o={paddingBottom:i};else if("pl-"===e)o={paddingLeft:i};else if("pr-"===e)o={paddingRight:i};else if("py-"===e)o={paddingTop:i,paddingBottom:i};else if("px-"===e)o={paddingLeft:i,paddingRight:i};else if("top-"===e)o={top:Number(t)};else if("right-"===e)o={right:Number(t)};else if("bottom-"===e)o={bottom:Number(t)};else if("vertical-"===e)o={verticalAlign:t};else if("left-"===e)o={left:Number(t)};else if("opacity-"===e)o={opacity:Number(t)/100};else if("gap-"===e)o={gap:Number(t)};else if("col-gap-"===e)o={columnGap:isNaN(Number(t))?t:Number(t)};else if("row-gap-"===e)o={rowGap:isNaN(Number(t))?t:Number(t)};else if("elevation-"===e)o={elevation:Number(t)};else if("flex-"===e)o={flex:Number(t)};else if(isNaN(Number(t))){const r=n[e];"function"==typeof r&&(o=r(t))}else{const r=n[e];"function"==typeof r&&(o=r(Number(t)))}}else o=n[t];return o?{...e,...o}:e}),{}),f=e=>e.map((e=>{const t=n[e];return t||{}})),l=e=>e.reduce(((e,t)=>{let o;const r=t.match(/^([\w-]+)\[(.+)\]$/);if(r){const e=r[1],t=r[2];if(e in n){const r=n[e];"function"==typeof r&&(o=r(isNaN(Number(t))?t:Number(t)))}}else o=n[t];return o?{...e,...o}:e}),{});export{f as getStyles,n as stylesMap,l as testingNative,a as useNativeStyleX};
//# sourceMappingURL=index.esm.js.map