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

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/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,16 +1,15 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.1.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",
-    "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,10 @@
   "files": [
     "src",
     "lib",
+    "ios",
+    "react-native-unistyles.podspec",
     "!**/*.spec.ts",
+    "!**/*.spec.tsx",
     "!**/.*"
   ],
   "keywords": [
@@ -42,9 +44,9 @@
     "@commitlint/config-conventional": "17.8.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/jest": "29.5.6",
     "@types/react": "18.2.28",
     "@types/react-native": "0.72.3",
     "@typescript-eslint/eslint-plugin": "6.8.0",
@@ -52,7 +54,6 @@
     "@typescript-eslint/parser": "6.8.0",
     "commitlint": "17.8.0",
     "concurrently": "8.2.1",
-    "del-cli": "5.1.0",
     "eslint": "8.51.0",
     "eslint-config-codemask": "1.1.7",
     "eslint-plugin-functional": "6.0.0",
@@ -120,11 +121,13 @@
       "publish": true
     },
     "github": {
-      "release": true
+      "release": false
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "angular"
+        "preset": {
+          "name": "conventionalcommits"
+        }
       }
     }
   },

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/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>
 }

package/src/types/cxx.ts

@@ -0,0 +1,61 @@
+import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
+
+export type Nullable<T> = T | null
+export enum UnistylesColorScheme {
+    System = 'system',
+    Manual = 'manual'
+}
+
+export type UnistylesConfig = {
+    colorScheme?: UnistylesColorScheme,
+    featureFlags?: Array<string>
+}
+
+export type UnistylesBridge = {
+    // getters
+    theme: keyof UnistylesThemes
+    breakpoint: keyof UnistylesBreakpoints,
+    colorScheme: UnistylesColorScheme,
+    sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>
+
+    // setters
+    useBreakpoints(breakpoints: UnistylesBreakpoints): void,
+    useTheme(name: keyof UnistylesThemes): void,
+    useColorScheme(scheme: UnistylesColorScheme): void,
+    useFeatureFlags(flags: Array<string>): void
+}
+
+export enum CxxUnistylesEventTypes {
+    Theme = 'theme',
+    Size = 'size',
+    Breakpoint = 'breakpoint'
+}
+
+export type CxxUnistylesThemeEvent = {
+    type: CxxUnistylesEventTypes.Theme,
+    payload: {
+        currentTheme: keyof UnistylesThemes
+    }
+}
+
+export type CxxUnistylesSizeEvent = {
+    type: CxxUnistylesEventTypes.Size,
+    payload: {
+        width: number,
+        height: number
+    }
+}
+
+export type CxxUnistylesBreakpointEvent = {
+    type: CxxUnistylesEventTypes.Breakpoint,
+    payload: {
+        currentBreakpoint: keyof UnistylesBreakpoints
+    }
+}
+
+export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent
+
+export enum UnistylesError {
+    RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
+    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND'
+}

package/src/types/index.ts

@@ -1,10 +1,10 @@
 export * from './normalizer'
+export * from './cxx'
 export type { CustomNamedStyles } from './core'
+export type { MediaQueries } from './mediaQueries'
 export type {
     ScreenSize,
-    Breakpoints,
     CreateStylesFactory,
     ExtractBreakpoints,
-    RemoveKeysWithPrefix,
-    SortedBreakpointEntries
+    RemoveKeysWithPrefix
 } from './breakpoints'

package/src/useInitialTheme.ts

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