@william-callao/antonella-animations 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -1,10 +1,27 @@
-import { FadeIn, FadeInDown, FadeInUp, SlideInRight, ZoomIn, FadeOut, SlideOutRight } from 'react-native-reanimated';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
+import { FadeIn as FadeIn$1, FadeInDown, FadeInUp, SlideInRight, ZoomIn, FadeOut, SlideOutRight } from 'react-native-reanimated';
+import * as react_native_reanimated_lib_typescript_hook_commonTypes from 'react-native-reanimated/lib/typescript/hook/commonTypes';
+
+type FadeInProps = {
+    children: ReactNode;
+    /** Cambia para remontar y re-lanzar el fade (p. ej. el id de la selección actual). */
+    contentKey?: string | number;
+    /** Duración (ms) del fade. Default 280. */
+    duration?: number;
+    /** Opacidad inicial. Default 0. Usar 1 para desactivar el fade. */
+    initialOpacity?: number;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Wrapper de fade de entrada 0->1 (hook-driven, ver `useFadeIn`). Al cambiar
+ * `contentKey` el contenido se remonta y la animación vuelve a correr.
+ */
+declare function FadeIn({ children, contentKey, duration, initialOpacity, style, }: FadeInProps): React.JSX.Element;
 
 declare const entering: {
-    readonly fade: FadeIn;
+    readonly fade: FadeIn$1;
     readonly fadeInDown: FadeInDown;
     readonly fadeInUp: FadeInUp;
     readonly slideRight: SlideInRight;
@@ -17,7 +34,7 @@ declare const exiting: {
 declare function staggeredFadeInDown(index: number, step?: number, duration?: number): FadeInDown;
 
 type TransitionViewProps = {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     /**
      * Cambia cuando el contenido cambia estructuralmente (p. ej. `contentKey={step}`).
      * Al cambiar, el contenido se remonta y entra con fade in desde opacity 0 (sin parpadeos).
@@ -37,6 +54,24 @@ type TransitionViewProps = {
  * thread; el fade lo maneja Reanimated (layout animations entering/exiting)
  * desde el primer frame.
  */
-declare function TransitionView({ children, contentKey, duration, fadeDuration, style, }: TransitionViewProps): react_jsx_runtime.JSX.Element;
+declare function TransitionView({ children, contentKey, duration, fadeDuration, style, }: TransitionViewProps): React__default.JSX.Element;
+
+type UseFadeInOptions = {
+    /** Duración (ms) del fade. Default 280. */
+    duration?: number;
+    /** Opacidad inicial. Default 0. Usar 1 para desactivar el fade. */
+    initialOpacity?: number;
+};
+/**
+ * Fade de entrada controlado por hook (opacity inicial -> 1 al montar), en el
+ * UI thread. Se prefiere sobre las animaciones `entering` de Reanimated para
+ * contenidos que viven en slots del layout que se montan/remontan (p. ej. el
+ * AppLayout), donde `entering` se degrada o re-arranca en 0 y deja el texto
+ * invisible por unos frames. Devuelve un `useAnimatedStyle` para aplicar a un
+ * `Animated.View`.
+ */
+declare function useFadeIn({ duration, initialOpacity }?: UseFadeInOptions): react_native_reanimated_lib_typescript_hook_commonTypes.AnimatedStyleHandle<{
+    opacity: number;
+}>;
 
-export { TransitionView, type TransitionViewProps, entering, exiting, staggeredFadeInDown };
+export { FadeIn, type FadeInProps, TransitionView, type TransitionViewProps, type UseFadeInOptions, entering, exiting, staggeredFadeInDown, useFadeIn };

package/dist/index.js

@@ -30,37 +30,66 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  FadeIn: () => FadeIn,
   TransitionView: () => TransitionView,
   entering: () => entering,
   exiting: () => exiting,
-  staggeredFadeInDown: () => staggeredFadeInDown
+  staggeredFadeInDown: () => staggeredFadeInDown,
+  useFadeIn: () => useFadeIn
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/presets.ts
+// src/FadeIn.tsx
+var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
+
+// src/useFadeIn.ts
+var import_react = require("react");
 var import_react_native_reanimated = require("react-native-reanimated");
+function useFadeIn({ duration = 280, initialOpacity = 0 } = {}) {
+  const opacity = (0, import_react_native_reanimated.useSharedValue)(initialOpacity);
+  (0, import_react.useEffect)(() => {
+    opacity.value = (0, import_react_native_reanimated.withTiming)(1, { duration });
+  }, [opacity, duration]);
+  return (0, import_react_native_reanimated.useAnimatedStyle)(() => ({ opacity: opacity.value }));
+}
+
+// src/FadeIn.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function FadeIn({
+  children,
+  contentKey,
+  duration = 280,
+  initialOpacity = 0,
+  style
+}) {
+  const fadeStyle = useFadeIn({ duration, initialOpacity });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_reanimated2.default.View, { style: [fadeStyle, style], children }, contentKey);
+}
+
+// src/presets.ts
+var import_react_native_reanimated3 = require("react-native-reanimated");
 var entering = {
-  fade: import_react_native_reanimated.FadeIn.duration(150),
-  fadeInDown: import_react_native_reanimated.FadeInDown.duration(180),
-  fadeInUp: import_react_native_reanimated.FadeInUp.duration(180),
-  slideRight: import_react_native_reanimated.SlideInRight.duration(180),
-  zoom: import_react_native_reanimated.ZoomIn.duration(150)
+  fade: import_react_native_reanimated3.FadeIn.duration(150),
+  fadeInDown: import_react_native_reanimated3.FadeInDown.duration(180),
+  fadeInUp: import_react_native_reanimated3.FadeInUp.duration(180),
+  slideRight: import_react_native_reanimated3.SlideInRight.duration(180),
+  zoom: import_react_native_reanimated3.ZoomIn.duration(150)
 };
 var exiting = {
-  fade: import_react_native_reanimated.FadeOut.duration(150),
-  slideRight: import_react_native_reanimated.SlideOutRight.duration(150)
+  fade: import_react_native_reanimated3.FadeOut.duration(150),
+  slideRight: import_react_native_reanimated3.SlideOutRight.duration(150)
 };
 function staggeredFadeInDown(index, step = 15, duration = 180) {
   const maxDelay = 120;
   const delay = Math.min(index * step, maxDelay);
-  return import_react_native_reanimated.FadeInDown.duration(duration).delay(delay);
+  return import_react_native_reanimated3.FadeInDown.duration(duration).delay(delay);
 }
 
 // src/TransitionView.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_react_native = require("react-native");
-var import_react_native_reanimated2 = __toESM(require("react-native-reanimated"));
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_native_reanimated4 = __toESM(require("react-native-reanimated"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function TransitionView({
   children,
   contentKey,
@@ -68,26 +97,26 @@ function TransitionView({
   fadeDuration = 150,
   style
 }) {
-  const animatedHeight = (0, import_react_native_reanimated2.useSharedValue)(0);
-  const onContentLayout = (0, import_react.useCallback)(
+  const animatedHeight = (0, import_react_native_reanimated4.useSharedValue)(0);
+  const onContentLayout = (0, import_react2.useCallback)(
     (event) => {
       const { height } = event.nativeEvent.layout;
       if (height === animatedHeight.value) return;
-      animatedHeight.value = (0, import_react_native_reanimated2.withTiming)(height, {
+      animatedHeight.value = (0, import_react_native_reanimated4.withTiming)(height, {
         duration,
-        easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.quad)
+        easing: import_react_native_reanimated4.Easing.out(import_react_native_reanimated4.Easing.quad)
       });
     },
     [animatedHeight, duration]
   );
-  const containerStyle = (0, import_react_native_reanimated2.useAnimatedStyle)(() => ({
+  const containerStyle = (0, import_react_native_reanimated4.useAnimatedStyle)(() => ({
     height: animatedHeight.value
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_reanimated2.default.View, { style: [styles.container, containerStyle, style], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.content, onLayout: onContentLayout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_native_reanimated2.default.View,
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated4.default.View, { style: [styles.container, containerStyle, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: styles.content, onLayout: onContentLayout, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native_reanimated4.default.View,
     {
-      entering: import_react_native_reanimated2.FadeIn.duration(fadeDuration),
-      exiting: import_react_native_reanimated2.FadeOut.duration(fadeDuration),
+      entering: import_react_native_reanimated4.FadeIn.duration(fadeDuration),
+      exiting: import_react_native_reanimated4.FadeOut.duration(fadeDuration),
       children
     },
     contentKey
@@ -106,8 +135,10 @@ var styles = import_react_native.StyleSheet.create({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FadeIn,
   TransitionView,
   entering,
   exiting,
-  staggeredFadeInDown
+  staggeredFadeInDown,
+  useFadeIn
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@william-callao/antonella-animations",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Animaciones compartidas de Antonella (React Native Reanimated).",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",