native-variants/dist/example.js

A library for handling variants in React Native components with theme support.

import{createNVA}from"./lib/create-nva.js";const{styled,theme,utils}=createNVA({theme:{colors:{default:{primary:"#3b82f6",background:"#ffffff",foreground:"#000000"},dark:{primary:"#60a5fa",background:"#000000",foreground:"#ffffff"}}},utils:{mx:value=>({marginLeft:value,marginRight:value}),my:value=>({marginTop:value,marginBottom:value}),px:value=>({paddingLeft:value,paddingRight:value}),py:value=>({paddingTop:value,paddingBottom:value}),size:value=>({width:value,height:value}),brd:value=>({borderWidth:value,borderStyle:"solid"})}});const buttonVariants=styled((ctx,t)=>ctx({slots:["root","text"],base:{root:{backgroundColor:t.colors.primary,px:16,py:12,borderRadius:t.radii.lg},text:{color:t.colors.background,fontSize:t.fontSizes.base}},variants:{size:{sm:{root:{px:12,py:8},text:{fontSize:t.fontSizes.sm}},lg:{root:{px:24,py:16},text:{fontSize:t.fontSizes.lg}}},square:{true:{root:{size:48,px:0,py:0}}}},compoundVariants:[{size:"lg",square:true,css:{root:{size:64}}}]}));const styles=buttonVariants({size:"lg"});console.log(styles.root);const squareStyles=buttonVariants({square:true});console.log(squareStyles.root);const combined=buttonVariants({size:"sm",square:false});console.log(combined.root);console.log(theme.colors.primary);console.log(theme.colors.blue500);console.log(theme.spacing["4"]);console.log(theme.fontSizes.lg);console.log(utils.mx(10));