@niibase/uniwind 1.6.0 → 1.6.2

package/CHANGELOG.md

@@ -1,3 +1,48 @@
+## What's Changed in 1.6.2
+
+
+
+### 🐛 Bug Fixes
+
+* remove android specific component file for text input by @divineniiquaye
+* resolve accent colors via useAccentColor (rngh) by @divineniiquaye
+* read absolute cssPath instead of relative one in metro-transformer (#485) by @Brentlok
+* css file transforming for special setups (#483) by @Brentlok
+
+### 🏠 Chores
+
+* add missing accent-* warning in dev (#479) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'orig' by @divineniiquaye
+* fix generating changelog was missing new lines in groups (#478) by @Brentlok
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.1...v1.6.2
+
+
+## What's Changed in 1.6.1
+
+
+
+### 🐛 Bug Fixes
+
+* pass data attributes to withUniwind (#477) by @Brentlok
+* p3 color parsing (#476) by @Brentlok
+
+### 🧪 Testing
+
+* advanced type check for ThemeName (#465) by @Brentlok
+
+### 📦 Other
+
+* Merge branch 'prepare-release' by @divineniiquaye
+
+
+**Full Changelog**: https://github.com/divineniiquaye/uniwind/compare/v1.6.0...v1.6.1
+
+
 ## What's Changed in 1.6.0
 
 

package/dist/common/common/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDefined = void 0;
+const isDefined = value => value !== void 0 && value !== null;
+exports.isDefined = isDefined;

package/dist/common/components/native/ActivityIndicator.js

@@ -7,6 +7,7 @@ module.exports = exports.ActivityIndicator = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const ActivityIndicator = exports.ActivityIndicator = (0, _utils.copyComponentProperties)(_reactNative.ActivityIndicator, props => {
   const {
@@ -15,7 +16,7 @@ const ActivityIndicator = exports.ActivityIndicator = (0, _utils.copyComponentPr
   } = (0, _useStyle.useStyle)(_reactNative.ActivityIndicator, props.className, props, {
     isPressed: Boolean(props.animating)
   });
-  const color = (0, _useStyle.useStyle)(props.colorClassName, props).accentColor;
+  const color = (0, _useAccentColor.useAccentColor)(props.colorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/Button.js

@@ -7,9 +7,9 @@ module.exports = exports.Button = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
-var _useStyle = require("./useStyle");
+var _useAccentColor = require("./useAccentColor");
 const Button = exports.Button = (0, _utils.copyComponentProperties)(_reactNative.Button, props => {
-  const color = (0, _useStyle.useStyle)(props.colorClassName, props).accentColor;
+  const color = (0, _useAccentColor.useAccentColor)(props.colorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Button, {
     ...props,
     color: props.color ?? color

package/dist/common/components/native/FlatList.js

@@ -7,6 +7,7 @@ module.exports = exports.FlatList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const FlatList = exports.FlatList = (0, _utils.copyComponentProperties)(_reactNative.FlatList, props => {
   const {
@@ -17,7 +18,7 @@ const FlatList = exports.FlatList = (0, _utils.copyComponentProperties)(_reactNa
   const styleContentContainer = (0, _useStyle.useStyle)(props.contentContainerClassName, props);
   const styleListFooterComponent = (0, _useStyle.useStyle)(props.ListFooterComponentClassName, props);
   const styleListHeaderComponent = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName, props);
-  const endFillColor = (0, _useStyle.useStyle)(props.endFillColorClassName, props).accentColor;
+  const endFillColor = (0, _useAccentColor.useAccentColor)(props.endFillColorClassName, props);
   const hasSingleColumn = !("numColumns" in props) || props.numColumns === 1;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,

package/dist/common/components/native/Image.js

@@ -7,13 +7,14 @@ module.exports = exports.Image = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const Image = exports.Image = (0, _utils.copyComponentProperties)(_reactNative.Image, props => {
   const {
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.Image, props.className, props);
-  const tintColor = (0, _useStyle.useStyle)(props.tintColorClassName, props).accentColor;
+  const tintColor = (0, _useAccentColor.useAccentColor)(props.tintColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/ImageBackground.js

@@ -7,6 +7,7 @@ module.exports = exports.ImageBackground = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const ImageBackground = exports.ImageBackground = (0, _utils.copyComponentProperties)(_reactNative.ImageBackground, props => {
   const {
@@ -14,7 +15,7 @@ const ImageBackground = exports.ImageBackground = (0, _utils.copyComponentProper
     style
   } = (0, _useStyle.useStyle)(_reactNative.ImageBackground, props.className, props);
   const imageStyle = (0, _useStyle.useStyle)(props.imageClassName, props);
-  const tintColor = (0, _useStyle.useStyle)(props.tintColorClassName, props).accentColor;
+  const tintColor = (0, _useAccentColor.useAccentColor)(props.tintColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/InputAccessoryView.js

@@ -7,13 +7,14 @@ module.exports = exports.InputAccessoryView = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const InputAccessoryView = exports.InputAccessoryView = (0, _utils.copyComponentProperties)(_reactNative.InputAccessoryView, props => {
   const {
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.InputAccessoryView, props.className, props);
-  const backgroundColor = (0, _useStyle.useStyle)(props.backgroundColorClassName, props).accentColor;
+  const backgroundColor = (0, _useAccentColor.useAccentColor)(props.backgroundColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     backgroundColor: props.backgroundColor ?? backgroundColor,

package/dist/common/components/native/Modal.js

@@ -7,13 +7,14 @@ module.exports = exports.Modal = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const Modal = exports.Modal = (0, _utils.copyComponentProperties)(_reactNative.Modal, props => {
   const {
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.Modal, props.className, props);
-  const backdropColor = (0, _useStyle.useStyle)(props.backdropColorClassName, props).accentColor;
+  const backdropColor = (0, _useAccentColor.useAccentColor)(props.backdropColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/RefreshControl.js

@@ -7,6 +7,7 @@ module.exports = exports.RefreshControl = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const RefreshControl = exports.RefreshControl = (0, _utils.copyComponentProperties)(_reactNative.RefreshControl, props => {
   const {
@@ -15,10 +16,10 @@ const RefreshControl = exports.RefreshControl = (0, _utils.copyComponentProperti
   } = (0, _useStyle.useStyle)(_reactNative.RefreshControl, props.className, props, {
     isPressed: Boolean(props.refreshing)
   });
-  const color = (0, _useStyle.useStyle)(props.colorsClassName, props).accentColor;
-  const tintColor = (0, _useStyle.useStyle)(props.tintColorClassName, props).accentColor;
-  const titleColor = (0, _useStyle.useStyle)(props.titleColorClassName, props).accentColor;
-  const progressBackgroundColor = (0, _useStyle.useStyle)(props.progressBackgroundColorClassName, props).accentColor;
+  const color = (0, _useAccentColor.useAccentColor)(props.colorsClassName, props);
+  const tintColor = (0, _useAccentColor.useAccentColor)(props.tintColorClassName, props);
+  const titleColor = (0, _useAccentColor.useAccentColor)(props.titleColorClassName, props);
+  const progressBackgroundColor = (0, _useAccentColor.useAccentColor)(props.progressBackgroundColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/ScrollView.js

@@ -7,6 +7,7 @@ module.exports = exports.ScrollView = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const ScrollView = exports.ScrollView = (0, _utils.copyComponentProperties)(_reactNative.ScrollView, props => {
   const {
@@ -14,7 +15,7 @@ const ScrollView = exports.ScrollView = (0, _utils.copyComponentProperties)(_rea
     style
   } = (0, _useStyle.useStyle)(_reactNative.ScrollView, props.className, props);
   const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName, props);
-  const endFillColor = (0, _useStyle.useStyle)(props.endFillColorClassName, props).accentColor;
+  const endFillColor = (0, _useAccentColor.useAccentColor)(props.endFillColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/SectionList.js

@@ -7,6 +7,7 @@ module.exports = exports.SectionList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const SectionList = exports.SectionList = (0, _utils.copyComponentProperties)(_reactNative.SectionList, props => {
   const {
@@ -16,7 +17,7 @@ const SectionList = exports.SectionList = (0, _utils.copyComponentProperties)(_r
   const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName, props);
   const listFooterComponentStyle = (0, _useStyle.useStyle)(props.ListFooterComponentClassName, props);
   const listHeaderComponentStyle = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName, props);
-  const endFillColor = (0, _useStyle.useStyle)(props.endFillColorClassName, props).accentColor;
+  const endFillColor = (0, _useAccentColor.useAccentColor)(props.endFillColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/Switch.js

@@ -7,6 +7,7 @@ module.exports = exports.Switch = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const Switch = exports.Switch = (0, _utils.copyComponentProperties)(_reactNative.Switch, props => {
   const state = {
@@ -17,10 +18,10 @@ const Switch = exports.Switch = (0, _utils.copyComponentProperties)(_reactNative
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.Switch, props.className, props, state);
-  const trackColorOn = (0, _useStyle.useStyle)(props.trackColorOnClassName, props, state).accentColor;
-  const trackColorOff = (0, _useStyle.useStyle)(props.trackColorOffClassName, props, state).accentColor;
-  const thumbColor = (0, _useStyle.useStyle)(props.thumbColorClassName, props, state).accentColor;
-  const ios_backgroundColor = (0, _useStyle.useStyle)(props.ios_backgroundColorClassName, props, state).accentColor;
+  const trackColorOn = (0, _useAccentColor.useAccentColor)(props.trackColorOnClassName, props, state);
+  const trackColorOff = (0, _useAccentColor.useAccentColor)(props.trackColorOffClassName, props, state);
+  const thumbColor = (0, _useAccentColor.useAccentColor)(props.thumbColorClassName, props, state);
+  const ios_backgroundColor = (0, _useAccentColor.useAccentColor)(props.ios_backgroundColorClassName, props, state);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/Text.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const Text = exports.Text = (0, _utils.copyComponentProperties)(_reactNative.Text, props => {
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
@@ -19,7 +20,7 @@ const Text = exports.Text = (0, _utils.copyComponentProperties)(_reactNative.Tex
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.Text, props.className, props, state);
-  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
+  const selectionColor = (0, _useAccentColor.useAccentColor)(props.selectionColorClassName, props, state);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/TextInput.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_reactNative.TextInput, props => {
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
@@ -21,11 +22,11 @@ const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_react
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.TextInput, props.className, props, state);
-  const cursorColor = (0, _useStyle.useStyle)(props.cursorColorClassName, props, state).accentColor;
-  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
-  const placeholderTextColor = (0, _useStyle.useStyle)(props.placeholderTextColorClassName, props, state).accentColor;
-  const selectionHandleColor = (0, _useStyle.useStyle)(props.selectionHandleColorClassName, props, state).accentColor;
-  const underlineColorAndroid = (0, _useStyle.useStyle)(props.underlineColorAndroidClassName, props, state).accentColor;
+  const cursorColor = (0, _useAccentColor.useAccentColor)(props.cursorColorClassName, props, state);
+  const selectionColor = (0, _useAccentColor.useAccentColor)(props.selectionColorClassName, props, state);
+  const placeholderTextColor = (0, _useAccentColor.useAccentColor)(props.placeholderTextColorClassName, props, state);
+  const selectionHandleColor = (0, _useAccentColor.useAccentColor)(props.selectionHandleColorClassName, props, state);
+  const underlineColorAndroid = (0, _useAccentColor.useAccentColor)(props.underlineColorAndroidClassName, props, state);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/TouchableHighlight.js

@@ -8,6 +8,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponentProperties)(_reactNative.TouchableHighlight, props => {
   const [isPressed, setIsPressed] = (0, _react.useState)(false);
@@ -21,7 +22,7 @@ const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponent
     Component,
     style
   } = (0, _useStyle.useStyle)(_reactNative.TouchableHighlight, props.className, props, state);
-  const underlayColor = (0, _useStyle.useStyle)(props.underlayColorClassName, props, state).accentColor;
+  const underlayColor = (0, _useAccentColor.useAccentColor)(props.underlayColorClassName, props, state);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/VirtualizedList.js

@@ -7,6 +7,7 @@ module.exports = exports.VirtualizedList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
 var _utils = require("../utils");
+var _useAccentColor = require("./useAccentColor");
 var _useStyle = require("./useStyle");
 const VirtualizedList = exports.VirtualizedList = (0, _utils.copyComponentProperties)(_reactNative.VirtualizedList, props => {
   const {
@@ -16,7 +17,7 @@ const VirtualizedList = exports.VirtualizedList = (0, _utils.copyComponentProper
   const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName, props);
   const listFooterComponentStyle = (0, _useStyle.useStyle)(props.ListFooterComponentClassName, props);
   const listHeaderComponentStyle = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName, props);
-  const endFillColor = (0, _useStyle.useStyle)(props.endFillColorClassName, props).accentColor;
+  const endFillColor = (0, _useAccentColor.useAccentColor)(props.endFillColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],

package/dist/common/components/native/useAccentColor.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAccentColor = void 0;
+var _utils = require("../../common/utils");
+var _logger = require("../../core/logger");
+var _useStyle = require("./useStyle");
+let warnedOnce = false;
+const useAccentColor = (className, componentProps, state) => {
+  const styles = (0, _useStyle.useStyle)(className, componentProps, state);
+  if (__DEV__ && !warnedOnce && (0, _utils.isDefined)(className) && className.trim() !== "" && styles.accentColor === void 0) {
+    warnedOnce = true;
+    _logger.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;
+};
+exports.useAccentColor = useAccentColor;

package/dist/common/components/react-native-gesture-handler/native/FlatList.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.FlatList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _useAccentColor = require("../../native/useAccentColor");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const FlatList = exports.FlatList = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.FlatList, props => {
@@ -14,7 +15,7 @@ const FlatList = exports.FlatList = (0, _utils.copyComponentProperties)(_reactNa
   const styleContentContainer = (0, _useStyle.useStyle)(props.contentContainerClassName, props);
   const styleListFooterComponent = (0, _useStyle.useStyle)(props.ListFooterComponentClassName, props);
   const styleListHeaderComponent = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName, props);
-  const endFillColor = (0, _useStyle.useStyle)(props.endFillColorClassName, props).accentColor;
+  const endFillColor = (0, _useAccentColor.useAccentColor)(props.endFillColorClassName, props);
   const hasSingleColumn = !("numColumns" in props) || props.numColumns === 1;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.FlatList, {
     ...props,

package/dist/common/components/react-native-gesture-handler/native/RefreshControl.js

@@ -6,14 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.RefreshControl = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _useAccentColor = require("../../native/useAccentColor");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const RefreshControl = exports.RefreshControl = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.RefreshControl, props => {
   const style = (0, _useStyle.useStyle)(props.className, props);
-  const color = (0, _useStyle.useStyle)(props.colorsClassName, props).accentColor;
-  const tintColor = (0, _useStyle.useStyle)(props.tintColorClassName, props).accentColor;
-  const titleColor = (0, _useStyle.useStyle)(props.titleColorClassName, props).accentColor;
-  const progressBackgroundColor = (0, _useStyle.useStyle)(props.progressBackgroundColorClassName, props).accentColor;
+  const color = (0, _useAccentColor.useAccentColor)(props.colorsClassName, props);
+  const tintColor = (0, _useAccentColor.useAccentColor)(props.tintColorClassName, props);
+  const titleColor = (0, _useAccentColor.useAccentColor)(props.titleColorClassName, props);
+  const progressBackgroundColor = (0, _useAccentColor.useAccentColor)(props.progressBackgroundColorClassName, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.RefreshControl, {
     ...props,
     style: [style, props.style],

package/dist/common/components/react-native-gesture-handler/native/Text.js

@@ -7,6 +7,7 @@ module.exports = exports.Text = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _useAccentColor = require("../../native/useAccentColor");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const Text = exports.Text = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.Text, props => {
@@ -16,7 +17,7 @@ const Text = exports.Text = (0, _utils.copyComponentProperties)(_reactNativeGest
     isDisabled: Boolean(props.disabled)
   };
   const style = (0, _useStyle.useStyle)(props.className, props, state);
-  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
+  const selectionColor = (0, _useAccentColor.useAccentColor)(props.selectionColorClassName, props, state);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.Text, {
     ...props,
     style: [style, props.style],

package/dist/common/components/react-native-gesture-handler/native/TextInput.js

@@ -7,6 +7,7 @@ module.exports = exports.TextInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _useAccentColor = require("../../native/useAccentColor");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.TextInput, props => {
@@ -19,10 +20,10 @@ const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_react
   };
   const style = (0, _useStyle.useStyle)(props.className, props, state);
   const cursorColor = (0, _useStyle.useStyle)(props.cursorColorClassName, props, state).accentColor;
-  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
-  const placeholderTextColor = (0, _useStyle.useStyle)(props.placeholderTextColorClassName, props, state).accentColor;
-  const selectionHandleColor = (0, _useStyle.useStyle)(props.selectionHandleColorClassName, props, state).accentColor;
-  const underlineColorAndroid = (0, _useStyle.useStyle)(props.underlineColorAndroidClassName, props, state).accentColor;
+  const selectionColor = (0, _useAccentColor.useAccentColor)(props.selectionColorClassName, props, state);
+  const placeholderTextColor = (0, _useAccentColor.useAccentColor)(props.placeholderTextColorClassName, props, state);
+  const selectionHandleColor = (0, _useAccentColor.useAccentColor)(props.selectionHandleColorClassName, props, state);
+  const underlineColorAndroid = (0, _useAccentColor.useAccentColor)(props.underlineColorAndroidClassName, props, state);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.TextInput, {
     ...props,
     style: [style, props.style],

package/dist/common/components/web/ActivityIndicator.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.ActivityIndicator = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
 var _rnw = require("./rnw");
+var _useUniwindAccent = require("./useUniwindAccent");
 const ActivityIndicator = exports.ActivityIndicator = (0, _utils.copyComponentProperties)(_reactNative.ActivityIndicator, props => {
-  const color = (0, _hooks.useUniwindAccent)(props.colorClassName);
+  const color = (0, _useUniwindAccent.useUniwindAccent)(props.colorClassName);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
     ...props,
     style: [(0, _rnw.toRNWClassName)(props.className), props.style],

package/dist/common/components/web/Button.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Button = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
+var _useUniwindAccent = require("./useUniwindAccent");
 const Button = exports.Button = (0, _utils.copyComponentProperties)(_reactNative.Button, props => {
-  const color = (0, _hooks.useUniwindAccent)(props.colorClassName);
+  const color = (0, _useUniwindAccent.useUniwindAccent)(props.colorClassName);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Button, {
     ...props,
     color: props.color ?? color,

package/dist/common/components/web/Image.js

@@ -10,8 +10,9 @@ var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
 var _rnw = require("./rnw");
+var _useUniwindAccent = require("./useUniwindAccent");
 const Image = exports.Image = (0, _utils.copyComponentProperties)(_reactNative.Image, props => {
-  const tintColor = (0, _hooks.useUniwindAccent)(props.tintColorClassName);
+  const tintColor = (0, _useUniwindAccent.useUniwindAccent)(props.tintColorClassName);
   const styles = (0, _hooks.useResolveClassNames)(props.className ?? "");
   const isUsingWidth = styles.width !== void 0;
   const isUsingHeight = styles.height !== void 0;

package/dist/common/components/web/ImageBackground.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.ImageBackground = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
 var _rnw = require("./rnw");
+var _useUniwindAccent = require("./useUniwindAccent");
 const ImageBackground = exports.ImageBackground = (0, _utils.copyComponentProperties)(_reactNative.ImageBackground, props => {
-  const tintColor = (0, _hooks.useUniwindAccent)(props.tintColorClassName);
+  const tintColor = (0, _useUniwindAccent.useUniwindAccent)(props.tintColorClassName);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.ImageBackground, {
     ...props,
     style: [(0, _rnw.toRNWClassName)(props.className), props.style],

package/dist/common/components/web/Switch.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Switch = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
 var _rnw = require("./rnw");
+var _useUniwindAccent = require("./useUniwindAccent");
 const Switch = exports.Switch = (0, _utils.copyComponentProperties)(_reactNative.Switch, props => {
-  const trackColorOn = (0, _hooks.useUniwindAccent)(props.trackColorOnClassName);
-  const trackColorOff = (0, _hooks.useUniwindAccent)(props.trackColorOffClassName);
-  const thumbColor = (0, _hooks.useUniwindAccent)(props.thumbColorClassName);
+  const trackColorOn = (0, _useUniwindAccent.useUniwindAccent)(props.trackColorOnClassName);
+  const trackColorOff = (0, _useUniwindAccent.useUniwindAccent)(props.trackColorOffClassName);
+  const thumbColor = (0, _useUniwindAccent.useUniwindAccent)(props.thumbColorClassName);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Switch, {
     ...props,
     style: [(0, _rnw.toRNWClassName)(props.className), props.style],

package/dist/common/components/web/TextInput.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.TextInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
 var _rnw = require("./rnw");
+var _useUniwindAccent = require("./useUniwindAccent");
 const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_reactNative.TextInput, props => {
-  const placeholderTextColor = (0, _hooks.useUniwindAccent)(props.placeholderTextColorClassName);
+  const placeholderTextColor = (0, _useUniwindAccent.useUniwindAccent)(props.placeholderTextColorClassName);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
     ...props,
     style: [(0, _rnw.toRNWClassName)(props.className), props.style],

package/dist/common/components/web/TouchableHighlight.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.TouchableHighlight = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _generateDataSet = require("./generateDataSet");
 var _rnw = require("./rnw");
+var _useUniwindAccent = require("./useUniwindAccent");
 const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponentProperties)(_reactNative.TouchableHighlight, props => {
-  const underlayColor = (0, _hooks.useUniwindAccent)(props.underlayColorClassName);
+  const underlayColor = (0, _useUniwindAccent.useUniwindAccent)(props.underlayColorClassName);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TouchableHighlight, {
     ...props,
     style: [(0, _rnw.toRNWClassName)(props.className), props.style],

package/dist/common/components/web/generateDataSet.js

@@ -4,13 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateDataSet = void 0;
+const toCamelCase = str => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
 const generateDataSet = props => {
   const dataSet = props.dataSet !== void 0 ? {
     ...props.dataSet
   } : {};
   Object.entries(props).forEach(([key, value]) => {
     if (key.startsWith("data-")) {
-      dataSet[key.slice(5)] = value;
+      dataSet[toCamelCase(key.slice(5))] = value;
     }
   });
   return dataSet;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUniwindAccent = void 0;
+var _utils = require("../../common/utils");
+var _logger = require("../../core/logger");
+var _formatColor = require("../../core/web/formatColor");
+var _useResolveClassNames = require("../../hooks/useResolveClassNames");
+let warnedOnce = false;
+const useUniwindAccent = className => {
+  const styles = (0, _useResolveClassNames.useResolveClassNames)(className ?? "");
+  if (__DEV__ && !warnedOnce && (0, _utils.isDefined)(className) && className.trim() !== "" && styles.accentColor === void 0) {
+    warnedOnce = true;
+    _logger.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 ? (0, _formatColor.formatColor)(styles.accentColor) : void 0;
+};
+exports.useUniwindAccent = useUniwindAccent;