From 8d0364a9aad876857d2289de54669cd3ed0d7935 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Tue, 30 Jun 2026 20:13:01 +0400
Subject: [PATCH] fix: nested

---
 apps/v4/registry/bases/base/ui/drawer.tsx | 30 ++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/apps/v4/registry/bases/base/ui/drawer.tsx b/apps/v4/registry/bases/base/ui/drawer.tsx
index 90bb0bf317..7ca4a205e3 100644
--- a/apps/v4/registry/bases/base/ui/drawer.tsx
+++ b/apps/v4/registry/bases/base/ui/drawer.tsx
@@ -52,13 +52,37 @@ function DrawerContent({
         <DrawerPrimitive.Popup
           data-slot="drawer-content"
           className={cn(
-            "cn-drawer-content-base group/drawer-content pointer-events-auto fixed z-50 transform-(--drawer-transform) overflow-hidden transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            // Base.
+            "cn-drawer-content-base group/drawer-content pointer-events-auto fixed z-50 transform-(--drawer-transform) overflow-hidden transition-[transform,height,opacity] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform",
+            // Stack.
+            "[--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] [--drawer-stack-offset:calc(var(--drawer-stack-peek-offset)+(var(--drawer-stack-shrink)*var(--drawer-stack-size)))] [--drawer-stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--drawer-stack-progress))*1rem))] [--drawer-stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--drawer-stack-scale-base:calc(max(0,1-(var(--nested-drawers)*var(--drawer-stack-step))))] [--drawer-stack-scale:clamp(0,calc(var(--drawer-stack-scale-base)+(var(--drawer-stack-step)*var(--drawer-stack-progress))),1)] [--drawer-stack-shrink:calc(1-var(--drawer-stack-scale))] [--drawer-stack-size:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height,0px))-var(--drawer-bleed-y)))] [--drawer-stack-step:0.05] [--drawer-transform:translate3d(var(--drawer-translate-x),var(--drawer-translate-y),0)_scale(var(--drawer-stack-scale))] [--drawer-translate-x:0px] [--drawer-translate-y:0px]",
+            // Nested state.
+            "after:pointer-events-none after:absolute after:inset-0 after:bg-transparent after:transition-[background-color] after:duration-500 after:ease-[cubic-bezier(0.32,0.72,0,1)] after:content-[''] data-nested-drawer-open:overflow-hidden data-nested-drawer-open:after:bg-black/5 data-nested-drawer-swiping:duration-0",
+            // Transitions.
+            "data-ending-style:transform-(--drawer-closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*500ms)] data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*500ms)] data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*500ms)]",
+            // Direction: down.
+            "data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:origin-[50%_calc(100%-var(--drawer-bleed-y))] data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-translate-y:calc(var(--drawer-swipe-movement-y)-var(--drawer-stack-offset))] data-[swipe-direction=down]:data-nested-drawer-open:h-[calc(var(--drawer-stack-size)+var(--drawer-bleed-y))]",
+            // Direction: up.
+            "data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:origin-[50%_var(--drawer-bleed-y)] data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-translate-y:calc(var(--drawer-swipe-movement-y)+var(--drawer-stack-offset))] data-[swipe-direction=up]:data-nested-drawer-open:h-[calc(var(--drawer-stack-size)+var(--drawer-bleed-y))]",
+            // Direction: left.
+            "data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:origin-[var(--drawer-bleed-x)_50%] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-stack-size:max(0px,calc(100%-var(--drawer-bleed-x)))] data-[swipe-direction=left]:[--drawer-translate-x:calc(var(--drawer-swipe-movement-x)+var(--drawer-stack-offset))] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
+            // Direction: right.
+            "data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:origin-[calc(100%-var(--drawer-bleed-x))_50%] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-stack-size:max(0px,calc(100%-var(--drawer-bleed-x)))] data-[swipe-direction=right]:[--drawer-translate-x:calc(var(--drawer-swipe-movement-x)-var(--drawer-stack-offset))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))]",
             className
           )}
           {...props}
         >
-          <div className="cn-drawer-handle-base relative mx-auto hidden shrink-0 group-data-[swipe-direction=down]/drawer-content:block group-data-[swipe-direction=up]/drawer-content:order-last group-data-[swipe-direction=up]/drawer-content:block after:absolute after:-inset-4" />
-          <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col">
+          <div
+            className={cn(
+              "cn-drawer-handle-base relative mx-auto hidden shrink-0 transition-opacity duration-200 group-data-nested-drawer-open/drawer-content:opacity-0 group-data-nested-drawer-swiping/drawer-content:opacity-100 group-data-[swipe-direction=down]/drawer-content:block group-data-[swipe-direction=up]/drawer-content:order-last group-data-[swipe-direction=up]/drawer-content:block after:absolute after:-inset-4"
+            )}
+          />
+          <DrawerPrimitive.Content
+            className={cn(
+              "flex min-h-0 flex-1 flex-col transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)]",
+              "group-data-nested-drawer-open/drawer-content:opacity-0 group-data-nested-drawer-swiping/drawer-content:opacity-100"
+            )}
+          >
             {children}
           </DrawerPrimitive.Content>
         </DrawerPrimitive.Popup>