@niibase/uniwind 1.6.3 → 1.7.0

package/src/components/native/TouchableHighlight.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { TouchableHighlightProps } from 'react-native'
+import { TouchableHighlight as RNTouchableHighlight } from 'react-native'
+import type { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
 import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/TouchableNativeFeedback.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { TouchableNativeFeedback as RNTouchableNativeFeedback, TouchableNativeFeedbackProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { TouchableNativeFeedbackProps } from 'react-native'
+import { TouchableNativeFeedback as RNTouchableNativeFeedback } from 'react-native'
+import type { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 

package/src/components/native/TouchableOpacity.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { TouchableOpacityProps } from 'react-native'
+import { TouchableOpacity as RNTouchableOpacity } from 'react-native'
+import type { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 

package/src/components/native/TouchableWithoutFeedback.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { TouchableWithoutFeedback as RNTouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { TouchableWithoutFeedbackProps } from 'react-native'
+import { TouchableWithoutFeedback as RNTouchableWithoutFeedback } from 'react-native'
+import type { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 

package/src/components/native/View.tsx

@@ -1,4 +1,5 @@
-import { View as RNView, ViewProps } from 'react-native'
+import type { ViewProps } from 'react-native'
+import { View as RNView } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 

package/src/components/native/VirtualizedList.tsx

@@ -1,4 +1,5 @@
-import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
+import type { VirtualizedListProps } from 'react-native'
+import { VirtualizedList as RNVirtualizedList } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/useAccentColor.ts

@@ -1,6 +1,6 @@
 import { isDefined } from '../../common/utils'
 import { Logger } from '../../core/logger'
-import { ComponentState } from '../../core/types'
+import type { ComponentState } from '../../core/types'
 import { useStyle } from './useStyle'
 
 let warnedOnce = false

package/src/components/native/useStyle.ts

@@ -1,10 +1,10 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
-import { ComponentType, useLayoutEffect, useReducer } from 'react'
+import { type ComponentType, useLayoutEffect, useReducer } from 'react'
 import { createAnimatedComponent } from 'react-native-reanimated'
 import { useUniwindContext } from '../../core/context'
 import { UniwindListener } from '../../core/listener'
 import { UniwindStore } from '../../core/native'
-import { ComponentState, RNStyle } from '../../core/types'
+import type { ComponentState, RNStyle } from '../../core/types'
 import { weakFamily } from '../../core/weak-map'
 
 export function useStyle(className?: string, componentProps?: Record<string, any>, state?: ComponentState): RNStyle

package/src/components/react-native-gesture-handler/native/BaseButton.tsx

@@ -1,4 +1,4 @@
-import { BaseButton as RNGHBaseButton, BaseButtonProps } from 'react-native-gesture-handler'
+import { BaseButton as RNGHBaseButton, type BaseButtonProps } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/BorderlessButton.tsx

@@ -1,4 +1,4 @@
-import { BorderlessButton as RNGHBorderlessButton, BorderlessButtonProps } from 'react-native-gesture-handler'
+import { BorderlessButton as RNGHBorderlessButton, type BorderlessButtonProps } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/DrawerLayoutAndroid.tsx

@@ -1,4 +1,4 @@
-import { DrawerLayoutAndroidProps } from 'react-native'
+import type { DrawerLayoutAndroidProps } from 'react-native'
 import { DrawerLayoutAndroid as RNGHDrawerLayoutAndroid } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'

package/src/components/react-native-gesture-handler/native/FlatList.tsx

@@ -1,4 +1,4 @@
-import { FlatListProps } from 'react-native'
+import type { FlatListProps } from 'react-native'
 import { FlatList as RNGHFlatList } from 'react-native-gesture-handler'
 import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'

package/src/components/react-native-gesture-handler/native/GestureHandlerRootView.tsx

@@ -1,5 +1,5 @@
 import { GestureHandlerRootView as RNGestureHandlerRootView } from 'react-native-gesture-handler'
-import { GestureHandlerRootViewProps } from 'react-native-gesture-handler/lib/typescript/components/GestureHandlerRootView'
+import type { GestureHandlerRootViewProps } from 'react-native-gesture-handler/lib/typescript/components/GestureHandlerRootView'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/Pressable.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Pressable as RNGHPressable, PressableProps } from 'react-native-gesture-handler'
+import { Pressable as RNGHPressable, type PressableProps } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/PureNativeButton.tsx

@@ -1,4 +1,4 @@
-import { PureNativeButton as RNGHPureNativeButton, RawButtonProps } from 'react-native-gesture-handler'
+import { PureNativeButton as RNGHPureNativeButton, type RawButtonProps } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/RawButton.tsx

@@ -1,4 +1,4 @@
-import { RawButton as RNGHRawButton, RawButtonProps } from 'react-native-gesture-handler'
+import { RawButton as RNGHRawButton, type RawButtonProps } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/RectButton.tsx

@@ -1,4 +1,4 @@
-import { RectButton as RNGHRectButton, RectButtonProps } from 'react-native-gesture-handler'
+import { RectButton as RNGHRectButton, type RectButtonProps } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/RefreshControl.tsx

@@ -1,4 +1,4 @@
-import { RefreshControlProps } from 'react-native'
+import type { RefreshControlProps } from 'react-native'
 import { RefreshControl as RNGHRefreshControl } from 'react-native-gesture-handler'
 import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'

package/src/components/react-native-gesture-handler/native/ScrollView.tsx

@@ -1,4 +1,4 @@
-import { ScrollViewProps } from 'react-native'
+import type { ScrollViewProps } from 'react-native'
 import { ScrollView as RNGHScrollView } from 'react-native-gesture-handler'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'

package/src/components/react-native-gesture-handler/native/Switch.tsx

@@ -1,6 +1,6 @@
-import { SwitchProps } from 'react-native'
+import type { SwitchProps } from 'react-native'
 import { Switch as RNGHSwitch } from 'react-native-gesture-handler'
-import { ComponentState } from '../../../core/types'
+import type { ComponentState } from '../../../core/types'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/Text.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { TextProps } from 'react-native'
+import type { TextProps } from 'react-native'
 import { Text as RNGHText } from 'react-native-gesture-handler'
-import { ComponentState } from '../../../core/types'
+import type { ComponentState } from '../../../core/types'
 import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'

package/src/components/react-native-gesture-handler/native/TextInput.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { TextInputProps } from 'react-native'
+import type { TextInputProps } from 'react-native'
 import { TextInput as RNGHTextInput } from 'react-native-gesture-handler'
-import { ComponentState } from '../../../core/types'
+import type { ComponentState } from '../../../core/types'
 import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'

package/src/components/react-native-gesture-handler/native/TouchableNativeFeedback.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import { TouchableNativeFeedbackProps } from 'react-native'
+import type { TouchableNativeFeedbackProps } from 'react-native'
 import { TouchableNativeFeedback as RNGHTouchableNativeFeedback } from 'react-native-gesture-handler'
-import { ComponentState } from '../../../core/types'
+import type { ComponentState } from '../../../core/types'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/TouchableOpacity.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { TouchableOpacity as RNGHTouchableOpacity, TouchableOpacityProps } from 'react-native-gesture-handler'
-import { ComponentState } from '../../../core/types'
+import { TouchableOpacity as RNGHTouchableOpacity, type TouchableOpacityProps } from 'react-native-gesture-handler'
+import type { ComponentState } from '../../../core/types'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/react-native-gesture-handler/native/TouchableWithoutFeedback.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import {
     TouchableWithoutFeedback as RNGHTouchableWithoutFeedback,
-    TouchableWithoutFeedbackProps,
+    type TouchableWithoutFeedbackProps,
 } from 'react-native-gesture-handler'
-import { ComponentState } from '../../../core/types'
+import type { ComponentState } from '../../../core/types'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 

package/src/components/web/ActivityIndicator.tsx

@@ -1,4 +1,5 @@
-import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
+import type { ActivityIndicatorProps } from 'react-native'
+import { ActivityIndicator as RNActivityIndicator } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/Button.tsx

@@ -1,4 +1,5 @@
-import { Button as RNButton, ButtonProps } from 'react-native'
+import type { ButtonProps } from 'react-native'
+import { Button as RNButton } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { useUniwindAccent } from './useUniwindAccent'

package/src/components/web/FlatList.tsx

@@ -1,4 +1,5 @@
-import { FlatList as RNFlatList, FlatListProps } from 'react-native'
+import type { FlatListProps } from 'react-native'
+import { FlatList as RNFlatList } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/Image.tsx

@@ -1,4 +1,5 @@
-import { Image as RNImage, ImageProps } from 'react-native'
+import type { ImageProps } from 'react-native'
+import { Image as RNImage } from 'react-native'
 import { useResolveClassNames } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'

package/src/components/web/ImageBackground.tsx

@@ -1,4 +1,5 @@
-import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
+import type { ImageBackgroundProps } from 'react-native'
+import { ImageBackground as RNImageBackground } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/KeyboardAvoidingView.tsx

@@ -1,4 +1,5 @@
-import { KeyboardAvoidingView as RNKeyboardAvoidingView, KeyboardAvoidingViewProps } from 'react-native'
+import type { KeyboardAvoidingViewProps } from 'react-native'
+import { KeyboardAvoidingView as RNKeyboardAvoidingView } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/Modal.tsx

@@ -1,4 +1,5 @@
-import { Modal as RNModal, ModalProps } from 'react-native'
+import type { ModalProps } from 'react-native'
+import { Modal as RNModal } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/Pressable.tsx

@@ -1,4 +1,5 @@
-import { Pressable as RNPressable, PressableProps } from 'react-native'
+import type { PressableProps } from 'react-native'
+import { Pressable as RNPressable } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/RefreshControl.tsx

@@ -1,4 +1,5 @@
-import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
+import type { RefreshControlProps } from 'react-native'
+import { RefreshControl as RNRefreshControl } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/SafeAreaView.tsx

@@ -1,4 +1,5 @@
-import { SafeAreaView as RNSafeAreaView, ViewProps } from 'react-native'
+import type { ViewProps } from 'react-native'
+import { SafeAreaView as RNSafeAreaView } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/ScrollView.tsx

@@ -1,4 +1,5 @@
-import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
+import type { ScrollViewProps } from 'react-native'
+import { ScrollView as RNScrollView } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/SectionList.tsx

@@ -1,4 +1,5 @@
-import { SectionList as RNSectionList, SectionListProps } from 'react-native'
+import type { SectionListProps } from 'react-native'
+import { SectionList as RNSectionList } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/Switch.tsx

@@ -1,4 +1,5 @@
-import { Switch as RNSwitch, SwitchProps } from 'react-native'
+import type { SwitchProps } from 'react-native'
+import { Switch as RNSwitch } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/Text.tsx

@@ -1,4 +1,5 @@
-import { Text as RNText, TextProps } from 'react-native'
+import type { TextProps } from 'react-native'
+import { Text as RNText } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/TextInput.tsx

@@ -1,4 +1,5 @@
-import { TextInput as RNTextInput, TextInputProps } from 'react-native'
+import type { TextInputProps } from 'react-native'
+import { TextInput as RNTextInput } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/TouchableHighlight.tsx

@@ -1,4 +1,5 @@
-import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
+import type { TouchableHighlightProps } from 'react-native'
+import { TouchableHighlight as RNTouchableHighlight } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/TouchableOpacity.tsx

@@ -1,4 +1,5 @@
-import { TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps } from 'react-native'
+import type { TouchableOpacityProps } from 'react-native'
+import { TouchableOpacity as RNTouchableOpacity } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/TouchableWithoutFeedback.tsx

@@ -1,4 +1,5 @@
-import { TouchableWithoutFeedback as RNTouchableWithoutFeedback, TouchableWithoutFeedbackProps } from 'react-native'
+import type { TouchableWithoutFeedbackProps } from 'react-native'
+import { TouchableWithoutFeedback as RNTouchableWithoutFeedback } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/View.tsx

@@ -1,4 +1,5 @@
-import { View as RNView, ViewProps } from 'react-native'
+import type { ViewProps } from 'react-native'
+import { View as RNView } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/VirtualizedList.tsx

@@ -1,4 +1,5 @@
-import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
+import type { VirtualizedListProps } from 'react-native'
+import { VirtualizedList as RNVirtualizedList } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'

package/src/components/web/rnw.ts

@@ -1,6 +1,6 @@
+import { StyleDependency } from '../../common/consts'
 import { Uniwind } from '../../core'
 import { UniwindListener } from '../../core/listener'
-import { StyleDependency } from '../../types'
 import './metro-injected'
 
 type UniwindWithThemes = {

package/src/core/config/config.common.ts

@@ -1,10 +1,13 @@
-import { ComponentPropsWithRef, createElement, ElementType, useMemo } from 'react'
-import { Appearance, Insets, Platform } from 'react-native'
-import { ApplyUniwind } from '../../hoc/types'
-import { withUniwind } from '../../hoc/withUniwind'
-import { ColorScheme, StyleDependency } from '../../types'
+import { createElement, useMemo } from 'react'
+import type { Insets } from 'react-native'
+import { Appearance, Platform } from 'react-native'
+import { ColorScheme, StyleDependency } from '../../common/consts'
+import { withUniwind } from '../../hoc'
+import type { ApplyUniwind } from '../../hoc/types'
+import type { GetCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
+import { getCSSVariable } from '../../hooks/useCSSVariable/useCSSVariable'
 import { UniwindListener } from '../listener'
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 
 const SYSTEM_THEME = 'system' as const
 // Platform.constants is not defined in RNW
@@ -53,9 +56,9 @@ export class UniwindConfigBuilder {
         return colorScheme ?? ColorScheme.Light
     }
 
-    Wrapper<T extends ElementType>({ as, ...props }: {
+    Wrapper<T extends React.ElementType>({ as, ...props }: {
         as: T
-    } & ApplyUniwind<Omit<ComponentPropsWithRef<T>, 'as'>>) {
+    } & ApplyUniwind<Omit<React.ComponentPropsWithRef<T>, 'as'>>) {
         const StyledComponent = useMemo(() => withUniwind(as as any), [as])
         return createElement(StyledComponent, props)
     }
@@ -116,6 +119,10 @@ export class UniwindConfigBuilder {
         // noop
     }
 
+    getCSSVariable = ((variableName: string | Array<string>) => {
+        return getCSSVariable(variableName, { scopedTheme: null })
+    }) as GetCSSVariable
+
     protected __reinit(_: GenerateStyleSheetsCallback, themes: Array<string>) {
         this._themes = themes
     }

package/src/core/config/config.native.ts

@@ -1,10 +1,10 @@
 import { formatHex, formatHex8, parse } from 'culori'
-import { Insets } from 'react-native'
-import { StyleDependency } from '../../types'
+import type { Insets } from 'react-native'
+import { StyleDependency } from '../../common/consts'
 import { UniwindListener } from '../listener'
 import { Logger } from '../logger'
 import { UniwindStore } from '../native'
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
 
 class UniwindConfigBuilder extends UniwindConfigBuilderBase {

package/src/core/config/config.ts

@@ -1,8 +1,8 @@
+import { StyleDependency } from '../../common/consts'
 import { arrayEquals } from '../../common/utils'
-import { StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 import { Logger } from '../logger'
-import { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
+import type { CSSVariables, GenerateStyleSheetsCallback, ThemeName } from '../types'
 import { getWebVariable } from '../web'
 import { UniwindConfigBuilder as UniwindConfigBuilderBase } from './config.common'
 

package/src/core/listener.ts

@@ -1,4 +1,4 @@
-import { StyleDependency } from '../types'
+import { StyleDependency } from '../common/consts'
 
 type SubscribeOptions = {
     once?: boolean

package/src/core/native/runtime.ts

@@ -1,7 +1,7 @@
 import { Appearance, Dimensions, I18nManager, PixelRatio, Platform, StyleSheet } from 'react-native'
 import { cubicBezier, linear, steps } from 'react-native-reanimated'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
-import { ColorScheme, Orientation } from '../../types'
+import { ColorScheme, DEFAULT_SCREEN_WIDTH, Orientation } from '../../common/consts'
 import type { UniwindRuntime as UniwindRuntimeType } from '../types'
 import { colorMix, lightDark, parseColor } from './native-utils'
 
@@ -28,9 +28,14 @@ export const UniwindRuntime = {
     lightDark: () => '',
     parseColor,
     platformSelect: (android: string, ios: string, other?: string) => {
-        // eslint-disable-next-line no-extra-boolean-cast
+        // eslint-disable-next-line no-extra-boolean-casts
         return Platform.select(Boolean(other) ? { android, ios, default: other } : { android, default: ios })
     },
+    makeResponsive(value: number, base: number = DEFAULT_SCREEN_WIDTH, useHeight: boolean = false) {
+        const dimension = useHeight ? this.screen.height : this.screen.width
+
+        return Math.round(value * dimension / base)
+    },
 } as UniwindRuntimeType
 
 UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime)

package/src/core/native/store.ts

@@ -1,9 +1,8 @@
 import { Dimensions, Platform } from 'react-native'
-import { CSSAnimationKeyframes } from 'react-native-reanimated'
-import { Platform as UniwindPlatform, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
-import { Orientation, StyleDependency } from '../../types'
+import type { CSSAnimationKeyframes } from 'react-native-reanimated'
+import { Orientation, Platform as UniwindPlatform, StyleDependency, UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
 import { UniwindListener } from '../listener'
-import { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType } from '../types'
+import type { ComponentState, GenerateStyleSheetsCallback, RNStyle, Style, StyleSheets, ThemeName, UniwindContextType } from '../types'
 import { cloneWithAccessors } from './native-utils'
 import {
     parseBoxShadow,

package/src/core/types.ts

@@ -1,8 +1,8 @@
 import React from 'react'
 import type { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native'
-import { CSSAnimationKeyframes } from 'react-native-reanimated'
-import { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing'
-import { ColorScheme, Orientation, StyleDependency, UniwindConfig } from '../types'
+import type { CSSAnimationKeyframes } from 'react-native-reanimated'
+import type { ControlPoint, CubicBezierEasing, LinearEasing, StepsEasing, StepsModifier } from 'react-native-reanimated/lib/typescript/css/easing'
+import type { ColorScheme, Orientation, StyleDependency } from '../common/consts'
 import type { UniwindContext } from './context'
 
 export type Style = {
@@ -33,6 +33,8 @@ export type GenerateStyleSheetsCallback = (rt: UniwindRuntime) => {
     scopedVars: Partial<Record<string, Record<string, unknown>>>
 }
 
+export interface UniwindConfig {}
+
 type UserThemes = UniwindConfig extends { themes: infer T extends readonly string[] } ? T
     : readonly string[]
 
@@ -63,6 +65,7 @@ export type UniwindRuntime = {
     lightDark: (light: string, dark: string) => string
     parseColor: (type: string, color: string) => string
     platformSelect: (android: string, ios: string, other?: string) => string
+    makeResponsive: (value: number, base: number, useHeight?: boolean) => number
 }
 
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {

package/src/core/web/cssListener.ts

@@ -1,4 +1,4 @@
-import { StyleDependency } from '../../types'
+import { StyleDependency } from '../../common/consts'
 import { UniwindListener } from '../listener'
 
 class CSSListenerBuilder {

package/src/core/web/getWebStyles.ts

@@ -1,5 +1,5 @@
 import { generateDataSet } from '../../components/web/generateDataSet'
-import { RNStyle, UniwindContextType } from '../types'
+import type { RNStyle, UniwindContextType } from '../types'
 import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
 

package/src/hoc/types.ts

@@ -1,5 +1,5 @@
-import { ComponentProps, ComponentPropsWithRef } from 'react'
-import { RNStyle } from '../core/types'
+import type { ComponentProps, ComponentPropsWithRef } from 'react'
+import type { RNStyle } from '../core/types'
 
 export type AnyObject = Record<PropertyKey, any>
 

package/src/hoc/withUniwind.native.tsx

@@ -1,11 +1,12 @@
-import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import type { ComponentProps } from 'react'
+import { useLayoutEffect, useReducer } from 'react'
+import type { StyleDependency } from '../common/consts'
 import { isDefined } from '../common/utils'
 import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
 import { Logger } from '../core/logger'
 import { UniwindStore } from '../core/native'
-import { StyleDependency } from '../types'
-import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
+import type { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
 let warnedOnce = false