fluent-styles 1.62.10 → 1.62.12

package/lib/commonjs/page/index.js

@@ -14,7 +14,7 @@ const Page = ({
   children,
   statusBarProps,
   showStatusBar = true,
-  statusBarStyle,
+  statusBarStyle = 'dark-content',
   statusBarBackgroundColor,
   hideStatusBarOnAndroid,
   hideStatusBarOnIOS,

package/lib/commonjs/page/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_index","_reactNative","_index2","_jsxRuntime","e","__esModule","default","Page","children","statusBarProps","showStatusBar","statusBarStyle","statusBarBackgroundColor","hideStatusBarOnAndroid","hideStatusBarOnIOS","translucentStatusBar","props","jsxs","StyledSafeAreaView","jsx","StatusBar","hidden","barStyle","backgroundColor","translucent","StyledPage","exports","Header","StyledHeader","displayName"],"sourceRoot":"../../../src","sources":["page/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBzC,MAAMG,IAAI,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,cAAc;EAAEC,aAAa,GAAG,IAAI;EAAEC,cAAc;EAAEC,wBAAwB;EAAEC,sBAAsB;EAAEC,kBAAkB;EAAEC,oBAAoB;EAAE,GAAGC;AAAgD,CAAC,KAAK;EACjO,oBACI,IAAAb,WAAA,CAAAc,IAAA,EAACjB,MAAA,CAAAkB,kBAAkB;IAAA,GAAKF,KAAK;IAAAR,QAAA,GACxBE,aAAa,iBAAI,IAAAP,WAAA,CAAAgB,GAAA,EAAClB,YAAA,CAAAmB,SAAS;MAACC,MAAM,EAAER,sBAAsB,IAAIC,kBAAmB;MAACQ,QAAQ,EAAEX,cAAe;MAACY,eAAe,EAAEX,wBAAyB;MAACY,WAAW,EAAET,oBAAqB;MAAA,GAAKN;IAAc,CAAG,CAAC,EAChND,QAAQ;EAAA,CACO,CAAC;AAE7B,CAAC;AAED,MAAMiB,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAGlB,IAAsB;AAEzCkB,UAAU,CAACE,MAAM,GAAGC,oBAAY;AAChCH,UAAU,CAACI,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_index","_reactNative","_index2","_jsxRuntime","e","__esModule","default","Page","children","statusBarProps","showStatusBar","statusBarStyle","statusBarBackgroundColor","hideStatusBarOnAndroid","hideStatusBarOnIOS","translucentStatusBar","props","jsxs","StyledSafeAreaView","jsx","StatusBar","hidden","barStyle","backgroundColor","translucent","StyledPage","exports","Header","StyledHeader","displayName"],"sourceRoot":"../../../src","sources":["page/index.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAkBzC,MAAMG,IAAI,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,cAAc;EAAEC,aAAa,GAAG,IAAI;EAAEC,cAAc,GAAG,cAAc;EAAEC,wBAAwB;EAAEC,sBAAsB;EAAEC,kBAAkB;EAAEC,oBAAoB;EAAE,GAAGC;AAAgD,CAAC,KAAK;EAClP,oBACI,IAAAb,WAAA,CAAAc,IAAA,EAACjB,MAAA,CAAAkB,kBAAkB;IAAA,GAAKF,KAAK;IAAAR,QAAA,GACxBE,aAAa,iBAAI,IAAAP,WAAA,CAAAgB,GAAA,EAAClB,YAAA,CAAAmB,SAAS;MAACC,MAAM,EAAER,sBAAsB,IAAIC,kBAAmB;MAACQ,QAAQ,EAAEX,cAAe;MAACY,eAAe,EAAEX,wBAAyB;MAACY,WAAW,EAAET,oBAAqB;MAAA,GAAKN;IAAc,CAAG,CAAC,EAChND,QAAQ;EAAA,CACO,CAAC;AAE7B,CAAC;AAED,MAAMiB,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAGlB,IAAsB;AAEzCkB,UAAU,CAACE,MAAM,GAAGC,oBAAY;AAChCH,UAAU,CAACI,WAAW,GAAG,YAAY","ignoreList":[]}

package/lib/commonjs/stack/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.YStack = exports.XStack = exports.Stack = void 0;
 var _reactNative = require("react-native");
 var _styled = require("../utiles/styled.js");
+var _viewStyleVariants = require("../utiles/viewStyleVariants.js");
 /**
  * Stack-specific layout variants for flex direction
  * Supports dual-level customization:
@@ -23,6 +24,8 @@ const Stack = exports.Stack = (0, _styled.styled)(_reactNative.View, {
     position: 'relative'
   },
   variants: {
+    ..._viewStyleVariants.viewStyleVariants,
+    ..._viewStyleVariants.viewStyleStringVariants,
     vertical: {
       true: {
         flexDirection: 'column'
@@ -41,12 +44,20 @@ const XStack = exports.XStack = (0, _styled.styled)(_reactNative.View, {
   base: {
     position: 'relative',
     flexDirection: 'row'
+  },
+  variants: {
+    ..._viewStyleVariants.viewStyleVariants,
+    ..._viewStyleVariants.viewStyleStringVariants
   }
 });
 const YStack = exports.YStack = (0, _styled.styled)(_reactNative.View, {
   base: {
     position: 'relative',
     flexDirection: 'column'
+  },
+  variants: {
+    ..._viewStyleVariants.viewStyleVariants,
+    ..._viewStyleVariants.viewStyleStringVariants
   }
 });
 //# sourceMappingURL=index.js.map

package/lib/commonjs/stack/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_styled","Stack","exports","styled","View","base","position","variants","vertical","true","flexDirection","false","horizontal","XStack","YStack"],"sourceRoot":"../../../src","sources":["stack/index.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA,MAAME,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,IAAAE,cAAM,EAAaC,iBAAI,EAAE;EACnCC,IAAI,EAAE;IACFC,QAAQ,EAAE;EACd,CAAc;EACdC,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ,CAAC;IACDC,UAAU,EAAE;MACRH,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ;EACJ;AACJ,CAAC,CAAC;AAEF,MAAME,MAAM,GAAAX,OAAA,CAAAW,MAAA,GAAG,IAAAV,cAAM,EAA8CC,iBAAI,EAAE;EACrEC,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBI,aAAa,EAAE;EACpB;AACJ,CAAC,CAAC;AAEF,MAAMI,MAAM,GAAAZ,OAAA,CAAAY,MAAA,GAAG,IAAAX,cAAM,EAA8CC,iBAAI,EAAE;EACrEC,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBI,aAAa,EAAE;EACpB;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_styled","_viewStyleVariants","Stack","exports","styled","View","base","position","variants","viewStyleVariants","viewStyleStringVariants","vertical","true","flexDirection","false","horizontal","XStack","YStack"],"sourceRoot":"../../../src","sources":["stack/index.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,kBAAA,GAAAF,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA,MAAMG,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,IAAAE,cAAM,EAAaC,iBAAI,EAAE;EACnCC,IAAI,EAAE;IACFC,QAAQ,EAAE;EACd,CAAc;EACdC,QAAQ,EAAE;IACN,GAAGC,oCAAiB;IACpB,GAAGC,0CAAuB;IAC1BC,QAAQ,EAAE;MACNC,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ,CAAC;IACDC,UAAU,EAAE;MACRH,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ;EACJ;AACJ,CAAC,CAAC;AAEF,MAAME,MAAM,GAAAb,OAAA,CAAAa,MAAA,GAAG,IAAAZ,cAAM,EAA8CC,iBAAI,EAAE;EACrEC,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBM,aAAa,EAAE;EACpB,CAAc;EACdL,QAAQ,EAAE;IACN,GAAGC,oCAAiB;IACpB,GAAGC;EACP;AACJ,CAAC,CAAC;AAEF,MAAMO,MAAM,GAAAd,OAAA,CAAAc,MAAA,GAAG,IAAAb,cAAM,EAA8CC,iBAAI,EAAE;EACrEC,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBM,aAAa,EAAE;EACpB,CAAc;EACdL,QAAQ,EAAE;IACN,GAAGC,oCAAiB;IACpB,GAAGC;EACP;AACJ,CAAC,CAAC","ignoreList":[]}

package/lib/module/page/index.js

@@ -9,7 +9,7 @@ const Page = ({
   children,
   statusBarProps,
   showStatusBar = true,
-  statusBarStyle,
+  statusBarStyle = 'dark-content',
   statusBarBackgroundColor,
   hideStatusBarOnAndroid,
   hideStatusBarOnIOS,

package/lib/module/page/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyledSafeAreaView","StatusBar","StyledHeader","jsx","_jsx","jsxs","_jsxs","Page","children","statusBarProps","showStatusBar","statusBarStyle","statusBarBackgroundColor","hideStatusBarOnAndroid","hideStatusBarOnIOS","translucentStatusBar","props","hidden","barStyle","backgroundColor","translucent","StyledPage","Header","displayName"],"sourceRoot":"../../../src","sources":["page/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAiC,0BAAiB;AAC7E,SAASC,SAAS,QAAwB,cAAc;AACxD,SAASC,YAAY,QAAQ,oBAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAkBzC,MAAMC,IAAI,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,cAAc;EAAEC,aAAa,GAAG,IAAI;EAAEC,cAAc;EAAEC,wBAAwB;EAAEC,sBAAsB;EAAEC,kBAAkB;EAAEC,oBAAoB;EAAE,GAAGC;AAAgD,CAAC,KAAK;EACjO,oBACIV,KAAA,CAACN,kBAAkB;IAAA,GAAKgB,KAAK;IAAAR,QAAA,GACxBE,aAAa,iBAAIN,IAAA,CAACH,SAAS;MAACgB,MAAM,EAAEJ,sBAAsB,IAAIC,kBAAmB;MAACI,QAAQ,EAAEP,cAAe;MAACQ,eAAe,EAAEP,wBAAyB;MAACQ,WAAW,EAAEL,oBAAqB;MAAA,GAAKN;IAAc,CAAG,CAAC,EAChND,QAAQ;EAAA,CACO,CAAC;AAE7B,CAAC;AAED,MAAMa,UAAU,GAAGd,IAAsB;AAEzCc,UAAU,CAACC,MAAM,GAAGpB,YAAY;AAChCmB,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,SAASF,UAAU","ignoreList":[]}
+{"version":3,"names":["React","StyledSafeAreaView","StatusBar","StyledHeader","jsx","_jsx","jsxs","_jsxs","Page","children","statusBarProps","showStatusBar","statusBarStyle","statusBarBackgroundColor","hideStatusBarOnAndroid","hideStatusBarOnIOS","translucentStatusBar","props","hidden","barStyle","backgroundColor","translucent","StyledPage","Header","displayName"],"sourceRoot":"../../../src","sources":["page/index.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,kBAAkB,QAAiC,0BAAiB;AAC7E,SAASC,SAAS,QAAwB,cAAc;AACxD,SAASC,YAAY,QAAQ,oBAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAkBzC,MAAMC,IAAI,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,cAAc;EAAEC,aAAa,GAAG,IAAI;EAAEC,cAAc,GAAG,cAAc;EAAEC,wBAAwB;EAAEC,sBAAsB;EAAEC,kBAAkB;EAAEC,oBAAoB;EAAE,GAAGC;AAAgD,CAAC,KAAK;EAClP,oBACIV,KAAA,CAACN,kBAAkB;IAAA,GAAKgB,KAAK;IAAAR,QAAA,GACxBE,aAAa,iBAAIN,IAAA,CAACH,SAAS;MAACgB,MAAM,EAAEJ,sBAAsB,IAAIC,kBAAmB;MAACI,QAAQ,EAAEP,cAAe;MAACQ,eAAe,EAAEP,wBAAyB;MAACQ,WAAW,EAAEL,oBAAqB;MAAA,GAAKN;IAAc,CAAG,CAAC,EAChND,QAAQ;EAAA,CACO,CAAC;AAE7B,CAAC;AAED,MAAMa,UAAU,GAAGd,IAAsB;AAEzCc,UAAU,CAACC,MAAM,GAAGpB,YAAY;AAChCmB,UAAU,CAACE,WAAW,GAAG,YAAY;AAErC,SAASF,UAAU","ignoreList":[]}

package/lib/module/stack/index.js

@@ -2,6 +2,7 @@
 
 import { View } from 'react-native';
 import { styled } from "../utiles/styled.js";
+import { viewStyleVariants, viewStyleStringVariants } from "../utiles/viewStyleVariants.js";
 
 /**
  * Stack-specific layout variants for flex direction
@@ -20,6 +21,8 @@ const Stack = styled(View, {
     position: 'relative'
   },
   variants: {
+    ...viewStyleVariants,
+    ...viewStyleStringVariants,
     vertical: {
       true: {
         flexDirection: 'column'
@@ -38,12 +41,20 @@ const XStack = styled(View, {
   base: {
     position: 'relative',
     flexDirection: 'row'
+  },
+  variants: {
+    ...viewStyleVariants,
+    ...viewStyleStringVariants
   }
 });
 const YStack = styled(View, {
   base: {
     position: 'relative',
     flexDirection: 'column'
+  },
+  variants: {
+    ...viewStyleVariants,
+    ...viewStyleStringVariants
   }
 });
 export { Stack, XStack, YStack };

package/lib/module/stack/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["View","styled","Stack","base","position","variants","vertical","true","flexDirection","false","horizontal","XStack","YStack"],"sourceRoot":"../../../src","sources":["stack/index.ts"],"mappings":";;AACA,SAASA,IAAI,QAA8B,cAAc;AACzD,SAASC,MAAM,QAAQ,qBAAkB;;AAEzC;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,GAAGD,MAAM,CAAaD,IAAI,EAAE;EACnCG,IAAI,EAAE;IACFC,QAAQ,EAAE;EACd,CAAc;EACdC,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ,CAAC;IACDC,UAAU,EAAE;MACRH,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ;EACJ;AACJ,CAAC,CAAC;AAEF,MAAME,MAAM,GAAGV,MAAM,CAA8CD,IAAI,EAAE;EACrEG,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBI,aAAa,EAAE;EACpB;AACJ,CAAC,CAAC;AAEF,MAAMI,MAAM,GAAGX,MAAM,CAA8CD,IAAI,EAAE;EACrEG,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBI,aAAa,EAAE;EACpB;AACJ,CAAC,CAAC;AAEF,SAAUN,KAAK,EAAES,MAAM,EAAEC,MAAM","ignoreList":[]}
+{"version":3,"names":["View","styled","viewStyleVariants","viewStyleStringVariants","Stack","base","position","variants","vertical","true","flexDirection","false","horizontal","XStack","YStack"],"sourceRoot":"../../../src","sources":["stack/index.ts"],"mappings":";;AACA,SAASA,IAAI,QAA8B,cAAc;AACzD,SAASC,MAAM,QAAQ,qBAAkB;AACzC,SAASC,iBAAiB,EAAEC,uBAAuB,QAAQ,gCAA6B;;AAExF;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,GAAGH,MAAM,CAAaD,IAAI,EAAE;EACnCK,IAAI,EAAE;IACFC,QAAQ,EAAE;EACd,CAAc;EACdC,QAAQ,EAAE;IACN,GAAGL,iBAAiB;IACpB,GAAGC,uBAAuB;IAC1BK,QAAQ,EAAE;MACNC,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ,CAAC;IACDC,UAAU,EAAE;MACRH,IAAI,EAAE;QACFC,aAAa,EAAE;MACnB,CAAc;MACdC,KAAK,EAAE,CAAC;IACZ;EACJ;AACJ,CAAC,CAAC;AAEF,MAAME,MAAM,GAAGZ,MAAM,CAA8CD,IAAI,EAAE;EACrEK,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBI,aAAa,EAAE;EACpB,CAAc;EACdH,QAAQ,EAAE;IACN,GAAGL,iBAAiB;IACpB,GAAGC;EACP;AACJ,CAAC,CAAC;AAEF,MAAMW,MAAM,GAAGb,MAAM,CAA8CD,IAAI,EAAE;EACrEK,IAAI,EAAE;IACFC,QAAQ,EAAE,UAAU;IACnBI,aAAa,EAAE;EACpB,CAAc;EACdH,QAAQ,EAAE;IACN,GAAGL,iBAAiB;IACpB,GAAGC;EACP;AACJ,CAAC,CAAC;AAEF,SAAUC,KAAK,EAAES,MAAM,EAAEC,MAAM","ignoreList":[]}

package/lib/typescript/stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stack/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D;;;;;GAKG;AACH,KAAK,aAAa,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;CAC7C,CAAC;AAEF,KAAK,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAExD;;;;GAIG;AACH,QAAA,MAAM,KAAK;;;;;CAkBT,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;CAKV,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;CAKV,CAAC;AAEH,OAAO,EAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stack/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI1D;;;;;GAKG;AACH,KAAK,aAAa,GAAG;IACjB,UAAU,CAAC,EAAE,OAAO,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;CAC7C,CAAC;AAEF,KAAK,UAAU,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,CAAC;AAExD;;;;GAIG;AACH,QAAA,MAAM,KAAK;;;;;CAoBT,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;CASV,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;CASV,CAAC;AAEH,OAAO,EAAG,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fluent-styles",
   "description": "Develop different styled versions of UI components.",
-  "version": "1.62.10",
+  "version": "1.62.12",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/page/index.tsx

@@ -19,7 +19,7 @@ interface StyledPageType {
     displayName?: string;
 }
 
-const Page = ({ children, statusBarProps, showStatusBar = true, statusBarStyle, statusBarBackgroundColor, hideStatusBarOnAndroid, hideStatusBarOnIOS, translucentStatusBar, ...props }: React.PropsWithChildren<StyledPageProps>) => {
+const Page = ({ children, statusBarProps, showStatusBar = true, statusBarStyle = 'dark-content', statusBarBackgroundColor, hideStatusBarOnAndroid, hideStatusBarOnIOS, translucentStatusBar, ...props }: React.PropsWithChildren<StyledPageProps>) => {
     return (
         <StyledSafeAreaView {...props}>
             {showStatusBar && <StatusBar hidden={hideStatusBarOnAndroid || hideStatusBarOnIOS} barStyle={statusBarStyle} backgroundColor={statusBarBackgroundColor} translucent={translucentStatusBar} {...statusBarProps} />}

package/src/stack/index.ts

@@ -1,6 +1,7 @@
 
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { styled } from '../utiles/styled';
+import { viewStyleVariants, viewStyleStringVariants } from '../utiles/viewStyleVariants';
 
 /**
  * Stack-specific layout variants for flex direction
@@ -25,6 +26,8 @@ const Stack = styled<StackProps>(View, {
         position: 'relative',
     } as ViewStyle,
     variants: {
+        ...viewStyleVariants,
+        ...viewStyleStringVariants,
         vertical: {
             true: {
                 flexDirection: 'column',
@@ -44,14 +47,22 @@ const XStack = styled<Omit<StackProps, 'vertical' | 'horizontal'>>(View, {
     base: {
         position: 'relative',
          flexDirection: 'row',
-    } as ViewStyle
+    } as ViewStyle,
+    variants: {
+        ...viewStyleVariants,
+        ...viewStyleStringVariants,
+    } as any
 });
 
 const YStack = styled<Omit<StackProps, 'vertical' | 'horizontal'>>(View, {
     base: {
         position: 'relative',
          flexDirection: 'column',
-    } as ViewStyle
+    } as ViewStyle,
+    variants: {
+        ...viewStyleVariants,
+        ...viewStyleStringVariants,
+    } as any
 });
 
 export {  Stack, XStack, YStack };