@william-callao/antonella-ui 1.0.0 → 1.0.1

package/dist/index.d.ts

@@ -21,8 +21,10 @@ interface ButtonProps extends Omit<PressableProps, "style"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
     style?: StyleProp<ViewStyle>;
+    /** Muestra un spinner centrado en lugar del label (y deshabilita el botón). */
+    loading?: boolean;
 }
-declare function Button({ label, variant, size, style, disabled, android_ripple, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ label, variant, size, style, disabled, loading, android_ripple, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarProps extends ViewProps {
     date?: Date;
@@ -47,7 +49,7 @@ interface CardTitleProps {
 }
 declare function CardTitle({ title, subtitle, style }: CardTitleProps): react_jsx_runtime.JSX.Element;
 
-type IconName = "home" | "home-filled" | "mail" | "mail-filled" | "calendar" | "calendar-filled" | "bar-chart" | "bar-chart-filled" | "settings" | "settings-filled" | "user" | "user-filled" | "search" | "clipboard" | "clipboard-filled" | "checklist" | "checklist-filled" | "menu" | "close" | "chevron-down" | "chevron-forward" | "chevron-back" | "arrow-back" | "arrow-forward" | "arrow-down" | "arrow-up" | "arrow-up-filled" | "add" | "checkmark" | "pencil" | "trash" | "chevron-up" | "alert-circle" | "checkmark-circle" | "information-circle" | "notifications" | "notifications-filled" | "more-horizontal" | "more-vertical" | "log-in" | "log-out" | "git-network" | "construct" | "chatbubble" | "camera" | "time" | "analytics" | "barn" | "barn-filled" | "farm" | "farm-filled" | "people" | "people-filled" | "document-text" | "document-text-filled" | "backspace" | "palette" | "folder" | "folder-open" | "file" | "loader" | "inbox" | "triangle-alert";
+type IconName = "home" | "home-filled" | "mail" | "mail-filled" | "calendar" | "calendar-filled" | "bar-chart" | "bar-chart-filled" | "settings" | "settings-filled" | "user" | "user-filled" | "search" | "clipboard" | "clipboard-filled" | "checklist" | "checklist-filled" | "menu" | "close" | "chevron-down" | "chevron-forward" | "chevron-back" | "arrow-back" | "arrow-forward" | "arrow-down" | "arrow-up" | "arrow-up-filled" | "add" | "checkmark" | "pencil" | "trash" | "chevron-up" | "alert-circle" | "checkmark-circle" | "information-circle" | "notifications" | "notifications-filled" | "more-horizontal" | "more-vertical" | "log-in" | "log-out" | "git-network" | "construct" | "chatbubble" | "camera" | "time" | "analytics" | "barn" | "barn-filled" | "farm" | "farm-filled" | "people" | "people-filled" | "document-text" | "document-text-filled" | "backspace" | "palette" | "folder" | "folder-open" | "file" | "loader" | "inbox" | "triangle-alert" | "eye" | "eye-off";
 declare const iconMap: Record<IconName, ComponentType<{
     size?: number;
     color?: string;
@@ -146,8 +148,10 @@ type HeaderBarProps = {
     /** Acción del botón de menú (hamburguesa, lado izquierdo). */
     onMenuPress?: () => void;
     menuIcon?: IconName;
+    /** Label de accesibilidad del botón izquierdo. */
+    accessibilityLabel?: string;
 };
-declare function HeaderBar({ title, description, style, onMenuPress, menuIcon, }: HeaderBarProps): react_jsx_runtime.JSX.Element;
+declare function HeaderBar({ title, description, style, onMenuPress, menuIcon, accessibilityLabel, }: HeaderBarProps): react_jsx_runtime.JSX.Element;
 
 declare enum StateMessageType {
     LOADING = "LOADING",
@@ -221,8 +225,10 @@ type CardStackSheetProps = {
     children: React.ReactNode;
     contentStyle?: StyleProp<ViewStyle>;
     snapPoints?: Array<string | number>;
+    /** Color del área semitransparente del sheet (fondo entre y bajo las cards). */
+    areaColor?: string;
 };
-declare function CardStackSheet({ visible, onClose, dismissible, children, contentStyle, snapPoints, }: CardStackSheetProps): react_jsx_runtime.JSX.Element;
+declare function CardStackSheet({ visible, onClose, dismissible, children, contentStyle, snapPoints, areaColor, }: CardStackSheetProps): react_jsx_runtime.JSX.Element;
 
 declare enum OptionListItemVariant {
     Default = "default",
@@ -544,8 +550,15 @@ declare function ReverseHeaderCardLayout({ headerBackgroundColor, bodyBackground
 
 interface InputProps extends TextInputProps {
     icon?: IconName;
+    /** Estilos aplicados al campo de texto interno (también cuando hay icono/ojito). */
+    inputStyle?: StyleProp<TextStyle>;
+    /** Muestra el ojito para alternar ver/ocultar en campos `secureTextEntry`. */
+    showToggle?: boolean;
+    /** Si se define, marca el input con borde rojo y muestra el mensaje debajo
+     * (errores de validación previos a consultar el backend). */
+    error?: string;
 }
-declare function Input({ style, placeholderTextColor, icon, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input({ style, inputStyle, placeholderTextColor, icon, showToggle, error, secureTextEntry, onFocus, onBlur, ...rest }: InputProps): react_jsx_runtime.JSX.Element;
 
 type LayoutRowChildProps = {
     size?: LayoutRowSize;

package/dist/index.js

@@ -237,7 +237,9 @@ var iconMap = {
   file: import_lucide_react_native.File,
   loader: import_lucide_react_native.LoaderCircle,
   inbox: import_lucide_react_native.Inbox,
-  "triangle-alert": import_lucide_react_native.TriangleAlert
+  "triangle-alert": import_lucide_react_native.TriangleAlert,
+  eye: import_lucide_react_native.Eye,
+  "eye-off": import_lucide_react_native.EyeOff
 };
 var STROKE_WIDTH = 2.25;
 function Icon({ name, size = 20, color, style, testID }) {
@@ -374,28 +376,31 @@ function Button({
   size = "md",
   style,
   disabled,
+  loading = false,
   android_ripple,
   ...rest
 }) {
   const defaultRipple = android_ripple ?? {
     color: variant === "primary" || variant === "danger" ? "rgba(255, 255, 255, 0.2)" : "rgba(0, 0, 0, 0.08)"
   };
+  const isDisabled = disabled === true || loading;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react_native5.Pressable,
     {
       accessibilityRole: "button",
-      disabled,
-      android_ripple: disabled ? void 0 : defaultRipple,
+      accessibilityState: { disabled: isDisabled, busy: loading },
+      disabled: isDisabled,
+      android_ripple: isDisabled ? void 0 : defaultRipple,
       style: ({ pressed }) => [
         styles4.base,
         sizeStyles[size],
         variantStyles[variant],
-        pressed && !disabled && styles4.pressed,
+        pressed && !isDisabled && styles4.pressed,
         disabled && styles4.disabled,
         style
       ],
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.ActivityIndicator, { color: labelColors[variant], size: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_native5.Text,
         {
           style: [
@@ -412,7 +417,7 @@ function Button({
 }
 var styles4 = import_react_native5.StyleSheet.create({
   base: {
-    borderRadius: 10,
+    borderRadius: 999,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -423,9 +428,9 @@ var styles4 = import_react_native5.StyleSheet.create({
   labelDisabled: { opacity: 0.6 }
 });
 var sizeStyles = import_react_native5.StyleSheet.create({
-  sm: { paddingVertical: 6, paddingHorizontal: 12 },
-  md: { paddingVertical: 10, paddingHorizontal: 16 },
-  lg: { paddingVertical: 14, paddingHorizontal: 20 }
+  sm: { height: 36, paddingHorizontal: 12 },
+  md: { height: 44, paddingHorizontal: 16 },
+  lg: { height: 54, paddingHorizontal: 20 }
 });
 var variantStyles = import_react_native5.StyleSheet.create({
   primary: { backgroundColor: import_antonella_theme5.palette.primary },
@@ -1027,7 +1032,8 @@ function HeaderBar({
   description,
   style = "DEFAULT" /* DEFAULT */,
   onMenuPress,
-  menuIcon = "menu"
+  menuIcon = "menu",
+  accessibilityLabel = "Abrir men\xFA"
 }) {
   const c = STYLE_COLORS3[style];
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native14.View, { style: styles13.container, children: [
@@ -1041,7 +1047,7 @@ function HeaderBar({
             { backgroundColor: pressed ? c.buttonPressedBg : c.buttonBg }
           ],
           accessibilityRole: "button",
-          accessibilityLabel: "Abrir men\xFA",
+          accessibilityLabel,
           children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: menuIcon, size: 22, color: c.iconColor })
         }
       ),
@@ -1596,7 +1602,8 @@ function CardStackSheet({
   dismissible = true,
   children,
   contentStyle,
-  snapPoints
+  snapPoints,
+  areaColor
 }) {
   const { height: screenHeight } = (0, import_react_native21.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
@@ -1691,7 +1698,11 @@ function CardStackSheet({
               {
                 showsVerticalScrollIndicator: false,
                 keyboardShouldPersistTaps: "handled",
-                contentContainerStyle: [styles19.content, contentStyle],
+                contentContainerStyle: [
+                  styles19.content,
+                  contentStyle,
+                  areaColor ? { backgroundColor: areaColor } : void 0
+                ],
                 children
               }
             ) })
@@ -1824,12 +1835,12 @@ function Toast({
     {
       style: [
         styles21.toast,
-        { backgroundColor: c.bg, paddingTop: topInset + BASE_VPAD },
+        { backgroundColor: c.bg, marginTop: (topInset || 0) + BASE_VPAD },
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: TONE_ICONS[tone], size: 18, color: c.content }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { variant: import_antonella_theme22.TextType.Caption, color: c.content, style: styles21.message, children: message }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: TONE_ICONS[tone], size: 20, color: c.content }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { variant: import_antonella_theme22.TextType.Body, color: c.content, style: styles21.message, children: message }),
         onClose ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           import_react_native23.Pressable,
           {
@@ -1838,7 +1849,7 @@ function Toast({
             accessibilityRole: "button",
             accessibilityLabel: "Cerrar aviso",
             style: ({ pressed }) => [styles21.close, pressed && styles21.closePressed],
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 15, color: c.content })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "close", size: 16, color: c.content })
           }
         ) : null
       ]
@@ -1863,14 +1874,14 @@ var STYLE_COLORS6 = {
 };
 var styles21 = import_react_native23.StyleSheet.create({
   toast: {
-    width: "100%",
+    minHeight: 52,
     flexDirection: "row",
     alignItems: "center",
     gap: import_antonella_theme22.space.space2,
-    minHeight: 52,
-    borderRadius: 0,
-    paddingVertical: import_antonella_theme22.space.space3 + 2,
+    borderRadius: 16,
+    paddingVertical: import_antonella_theme22.space.space3,
     paddingHorizontal: import_antonella_theme22.space.space4,
+    marginHorizontal: import_antonella_theme22.space.space4,
     shadowColor: "#000000",
     shadowOpacity: 0.25,
     shadowRadius: 10,
@@ -5078,68 +5089,163 @@ var styles39 = import_react_native43.StyleSheet.create({
 });
 
 // src/components/Input.tsx
+var import_react20 = require("react");
 var import_react_native44 = require("react-native");
 var import_antonella_theme41 = require("@william-callao/antonella-theme");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function Input({ style, placeholderTextColor, icon, ...rest }) {
-  if (icon) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native44.View, { style: [styles40.inputContainer, style], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: icon, size: 18, color: import_antonella_theme41.text.secondary, style: styles40.icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        import_react_native44.TextInput,
-        {
-          placeholderTextColor: placeholderTextColor ?? import_antonella_theme41.appInput.placeholder,
-          style: styles40.inputFlex,
-          ...rest
-        }
-      )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var INPUT_RADIUS = 16;
+function Input({
+  style,
+  inputStyle,
+  placeholderTextColor,
+  icon,
+  showToggle,
+  error,
+  secureTextEntry = false,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = (0, import_react20.useState)(false);
+  const [visible, setVisible] = (0, import_react20.useState)(false);
+  const isSecure = secureTextEntry === true;
+  const effectiveSecure = isSecure && !visible;
+  const showEye = showToggle === true && isSecure;
+  const hasDecorations = icon != null || showEye;
+  const hasError = Boolean(error);
+  const borderColor = hasError ? import_antonella_theme41.appInput.error : focused ? import_antonella_theme41.text.secondary : import_antonella_theme41.appInputCard.border;
+  const toggleVisible = () => setVisible((prev) => !prev);
+  const field = hasDecorations ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_react_native44.View,
+    {
+      style: [
+        styles40.container,
+        { borderColor },
+        showEye ? styles40.eyeContainer : null,
+        style
+      ],
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { name: icon, size: 18, color: import_antonella_theme41.text.secondary, style: styles40.sideIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react_native44.TextInput,
+          {
+            placeholderTextColor: placeholderTextColor ?? import_antonella_theme41.appInput.placeholder,
+            style: [styles40.field, inputStyle],
+            secureTextEntry: effectiveSecure,
+            onFocus: (e) => {
+              setFocused(true);
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              onBlur?.(e);
+            },
+            ...rest
+          }
+        ),
+        showEye ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          import_react_native44.Pressable,
+          {
+            onPress: toggleVisible,
+            hitSlop: 8,
+            style: styles40.toggle,
+            accessibilityRole: "button",
+            accessibilityLabel: effectiveSecure ? "Mostrar contrase\xF1a" : "Ocultar contrase\xF1a",
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              Icon,
+              {
+                name: effectiveSecure ? "eye" : "eye-off",
+                size: 20,
+                color: import_antonella_theme41.text.secondary
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_react_native44.TextInput,
     {
       placeholderTextColor: placeholderTextColor ?? import_antonella_theme41.appInput.placeholder,
-      style: [styles40.input, style],
+      style: [
+        styles40.input,
+        { borderColor },
+        inputStyle
+      ],
+      secureTextEntry,
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        onBlur?.(e);
+      },
       ...rest
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native44.View, { style: styles40.wrapper, children: [
+    field,
+    hasError ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Text, { variant: import_antonella_theme41.TextType.Caption, color: import_antonella_theme41.appInput.error, style: styles40.error, children: error }) : null
+  ] });
 }
 var styles40 = import_react_native44.StyleSheet.create({
   input: {
-    borderRadius: 10,
-    paddingHorizontal: import_antonella_theme41.spacing.md,
+    borderWidth: 1,
+    borderColor: import_antonella_theme41.appInputCard.border,
+    borderRadius: INPUT_RADIUS,
+    paddingLeft: import_antonella_theme41.space.space5,
+    paddingRight: import_antonella_theme41.spacing.xl,
     paddingVertical: import_antonella_theme41.spacing.sm,
     fontSize: import_antonella_theme41.texts.caption.fontSize,
     lineHeight: import_antonella_theme41.texts.caption.lineHeight,
     color: import_antonella_theme41.appInput.text,
     backgroundColor: import_antonella_theme41.appInput.background
   },
-  inputContainer: {
+  container: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 10,
-    paddingHorizontal: import_antonella_theme41.spacing.md,
-    backgroundColor: import_antonella_theme41.appInput.background
+    borderWidth: 1,
+    borderColor: import_antonella_theme41.appInputCard.border,
+    borderRadius: INPUT_RADIUS,
+    paddingHorizontal: import_antonella_theme41.spacing.lg,
+    backgroundColor: import_antonella_theme41.appInput.background,
+    overflow: "hidden"
   },
-  icon: {
-    marginRight: import_antonella_theme41.spacing.sm
+  eyeContainer: {
+    paddingRight: 0
   },
-  inputFlex: {
+  field: {
     flex: 1,
     paddingVertical: import_antonella_theme41.spacing.sm,
     fontSize: import_antonella_theme41.texts.caption.fontSize,
     lineHeight: import_antonella_theme41.texts.caption.lineHeight,
     color: import_antonella_theme41.appInput.text
+  },
+  sideIcon: {
+    marginRight: import_antonella_theme41.spacing.sm
+  },
+  toggle: {
+    marginLeft: import_antonella_theme41.spacing.xs,
+    paddingRight: import_antonella_theme41.spacing.lg,
+    paddingVertical: import_antonella_theme41.spacing.xs,
+    justifyContent: "center"
+  },
+  wrapper: {
+    alignItems: "stretch"
+  },
+  error: {
+    marginTop: import_antonella_theme41.spacing.xs
   }
 });
 
 // src/components/LayoutRow.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_native45 = require("react-native");
 var import_antonella_theme42 = require("@william-callao/antonella-theme");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var LayoutRowContext = (0, import_react20.createContext)({ debug: false, isSmall: false });
-var useLayoutRowContext = () => (0, import_react20.useContext)(LayoutRowContext);
+var LayoutRowContext = (0, import_react21.createContext)({ debug: false, isSmall: false });
+var useLayoutRowContext = () => (0, import_react21.useContext)(LayoutRowContext);
 var debugColors = ["#FF6B6B", "#4ECDC4"];
 var BREAKPOINT_SMALL = 600;
 function LayoutRowFirst({ size = import_antonella_theme42.LayoutRowSize.EXPAND, scroll, children }) {
@@ -5198,12 +5304,12 @@ var styles41 = {
 };
 
 // src/components/LayoutColumn.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_native46 = require("react-native");
 var import_antonella_theme43 = require("@william-callao/antonella-theme");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var LayoutColumnContext = (0, import_react21.createContext)({ debug: false });
-var useLayoutColumnContext = () => (0, import_react21.useContext)(LayoutColumnContext);
+var LayoutColumnContext = (0, import_react22.createContext)({ debug: false });
+var useLayoutColumnContext = () => (0, import_react22.useContext)(LayoutColumnContext);
 var debugColors2 = ["#FF6B6B", "#4ECDC4"];
 function LayoutColumnFirst({ size = import_antonella_theme43.LayoutColumnSize.EXPAND, scroll, children }) {
   const { debug } = useLayoutColumnContext();
@@ -5308,7 +5414,7 @@ var styles42 = import_react_native47.StyleSheet.create({
 });
 
 // src/components/ToolsCard.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_react_native48 = require("react-native");
 var import_antonella_theme45 = require("@william-callao/antonella-theme");
 var import_jsx_runtime50 = require("react/jsx-runtime");
@@ -5318,7 +5424,7 @@ function ToolsCard({ tools, style }) {
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { name: tool.icon, size: 16, color: import_antonella_theme45.card.text.primary }),
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text, { variant: import_antonella_theme45.TextType.BodyMedium, color: import_antonella_theme45.card.text.primary, numberOfLines: 1, children: tool.label })
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react22.default.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react23.default.Fragment, { children: [
       index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_native48.View, { style: styles43.separator }) : null,
       tool.onPress ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         import_react_native48.Pressable,
@@ -5362,7 +5468,7 @@ var styles43 = import_react_native48.StyleSheet.create({
 });
 
 // src/components/TreeEditor.tsx
-var import_react23 = require("react");
+var import_react24 = __toESM(require("react"));
 var import_react_native49 = require("react-native");
 var import_antonella_theme46 = require("@william-callao/antonella-theme");
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -5501,21 +5607,9 @@ var CARD_MARGIN = 12;
 var CARD_PADDING_H = import_antonella_theme46.space.space4;
 var CARD_RADIUS3 = 24;
 var LINE_X = 10;
-var EXPAND_DURATION = 220;
 var EXPAND_FADE = 180;
-var COLLAPSE_FADE = 120;
 var NODE_ICON_SIZE = 18;
-function buildRows(nodes, depth, collapsed, out) {
-  nodes.forEach((node) => {
-    out.push({ node, depth });
-    const isCollapsed = !!collapsed[node.id];
-    if (node.children.length > 0 && !isCollapsed) {
-      buildRows(node.children, depth + 1, collapsed, out);
-    }
-  });
-  return out;
-}
-function NodeGutter({
+var NodeGutter = import_react24.default.memo(function NodeGutter2({
   depth,
   lineColor,
   terminal
@@ -5545,7 +5639,7 @@ function NodeGutter({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: columns });
-}
+});
 function renderForest(ctx, nodes, depth, parentName) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: nodes.map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     TreeNodeItem,
@@ -5559,7 +5653,7 @@ function renderForest(ctx, nodes, depth, parentName) {
     node.id
   )) });
 }
-function TreeNodeItem({
+var TreeNodeItem = import_react24.default.memo(function TreeNodeItem2({
   node,
   depth,
   isLast,
@@ -5570,39 +5664,18 @@ function TreeNodeItem({
   const isCollapsed = !!ctx.collapsed[node.id];
   const isActive = hasChildren && !isCollapsed;
   const terminalElbow = isLast;
-  const subtreeRows = [];
-  buildRows(node.children, depth + 1, ctx.collapsed, subtreeRows);
-  const expandedHeight = (0, import_react23.useMemo)(
-    () => subtreeRows.length * (ROW_HEIGHT + CARD_MARGIN) + 2,
-    [subtreeRows.length]
-  );
-  const heightAnim = (0, import_react23.useRef)(new import_react_native49.Animated.Value(isCollapsed ? 0 : expandedHeight)).current;
-  const contentOpacity = (0, import_react23.useRef)(new import_react_native49.Animated.Value(isCollapsed ? 0 : 1)).current;
-  const measured = (0, import_react23.useRef)(false);
-  (0, import_react23.useEffect)(() => {
-    if (!measured.current) {
-      measured.current = true;
-      heightAnim.setValue(isCollapsed ? 0 : expandedHeight);
-      contentOpacity.setValue(isCollapsed ? 0 : 1);
-      return;
-    }
-    const toHeight = isCollapsed ? 0 : expandedHeight;
-    const animation = import_react_native49.Animated.parallel([
-      import_react_native49.Animated.timing(heightAnim, {
-        toValue: toHeight,
-        duration: EXPAND_DURATION,
-        easing: import_react_native49.Easing.out(import_react_native49.Easing.cubic),
-        useNativeDriver: false
-      }),
-      import_react_native49.Animated.timing(contentOpacity, {
-        toValue: isCollapsed ? 0 : 1,
-        duration: isCollapsed ? COLLAPSE_FADE : EXPAND_FADE,
-        useNativeDriver: false
-      })
-    ]);
+  const contentOpacity = (0, import_react24.useRef)(new import_react_native49.Animated.Value(0)).current;
+  (0, import_react24.useEffect)(() => {
+    if (isCollapsed) return;
+    const animation = import_react_native49.Animated.timing(contentOpacity, {
+      toValue: 1,
+      duration: EXPAND_FADE,
+      easing: import_react_native49.Easing.out(import_react_native49.Easing.quad),
+      useNativeDriver: true
+    });
     animation.start();
     return () => animation.stop();
-  }, [isCollapsed, expandedHeight]);
+  }, [isCollapsed, node.id, node.name, contentOpacity]);
   const defaultContent = /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: styles44.textBlock, children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: styles44.titleRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -5689,20 +5762,19 @@ function TreeNodeItem({
         }
       ) : null
     ] }),
-    hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.Animated.View, { style: [styles44.subtree, { height: heightAnim }], children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.Animated.View, { style: { opacity: contentOpacity }, children: renderForest(ctx, node.children, depth + 1, node.name) }) }) : null
+    hasChildren && !isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.Animated.View, { style: [styles44.subtreeFade, { opacity: contentOpacity }], children: renderForest(ctx, node.children, depth + 1, node.name) }) : null
   ] });
-}
+});
 function TreeEditor({ value, onChange, mode = "view", variant = "default", collapsed: collapsedProp, onCollapsedChange, rootLabel = "Agregar ra\xEDz", renderNode, onRequestAdd, onRequestEdit, onRequestDelete, style }) {
-  const t0 = performance.now();
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react23.useState)({});
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react24.useState)({});
   const source = collapsedProp ?? internalCollapsed;
   const needsImplicitInit = value.length > 0 && Object.keys(source).length === 0;
-  const implicitInit = (0, import_react23.useMemo)(
+  const implicitInit = (0, import_react24.useMemo)(
     () => needsImplicitInit ? buildInitialCollapsed(value) : null,
     [needsImplicitInit, value]
   );
   const collapsed = implicitInit ?? source;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (implicitInit == null) return;
     if (collapsedProp != null) {
       onCollapsedChange?.(implicitInit);
@@ -5712,67 +5784,77 @@ function TreeEditor({ value, onChange, mode = "view", variant = "default", colla
   }, [implicitInit]);
   const vt = VARIANT_TOKENS[variant];
   const isEdit = mode === "edit";
-  const ctx = {
-    isEdit,
-    collapsed,
-    onToggle: toggleCollapse,
-    onOpenActions: (nodeId) => {
+  const toggleCollapse = (0, import_react24.useCallback)(
+    (id) => {
+      const collapsing = !collapsed[id];
+      let next;
+      if (collapsing) {
+        next = { ...collapsed, [id]: true };
+        const node = findNode(value, id);
+        if (node) markBranchCollapsed(node.children, next);
+      } else {
+        next = { ...collapsed, [id]: false };
+        const siblings = findSiblingGroup(value, id);
+        const rootId = value.length > 0 ? value[0].id : null;
+        if (siblings) {
+          for (const s of siblings) {
+            if (s.id !== id && s.id !== rootId && s.children.length > 0) {
+              next[s.id] = true;
+              markBranchCollapsed(s.children, next);
+            }
+          }
+        }
+      }
+      if (collapsedProp != null) {
+        onCollapsedChange?.(next);
+      } else {
+        setInternalCollapsed(next);
+      }
+    },
+    [collapsed, collapsedProp, value, onCollapsedChange]
+  );
+  const onOpenActions = (0, import_react24.useCallback)(
+    (nodeId) => {
       const node = findNode(value, nodeId);
       if (node) onRequestEdit?.(node);
     },
-    renderNode,
-    vt
-  };
-  function toggleCollapse(id) {
-    const collapsing = !collapsed[id];
-    let next;
-    if (collapsing) {
-      next = { ...collapsed, [id]: true };
-      const node = findNode(value, id);
-      if (node) markBranchCollapsed(node.children, next);
-    } else {
-      next = { ...collapsed, [id]: false };
-      const siblings = findSiblingGroup(value, id);
-      const rootId = value.length > 0 ? value[0].id : null;
-      if (siblings) {
-        for (const s of siblings) {
-          if (s.id !== id && s.id !== rootId && s.children.length > 0) {
-            next[s.id] = true;
-            markBranchCollapsed(s.children, next);
+    [value, onRequestEdit]
+  );
+  const ctx = (0, import_react24.useMemo)(
+    () => ({
+      isEdit,
+      collapsed,
+      onToggle: toggleCollapse,
+      onOpenActions,
+      renderNode,
+      vt
+    }),
+    [isEdit, collapsed, toggleCollapse, onOpenActions, renderNode, vt]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    import_react_native49.View,
+    {
+      style: [styles44.container, { backgroundColor: vt.containerBg }, style],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { children: renderForest(ctx, value, 0) }),
+        isEdit ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+          import_react_native49.Pressable,
+          {
+            onPress: () => onRequestAdd?.(null),
+            style: ({ pressed }) => [
+              styles44.addRoot,
+              pressed && { backgroundColor: vt.pressedBg }
+            ],
+            accessibilityRole: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: [styles44.addChip, { borderColor: vt.addRootText }], children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: "add", size: 13, color: vt.addRootText }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: import_antonella_theme46.TextType.BodyMedium, color: vt.addRootText, children: rootLabel })
+            ]
           }
-        }
-      }
-    }
-    if (collapsedProp != null) {
-      onCollapsedChange?.(next);
-    } else {
-      setInternalCollapsed(next);
+        ) : null
+      ]
     }
-  }
-  console.log("[TreeEditor] render", Math.round(performance.now() - t0), "ms", {
-    valueLen: value.length,
-    mode,
-    variant,
-    collapsedKeys: Object.keys(collapsed).length
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_react_native49.View, { style: [styles44.container, { backgroundColor: vt.containerBg }, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { children: renderForest(ctx, value, 0) }),
-    isEdit ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-      import_react_native49.Pressable,
-      {
-        onPress: () => onRequestAdd?.(null),
-        style: ({ pressed }) => [
-          styles44.addRoot,
-          pressed && { backgroundColor: vt.pressedBg }
-        ],
-        accessibilityRole: "button",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_native49.View, { style: [styles44.addChip, { borderColor: vt.addRootText }], children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { name: "add", size: 13, color: vt.addRootText }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text, { variant: import_antonella_theme46.TextType.BodyMedium, color: vt.addRootText, children: rootLabel })
-        ]
-      }
-    ) : null
-  ] });
+  );
 }
 var styles44 = import_react_native49.StyleSheet.create({
   container: {
@@ -5848,8 +5930,9 @@ var styles44 = import_react_native49.StyleSheet.create({
     marginBottom: CARD_MARGIN,
     borderRadius: import_antonella_theme46.radius.sm
   },
-  subtree: {
-    overflow: "hidden"
+  subtreeFade: {
+    // Fade puro (native driver): sin medir/animar altura, evita el layout en
+    // cascada al expandir/colapsar subárboles anidados.
   },
   addChip: {
     width: 22,
@@ -6084,15 +6167,15 @@ var styles46 = import_react_native51.StyleSheet.create({
 });
 
 // src/components/card-form/AppFormCard.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_react_native52 = require("react-native");
 var import_antonella_theme48 = require("@william-callao/antonella-theme");
 var import_jsx_runtime54 = require("react/jsx-runtime");
 function AppFormCard({ children, labelWidth, style }) {
-  const items = import_react24.default.Children.toArray(children).filter((child) => import_react24.default.isValidElement(child)).map((child) => child);
+  const items = import_react25.default.Children.toArray(children).filter((child) => import_react25.default.isValidElement(child)).map((child) => child);
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native52.View, { style: [styles47.container, style], children: items.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_react_native52.View, { style: styles47.row, children: [
     index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_native52.View, { style: styles47.divider }) : null,
-    import_react24.default.cloneElement(child, {
+    import_react25.default.cloneElement(child, {
       ...labelWidth != null ? { labelWidth } : {}
     })
   ] }, index)) });
@@ -6117,7 +6200,7 @@ var styles47 = import_react_native52.StyleSheet.create({
 });
 
 // src/components/card-form/AppTextInput.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_native53 = require("react-native");
 var import_antonella_theme49 = require("@william-callao/antonella-theme");
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -6133,8 +6216,8 @@ function AppTextInput({
   maxLength,
   editable = true
 }) {
-  const inputRef = (0, import_react25.useRef)(null);
-  const [inputHeight, setInputHeight] = (0, import_react25.useState)(void 0);
+  const inputRef = (0, import_react26.useRef)(null);
+  const [inputHeight, setInputHeight] = (0, import_react26.useState)(void 0);
   const focus = () => {
     if (editable) inputRef.current?.focus();
   };
@@ -6232,7 +6315,7 @@ var styles48 = import_react_native53.StyleSheet.create({
 });
 
 // src/components/card-form/AppTextArea.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_native54 = require("react-native");
 var import_antonella_theme50 = require("@william-callao/antonella-theme");
 var import_jsx_runtime56 = require("react/jsx-runtime");
@@ -6248,8 +6331,8 @@ function AppTextArea({
   maxLength,
   editable = true
 }) {
-  const inputRef = (0, import_react26.useRef)(null);
-  const [inputHeight, setInputHeight] = (0, import_react26.useState)(void 0);
+  const inputRef = (0, import_react27.useRef)(null);
+  const [inputHeight, setInputHeight] = (0, import_react27.useState)(void 0);
   const focus = () => {
     if (editable) inputRef.current?.focus();
   };
@@ -6337,7 +6420,7 @@ var styles49 = import_react_native54.StyleSheet.create({
 });
 
 // src/components/card-form/AppSelector.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_native55 = require("react-native");
 var import_antonella_theme51 = require("@william-callao/antonella-theme");
 var import_jsx_runtime57 = require("react/jsx-runtime");
@@ -6353,17 +6436,17 @@ function AppSelector({
   placeholder = "Seleccionar",
   disabled = false
 }) {
-  const [open, setOpen] = (0, import_react27.useState)(false);
-  const [contentHeight, setContentHeight] = (0, import_react27.useState)(0);
-  const chevron = (0, import_react27.useRef)(new import_react_native55.Animated.Value(0)).current;
-  const height = (0, import_react27.useRef)(new import_react_native55.Animated.Value(0)).current;
-  const contentOpacity = (0, import_react27.useRef)(new import_react_native55.Animated.Value(0)).current;
+  const [open, setOpen] = (0, import_react28.useState)(false);
+  const [contentHeight, setContentHeight] = (0, import_react28.useState)(0);
+  const chevron = (0, import_react28.useRef)(new import_react_native55.Animated.Value(0)).current;
+  const height = (0, import_react28.useRef)(new import_react_native55.Animated.Value(0)).current;
+  const contentOpacity = (0, import_react28.useRef)(new import_react_native55.Animated.Value(0)).current;
   const selected = options.find((o) => o.value === value);
-  const chevronRotate = (0, import_react27.useMemo)(
+  const chevronRotate = (0, import_react28.useMemo)(
     () => chevron.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] }),
     [chevron]
   );
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     import_react_native55.Animated.timing(chevron, {
       toValue: open ? 1 : 0,
       duration: 180,
@@ -6371,7 +6454,7 @@ function AppSelector({
       useNativeDriver: false
     }).start();
   }, [open, chevron]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const animation = import_react_native55.Animated.parallel([
       import_react_native55.Animated.timing(height, {
         toValue: open ? Math.max(contentHeight, options.length * OPTION_ROW_HEIGHT) : 0,
@@ -6506,7 +6589,7 @@ var styles50 = import_react_native55.StyleSheet.create({
 });
 
 // src/components/card-form/AppToggle.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_native56 = require("react-native");
 var import_antonella_theme52 = require("@william-callao/antonella-theme");
 var import_jsx_runtime58 = require("react/jsx-runtime");
@@ -6522,9 +6605,9 @@ function AppToggle({
   onValueChange,
   disabled = false
 }) {
-  const thumbX = (0, import_react28.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
-  const trackColor = (0, import_react28.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
-  (0, import_react28.useEffect)(() => {
+  const thumbX = (0, import_react29.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
+  const trackColor = (0, import_react29.useRef)(new import_react_native56.Animated.Value(value ? 1 : 0)).current;
+  (0, import_react29.useEffect)(() => {
     import_react_native56.Animated.parallel([
       import_react_native56.Animated.timing(thumbX, {
         toValue: value ? 1 : 0,
@@ -6725,13 +6808,13 @@ var styles53 = import_react_native58.StyleSheet.create({
 });
 
 // src/layout/SheetLayout.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_native60 = require("react-native");
 var import_react_native_reanimated13 = __toESM(require("react-native-reanimated"));
 var import_antonella_theme55 = require("@william-callao/antonella-theme");
 
 // src/layout/SheetSlot.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_react_native59 = require("react-native");
 var import_react_native_reanimated12 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context10 = require("react-native-safe-area-context");
@@ -6759,7 +6842,7 @@ function SheetSlot({
   const fixedH = route?.options?.fixedHeaderHeight;
   const headerBg = route?.headerBackgroundColor ?? DEFAULT_HEADER_BG;
   const bodyBg = route?.bodyBackgroundColor ?? DEFAULT_BODY_BG;
-  const [measuredH, setMeasuredH] = (0, import_react29.useState)(fixedH ?? 0);
+  const [measuredH, setMeasuredH] = (0, import_react30.useState)(fixedH ?? 0);
   const headerHAnim = (0, import_react_native_reanimated12.useSharedValue)(fixedH ?? 0);
   const scrollY = (0, import_react_native_reanimated12.useSharedValue)(0);
   const contentFade = (0, import_react_native_reanimated12.useSharedValue)(1);
@@ -6769,7 +6852,7 @@ function SheetSlot({
     setMeasuredH(h);
     headerHAnim.value = (0, import_react_native_reanimated12.withTiming)(h, { duration: 280 });
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     scrollY.value = (0, import_react_native_reanimated12.withTiming)(0, { duration: 250 });
     contentFade.value = 0;
     contentFade.value = (0, import_react_native_reanimated12.withTiming)(1, { duration: 240 });
@@ -6966,12 +7049,12 @@ var _semantic8 = (0, import_antonella_theme55.resolveSemantic)(import_antonella_
 var HEADER_BG = _semantic8.default.bg.default;
 var BODY_BG = _semantic8.darkness.bg.default;
 var DURATION = 340;
-var SheetLayoutContext = (0, import_react30.createContext)({
+var SheetLayoutContext = (0, import_react31.createContext)({
   change: () => {
   }
 });
 function useSheetLayout() {
-  return (0, import_react30.useContext)(SheetLayoutContext);
+  return (0, import_react31.useContext)(SheetLayoutContext);
 }
 function resolveBaseColor(key) {
   return key === "header" ? HEADER_BG : BODY_BG;
@@ -6982,14 +7065,14 @@ function SheetLayout({
   onRequestChange,
   style
 }) {
-  const routeMap = (0, import_react30.useMemo)(() => {
+  const routeMap = (0, import_react31.useMemo)(() => {
     const m = {};
     for (const r of routes) m[r.key] = r;
     return m;
   }, [routes]);
   const activeRoute = routeMap[activeKey];
   const comp = activeRoute ? resolveComposition(activeRoute.kind) : { host: "base", baseColor: "header" };
-  const [slots, setSlots] = (0, import_react30.useState)(() => {
+  const [slots, setSlots] = (0, import_react31.useState)(() => {
     const init = {
       base: null,
       top: null,
@@ -7009,8 +7092,8 @@ function SheetLayout({
   const baseFrom = (0, import_react_native_reanimated13.useSharedValue)(HEADER_BG);
   const baseTo = (0, import_react_native_reanimated13.useSharedValue)(HEADER_BG);
   const baseProg = (0, import_react_native_reanimated13.useSharedValue)(1);
-  const prevKey = (0, import_react30.useRef)(activeKey);
-  (0, import_react30.useEffect)(() => {
+  const prevKey = (0, import_react31.useRef)(activeKey);
+  (0, import_react31.useEffect)(() => {
     if (activeRoute) {
       visBySide[comp.host].value = (0, import_react_native_reanimated13.withTiming)(1, { duration: DURATION });
     }
@@ -7019,7 +7102,7 @@ function SheetLayout({
     baseTo.value = c;
     baseProg.value = 1;
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (activeKey === prevKey.current) return;
     const toRoute = activeRoute;
     if (!toRoute) return;
@@ -7160,7 +7243,7 @@ var styles56 = import_react_native61.StyleSheet.create({
 });
 
 // src/layout/AppLayout.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_native63 = require("react-native");
 var import_react_native64 = require("react-native");
 var import_react_native_reanimated14 = __toESM(require("react-native-reanimated"));
@@ -7265,9 +7348,9 @@ var DEFAULT_COLORS = {
 };
 var COLLAPSE_DISTANCE = 80;
 var TRANSITION = 320;
-var AppNavigationContext = (0, import_react31.createContext)(null);
+var AppNavigationContext = (0, import_react32.createContext)(null);
 function useAppNavigation() {
-  const ctx = (0, import_react31.useContext)(AppNavigationContext);
+  const ctx = (0, import_react32.useContext)(AppNavigationContext);
   if (!ctx) {
     throw new Error("useAppNavigation debe usarse dentro de <AppLayout>");
   }
@@ -7279,9 +7362,9 @@ function AppLayout({
   debug = false
 }) {
   const { height: H } = (0, import_react_native64.useWindowDimensions)();
-  const [stack, setStack] = (0, import_react31.useState)([initialRoute]);
-  const [prevRoute, setPrevRoute] = (0, import_react31.useState)(null);
-  (0, import_react31.useEffect)(() => {
+  const [stack, setStack] = (0, import_react32.useState)([initialRoute]);
+  const [prevRoute, setPrevRoute] = (0, import_react32.useState)(null);
+  (0, import_react32.useEffect)(() => {
     setStack((s) => {
       if (s[0]?.name !== initialRoute.name) {
         return [initialRoute];
@@ -7289,18 +7372,18 @@ function AppLayout({
       return s;
     });
   }, [initialRoute.name]);
-  const navigate = (0, import_react31.useCallback)((route) => {
+  const navigate = (0, import_react32.useCallback)((route) => {
     setStack((s) => [...s, route]);
   }, []);
-  const replace = (0, import_react31.useCallback)((route) => {
+  const replace = (0, import_react32.useCallback)((route) => {
     setStack((s) => [...s.slice(0, -1), route]);
   }, []);
-  const back = (0, import_react31.useCallback)(() => {
+  const back = (0, import_react32.useCallback)(() => {
     setStack((s) => s.length > 1 ? s.slice(0, -1) : s);
   }, []);
   const canGoBack = stack.length > 1;
   const currentRoute = stack[stack.length - 1];
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const sub = import_react_native63.BackHandler.addEventListener("hardwareBackPress", () => {
       if (canGoBack) {
         back();
@@ -7337,9 +7420,9 @@ function AppLayout({
   };
   const animating = (0, import_react_native_reanimated14.useSharedValue)(0);
   const scrollY = (0, import_react_native_reanimated14.useSharedValue)(0);
-  const scrollRef = (0, import_react31.useRef)(null);
-  const innerScrollRef = (0, import_react31.useRef)(null);
-  const settleTimerRef = (0, import_react31.useRef)(null);
+  const scrollRef = (0, import_react32.useRef)(null);
+  const innerScrollRef = (0, import_react32.useRef)(null);
+  const settleTimerRef = (0, import_react32.useRef)(null);
   const progress = (0, import_react_native_reanimated14.useSharedValue)(1);
   const fromH = {
     top: (0, import_react_native_reanimated14.useSharedValue)(H / 3),
@@ -7401,7 +7484,7 @@ function AppLayout({
       }
     }
   };
-  (0, import_react31.useLayoutEffect)(() => {
+  (0, import_react32.useLayoutEffect)(() => {
     if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
     animating.value = 1;
     if (!state.pageScroll) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@william-callao/antonella-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Componentes UI de Antonella.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",