@niibase/uniwind 1.6.4 → 1.7.0

package/src/{metro/processor → bundler/css-processor}/css.ts

@@ -1,21 +1,20 @@
 /* eslint-disable max-lines */
 
-import { Animation, Filter, OverflowKeyword, TokenOrValue } from 'lightningcss'
-
-import { isDefined } from '../../common/utils'
+import { isDefined } from '@/common/utils'
+import type { Animation, Filter, OverflowKeyword, TokenOrValue } from 'lightningcss'
 import { Logger } from '../logger'
-import { DeclarationValues } from '../types'
-import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from '../utils'
 import { getProcessedAnimation, getProcessedVarAnimation } from './animation'
 import type { ProcessorBuilder } from './processor'
+import type { DeclarationProperty, DeclarationValues } from './types'
+import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from './utils'
 
 export class CSS {
     private readonly logger = new Logger('CSS')
 
     constructor(private readonly Processor: ProcessorBuilder) {}
 
-    processValue(declarationValue: DeclarationValues): any {
-        const processedValue = this.getProcessedValue(declarationValue)
+    processValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any {
+        const processedValue = this.getProcessedValue(declarationValue, declarationProperty)
 
         if (typeof processedValue === 'string') {
             return this.makeSafeForSerialization(processedValue)
@@ -106,7 +105,7 @@ export class CSS {
         return filterStrings.join(' ')
     }
 
-    private getProcessedValue(declarationValue: DeclarationValues): any {
+    private getProcessedValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any {
         if (typeof declarationValue !== 'object') {
             return declarationValue
         }
@@ -424,11 +423,20 @@ export class CSS {
         }
 
         if ('grow' in declarationValue) {
-            return {
+            const parsedFlex = {
                 flexGrow: declarationValue.grow,
                 flexShrink: declarationValue.shrink,
                 flexBasis: this.processValue(declarationValue.basis),
             }
+
+            // CSS `flex: 1` is a shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%` but for native we just want flex: 1
+            if (declarationProperty === 'flex' && parsedFlex.flexGrow === 1 && parsedFlex.flexShrink === 1 && parsedFlex.flexBasis === '"0%"') {
+                return {
+                    flex: 1,
+                }
+            }
+
+            return parsedFlex
         }
 
         if (Array.isArray(declarationValue)) {

package/src/{metro/processor → bundler/css-processor}/functions.ts

@@ -1,7 +1,7 @@
-import { CalcFor_DimensionPercentageFor_LengthValue, CalcFor_Length, CssColor, Function as FunctionType } from 'lightningcss'
+import type { CalcFor_DimensionPercentageFor_LengthValue, CalcFor_Length, CssColor, Function as FunctionType } from 'lightningcss'
 import { Logger } from '../logger'
-import { pipe } from '../utils'
 import type { ProcessorBuilder } from './processor'
+import { pipe } from './utils'
 
 export class Functions {
     private readonly logger = new Logger('Functions')

package/src/bundler/css-processor/index.ts

@@ -0,0 +1,3 @@
+export * from './addMetaToStylesTemplate'
+export * from './processor'
+export * from './serialize'

package/src/{metro/processor → bundler/css-processor}/mq.ts

@@ -1,8 +1,8 @@
-import { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
-import { Platform } from '../../common/consts'
-import { ColorScheme, Orientation } from '../../types'
-import { MediaQueryResolver } from '../types'
+import type { ColorScheme, Orientation } from '@/common/consts'
+import { Platform } from '@/common/consts'
+import type { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
 import type { ProcessorBuilder } from './processor'
+import type { MediaQueryResolver } from './types'
 
 export class MQ {
     constructor(private readonly Processor: ProcessorBuilder) {}

package/src/{metro/processor → bundler/css-processor}/processor.ts

@@ -1,13 +1,15 @@
-import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
-import { CSSAnimationKeyframes } from 'react-native-reanimated'
-import { UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
+import { UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '@/common/consts'
+import type { Declaration, MediaQuery, Rule } from 'lightningcss'
+import { transform } from 'lightningcss'
+import type { CSSAnimationKeyframes } from 'react-native-reanimated'
 import { parseTransformsMutation } from '../../core/native/parsers/transforms'
-import { AnimationFrame, MediaQueryResolver, Polyfills, ProcessMetaValues } from '../types'
+import type { UniwindBundlerConfig } from '../config'
 import { Color } from './color'
 import { CSS } from './css'
 import { Functions } from './functions'
 import { MQ } from './mq'
 import { RN } from './rn'
+import type { AnimationFrame, DeclarationProperty, MediaQueryResolver, ProcessMetaValues } from './types'
 import { Units } from './units'
 import { Var } from './var'
 
@@ -29,8 +31,8 @@ export class ProcessorBuilder {
     private pendingVarReferences = new Map<string, [Array<string>, boolean]>()
     private declarationConfig = this.getDeclarationConfig()
 
-    constructor(private readonly themes: Array<string>, readonly polyfills: Polyfills | undefined) {
-        this.vars['--uniwind-em'] = polyfills?.rem ?? 16
+    constructor(public readonly bundlerConfig: UniwindBundlerConfig) {
+        this.vars['--uniwind-em'] = this.bundlerConfig.polyfills?.rem ?? 16
     }
 
     transform(css: string) {
@@ -209,16 +211,16 @@ export class ProcessorBuilder {
     }
 
     private parseDeclaration(declaration: Declaration) {
-        const parseValue = (property: string, value: any) => {
+        const parseValue = (property: DeclarationProperty, value: any) => {
             if (property === 'animation') {
                 return this.CSS.processAnimation(value)
             }
 
-            return this.CSS.processValue(value)
+            return this.CSS.processValue(value, property)
         }
 
         if (declaration.property === 'unparsed') {
-            const property = declaration.value.propertyId.property
+            const property = declaration.value.propertyId.property as DeclarationProperty
 
             return {
                 property,
@@ -227,7 +229,7 @@ export class ProcessorBuilder {
         }
 
         if (declaration.property === 'custom') {
-            const property = declaration.value.name
+            const property = declaration.value.name as DeclarationProperty
 
             return {
                 property,
@@ -278,7 +280,7 @@ export class ProcessorBuilder {
                     if (selector.type === 'pseudo-class' && selector.kind === 'where') {
                         selector.selectors.forEach(selector => {
                             selector.forEach(selector => {
-                                if (selector.type === 'class' && this.themes.includes(selector.name)) {
+                                if (selector.type === 'class' && this.bundlerConfig.themes.includes(selector.name)) {
                                     theme = selector.name
                                 }
 

package/src/{metro/processor → bundler/css-processor}/rn.ts

@@ -1,6 +1,7 @@
-import { isDefined } from '../../common/utils'
-import { addMissingSpaces, pipe, removeKeys, toCamelCase } from '../utils'
+import { DEFAULT_SCREEN_HEIGHT, DEFAULT_SCREEN_WIDTH } from '@/common/consts'
+import { isDefined } from '@/common/utils'
 import type { ProcessorBuilder } from './processor'
+import { addMissingSpaces, pipe, removeKeys, toCamelCase } from './utils'
 
 const transitions: Record<string, any> = { overlay: '"overlayColor"' }
 
@@ -233,6 +234,59 @@ const BORDER_WIDTH_KEYS = ['borderTopWidth', 'borderRightWidth', 'borderBottomWi
 const BORDER_COLOR_KEYS = ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor']
 const BORDER_RADIUS_KEYS = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']
 
+const COMPONENT_RESPONSIVE_PROPS = new Set([
+    'width',
+    'height',
+    'minWidth',
+    'maxWidth',
+    'minHeight',
+    'maxHeight',
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingHorizontal',
+    'paddingVertical',
+    'paddingStart',
+    'paddingEnd',
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginHorizontal',
+    'marginVertical',
+    'marginStart',
+    'marginEnd',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'borderWidth',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderStartWidth',
+    'borderEndWidth',
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderTopStartRadius',
+    'borderTopEndRadius',
+    'borderBottomStartRadius',
+    'borderBottomEndRadius',
+    'flexBasis',
+    'translateX',
+    'translateY',
+])
+
 export class RN {
     constructor(private readonly Processor: ProcessorBuilder) {}
 
@@ -266,7 +320,46 @@ export class RN {
         )
         const joinedStyles = this.joinStyles(rn)
 
-        return Object.entries(joinedStyles).filter(([, value]) => isDefined(value)) as Array<[string, any]>
+        return Object.entries(joinedStyles)
+            .filter(([, value]) => isDefined(value))
+            .map(([prop, val]) => [prop, this.makeResponsive(prop, val)]) as Array<[string, any]>
+    }
+
+    private makeResponsive(property: string, value: any): any {
+        const mode = this.Processor.bundlerConfig.polyfills?.responsive
+
+        if (!mode) {
+            return value
+        }
+
+        if (typeof value === 'string') {
+            const rawValue = value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value
+
+            if (rawValue.endsWith('%')) {
+                const numValue = parseFloat(rawValue)
+
+                if (!isNaN(numValue)) {
+                    return `rt.makeResponsive(${numValue}, 100, true)`
+                }
+            }
+        }
+
+        if (typeof value !== 'number') {
+            return value
+        }
+
+        const isTextMode = mode === true || mode === 'text'
+        const isComponentMode = mode === true || mode === 'components'
+
+        if (isTextMode && (property === 'fontSize' || property === '--uniwind-em')) {
+            return `rt.makeResponsive(${value}, ${DEFAULT_SCREEN_HEIGHT}, true)`
+        }
+
+        if (isComponentMode && COMPONENT_RESPONSIVE_PROPS.has(property)) {
+            return `rt.makeResponsive(${value}, ${DEFAULT_SCREEN_WIDTH})`
+        }
+
+        return value
     }
 
     private transformProperty(property: string, value: any) {

package/src/{metro/utils → bundler/css-processor}/serialize.ts

@@ -1,5 +1,5 @@
-import { Logger } from '../logger'
-import { addMissingSpaces, isNumber, isValidJSValue, pipe, roundToPrecision, smartSplit } from './common'
+import { Logger } from '@/bundler/logger'
+import { addMissingSpaces, isNumber, isValidJSValue, pipe, roundToPrecision, smartSplit } from './utils'
 
 const parseStringValue = (value: string) => {
     if (isValidJSValue(value)) {

package/src/{metro → bundler/css-processor}/types.ts

@@ -1,3 +1,4 @@
+import type { ColorScheme, Orientation, Platform } from '@/common/consts'
 import type {
     AbsoluteFontWeight,
     Declaration,
@@ -11,23 +12,6 @@ import type {
     TokenOrValue,
     UnresolvedColor,
 } from 'lightningcss'
-import { Platform } from '../common/consts'
-import { ColorScheme, Orientation } from '../types'
-
-export type Polyfills = {
-    rem?: number
-}
-
-export type UniwindConfig = {
-    cssEntryFile: string
-    themes: Array<string>
-    extraThemes?: Array<string>
-    extraComponents?: Record<string, string>
-    dtsFile?: string
-    polyfills?: Polyfills
-    debug?: boolean
-    isTV?: boolean
-}
 
 export type MediaQueryResolver = {
     maxWidth: number | null
@@ -62,6 +46,8 @@ export type DeclarationValues =
     | AbsoluteFontWeight
     | UnresolvedColor
 
+export type DeclarationProperty = Declaration['property']
+
 export type ProcessMetaValues = {
     className?: string | null
 }

package/src/{metro/processor → bundler/css-processor}/units.ts

@@ -1,4 +1,4 @@
-import { DimensionPercentageFor_LengthValue, Length, LengthValue } from 'lightningcss'
+import type { DimensionPercentageFor_LengthValue, Length, LengthValue } from 'lightningcss'
 import { Logger } from '../logger'
 import type { ProcessorBuilder } from './processor'
 

package/src/{metro/processor → bundler/css-processor}/var.ts

@@ -1,4 +1,4 @@
-import { Variable } from 'lightningcss'
+import type { Variable } from 'lightningcss'
 import type { ProcessorBuilder } from './processor'
 
 export class Var {

package/src/{css-visitor → bundler/css-visitor}/function-visitor.ts

@@ -1,4 +1,4 @@
-import { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss'
+import type { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss'
 
 const ONE_PX = {
     type: 'token',

package/src/{css-visitor → bundler/css-visitor}/rule-visitor.ts

@@ -1,4 +1,5 @@
-import { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule, SelectorComponent } from 'lightningcss'
+import type { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule, SelectorComponent } from 'lightningcss'
+import type { UniwindBundlerConfig } from '../config'
 
 type LightningRuleVisitor = Rule<ReturnedDeclaration, ReturnedMediaQuery>
 type LightningRuleVisitors = Partial<
@@ -12,7 +13,7 @@ export class RuleVisitor implements LightningRuleVisitors {
     processedVariables = new Set<string>()
     currentLayerName = ''
 
-    constructor(private readonly themes: Array<string>) {}
+    constructor(private readonly bundlerConfig: UniwindBundlerConfig) {}
 
     'layer-block' = (layer: Extract<LightningRuleVisitor, { type: 'layer-block' }>) => {
         this.currentLayerName = layer.value.name?.join('') ?? ''
@@ -86,7 +87,7 @@ export class RuleVisitor implements LightningRuleVisitors {
             return styleRule
         }
 
-        const selectedVariant = this.themes.find(theme => whereSelector.name === theme)
+        const selectedVariant = this.bundlerConfig.themes.find(theme => whereSelector.name === theme)
 
         if (selectedVariant === undefined || this.processedVariables.has(selectedVariant)) {
             return styleRule
@@ -109,7 +110,7 @@ export class RuleVisitor implements LightningRuleVisitors {
         styleRule: Extract<LightningRuleVisitor, { type: 'style' }>,
         firstSelector: Extract<SelectorComponent, { type: 'class' }>,
     ): ReturnedRule | void {
-        const selectedVariant = this.themes.find(theme => firstSelector.name.includes(`${theme}:`))
+        const selectedVariant = this.bundlerConfig.themes.find(theme => firstSelector.name.includes(`${theme}:`))
 
         if (selectedVariant === undefined || this.processedClassNames.has(firstSelector.name)) {
             return
@@ -123,7 +124,7 @@ export class RuleVisitor implements LightningRuleVisitors {
                 loc: styleRule.value.loc,
                 rules: [styleRule],
                 scopeStart: [[{ type: 'class', name: selectedVariant }]],
-                scopeEnd: this.themes
+                scopeEnd: this.bundlerConfig.themes
                     .filter(theme => theme !== selectedVariant)
                     .map(theme => [{ type: 'class', name: theme }]),
             },

package/src/{css-visitor → bundler/css-visitor}/visitor.ts

@@ -1,4 +1,5 @@
-import { CustomAtRules, Visitor } from 'lightningcss'
+import type { CustomAtRules, Visitor } from 'lightningcss'
+import type { UniwindBundlerConfig } from '../config'
 import { FunctionVisitor } from './function-visitor'
 import { RuleVisitor } from './rule-visitor'
 
@@ -7,8 +8,8 @@ export class UniwindCSSVisitor implements Visitor<CustomAtRules> {
     Rule: Visitor<CustomAtRules>['Rule']
     StyleSheet: Visitor<CustomAtRules>['StyleSheet']
 
-    constructor(private readonly themes: Array<string>) {
-        const ruleVisitor = new RuleVisitor(this.themes)
+    constructor(bundlerConfig: UniwindBundlerConfig) {
+        const ruleVisitor = new RuleVisitor(bundlerConfig)
 
         this.Function = new FunctionVisitor()
         this.Rule = ruleVisitor

package/src/bundler/types.ts

@@ -0,0 +1,17 @@
+export type UniwindConfig = {
+    cssEntryFile: string
+    extraThemes?: Array<string>
+    extraComponents?: Record<string, string>
+    dtsFile?: string
+}
+
+export type Polyfills = {
+    rem?: number
+    responsive?: 'text' | 'components' | boolean
+}
+
+export type UniwindMetroConfig = UniwindConfig & {
+    polyfills?: Polyfills
+    debug?: boolean
+    isTV?: boolean
+}

package/src/common/consts.ts

@@ -10,3 +10,28 @@ export const enum Platform {
 
 export const UNIWIND_PLATFORM_VARIABLES = '__uniwind-platform-'
 export const UNIWIND_THEME_VARIABLES = '__uniwind-theme-'
+
+export enum StyleDependency {
+    ColorScheme = 1,
+    Theme = 2,
+    Dimensions = 3,
+    Orientation = 4,
+    Insets = 5,
+    FontScale = 6,
+    Rtl = 7,
+    AdaptiveThemes = 8,
+    Variables = 9,
+}
+
+export const enum Orientation {
+    Portrait = 'portrait',
+    Landscape = 'landscape',
+}
+
+export const enum ColorScheme {
+    Light = 'light',
+    Dark = 'dark',
+}
+
+export const DEFAULT_SCREEN_WIDTH = 375
+export const DEFAULT_SCREEN_HEIGHT = 680

package/src/components/ScopedTheme/ScopedTheme.native.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import { UniwindContext } from '../../core/context'
-import { ThemeName, UniwindContextType } from '../../core/types'
+import type { ThemeName, UniwindContextType } from '../../core/types'
 
 type ScopedThemeProps = {
     theme: ThemeName

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/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 { copyComponentProperties } from '../utils'
 import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/InputAccessoryView.tsx

@@ -1,5 +1,6 @@
-import { ForwardedRef } from 'react'
-import { InputAccessoryView as RNInputAccessoryView, InputAccessoryViewProps } from 'react-native'
+import type { ForwardedRef } from 'react'
+import type { InputAccessoryViewProps } from 'react-native'
+import { InputAccessoryView as RNInputAccessoryView } from 'react-native'
 import { copyComponentProperties } from '../utils'
 import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/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 { useStyle } from './useStyle'
 

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/Pressable.tsx

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

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/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 { useStyle } from './useStyle'
 

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/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 { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'

package/src/components/native/Switch.tsx

@@ -1,5 +1,6 @@
-import { Switch as RNSwitch, SwitchProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { SwitchProps } from 'react-native'
+import { Switch as RNSwitch } 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/Text.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { Text as RNText, TextProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { TextProps } from 'react-native'
+import { Text as RNText } 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/TextInput.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
-import { TextInput as RNTextInput, TextInputProps } from 'react-native'
-import { ComponentState } from '../../core/types'
+import type { TextInputProps } from 'react-native'
+import { TextInput as RNTextInput } 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/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'