@hoddy-ui/next 2.5.72 → 2.5.73

package/dist/index.js

@@ -32,6 +32,7 @@ var next_exports = {};
 __export(next_exports, {
   AdaptiveStatusBar: () => AdaptiveStatusBarNext_default,
   AlertX: () => AlertX_default,
+  Animator: () => Animator,
   Avatar: () => Avatar_default,
   Button: () => Button_default,
   CheckBox: () => CheckBox,
@@ -59,10 +60,18 @@ __export(next_exports, {
   getPredictionsFromCoords: () => getPredictionsFromCoords,
   getPredictionsFromQuery: () => getPredictionsFromQuery,
   showFlashMessage: () => showFlashMessage,
+  useAppState: () => useAppState_default,
+  useBlinkAnimation: () => useBlinkAnimation,
   useColors: () => useColors,
+  useFadeAnimation: () => useFadeAnimation,
+  useFloatAnimation: () => useFloatAnimation,
+  useGrowAnimation: () => useGrowAnimation,
   useNavScreenOptions: () => useNavScreenOptions,
+  useRollAnimation: () => useRollAnimation,
+  useSlideAnimation: () => useSlideAnimation,
   useTheme: () => useTheme,
-  useThemeContext: () => useThemeContext
+  useThemeContext: () => useThemeContext,
+  useThrownUpAnimation: () => useThrownUpAnimation
 });
 module.exports = __toCommonJS(next_exports);
 
@@ -1549,9 +1558,9 @@ var TextField = ({
 }) => {
   const colors2 = useColors();
   const [focused, setFocused] = (0, import_react16.useState)(false);
-  const height = (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
+  const height2 = (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 50 : 45) * (size === "large" ? 1.2 : size === "small" ? 0.8 : 1);
   const labelAnim = (0, import_react16.useRef)(
-    new import_react_native16.Animated.Value(height / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2))
+    new import_react_native16.Animated.Value(height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2))
   ).current;
   import_react16.default.useEffect(() => {
     if (focused || value) {
@@ -1562,7 +1571,7 @@ var TextField = ({
       }).start();
     } else {
       import_react_native16.Animated.timing(labelAnim, {
-        toValue: height / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2),
+        toValue: height2 / (0, import_react_native_size_matters13.moderateScale)(variant === "text" ? 2.5 : 3.2),
         duration: 300,
         useNativeDriver: false
       }).start();
@@ -1575,7 +1584,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",
@@ -1779,7 +1788,7 @@ var TextField2 = import_react16.default.forwardRef(
     const colors2 = useColors();
     const [focused, _setFocused] = (0, import_react16.useState)(false);
     const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
-    const height = (0, import_react_native_size_matters13.moderateScale)(
+    const height2 = (0, import_react_native_size_matters13.moderateScale)(
       multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
     );
     const setFocused = (value2) => {
@@ -1798,7 +1807,7 @@ var TextField2 = import_react16.default.forwardRef(
         ...style
       },
       container: {
-        height,
+        height: height2,
         overflow: "hidden",
         flexDirection: "row",
         borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[4],
@@ -2191,7 +2200,7 @@ var import_react19 = __toESM(require("react"));
 var import_react_native19 = require("react-native");
 var import_react_native_size_matters15 = require("react-native-size-matters");
 var Divider = ({
-  height = 1,
+  height: height2 = 1,
   color = "textSecondary",
   gutterBottom = 0,
   style
@@ -2199,7 +2208,7 @@ var Divider = ({
   const colors2 = useColors();
   const styles = import_react_native_size_matters15.ScaledSheet.create({
     root: {
-      height,
+      height: height2,
       backgroundColor: colors2[color].main,
       marginBottom: (0, import_react_native_size_matters15.ms)(gutterBottom),
       ...style
@@ -2327,6 +2336,525 @@ var OTPInput = ({
   ))));
 };
 
+// ../src/Components/Animators/hooks/useAppState.ts
+var import_react22 = require("react");
+var import_react_native22 = require("react-native");
+var useAppState = () => {
+  const [isActive, setIsActive] = (0, import_react22.useState)(import_react_native22.AppState.currentState === "active");
+  (0, import_react22.useEffect)(() => {
+    const handleAppStateChange = (nextAppState) => {
+      setIsActive(nextAppState === "active");
+    };
+    let subscription;
+    if (import_react_native22.Platform.OS === "android") {
+      subscription = import_react_native22.AppState.addEventListener("change", handleAppStateChange);
+    } else {
+      subscription = import_react_native22.AppState.addEventListener("change", handleAppStateChange);
+    }
+    return () => {
+      subscription?.remove();
+    };
+  }, []);
+  return { isActive };
+};
+var useAppState_default = useAppState;
+
+// ../src/Components/Animators/hooks/useBlinkAnimation.ts
+var import_react23 = require("react");
+var import_react_native23 = require("react-native");
+var import_react_native_reanimated3 = require("react-native-reanimated");
+var useBlinkAnimation = ({
+  delay = 0,
+  blinkDuration = 2e3,
+  minOpacity = 0.5,
+  maxOpacity = 1
+} = {}) => {
+  const opacity = (0, import_react_native_reanimated3.useSharedValue)(maxOpacity);
+  const { isActive } = useAppState_default();
+  const animatedStyle = (0, import_react_native_reanimated3.useAnimatedStyle)(() => {
+    return {
+      opacity: opacity.value
+    };
+  });
+  const startBlinking = () => {
+    opacity.value = (0, import_react_native_reanimated3.withRepeat)(
+      (0, import_react_native_reanimated3.withSequence)(
+        (0, import_react_native_reanimated3.withTiming)(minOpacity, {
+          duration: blinkDuration / 2,
+          easing: import_react_native_reanimated3.Easing.inOut(import_react_native_reanimated3.Easing.quad)
+        }),
+        (0, import_react_native_reanimated3.withTiming)(maxOpacity, {
+          duration: blinkDuration / 2,
+          easing: import_react_native_reanimated3.Easing.inOut(import_react_native_reanimated3.Easing.quad)
+        })
+      ),
+      -1,
+      false
+    );
+  };
+  (0, import_react23.useEffect)(() => {
+    if (!isActive && import_react_native23.Platform.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
+var import_react24 = require("react");
+var import_react_native24 = require("react-native");
+var import_react_native_reanimated4 = require("react-native-reanimated");
+var useFadeAnimation = ({
+  duration = 1e3,
+  delay = 0,
+  closeAfter = null
+} = {}) => {
+  const opacity = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const { isActive } = useAppState_default();
+  const animatedStyle = (0, import_react_native_reanimated4.useAnimatedStyle)(() => {
+    return {
+      opacity: opacity.value
+    };
+  });
+  (0, import_react24.useEffect)(() => {
+    if (!isActive && import_react_native24.Platform.OS === "ios") {
+      opacity.value = 0;
+      return;
+    }
+    opacity.value = (0, import_react_native_reanimated4.withDelay)(
+      delay,
+      (0, import_react_native_reanimated4.withTiming)(1, { duration }, () => {
+        if (closeAfter) {
+          opacity.value = (0, import_react_native_reanimated4.withDelay)(closeAfter, (0, import_react_native_reanimated4.withTiming)(0, { duration }));
+        }
+      })
+    );
+  }, [opacity, duration, delay, closeAfter, isActive]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useFloatAnimation.ts
+var import_react25 = require("react");
+var import_react_native25 = require("react-native");
+var import_react_native_reanimated5 = require("react-native-reanimated");
+var useFloatAnimation = ({
+  duration = 800,
+  delay = 0,
+  closeAfter = null,
+  closeDuration = 600,
+  floatDistance = 10,
+  floatDuration = 1200
+} = {}) => {
+  const opacity = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const translateY = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const { isActive } = useAppState_default();
+  const isFloating = (0, import_react25.useRef)(false);
+  const animatedStyle = (0, import_react_native_reanimated5.useAnimatedStyle)(() => {
+    return {
+      opacity: opacity.value,
+      transform: [{ translateY: translateY.value }]
+    };
+  });
+  const startFloating = () => {
+    if (!isFloating.current) {
+      isFloating.current = true;
+      translateY.value = (0, import_react_native_reanimated5.withRepeat)(
+        (0, import_react_native_reanimated5.withSequence)(
+          (0, import_react_native_reanimated5.withTiming)(-floatDistance, {
+            duration: floatDuration / 2,
+            easing: import_react_native_reanimated5.Easing.inOut(import_react_native_reanimated5.Easing.quad)
+          }),
+          (0, import_react_native_reanimated5.withTiming)(floatDistance, {
+            duration: floatDuration,
+            easing: import_react_native_reanimated5.Easing.inOut(import_react_native_reanimated5.Easing.quad)
+          }),
+          (0, import_react_native_reanimated5.withTiming)(0, {
+            duration: floatDuration / 2,
+            easing: import_react_native_reanimated5.Easing.inOut(import_react_native_reanimated5.Easing.quad)
+          })
+        ),
+        -1,
+        false
+      );
+    }
+  };
+  (0, import_react25.useEffect)(() => {
+    if (!isActive && import_react_native25.Platform.OS === "ios") {
+      opacity.value = 0;
+      translateY.value = 0;
+      isFloating.current = false;
+      return;
+    }
+    opacity.value = (0, import_react_native_reanimated5.withDelay)(
+      delay,
+      (0, import_react_native_reanimated5.withTiming)(1, { duration }, () => {
+        startFloating();
+        if (closeAfter) {
+          opacity.value = (0, import_react_native_reanimated5.withDelay)(
+            closeAfter,
+            (0, import_react_native_reanimated5.withTiming)(0, { duration: closeDuration })
+          );
+          translateY.value = (0, import_react_native_reanimated5.withDelay)(
+            closeAfter,
+            (0, import_react_native_reanimated5.withTiming)(0, { duration: closeDuration })
+          );
+          isFloating.current = false;
+        }
+      })
+    );
+    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
+var import_react26 = require("react");
+var import_react_native26 = require("react-native");
+var import_react_native_reanimated6 = require("react-native-reanimated");
+var useGrowAnimation = ({
+  duration = 500,
+  delay = 0,
+  closeAfter = null,
+  initialScale = 0
+} = {}) => {
+  const scale = (0, import_react_native_reanimated6.useSharedValue)(initialScale);
+  const { isActive } = useAppState_default();
+  const animatedStyle = (0, import_react_native_reanimated6.useAnimatedStyle)(() => {
+    return {
+      transform: [{ scale: scale.value }]
+    };
+  });
+  (0, import_react26.useEffect)(() => {
+    if (!isActive && import_react_native26.Platform.OS === "ios") {
+      scale.value = initialScale;
+      return;
+    }
+    scale.value = (0, import_react_native_reanimated6.withDelay)(
+      delay,
+      (0, import_react_native_reanimated6.withTiming)(
+        1,
+        {
+          duration,
+          easing: import_react_native_reanimated6.Easing.out(import_react_native_reanimated6.Easing.ease)
+        },
+        () => {
+          if (closeAfter) {
+            scale.value = (0, import_react_native_reanimated6.withDelay)(
+              closeAfter,
+              (0, import_react_native_reanimated6.withTiming)(initialScale, {
+                duration,
+                easing: import_react_native_reanimated6.Easing.out(import_react_native_reanimated6.Easing.ease)
+              })
+            );
+          }
+        }
+      )
+    );
+  }, [scale, duration, delay, closeAfter, initialScale, isActive]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useRollAnimation.ts
+var import_react27 = require("react");
+var import_react_native27 = require("react-native");
+var import_react_native_reanimated7 = require("react-native-reanimated");
+var useRollAnimation = ({
+  duration = 500,
+  delay = 0,
+  closeAfter = null,
+  initialTranslateY = 100,
+  initialRotate = "0deg"
+} = {}) => {
+  const translateY = (0, import_react_native_reanimated7.useSharedValue)(initialTranslateY);
+  const rotate = (0, import_react_native_reanimated7.useSharedValue)(0);
+  const { isActive } = useAppState_default();
+  const animatedStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
+    const rotateInterpolated = (0, import_react_native_reanimated7.interpolate)(
+      rotate.value,
+      [0, 1],
+      [parseFloat(initialRotate.replace("deg", "")), 360]
+    );
+    return {
+      transform: [
+        { translateY: translateY.value },
+        { rotate: `${rotateInterpolated}deg` }
+      ]
+    };
+  });
+  (0, import_react27.useEffect)(() => {
+    if (!isActive && import_react_native27.Platform.OS === "ios") {
+      translateY.value = initialTranslateY;
+      rotate.value = 0;
+      return;
+    }
+    translateY.value = (0, import_react_native_reanimated7.withDelay)(
+      delay,
+      (0, import_react_native_reanimated7.withTiming)(0, {
+        duration,
+        easing: import_react_native_reanimated7.Easing.out(import_react_native_reanimated7.Easing.ease)
+      })
+    );
+    rotate.value = (0, import_react_native_reanimated7.withDelay)(
+      delay,
+      (0, import_react_native_reanimated7.withTiming)(
+        1,
+        {
+          duration,
+          easing: import_react_native_reanimated7.Easing.out(import_react_native_reanimated7.Easing.ease)
+        },
+        () => {
+          if (closeAfter) {
+            translateY.value = (0, import_react_native_reanimated7.withDelay)(
+              closeAfter,
+              (0, import_react_native_reanimated7.withTiming)(initialTranslateY, {
+                duration,
+                easing: import_react_native_reanimated7.Easing.out(import_react_native_reanimated7.Easing.ease)
+              })
+            );
+            rotate.value = (0, import_react_native_reanimated7.withDelay)(
+              closeAfter,
+              (0, import_react_native_reanimated7.withTiming)(0, {
+                duration,
+                easing: import_react_native_reanimated7.Easing.out(import_react_native_reanimated7.Easing.ease)
+              })
+            );
+          }
+        }
+      )
+    );
+  }, [
+    translateY,
+    rotate,
+    duration,
+    delay,
+    closeAfter,
+    initialTranslateY,
+    initialRotate,
+    isActive
+  ]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useSlideAnimation.ts
+var import_react28 = require("react");
+var import_react_native28 = require("react-native");
+var import_react_native_reanimated8 = require("react-native-reanimated");
+var { width, height } = import_react_native28.Dimensions.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 = (0, import_react_native_reanimated8.useSharedValue)(0);
+  const { isActive } = useAppState_default();
+  const animatedStyle = (0, import_react_native_reanimated8.useAnimatedStyle)(() => {
+    const slideStyle = direction === "up" || direction === "down" ? { transform: [{ translateY: translateValue.value }] } : { transform: [{ translateX: translateValue.value }] };
+    return slideStyle;
+  });
+  (0, import_react28.useEffect)(() => {
+    if (!isActive && import_react_native28.Platform.OS === "ios") {
+      const initialPosition2 = initialValue || getInitialPosition(direction);
+      translateValue.value = initialPosition2;
+      return;
+    }
+    const initialPosition = initialValue || getInitialPosition(direction);
+    translateValue.value = initialPosition;
+    translateValue.value = (0, import_react_native_reanimated8.withDelay)(
+      delay,
+      (0, import_react_native_reanimated8.withTiming)(0, {
+        duration,
+        easing: import_react_native_reanimated8.Easing.out(import_react_native_reanimated8.Easing.ease)
+      })
+    );
+    if (closeAfter) {
+      translateValue.value = (0, import_react_native_reanimated8.withDelay)(
+        closeAfter + duration + delay,
+        (0, import_react_native_reanimated8.withTiming)(initialPosition, {
+          duration,
+          easing: import_react_native_reanimated8.Easing.out(import_react_native_reanimated8.Easing.ease)
+        })
+      );
+    }
+  }, [
+    translateValue,
+    duration,
+    delay,
+    direction,
+    closeAfter,
+    initialValue,
+    isActive
+  ]);
+  return {
+    animatedStyle
+  };
+};
+
+// ../src/Components/Animators/hooks/useThrownUpAnimation.ts
+var import_react29 = require("react");
+var import_react_native29 = require("react-native");
+var import_react_native_reanimated9 = require("react-native-reanimated");
+var useThrownUpAnimation = ({
+  delay = 0,
+  closeAfter = null
+} = {}) => {
+  const translateY = (0, import_react_native_reanimated9.useSharedValue)(600);
+  const opacity = (0, import_react_native_reanimated9.useSharedValue)(0);
+  const isUnmounting = (0, import_react29.useRef)(false);
+  const { isActive } = useAppState_default();
+  const animatedStyle = (0, import_react_native_reanimated9.useAnimatedStyle)(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+      opacity: opacity.value
+    };
+  });
+  (0, import_react29.useEffect)(() => {
+    if (!isActive && import_react_native29.Platform.OS === "ios") {
+      translateY.value = 600;
+      opacity.value = 0;
+      return;
+    }
+    translateY.value = (0, import_react_native_reanimated9.withDelay)(
+      delay,
+      (0, import_react_native_reanimated9.withSpring)(0, {
+        velocity: 1,
+        stiffness: 100,
+        damping: 15
+      })
+    );
+    opacity.value = (0, import_react_native_reanimated9.withDelay)(delay, (0, import_react_native_reanimated9.withTiming)(1, { duration: 500 }));
+    if (closeAfter) {
+      translateY.value = (0, import_react_native_reanimated9.withDelay)(
+        closeAfter,
+        (0, import_react_native_reanimated9.withSpring)(800, {
+          velocity: 1,
+          stiffness: 200,
+          damping: 20
+        })
+      );
+      opacity.value = (0, import_react_native_reanimated9.withDelay)(closeAfter, (0, import_react_native_reanimated9.withTiming)(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
+var import_react30 = __toESM(require("react"));
+var import_react_native_reanimated10 = __toESM(require("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__ */ import_react30.default.createElement(import_react_native_reanimated10.default.View, { style: [style, animatedStyle] }, children);
+};
+
 // index.ts
 var HoddyUI = {
   initialize
@@ -2336,6 +2864,7 @@ var next_default = HoddyUI;
 0 && (module.exports = {
   AdaptiveStatusBar,
   AlertX,
+  Animator,
   Avatar,
   Button,
   CheckBox,
@@ -2362,9 +2891,17 @@ var next_default = HoddyUI;
   getPredictionsFromCoords,
   getPredictionsFromQuery,
   showFlashMessage,
+  useAppState,
+  useBlinkAnimation,
   useColors,
+  useFadeAnimation,
+  useFloatAnimation,
+  useGrowAnimation,
   useNavScreenOptions,
+  useRollAnimation,
+  useSlideAnimation,
   useTheme,
-  useThemeContext
+  useThemeContext,
+  useThrownUpAnimation
 });
 //# sourceMappingURL=index.js.map