@niibase/uniwind 1.1.6 → 1.1.8

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

@@ -6,13 +6,17 @@ 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 _useStyle = require("./useStyle");
 const ActivityIndicator = exports.ActivityIndicator = (0, _utils.copyComponentProperties)(_reactNative.ActivityIndicator, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const color = (0, _hooks.useUniwindAccent)(props.colorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.ActivityIndicator, props.className, props, {
+    isPressed: Boolean(props.animating)
+  });
+  const color = (0, _useStyle.useStyle)(props.colorClassName, props).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     color: props.color ?? color

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

@@ -6,10 +6,10 @@ 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 _useStyle = require("./useStyle");
 const Button = exports.Button = (0, _utils.copyComponentProperties)(_reactNative.Button, props => {
-  const color = (0, _hooks.useUniwindAccent)(props.colorClassName);
+  const color = (0, _useStyle.useStyle)(props.colorClassName, props).accentColor;
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Button, {
     ...props,
     color: props.color ?? color

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

@@ -6,18 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.FlatList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const FlatList = exports.FlatList = (0, _utils.copyComponentProperties)(_reactNative.FlatList, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const styleColumnWrapper = (0, _useStyle.useStyle)(props.columnWrapperClassName);
-  const styleContentContainer = (0, _useStyle.useStyle)(props.contentContainerClassName);
-  const styleListFooterComponent = (0, _useStyle.useStyle)(props.ListFooterComponentClassName);
-  const styleListHeaderComponent = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName);
-  const endFillColor = (0, _hooks.useUniwindAccent)(props.endFillColorClassName);
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.FlatList, props.className, props);
+  const styleColumnWrapper = (0, _useStyle.useStyle)(props.columnWrapperClassName, props);
+  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 hasSingleColumn = !("numColumns" in props) || props.numColumns === 1;
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     columnWrapperStyle: hasSingleColumn ? void 0 : [styleColumnWrapper, props.columnWrapperStyle],

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

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Image = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const Image = exports.Image = (0, _utils.copyComponentProperties)(_reactNative.Image, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const tintColor = (0, _hooks.useUniwindAccent)(props.tintColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Image, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.Image, props.className, props);
+  const tintColor = (0, _useStyle.useStyle)(props.tintColorClassName, props).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     tintColor: props.tintColor ?? tintColor

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

@@ -6,14 +6,16 @@ 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 _useStyle = require("./useStyle");
 const ImageBackground = exports.ImageBackground = (0, _utils.copyComponentProperties)(_reactNative.ImageBackground, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const imageStyle = (0, _useStyle.useStyle)(props.imageClassName);
-  const tintColor = (0, _hooks.useUniwindAccent)(props.tintColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.ImageBackground, {
+  const {
+    Component,
+    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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     imageStyle: [imageStyle, props.imageStyle],

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

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.InputAccessoryView = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const InputAccessoryView = exports.InputAccessoryView = (0, _utils.copyComponentProperties)(_reactNative.InputAccessoryView, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const backgroundColor = (0, _hooks.useUniwindAccent)(props.backgroundColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.InputAccessoryView, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.InputAccessoryView, props.className, props);
+  const backgroundColor = (0, _useStyle.useStyle)(props.backgroundColorClassName, props).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     backgroundColor: props.backgroundColor ?? backgroundColor,
     style: [style, props.style]

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

@@ -9,9 +9,12 @@ var _reactNative = require("react-native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const KeyboardAvoidingView = exports.KeyboardAvoidingView = (0, _utils.copyComponentProperties)(_reactNative.KeyboardAvoidingView, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.KeyboardAvoidingView, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.KeyboardAvoidingView, props.className, props);
+  const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName, props);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     contentContainerStyle: [contentContainerStyle, props.contentContainerStyle]

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

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Modal = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const Modal = exports.Modal = (0, _utils.copyComponentProperties)(_reactNative.Modal, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const backdropColor = (0, _hooks.useUniwindAccent)(props.backdropColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.Modal, props.className, props);
+  const backdropColor = (0, _useStyle.useStyle)(props.backdropColorClassName, props).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     backdropColor: props.backdropColor ?? backdropColor

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

@@ -5,24 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 module.exports = exports.Pressable = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _reactNative = require("react-native");
-var _native = require("../../core/native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const Pressable = exports.Pressable = (0, _utils.copyComponentProperties)(_reactNative.Pressable, props => {
-  const style = (0, _useStyle.useStyle)(props.className, {
-    isDisabled: Boolean(props.disabled)
+  const [isPressed, setIsPressed] = (0, _react.useState)(false);
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.Pressable, props.className, props, {
+    isDisabled: Boolean(props.disabled),
+    isPressed
   });
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
-    style: state => {
-      if (state.pressed) {
-        return [_native.UniwindStore.getStyles(props.className, {
-          isDisabled: Boolean(props.disabled),
-          isPressed: true
-        }).styles, typeof props.style === "function" ? props.style(state) : props.style];
-      }
-      return [style, typeof props.style === "function" ? props.style(state) : props.style];
+    style: [style, typeof props.style === "function" ? props.style({
+      pressed: isPressed
+    }) : props.style],
+    onPressIn: event => {
+      setIsPressed(true);
+      props.onPressIn?.(event);
+    },
+    onPressOut: event => {
+      setIsPressed(false);
+      props.onPressOut?.(event);
     }
   });
 });

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

@@ -6,16 +6,20 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.RefreshControl = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const RefreshControl = exports.RefreshControl = (0, _utils.copyComponentProperties)(_reactNative.RefreshControl, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const color = (0, _hooks.useUniwindAccent)(props.colorsClassName);
-  const tintColor = (0, _hooks.useUniwindAccent)(props.tintColorClassName);
-  const titleColor = (0, _hooks.useUniwindAccent)(props.titleColorClassName);
-  const progressBackgroundColor = (0, _hooks.useUniwindAccent)(props.progressBackgroundColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.RefreshControl, {
+  const {
+    Component,
+    style
+  } = (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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     colors: props.colors ?? (color !== void 0 ? [color] : void 0),

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

@@ -9,8 +9,11 @@ var _reactNative = require("react-native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const SafeAreaView = exports.SafeAreaView = (0, _utils.copyComponentProperties)(_reactNative.SafeAreaView, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.SafeAreaView, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.SafeAreaView, props.className, props);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style]
   });

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

@@ -6,14 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.ScrollView = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const ScrollView = exports.ScrollView = (0, _utils.copyComponentProperties)(_reactNative.ScrollView, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName);
-  const endFillColor = (0, _hooks.useUniwindAccent)(props.endFillColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+  const {
+    Component,
+    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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     contentContainerStyle: [contentContainerStyle, props.contentContainerStyle],

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

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.SectionList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const SectionList = exports.SectionList = (0, _utils.copyComponentProperties)(_reactNative.SectionList, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName);
-  const listFooterComponentStyle = (0, _useStyle.useStyle)(props.ListFooterComponentClassName);
-  const listHeaderComponentStyle = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName);
-  const endFillColor = (0, _hooks.useUniwindAccent)(props.endFillColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.SectionList, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.SectionList, props.className, props);
+  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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     contentContainerStyle: [contentContainerStyle, props.contentContainerStyle],

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

@@ -6,19 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.Switch = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _useUniwindAccent = require("../../hooks/useUniwindAccent.native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const Switch = exports.Switch = (0, _utils.copyComponentProperties)(_reactNative.Switch, props => {
   const state = {
-    isDisabled: Boolean(props.disabled)
+    isDisabled: Boolean(props.disabled),
+    isPressed: Boolean(props.value)
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  const trackColorOn = (0, _useUniwindAccent.useUniwindAccent)(props.trackColorOnClassName, state);
-  const trackColorOff = (0, _useUniwindAccent.useUniwindAccent)(props.trackColorOffClassName, state);
-  const thumbColor = (0, _useUniwindAccent.useUniwindAccent)(props.thumbColorClassName, state);
-  const ios_backgroundColor = (0, _useUniwindAccent.useUniwindAccent)(props.ios_backgroundColorClassName, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+  const {
+    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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     thumbColor: props.thumbColor ?? thumbColor,

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

@@ -7,7 +7,6 @@ module.exports = exports.Text = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNative = require("react-native");
-var _useUniwindAccent = require("../../hooks/useUniwindAccent.native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const Text = exports.Text = (0, _utils.copyComponentProperties)(_reactNative.Text, props => {
@@ -16,9 +15,12 @@ const Text = exports.Text = (0, _utils.copyComponentProperties)(_reactNative.Tex
     isPressed,
     isDisabled: Boolean(props.disabled)
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  const selectionColor = (0, _useUniwindAccent.useUniwindAccent)(props.selectionColorClassName, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.Text, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.Text, props.className, props, state);
+  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     selectionColor: props.selectionColor ?? selectionColor,

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

@@ -7,7 +7,6 @@ module.exports = exports.TextInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNative = require("react-native");
-var _useUniwindAccent = require("../../hooks/useUniwindAccent.native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_reactNative.TextInput, props => {
@@ -18,13 +17,16 @@ const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_react
     isFocused,
     isPressed
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  const cursorColor = (0, _useUniwindAccent.useUniwindAccent)(props.cursorColorClassName, state);
-  const selectionColor = (0, _useUniwindAccent.useUniwindAccent)(props.selectionColorClassName, state);
-  const placeholderTextColor = (0, _useUniwindAccent.useUniwindAccent)(props.placeholderTextColorClassName, state);
-  const selectionHandleColor = (0, _useUniwindAccent.useUniwindAccent)(props.selectionHandleColorClassName, state);
-  const underlineColorAndroid = (0, _useUniwindAccent.useUniwindAccent)(props.underlineColorAndroidClassName, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+  const {
+    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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     cursorColor: props.cursorColor ?? cursorColor,

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

@@ -7,7 +7,6 @@ module.exports = exports.TouchableHighlight = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = require("react");
 var _reactNative = require("react-native");
-var _useUniwindAccent = require("../../hooks/useUniwindAccent.native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponentProperties)(_reactNative.TouchableHighlight, props => {
@@ -16,9 +15,12 @@ const TouchableHighlight = exports.TouchableHighlight = (0, _utils.copyComponent
     isDisabled: Boolean(props.disabled),
     isPressed
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  const underlayColor = (0, _useUniwindAccent.useUniwindAccent)(props.underlayColorClassName, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TouchableHighlight, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.TouchableHighlight, props.className, props, state);
+  const underlayColor = (0, _useStyle.useStyle)(props.underlayColorClassName, props, state).accentColor;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     underlayColor: props.underlayColor ?? underlayColor,

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

@@ -15,8 +15,11 @@ const TouchableNativeFeedback = exports.TouchableNativeFeedback = (0, _utils.cop
     isDisabled: Boolean(props.disabled),
     isPressed
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TouchableNativeFeedback, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.TouchableNativeFeedback, props.className, props, state);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     onPressIn: event => {

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

@@ -15,8 +15,11 @@ const TouchableOpacity = exports.TouchableOpacity = (0, _utils.copyComponentProp
     isDisabled: Boolean(props.disabled),
     isPressed
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.TouchableOpacity, props.className, props, state);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     onPressIn: event => {

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

@@ -15,8 +15,11 @@ const TouchableWithoutFeedback = exports.TouchableWithoutFeedback = (0, _utils.c
     isDisabled: Boolean(props.disabled),
     isPressed
   };
-  const style = (0, _useStyle.useStyle)(props.className, state);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.TouchableWithoutFeedback, props.className, props, state);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     onPressIn: event => {

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

@@ -9,8 +9,11 @@ var _reactNative = require("react-native");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const View = exports.View = (0, _utils.copyComponentProperties)(_reactNative.View, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.View, props.className, props);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style]
   });

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

@@ -6,16 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 module.exports = exports.VirtualizedList = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _reactNative = require("react-native");
-var _hooks = require("../../hooks");
 var _utils = require("../utils");
 var _useStyle = require("./useStyle");
 const VirtualizedList = exports.VirtualizedList = (0, _utils.copyComponentProperties)(_reactNative.VirtualizedList, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
-  const contentContainerStyle = (0, _useStyle.useStyle)(props.contentContainerClassName);
-  const listFooterComponentStyle = (0, _useStyle.useStyle)(props.ListFooterComponentClassName);
-  const listHeaderComponentStyle = (0, _useStyle.useStyle)(props.ListHeaderComponentClassName);
-  const endFillColor = (0, _hooks.useUniwindAccent)(props.endFillColorClassName);
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.VirtualizedList, {
+  const {
+    Component,
+    style
+  } = (0, _useStyle.useStyle)(_reactNative.VirtualizedList, props.className, props);
+  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;
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component, {
     ...props,
     style: [style, props.style],
     contentContainerStyle: [contentContainerStyle, props.contentContainerStyle],

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

@@ -3,27 +3,47 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyle = void 0;
+exports.animatedComponentFamily = void 0;
+exports.useStyle = useStyle;
 var _react = require("react");
+var _reactNativeReanimated = require("react-native-reanimated");
 var _listener = require("../../core/listener");
 var _native = require("../../core/native");
+var _weakMap = require("../../core/weak-map");
 const emptyState = {
   styles: {},
+  component: void 0,
   dependencies: []
 };
-const useStyle = (className, state) => {
+function useStyle(componentOrClassName, classNameOrComponentProps, componentPropsOrState, state) {
+  "use no memo";
+
   const [_, rerender] = (0, _react.useReducer)(() => ({}), {});
-  const styleState = (0, _react.useMemo)(() => className ? _native.UniwindStore.getStyles(className, {
-    isDisabled: state?.isDisabled,
-    isFocused: state?.isFocused,
-    isPressed: state?.isPressed
-  }) : emptyState, [className, _, state?.isDisabled, state?.isFocused, state?.isPressed]);
+  const isComponentOverload = typeof componentOrClassName !== "string" && componentOrClassName !== void 0;
+  const className = isComponentOverload ? classNameOrComponentProps : componentOrClassName;
+  const componentProps = isComponentOverload ? componentPropsOrState : classNameOrComponentProps;
+  const actualState = isComponentOverload ? state : componentPropsOrState;
+  const styleState = className ? _native.UniwindStore.getStyles(className, componentProps, actualState) : emptyState;
   (0, _react.useEffect)(() => {
     if (__DEV__ || styleState.dependencies.length > 0) {
       const dispose = _listener.UniwindListener.subscribe(rerender, styleState.dependencies);
       return dispose;
     }
-  }, [styleState]);
-  return styleState.styles;
-};
-exports.useStyle = useStyle;
+  }, [styleState.dependencies]);
+  if (!isComponentOverload) {
+    return styleState.styles;
+  }
+  return {
+    style: styleState.styles,
+    Component: isAnimatedComponent(styleState.styles) ? animatedComponentFamily(componentOrClassName) : componentOrClassName
+  };
+}
+const animatedComponentFamily = exports.animatedComponentFamily = (0, _weakMap.weakFamily)(component => {
+  if ("displayName" in component && component.displayName?.startsWith("Animated.")) {
+    return component;
+  }
+  return (0, _reactNativeReanimated.createAnimatedComponent)(component);
+});
+const isAnimatedComponent = styles => {
+  return styles.transitionProperty !== void 0 || styles.animationName !== void 0;
+};

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

@@ -9,7 +9,7 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const BaseButton = exports.BaseButton = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.BaseButton, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
+  const style = (0, _useStyle.useStyle)(props.className, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.BaseButton, {
     ...props,
     style: [style, props.style]

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

@@ -9,7 +9,7 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const BorderlessButton = exports.BorderlessButton = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.BorderlessButton, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
+  const style = (0, _useStyle.useStyle)(props.className, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.BorderlessButton, {
     ...props,
     style: [style, props.style]

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

@@ -9,7 +9,7 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _useStyle = require("../../native/useStyle");
 var _utils = require("../../utils");
 const DrawerLayoutAndroid = exports.DrawerLayoutAndroid = (0, _utils.copyComponentProperties)(_reactNativeGestureHandler.DrawerLayoutAndroid, props => {
-  const style = (0, _useStyle.useStyle)(props.className);
+  const style = (0, _useStyle.useStyle)(props.className, props);
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.DrawerLayoutAndroid, {
     ...props,
     style: [style, props.style]