@niibase/uniwind 1.6.1 → 1.6.2

package/dist/module/components/web/useUniwindAccent.js

@@ -0,0 +1,15 @@
+import { isDefined } from "../../common/utils.js";
+import { Logger } from "../../core/logger.js";
+import { formatColor } from "../../core/web/formatColor.js";
+import { useResolveClassNames } from "../../hooks/useResolveClassNames.js";
+let warnedOnce = false;
+export const useUniwindAccent = (className) => {
+  const styles = useResolveClassNames(className ?? "");
+  if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== "" && styles.accentColor === void 0) {
+    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 !== void 0 ? formatColor(styles.accentColor) : void 0;
+};

package/dist/module/hoc/withUniwind.js

@@ -1,9 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { isDefined } from "../common/utils.js";
 import { generateDataSet } from "../components/web/generateDataSet.js";
 import { useUniwindContext } from "../core/context.js";
+import { Logger } from "../core/logger.js";
 import { CSSListener, formatColor, getWebStyles } from "../core/web/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
+let warnedOnce = false;
 export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 const withAutoUniwind = (Component2) => (props) => {
   const uniwindContext = useUniwindContext();
@@ -15,6 +18,12 @@ const withAutoUniwind = (Component2) => (props) => {
       }
       const className = propValue;
       const color = getWebStyles(className, props, uniwindContext).accentColor;
+      if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== "" && color === void 0) {
+        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 !== void 0 ? formatColor(color) : void 0;
       acc.classNames += `${className} `;
       return acc;

package/dist/module/hoc/withUniwind.native.js

@@ -1,9 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useReducer } from "react";
+import { isDefined } from "../common/utils.js";
 import { useUniwindContext } from "../core/context.js";
 import { UniwindListener } from "../core/listener.js";
+import { Logger } from "../core/logger.js";
 import { UniwindStore } from "../core/native/index.js";
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from "./withUniwindUtils.js";
+let warnedOnce = false;
 export const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
 const withAutoUniwind = (Component2) => (props) => {
   const uniwindContext = useUniwindContext();
@@ -14,6 +17,12 @@ const withAutoUniwind = (Component2) => (props) => {
         return acc;
       }
       const { styles, dependencies: dependencies2 } = UniwindStore.getStyles(propValue, props, void 0, uniwindContext);
+      if (__DEV__ && !warnedOnce && isDefined(propValue) && propValue.trim() !== "" && styles.accentColor === void 0) {
+        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(...dependencies2);
       acc.generatedProps[colorProp] = styles.accentColor;
       return acc;

package/dist/module/hooks/index.d.ts

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

package/dist/module/hooks/index.js

@@ -1,4 +1,3 @@
 export * from "./useCSSVariable/index.js";
 export * from "./useResolveClassNames.js";
 export * from "./useUniwind.js";
-export * from "./useUniwindAccent.js";

package/dist/shared/{uniwind.C-rHhHOg.mjs → uniwind.BGiqYvxb.mjs}

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import { compile } from '@tailwindcss/node';
 import { transform } from 'lightningcss';
-import { n as name } from './uniwind.F-0-Rr--.mjs';
+import { n as name } from './uniwind.PtWWxxnh.mjs';
 
 const red = "\x1B[91m";
 const yellow = "\x1B[33m";

package/dist/shared/{uniwind.nl8746mK.cjs → uniwind.Cv73KtI-.cjs}

@@ -2,7 +2,6 @@
 
 const name = "@niibase/uniwind";
 
-const isDefined = (value) => value !== null && value !== void 0;
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const pipe = (data) => ((...fns) => fns.reduce((acc, fn) => fn(acc), data));
 const isNumber = (data) => {
@@ -75,7 +74,6 @@ const removeKeys = (obj, keysToRemove) => Object.fromEntries(
 
 exports.addMissingSpaces = addMissingSpaces;
 exports.deepEqual = deepEqual;
-exports.isDefined = isDefined;
 exports.isNumber = isNumber;
 exports.isValidJSValue = isValidJSValue;
 exports.name = name;

package/dist/shared/{uniwind.F-0-Rr--.mjs → uniwind.PtWWxxnh.mjs}

@@ -1,6 +1,5 @@
 const name = "@niibase/uniwind";
 
-const isDefined = (value) => value !== null && value !== void 0;
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const pipe = (data) => ((...fns) => fns.reduce((acc, fn) => fn(acc), data));
 const isNumber = (data) => {
@@ -71,4 +70,4 @@ const removeKeys = (obj, keysToRemove) => Object.fromEntries(
   Object.entries(obj).filter(([key]) => !keysToRemove.includes(key))
 );
 
-export { isValidJSValue as a, addMissingSpaces as b, isDefined as c, deepEqual as d, shouldBeSerialized as e, removeKeys as f, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };
+export { isValidJSValue as a, addMissingSpaces as b, shouldBeSerialized as c, deepEqual as d, removeKeys as e, isNumber as i, name as n, pipe as p, roundToPrecision as r, smartSplit as s, toCamelCase as t, uniq as u };

package/dist/shared/{uniwind.BZyFsest.cjs → uniwind.r2i22V6d.cjs}

@@ -4,7 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const node = require('@tailwindcss/node');
 const lightningcss = require('lightningcss');
-const common = require('./uniwind.nl8746mK.cjs');
+const common = require('./uniwind.Cv73KtI-.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 

package/dist/vite/index.cjs

@@ -2,8 +2,8 @@
 
 const node = require('@tailwindcss/node');
 const path = require('path');
-const common = require('../shared/uniwind.nl8746mK.cjs');
-const stringifyThemes = require('../shared/uniwind.BZyFsest.cjs');
+const common = require('../shared/uniwind.Cv73KtI-.cjs');
+const stringifyThemes = require('../shared/uniwind.r2i22V6d.cjs');
 require('fs');
 require('lightningcss');
 

package/dist/vite/index.mjs

@@ -1,7 +1,7 @@
 import { normalizePath } from '@tailwindcss/node';
 import path from 'path';
-import { u as uniq, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
-import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.C-rHhHOg.mjs';
+import { u as uniq, n as name } from '../shared/uniwind.PtWWxxnh.mjs';
+import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.BGiqYvxb.mjs';
 import 'fs';
 import 'lightningcss';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.6.1",
+    "version": "1.6.2",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",

package/src/common/utils.ts

@@ -0,0 +1 @@
+export const isDefined = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null

package/src/components/native/ActivityIndicator.tsx

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

package/src/components/native/Button.tsx

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

package/src/components/native/FlatList.tsx

@@ -1,5 +1,6 @@
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
@@ -8,7 +9,7 @@ export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProp
     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/native/Image.tsx

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

package/src/components/native/ImageBackground.tsx

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

package/src/components/native/InputAccessoryView.tsx

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

package/src/components/native/Modal.tsx

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

package/src/components/native/RefreshControl.tsx

@@ -1,15 +1,16 @@
 import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { useAccentColor } from './useAccentColor'
 import { useStyle } from './useStyle'
 
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
     const { Component, style } = useStyle(RNRefreshControl, props.className, props, {
         isPressed: Boolean(props.refreshing),
     })
-    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 (
         <Component

package/src/components/native/ScrollView.tsx

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

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)