react-native-unistyles 1.2.0 → 1.3.0

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

@@ -0,0 +1,4 @@
+import type { RNStyle } from '../types';
+import type { UnistylesRuntime } from '../core';
+export declare const createMediaQueryForStyles: (styles: RNStyle, runtime: UnistylesRuntime) => RNStyle;
+//# sourceMappingURL=cssMediaQuery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cssMediaQuery.d.ts","sourceRoot":"","sources":["../../../../src/utils/cssMediaQuery.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAW,MAAM,UAAU,CAAA;AAEhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,eAAO,MAAM,yBAAyB,WAAY,OAAO,WAAW,gBAAgB,KAAG,OA8BtF,CAAA"}

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

@@ -0,0 +1,2 @@
+export declare const generateReactNativeWebId: (key: string, value: string) => string;
+//# sourceMappingURL=generateId.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generateId.d.ts","sourceRoot":"","sources":["../../../../src/utils/generateId.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,wBAAwB,QAAS,MAAM,SAAS,MAAM,KAAG,MAMrE,CAAA"}

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

@@ -0,0 +1,2 @@
+export declare const murmurhash2_32_gc: (str: string, seed: number) => number;
+//# sourceMappingURL=hash32.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hash32.d.ts","sourceRoot":"","sources":["../../../../src/utils/hash32.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,QAAS,MAAM,QAAQ,MAAM,WA+C1D,CAAA"}

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

@@ -1,7 +1,8 @@
-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';
+export { mq } from './mq';
+export type { UnistylesParsedMq } from './mqParser';
+export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq, isUnistylesMq } from './mqParser';
+export { getValueForBreakpoint } from './breakpoints';
+export { proxifyFunction, parseStyle, isPlatformColor } from './styles';
+export { withPlugins } from './withPlugins';
+export { generateReactNativeWebId } from './generateId';
 //# 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,MAAM,CAAA;AACzB,YAAY,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AACnD,OAAO,EAAE,4BAA4B,EAAE,yBAAyB,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AACvH,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AACvE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAA"}

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

@@ -0,0 +1,26 @@
+import type { Nullable } from '../types';
+import type { UnistylesBreakpoints } from '../global';
+type MQValue = keyof UnistylesBreakpoints | number;
+type MQHandler = {
+    only: {
+        width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol;
+        height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol;
+    };
+    width(wMin?: Nullable<MQValue>, wMax?: MQValue): {
+        and: {
+            height(hMin?: Nullable<MQValue>, hMax?: MQValue): symbol;
+        };
+    };
+    height(hMin?: Nullable<MQValue>, hMax?: MQValue): {
+        and: {
+            width(wMin?: Nullable<MQValue>, wMax?: MQValue): symbol;
+        };
+    };
+};
+/**
+ * Utility to create cross-platform media queries
+ * @returns - JavaScript symbol to be used in your stylesheet
+ */
+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,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAGrD,KAAK,OAAO,GAAG,MAAM,oBAAoB,GAAG,MAAM,CAAA;AAElD,KAAK,SAAS,GAAG;IACb,IAAI,EAAE;QACF,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;KAC5D,CAAC;IACF,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;QAC7C,GAAG,EAAE;YACD,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;SAC3D,CAAA;KACJ,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG;QAC9C,GAAG,EAAE;YACD,KAAK,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;SAC1D,CAAA;KACJ,CAAA;CACJ,CAAA;AAcD;;;GAGG;AACH,eAAO,MAAM,EAAE,EAAE,SAiBhB,CAAA"}

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

@@ -0,0 +1,16 @@
+import type { Optional, RNValue, ScreenSize } from '../types';
+type ParsedMqDimension = {
+    from: number;
+    to: number;
+};
+export type UnistylesParsedMq = {
+    width?: ParsedMqDimension;
+    height?: ParsedMqDimension;
+};
+export declare const parseMq: (mq: string) => UnistylesParsedMq;
+export declare const isUnistylesMq: (mq: string) => boolean;
+export declare const isValidMq: (parsedMq: UnistylesParsedMq) => boolean;
+export declare const isWithinTheWidthAndHeight: (parsedMq: UnistylesParsedMq, screenSize: ScreenSize) => boolean;
+export declare const getKeyForUnistylesMediaQuery: (mediaQueries: Array<[string, RNValue]>, screenSize: ScreenSize) => Optional<string>;
+export {};
+//# 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,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM7D,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,iBAcpC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,YAAgC,CAAA;AAExE,eAAO,MAAM,SAAS,aAAc,iBAAiB,YAgBpD,CAAA;AAED,eAAO,MAAM,yBAAyB,aAAc,iBAAiB,cAAc,UAAU,KAAG,OAgB/F,CAAA;AAcD,eAAO,MAAM,4BAA4B,iBAAkB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,cAAc,UAAU,KAAG,SAAS,MAAM,CAgB5H,CAAA"}

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

@@ -1,51 +1,5 @@
-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 { Optional, RNStyle } from '../types';
+export declare const proxifyFunction: (key: string, fn: Function, variant?: Record<string, Optional<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 extends RNStyle>(style: T, variant?: Record<string, Optional<string>>, parseMediaQueries?: boolean) => 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,QAAQ,EAAE,OAAO,EAAW,MAAM,UAAU,CAAA;AAK1D,eAAO,MAAM,eAAe,QACnB,MAAM,MACP,QAAQ,YACF,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,KAC3C,QAED,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,0CAEV,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,mCAmD9B,CAAA"}

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

@@ -0,0 +1,3 @@
+import type { RNStyle } from '../types';
+export declare const withPlugins: (key: string, style: RNStyle) => RNStyle;
+//# sourceMappingURL=withPlugins.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"withPlugins.d.ts","sourceRoot":"","sources":["../../../../src/utils/withPlugins.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAGvC,eAAO,MAAM,WAAW,QACf,MAAM,SACJ,OAAO,YAOT,CAAA"}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "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"
@@ -20,13 +19,28 @@
   "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": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "react-native-macos",
+    "react-native-web",
+    "expo"
   ],
   "repository": "https://github.com/jpudysz/react-native-unistyles",
   "author": "Jacek Pudysz <jacekpudysz@gmail.com> (https://github.com/jpudysz)",
@@ -39,26 +53,24 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "17.8.0",
+    "@commitlint/config-conventional": "18.4.3",
     "@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": "8.0.1",
     "@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.11",
+    "@types/react": "18.2.46",
+    "@typescript-eslint/eslint-plugin": "6.16.0",
+    "@typescript-eslint/eslint-plugin-tslint": "6.16.0",
+    "@typescript-eslint/parser": "6.16.0",
+    "commitlint": "18.4.3",
+    "concurrently": "8.2.2",
+    "eslint": "8.56.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jsdoc": "46.8.2",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "46.10.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",
@@ -68,26 +80,31 @@
     "husky": "8.0.3",
     "jest": "29.7.0",
     "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-builder-bob": "0.23.1",
+    "react-native": "0.72.7",
+    "react-native-builder-bob": "0.23.2",
     "react-native-web": "0.19.9",
     "react-test-renderer": "18.2.0",
-    "release-it": "16.2.1",
-    "typescript": "5.2.2"
+    "release-it": "17.0.1",
+    "typescript": "5.3.3"
   },
   "peerDependencies": {
     "@react-native/normalize-colors": "*",
     "react": "*",
     "react-native": "*",
+    "react-native-macos": "*",
     "react-native-web": "*"
   },
   "peerDependenciesMeta": {
+    "react-native-macos": {
+      "optional": true
+    },
     "react-native-web": {
       "optional": true
     }
   },
   "workspaces": [
     "examples/expo",
+    "examples/macos",
     "docs"
   ],
   "packageManager": "yarn@3.6.1",
@@ -98,10 +115,13 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/examples/expo/node_modules",
-      "<rootDir>/examples/ssr/node_modules",
+      "<rootDir>/examples/macos/node_modules",
       "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
     ],
+    "testMatch": [
+      "**/*.spec.(ts|tsx)"
+    ],
     "coverageReporters": [
       "html"
     ]
@@ -124,13 +144,14 @@
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "conventionalcommits"
+        "preset": "angular"
       }
     }
   },
   "eslintIgnore": [
     "node_modules/",
-    "lib/"
+    "lib/",
+    "src/utils/hash32.ts"
   ],
   "react-native-builder-bob": {
     "source": "src",

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, :osx => "10.14" }
+  s.source       = { :git => package["repository"], :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{h,mm}",
+    "cxx/*.{h,cpp}"
+  ]
+
+  install_modules_dependencies(s)
+end

package/src/__tests__/mocks.ts

@@ -0,0 +1,24 @@
+import type { ScreenSize } from '../types'
+
+const TEST_BREAKPOINTS = {
+    xs: 0,
+    sm: 300,
+    md: 500,
+    lg: 750,
+    xl: 1000
+} as const
+
+export const mockRuntime = (screenSize: ScreenSize) => ({
+    breakpoint: Object.entries(TEST_BREAKPOINTS)
+        .reverse()
+        .find(([, value]) => screenSize.width >= value)?.at(0),
+    orientation: screenSize.width > screenSize.height
+        ? 'landscape'
+        : 'portrait',
+    screen: screenSize
+})
+
+export const mockRegistry = () => ({
+    sortedBreakpointPairs: Object.entries(TEST_BREAKPOINTS),
+    plugins: []
+})

package/src/common.ts

@@ -0,0 +1,55 @@
+import { Platform } from 'react-native'
+
+export const warn = (message: string) => {
+    console.warn(`🦄 [react-native-unistyles]: ${message}`)
+}
+
+export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+export const isMobile = isIOS || isAndroid
+export const isServer = typeof window === 'undefined'
+
+export const ScreenOrientation = {
+    Landscape: 'landscape',
+    Portrait: 'portrait'
+} as const
+
+export enum IOSContentSizeCategory {
+    ExtraExtraExtraLarge = 'xxxLarge',
+    ExtraExtraLarge = 'xxLarge',
+    ExtraLarge = 'xLarge',
+    Large = 'Large',
+    Medium = 'Medium',
+    Small = 'Small',
+    ExtraSmall = 'xSmall',
+    Unspecified = 'unspecified'
+}
+
+export enum AndroidContentSizeCategory {
+    Small = 'Small',
+    Default = 'Default',
+    Large = 'Large',
+    ExtraLarge = 'ExtraLarge',
+    Huge = 'Huge'
+}
+
+export enum UnistylesEventType {
+    Theme = 'theme',
+    Layout = 'layout',
+    Plugin = 'plugin',
+    DynamicTypeSize = 'dynamicTypeSize'
+}
+
+export enum UnistylesError {
+    RuntimeUnavailable = 'Unistyles runtime is not available. Make sure you followed the installation instructions',
+    ThemeNotFound = 'You are trying to get a theme that is not registered with UnistylesRegistry',
+    ThemeNotRegistered = 'You are trying to set a theme that was not registered with UnistylesRegistry',
+    ThemeNotSelected = 'Your themes are registered, but you didn\'t select the initial theme',
+    ThemesCannotBeEmpty = 'You are trying to register empty themes object',
+    BreakpointsCannotBeEmpty = 'You are trying to register empty breakpoints object',
+    BreakpointsMustStartFromZero = 'You are trying to register breakpoints that don\'t start from 0',
+    InvalidPluginName = 'Plugin name can\'t start from reserved prefix __unistyles',
+    DuplicatePluginName = 'You are trying to register a plugin with a name that is already registered',
+    CantRemoveInternalPlugin = 'You are trying to remove an internal unistyles plugin'
+}

package/src/core/UnistyleRegistry.ts

@@ -0,0 +1,108 @@
+import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import { isWeb, UnistylesError } from '../common'
+import { cssMediaQueriesPlugin, normalizeWebStylesPlugin } from '../plugins'
+
+export class UnistyleRegistry {
+    public config: UnistylesConfig = {}
+    public plugins: Array<UnistylesPlugin> = isWeb
+        ? [normalizeWebStylesPlugin]
+        : []
+    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 {
+            addBreakpoints: this.addBreakpoints,
+            addConfig: this.addConfig
+        }
+    }
+
+    public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
+        this.breakpoints = breakpoints
+        this.unistylesBridge.useBreakpoints(breakpoints)
+        this.sortedBreakpointPairs = this.unistylesBridge.sortedBreakpointPairs
+
+        return {
+            addThemes: this.addThemes,
+            addConfig: this.addConfig
+        }
+    }
+
+    public addConfig = (config: UnistylesConfig) => {
+        this.config = config
+
+        if (config.adaptiveThemes) {
+            this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
+        }
+
+        if (config.plugins) {
+            config.plugins.forEach(plugin => this.addPlugin(plugin, false))
+        }
+
+        if (config.initialTheme) {
+            this.unistylesBridge.useTheme(config.initialTheme)
+        }
+
+        if (config.experimentalCSSMediaQueries) {
+            this.plugins = [cssMediaQueriesPlugin].concat(this.plugins)
+            this.unistylesBridge.addPlugin(cssMediaQueriesPlugin.name, false)
+        }
+
+        return {
+            addBreakpoints: this.addBreakpoints,
+            addThemes: this.addThemes
+        }
+    }
+
+    public getTheme = (forName: keyof UnistylesThemes) => {
+        if (this.themeNames.length === 0) {
+            return {} as UnistylesThemes[keyof UnistylesThemes]
+        }
+
+        if (this.hasTheme(forName)) {
+            return this.themes[forName]
+        }
+
+        if (this.unistylesBridge.themeName) {
+            throw new Error(UnistylesError.ThemeNotFound)
+        }
+
+        throw new Error(UnistylesError.ThemeNotSelected)
+    }
+
+    public addPlugin = (plugin: UnistylesPlugin, notify: boolean = true) => {
+        if (plugin.name.startsWith('__unistyles')) {
+            throw new Error(UnistylesError.InvalidPluginName)
+        }
+
+        if (this.plugins.some(({ name }) => name === plugin.name)) {
+            throw new Error(UnistylesError.DuplicatePluginName)
+        }
+
+        this.plugins = [plugin].concat(this.plugins)
+        this.unistylesBridge.addPlugin(plugin.name, notify)
+    }
+
+    public removePlugin = (plugin: UnistylesPlugin) => {
+        if (plugin.name.startsWith('__unistyles')) {
+            throw new Error(UnistylesError.CantRemoveInternalPlugin)
+        }
+
+        this.plugins = this.plugins.filter(({ name }) => name !== plugin.name)
+        this.unistylesBridge.removePlugin(plugin.name)
+    }
+
+    public hasTheme = (name: keyof UnistylesThemes) => name in this.themes
+}

package/src/core/Unistyles.ts

@@ -0,0 +1,35 @@
+import { UnistylesModule } from './UnistylesModule'
+import { UnistylesRuntime } from './UnistylesRuntime'
+import { UnistyleRegistry } from './UnistyleRegistry'
+import type { UnistylesBridge } from '../types'
+import { UnistylesError, isWeb } 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
+        // eslint-disable-next-line no-undef
+        this._bridge = (isWeb ? globalThis : 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.native.ts

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