react-native-unistyles 1.0.0-beta.6 → 1.0.0-rc.2

package/lib/commonjs/utils/index.js

@@ -3,12 +3,54 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "extractValues", {
+  enumerable: true,
+  get: function () {
+    return _mediaQueries.extractValues;
+  }
+});
 Object.defineProperty(exports, "getBreakpointFromScreenWidth", {
   enumerable: true,
   get: function () {
     return _breakpoints.getBreakpointFromScreenWidth;
   }
 });
+Object.defineProperty(exports, "getKeyForCustomMediaQuery", {
+  enumerable: true,
+  get: function () {
+    return _mediaQueries.getKeyForCustomMediaQuery;
+  }
+});
+Object.defineProperty(exports, "getValueForBreakpoint", {
+  enumerable: true,
+  get: function () {
+    return _breakpoints.getValueForBreakpoint;
+  }
+});
+Object.defineProperty(exports, "isMediaQuery", {
+  enumerable: true,
+  get: function () {
+    return _mediaQueries.isMediaQuery;
+  }
+});
+Object.defineProperty(exports, "isWithinTheHeight", {
+  enumerable: true,
+  get: function () {
+    return _mediaQueries.isWithinTheHeight;
+  }
+});
+Object.defineProperty(exports, "isWithinTheWidth", {
+  enumerable: true,
+  get: function () {
+    return _mediaQueries.isWithinTheWidth;
+  }
+});
+Object.defineProperty(exports, "isWithinTheWidthAndHeight", {
+  enumerable: true,
+  get: function () {
+    return _mediaQueries.isWithinTheWidthAndHeight;
+  }
+});
 Object.defineProperty(exports, "normalizeStyles", {
   enumerable: true,
   get: function () {
@@ -36,4 +78,5 @@ Object.defineProperty(exports, "sortAndValidateBreakpoints", {
 var _normalizeStyles = require("./normalizeStyles");
 var _breakpoints = require("./breakpoints");
 var _styles = require("./styles");
+var _mediaQueries = require("./mediaQueries");
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_normalizeStyles","require","_breakpoints","_styles"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA"}
+{"version":3,"names":["_normalizeStyles","require","_breakpoints","_styles","_mediaQueries"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA"}

package/lib/module/createUnistyles.js

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { UnistylesContext } from './UnistylesTheme';
 import { useDimensions } from './hooks';
@@ -7,15 +7,6 @@ export const createUnistyles = breakpoints => {
   const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
   const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
   return {
-    /**
-     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
-     */
-    createStyles: styles => {
-      if (typeof styles === 'function') {
-        return styles;
-      }
-      return styles;
-    },
     createStyleSheet: styles => {
       if (typeof styles === 'function') {
         return styles;
@@ -25,15 +16,16 @@ export const createUnistyles = breakpoints => {
     useStyles: stylesheet => {
       const theme = useContext(UnistylesContext);
       const screenSize = useDimensions();
+      const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
       if (!stylesheet) {
         return {
           theme,
+          breakpoint,
           styles: {}
         };
       }
-      const parsedStyles = typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet;
-      const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
-      const dynamicStyleSheet = Object.entries(parsedStyles).reduce((acc, _ref) => {
+      const parsedStyles = useMemo(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
+      const dynamicStyleSheet = useMemo(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
         let [key, value] = _ref;
         const style = value;
         if (typeof value === 'function') {
@@ -46,9 +38,10 @@ export const createUnistyles = breakpoints => {
           ...acc,
           [key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
         });
-      }, {});
+      }, {}), [breakpoint, screenSize, parsedStyles]);
       return {
         theme,
+        breakpoint,
         styles: dynamicStyleSheet
       };
     }

package/lib/module/createUnistyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","screenSize","parsedStyles","breakpoint","width","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACH;AACR;AACA;IACQI,YAAY,EAAyCC,MAAqF,IAAY;MAClJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,gBAAgB,EAAyCD,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDE,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACE,gBAAgB,CAAM;MAC/C,MAAMkB,UAAU,GAAGjB,aAAa,CAAC,CAAC;MAElC,IAAI,CAACe,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMM,YAAY,GAAG,OAAOH,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAChB,MAAMI,UAAU,GAAGlB,4BAA4B,CAAIgB,UAAU,CAACG,KAAK,EAAEZ,uBAAuB,CAAC;MAE7F,MAAMa,iBAAiB,GAAGZ,MAAM,CAC3BC,OAAO,CAACQ,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGvB,eAAe,CAAIwB,KAAK,EAAEP,UAAU,EAAEF,UAAU,EAAET,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC8B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGtB,UAAU,CAAQwB,KAAK,EAAER,UAAU,EAAEF,UAAU,EAAET,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHQ,KAAK;QACLJ,MAAM,EAAES;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
+{"version":3,"names":["useContext","useMemo","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","breakpoint","width","parsedStyles","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACHI,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACG,gBAAgB,CAAM;MAC/C,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;MAClC,MAAMiB,UAAU,GAAGhB,4BAA4B,CAAIe,UAAU,CAACE,KAAK,EAAEV,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLE,UAAU;UACVL,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMO,YAAY,GAAGtB,OAAO,CAAC,MAAM,OAAOiB,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMM,iBAAiB,GAAGvB,OAAO,CAAC,MAAMY,MAAM,CACzCC,OAAO,CAACS,YAAY,CAAC,CACrBE,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGtB,eAAe,CAAIuB,KAAK,EAAER,UAAU,EAAED,UAAU,EAAER,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC6B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGrB,UAAU,CAAQuB,KAAK,EAAET,UAAU,EAAED,UAAU,EAAER,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACS,UAAU,EAAED,UAAU,EAAEG,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHJ,KAAK;QACLE,UAAU;QACVL,MAAM,EAAEQ;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}

package/lib/module/hooks/useDimensions.js

@@ -1,12 +1,3 @@
 import { useWindowDimensions } from 'react-native';
-export const useDimensions = () => {
-  const {
-    width,
-    height
-  } = useWindowDimensions();
-  return {
-    width,
-    height
-  };
-};
+export const useDimensions = () => useWindowDimensions();
 //# sourceMappingURL=useDimensions.js.map

package/lib/module/hooks/useDimensions.js.map

@@ -1 +1 @@
-{"version":3,"names":["useWindowDimensions","useDimensions","width","height"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAGlD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,mBAAmB,CAAC,CAAC;EAE/C,OAAO;IACHE,KAAK;IACLC;EACJ,CAAC;AACL,CAAC"}
+{"version":3,"names":["useWindowDimensions","useDimensions"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAGlD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkBD,mBAAmB,CAAC,CAAC"}

package/lib/module/utils/index.js

@@ -1,4 +1,5 @@
 export { normalizeStyles } from './normalizeStyles';
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
+export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["normalizeStyles","getBreakpointFromScreenWidth","sortAndValidateBreakpoints","proxifyFunction","parseStyle"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,4BAA4B,EAAEC,0BAA0B,QAAQ,eAAe;AACxF,SAASC,eAAe,EAAEC,UAAU,QAAQ,UAAU"}
+{"version":3,"names":["normalizeStyles","getBreakpointFromScreenWidth","sortAndValidateBreakpoints","getValueForBreakpoint","proxifyFunction","parseStyle","extractValues","getKeyForCustomMediaQuery","isMediaQuery","isWithinTheHeight","isWithinTheWidth","isWithinTheWidthAndHeight"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,4BAA4B,EAAEC,0BAA0B,EAAEC,qBAAqB,QAAQ,eAAe;AAC/G,SAASC,eAAe,EAAEC,UAAU,QAAQ,UAAU;AACtD,SACIC,aAAa,EACbC,yBAAyB,EACzBC,YAAY,EACZC,iBAAiB,EACjBC,gBAAgB,EAChBC,yBAAyB,QACtB,gBAAgB"}

package/lib/typescript/src/createUnistyles.d.ts

@@ -1,12 +1,9 @@
 import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
 export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
-    /**
-     * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
-     */
-    createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
-    createStyleSheet: <S_1 extends CustomNamedStyles<S_1, B>, X_1>(styles: S_1 | X_1 | CustomNamedStyles<S_1, B> | ((theme: T) => X_1 | CustomNamedStyles<X_1, B>)) => S_1 | X_1;
+    createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
     useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
         theme: T;
+        breakpoint: keyof B & string;
         styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
     };
 };

package/lib/typescript/src/createUnistyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;IAMpB;;OAEG;;;;;;;CAuDV,CAAA"}
+{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;;;;;;;CAuD3B,CAAA"}

package/lib/typescript/src/hooks/useDimensions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDimensions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UAOhC,CAAA"}
+{"version":3,"file":"useDimensions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UAAmC,CAAA"}

package/lib/typescript/src/types/mediaQueries.d.ts

@@ -1,2 +1,8 @@
-export type MediaQueries = `:w[${bigint}]` | `:w[,${bigint}]` | `:w[, ${bigint}]` | `:w[${bigint},${bigint}]` | `:w[${bigint}, ${bigint}]` | `:h[${bigint}]` | `:h[,${bigint}]` | `:h[, ${bigint}]` | `:h[${bigint},${bigint}]` | `:h[${bigint}, ${bigint}]` | `:w[${bigint}]:h[${bigint}]` | `:w[${bigint},${bigint}]:h[${bigint}]` | `:w[${bigint}, ${bigint}]:h[${bigint}]` | `:w[${bigint}]:h[${bigint},${bigint}]` | `:w[${bigint}]:h[${bigint}, ${bigint}]` | `:w[${bigint},${bigint}]:h[${bigint},${bigint}]` | `:w[${bigint}, ${bigint}]:h[${bigint},${bigint}]` | `:w[${bigint},${bigint}]:h[${bigint}, ${bigint}]` | `:w[${bigint}, ${bigint}]:h[${bigint}, ${bigint}]` | `:w[,${bigint}]:h[,${bigint}]` | `:w[, ${bigint}]:h[,${bigint}]` | `:w[,${bigint}]:h[, ${bigint}]` | `:w[, ${bigint}]:h[, ${bigint}]` | `:w[,${bigint}]:h[${bigint}]` | `:w[, ${bigint}]:h[${bigint}]` | `:w[${bigint}]:h[,${bigint}]` | `:w[${bigint}]:h[, ${bigint}]` | `:w[,${bigint}]:h[${bigint},${bigint}]` | `:w[, ${bigint}]:h[${bigint},${bigint}]` | `:w[,${bigint}]:h[${bigint}, ${bigint}]` | `:w[, ${bigint}]:h[${bigint}, ${bigint}]` | `:w[${bigint},${bigint}]:h[,${bigint}]` | `:w[${bigint}, ${bigint}]:h[,${bigint}]` | `:w[${bigint},${bigint}]:h[, ${bigint}]` | `:w[${bigint}, ${bigint}]:h[, ${bigint}]` | `:h[${bigint}]:w[${bigint}]` | `:h[${bigint},${bigint}]:w[${bigint}]` | `:h[${bigint}, ${bigint}]:w[${bigint}]` | `:h[${bigint}]:w[${bigint},${bigint}]` | `:h[${bigint}]:w[${bigint}, ${bigint}]` | `:h[${bigint},${bigint}]:w[${bigint},${bigint}]` | `:h[${bigint}, ${bigint}]:w[${bigint},${bigint}]` | `:h[${bigint},${bigint}]:w[${bigint}, ${bigint}]` | `:h[${bigint}, ${bigint}]:w[${bigint}, ${bigint}]` | `:h[,${bigint}]:w[,${bigint}]` | `:h[, ${bigint}]:w[,${bigint}]` | `:h[,${bigint}]:w[, ${bigint}]` | `:h[, ${bigint}]:w[, ${bigint}]` | `:h[,${bigint}]:w[${bigint}]` | `:h[, ${bigint}]:w[${bigint}]` | `:h[${bigint}]:w[,${bigint}]` | `:h[${bigint}]:w[, ${bigint}]` | `:h[,${bigint}]:w[${bigint},${bigint}]` | `:h[, ${bigint}]:w[${bigint},${bigint}]` | `:h[,${bigint}]:w[${bigint}, ${bigint}]` | `:h[, ${bigint}]:w[${bigint}, ${bigint}]` | `:h[${bigint},${bigint}]:w[,${bigint}]` | `:h[${bigint}, ${bigint}]:w[,${bigint}]` | `:h[${bigint},${bigint}]:w[, ${bigint}]` | `:h[${bigint}, ${bigint}]:w[, ${bigint}]`;
+type Optional<TOptional extends string> = TOptional | '';
+type Separator = ',' | ', ';
+type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`;
+type WidthMediaQuery = `:w${MediaQuery}`;
+type HeightMediaQuery = `:h${MediaQuery}`;
+export type MediaQueries = `${WidthMediaQuery}${Optional<HeightMediaQuery>}` | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`;
+export {};
 //# sourceMappingURL=mediaQueries.d.ts.map

package/lib/typescript/src/types/mediaQueries.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/types/mediaQueries.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/types/mediaQueries.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,CAAC,SAAS,SAAS,MAAM,IAAI,SAAS,GAAG,EAAE,CAAA;AACxD,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,CAAA;AAE3B,KAAK,UAAU,GAAG,IAAI,SAAS,GAAG,MAAM,GAAG,GAAG,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,SAAS,GAAG,MAAM,EAAE,CAAC,GAAG,CAAA;AAC/F,KAAK,eAAe,GAAG,KAAK,UAAU,EAAE,CAAA;AACxC,KAAK,gBAAgB,GAAG,KAAK,UAAU,EAAE,CAAA;AAEzC,MAAM,MAAM,YAAY,GAClB,GAAG,eAAe,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,GACjD,GAAG,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAA"}

package/lib/typescript/src/utils/index.d.ts

@@ -1,4 +1,5 @@
 export { normalizeStyles } from './normalizeStyles';
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints } from './breakpoints';
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
+export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-rc.2",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -9,7 +9,7 @@
     "clean": "del-cli lib",
     "prepare": "husky install && bob build",
     "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
-    "release": "release-it patch --preRelease=beta"
+    "release": "release-it patch --preRelease=rc"
   },
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -39,19 +39,19 @@
   },
   "devDependencies": {
     "@commitlint/config-conventional": "17.7.0",
-    "@evilmartians/lefthook": "1.5.0",
     "@react-native/eslint-config": "0.73.1",
     "@release-it/conventional-changelog": "5.1.1",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.5",
-    "@types/react": "18.2.24",
+    "@types/react": "18.2.28",
     "@types/react-native": "0.72.3",
-    "@typescript-eslint/eslint-plugin": "6.7.4",
-    "@typescript-eslint/eslint-plugin-tslint": "6.7.4",
-    "@typescript-eslint/parser": "6.7.4",
+    "@typescript-eslint/eslint-plugin": "6.7.5",
+    "@typescript-eslint/eslint-plugin-tslint": "6.7.5",
+    "@typescript-eslint/parser": "6.7.5",
     "commitlint": "17.7.2",
     "concurrently": "8.2.1",
     "del-cli": "5.1.0",
-    "eslint": "8.50.0",
+    "eslint": "8.51.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
     "eslint-plugin-import": "2.28.1",
@@ -67,8 +67,9 @@
     "jest": "29.7.0",
     "react": "18.2.0",
     "react-native": "0.72.5",
-    "react-native-builder-bob": "0.23.0",
+    "react-native-builder-bob": "0.23.1",
     "react-native-web": "0.19.9",
+    "react-test-renderer": "18.2.0",
     "release-it": "16.2.1",
     "typescript": "5.2.2"
   },
@@ -83,7 +84,8 @@
     }
   },
   "workspaces": [
-    "example"
+    "example",
+    "docs"
   ],
   "packageManager": "yarn@3.6.1",
   "engines": {
@@ -93,6 +95,7 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
+      "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
     ]
   },

package/src/__tests__/createUnistyles.spec.tsx

@@ -0,0 +1,192 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import type { ViewStyle } from 'react-native'
+import { renderHook } from '@testing-library/react-hooks'
+import { createUnistyles } from '../createUnistyles'
+import { UnistylesTheme } from '../UnistylesTheme'
+import type { CustomNamedStyles } from '../types'
+
+jest.mock('../hooks', () => ({
+    useDimensions: jest.fn(() => ({
+        width: 500,
+        height: 1000
+    }))
+}))
+
+describe('createUnistyles', () => {
+    describe('createStyleSheet', () => {
+        it('should work exactly the same like StyleSheet.create', () => {
+            const breakpoints = {
+                xs: 0
+            }
+            const { createStyleSheet } = createUnistyles(breakpoints)
+
+            const styles = {
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                },
+                text: {
+                    fontWeight: 'bold',
+                    fontSize: 32
+                }
+            } as const
+
+            expect(createStyleSheet(styles)).toEqual(StyleSheet.create(styles))
+        })
+
+        it('should inject the theme to the createStyleSheet', () => {
+            const theme = {
+                colors: {
+                    barbie: '#ff9ff3',
+                    oak: '#1dd1a1',
+                    sky: '#48dbfb',
+                    fog: '#c8d6e5',
+                    aloes: '#00d2d3'
+                }
+            }
+            const breakpoints = {
+                xs: 0
+            }
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
+            const stylesheet = createStyleSheet(theme => ({
+                container: {
+                    backgroundColor: theme.colors.barbie
+                }
+            }))
+            const { result } = renderHook(() => useStyles(stylesheet), {
+                // @ts-ignore
+                wrapper: ({ children }) => (
+                    <UnistylesTheme theme={theme}>
+                        {children}
+                    </UnistylesTheme>
+                )
+            })
+
+            expect(result.current.theme).toEqual(theme)
+            expect(result.current.styles).not.toBe(Function)
+            expect(result.current.styles.container.backgroundColor).toEqual(theme.colors.barbie)
+        })
+    })
+
+    describe('useStyles', () => {
+        it('should return empty object for optional stylesheet', () => {
+            const breakpoints = {
+                xs: 0
+            }
+            const { useStyles } = createUnistyles(breakpoints)
+            const { result } = renderHook(() => useStyles())
+
+            expect(result.current.styles).toEqual({})
+            expect(result.current.theme).toEqual({})
+        })
+
+        it ('should choose single value from breakpoints', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                md: 500,
+                lg: 1000
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        md: 'column'
+                    }
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet))
+
+            expect(result.current.styles.container.alignItems).toEqual('column')
+        })
+
+        it ('should choose single value from media queries', () => {
+            const breakpoints = {
+                xs: 0
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        ':w[300, 490]': 'column',
+                        ':w[491]': 'row'
+                    }
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.styles.container.alignItems).toEqual('row')
+        })
+
+        it ('should choose wrap dynamic functions in Proxy', () => {
+            const breakpoints = {
+                xs: 0
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: (flex: number) => ({
+                    flex,
+                    justifyContent: 'center',
+                    alignItems: {
+                        xs: 'row',
+                        ':w[300, 490]': 'column',
+                        ':w[491]': 'row'
+                    }
+                })
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.styles.container).toBeInstanceOf(Function)
+            expect((result.current.styles.container as (flex: number) => ViewStyle)(2)).toEqual({
+                flex: 2,
+                justifyContent: 'center',
+                alignItems: 'row'
+            })
+        })
+
+        it ('should return breakpoint even if no stylesheet has been provided', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                md: 500,
+                lg: 1000
+            }
+
+            const { useStyles } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const { result } = renderHook(() => useStyles())
+
+            expect(result.current.breakpoint).toEqual('md')
+        })
+
+        it ('should return breakpoint for stylesheet', () => {
+            const breakpoints = {
+                xs: 0,
+                sm: 200,
+                lg: 1000
+            }
+
+            const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
+            const stylesheet = createStyleSheet({
+                container: {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center'
+                }
+            })
+            const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
+
+            expect(result.current.breakpoint).toEqual('sm')
+        })
+    })
+})

package/src/createUnistyles.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react'
+import { useContext, useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import type {
     Breakpoints,
@@ -18,16 +18,6 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
         .entries(sortedBreakpoints) as SortedBreakpointEntries<B>
 
     return {
-        /**
-         * @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
-         */
-        createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
-            if (typeof styles === 'function') {
-                return styles as X
-            }
-
-            return styles as S
-        },
         createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
             if (typeof styles === 'function') {
                 return styles as X
@@ -38,20 +28,21 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
         useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
             const theme = useContext(UnistylesContext) as T
             const screenSize = useDimensions()
+            const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
 
             if (!stylesheet) {
                 return {
                     theme,
+                    breakpoint,
                     styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
                 }
             }
 
-            const parsedStyles = typeof stylesheet === 'function'
+            const parsedStyles = useMemo(() => typeof stylesheet === 'function'
                 ? stylesheet(theme)
-                : stylesheet
-            const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
+                : stylesheet, [theme, stylesheet])
 
-            const dynamicStyleSheet = Object
+            const dynamicStyleSheet = useMemo(() => Object
                 .entries(parsedStyles)
                 .reduce((acc, [key, value]) => {
                     const style = value as CustomNamedStyles<ST, B>
@@ -67,10 +58,11 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
                         ...acc,
                         [key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
                     })
-                }, {} as ST)
+                }, {} as ST), [breakpoint, screenSize, parsedStyles])
 
             return {
                 theme,
+                breakpoint,
                 styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
             }
         }

package/src/hooks/useDimensions.ts

@@ -1,11 +1,4 @@
 import { useWindowDimensions } from 'react-native'
 import type { ScreenSize } from '../types'
 
-export const useDimensions = (): ScreenSize => {
-    const { width, height } = useWindowDimensions()
-
-    return {
-        width,
-        height
-    }
-}
+export const useDimensions = (): ScreenSize => useWindowDimensions()

package/src/types/mediaQueries.ts

@@ -1,69 +1,10 @@
+type Optional<TOptional extends string> = TOptional | ''
+type Separator = ',' | ', '
 // this is super weird, but number passes empty string and bigint does not
-export type MediaQueries =
-// For :w
-`:w[${bigint}]` |
-`:w[,${bigint}]` |
-`:w[, ${bigint}]` |
-`:w[${bigint},${bigint}]` |
-`:w[${bigint}, ${bigint}]` |
-
-// For :h
-`:h[${bigint}]` |
-`:h[,${bigint}]` |
-`:h[, ${bigint}]` |
-`:h[${bigint},${bigint}]` |
-`:h[${bigint}, ${bigint}]` |
+type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
+type WidthMediaQuery = `:w${MediaQuery}`
+type HeightMediaQuery = `:h${MediaQuery}`
 
-// Combinations of :w and :h
-`:w[${bigint}]:h[${bigint}]` |
-`:w[${bigint},${bigint}]:h[${bigint}]` |
-`:w[${bigint}, ${bigint}]:h[${bigint}]` |
-`:w[${bigint}]:h[${bigint},${bigint}]` |
-`:w[${bigint}]:h[${bigint}, ${bigint}]` |
-`:w[${bigint},${bigint}]:h[${bigint},${bigint}]` |
-`:w[${bigint}, ${bigint}]:h[${bigint},${bigint}]` |
-`:w[${bigint},${bigint}]:h[${bigint}, ${bigint}]` |
-`:w[${bigint}, ${bigint}]:h[${bigint}, ${bigint}]` |
-`:w[,${bigint}]:h[,${bigint}]` |
-`:w[, ${bigint}]:h[,${bigint}]` |
-`:w[,${bigint}]:h[, ${bigint}]` |
-`:w[, ${bigint}]:h[, ${bigint}]` |
-`:w[,${bigint}]:h[${bigint}]` |
-`:w[, ${bigint}]:h[${bigint}]` |
-`:w[${bigint}]:h[,${bigint}]` |
-`:w[${bigint}]:h[, ${bigint}]` |
-`:w[,${bigint}]:h[${bigint},${bigint}]` |
-`:w[, ${bigint}]:h[${bigint},${bigint}]` |
-`:w[,${bigint}]:h[${bigint}, ${bigint}]` |
-`:w[, ${bigint}]:h[${bigint}, ${bigint}]` |
-`:w[${bigint},${bigint}]:h[,${bigint}]` |
-`:w[${bigint}, ${bigint}]:h[,${bigint}]` |
-`:w[${bigint},${bigint}]:h[, ${bigint}]` |
-`:w[${bigint}, ${bigint}]:h[, ${bigint}]` |
-
-// Combinations of :h and :w
-`:h[${bigint}]:w[${bigint}]` |
-`:h[${bigint},${bigint}]:w[${bigint}]` |
-`:h[${bigint}, ${bigint}]:w[${bigint}]` |
-`:h[${bigint}]:w[${bigint},${bigint}]` |
-`:h[${bigint}]:w[${bigint}, ${bigint}]` |
-`:h[${bigint},${bigint}]:w[${bigint},${bigint}]` |
-`:h[${bigint}, ${bigint}]:w[${bigint},${bigint}]` |
-`:h[${bigint},${bigint}]:w[${bigint}, ${bigint}]` |
-`:h[${bigint}, ${bigint}]:w[${bigint}, ${bigint}]` |
-`:h[,${bigint}]:w[,${bigint}]` |
-`:h[, ${bigint}]:w[,${bigint}]` |
-`:h[,${bigint}]:w[, ${bigint}]` |
-`:h[, ${bigint}]:w[, ${bigint}]` |
-`:h[,${bigint}]:w[${bigint}]` |
-`:h[, ${bigint}]:w[${bigint}]` |
-`:h[${bigint}]:w[,${bigint}]` |
-`:h[${bigint}]:w[, ${bigint}]` |
-`:h[,${bigint}]:w[${bigint},${bigint}]` |
-`:h[, ${bigint}]:w[${bigint},${bigint}]` |
-`:h[,${bigint}]:w[${bigint}, ${bigint}]` |
-`:h[, ${bigint}]:w[${bigint}, ${bigint}]` |
-`:h[${bigint},${bigint}]:w[,${bigint}]` |
-`:h[${bigint}, ${bigint}]:w[,${bigint}]` |
-`:h[${bigint},${bigint}]:w[, ${bigint}]` |
-`:h[${bigint}, ${bigint}]:w[, ${bigint}]`
+export type MediaQueries =
+    | `${WidthMediaQuery}${Optional<HeightMediaQuery>}`
+    | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`