feat: replace layout arg with runtime

docs/src/content/docs/reference/create-stylesheet.mdx

@@ -64,16 +64,16 @@ const stylesheet = createStyleSheet(theme => ({
 }))
 ```
 
-In addition to the `theme` argument, you can also accept the `layout` argument when passing a function, which can be useful to access screen orientation, dimensions, insets, and more.
+In addition to the `theme` argument, you can also accept the `runtime` argument when passing a function. This can be useful for accessing `UnistylesRuntime` and its properties (such as screen orientation, dimensions, insets, and more) without having to import this class directly.
 
-```ts /layout/
-const stylesheet = createStyleSheet((theme, layout) => ({
+```ts /runtime/
+const stylesheet = createStyleSheet((theme, runtime) => ({
     container: {
         flex: 1,
         justifyContent: 'center',
         alignItems: 'center',
-        paddingTop: layout.insets.top,
-        backgroundColor: layout.orientation === 'portrait'
+        paddingTop: runtime.insets.top,
+        backgroundColor: runtime.orientation === 'portrait'
             ? theme.colors.accent
             : theme.colors.oak
     },

examples/expo/src/examples/RuntimeScreen.tsx

@@ -183,7 +183,7 @@ export const RuntimeScreen: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyleSheet((theme, layout) => ({
+const stylesheet = createStyleSheet((theme, runtime) => ({
     container: {
         flex: 1,
         paddingTop: 50,
@@ -228,15 +228,15 @@ const stylesheet = createStyleSheet((theme, layout) => ({
     },
     topInset: {
         position: 'absolute',
-        top: layout.insets.top,
+        top: runtime.insets.top,
         left: 0,
         right: 0,
         height: 1,
         backgroundColor: theme.colors.accent
     },
     bottomInset: {
         position: 'absolute',
-        bottom: layout.insets.bottom,
+        bottom: runtime.insets.bottom,
         left: 0,
         right: 0,
         height: 1,
@@ -246,15 +246,15 @@ const stylesheet = createStyleSheet((theme, layout) => ({
         position: 'absolute',
         top: 0,
         bottom: 0,
-        left: layout.insets.left,
+        left: runtime.insets.left,
         width: 1,
         backgroundColor: theme.colors.accent
     },
     rightInset: {
         position: 'absolute',
         top: 0,
         bottom: 0,
-        right: layout.insets.right,
+        right: runtime.insets.right,
         width: 1,
         backgroundColor: theme.colors.accent
     }

examples/expo/src/examples/RuntimeWithStyleSheetScreen.tsx

@@ -25,7 +25,7 @@ export const RuntimeWithStyleSheetScreen: React.FunctionComponent = () => {
     )
 }
 
-const stylesheet = createStyleSheet((theme, layout) => ({
+const stylesheet = createStyleSheet((theme, runtime) => ({
     container: {
         flex: 1,
         paddingTop: 50,
@@ -41,9 +41,9 @@ const stylesheet = createStyleSheet((theme, layout) => ({
         alignItems: 'center',
         padding: 20,
         marginTop: 50,
-        width: layout.screen.width / 2,
-        height: layout.screen.height / 2,
-        backgroundColor: layout.orientation === 'portrait'
+        width: runtime.screen.width / 2,
+        height: runtime.screen.height / 2,
+        backgroundColor: runtime.orientation === 'portrait'
             ? theme.colors.accent
             : theme.colors.oak
     }

src/index.ts

@@ -1,7 +1,7 @@
 import { unistyles } from './core'
 import { mq } from './utils'
 import { useInitialTheme } from './hooks'
-import type { UnistylesPlugin, UnistylesValues, UnistylesLayout } from './types'
+import type { UnistylesPlugin, UnistylesValues } from './types'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
 import { useStyles } from './useStyles'
@@ -47,6 +47,5 @@ export type {
     UnistylesThemes,
     UnistylesBreakpoints,
     UnistylesPlugin,
-    UnistylesValues,
-    UnistylesLayout
+    UnistylesValues
 }

src/types/breakpoints.ts

@@ -1,7 +1,8 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
-import type { UnistylesLayout, UnistylesTheme } from '../types'
+import type { UnistylesTheme } from '../types'
 import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 import type { TransformStyles } from './core'
+import type { UnistylesRuntime } from '../core'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
@@ -56,6 +57,6 @@ type ParseStyleKeys<T> = T extends object
     ? { [K in keyof T]: ParseNestedObject<T[K]> }
     : never
 
-export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme, layout: UnistylesLayout) => infer R
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme, runtime: UnistylesRuntime) => infer R
     ? ParseStyleKeys<R>
     : ParseStyleKeys<T>

src/types/stylesheet.ts

@@ -1,7 +1,7 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
-import type { UnistylesLayout } from './unistyles'
+import type { UnistylesRuntime } from '../core'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
@@ -47,4 +47,4 @@ export type StyleSheet = {
     [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
 }
 
-export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme, layout: UnistylesLayout) => StyleSheet) | StyleSheet
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme, runtime: UnistylesRuntime) => StyleSheet) | StyleSheet

src/types/unistyles.ts

@@ -80,12 +80,3 @@ export type UnistylesDynamicTypeSizeEvent = {
 }
 
 export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent | UnistylesDynamicTypeSizeEvent
-
-export type UnistylesLayout = {
-    breakpoint: keyof UnistylesBreakpoints,
-    orientation: (typeof ScreenOrientation)[keyof typeof ScreenOrientation],
-    screen: ScreenDimensions,
-    statusBar: ScreenDimensions,
-    navigationBar: ScreenDimensions,
-    insets: ScreenInsets,
-}

src/useStyles.ts

@@ -26,7 +26,7 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
     const { theme, layout, plugins } = useUnistyles()
     const variants = useVariants(variantsMap)
     const parsedStyles = useMemo(() => typeof stylesheet === 'function'
-        ? stylesheet(theme, layout)
+        ? stylesheet(theme, unistyles.runtime)
         : stylesheet, [theme, stylesheet, layout])
 
     const dynamicStyleSheet = useMemo(() => Object