@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Navigation/Navigation.BottomNav.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { CountBadge } from "../Display/count-badge.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
 import { relativeLuminance, useTheme } from "../theme/index.js";
@@ -6,118 +7,382 @@ import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+
 /** Forced-dark chrome: prefer `bg.inverse` when it is actually dark, else `bg.card`. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 function resolveDarkSurface(theme) {
-    const candidate = theme.bg.inverse ?? theme.bg.card;
-    return relativeLuminance(candidate) < 0.25 ? candidate : theme.bg.card;
+  const candidate = theme.bg.inverse ?? theme.bg.card;
+  return relativeLuminance(candidate) < 0.25 ? candidate : theme.bg.card;
 }
+
+/**
+ * Active-tab indicator style:
+ * - `none`: color only.
+ * - `pill`: filled round pill behind the icon.
+ * - `pill-text`: extended pill with icon + label inside (inactive = icon only).
+ * - `bar`: top accent bar over the active item (label below).
+ * - `glow`: glowing dot under the active icon (pairs with `tone="dark"`).
+ */
+
 /**
  * The single bottom-navigation component. Extensible by props, not by forking:
  * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
  * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", className, testID, }) {
-    const insets = useSafeAreaInsets();
-    const theme = useTheme();
-    const dark = tone === "dark";
-    const rounded = shape === "floating" || dark;
-    const bottomPad = rounded ? 6 : safeArea ? insets.bottom : 0;
-    const activeTint = activeColor === "accent" ? theme.accent : theme.primary;
-    const onActive = activeColor === "accent" ? theme.text.onAccent : theme.text.onPrimary;
-    const brandText = theme.text.accent;
-    const inactiveColor = dark ? "rgba(255,255,255,0.55)" : theme.icon.secondary;
-    const surfaceColor = dark ? resolveDarkSurface(theme) : theme.bg.card;
-    const containerStyle = rounded
-        ? {
-            borderRadius: 32,
-            paddingBottom: bottomPad,
-            paddingTop: 6,
-            paddingHorizontal: 6,
-            minHeight: 64,
-            backgroundColor: surfaceColor,
-            ...theme.shadow.lg,
-        }
-        : {
-            paddingBottom: bottomPad,
-            minHeight: 56,
-            backgroundColor: surfaceColor,
-            ...(bordered ? { borderTopWidth: 1, borderTopColor: theme.border.light } : null),
-        };
-    const renderIconNode = (item, active, color) => {
-        const name = active ? (item.activeIcon ?? item.icon) : item.icon;
-        return (_jsxs(View, { children: [name ? _jsx(Icon, { color: color, name: name, size: 24 }) : null, item.badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -4, right: -10, borderWidth: 2, borderColor: surfaceColor }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: item.badge }) })) : null] }));
+function BottomNav(t0) {
+  const $ = _c(55);
+  const {
+    items,
+    value,
+    onChange,
+    showLabels: t1,
+    centerAction,
+    safeArea: t2,
+    shape: t3,
+    tone: t4,
+    indicator: t5,
+    bordered: t6,
+    activeColor: t7,
+    className,
+    testID
+  } = t0;
+  const showLabels = t1 === undefined ? true : t1;
+  const safeArea = t2 === undefined ? true : t2;
+  const shape = t3 === undefined ? "bar" : t3;
+  const tone = t4 === undefined ? "light" : t4;
+  const indicator = t5 === undefined ? "none" : t5;
+  const bordered = t6 === undefined ? true : t6;
+  const activeColor = t7 === undefined ? "primary" : t7;
+  const insets = useSafeAreaInsets();
+  const theme = useTheme();
+  const dark = tone === "dark";
+  const rounded = shape === "floating" || dark;
+  const bottomPad = rounded ? 6 : safeArea ? insets.bottom : 0;
+  const activeTint = activeColor === "accent" ? theme.accent : theme.primary;
+  const onActive = activeColor === "accent" ? theme.text.onAccent : theme.text.onPrimary;
+  const brandText = theme.text.accent;
+  const inactiveColor = dark ? "rgba(255,255,255,0.55)" : theme.icon.secondary;
+  let t8;
+  if ($[0] !== dark || $[1] !== theme) {
+    t8 = dark ? resolveDarkSurface(theme) : theme.bg.card;
+    $[0] = dark;
+    $[1] = theme;
+    $[2] = t8;
+  } else {
+    t8 = $[2];
+  }
+  const surfaceColor = t8;
+  let t9;
+  if ($[3] !== bordered || $[4] !== bottomPad || $[5] !== rounded || $[6] !== surfaceColor || $[7] !== theme.border || $[8] !== theme.shadow) {
+    t9 = rounded ? {
+      borderRadius: 32,
+      paddingBottom: bottomPad,
+      paddingTop: 6,
+      paddingHorizontal: 6,
+      minHeight: 64,
+      backgroundColor: surfaceColor,
+      ...theme.shadow.lg
+    } : {
+      paddingBottom: bottomPad,
+      minHeight: 56,
+      backgroundColor: surfaceColor,
+      ...(bordered ? {
+        borderTopWidth: 1,
+        borderTopColor: theme.border.light
+      } : null)
+    };
+    $[3] = bordered;
+    $[4] = bottomPad;
+    $[5] = rounded;
+    $[6] = surfaceColor;
+    $[7] = theme.border;
+    $[8] = theme.shadow;
+    $[9] = t9;
+  } else {
+    t9 = $[9];
+  }
+  const containerStyle = t9;
+  let t10;
+  if ($[10] !== surfaceColor) {
+    t10 = (item, active, color) => {
+      const name = active ? item.activeIcon ?? item.icon : item.icon;
+      return _jsxs(View, {
+        children: [name ? _jsx(Icon, {
+          color: color,
+          name: name,
+          size: 24
+        }) : null, item.badge != null ? _jsx(CountBadge, {
+          anchor: {
+            top: -4,
+            right: -10
+          },
+          count: item.badge,
+          ringColor: surfaceColor
+        }) : null]
+      });
     };
-    const renderItem = (item) => {
-        const active = item.key === value;
-        // Variant A — extended pill with text (active = horizontal pill, inactive = icon only).
-        if (indicator === "pill-text") {
-            if (active) {
-                return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: true }, className: "flex-row items-center px-4 py-2", onPress: () => onChange(item.key), style: {
-                        borderRadius: 999,
-                        backgroundColor: activeTint,
-                        minHeight: 48,
-                        minWidth: 48,
-                    }, children: [renderIconNode(item, true, onActive), item.label ? (_jsx(Typography.Text, { semibold: true, style: { color: onActive, fontSize: 13, marginLeft: 8, flexShrink: 1 }, children: item.label })) : null] }, item.key));
-            }
-            return (_jsx(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", className: "items-center justify-center px-3 py-2", onPress: () => onChange(item.key), style: { minHeight: 48, minWidth: 48 }, children: renderIconNode(item, false, inactiveColor) }, item.key));
+    $[10] = surfaceColor;
+    $[11] = t10;
+  } else {
+    t10 = $[11];
+  }
+  const renderIconNode = t10;
+  let t11;
+  if ($[12] !== activeTint || $[13] !== brandText || $[14] !== dark || $[15] !== inactiveColor || $[16] !== indicator || $[17] !== onActive || $[18] !== onChange || $[19] !== renderIconNode || $[20] !== showLabels || $[21] !== theme.text.inverse || $[22] !== value) {
+    t11 = item_0 => {
+      const active_0 = item_0.key === value;
+      if (indicator === "pill-text") {
+        if (active_0) {
+          return _jsxs(Pressable, {
+            accessibilityLabel: item_0.label ?? item_0.key,
+            accessibilityRole: "tab",
+            accessibilityState: {
+              selected: true
+            },
+            className: "flex-row items-center px-4 py-2",
+            onPress: () => onChange(item_0.key),
+            style: {
+              borderRadius: 999,
+              backgroundColor: activeTint,
+              minHeight: 48,
+              minWidth: 48
+            },
+            children: [renderIconNode(item_0, true, onActive), item_0.label ? _jsx(Typography.Text, {
+              semibold: true,
+              style: {
+                color: onActive,
+                fontSize: 13,
+                marginLeft: 8,
+                flexShrink: 1
+              },
+              children: item_0.label
+            }) : null]
+          }, item_0.key);
+        }
+        return _jsx(Pressable, {
+          accessibilityLabel: item_0.label ?? item_0.key,
+          accessibilityRole: "tab",
+          className: "items-center justify-center px-3 py-2",
+          onPress: () => onChange(item_0.key),
+          style: {
+            minHeight: 48,
+            minWidth: 48
+          },
+          children: renderIconNode(item_0, false, inactiveColor)
+        }, item_0.key);
+      }
+      const inPill = indicator === "pill" && active_0;
+      let iconColor = inactiveColor;
+      if (inPill) {
+        iconColor = onActive;
+      } else {
+        if (active_0) {
+          iconColor = brandText;
         }
-        // Variants none / pill / bar / glow — vertical icon + optional indicator + optional label.
-        const inPill = indicator === "pill" && active;
-        let iconColor = inactiveColor;
-        if (inPill)
-            iconColor = onActive;
-        else if (active)
-            iconColor = brandText;
-        let labelColor = inactiveColor;
-        if (active && inPill)
-            labelColor = onActive;
-        else if (active && dark)
-            labelColor = theme.text.inverse;
-        else if (active)
+      }
+      let labelColor = inactiveColor;
+      if (active_0 && inPill) {
+        labelColor = onActive;
+      } else {
+        if (active_0 && dark) {
+          labelColor = theme.text.inverse;
+        } else {
+          if (active_0) {
             labelColor = brandText;
-        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), style: { minHeight: 48, minWidth: 48 }, children: [indicator === "bar" && active ? (_jsx(View, { style: {
-                        position: "absolute",
-                        top: 0,
-                        width: 26,
-                        height: 3,
-                        borderRadius: 999,
-                        backgroundColor: activeTint,
-                    } })) : null, _jsx(View, { className: inPill ? "px-5 py-1.5" : undefined, style: inPill ? { borderRadius: 999, backgroundColor: activeTint } : undefined, children: renderIconNode(item, active, iconColor) }), indicator === "glow" && active ? (_jsx(View, { style: {
-                        width: 5,
-                        height: 5,
-                        borderRadius: 999,
-                        marginTop: 4,
-                        backgroundColor: activeTint,
-                        shadowColor: activeTint,
-                        shadowOpacity: 0.9,
-                        shadowRadius: 5,
-                        elevation: 4,
-                    } })) : null, showLabels && item.label && indicator !== "glow" ? (_jsx(Typography.Text, { semibold: active, style: { color: labelColor, fontSize: 11, marginTop: 3, textAlign: "center" }, children: item.label })) : null] }, item.key));
-    };
-    const renderCenterFab = () => (_jsx(Pressable, { accessibilityLabel: centerAction?.accessibilityLabel ?? "Acción", accessibilityRole: "button", className: "items-center justify-center", onPress: centerAction?.onPress, style: {
-            width: 52,
-            height: 52,
-            borderRadius: 18,
-            marginTop: -20,
-            marginHorizontal: 6,
+          }
+        }
+      }
+      return _jsxs(Pressable, {
+        accessibilityLabel: item_0.label ?? item_0.key,
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected: active_0
+        },
+        className: "flex-1 items-center justify-center py-1.5",
+        onPress: () => onChange(item_0.key),
+        style: {
+          minHeight: 48,
+          minWidth: 48
+        },
+        children: [indicator === "bar" && active_0 ? _jsx(View, {
+          style: {
+            position: "absolute",
+            top: 0,
+            width: 26,
+            height: 3,
+            borderRadius: 999,
+            backgroundColor: activeTint
+          }
+        }) : null, _jsx(View, {
+          className: inPill ? "px-5 py-1.5" : undefined,
+          style: inPill ? {
+            borderRadius: 999,
+            backgroundColor: activeTint
+          } : undefined,
+          children: renderIconNode(item_0, active_0, iconColor)
+        }), indicator === "glow" && active_0 ? _jsx(View, {
+          style: {
+            width: 5,
+            height: 5,
+            borderRadius: 999,
+            marginTop: 4,
             backgroundColor: activeTint,
-            // Glow halo en el color de acento (iOS shadow + Android elevation).
             shadowColor: activeTint,
-            shadowOffset: { width: 0, height: 4 },
-            shadowOpacity: 0.55,
-            shadowRadius: 14,
-            elevation: 10,
-        }, children: _jsx(Icon, { color: onActive, name: centerAction?.icon ?? "add", size: 26 }) }));
-    let content;
-    if (centerAction) {
-        const mid = Math.ceil(items.length / 2);
-        content = (_jsxs(_Fragment, { children: [items.slice(0, mid).map(renderItem), renderCenterFab(), items.slice(mid).map(renderItem)] }));
+            shadowOpacity: 0.9,
+            shadowRadius: 5,
+            elevation: 4
+          }
+        }) : null, showLabels && item_0.label && indicator !== "glow" ? _jsx(Typography.Text, {
+          semibold: active_0,
+          style: {
+            color: labelColor,
+            fontSize: 11,
+            marginTop: 3,
+            textAlign: "center"
+          },
+          children: item_0.label
+        }) : null]
+      }, item_0.key);
+    };
+    $[12] = activeTint;
+    $[13] = brandText;
+    $[14] = dark;
+    $[15] = inactiveColor;
+    $[16] = indicator;
+    $[17] = onActive;
+    $[18] = onChange;
+    $[19] = renderIconNode;
+    $[20] = showLabels;
+    $[21] = theme.text.inverse;
+    $[22] = value;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  const renderItem = t11;
+  let t12;
+  if ($[24] !== activeTint || $[25] !== centerAction?.accessibilityLabel || $[26] !== centerAction?.icon || $[27] !== centerAction?.onPress || $[28] !== onActive) {
+    t12 = () => _jsx(Pressable, {
+      accessibilityLabel: centerAction?.accessibilityLabel ?? "Acci\xF3n",
+      accessibilityRole: "button",
+      className: "items-center justify-center",
+      onPress: centerAction?.onPress,
+      style: {
+        width: 52,
+        height: 52,
+        borderRadius: 18,
+        marginTop: -20,
+        marginHorizontal: 6,
+        backgroundColor: activeTint,
+        shadowColor: activeTint,
+        shadowOffset: {
+          width: 0,
+          height: 4
+        },
+        shadowOpacity: 0.55,
+        shadowRadius: 14,
+        elevation: 10
+      },
+      children: _jsx(Icon, {
+        color: onActive,
+        name: centerAction?.icon ?? "add",
+        size: 26
+      })
+    });
+    $[24] = activeTint;
+    $[25] = centerAction?.accessibilityLabel;
+    $[26] = centerAction?.icon;
+    $[27] = centerAction?.onPress;
+    $[28] = onActive;
+    $[29] = t12;
+  } else {
+    t12 = $[29];
+  }
+  const renderCenterFab = t12;
+  let content;
+  if (centerAction) {
+    const mid = Math.ceil(items.length / 2);
+    let t13;
+    if ($[30] !== items || $[31] !== mid || $[32] !== renderItem) {
+      t13 = items.slice(0, mid).map(renderItem);
+      $[30] = items;
+      $[31] = mid;
+      $[32] = renderItem;
+      $[33] = t13;
+    } else {
+      t13 = $[33];
+    }
+    let t14;
+    if ($[34] !== renderCenterFab) {
+      t14 = renderCenterFab();
+      $[34] = renderCenterFab;
+      $[35] = t14;
+    } else {
+      t14 = $[35];
+    }
+    let t15;
+    if ($[36] !== items || $[37] !== mid || $[38] !== renderItem) {
+      t15 = items.slice(mid).map(renderItem);
+      $[36] = items;
+      $[37] = mid;
+      $[38] = renderItem;
+      $[39] = t15;
+    } else {
+      t15 = $[39];
+    }
+    let t16;
+    if ($[40] !== t13 || $[41] !== t14 || $[42] !== t15) {
+      t16 = _jsxs(_Fragment, {
+        children: [t13, t14, t15]
+      });
+      $[40] = t13;
+      $[41] = t14;
+      $[42] = t15;
+      $[43] = t16;
+    } else {
+      t16 = $[43];
     }
-    else {
-        content = items.map(renderItem);
+    content = t16;
+  } else {
+    let t13;
+    if ($[44] !== items || $[45] !== renderItem) {
+      t13 = items.map(renderItem);
+      $[44] = items;
+      $[45] = renderItem;
+      $[46] = t13;
+    } else {
+      t13 = $[46];
     }
-    const justify = indicator === "pill-text" ? "justify-around" : "";
-    return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row items-center", justify, className), style: containerStyle, testID: testID, children: content }));
+    content = t13;
+  }
+  const justify = indicator === "pill-text" ? "justify-around" : "";
+  let t13;
+  if ($[47] !== className || $[48] !== justify) {
+    t13 = cn("flex-row items-center", justify, className);
+    $[47] = className;
+    $[48] = justify;
+    $[49] = t13;
+  } else {
+    t13 = $[49];
+  }
+  let t14;
+  if ($[50] !== containerStyle || $[51] !== content || $[52] !== t13 || $[53] !== testID) {
+    t14 = _jsx(View, {
+      accessibilityRole: "tablist",
+      className: t13,
+      style: containerStyle,
+      testID: testID,
+      children: content
+    });
+    $[50] = containerStyle;
+    $[51] = content;
+    $[52] = t13;
+    $[53] = testID;
+    $[54] = t14;
+  } else {
+    t14 = $[54];
+  }
+  return t14;
 }
 export default BottomNav;
 export { BottomNav };

package/dist/Navigation/Navigation.CollapsingHeader.d.ts

@@ -1,10 +1,24 @@
 import { type AppBarActionProps } from "./Navigation.AppBar.js";
-import type { ReactNode } from "react";
-import { Animated } from "react-native";
+import { type ReactNode } from "react";
+import { type ScrollViewProps } from "react-native";
+/** A scroll position read on the UI thread. Any Reanimated shared value fits. */
+export interface ScrollOffset {
+    get(): number;
+}
+/** Connects a `CollapsingHeader` with the `CollapsingHeader.ScrollView` below it. */
+declare function Root({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The scroll that drives the header. Its offset is written on the UI thread, never in JS. */
+declare function CollapsingScrollView(props: Omit<ScrollViewProps, "onScroll">): import("react").JSX.Element;
 export interface CollapsingHeaderProps {
     title: string;
     subtitle?: string;
-    scrollY: Animated.Value;
+    /**
+     * Scroll position from your own Reanimated scroll (FlashList, a custom list).
+     * Inside `CollapsingHeader.Root` it comes from `CollapsingHeader.ScrollView`.
+     */
+    scrollY?: ScrollOffset;
     onBack?: () => void;
     actions?: ReactNode;
     /** Extra height of the collapsing large-title (px). Default 56, or 72 with subtitle. */
@@ -16,19 +30,20 @@ export interface CollapsingHeaderProps {
 /**
  * Header with a large-title that **collapses on scroll** (merge of iOS 26 large title +
  * Material 3 large top app bar). The compact bar stays fixed and its title fades in while
- * scrolling; the large-title fades out and slides up. Controlled by an `Animated.Value`.
+ * scrolling; the large-title fades out and slides up.
  *
- * Usage: pass `scrollY` from your `Animated.ScrollView`. Since the large-title collapses its
- * `height` (not supported by the native driver), use `useNativeDriver: false`:
+ * Every frame runs on the UI thread (Reanimated): scrolling never waits for JS.
  * ```tsx
- * const scrollY = useRef(new Animated.Value(0)).current;
- * <CollapsingHeader title="Inicio" scrollY={scrollY} />
- * <Animated.ScrollView
- *   onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: false })}
- *   scrollEventThrottle={16}
- * />
+ * <CollapsingHeader.Root>
+ *   <CollapsingHeader title="Inicio" />
+ *   <CollapsingHeader.ScrollView>{content}</CollapsingHeader.ScrollView>
+ * </CollapsingHeader.Root>
  * ```
  */
 declare function CollapsingHeader({ title, subtitle, scrollY, onBack, actions, largeHeight, safeArea, testID, }: CollapsingHeaderProps): import("react").JSX.Element;
+declare const CollapsingHeaderWithParts: typeof CollapsingHeader & {
+    Root: typeof Root;
+    ScrollView: typeof CollapsingScrollView;
+};
 export type { AppBarActionProps };
-export default CollapsingHeader;
+export default CollapsingHeaderWithParts;