@hoddy-ui/next 2.5.72 → 2.5.74

package/dist/index.mjs

@@ -1524,9 +1524,9 @@ var TextField = ({
 }) => {
   const colors2 = useColors();
   const [focused, setFocused] = useState7(false);
-  const height = moderateScale2(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
+  const height2 = moderateScale2(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
   const labelAnim = useRef2(
-    new Animated3.Value(height / moderateScale2(variant === "text" ? 2.5 : 3.2))
+    new Animated3.Value(height2 / moderateScale2(variant === "text" ? 2.5 : 3.2))
   ).current;
   React15.useEffect(() => {
     if (focused || value) {
@@ -1537,7 +1537,7 @@ var TextField = ({
       }).start();
     } else {
       Animated3.timing(labelAnim, {
-        toValue: height / moderateScale2(variant === "text" ? 2.5 : 3.2),
+        toValue: height2 / moderateScale2(variant === "text" ? 2.5 : 3.2),
         duration: 300,
         useNativeDriver: false
       }).start();
@@ -1550,7 +1550,7 @@ var TextField = ({
       ...style
     },
     container: {
-      height,
+      height: height2,
       overflow: "hidden",
       backgroundColor: variant === "outlined" || variant === "text" ? "#fff0" : focused ? colors2.white[3] : colors2.white[4],
       flexDirection: "row",
@@ -1754,7 +1754,7 @@ var TextField2 = React15.forwardRef(
     const colors2 = useColors();
     const [focused, _setFocused] = useState7(false);
     const [showPassword, setShowPassword] = useState7(false);
-    const height = moderateScale2(
+    const height2 = moderateScale2(
       multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
     );
     const setFocused = (value2) => {
@@ -1773,7 +1773,7 @@ var TextField2 = React15.forwardRef(
         ...style
       },
       container: {
-        height,
+        height: height2,
         overflow: "hidden",
         flexDirection: "row",
         borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[4],
@@ -2166,7 +2166,7 @@ import React18 from "react";
 import { View as View13 } from "react-native";
 import { ScaledSheet as ScaledSheet14, ms as ms8 } from "react-native-size-matters";
 var Divider = ({
-  height = 1,
+  height: height2 = 1,
   color = "textSecondary",
   gutterBottom = 0,
   style
@@ -2174,7 +2174,7 @@ var Divider = ({
   const colors2 = useColors();
   const styles = ScaledSheet14.create({
     root: {
-      height,
+      height: height2,
       backgroundColor: colors2[color].main,
       marginBottom: ms8(gutterBottom),
       ...style
@@ -2305,6 +2305,572 @@ var OTPInput = ({
   ))));
 };
 
+// ../src/Components/Animators/hooks/useAppState.ts
+import { useEffect as useEffect6, useState as useState9 } from "react";
+import { AppState, Platform as Platform6 } from "react-native";
+var useAppState = () => {
+  const [isActive, setIsActive] = useState9(AppState.currentState === "active");
+  useEffect6(() => {
+    const handleAppStateChange = (nextAppState) => {
+      setIsActive(nextAppState === "active");
+    };
+    let subscription;
+    if (Platform6.OS === "android") {
+      subscription = AppState.addEventListener("change", handleAppStateChange);
+    } else {
+      subscription = AppState.addEventListener("change", handleAppStateChange);
+    }
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+  return { isActive };
+};
+var useAppState_default = useAppState;
+
+// ../src/Components/Animators/hooks/useBlinkAnimation.ts
+import { useEffect as useEffect7 } from "react";
+import { Platform as Platform7 } from "react-native";
+import {
+  Easing,
+  useAnimatedStyle as useAnimatedStyle3,
+  useSharedValue as useSharedValue3,
+  withRepeat,
+  withSequence,
+  withTiming as withTiming3
+} from "react-native-reanimated";
+var useBlinkAnimation = ({
+  delay = 0,
+  blinkDuration = 2e3,
+  minOpacity = 0.5,
+  maxOpacity = 1
+} = {}) => {
+  const opacity = useSharedValue3(maxOpacity);
+  const { isActive } = useAppState_default();
+  const animatedStyle = useAnimatedStyle3(() => {
+    return {
+      opacity: opacity.value
+    };
+  });
+  const startBlinking = () => {
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming3(minOpacity, {
+          duration: blinkDuration / 2,
+          easing: Easing.inOut(Easing.quad)
+        }),
+        withTiming3(maxOpacity, {
+          duration: blinkDuration / 2,
+          easing: Easing.inOut(Easing.quad)
+        })
+      ),
+      -1,
+      false
+    );
+  };
+  useEffect7(() => {
+    if (!isActive && Platform7.OS === "ios") {
+      opacity.value = maxOpacity;
+      return;
+    }
+    if (delay > 0) {
+      const timer = setTimeout(() => {
+        startBlinking();
+      }, delay);
+      return () => {
+        clearTimeout(timer);
+        opacity.value = maxOpacity;
+      };
+    } else {
+      startBlinking();
+    }
+    return () => {
+      opacity.value = maxOpacity;
+    };
+  }, [delay, blinkDuration, minOpacity, maxOpacity, isActive]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useFadeAnimation.ts
+import { useEffect as useEffect8 } from "react";
+import { Platform as Platform8 } from "react-native";
+import {
+  useAnimatedStyle as useAnimatedStyle4,
+  useSharedValue as useSharedValue4,
+  withDelay,
+  withTiming as withTiming4
+} from "react-native-reanimated";
+var useFadeAnimation = ({
+  duration = 1e3,
+  delay = 0,
+  closeAfter = null
+} = {}) => {
+  const opacity = useSharedValue4(0);
+  const { isActive } = useAppState_default();
+  const animatedStyle = useAnimatedStyle4(() => {
+    return {
+      opacity: opacity.value
+    };
+  });
+  useEffect8(() => {
+    if (!isActive && Platform8.OS === "ios") {
+      opacity.value = 0;
+      return;
+    }
+    opacity.value = withDelay(
+      delay,
+      withTiming4(1, { duration }, () => {
+        if (closeAfter) {
+          opacity.value = withDelay(closeAfter, withTiming4(0, { duration }));
+        }
+      })
+    );
+  }, [opacity, duration, delay, closeAfter, isActive]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useFloatAnimation.ts
+import { useEffect as useEffect9, useRef as useRef3 } from "react";
+import { Platform as Platform9 } from "react-native";
+import {
+  Easing as Easing2,
+  runOnJS as runOnJS3,
+  useAnimatedStyle as useAnimatedStyle5,
+  useSharedValue as useSharedValue5,
+  withDelay as withDelay2,
+  withRepeat as withRepeat2,
+  withSequence as withSequence2,
+  withTiming as withTiming5
+} from "react-native-reanimated";
+var useFloatAnimation = ({
+  duration = 800,
+  delay = 0,
+  closeAfter = null,
+  closeDuration = 600,
+  floatDistance = 10,
+  floatDuration = 1200
+} = {}) => {
+  const opacity = useSharedValue5(0);
+  const translateY = useSharedValue5(0);
+  const { isActive } = useAppState_default();
+  const isFloating = useRef3(false);
+  const animatedStyle = useAnimatedStyle5(() => {
+    return {
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }]
+    };
+  });
+  const startFloating = () => {
+    if (!isFloating.current) {
+      isFloating.current = true;
+      translateY.value = withRepeat2(
+        withSequence2(
+          withTiming5(-floatDistance, {
+            duration: floatDuration / 2,
+            easing: Easing2.inOut(Easing2.quad)
+          }),
+          withTiming5(floatDistance, {
+            duration: floatDuration,
+            easing: Easing2.inOut(Easing2.quad)
+          }),
+          withTiming5(0, {
+            duration: floatDuration / 2,
+            easing: Easing2.inOut(Easing2.quad)
+          })
+        ),
+        -1,
+        false
+      );
+    }
+  };
+  useEffect9(() => {
+    if (!isActive && Platform9.OS === "ios") {
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
+      return;
+    }
+    opacity.value = withDelay2(
+      delay,
+      withTiming5(1, { duration }, () => {
+        "worklet";
+        runOnJS3(startFloating)();
+      })
+    );
+    if (closeAfter) {
+      const totalDelay = delay + duration + closeAfter;
+      opacity.value = withDelay2(
+        totalDelay,
+        withTiming5(0, { duration: closeDuration })
+      );
+      translateY.value = withDelay2(
+        totalDelay,
+        withTiming5(0, { duration: closeDuration })
+      );
+    }
+    return () => {
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
+    };
+  }, [
+    duration,
+    delay,
+    closeAfter,
+    closeDuration,
+    floatDistance,
+    floatDuration,
+    isActive
+  ]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useGrowAnimation.ts
+import { useEffect as useEffect10 } from "react";
+import { Platform as Platform10 } from "react-native";
+import {
+  Easing as Easing3,
+  useAnimatedStyle as useAnimatedStyle6,
+  useSharedValue as useSharedValue6,
+  withDelay as withDelay3,
+  withTiming as withTiming6
+} from "react-native-reanimated";
+var useGrowAnimation = ({
+  duration = 500,
+  delay = 0,
+  closeAfter = null,
+  initialScale = 0
+} = {}) => {
+  const scale = useSharedValue6(initialScale);
+  const { isActive } = useAppState_default();
+  const animatedStyle = useAnimatedStyle6(() => {
+    return {
+      transform: [{ scale: scale.value }]
+    };
+  });
+  useEffect10(() => {
+    if (!isActive && Platform10.OS === "ios") {
+      scale.value = initialScale;
+      return;
+    }
+    scale.value = withDelay3(
+      delay,
+      withTiming6(
+        1,
+        {
+          duration,
+          easing: Easing3.out(Easing3.ease)
+        },
+        () => {
+          if (closeAfter) {
+            scale.value = withDelay3(
+              closeAfter,
+              withTiming6(initialScale, {
+                duration,
+                easing: Easing3.out(Easing3.ease)
+              })
+            );
+          }
+        }
+      )
+    );
+  }, [scale, duration, delay, closeAfter, initialScale, isActive]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useRollAnimation.ts
+import { useEffect as useEffect11 } from "react";
+import { Platform as Platform11 } from "react-native";
+import {
+  Easing as Easing4,
+  interpolate,
+  useAnimatedStyle as useAnimatedStyle7,
+  useSharedValue as useSharedValue7,
+  withDelay as withDelay4,
+  withTiming as withTiming7
+} from "react-native-reanimated";
+var useRollAnimation = ({
+  duration = 500,
+  delay = 0,
+  closeAfter = null,
+  initialTranslateY = 100,
+  initialRotate = "0deg"
+} = {}) => {
+  const translateY = useSharedValue7(initialTranslateY);
+  const rotate = useSharedValue7(0);
+  const { isActive } = useAppState_default();
+  const animatedStyle = useAnimatedStyle7(() => {
+    const rotateInterpolated = interpolate(
+      rotate.value,
+      [0, 1],
+      [parseFloat(initialRotate.replace("deg", "")), 360]
+    );
+    return {
+      transform: [
+        { translateY: translateY.value },
+        { rotate: `${rotateInterpolated}deg` }
+      ]
+    };
+  });
+  useEffect11(() => {
+    if (!isActive && Platform11.OS === "ios") {
+      translateY.value = initialTranslateY;
+      rotate.value = 0;
+      return;
+    }
+    translateY.value = withDelay4(
+      delay,
+      withTiming7(0, {
+        duration,
+        easing: Easing4.out(Easing4.ease)
+      })
+    );
+    rotate.value = withDelay4(
+      delay,
+      withTiming7(
+        1,
+        {
+          duration,
+          easing: Easing4.out(Easing4.ease)
+        },
+        () => {
+          if (closeAfter) {
+            translateY.value = withDelay4(
+              closeAfter,
+              withTiming7(initialTranslateY, {
+                duration,
+                easing: Easing4.out(Easing4.ease)
+              })
+            );
+            rotate.value = withDelay4(
+              closeAfter,
+              withTiming7(0, {
+                duration,
+                easing: Easing4.out(Easing4.ease)
+              })
+            );
+          }
+        }
+      )
+    );
+  }, [
+    translateY,
+    rotate,
+    duration,
+    delay,
+    closeAfter,
+    initialTranslateY,
+    initialRotate,
+    isActive
+  ]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useSlideAnimation.ts
+import { useEffect as useEffect12 } from "react";
+import { Dimensions as Dimensions3, Platform as Platform12 } from "react-native";
+import {
+  Easing as Easing5,
+  useAnimatedStyle as useAnimatedStyle8,
+  useSharedValue as useSharedValue8,
+  withDelay as withDelay5,
+  withTiming as withTiming8
+} from "react-native-reanimated";
+var { width, height } = Dimensions3.get("window");
+var getInitialPosition = (direction) => {
+  switch (direction) {
+    case "up":
+      return height;
+    case "down":
+      return -height;
+    case "left":
+      return width;
+    case "right":
+      return -width;
+    default:
+      return 0;
+  }
+};
+var useSlideAnimation = ({
+  duration = 1e3,
+  delay = 0,
+  direction = "up",
+  closeAfter,
+  initialValue
+} = {}) => {
+  const translateValue = useSharedValue8(0);
+  const { isActive } = useAppState_default();
+  const animatedStyle = useAnimatedStyle8(() => {
+    const slideStyle = direction === "up" || direction === "down" ? { transform: [{ translateY: translateValue.value }] } : { transform: [{ translateX: translateValue.value }] };
+    return slideStyle;
+  });
+  useEffect12(() => {
+    if (!isActive && Platform12.OS === "ios") {
+      const initialPosition2 = initialValue || getInitialPosition(direction);
+      translateValue.value = initialPosition2;
+      return;
+    }
+    const initialPosition = initialValue || getInitialPosition(direction);
+    translateValue.value = initialPosition;
+    translateValue.value = withDelay5(
+      delay,
+      withTiming8(0, {
+        duration,
+        easing: Easing5.out(Easing5.ease)
+      })
+    );
+    if (closeAfter) {
+      translateValue.value = withDelay5(
+        closeAfter + duration + delay,
+        withTiming8(initialPosition, {
+          duration,
+          easing: Easing5.out(Easing5.ease)
+        })
+      );
+    }
+  }, [
+    translateValue,
+    duration,
+    delay,
+    direction,
+    closeAfter,
+    initialValue,
+    isActive
+  ]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useThrownUpAnimation.ts
+import { useEffect as useEffect13, useRef as useRef4 } from "react";
+import { Platform as Platform13 } from "react-native";
+import {
+  useAnimatedStyle as useAnimatedStyle9,
+  useSharedValue as useSharedValue9,
+  withDelay as withDelay6,
+  withSpring,
+  withTiming as withTiming9
+} from "react-native-reanimated";
+var useThrownUpAnimation = ({
+  delay = 0,
+  closeAfter = null
+} = {}) => {
+  const translateY = useSharedValue9(600);
+  const opacity = useSharedValue9(0);
+  const isUnmounting = useRef4(false);
+  const { isActive } = useAppState_default();
+  const animatedStyle = useAnimatedStyle9(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value
+    };
+  });
+  useEffect13(() => {
+    if (!isActive && Platform13.OS === "ios") {
+      translateY.value = 600;
+      opacity.value = 0;
+      return;
+    }
+    translateY.value = withDelay6(
+      delay,
+      withSpring(0, {
+        velocity: 1,
+        stiffness: 100,
+        damping: 15
+      })
+    );
+    opacity.value = withDelay6(delay, withTiming9(1, { duration: 500 }));
+    if (closeAfter) {
+      translateY.value = withDelay6(
+        closeAfter,
+        withSpring(800, {
+          velocity: 1,
+          stiffness: 200,
+          damping: 20
+        })
+      );
+      opacity.value = withDelay6(closeAfter, withTiming9(0, { duration: 500 }));
+    }
+    return () => {
+      translateY.value = 600;
+      opacity.value = 0;
+      isUnmounting.current = true;
+    };
+  }, [translateY, opacity, delay, closeAfter, isActive]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/Animator.tsx
+import React21 from "react";
+import Animated4 from "react-native-reanimated";
+var Animator = (props) => {
+  const { children, type, duration, delay, closeAfter, style = {} } = props;
+  const getAnimationStyle = () => {
+    switch (type) {
+      case "fade":
+        return useFadeAnimation({ duration, delay, closeAfter });
+      case "grow":
+        return useGrowAnimation({
+          duration,
+          delay,
+          closeAfter,
+          initialScale: props.initialScale
+        });
+      case "slide":
+        return useSlideAnimation({
+          duration,
+          delay,
+          direction: props.direction,
+          closeAfter,
+          initialValue: props.initialValue
+        });
+      case "blink":
+        return useBlinkAnimation({
+          delay,
+          blinkDuration: props.blinkDuration,
+          minOpacity: props.minOpacity,
+          maxOpacity: props.maxOpacity
+        });
+      case "float":
+        return useFloatAnimation({
+          duration,
+          delay,
+          closeAfter,
+          closeDuration: props.closeDuration,
+          floatDistance: props.floatDistance,
+          floatDuration: props.floatDuration
+        });
+      case "roll":
+        return useRollAnimation({
+          duration,
+          delay,
+          closeAfter,
+          initialTranslateY: props.initialTranslateY,
+          initialRotate: props.initialRotate
+        });
+      case "thrownup":
+        return useThrownUpAnimation({ delay, closeAfter });
+      default:
+        return { animatedStyle: {} };
+    }
+  };
+  const { animatedStyle } = getAnimationStyle();
+  return /* @__PURE__ */ React21.createElement(Animated4.View, { style: [style, animatedStyle] }, children);
+};
+
 // index.ts
 var HoddyUI = {
   initialize
@@ -2313,6 +2879,7 @@ var next_default = HoddyUI;
 export {
   AdaptiveStatusBarNext_default as AdaptiveStatusBar,
   AlertX_default as AlertX,
+  Animator,
   Avatar_default as Avatar,
   Button_default as Button,
   CheckBox,
@@ -2340,9 +2907,17 @@ export {
   getPredictionsFromCoords,
   getPredictionsFromQuery,
   showFlashMessage,
+  useAppState_default as useAppState,
+  useBlinkAnimation,
   useColors,
+  useFadeAnimation,
+  useFloatAnimation,
+  useGrowAnimation,
   useNavScreenOptions,
+  useRollAnimation,
+  useSlideAnimation,
   useTheme,
-  useThemeContext
+  useThemeContext,
+  useThrownUpAnimation
 };
 //# sourceMappingURL=index.mjs.map