@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Navigation/Navigation.CollapsingHeader.js

@@ -1,48 +1,381 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import AppBar from "./Navigation.AppBar.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
-import { Animated, View } from "react-native";
+import { createContext, use } from "react";
+import { View } from "react-native";
+import Animated, { Extrapolation, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+/** A scroll position read on the UI thread. Any Reanimated shared value fits. */
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const CollapsingContext = createContext(null);
+
+/** Connects a `CollapsingHeader` with the `CollapsingHeader.ScrollView` below it. */
+function Root(t0) {
+  const $ = _c(6);
+  const {
+    children
+  } = t0;
+  const offset = useSharedValue(0);
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      flex: 1
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== children) {
+    t2 = _jsx(View, {
+      style: t1,
+      children: children
+    });
+    $[1] = children;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== offset || $[4] !== t2) {
+    t3 = _jsx(CollapsingContext, {
+      value: offset,
+      children: t2
+    });
+    $[3] = offset;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+/** The scroll that drives the header. Its offset is written on the UI thread, never in JS. */
+function CollapsingScrollView(props) {
+  const $ = _c(3);
+  const offset = use(CollapsingContext);
+  if (!offset) {
+    throw new Error("CollapsingHeader.ScrollView must be inside CollapsingHeader.Root");
+  }
+  const onScroll = useAnimatedScrollHandler({
+    onScroll: event => {
+      offset.set(event.contentOffset.y);
+    }
+  });
+  let t0;
+  if ($[0] !== onScroll || $[1] !== props) {
+    t0 = _jsx(Animated.ScrollView, {
+      scrollEventThrottle: 16,
+      ...props,
+      onScroll: onScroll
+    });
+    $[0] = onScroll;
+    $[1] = props;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
 /**
  * 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>
  * ```
  */
-function CollapsingHeader({ title, subtitle, scrollY, onBack, actions, largeHeight = subtitle ? 72 : 56, safeArea = true, testID, }) {
-    const theme = useTheme();
-    const insets = useSafeAreaInsets();
-    const largeOpacity = scrollY.interpolate({
-        inputRange: [0, largeHeight * 0.6],
-        outputRange: [1, 0],
-        extrapolate: "clamp",
-    });
-    const largeTranslate = scrollY.interpolate({
-        inputRange: [0, largeHeight],
-        outputRange: [0, -largeHeight / 2],
-        extrapolate: "clamp",
-    });
-    const largeContainerHeight = scrollY.interpolate({
-        inputRange: [0, largeHeight],
-        outputRange: [largeHeight, 0],
-        extrapolate: "clamp",
-    });
-    const compactTitleOpacity = scrollY.interpolate({
-        inputRange: [largeHeight * 0.6, largeHeight],
-        outputRange: [0, 1],
-        extrapolate: "clamp",
-    });
-    return (_jsxs(View, { style: { backgroundColor: theme.bg.card }, testID: testID, children: [_jsx(View, { style: { paddingTop: safeArea ? insets.top : 0 }, children: _jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[52px]", children: [_jsx(View, { style: { minWidth: 38 }, children: onBack ? (_jsx(AppBar.Action, { accessibilityLabel: "Volver", icon: "back", onPress: onBack })) : null }), _jsx(Animated.View, { className: "flex-1", style: { opacity: compactTitleOpacity }, children: _jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "subtitle", children: title }) }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] }) }), _jsx(Animated.View, { style: { height: largeContainerHeight, overflow: "hidden" }, children: _jsxs(Animated.View, { className: "px-4 pb-2", style: { opacity: largeOpacity, transform: [{ translateY: largeTranslate }] }, children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] }) }), _jsx(View, { className: "border-b border-border-light" })] }));
+function CollapsingHeader(t0) {
+  const $ = _c(49);
+  const {
+    title,
+    subtitle,
+    scrollY,
+    onBack,
+    actions,
+    largeHeight: t1,
+    safeArea: t2,
+    testID
+  } = t0;
+  const largeHeight = t1 === undefined ? subtitle ? 72 : 56 : t1;
+  const safeArea = t2 === undefined ? true : t2;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const rootOffset = use(CollapsingContext);
+  const offset = scrollY ?? rootOffset;
+  if (!offset) {
+    throw new Error("CollapsingHeader needs CollapsingHeader.Root or scrollY");
+  }
+  const largeStyle = useAnimatedStyle(() => {
+    const y = offset.get();
+    return {
+      opacity: interpolate(y, [0, largeHeight * 0.6], [1, 0], Extrapolation.CLAMP),
+      transform: [{
+        translateY: interpolate(y, [0, largeHeight], [0, -largeHeight / 2], Extrapolation.CLAMP)
+      }]
+    };
+  });
+  const largeContainerStyle = useAnimatedStyle(() => ({
+    height: interpolate(offset.get(), [0, largeHeight], [largeHeight, 0], Extrapolation.CLAMP)
+  }));
+  const compactTitleStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(offset.get(), [largeHeight * 0.6, largeHeight], [0, 1], Extrapolation.CLAMP)
+  }));
+  let t3;
+  if ($[0] !== theme.bg.card) {
+    t3 = {
+      backgroundColor: theme.bg.card
+    };
+    $[0] = theme.bg.card;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = safeArea ? insets.top : 0;
+  let t5;
+  if ($[2] !== t4) {
+    t5 = {
+      paddingTop: t4
+    };
+    $[2] = t4;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      minWidth: 38
+    };
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== onBack) {
+    t7 = onBack ? _jsx(AppBar.Action, {
+      accessibilityLabel: "Volver",
+      icon: "back",
+      onPress: onBack
+    }) : null;
+    $[5] = onBack;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== t7) {
+    t8 = _jsx(View, {
+      style: t6,
+      children: t7
+    });
+    $[7] = t7;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  let t9;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      flex: 1
+    };
+    $[9] = t9;
+  } else {
+    t9 = $[9];
+  }
+  let t10;
+  if ($[10] !== compactTitleStyle) {
+    t10 = [t9, compactTitleStyle];
+    $[10] = compactTitleStyle;
+    $[11] = t10;
+  } else {
+    t10 = $[11];
+  }
+  let t11;
+  if ($[12] !== title) {
+    t11 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      numberOfLines: 1,
+      semibold: true,
+      variant: "subtitle",
+      children: title
+    });
+    $[12] = title;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  let t12;
+  if ($[14] !== t10 || $[15] !== t11) {
+    t12 = _jsx(Animated.View, {
+      style: t10,
+      children: t11
+    });
+    $[14] = t10;
+    $[15] = t11;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      minWidth: 38
+    };
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== actions) {
+    t14 = _jsx(View, {
+      className: "flex-row items-center justify-end gap-2",
+      style: t13,
+      children: actions
+    });
+    $[18] = actions;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  let t15;
+  if ($[20] !== t12 || $[21] !== t14 || $[22] !== t8) {
+    t15 = _jsxs(View, {
+      className: "flex-row items-center px-3 gap-2 min-h-[52px]",
+      children: [t8, t12, t14]
+    });
+    $[20] = t12;
+    $[21] = t14;
+    $[22] = t8;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== t15 || $[25] !== t5) {
+    t16 = _jsx(View, {
+      style: t5,
+      children: t15
+    });
+    $[24] = t15;
+    $[25] = t5;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = {
+      overflow: "hidden"
+    };
+    $[27] = t17;
+  } else {
+    t17 = $[27];
+  }
+  let t18;
+  if ($[28] !== largeContainerStyle) {
+    t18 = [t17, largeContainerStyle];
+    $[28] = largeContainerStyle;
+    $[29] = t18;
+  } else {
+    t18 = $[29];
+  }
+  let t19;
+  if ($[30] !== title) {
+    t19 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      variant: "h2",
+      children: title
+    });
+    $[30] = title;
+    $[31] = t19;
+  } else {
+    t19 = $[31];
+  }
+  let t20;
+  if ($[32] !== subtitle) {
+    t20 = subtitle ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      children: subtitle
+    }) : null;
+    $[32] = subtitle;
+    $[33] = t20;
+  } else {
+    t20 = $[33];
+  }
+  let t21;
+  if ($[34] !== t19 || $[35] !== t20) {
+    t21 = _jsxs(View, {
+      className: "px-4 pb-2",
+      children: [t19, t20]
+    });
+    $[34] = t19;
+    $[35] = t20;
+    $[36] = t21;
+  } else {
+    t21 = $[36];
+  }
+  let t22;
+  if ($[37] !== largeStyle || $[38] !== t21) {
+    t22 = _jsx(Animated.View, {
+      style: largeStyle,
+      children: t21
+    });
+    $[37] = largeStyle;
+    $[38] = t21;
+    $[39] = t22;
+  } else {
+    t22 = $[39];
+  }
+  let t23;
+  if ($[40] !== t18 || $[41] !== t22) {
+    t23 = _jsx(Animated.View, {
+      style: t18,
+      children: t22
+    });
+    $[40] = t18;
+    $[41] = t22;
+    $[42] = t23;
+  } else {
+    t23 = $[42];
+  }
+  let t24;
+  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = _jsx(View, {
+      className: "border-b border-border-light"
+    });
+    $[43] = t24;
+  } else {
+    t24 = $[43];
+  }
+  let t25;
+  if ($[44] !== t16 || $[45] !== t23 || $[46] !== t3 || $[47] !== testID) {
+    t25 = _jsxs(View, {
+      style: t3,
+      testID: testID,
+      children: [t16, t23, t24]
+    });
+    $[44] = t16;
+    $[45] = t23;
+    $[46] = t3;
+    $[47] = testID;
+    $[48] = t25;
+  } else {
+    t25 = $[48];
+  }
+  return t25;
 }
-export default CollapsingHeader;
+const CollapsingHeaderWithParts = Object.assign(CollapsingHeader, {
+  Root,
+  ScrollView: CollapsingScrollView
+});
+export default CollapsingHeaderWithParts;

package/dist/Navigation/Navigation.FloatingBar.js

@@ -1,21 +1,81 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
 /**
  * **Rounded floating container** for nav/action bars that float above the content
  * (Snapchat/TikTok/McDonald's 2026 style). Shadowed pill, safe-area aware.
  * Presentational: drop a `BottomNav`, actions, or anything inside.
  */
-function FloatingBar({ children, position = "bottom", inset = 16, className, testID, }) {
-    const insets = useSafeAreaInsets();
-    const safe = position === "bottom" ? insets.bottom : insets.top;
-    return (_jsx(View, { pointerEvents: "box-none", style: {
-            position: "absolute",
-            left: inset,
-            right: inset,
-            [position]: safe + inset,
-        }, testID: testID, children: _jsx(View, { className: cn("rounded-full bg-bg-card px-2 py-1.5 border border-border-light", className), style: theme.shadow.lg, children: children }) }));
+function FloatingBar(t0) {
+  const $ = _c(14);
+  const {
+    children,
+    position: t1,
+    inset: t2,
+    className,
+    testID
+  } = t0;
+  const position = t1 === undefined ? "bottom" : t1;
+  const inset = t2 === undefined ? 16 : t2;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const safe = position === "bottom" ? insets.bottom : insets.top;
+  const t3 = safe + inset;
+  let t4;
+  if ($[0] !== inset || $[1] !== position || $[2] !== t3) {
+    t4 = {
+      position: "absolute",
+      left: inset,
+      right: inset,
+      [position]: t3
+    };
+    $[0] = inset;
+    $[1] = position;
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== className) {
+    t5 = cn("rounded-full bg-bg-card px-2 py-1.5 border border-border-light", className);
+    $[4] = className;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== children || $[7] !== t5 || $[8] !== theme.shadow.lg) {
+    t6 = _jsx(View, {
+      className: t5,
+      style: theme.shadow.lg,
+      children: children
+    });
+    $[6] = children;
+    $[7] = t5;
+    $[8] = theme.shadow.lg;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t4 || $[11] !== t6 || $[12] !== testID) {
+    t7 = _jsx(View, {
+      pointerEvents: "box-none",
+      style: t4,
+      testID: testID,
+      children: t6
+    });
+    $[10] = t4;
+    $[11] = t6;
+    $[12] = testID;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
 }
 export default FloatingBar;