@papyrus-sdk/ui-react-native 0.2.30 → 0.2.31

package/dist/index.js

@@ -25983,6 +25983,16 @@ var resolvePageScrubberThumbTopFromPosition = ({
   trackHeight,
   thumbHeight
 }) => Math.max(0, Math.min(trackHeight - thumbHeight, position - thumbHeight / 2));
+var resolvePageScrubberTrackRevealOrigin = ({
+  thumbTop,
+  thumbHeight,
+  trackHeight
+}) => Math.max(0, Math.min(trackHeight, thumbTop + thumbHeight / 2));
+var resolvePageScrubberTrackHeight = ({
+  windowHeight,
+  topOffset,
+  bottomOffset
+}) => Math.max(180, Math.min(720, windowHeight - topOffset - bottomOffset - 56));
 var resolvePageScrubberThumbTop = ({
   currentPage,
   trackHeight,
@@ -32137,10 +32147,11 @@ function ProgressPill({
   const { height: windowHeight } = (0, import_react_native17.useWindowDimensions)();
   const windowHeightRef = (0, import_react14.useRef)(windowHeight);
   windowHeightRef.current = windowHeight;
-  const trackHeight = Math.max(
-    180,
-    Math.min(520, windowHeight - offsets.progress - offsets.bottom - 132)
-  );
+  const trackHeight = resolvePageScrubberTrackHeight({
+    windowHeight,
+    topOffset: offsets.progress,
+    bottomOffset: offsets.bottom
+  });
   const thumbHeight = 44;
   const trackYRef = (0, import_react14.useRef)(0);
   const scrubberRef = (0, import_react14.useRef)(null);
@@ -32188,6 +32199,8 @@ function ProgressPill({
   const thumbTopSnapshotRef = (0, import_react14.useRef)(thumbTop);
   thumbTopSnapshotRef.current = thumbTop;
   const scrubStartThumbTopRef = (0, import_react14.useRef)(0);
+  const trackReveal = (0, import_react14.useRef)(new import_react_native17.Animated.Value(0)).current;
+  const [trackOriginY, setTrackOriginY] = (0, import_react14.useState)(0);
   const scrubberMetricsRef = (0, import_react14.useRef)({ trackHeight, thumbHeight, pageCount });
   scrubberMetricsRef.current = { trackHeight, thumbHeight, pageCount };
   (0, import_react14.useEffect)(() => {
@@ -32256,6 +32269,19 @@ function ProgressPill({
         hasMovedRef.current = false;
         longPressTriggeredRef.current = false;
         scrubStartThumbTopRef.current = thumbTopSnapshotRef.current;
+        setTrackOriginY(
+          resolvePageScrubberTrackRevealOrigin({
+            thumbTop: thumbTopSnapshotRef.current,
+            thumbHeight,
+            trackHeight: scrubberMetricsRef.current.trackHeight
+          })
+        );
+        trackReveal.setValue(0);
+        import_react_native17.Animated.timing(trackReveal, {
+          toValue: 1,
+          duration: 180,
+          useNativeDriver: false
+        }).start();
         scrubNavigationControllerRef.current.begin();
         pendingReleasedScrubPageRef.current = null;
         setScrubPreviewPage(currentPageRef.current);
@@ -32297,6 +32323,11 @@ function ProgressPill({
         }
         isScrubbingRef.current = false;
         onScrubbingChangeRef.current?.(false);
+        import_react_native17.Animated.timing(trackReveal, {
+          toValue: 0,
+          duration: 140,
+          useNativeDriver: false
+        }).start();
         const releasedPage = scrubNavigationControllerRef.current.release();
         const releaseAction = resolvePageScrubberReleaseAction({
           hasMoved: hasMovedRef.current,
@@ -32323,6 +32354,11 @@ function ProgressPill({
         }
         isScrubbingRef.current = false;
         onScrubbingChangeRef.current?.(false);
+        import_react_native17.Animated.timing(trackReveal, {
+          toValue: 0,
+          duration: 140,
+          useNativeDriver: false
+        }).start();
         scrubNavigationControllerRef.current.cancel();
         pendingReleasedScrubPageRef.current = null;
         setScrubPreviewPage(null);
@@ -32361,7 +32397,21 @@ function ProgressPill({
             });
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.View, { style: [styles17.track, isDark && styles17.trackDark] }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              import_react_native17.Animated.View,
+              {
+                style: [
+                  styles17.track,
+                  isDark && styles17.trackDark,
+                  {
+                    transformOrigin: [0, trackOriginY, 0],
+                    opacity: trackReveal,
+                    transform: [{ scaleY: trackReveal }],
+                    elevation: 6
+                  }
+                ]
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native17.Animated.View, { style: [styles17.thumb, { top: thumbTopRef.current }], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
               import_react_native17.View,
               {
@@ -32409,7 +32459,7 @@ var styles17 = import_react_native17.StyleSheet.create({
   track: {
     position: "absolute",
     top: 0,
-    right: 30,
+    right: 0,
     bottom: 0,
     width: 3,
     borderRadius: 2,