chore: update podfile

Author: lodev09

example/bare/ios/Podfile.lock

@@ -2777,7 +2777,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNTrueSheet (3.10.0):
+  - RNTrueSheet (3.11.0-beta.7):
     - boost
     - DoubleConversion
     - fast_float
@@ -3248,7 +3248,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: b407c25a3f51d22dd7430e6b530f753f112b7e77
   RNReanimated: 292cd58688552a22b3fc1cefcfbc49b336dfed68
   RNScreens: afaf526a9c804c3b4503f950cf3e67ed81e29ada
-  RNTrueSheet: 819132cbb5713a5794cc0574c4d5fa7859a7c7de
+  RNTrueSheet: eca911005316e6b28240ea15132c8f768517a0c1
   RNWorklets: 01efdd402d236a13651ea5ea5437ca85a44e7afa
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: b669e79fa0f8d3f6f5e35372345f54b99e06b13c

src/TrueSheet.web.tsx

@@ -482,7 +482,8 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   const { isNested, dismissAbove, descendants } = useSheetStack(
     methodsRef,
     drawerContentRef,
-    isOpen
+    isOpen,
+    isLandscapeOrTablet && presentation === 'form'
   );
   dismissAboveRef.current = dismissAbove;
 
@@ -492,12 +493,18 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   useEffect(() => {
     const parent = drawerContentRef.current;
     if (!parent) return;
+    const parentWrapper = parent.closest<HTMLElement>('[data-vaul-detached-wrapper]');
 
     const transition = `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
+    const wrapperTransition = `clip-path ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`;
 
     if (descendants.length === 0) {
       parent.style.transition = transition;
       parent.style.transform = '';
+      if (parentWrapper && parentWrapper.style.clipPath) {
+        parentWrapper.style.transition = wrapperTransition;
+        parentWrapper.style.clipPath = 'inset(0px round 0px)';
+      }
       return;
     }
 
@@ -513,13 +520,67 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       return targetY;
     };
 
+    // When a form-sheet descendant is present, clip the parent to the form
+    // card's viewport box so the parts that would peek above/around the card
+    // are hidden. Form-card box is derived from the child's inline styles
+    // (vs. getBoundingClientRect) so it's the at-rest box, not skewed by
+    // vaul's wrapper slide-in. Insets are relative to the parent wrapper's
+    // rect — the parent wrapper isn't necessarily viewport-sized (e.g., it
+    // has DEFAULT_MAX_WIDTH on tablet/landscape).
+    // Clip-path transitions with the same duration/easing as the cascade
+    // transform so the visible box and the drawer's content slide together;
+    // otherwise the content animates against a static wrapper boundary.
+    // We seed clip-path from `inset(0)` (= no clip) before setting the target
+    // inset so the browser interpolates between two inset() shapes — going
+    // from `none` directly to inset() is interpolated inconsistently.
+    const applyFormClip = () => {
+      if (!parentWrapper) return;
+      const form = descendants.find((d) => d.isFormSheetRef.current);
+      if (!form) {
+        if (parentWrapper.style.clipPath) {
+          parentWrapper.style.transition = wrapperTransition;
+          parentWrapper.style.clipPath = 'inset(0px round 0px)';
+        }
+        return;
+      }
+      const childDrawer = form.nodeRef.current;
+      const childWrapper = childDrawer?.closest<HTMLElement>('[data-vaul-detached-wrapper]');
+      if (!childDrawer || !childWrapper) return;
+      const snapY = parseFloat(childDrawer.style.getPropertyValue('--snap-point-height')) || 0;
+      const childBottomGap = parseFloat(childWrapper.style.bottom) || 0;
+      const childMaxW =
+        parseFloat(childWrapper.style.maxWidth) || window.innerWidth;
+      const formLeft = (window.innerWidth - childMaxW) / 2;
+      const formRight = (window.innerWidth + childMaxW) / 2;
+      const formBottom = window.innerHeight - childBottomGap;
+      const rect = parentWrapper.getBoundingClientRect();
+      const top = Math.max(0, snapY - rect.top);
+      const left = Math.max(0, formLeft - rect.left);
+      const right = Math.max(0, rect.right - formRight);
+      const bottom = Math.max(0, rect.bottom - formBottom);
+      // Seed inset(0 round 0) so the first transition interpolates between
+      // two inset() shapes with matching `round` values (a missing `round`
+      // would interpolate inconsistently).
+      if (!parentWrapper.style.clipPath) {
+        parentWrapper.style.transition = '';
+        parentWrapper.style.clipPath = 'inset(0px round 0px)';
+        // eslint-disable-next-line no-void
+        void parentWrapper.offsetHeight;
+      }
+      parentWrapper.style.transition = wrapperTransition;
+      const radius = cornerRadius ?? DEFAULT_CORNER_RADIUS;
+      parentWrapper.style.clipPath = `inset(${top}px ${right}px ${bottom}px ${left}px round ${radius}px)`;
+    };
+
     const apply = () => {
       const targetY = computeTargetY();
       const match = parent.style.transform.match(/translate3d\([^,]*,\s*(-?\d*\.?\d+)px/);
       const currentY = match ? parseFloat(match[1]!) : 0;
-      if (Math.abs(currentY - targetY) < 0.5) return;
-      parent.style.transition = transition;
-      parent.style.transform = `translate3d(0, ${targetY}px, 0)`;
+      if (Math.abs(currentY - targetY) >= 0.5) {
+        parent.style.transition = transition;
+        parent.style.transform = `translate3d(0, ${targetY}px, 0)`;
+      }
+      applyFormClip();
     };
 
     const raf = requestAnimationFrame(apply);

src/TrueSheetProvider.web.tsx

@@ -19,6 +19,7 @@ type NodeRef = RefObject<HTMLDivElement | null>;
 interface StackEntry {
   ref: SheetRef;
   nodeRef: NodeRef;
+  isFormSheetRef: RefObject<boolean>;
 }
 
 interface SheetContextValue {
@@ -166,10 +167,21 @@ export function useRegisterSheet(name: string | undefined, ref: SheetRef): void
  * Registers the sheet in the open stack while `isOpen` is true and returns
  * live data used by each sheet to render stacked visuals and dismiss children.
  */
-export function useSheetStack(ref: SheetRef, nodeRef: NodeRef, isOpen: boolean) {
+export function useSheetStack(
+  ref: SheetRef,
+  nodeRef: NodeRef,
+  isOpen: boolean,
+  isFormSheet: boolean
+) {
   const ctx = useContext(SheetContext);
 
-  const entry = useMemo<StackEntry>(() => ({ ref, nodeRef }), [ref, nodeRef]);
+  const isFormSheetRef = useRef(isFormSheet);
+  isFormSheetRef.current = isFormSheet;
+
+  const entry = useMemo<StackEntry>(
+    () => ({ ref, nodeRef, isFormSheetRef }),
+    [ref, nodeRef]
+  );
 
   useEffect(() => {
     if (!ctx || !isOpen) return;