react-native-unistyles 2.0.0-alpha.3 → 2.0.0-alpha.5

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

@@ -1,4 +1,5 @@
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global';
+import type { ScreenSize } from './breakpoints';
 export type Nullable<T> = T | null;
 export type ColorSchemeName = 'light' | 'dark' | undefined;
 export type UnistylesConfig = {
@@ -12,7 +13,7 @@ export type UnistylesBridge = {
     screenWidth: number;
     screenHeight: number;
     hasAdaptiveThemes: boolean;
-    theme: keyof UnistylesThemes;
+    themeName: keyof UnistylesThemes;
     breakpoint: keyof UnistylesBreakpoints;
     colorScheme: ColorSchemeName;
     sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>;
@@ -20,34 +21,33 @@ export type UnistylesBridge = {
     useBreakpoints(breakpoints: UnistylesBreakpoints): void;
     useTheme(name: keyof UnistylesThemes): void;
     useAdaptiveThemes(enable: boolean): void;
+    unregister(): void;
 };
 export declare enum CxxUnistylesEventTypes {
     Theme = "theme",
-    Size = "size",
-    Breakpoint = "breakpoint"
+    Layout = "layout"
 }
-export type CxxUnistylesThemeEvent = {
+export type UnistylesThemeEvent = {
     type: CxxUnistylesEventTypes.Theme;
     payload: {
         themeName: keyof UnistylesThemes;
     };
 };
-export type CxxUnistylesSizeEvent = {
-    type: CxxUnistylesEventTypes.Size;
-    payload: {
-        width: number;
-        height: number;
-    };
-};
-export type CxxUnistylesBreakpointEvent = {
-    type: CxxUnistylesEventTypes.Breakpoint;
+export type UnistylesMobileLayoutEvent = {
+    type: CxxUnistylesEventTypes.Layout;
     payload: {
+        screen: ScreenSize;
         breakpoint: keyof UnistylesBreakpoints;
+        orientation: ScreenOrientation;
     };
 };
-export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent;
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent;
 export declare enum UnistylesError {
     RuntimeUnavailable = "UNISTYLES_ERROR_RUNTIME_UNAVAILABLE",
-    ThemeNotFound = "UNISTYLES_ERROR_THEME_NOT_FOUND"
+    ThemeNotFound = "UNISTYLES_ERROR_THEME_NOT_FOUND",
+    ThemeNotRegistered = "UNISTYLES_ERROR_THEME_NOT_REGISTERED",
+    ThemesCannotBeEmpty = "UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY",
+    BreakpointsCannotBeEmpty = "UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY",
+    BreakpointsMustStartFromZero = "UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO"
 }
 //# sourceMappingURL=cxx.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,oBAAY,iBAAiB;IACzB,QAAQ,IAAI;IACZ,SAAS,IAAI;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAE1B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,eAAe,CAAC;IAC7B,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAG7G,MAAM,EAAE,KAAK,CAAC,MAAM,eAAe,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5C,CAAA;AAED,oBAAY,sBAAsB;IAC9B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,UAAU,eAAe;CAC5B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACjC,IAAI,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACnC,OAAO,EAAE;QACL,SAAS,EAAE,MAAM,eAAe,CAAA;KACnC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,sBAAsB,CAAC,IAAI,CAAC;IAClC,OAAO,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAA;KACjB,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACtC,IAAI,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACxC,OAAO,EAAE;QACL,UAAU,EAAE,MAAM,oBAAoB,CAAA;KACzC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,2BAA2B,CAAA;AAE1G,oBAAY,cAAc;IACtB,kBAAkB,wCAAwC;IAC1D,aAAa,oCAAoC;CACpD"}
+{"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE/C,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,oBAAY,iBAAiB;IACzB,QAAQ,IAAI;IACZ,SAAS,IAAI;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAE1B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,MAAM,eAAe,CAAC;IACjC,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAG7G,MAAM,EAAE,KAAK,CAAC,MAAM,eAAe,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAGzC,UAAU,IAAI,IAAI,CAAA;CACrB,CAAA;AAED,oBAAY,sBAAsB;IAC9B,KAAK,UAAU;IACf,MAAM,WAAW;CACpB;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,IAAI,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACnC,OAAO,EAAE;QACL,SAAS,EAAE,MAAM,eAAe,CAAA;KACnC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACrC,IAAI,EAAE,sBAAsB,CAAC,MAAM,CAAC;IACpC,OAAO,EAAE;QACL,MAAM,EAAE,UAAU,CAAC;QACnB,UAAU,EAAE,MAAM,oBAAoB,CAAC;QACvC,WAAW,EAAE,iBAAiB,CAAA;KACjC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG,0BAA0B,CAAA;AAE9E,oBAAY,cAAc;IACtB,kBAAkB,wCAAwC;IAC1D,aAAa,oCAAoC;IACjD,kBAAkB,yCAAyC;IAC3D,mBAAmB,2CAA2C;IAC9D,wBAAwB,gDAAgD;IACxE,4BAA4B,qDAAqD;CACpF"}

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

@@ -1,45 +1,9 @@
 import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
 import type { UnistylesThemes } from './global';
 type T = UnistylesThemes[keyof UnistylesThemes];
-export declare const useStyles: <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
-    theme: {
-        colors: {
-            backgroundColor: string;
-            typography: string;
-            accent: string;
-            barbie: string;
-            oak: string;
-            sky: string;
-            fog: string;
-            aloes: string;
-            blood: string;
-        };
-    } | {
-        colors: {
-            backgroundColor: string;
-            typography: string;
-            accent: string;
-            barbie: string;
-            oak: string;
-            sky: string;
-            fog: string;
-            aloes: string;
-            blood: string;
-        };
-    } | {
-        colors: {
-            backgroundColor: string;
-            typography: string;
-            accent: string;
-            barbie: string;
-            oak: string;
-            sky: string;
-            fog: string;
-            aloes: string;
-            blood: string;
-        };
-    };
-    breakpoint: "xs" | "sm" | "md" | "lg" | "xl";
+export declare const useStyles: <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | CreateStylesFactory<ST, never> | undefined) => {
+    theme: never;
+    breakpoint: "landscape" | "portrait";
     styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST>>;
 };
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCrB,CAAA"}
+{"version":3,"file":"useStyles.d.ts","sourceRoot":"","sources":["../../../src/useStyles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE/G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C,KAAK,CAAC,GAAG,eAAe,CAAC,MAAM,eAAe,CAAC,CAAA;AAE/C,eAAO,MAAM,SAAS;;;;CAsCrB,CAAA"}

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

@@ -1,42 +1,8 @@
+import { ScreenOrientation } from './types';
 export declare const useUnistyles: () => {
-    theme: {
-        colors: {
-            backgroundColor: string;
-            typography: string;
-            accent: string;
-            barbie: string;
-            oak: string;
-            sky: string;
-            fog: string;
-            aloes: string;
-            blood: string;
-        };
-    } | {
-        colors: {
-            backgroundColor: string;
-            typography: string;
-            accent: string;
-            barbie: string;
-            oak: string;
-            sky: string;
-            fog: string;
-            aloes: string;
-            blood: string;
-        };
-    } | {
-        colors: {
-            backgroundColor: string;
-            typography: string;
-            accent: string;
-            barbie: string;
-            oak: string;
-            sky: string;
-            fog: string;
-            aloes: string;
-            blood: string;
-        };
-    };
-    breakpoint: "xs" | "sm" | "md" | "lg" | "xl";
+    theme: never;
+    orientation: ScreenOrientation;
+    breakpoint: "landscape" | "portrait";
     screenSize: {
         width: number;
         height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAA"}
+{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAKnE,eAAO,MAAM,YAAY;;;;;;;;CA6CxB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAExD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SAgCpB,CAAA"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,UACvB,OAAO,MAAM,oBAAoB,GAAG,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,cACzE,MAAM,oBAAoB,cAC1B,UAAU,KACvB,MAAM,GAAG,MAAM,GAAG,SA6CpB,CAAA"}

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

@@ -1,5 +1,10 @@
 export declare const throwError: (message: string) => never;
 export declare const warn: (message: string) => void;
+export declare const isMobile: boolean;
 export declare const isWeb: boolean;
 export declare const isServer: boolean;
+export declare const Orientation: {
+    readonly Landscape: "landscape";
+    readonly Portrait: "portrait";
+};
 //# sourceMappingURL=common.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../../src/utils/common.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,YAAa,MAAM,UAEzC,CAAA;AAED,eAAO,MAAM,IAAI,YAAa,MAAM,SAEnC,CAAA;AAED,eAAO,MAAM,QAAQ,SAAqD,CAAA;AAC1E,eAAO,MAAM,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}

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

@@ -2,6 +2,6 @@ export { normalizeStyles } from './normalizeStyles';
 export * from './normalizer';
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
-export { isServer } from './common';
+export { isServer, Orientation } from './common';
 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,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,cAAc,cAAc,CAAA;AAC5B,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAC/G,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EACH,aAAa,EACb,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,gBAAgB,EAChB,yBAAyB,EAC5B,MAAM,gBAAgB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAQ9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}
+{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/utils/mediaQueries.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,aAAa,eAAgB,MAAM,KAAG,MAAM,MAAM,CAoB9D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,cAAc,UAAU,KAAG,OAc1E,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB,UAAW,MAAM,SAAS,MAAM,KAAG,OAQ/D,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,iBAAiB,UAAW,MAAM,UAAU,MAAM,KAAG,OAQjE,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,yBAAyB,UAAW,MAAM,cAAc,UAAU,KAAG,OAQjF,CAAA;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,YAAY,UAAW,MAAM,KAAG,OAI5C,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,yBAAyB,iBAAkB,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC,cAAc,UAAU,KAAG,MAAM,GAAG,SAevI,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.5",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -41,25 +41,24 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "17.8.0",
+    "@commitlint/config-conventional": "18.1.0",
     "@react-native/eslint-config": "0.74.0",
     "@react-native/normalize-colors": "0.74.1",
     "@release-it/conventional-changelog": "7.0.2",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.6",
-    "@types/react": "18.2.28",
-    "@types/react-native": "0.72.3",
-    "@typescript-eslint/eslint-plugin": "6.8.0",
-    "@typescript-eslint/eslint-plugin-tslint": "6.8.0",
-    "@typescript-eslint/parser": "6.8.0",
-    "commitlint": "17.8.0",
-    "concurrently": "8.2.1",
-    "eslint": "8.51.0",
+    "@types/jest": "29.5.7",
+    "@types/react": "18.2.34",
+    "@typescript-eslint/eslint-plugin": "6.9.1",
+    "@typescript-eslint/eslint-plugin-tslint": "6.9.1",
+    "@typescript-eslint/parser": "6.9.1",
+    "commitlint": "18.2.0",
+    "concurrently": "8.2.2",
+    "eslint": "8.53.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.0",
     "eslint-plugin-jsdoc": "46.8.2",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-nested-if": "1.0.0",
     "eslint-plugin-no-else": "0.2.2",
     "eslint-plugin-no-loops": "0.3.0",

package/react-native-unistyles.podspec

@@ -14,7 +14,8 @@ Pod::Spec.new do |s|
   s.source       = { :git => package["repository"], :tag => "#{s.version}" }
 
   s.source_files = [
-    "ios/*.{h,m,mm}"
+    "ios/*.{h,mm}",
+    "cxx/*.{h,cpp}"
   ]
 
   s.dependency "React-Core"

package/src/UnistyleRegistry.ts

@@ -3,6 +3,7 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 
 export class UnistyleRegistry {
     public config: UnistylesConfig = {}
+    public themeNames: Array<keyof UnistylesThemes> = []
     public themes: UnistylesThemes = {} as UnistylesThemes
     public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
     public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
@@ -11,7 +12,11 @@ export class UnistyleRegistry {
 
     public addThemes = (themes: UnistylesThemes) => {
         this.themes = themes
-        this.unistylesBridge.themes = Object.keys(themes) as Array<keyof UnistylesThemes>
+
+        const keys = Object.keys(themes) as Array<keyof UnistylesThemes>
+
+        this.unistylesBridge.themes = keys
+        this.themeNames = keys
 
         return this
     }
@@ -32,4 +37,14 @@ export class UnistyleRegistry {
 
         return this
     }
+
+    public dangerouslyUnregister = () => {
+        this.config = {}
+        this.themeNames = []
+        this.themes = {} as UnistylesThemes
+        this.breakpoints = {} as UnistylesBreakpoints
+        this.sortedBreakpointPairs = []
+
+        this.unistylesBridge.unregister()
+    }
 }

package/src/UnistylesRuntime.ts

@@ -19,7 +19,7 @@ export class UnistylesRuntime {
     }
 
     public get themeName() {
-        return this.unistylesBridge.theme
+        return this.unistylesBridge.themeName
     }
 
     public get breakpoint() {
@@ -50,10 +50,14 @@ export class UnistylesRuntime {
             return true
         }
 
-        return false
+        throw new Error(UnistylesError.ThemeNotRegistered)
     }
 
     public getTheme = (forName: keyof UnistylesThemes) => {
+        if (this.registry.themeNames.length === 0) {
+            return {} as UnistylesThemes[keyof UnistylesThemes]
+        }
+
         if (!this.hasTheme(forName)) {
             throw new Error(UnistylesError.ThemeNotFound)
         }

package/src/global.ts

@@ -1,2 +1,5 @@
 export interface UnistylesThemes {}
-export interface UnistylesBreakpoints {}
+export interface UnistylesBreakpoints {
+    landscape?: number,
+    portrait?: number,
+}

package/src/hooks/useDimensions.web.ts

@@ -1,13 +1,16 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { ScreenSize } from '../types'
-import { isServer } from '../utils'
 
 export const useDimensions = (): ScreenSize => {
     const timerRef = useRef<ReturnType<typeof setTimeout>>()
-    const [screenSize, setScreenSize] = useState<ScreenSize>({
-        width: isServer ? 0 : window.innerWidth,
-        height: isServer ? 0 : window.innerHeight
-    })
+    const [screenSize, setScreenSize] = useState<ScreenSize>({} as ScreenSize)
+
+    useLayoutEffect(() => {
+        setScreenSize({
+            width: window.innerWidth,
+            height: window.innerHeight
+        })
+    }, [])
 
     useEffect(() => {
         const handleResize = () => {

package/src/index.ts

@@ -15,6 +15,8 @@ const UnistylesRegistry = {
     addConfig
 }
 
+export const __dangerouslyUnregister = unistyles.registry.dangerouslyUnregister
+
 export {
     UnistylesRuntime,
     UnistylesRegistry

package/src/types/cxx.ts

@@ -1,4 +1,5 @@
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+import type { ScreenSize } from './breakpoints'
 
 export type Nullable<T> = T | null
 export type ColorSchemeName = 'light' | 'dark' | undefined
@@ -17,7 +18,7 @@ export type UnistylesBridge = {
     screenWidth: number,
     screenHeight: number,
     hasAdaptiveThemes: boolean,
-    theme: keyof UnistylesThemes,
+    themeName: keyof UnistylesThemes,
     breakpoint: keyof UnistylesBreakpoints,
     colorScheme: ColorSchemeName,
     sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
@@ -27,39 +28,39 @@ export type UnistylesBridge = {
     useBreakpoints(breakpoints: UnistylesBreakpoints): void,
     useTheme(name: keyof UnistylesThemes): void,
     useAdaptiveThemes(enable: boolean): void,
+
+    // other
+    unregister(): void
 }
 
 export enum CxxUnistylesEventTypes {
     Theme = 'theme',
-    Size = 'size',
-    Breakpoint = 'breakpoint'
+    Layout = 'layout'
 }
 
-export type CxxUnistylesThemeEvent = {
+export type UnistylesThemeEvent = {
     type: CxxUnistylesEventTypes.Theme,
     payload: {
         themeName: keyof UnistylesThemes
     }
 }
 
-export type CxxUnistylesSizeEvent = {
-    type: CxxUnistylesEventTypes.Size,
-    payload: {
-        width: number,
-        height: number
-    }
-}
-
-export type CxxUnistylesBreakpointEvent = {
-    type: CxxUnistylesEventTypes.Breakpoint,
+export type UnistylesMobileLayoutEvent = {
+    type: CxxUnistylesEventTypes.Layout,
     payload: {
-        breakpoint: keyof UnistylesBreakpoints
+        screen: ScreenSize,
+        breakpoint: keyof UnistylesBreakpoints,
+        orientation: ScreenOrientation
     }
 }
 
-export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
 
 export enum UnistylesError {
     RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
-    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND'
+    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND',
+    ThemeNotRegistered = 'UNISTYLES_ERROR_THEME_NOT_REGISTERED',
+    ThemesCannotBeEmpty = 'UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY',
+    BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
+    BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
 }

package/src/useInitialTheme.ts

@@ -1,7 +1,7 @@
-import { useRef } from 'react'
+import { useMemo } from 'react'
 import { unistyles } from './Unistyles'
 import type { UnistylesThemes } from './global'
 
 export const useInitialTheme = (forName: keyof UnistylesThemes) => {
-    useRef(unistyles.runtime.setTheme(forName))
+    useMemo(() => unistyles.runtime.setTheme(forName), [])
 }

package/src/useStyles.ts

@@ -31,13 +31,13 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(stylesheet?: ST | Cr
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(value, breakpoint!, screenSize)
+                    [key]: proxifyFunction(value, breakpoint, screenSize)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(style, breakpoint!, screenSize)
+                [key]: parseStyle<ST>(style, breakpoint, screenSize)
             })
         }, {} as ST), [breakpoint, screenSize, parsedStyles])
 

package/src/useUnistyles.ts

@@ -1,22 +1,18 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import { useEffect, useState } from 'react'
-import type {
-    CxxUnistylesBreakpointEvent,
-    CxxUnistylesSizeEvent,
-    CxxUnistylesThemeEvent,
-    UnistylesEvents
-} from './types'
-import { CxxUnistylesEventTypes } from './types'
+import type { UnistylesThemeEvent, UnistylesMobileLayoutEvent, UnistylesEvents } from './types'
+import { CxxUnistylesEventTypes, ScreenOrientation } from './types'
 import { unistyles } from './Unistyles'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
+    const [orientation, setOrientation] = useState<ScreenOrientation>(unistyles.runtime.orientation)
     const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
     const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
     const [screenSize, setScreenSize] = useState({
-        width: 0,
-        height: 0
+        width: unistyles.runtime.screen.width,
+        height: unistyles.runtime.screen.height
     })
 
     useEffect(() => {
@@ -25,27 +21,18 @@ export const useUnistyles = () => {
             (event: UnistylesEvents) => {
                 switch (event.type) {
                     case CxxUnistylesEventTypes.Theme: {
-                        const themeEvent = event as CxxUnistylesThemeEvent
+                        const themeEvent = event as UnistylesThemeEvent
 
                         setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
 
                         return
                     }
-                    // this event is not available on mobile
-                    case CxxUnistylesEventTypes.Size: {
-                        const sizeEvent = event as CxxUnistylesSizeEvent
+                    case CxxUnistylesEventTypes.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
 
-                        setScreenSize({
-                            width: sizeEvent.payload.width,
-                            height: sizeEvent.payload.height
-                        })
-
-                        return
-                    }
-                    case CxxUnistylesEventTypes.Breakpoint: {
-                        const breakpointEvent = event as CxxUnistylesBreakpointEvent
-
-                        setBreakpoint(breakpointEvent.payload.breakpoint)
+                        setBreakpoint(layoutEvent.payload.breakpoint)
+                        setOrientation(layoutEvent.payload.orientation)
+                        setScreenSize(layoutEvent.payload.screen)
 
                         return
                     }
@@ -60,6 +47,7 @@ export const useUnistyles = () => {
 
     return {
         theme,
+        orientation,
         breakpoint,
         screenSize
     }

package/src/utils/breakpoints.ts

@@ -1,6 +1,7 @@
 import { unistyles } from '../Unistyles'
-import { throwError } from './common'
+import { isMobile, Orientation, throwError } from './common'
 import type { ScreenSize, MediaQueries } from '../types'
+import { ScreenOrientation } from '../types'
 import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries'
 import type { UnistylesBreakpoints } from '../global'
 
@@ -66,7 +67,7 @@ export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): U
 export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
     const [key] = breakpointEntries
         .find(([, value], index, otherBreakpoints) => {
-            const minVal = value
+            const minVal = value as number
             const maxVal = otherBreakpoints[index + 1]?.[1]
 
             if (!maxVal) {
@@ -118,7 +119,20 @@ export const getValueForBreakpoint = (
         return value[customMediaQueryKey]
     }
 
-    // if no custom media query, or didn't match, proceed with defined breakpoints
+    // at this point user didn't use custom media queries (:w, :h)
+    // check if user defined any breakpoints
+    const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
+
+    // if not then we can fallback to horizontal and portrait (mobile only)
+    if (!hasBreakpoints && isMobile && (Orientation.Landscape in  value || Orientation.Portrait in value)) {
+        return value[
+            unistyles.runtime.orientation === ScreenOrientation.Portrait
+                ? Orientation.Portrait
+                : Orientation.Landscape
+        ]
+    }
+
+    // if user defined breakpoints, then we look for the valid one
     const unifiedKey = breakpoint?.toLowerCase() as keyof typeof value
     const directBreakpoint = value[unifiedKey]
 
@@ -127,7 +141,7 @@ export const getValueForBreakpoint = (
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, so let's simulate CSS cascading
+    // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
     const breakpointPairs = unistyles.runtime.sortedBreakpoints
     const currentBreakpoint = breakpointPairs
         .findIndex(([key]) => key === unifiedKey)

package/src/utils/common.ts

@@ -8,5 +8,11 @@ export const warn = (message: string) => {
     console.warn(`🦄 [react-native-unistyles]: ${message}`)
 }
 
+export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios'
 export const isWeb = Platform.OS === 'web'
 export const isServer = typeof window === 'undefined'
+
+export const Orientation = {
+    Landscape: 'landscape',
+    Portrait: 'portrait'
+} as const

package/src/utils/index.ts

@@ -2,7 +2,7 @@ export { normalizeStyles } from './normalizeStyles'
 export * from './normalizer'
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
-export { isServer } from './common'
+export { isServer, Orientation } from './common'
 export {
     extractValues,
     getKeyForCustomMediaQuery,