react-native-unistyles 1.2.0 → 2.0.0-alpha.10

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

@@ -1,63 +1,6 @@
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
-/**
- * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
- *
- * This function takes an object where keys represent breakpoint names and values are numeric.
- * It returns a new object with the same keys but sorted based on their corresponding numeric values.
- * Additionally, it validates that:
- * 1. The first breakpoint starts with a value of 0.
- * 2. No duplicate breakpoint values exist.
- *
- * If the validation fails, appropriate error messages are logged to the console.
- *
- * @template B - An object type where keys are strings and values are numbers.
- * @param {B} breakpoints - The breakpoints object to be sorted and validated.
- * @returns {B} A new object with sorted and validated breakpoints.
- *
- * @example
- * const input = { md: 768, lg: 1024, sm: 0 }
- * sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
- */
-export declare const sortAndValidateBreakpoints: <B extends Breakpoints>(breakpoints: B) => B;
-/**
- * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
- *
- * This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
- * that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
- *
- * @template B - An object type where keys are strings and values are numbers representing screen widths.
- * @param {number} width - The screen width to determine the breakpoint for.
- * @param breakpointEntries - sorted pairs of breakpoints
- * @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
- *
- * @example
- * const breakpoints = { sm: 0, md: 768, lg: 1024 }
- * getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
- */
-export declare const getBreakpointFromScreenWidth: <B extends Breakpoints>(width: number, breakpointEntries: SortedBreakpointEntries<B>) => keyof B & string;
-/**
- * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
- *
- * The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
- * If no custom media query matches, the function then checks for a direct breakpoint match.
- * If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
- *
- * @example
- *
- * const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600, lg: 900 }
- *
- * getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
- */
-export declare const getValueForBreakpoint: <B extends Breakpoints>(value: Record<keyof B & string, string | number | undefined>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => string | number | undefined;
+import type { NestedStyle, RNValue } from '../types';
+import type { UnistylesBreakpoints } from '../global';
+export declare const sortAndValidateBreakpoints: (breakpoints: UnistylesBreakpoints) => UnistylesBreakpoints;
+export declare const getBreakpointFromScreenWidth: (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>) => keyof UnistylesBreakpoints & string;
+export declare const getValueForNestedStyle: (value: NestedStyle, variant?: string) => RNValue;
 //# sourceMappingURL=breakpoints.d.ts.map

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":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAGhF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,0BAA0B,8CAuBtC,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,4BAA4B,iCAAkC,MAAM,oEAchF,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,qBAAqB,kIAGlB,UAAU,kDAEvB,MAAM,GAAG,MAAM,GAAG,SA+BpB,CAAA"}
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../src/utils/breakpoints.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAoB,OAAO,EAAE,MAAM,UAAU,CAAA;AACtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAKrD,eAAO,MAAM,0BAA0B,gBAAiB,oBAAoB,KAAG,oBAuB9E,CAAA;AAED,eAAO,MAAM,4BAA4B,UAAW,MAAM,qBAAqB,MAAM,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,KAAG,MAAM,oBAAoB,GAAG,MAcnM,CAAA;AAGD,eAAO,MAAM,sBAAsB,UAAW,WAAW,YAAY,MAAM,KAAG,OA0D7E,CAAA"}

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

@@ -1,7 +1,12 @@
 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 isIOS: boolean;
 export declare const isAndroid: 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,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,SAAS,SAA4B,CAAA;AAClD,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,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,SAAS,SAA4B,CAAA;AAClD,eAAO,MAAM,QAAQ,SAAgC,CAAA;AAErD,eAAO,MAAM,WAAW;;;CAGd,CAAA"}

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

@@ -1,7 +1,9 @@
 export { normalizeStyles } from './normalizeStyles';
 export * from './normalizer';
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
+export { mq, MQSymbol } from './mq';
+export { getKeyForVariant } from './variants';
+export { getKeyForUnistylesMediaQuery } from './mqParser';
+export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForNestedStyle } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
-export { isServer } from './common';
-export { extractValues, getKeyForCustomMediaQuery, isMediaQuery, isWithinTheHeight, isWithinTheWidth, isWithinTheWidthAndHeight } from './mediaQueries';
+export { isServer, Orientation } from './common';
 //# 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,EAAE,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,4BAA4B,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAChH,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}

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

@@ -0,0 +1,21 @@
+import type { MediaQuery, Nullable } from '../types';
+import type { UnistylesBreakpoints } from '../global';
+export declare const MQSymbol: unique symbol;
+type MQValue = keyof UnistylesBreakpoints | number;
+type MQHandler = {
+    w(wMin?: Nullable<MQValue>, wMax?: MQValue): WidthHandler;
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): WidthHandler;
+    h(hMin?: Nullable<MQValue>, hMax?: MQValue): HeightHandler;
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): HeightHandler;
+};
+type HeightHandler = {
+    w(wMin?: Nullable<MQValue>, wMax?: MQValue): MediaQuery;
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): MediaQuery;
+} & MediaQuery;
+type WidthHandler = {
+    h(hMin?: Nullable<MQValue>, hMax?: MQValue): MediaQuery;
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): MediaQuery;
+} & MediaQuery;
+export declare const mq: MQHandler;
+export {};
+//# sourceMappingURL=mq.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../../src/utils/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,QAAQ,eAAyB,CAAA;AAE9C,KAAK,OAAO,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAA;AAElD,KAAK,SAAS,GAAG;IACb,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC1D,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,YAAY,CAAC;IAC9D,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IAC3D,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;CAClE,CAAA;AAED,KAAK,aAAa,GAAG;IACjB,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACxD,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CAC9D,GAAG,UAAU,CAAA;AAEd,KAAK,YAAY,GAAG;IAChB,CAAC,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACxD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CAC/D,GAAG,UAAU,CAAA;AAsEd,eAAO,MAAM,EAAE,WAYb,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { NestedStylePairs, Optional, ScreenSize } from '../types';
+export declare const getKeyForUnistylesMediaQuery: (mediaQueries: NestedStylePairs, screenSize: ScreenSize) => Optional<string>;
+//# sourceMappingURL=mqParser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mqParser.d.ts","sourceRoot":"","sources":["../../../../src/utils/mqParser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAkFtE,eAAO,MAAM,4BAA4B,+CAAgD,UAAU,qBAgBlG,CAAA"}

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

@@ -1,51 +1,6 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
-/**
- * Proxies a function to parse its return value for custom media queries or breakpoints.
- *
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {Function} fn - The function to be proxified.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {Function} Returns the proxified function
- *
- * @example
- *
- * const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
- * const screenSize = { width: 250, height: 400 }
- * const breakpoints = { sm: 300, md: 600 }
- *
- * const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
- * proxifiedFunction() // parsed style based on screenSize and breakpoints
- */
-export declare const proxifyFunction: <B extends Breakpoints>(fn: Function, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => Function;
+import type { CustomNamedStyles, ScreenSize } from '../types';
+import type { UnistylesBreakpoints } from '../global';
+export declare const proxifyFunction: (fn: Function, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize, variant?: string) => Function;
 export declare const isPlatformColor: <T extends {}>(value: T) => boolean;
-/**
- * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
- *
- * The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
- * it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
- *
- * @template T - The type of the style object.
- * @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
- *
- * @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
- * @param {keyof B & string} breakpoint - The breakpoint name to check against.
- * @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
- * @param breakpointPairs - sorted pairs of breakpoints
- *
- * @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
- *
- * @example
- *
- * const style = { fontSize: { sm: '12px', md: '16px' } }
- * const screenSize = { width: 300, height: 400 }
- * const breakpoints = { xs: 0, sm: 300, md: 600 }
- *
- * const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
- * // { fontSize: '12px' }
- */
-export declare const parseStyle: <T, B extends Breakpoints>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpointPairs: SortedBreakpointEntries<B>) => T;
+export declare const parseStyle: <T>(style: CustomNamedStyles<T>, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize, variant?: string) => T;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,UAAU,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AAKnG;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,8BACpB,QAAQ,4CACA,UAAU,kDAEvB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,uGAGP,UAAU,mDAmDzB,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAe,MAAM,UAAU,CAAA;AAG1E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,YACZ,MAAM,KACjB,QAGD,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,YACZ,MAAM,MAgDnB,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { Optional, NestedStyle } from '../types';
+export declare const getKeyForVariant: (value: NestedStyle, variant?: string) => Optional<keyof import("..").UnistylesBreakpoints | typeof import("./mq").MQSymbol | "variants">;
+//# sourceMappingURL=variants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../../src/utils/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAErD,eAAO,MAAM,gBAAgB,UAAW,WAAW,YAAY,MAAM,oGAcpE,CAAA"}

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.2.0",
+  "version": "2.0.0-alpha.10",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
     "test:coverage": "jest --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
-    "clean": "del-cli lib",
     "prepare": "husky install && bob build",
     "precommit": "concurrently 'yarn tsc' 'yarn lint' 'yarn test'",
-    "release": "release-it"
+    "release": "release-it patch --preRelease=alpha --npm.tag=next"
   },
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -20,7 +19,19 @@
   "files": [
     "src",
     "lib",
+    "ios",
+    "android",
+    "cxx",
+    "react-native-unistyles.podspec",
+    "!lib/typescript/examples",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
     "!**/*.spec.ts",
+    "!**/*.spec.tsx",
     "!**/.*"
   ],
   "keywords": [
@@ -39,26 +50,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": "5.1.1",
+    "@release-it/conventional-changelog": "7.0.2",
     "@testing-library/react-hooks": "8.0.1",
-    "@types/jest": "29.5.5",
-    "@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",
-    "del-cli": "5.1.0",
-    "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",
@@ -120,11 +129,13 @@
       "publish": true
     },
     "github": {
-      "release": true
+      "release": false
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "conventionalcommits"
+        "preset": {
+          "name": "conventionalcommits"
+        }
       }
     }
   },

package/react-native-unistyles.podspec

@@ -0,0 +1,22 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = package["name"]
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => package["repository"], :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/*.{h,mm}",
+    "cxx/*.{h,cpp}"
+  ]
+
+  s.dependency "React-Core"
+end

package/src/common.ts

@@ -0,0 +1,19 @@
+export enum CxxUnistylesEventTypes {
+    Theme = 'theme',
+    Layout = 'layout'
+}
+
+export enum UnistylesError {
+    RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
+    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',
+}
+
+// todo to string?
+export enum ScreenOrientation {
+    Portrait = 1,
+    Landscape = 2
+}

package/src/core/UnistyleRegistry.ts

@@ -0,0 +1,41 @@
+import type { UnistylesBridge, UnistylesConfig } from '../types'
+import type { UnistylesBreakpoints, UnistylesThemes } 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]]> = []
+
+    constructor(private unistylesBridge: UnistylesBridge) {}
+
+    public addThemes = (themes: UnistylesThemes) => {
+        this.themes = themes
+
+        const keys = Object.keys(themes) as Array<keyof UnistylesThemes>
+
+        this.unistylesBridge.themes = keys
+        this.themeNames = keys
+
+        return this
+    }
+
+    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
+        this.breakpoints = breakpoints
+        this.unistylesBridge.useBreakpoints(breakpoints)
+        this.sortedBreakpointPairs = this.unistylesBridge.sortedBreakpointPairs
+
+        return this
+    }
+
+    public addConfig = (config: UnistylesConfig) => {
+        this.config = config
+
+        if (config.adaptiveThemes) {
+            this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
+        }
+
+        return this
+    }
+}

package/src/core/Unistyles.ts

@@ -0,0 +1,34 @@
+import { UnistylesModule } from './UnistylesModule'
+import { UnistylesRuntime } from './UnistylesRuntime'
+import { UnistyleRegistry } from './UnistyleRegistry'
+import type { UnistylesBridge } from '../types'
+import { UnistylesError } from '../common'
+
+class Unistyles {
+    private _runtime: UnistylesRuntime
+    private _registry: UnistyleRegistry
+    private _bridge: UnistylesBridge
+
+    constructor() {
+        const isInstalled = UnistylesModule?.install() ?? false
+
+        if (!isInstalled) {
+            throw new Error(UnistylesError.RuntimeUnavailable)
+        }
+
+        // @ts-ignore
+        this._bridge = global.__UNISTYLES__ as UnistylesBridge
+        this._registry = new UnistyleRegistry(this._bridge)
+        this._runtime = new UnistylesRuntime(this._bridge, this._registry)
+    }
+
+    public get registry() {
+        return this._registry
+    }
+
+    public get runtime() {
+        return this._runtime
+    }
+}
+
+export const unistyles = new Unistyles()

package/src/core/UnistylesModule.ts

@@ -0,0 +1,7 @@
+import { NativeModules } from 'react-native'
+
+type UnistylesNativeModule = {
+    install(): boolean
+}
+
+export const UnistylesModule = NativeModules?.Unistyles as UnistylesNativeModule

package/src/core/UnistylesRuntime.ts

@@ -0,0 +1,73 @@
+import { ScreenOrientation, UnistylesError } from '../common'
+import type { UnistylesBridge } from '../types'
+import type { UnistylesThemes } from '../global'
+import type { UnistyleRegistry } from './UnistyleRegistry'
+
+export class UnistylesRuntime {
+    constructor(private unistylesBridge: UnistylesBridge, private registry: UnistyleRegistry) {}
+
+    public get colorScheme() {
+        return this.unistylesBridge.colorScheme
+    }
+
+    public get hasAdaptiveThemes() {
+        return this.unistylesBridge.hasAdaptiveThemes
+    }
+
+    public get sortedBreakpoints() {
+        return this.registry.sortedBreakpointPairs
+    }
+
+    public get themeName() {
+        return this.unistylesBridge.themeName
+    }
+
+    public get breakpoint() {
+        return this.unistylesBridge.breakpoint
+    }
+
+    public get screen() {
+        return {
+            width: this.unistylesBridge.screenWidth,
+            height: this.unistylesBridge.screenHeight
+        }
+    }
+
+    public get orientation() {
+        const { width, height } = this.screen
+
+        if (width > height) {
+            return ScreenOrientation.Landscape
+        }
+
+        return ScreenOrientation.Portrait
+    }
+
+    public setTheme = (name: keyof UnistylesThemes) => {
+        if (this.hasTheme(name)) {
+            this.unistylesBridge.useTheme(name)
+
+            return true
+        }
+
+        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)
+        }
+
+        return this.registry.themes[forName]
+    }
+
+    public setAdaptiveThemes = (enable: boolean) => {
+        this.unistylesBridge.useAdaptiveThemes(enable)
+    }
+
+    private hasTheme = (name: keyof UnistylesThemes) => name in this.registry.themes
+}

package/src/core/index.ts

@@ -0,0 +1 @@
+export { unistyles } from './Unistyles'

package/src/createStyleSheet.ts

@@ -0,0 +1,9 @@
+import type { CustomNamedStyles, UnistylesTheme } from './types'
+
+export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
+    if (typeof styles === 'function') {
+        return styles as X
+    }
+
+    return styles as S
+}

package/src/global.ts

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

package/src/hooks/index.ts

@@ -1 +1,2 @@
-export { useDimensions } from './useDimensions'
+export { useInitialTheme } from './useInitialTheme'
+export { useUnistyles } from './useUnistyles'

package/src/hooks/useInitialTheme.ts

@@ -0,0 +1,11 @@
+import { useMemo } from 'react'
+import { unistyles } from '../core'
+import type { UnistylesThemes } from '../global'
+
+export const useInitialTheme = (forName: keyof UnistylesThemes) => {
+    useMemo(() => {
+        if (!unistyles.runtime.themeName) {
+            unistyles.runtime.setTheme(forName)
+        }
+    }, [])
+}

package/src/hooks/useUnistyles.ts

@@ -0,0 +1,55 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import { useEffect, useState } from 'react'
+import { unistyles } from '../core'
+import { CxxUnistylesEventTypes } from '../common'
+import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+
+const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+
+export const useUnistyles = () => {
+    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
+    const [layout, setLayout] = useState({
+        breakpoint: unistyles.runtime.breakpoint,
+        orientation: unistyles.runtime.orientation,
+        screenSize: {
+            width: unistyles.runtime.screen.width,
+            height: unistyles.runtime.screen.height
+        }
+    })
+
+    useEffect(() => {
+        const subscription = unistylesEvents.addListener(
+            'onChange',
+            (event: UnistylesEvents) => {
+                switch (event.type) {
+                    case CxxUnistylesEventTypes.Theme: {
+                        const themeEvent = event as UnistylesThemeEvent
+
+                        return setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
+                    }
+                    case CxxUnistylesEventTypes.Layout: {
+                        const layoutEvent = event as UnistylesMobileLayoutEvent
+
+                        return setLayout({
+                            breakpoint: layoutEvent.payload.breakpoint,
+                            orientation: layoutEvent.payload.orientation,
+                            screenSize: {
+                                width: layoutEvent.payload.screen.width,
+                                height: layoutEvent.payload.screen.height
+                            }
+                        })
+                    }
+                    default:
+                        return
+                }
+            }
+        )
+
+        return subscription.remove
+    }, [])
+
+    return {
+        theme,
+        layout
+    }
+}

package/src/index.ts

@@ -1,2 +1,30 @@
-export { UnistylesTheme } from './UnistylesTheme'
-export { createUnistyles } from './createUnistyles'
+import { unistyles } from './core'
+import { mq } from './utils'
+import { useInitialTheme } from './hooks'
+import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+import { ScreenOrientation } from './common'
+import { useStyles } from './useStyles'
+import { createStyleSheet } from './createStyleSheet'
+
+const UnistylesRegistry = {
+    addThemes: unistyles.registry.addThemes,
+    addBreakpoints: unistyles.registry.addBreakpoints,
+    addConfig: unistyles.registry.addConfig
+}
+
+const UnistylesRuntime = unistyles.runtime
+
+export {
+    mq,
+    useStyles,
+    useInitialTheme,
+    createStyleSheet,
+    ScreenOrientation,
+    UnistylesRegistry,
+    UnistylesRuntime
+}
+
+export type {
+    UnistylesThemes,
+    UnistylesBreakpoints
+}