@william-callao/antonella-animations 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+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 { StyleProp, ViewStyle } from 'react-native';
+
+declare const entering: {
+    readonly fade: FadeIn;
+    readonly fadeInDown: FadeInDown;
+    readonly fadeInUp: FadeInUp;
+    readonly slideRight: SlideInRight;
+    readonly zoom: ZoomIn;
+};
+declare const exiting: {
+    readonly fade: FadeOut;
+    readonly slideRight: SlideOutRight;
+};
+declare function staggeredFadeInDown(index: number, step?: number, duration?: number): FadeInDown;
+
+type TransitionViewProps = {
+    children: React.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).
+     */
+    contentKey?: string | number;
+    /** Duración (ms) de la animación de altura. */
+    duration?: number;
+    /** Duración (ms) del fade in del contenido nuevo. */
+    fadeDuration?: number;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Envuelve contenido de altura variable: al cambiar, anima la altura del
+ * contenedor (crece/encoge sin que lo de arriba/abajo salte) y hace fade out
+ * del contenido anterior al tiempo que hace fade in del nuevo (transición
+ * cruzada, sin parpadeos). La altura se mide con onLayout y se anima en el UI
+ * 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;
+
+export { TransitionView, type TransitionViewProps, entering, exiting, staggeredFadeInDown };

package/dist/index.js

@@ -0,0 +1,113 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TransitionView: () => TransitionView,
+  entering: () => entering,
+  exiting: () => exiting,
+  staggeredFadeInDown: () => staggeredFadeInDown
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/presets.ts
+var import_react_native_reanimated = 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)
+};
+var exiting = {
+  fade: import_react_native_reanimated.FadeOut.duration(150),
+  slideRight: import_react_native_reanimated.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);
+}
+
+// src/TransitionView.tsx
+var import_react = 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");
+function TransitionView({
+  children,
+  contentKey,
+  duration = 150,
+  fadeDuration = 150,
+  style
+}) {
+  const animatedHeight = (0, import_react_native_reanimated2.useSharedValue)(0);
+  const onContentLayout = (0, import_react.useCallback)(
+    (event) => {
+      const { height } = event.nativeEvent.layout;
+      if (height === animatedHeight.value) return;
+      animatedHeight.value = (0, import_react_native_reanimated2.withTiming)(height, {
+        duration,
+        easing: import_react_native_reanimated2.Easing.out(import_react_native_reanimated2.Easing.quad)
+      });
+    },
+    [animatedHeight, duration]
+  );
+  const containerStyle = (0, import_react_native_reanimated2.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,
+    {
+      entering: import_react_native_reanimated2.FadeIn.duration(fadeDuration),
+      exiting: import_react_native_reanimated2.FadeOut.duration(fadeDuration),
+      children
+    },
+    contentKey
+  ) }) });
+}
+var styles = import_react_native.StyleSheet.create({
+  container: {
+    overflow: "hidden"
+  },
+  content: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TransitionView,
+  entering,
+  exiting,
+  staggeredFadeInDown
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@william-callao/antonella-animations",
+  "version": "1.0.0",
+  "description": "Animaciones compartidas de Antonella (React Native Reanimated).",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-worklets": ">=0.5.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}