@niibase/uniwind 1.6.0 → 1.6.2

package/src/components/native/SectionList.tsx

@@ -1,5 +1,6 @@
 import { SectionList as RNSectionList, SectionListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
@@ -7,7 +8,7 @@ export const SectionList = copyComponentProperties(RNSectionList, (props: Sectio
     const contentContainerStyle = useStyle(props.contentContainerClassName, props)
     const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props)
     const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
 
     return (
         <Component

package/src/components/native/Switch.tsx

@@ -1,6 +1,7 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
@@ -9,10 +10,10 @@ export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) =>
         isPressed: Boolean(props.value),
     } satisfies ComponentState
     const { Component, style } = useStyle(RNSwitch, props.className, props, state)
-    const trackColorOn = useStyle(props.trackColorOnClassName, props, state).accentColor
-    const trackColorOff = useStyle(props.trackColorOffClassName, props, state).accentColor
-    const thumbColor = useStyle(props.thumbColorClassName, props, state).accentColor
-    const ios_backgroundColor = useStyle(props.ios_backgroundColorClassName, props, state).accentColor
+    const trackColorOn = useAccentColor(props.trackColorOnClassName, props, state)
+    const trackColorOff = useAccentColor(props.trackColorOffClassName, props, state)
+    const thumbColor = useAccentColor(props.thumbColorClassName, props, state)
+    const ios_backgroundColor = useAccentColor(props.ios_backgroundColorClassName, props, state)
 
     return (
         <Component

package/src/components/native/Text.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Text as RNText, TextProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 type StyleWithWebkitLineClamp = {
@@ -15,7 +16,7 @@ export const Text = copyComponentProperties(RNText, (props: TextProps) => {
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
     const { Component, style } = useStyle(RNText, props.className, props, state)
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
 
     return (
         <Component

package/src/components/native/TextInput.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
@@ -13,11 +14,11 @@ export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputP
         isPressed,
     } satisfies ComponentState
     const { Component, style } = useStyle(RNTextInput, props.className, props, state)
-    const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
-    const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor
-    const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor
-    const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor
+    const cursorColor = useAccentColor(props.cursorColorClassName, props, state)
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
+    const placeholderTextColor = useAccentColor(props.placeholderTextColorClassName, props, state)
+    const selectionHandleColor = useAccentColor(props.selectionHandleColorClassName, props, state)
+    const underlineColorAndroid = useAccentColor(props.underlineColorAndroidClassName, props, state)
 
     return (
         <Component

package/src/components/native/TouchableHighlight.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
 import { ComponentState } from '../../core/types'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
@@ -13,7 +14,7 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
         isFocused,
     } satisfies ComponentState
     const { Component, style } = useStyle(RNTouchableHighlight, props.className, props, state)
-    const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor
+    const underlayColor = useAccentColor(props.underlayColorClassName, props, state)
 
     return (
         <Component

package/src/components/native/VirtualizedList.tsx

@@ -1,5 +1,6 @@
 import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props: VirtualizedListProps<unknown>) => {
@@ -7,7 +8,7 @@ export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props
     const contentContainerStyle = useStyle(props.contentContainerClassName, props)
     const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props)
     const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
 
     return (
         <Component

package/src/components/native/useAccentColor.ts

@@ -0,0 +1,19 @@
+import { isDefined } from '../../common/utils'
+import { Logger } from '../../core/logger'
+import { ComponentState } from '../../core/types'
+import { useStyle } from './useStyle'
+
+let warnedOnce = false
+
+export const useAccentColor = (className: string | undefined, componentProps: Record<string, any>, state?: ComponentState) => {
+    const styles = useStyle(className, componentProps, state)
+
+    if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && styles.accentColor === undefined) {
+        warnedOnce = true
+        Logger.warn(
+            `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+        )
+    }
+
+    return styles.accentColor
+}

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

@@ -1,5 +1,6 @@
 import { FlatListProps } from 'react-native'
 import { FlatList as RNGHFlatList } from 'react-native-gesture-handler'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
@@ -9,7 +10,7 @@ export const FlatList = copyComponentProperties(RNGHFlatList, (props: FlatListPr
     const styleContentContainer = useStyle(props.contentContainerClassName, props)
     const styleListFooterComponent = useStyle(props.ListFooterComponentClassName, props)
     const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName, props)
-    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
+    const endFillColor = useAccentColor(props.endFillColorClassName, props)
     const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
 
     return (

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

@@ -1,14 +1,15 @@
 import { RefreshControlProps } from 'react-native'
 import { RefreshControl as RNGHRefreshControl } from 'react-native-gesture-handler'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
 export const RefreshControl = copyComponentProperties(RNGHRefreshControl, (props: RefreshControlProps) => {
     const style = useStyle(props.className, props)
-    const color = useStyle(props.colorsClassName, props).accentColor
-    const tintColor = useStyle(props.tintColorClassName, props).accentColor
-    const titleColor = useStyle(props.titleColorClassName, props).accentColor
-    const progressBackgroundColor = useStyle(props.progressBackgroundColorClassName, props).accentColor
+    const color = useAccentColor(props.colorsClassName, props)
+    const tintColor = useAccentColor(props.tintColorClassName, props)
+    const titleColor = useAccentColor(props.titleColorClassName, props)
+    const progressBackgroundColor = useAccentColor(props.progressBackgroundColorClassName, props)
 
     return (
         <RNGHRefreshControl

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

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TextProps } from 'react-native'
 import { Text as RNGHText } from 'react-native-gesture-handler'
 import { ComponentState } from '../../../core/types'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
@@ -16,7 +17,7 @@ export const Text = copyComponentProperties(RNGHText, (props: TextProps) => {
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
     const style = useStyle(props.className, props, state)
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
 
     return (
         <RNGHText

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

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { TextInputProps } from 'react-native'
 import { TextInput as RNGHTextInput } from 'react-native-gesture-handler'
 import { ComponentState } from '../../../core/types'
+import { useAccentColor } from '../../native/useAccentColor'
 import { useStyle } from '../../native/useStyle'
 import { copyComponentProperties } from '../../utils'
 
@@ -15,10 +16,10 @@ export const TextInput = copyComponentProperties(RNGHTextInput, (props: TextInpu
     } satisfies ComponentState
     const style = useStyle(props.className, props, state)
     const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
-    const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor
-    const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor
-    const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor
+    const selectionColor = useAccentColor(props.selectionColorClassName, props, state)
+    const placeholderTextColor = useAccentColor(props.placeholderTextColorClassName, props, state)
+    const selectionHandleColor = useAccentColor(props.selectionHandleColorClassName, props, state)
+    const underlineColorAndroid = useAccentColor(props.underlineColorAndroidClassName, props, state)
 
     return (
         <RNGHTextInput

package/src/components/web/ActivityIndicator.tsx

@@ -1,8 +1,8 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
     const color = useUniwindAccent(props.colorClassName)

package/src/components/web/Button.tsx

@@ -1,7 +1,7 @@
 import { Button as RNButton, ButtonProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
     const color = useUniwindAccent(props.colorClassName)

package/src/components/web/Image.tsx

@@ -1,8 +1,9 @@
 import { Image as RNImage, ImageProps } from 'react-native'
-import { useResolveClassNames, useUniwindAccent } from '../../hooks'
+import { useResolveClassNames } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
     const tintColor = useUniwindAccent(props.tintColorClassName)

package/src/components/web/ImageBackground.tsx

@@ -1,8 +1,8 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
     const tintColor = useUniwindAccent(props.tintColorClassName)

package/src/components/web/Switch.tsx

@@ -1,8 +1,8 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
     const trackColorOn = useUniwindAccent(props.trackColorOnClassName)

package/src/components/web/TextInput.tsx

@@ -1,8 +1,8 @@
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
     const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName)

package/src/components/web/TouchableHighlight.tsx

@@ -1,8 +1,8 @@
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
+import { useUniwindAccent } from './useUniwindAccent'
 
 export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight, (props: TouchableHighlightProps) => {
     const underlayColor = useUniwindAccent(props.underlayColorClassName)

package/src/components/web/generateDataSet.ts

@@ -1,17 +1,19 @@
+const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+
 export const generateDataSet = (props: Record<PropertyKey, any>) => {
     const dataSet: DataSet = props.dataSet !== undefined ? { ...props.dataSet } : {}
 
     Object.entries(props).forEach(([key, value]) => {
         if (key.startsWith('data-')) {
             // Remove data- prefix
-            dataSet[key.slice(5)] = value
+            dataSet[toCamelCase(key.slice(5))] = value
         }
     })
 
     return dataSet
 }
 
-type DataSet = Record<string, string | boolean>
+type DataSet = Record<string, string | boolean | undefined>
 
 declare module 'react-native' {
     interface SwitchProps {

package/src/components/web/useUniwindAccent.ts

@@ -0,0 +1,21 @@
+import { isDefined } from '../../common/utils'
+import { Logger } from '../../core/logger'
+import { formatColor } from '../../core/web/formatColor'
+import { useResolveClassNames } from '../../hooks/useResolveClassNames'
+
+let warnedOnce = false
+
+export const useUniwindAccent = (className: string | undefined) => {
+    const styles = useResolveClassNames(className ?? '')
+
+    if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && styles.accentColor === undefined) {
+        warnedOnce = true
+        Logger.warn(
+            `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+        )
+    }
+
+    return styles.accentColor !== undefined
+        ? formatColor(styles.accentColor)
+        : undefined
+}

package/src/core/web/getWebStyles.ts

@@ -1,3 +1,4 @@
+import { generateDataSet } from '../../components/web/generateDataSet'
 import { RNStyle, UniwindContextType } from '../types'
 import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
@@ -52,7 +53,11 @@ const getActiveStylesForClass = (className: string) => {
     return extractedStyles
 }
 
-export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
+export const getWebStyles = (
+    className: string | undefined,
+    componentProps: Record<string, unknown> | undefined,
+    uniwindContext: UniwindContextType,
+): RNStyle => {
     if (className === undefined) {
         return {}
     }
@@ -69,8 +74,22 @@ export const getWebStyles = (className: string | undefined, uniwindContext: Uniw
 
     dummy.className = className
 
+    const dataSet = generateDataSet(componentProps ?? {})
+
+    Object.entries(dataSet).forEach(([key, value]) => {
+        if (value === false || value === undefined) {
+            return
+        }
+
+        dummy.dataset[key] = String(value)
+    })
+
     const computedStyles = getActiveStylesForClass(className)
 
+    Object.keys(dataSet).forEach(key => {
+        delete dummy.dataset[key]
+    })
+
     return Object.fromEntries(
         Object.entries(computedStyles)
             .map(([key, value]) => {

package/src/hoc/withUniwind.native.tsx

@@ -1,11 +1,15 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+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 { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
+let warnedOnce = false
+
 export const withUniwind: WithUniwind = <
     TComponent extends Component,
     TOptions extends Record<keyof ComponentProps<TComponent>, OptionMapping>,
@@ -26,7 +30,14 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
+
+            if (__DEV__ && !warnedOnce && isDefined(propValue) && propValue.trim() !== '' && styles.accentColor === undefined) {
+                warnedOnce = true
+                Logger.warn(
+                    `className '${propValue}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+                )
+            }
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[colorProp] = styles.accentColor
@@ -36,7 +47,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
         if (isClassProperty(propName)) {
             const styleProp = classToStyle(propName)
-            const { styles, dependencies } = UniwindStore.getStyles(propValue, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
             acc.dependencies.push(...dependencies)
             acc.generatedProps[styleProp] ??= []
@@ -90,7 +101,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+            const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
 
             acc.generatedProps[propName] = styles[option.styleProperty]
             acc.dependencies.push(...dependencies)
@@ -98,7 +109,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
             return acc
         }
 
-        const { styles, dependencies } = UniwindStore.getStyles(className, undefined, undefined, uniwindContext)
+        const { styles, dependencies } = UniwindStore.getStyles(className, props, undefined, uniwindContext)
         acc.dependencies.push(...dependencies)
 
         if (!isStyleProperty(propName)) {

package/src/hoc/withUniwind.tsx

@@ -1,9 +1,14 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { isDefined } from '../common/utils'
+import { generateDataSet } from '../components/web/generateDataSet'
 import { useUniwindContext } from '../core/context'
+import { Logger } from '../core/logger'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
+let warnedOnce = false
+
 export const withUniwind: WithUniwind = <
     TComponent extends Component,
     TOptions extends Record<keyof ComponentProps<TComponent>, OptionMapping>,
@@ -26,7 +31,14 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
             }
 
             const className = propValue
-            const color = getWebStyles(className, uniwindContext).accentColor
+            const color = getWebStyles(className, props, uniwindContext).accentColor
+
+            if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && color === undefined) {
+                warnedOnce = true
+                Logger.warn(
+                    `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+                )
+            }
 
             acc.generatedProps[colorProp] = color !== undefined
                 ? formatColor(color)
@@ -67,6 +79,7 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }
@@ -87,7 +100,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
                 return acc
             }
 
-            const value = getWebStyles(className, uniwindContext)[option.styleProperty]
+            const value = getWebStyles(className, props, uniwindContext)[option.styleProperty]
             const transformedValue = value !== undefined && option.styleProperty.toLowerCase().includes('color')
                 ? formatColor(value as string)
                 : value
@@ -115,6 +128,7 @@ const withManualUniwind = (Component: Component<AnyObject>, options: Record<Prop
         <Component
             {...props}
             {...generatedProps}
+            dataSet={generateDataSet(props)}
         />
     )
 }

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export * from './useCSSVariable'
 export * from './useResolveClassNames'
 export * from './useUniwind'
-export * from './useUniwindAccent'

package/src/hooks/useResolveClassNames.ts

@@ -8,9 +8,9 @@ const emptyState = {} as RNStyle
 export const useResolveClassNames = (className: string) => {
     const uniwindContext = useUniwindContext()
     const [styles, recreate] = useReducer(
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
         undefined,
-        () => className !== '' ? getWebStyles(className, uniwindContext) : emptyState,
+        () => className !== '' ? getWebStyles(className, undefined, uniwindContext) : emptyState,
     )
 
     useLayoutEffect(() => {

package/src/hooks/useUniwind.ts

@@ -5,7 +5,7 @@ import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
 import { StyleDependency } from '../types'
 
-export const useUniwind = () => {
+export const useUniwind = (): { theme: ThemeName; hasAdaptiveThemes: boolean } => {
     const uniwindContext = useUniwindContext()
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
@@ -26,7 +26,7 @@ export const useUniwind = () => {
     }, [uniwindContext])
 
     return {
-        theme: uniwindContext.scopedTheme ?? theme as ThemeName,
+        theme: uniwindContext.scopedTheme ?? theme,
         hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
     }
 }

package/src/metro/addMetaToStylesTemplate.ts

@@ -1,8 +1,9 @@
 import { Platform } from '../common/consts'
+import { isDefined } from '../common/utils'
 import { StyleDependency } from '../types'
 import { ProcessorBuilder } from './processor'
 import { StyleSheetTemplate } from './types'
-import { isDefined, serialize, toCamelCase } from './utils'
+import { serialize, toCamelCase } from './utils'
 
 const extractVarsFromString = (value: string) => {
     const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index)

package/src/metro/metro-transformer.ts

@@ -30,7 +30,7 @@ export const transform = async (
     data: Buffer,
     options: JsTransformOptions,
 ) => {
-    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(process.cwd(), filePath)
+    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(projectRoot, filePath)
 
     if (filePath.endsWith('/components/web/metro-injected.js')) {
         const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
@@ -75,7 +75,7 @@ export const transform = async (
         themes: config.uniwind.themes,
         dtsPath: config.uniwind.dtsFile,
     })
-    const css = fs.readFileSync(filePath, 'utf-8')
+    const css = fs.readFileSync(cssPath, 'utf-8')
     const platform = getPlatform()
     const virtualCode = await compileVirtual({
         css,

package/src/metro/processor/color.ts

@@ -57,8 +57,9 @@ export class Color {
                 })
             }
 
+            const colorType = color.type === 'display-p3' ? 'p3' : color.type
             const result = this.toRgb({
-                mode: color.type,
+                mode: colorType,
                 ...color,
             } as ColorType)
 

package/src/metro/processor/css.ts

@@ -1,9 +1,11 @@
 /* eslint-disable max-lines */
 
 import { Animation, Filter, OverflowKeyword, TokenOrValue } from 'lightningcss'
+
+import { isDefined } from '../../common/utils'
 import { Logger } from '../logger'
 import { DeclarationValues } from '../types'
-import { deepEqual, isDefined, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from '../utils'
+import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from '../utils'
 import { getProcessedAnimation, getProcessedVarAnimation } from './animation'
 import type { ProcessorBuilder } from './processor'
 

package/src/metro/processor/rn.ts

@@ -1,4 +1,5 @@
-import { addMissingSpaces, isDefined, pipe, removeKeys, toCamelCase } from '../utils'
+import { isDefined } from '../../common/utils'
+import { addMissingSpaces, pipe, removeKeys, toCamelCase } from '../utils'
 import type { ProcessorBuilder } from './processor'
 
 const transitions: Record<string, any> = { overlay: '"overlayColor"' }

package/src/metro/utils/common.ts

@@ -1,5 +1,3 @@
-export const isDefined = <T>(value: T): value is NonNullable<T> => value !== null && value !== undefined
-
 export const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
 
 type P<I, O> = (data: I) => O