feat: support data attributes

package.json

@@ -38,7 +38,7 @@
         "eslint": "9.39.1",
         "eslint-config-codemask": "2.2.1",
         "husky": "9.1.7",
-        "turbo": "2.6.3"
+        "turbo": "2.7.6"
     },
     "packageManager": "bun@1.3.2",
     "trustedDependencies": [

packages/uniwind/eslint.config.ts

@@ -17,6 +17,12 @@ export default [
             'nested-if/nested-if-statements': 'off',
             'no-continue': 'off',
             '@typescript-eslint/array-type': 'off',
+            '@typescript-eslint/no-unused-vars': ['error', {
+                'argsIgnorePattern': '^_',
+                'varsIgnorePattern': '^_',
+                'caughtErrorsIgnorePattern': '^_',
+            }],
+            'no-bitwise': 'off',
         },
     },
     {

packages/uniwind/src/components/native/ActivityIndicator.tsx

@@ -1,11 +1,10 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
-    const style = useStyle(props.className)
-    const color = useUniwindAccent(props.colorClassName)
+    const style = useStyle(props.className, props)
+    const color = useStyle(props.colorClassName, props).accentColor
 
     return (
         <RNActivityIndicator

packages/uniwind/src/components/native/Button.tsx

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

packages/uniwind/src/components/native/FlatList.tsx

@@ -1,15 +1,14 @@
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
-    const style = useStyle(props.className)
-    const styleColumnWrapper = useStyle(props.columnWrapperClassName)
-    const styleContentContainer = useStyle(props.contentContainerClassName)
-    const styleListFooterComponent = useStyle(props.ListFooterComponentClassName)
-    const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, props)
+    const styleColumnWrapper = useStyle(props.columnWrapperClassName, props)
+    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 hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
 
     return (

packages/uniwind/src/components/native/Image.tsx

@@ -1,11 +1,10 @@
 import { Image as RNImage, ImageProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
-    const style = useStyle(props.className)
-    const tintColor = useUniwindAccent(props.tintColorClassName)
+    const style = useStyle(props.className, props)
+    const tintColor = useStyle(props.tintColorClassName, props).accentColor
 
     return (
         <RNImage

packages/uniwind/src/components/native/ImageBackground.tsx

@@ -1,12 +1,11 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
-    const style = useStyle(props.className)
-    const imageStyle = useStyle(props.imageClassName)
-    const tintColor = useUniwindAccent(props.tintColorClassName)
+    const style = useStyle(props.className, props)
+    const imageStyle = useStyle(props.imageClassName, props)
+    const tintColor = useStyle(props.tintColorClassName, props).accentColor
 
     return (
         <RNImageBackground

packages/uniwind/src/components/native/InputAccessoryView.tsx

@@ -1,14 +1,13 @@
 import { ForwardedRef } from 'react'
 import { InputAccessoryView as RNInputAccessoryView, InputAccessoryViewProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const InputAccessoryView = copyComponentProperties(
     RNInputAccessoryView,
     (props: InputAccessoryViewProps & { ref?: ForwardedRef<RNInputAccessoryView> }) => {
-        const style = useStyle(props.className)
-        const backgroundColor = useUniwindAccent(props.backgroundColorClassName)
+        const style = useStyle(props.className, props)
+        const backgroundColor = useStyle(props.backgroundColorClassName, props).accentColor
 
         return (
             <RNInputAccessoryView

packages/uniwind/src/components/native/KeyboardAvoidingView.tsx

@@ -3,8 +3,8 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const KeyboardAvoidingView = copyComponentProperties(RNKeyboardAvoidingView, (props: KeyboardAvoidingViewProps) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
+    const style = useStyle(props.className, props)
+    const contentContainerStyle = useStyle(props.contentContainerClassName, props)
 
     return (
         <RNKeyboardAvoidingView

packages/uniwind/src/components/native/Modal.tsx

@@ -1,11 +1,10 @@
 import { Modal as RNModal, ModalProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
-    const style = useStyle(props.className)
-    const backdropColor = useUniwindAccent(props.backdropColorClassName)
+    const style = useStyle(props.className, props)
+    const backdropColor = useStyle(props.backdropColorClassName, props).accentColor
 
     return (
         <RNModal

packages/uniwind/src/components/native/Pressable.tsx

@@ -4,9 +4,13 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Pressable = copyComponentProperties(RNPressable, (props: PressableProps) => {
-    const style = useStyle(props.className, {
-        isDisabled: Boolean(props.disabled),
-    })
+    const style = useStyle(
+        props.className,
+        props,
+        {
+            isDisabled: Boolean(props.disabled),
+        },
+    )
 
     return (
         <RNPressable
@@ -16,6 +20,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
                     return [
                         UniwindStore.getStyles(
                             props.className,
+                            props,
                             { isDisabled: Boolean(props.disabled), isPressed: true },
                         ).styles,
                         typeof props.style === 'function' ? props.style(state) : props.style,

packages/uniwind/src/components/native/RefreshControl.tsx

@@ -1,14 +1,13 @@
 import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
-    const style = useStyle(props.className)
-    const color = useUniwindAccent(props.colorsClassName)
-    const tintColor = useUniwindAccent(props.tintColorClassName)
-    const titleColor = useUniwindAccent(props.titleColorClassName)
-    const progressBackgroundColor = useUniwindAccent(props.progressBackgroundColorClassName)
+    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
 
     return (
         <RNRefreshControl

packages/uniwind/src/components/native/SafeAreaView.tsx

@@ -3,7 +3,7 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const SafeAreaView = copyComponentProperties(RNSafeAreaView, (props: ViewProps) => {
-    const style = useStyle(props.className)
+    const style = useStyle(props.className, props)
 
     return (
         <RNSafeAreaView

packages/uniwind/src/components/native/ScrollView.tsx

@@ -1,12 +1,11 @@
 import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollViewProps) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, props)
+    const contentContainerStyle = useStyle(props.contentContainerClassName, props)
+    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
 
     return (
         <RNScrollView

packages/uniwind/src/components/native/SectionList.tsx

@@ -1,14 +1,13 @@
 import { SectionList as RNSectionList, SectionListProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
-    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName)
-    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, 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
 
     return (
         <RNSectionList

packages/uniwind/src/components/native/Switch.tsx

@@ -1,18 +1,17 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) => {
     const state = {
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const trackColorOn = useUniwindAccent(props.trackColorOnClassName, state)
-    const trackColorOff = useUniwindAccent(props.trackColorOffClassName, state)
-    const thumbColor = useUniwindAccent(props.thumbColorClassName, state)
-    const ios_backgroundColor = useUniwindAccent(props.ios_backgroundColorClassName, state)
+    const style = useStyle(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
 
     return (
         <RNSwitch

packages/uniwind/src/components/native/Text.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Text as RNText, TextProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -15,8 +14,8 @@ export const Text = copyComponentProperties(RNText, (props: TextProps) => {
         isPressed,
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+    const style = useStyle(props.className, props, state)
+    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
 
     return (
         <RNText

packages/uniwind/src/components/native/TextInput.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -13,12 +12,12 @@ export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputP
         isFocused,
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const cursorColor = useUniwindAccent(props.cursorColorClassName, state)
-    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
-    const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName, state)
-    const selectionHandleColor = useUniwindAccent(props.selectionHandleColorClassName, state)
-    const underlineColorAndroid = useUniwindAccent(props.underlineColorAndroidClassName, state)
+    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
 
     return (
         <RNTextInput

packages/uniwind/src/components/native/TouchableHighlight.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -11,8 +10,8 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const underlayColor = useUniwindAccent(props.underlayColorClassName, state)
+    const style = useStyle(props.className, props, state)
+    const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor
 
     return (
         <RNTouchableHighlight

packages/uniwind/src/components/native/TouchableNativeFeedback.tsx

@@ -10,7 +10,7 @@ export const TouchableNativeFeedback = copyComponentProperties(RNTouchableNative
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
+    const style = useStyle(props.className, props, state)
 
     return (
         <RNTouchableNativeFeedback

packages/uniwind/src/components/native/TouchableOpacity.tsx

@@ -10,7 +10,7 @@ export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (pro
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
+    const style = useStyle(props.className, props, state)
 
     return (
         <RNTouchableOpacity

packages/uniwind/src/components/native/TouchableWithoutFeedback.tsx

@@ -10,7 +10,7 @@ export const TouchableWithoutFeedback = copyComponentProperties(RNTouchableWitho
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
+    const style = useStyle(props.className, props, state)
 
     return (
         <RNTouchableWithoutFeedback