react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.2

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

@@ -0,0 +1,3 @@
+import type { UnistylesThemes } from './global';
+export declare const useInitialTheme: (forName: keyof UnistylesThemes) => void;
+//# sourceMappingURL=useInitialTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useInitialTheme.d.ts","sourceRoot":"","sources":["../../../src/useInitialTheme.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,eAAO,MAAM,eAAe,YAAa,MAAM,eAAe,SAE7D,CAAA"}

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

@@ -0,0 +1,46 @@
+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";
+    styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST>>;
+};
+export {};
+//# sourceMappingURL=useStyles.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,45 @@
+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";
+    screenSize: {
+        width: number;
+        height: number;
+    };
+};
+//# sourceMappingURL=useUnistyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDxB,CAAA"}

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

@@ -1,4 +1,5 @@
-import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types';
+import type { ScreenSize, MediaQueries } from '../types';
+import type { UnistylesBreakpoints } from '../global';
 /**
  * Sorts the breakpoints object based on its numeric values in ascending order and validates them.
  *
@@ -18,7 +19,7 @@ import type { Breakpoints, ScreenSize, SortedBreakpointEntries } from '../types'
  * 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;
+export declare const sortAndValidateBreakpoints: (breakpoints: UnistylesBreakpoints) => UnistylesBreakpoints;
 /**
  * Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
  *
@@ -34,7 +35,7 @@ export declare const sortAndValidateBreakpoints: <B extends Breakpoints>(breakpo
  * 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;
+export declare const getBreakpointFromScreenWidth: (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>) => keyof UnistylesBreakpoints & string;
 /**
  * Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
  *
@@ -59,5 +60,5 @@ export declare const getBreakpointFromScreenWidth: <B extends Breakpoints>(width
  *
  * 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;
+export declare const getValueForBreakpoint: (value: Record<keyof UnistylesBreakpoints | MediaQueries, string | number | undefined>, breakpoint: keyof UnistylesBreakpoints, screenSize: ScreenSize) => string | number | undefined;
 //# 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,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"}

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

@@ -1,4 +1,5 @@
 export declare const throwError: (message: string) => never;
 export declare const warn: (message: string) => void;
-export declare const isWeb: () => boolean;
+export declare const isWeb: boolean;
+export declare const isServer: boolean;
 //# 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,eAA8B,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,KAAK,SAAwB,CAAA;AAC1C,eAAO,MAAM,QAAQ,SAAgC,CAAA"}

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

@@ -1,5 +1,7 @@
 export { normalizeStyles } from './normalizeStyles';
+export * from './normalizer';
 export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForBreakpoint } from './breakpoints';
 export { proxifyFunction, parseStyle } from './styles';
+export { isServer } 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,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"}
+{"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"}

package/lib/typescript/src/utils/normalizeStyles.web.d.ts

@@ -1,2 +1,5 @@
-export declare const normalizeStyles: <T extends {}>(styles: T) => T;
+import type { Transforms } from '../types';
+export declare const normalizeStyles: <T extends Required<import("react-native").ShadowStyleIOS> | Required<Pick<import("react-native").TextStyle, "textShadowColor" | "textShadowOffset" | "textShadowRadius">> | {
+    transform: Transforms;
+}>(style: T) => T;
 //# sourceMappingURL=normalizeStyles.web.d.ts.map

package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AA8EA,eAAO,MAAM,eAAe,gCAwB3B,CAAA"}
+{"version":3,"file":"normalizeStyles.web.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizeStyles.web.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAoE,UAAU,EAAE,MAAM,UAAU,CAAA;AAuD5G,eAAO,MAAM,eAAe;;iBAwB3B,CAAA"}

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

@@ -0,0 +1,11 @@
+import type { TextShadow, Transforms, BoxShadow } from '../types';
+type Preprocessor = {
+    createTextShadowValue(style: TextShadow): string;
+    createBoxShadowValue(style: Required<BoxShadow>): string;
+    createTransformValue(transforms: Required<Transforms>): string;
+};
+export declare const normalizeColor: (color: string, opacity?: number) => string;
+export declare const normalizeNumericValue: (value: number) => string | number;
+export declare const preprocessor: Preprocessor;
+export {};
+//# sourceMappingURL=normalizer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEjE,KAAK,YAAY,GAAG;IAChB,qBAAqB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IACjD,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,oBAAoB,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CAClE,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAwDpF,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAA"}

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

@@ -1,4 +1,5 @@
-import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntries } from '../types';
+import type { CustomNamedStyles, ScreenSize } from '../types';
+import type { UnistylesBreakpoints } from '../global';
 /**
  * Proxies a function to parse its return value for custom media queries or breakpoints.
  *
@@ -20,7 +21,7 @@ import type { Breakpoints, CustomNamedStyles, ScreenSize, SortedBreakpointEntrie
  * 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;
+export declare const proxifyFunction: (fn: Function, breakpoint: keyof UnistylesBreakpoints & string, screenSize: ScreenSize) => Function;
 /**
  * Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
  *
@@ -46,5 +47,5 @@ export declare const proxifyFunction: <B extends Breakpoints>(fn: Function, brea
  * 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) => 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;;;;;;;;;;;;;;;;;;;;;;;;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;AAI7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAErD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,OACpB,QAAQ,cAAc,MAAM,oBAAoB,GAAG,MAAM,cACjD,UAAU,KACvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,+CAEP,MAAM,oBAAoB,GAAG,MAAM,cACnC,UAAU,MAiDzB,CAAA"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "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",
     "prepare": "husky install && bob build",
@@ -18,7 +19,10 @@
   "files": [
     "src",
     "lib",
+    "ios",
+    "react-native-unistyles.podspec",
     "!**/*.spec.ts",
+    "!**/*.spec.tsx",
     "!**/.*"
   ],
   "keywords": [
@@ -39,6 +43,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "17.8.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",
@@ -72,6 +77,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
+    "@react-native/normalize-colors": "*",
     "react": "*",
     "react-native": "*",
     "react-native-web": "*"
@@ -82,7 +88,7 @@
     }
   },
   "workspaces": [
-    "example",
+    "examples/expo",
     "docs"
   ],
   "packageManager": "yarn@3.6.1",
@@ -92,9 +98,13 @@
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
+      "<rootDir>/examples/expo/node_modules",
+      "<rootDir>/examples/ssr/node_modules",
       "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
+    ],
+    "coverageReporters": [
+      "html"
     ]
   },
   "commitlint": {

package/react-native-unistyles.podspec

@@ -0,0 +1,21 @@
+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,m,mm}"
+  ]
+
+  s.dependency "React-Core"
+end

package/src/UnistyleRegistry.ts

@@ -0,0 +1,39 @@
+import type { UnistylesBridge, UnistylesConfig } from './types'
+import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+
+export class UnistyleRegistry {
+    public isClosed = false
+    public themes: UnistylesThemes = {} as UnistylesThemes
+    public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
+    public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
+    public config: UnistylesConfig = {}
+
+    constructor(private unistylesBridge: UnistylesBridge) {}
+
+    public addThemes = (themes: UnistylesThemes) => {
+        this.themes = themes
+
+        return this
+    }
+
+    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
+        this.unistylesBridge.useBreakpoints(breakpoints)
+        this.sortedBreakpointPairs = this.unistylesBridge.sortedBreakpointPairs
+
+        return this
+    }
+
+    public addConfig = (config: UnistylesConfig) => {
+        this.config = config
+
+        if (config.featureFlags && config.featureFlags.length > 0) {
+            this.unistylesBridge.useFeatureFlags(config.featureFlags)
+        }
+
+        if (config.colorScheme) {
+            this.unistylesBridge.useColorScheme(config.colorScheme)
+        }
+
+        return this
+    }
+}

package/src/Unistyles.ts

@@ -0,0 +1,41 @@
+import { UnistylesModule } from './UnistylesModule'
+import { UnistylesRuntime } from './UnistylesRuntime'
+import { UnistylesEngine } from './UnistylesEngine'
+import { UnistyleRegistry } from './UnistyleRegistry'
+import type { UnistylesBridge } from './types'
+import { UnistylesError } from './types'
+
+class Unistyles {
+    private _runtime: UnistylesRuntime
+    private _engine: UnistylesEngine
+    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)
+        this._engine = new UnistylesEngine(this._registry, this._runtime)
+    }
+
+    public get registry() {
+        return this._registry
+    }
+
+    public get runtime() {
+        return this._runtime
+    }
+
+    public get engine() {
+        return this._engine
+    }
+}
+
+export const unistyles = new Unistyles()

package/src/UnistylesEngine.ts

@@ -0,0 +1,15 @@
+import type { UnistyleRegistry } from './UnistyleRegistry'
+import type { UnistylesRuntime } from './UnistylesRuntime'
+
+// todo implement engine
+export class UnistylesEngine {
+    // @ts-ignore
+    constructor(private registry: UnistyleRegistry, private runtime: UnistylesRuntime) {
+        this.registry = registry
+        this.runtime = runtime
+    }
+
+    // UnistylesEngine.parseStyleSheet
+    // UnistylesEngine.parseStyle
+    // UnistylesEngine.proxify
+}

package/src/UnistylesModule.ts

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

package/src/UnistylesRuntime.ts

@@ -0,0 +1,58 @@
+import type { UnistylesBridge } from './types'
+import type { UnistyleRegistry } from './UnistyleRegistry'
+import { UnistylesColorScheme, UnistylesError } from './types'
+import type { UnistylesThemes } from './global'
+
+export class UnistylesRuntime {
+    constructor(private unistylesBridge: UnistylesBridge, private registry: UnistyleRegistry) {}
+
+    public get colorScheme() {
+        return this.unistylesBridge.colorScheme
+    }
+
+    public get breakpoints() {
+        return this.registry.breakpoints
+    }
+
+    public get sortedBreakpoints() {
+        return this.registry.sortedBreakpointPairs
+    }
+
+    public get config() {
+        return this.registry.config
+    }
+
+    public get theme() {
+        return this.unistylesBridge.theme
+    }
+
+    public get currentBreakpoint() {
+        return this.unistylesBridge.breakpoint
+    }
+
+    public setColorScheme = (scheme: UnistylesColorScheme) => {
+        if (scheme !== this.colorScheme) {
+            this.unistylesBridge.useColorScheme(scheme)
+        }
+    }
+
+    public setTheme = (name: keyof UnistylesThemes) => {
+        if (name !== this.theme && this.hasTheme(name)) {
+            this.unistylesBridge.useTheme(name)
+
+            return true
+        }
+
+        return false
+    }
+
+    public hasTheme = (name: keyof UnistylesThemes) => name in this.registry.themes
+
+    public getTheme = (forName: keyof UnistylesThemes) => {
+        if (!this.hasTheme(forName)) {
+            throw new Error(UnistylesError.ThemeNotFound)
+        }
+
+        return this.registry.themes[forName]
+    }
+}

package/src/createStyleSheet.ts

@@ -0,0 +1,12 @@
+import type { CustomNamedStyles } from './types'
+import type { UnistylesThemes } from './global'
+
+type T = UnistylesThemes[keyof UnistylesThemes]
+
+export const createStyleSheet = <S extends CustomNamedStyles<S>, X>(styles: S | CustomNamedStyles<S> | X | ((theme: T) => X | CustomNamedStyles<X>)): S | X => {
+    if (typeof styles === 'function') {
+        return styles as X
+    }
+
+    return styles as S
+}

package/src/global.ts

@@ -0,0 +1,2 @@
+export interface UnistylesThemes {}
+export interface UnistylesBreakpoints {}

package/src/hooks/useDimensions.web.ts

@@ -1,11 +1,12 @@
 import { useEffect, 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: window.innerWidth,
-        height: window.innerHeight
+        width: isServer ? 0 : window.innerWidth,
+        height: isServer ? 0 : window.innerHeight
     })
 
     useEffect(() => {

package/src/index.ts

@@ -1,2 +1,30 @@
-export { UnistylesTheme } from './UnistylesTheme'
-export { createUnistyles } from './createUnistyles'
+import { unistyles } from './Unistyles'
+import type { UnistylesThemes, UnistylesBreakpoints } from './global'
+import { UnistylesColorScheme } from './types'
+
+export { useInitialTheme } from './useInitialTheme'
+
+export { useStyles } from './useStyles'
+export { createStyleSheet } from './createStyleSheet'
+
+const { addThemes, addBreakpoints, addConfig  } = unistyles.registry
+const UnistylesRuntime = unistyles.runtime
+const UnistylesRegistry = {
+    addThemes,
+    addBreakpoints,
+    addConfig
+}
+
+export {
+    UnistylesRuntime,
+    UnistylesRegistry
+}
+
+export {
+    UnistylesColorScheme
+}
+
+export type {
+    UnistylesThemes,
+    UnistylesBreakpoints
+}

package/src/types/breakpoints.ts

@@ -1,8 +1,6 @@
+import type { UnistylesBreakpoints } from '../global'
 import type { MediaQueries } from './mediaQueries'
 
-export type Breakpoints = Record<string, number>
-export type SortedBreakpointEntries<B extends Breakpoints> = [[keyof B & string, number]]
-
 export type ScreenSize = {
     width: number,
     height: number
@@ -12,22 +10,22 @@ export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
-export type ExtractBreakpoints<T, B extends Breakpoints> = T extends Partial<Record<keyof B & string, infer V>>
+export type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
     ? WithEmptyObject<V>
     : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R, B>
+        ? (...args: A) => ExtractBreakpoints<R>
         : {
             [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R, B>
+                ? (...args: A) => ExtractBreakpoints<R>
                 : T[K] extends object
-                    ? ExtractBreakpoints<T[K], B>
+                    ? ExtractBreakpoints<T[K]>
                     : T[K]
         }
 
-export type RemoveKeysWithPrefix<T, B extends Breakpoints> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R, B>
+export type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
+    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
         ? T extends Record<string, infer _V>
-            ? { [K in keyof T as K extends MediaQueries ? keyof B & string : K]: RemoveKeysWithPrefix<T[K], B> }
-            : { [K in keyof T]: RemoveKeysWithPrefix<T[K], B> }
+            ? { [K in keyof T as K extends MediaQueries ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
+            : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T

package/src/types/core.ts

@@ -14,8 +14,8 @@ import type {
     TranslateYTransform
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
-import type { Breakpoints } from './breakpoints'
 import type { MediaQueries } from './mediaQueries'
+import type { UnistylesBreakpoints } from '../global'
 
 type ShadowOffset = {
     width: number,
@@ -60,14 +60,14 @@ type UnistyleView<B> = DeepUniStyle<Omit<ViewStyle, NestedTypes>, B>
 type UnistyleText<B> = DeepUniStyle<Omit<TextStyle, NestedTypes>, B>
 type UnistyleImage<B> = DeepUniStyle<Omit<ImageStyle, NestedTypes>, B>
 
-export type StaticStyles<B extends Breakpoints> =
+export type StaticStyles<B> =
     | UnistyleView<B>
     | UnistyleText<B>
     | UnistyleImage<B>
     & UnistyleNested<B>
 
-export type CustomNamedStyles<T, B extends Breakpoints> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<B>
-        ? (...args: A) => StaticStyles<B>
-        : StaticStyles<B>
+export type CustomNamedStyles<T> = {
+    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles<UnistylesBreakpoints>
+        ? (...args: A) => StaticStyles<UnistylesBreakpoints>
+        : StaticStyles<UnistylesBreakpoints>
 }