From 62ed61059f784171658dd2abc8827efd2acd9d4b Mon Sep 17 00:00:00 2001
From: "Irsyad A. Panjaitan" <irsyad@parsinta.com>
Date: Fri, 25 Oct 2024 18:33:59 +0700
Subject: [PATCH] lfg

---
 components/docs/generated/previews.ts         |  14 +-
 .../overlays/drawer/drawer-basic-demo.tsx     |  11 +-
 .../drawer/drawer-controlled-demo.tsx         |  21 +-
 .../overlays/drawer/drawer-direction-demo.tsx |  42 --
 .../drawer/drawer-hide-notch-demo.tsx         |  23 --
 .../drawer/drawer-is-not-centered-demo.tsx    |  24 --
 .../overlays/drawer/drawer-nested-demo.tsx    |  78 ++++
 .../overlays/drawer/drawer-sticky-demo.tsx    | 114 ++++++
 .../drawer/drawer-without-notch-demo.tsx      |  27 ++
 components/ui/drawer.tsx                      | 382 +++++++++++-------
 .../docs/components/overlays/drawer.mdx       |  41 +-
 11 files changed, 506 insertions(+), 271 deletions(-)
 delete mode 100644 components/docs/overlays/drawer/drawer-direction-demo.tsx
 delete mode 100644 components/docs/overlays/drawer/drawer-hide-notch-demo.tsx
 delete mode 100644 components/docs/overlays/drawer/drawer-is-not-centered-demo.tsx
 create mode 100644 components/docs/overlays/drawer/drawer-nested-demo.tsx
 create mode 100644 components/docs/overlays/drawer/drawer-sticky-demo.tsx
 create mode 100644 components/docs/overlays/drawer/drawer-without-notch-demo.tsx

diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts
index c052c3c6..dad4d6da 100644
--- a/components/docs/generated/previews.ts
+++ b/components/docs/generated/previews.ts
@@ -326,21 +326,21 @@ export const previews: Record<string, any> = {
   "buttons/button/button-link-demo": {
     component: React.lazy(() => import("@/components/docs/buttons/button/button-link-demo")),
   },
-  "overlays/drawer/drawer-direction-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-direction-demo")),
-  },
-  "overlays/drawer/drawer-hide-notch-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-hide-notch-demo")),
+  "overlays/drawer/drawer-nested-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-nested-demo")),
   },
   "overlays/drawer/drawer-basic-demo": {
     component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-basic-demo")),
   },
-  "overlays/drawer/drawer-is-not-centered-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-is-not-centered-demo")),
+  "overlays/drawer/drawer-sticky-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-sticky-demo")),
   },
   "overlays/drawer/drawer-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-controlled-demo")),
   },
+  "overlays/drawer/drawer-without-notch-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-without-notch-demo")),
+  },
   "overlays/tooltip/tooltip-delay-demo": {
     component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-delay-demo")),
   },
diff --git a/components/docs/overlays/drawer/drawer-basic-demo.tsx b/components/docs/overlays/drawer/drawer-basic-demo.tsx
index f1037207..7129f8fc 100644
--- a/components/docs/overlays/drawer/drawer-basic-demo.tsx
+++ b/components/docs/overlays/drawer/drawer-basic-demo.tsx
@@ -1,6 +1,8 @@
 "use client"
 
-import { Button, buttonStyles, Drawer, TextField } from "ui"
+import React from "react"
+
+import { buttonStyles, Drawer, TextField } from "ui"
 
 export default function DrawerBasicDemo() {
   return (
@@ -14,12 +16,11 @@ export default function DrawerBasicDemo() {
           </Drawer.Description>
         </Drawer.Header>
         <Drawer.Body className="space-y-4">
-          <TextField autoFocus label="Email" placeholder="john.doe@example.com" />
-          <TextField label="Password" type="password" placeholder="••••••••••••" />
+          <TextField type="email" placeholder="john.doe@example.com" />
+          <TextField label="Password" type="password" placeholder="••••••••••••" isRevealable />
         </Drawer.Body>
         <Drawer.Footer>
-          <Drawer.Close>Cancel</Drawer.Close>
-          <Button>Login</Button>
+          <Drawer.Close className="w-full">Login</Drawer.Close>
         </Drawer.Footer>
       </Drawer.Content>
     </Drawer>
diff --git a/components/docs/overlays/drawer/drawer-controlled-demo.tsx b/components/docs/overlays/drawer/drawer-controlled-demo.tsx
index e3618c5d..e0e6785c 100644
--- a/components/docs/overlays/drawer/drawer-controlled-demo.tsx
+++ b/components/docs/overlays/drawer/drawer-controlled-demo.tsx
@@ -2,24 +2,35 @@
 
 import React from "react"
 
-import { Button, Drawer } from "ui"
+import { Button, Drawer, TextField } from "ui"
 
 export default function DrawerControlledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
   return (
     <>
-      <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
+      <Button onPress={() => setIsOpen(!isOpen)} appearance="outline">
+        Login
+      </Button>
       <Drawer isOpen={isOpen} onOpenChange={setIsOpen}>
         <Drawer.Content>
           <Drawer.Header>
-            <Drawer.Title>Drawer</Drawer.Title>
+            <Drawer.Title>Login</Drawer.Title>
             <Drawer.Description>
-              A slide-in overlay for extra content or options.
+              Please enter your credentials to access your account.
             </Drawer.Description>
           </Drawer.Header>
+          <Drawer.Body className="flex flex-col gap-4">
+            <TextField label="Email" isRequired type="email" placeholder="Enter your email" />
+            <TextField
+              label="Password"
+              isRequired
+              type="password"
+              placeholder="Enter your password"
+            />
+          </Drawer.Body>
           <Drawer.Footer>
             <Drawer.Close>Close</Drawer.Close>
-            <Button>Done</Button>
+            <Button onPress={() => setIsOpen(false)}>Login</Button>
           </Drawer.Footer>
         </Drawer.Content>
       </Drawer>
diff --git a/components/docs/overlays/drawer/drawer-direction-demo.tsx b/components/docs/overlays/drawer/drawer-direction-demo.tsx
deleted file mode 100644
index 35ead120..00000000
--- a/components/docs/overlays/drawer/drawer-direction-demo.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client"
-
-import React from "react"
-
-import { Button, Drawer } from "ui"
-
-type Sides = "bottom" | "top" | "left" | "right"
-
-export default function DrawerDirectionDemo() {
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [openSide, setOpenSide] = React.useState<Sides>("bottom")
-  const sides: Sides[] = ["bottom", "top", "left", "right"]
-  const handlePress = (side: Sides) => {
-    setOpenSide(side)
-    setIsOpen(true)
-  }
-  return (
-    <div>
-      <div className="flex gap-2 flex-wrap">
-        {sides.map((side) => (
-          <Button key={side} appearance="outline" onPress={() => handlePress(side)}>
-            {side}
-          </Button>
-        ))}
-      </div>
-
-      <Drawer side={openSide} isOpen={isOpen} onOpenChange={setIsOpen}>
-        <Drawer.Content>
-          <Drawer.Header>
-            <Drawer.Title className="capitalize">{openSide}</Drawer.Title>
-            <Drawer.Description>The drawer will slide in from the {openSide}.</Drawer.Description>
-          </Drawer.Header>
-          <Drawer.Footer>
-            <Drawer.Close shape="circle" className="w-full">
-              Close
-            </Drawer.Close>
-          </Drawer.Footer>
-        </Drawer.Content>
-      </Drawer>
-    </div>
-  )
-}
diff --git a/components/docs/overlays/drawer/drawer-hide-notch-demo.tsx b/components/docs/overlays/drawer/drawer-hide-notch-demo.tsx
deleted file mode 100644
index 9369428d..00000000
--- a/components/docs/overlays/drawer/drawer-hide-notch-demo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client"
-
-import { Button, buttonStyles, Drawer } from "ui"
-
-export default function DrawerHideNotchDemo() {
-  return (
-    <Drawer hideNotch>
-      <Drawer.Trigger className={buttonStyles({ appearance: "outline" })}>
-        Open Drawer
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Header>
-          <Drawer.Title>Drawer</Drawer.Title>
-          <Drawer.Description>A slide-in overlay for extra content or options.</Drawer.Description>
-        </Drawer.Header>
-        <Drawer.Footer>
-          <Drawer.Close>Close</Drawer.Close>
-          <Button>Done</Button>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  )
-}
diff --git a/components/docs/overlays/drawer/drawer-is-not-centered-demo.tsx b/components/docs/overlays/drawer/drawer-is-not-centered-demo.tsx
deleted file mode 100644
index 4a3c50d5..00000000
--- a/components/docs/overlays/drawer/drawer-is-not-centered-demo.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"use client"
-
-import { Button, buttonStyles, Drawer } from "ui"
-
-export default function DrawerIsNotCenteredDemo() {
-  return (
-    <Drawer isCentered={false}>
-      <Drawer.Trigger className={buttonStyles({ appearance: "outline" })}>
-        Open Drawer
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Header>
-          <Drawer.Title>Drawer</Drawer.Title>
-          <Drawer.Description>A slide-in overlay for extra content or options.</Drawer.Description>
-        </Drawer.Header>
-        <Drawer.Body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sus</Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close>Close</Drawer.Close>
-          <Button>Done</Button>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  )
-}
diff --git a/components/docs/overlays/drawer/drawer-nested-demo.tsx b/components/docs/overlays/drawer/drawer-nested-demo.tsx
new file mode 100644
index 00000000..54e7dea8
--- /dev/null
+++ b/components/docs/overlays/drawer/drawer-nested-demo.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import React from "react"
+
+import { toast } from "sonner"
+import { Button, Drawer, Form, Textarea } from "ui"
+
+export default function DrawerNestedDemo() {
+  const [isRegistrationDrawerOpen, setIsRegistrationDrawerOpen] = React.useState(false)
+  const [isProfileSetupDrawerOpen, setIsProfileSetupDrawerOpen] = React.useState(false)
+  const [isTyping, setIsTyping] = React.useState(false)
+
+  return (
+    <>
+      <Button onPress={() => setIsRegistrationDrawerOpen(true)}>Register</Button>
+
+      <Drawer
+        isOpen={isRegistrationDrawerOpen}
+        onOpenChange={() => setIsRegistrationDrawerOpen(false)}
+      >
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title>Confirm Registration</Drawer.Title>
+            <Drawer.Description>Please confirm your registration details.</Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Footer>
+            <Drawer.Close>Cancel</Drawer.Close>
+            <Button
+              onPress={() => {
+                setIsProfileSetupDrawerOpen(true)
+              }}
+            >
+              Confirm
+            </Button>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer>
+
+      <Drawer
+        isOpen={isProfileSetupDrawerOpen}
+        onOpenChange={(isOpen) => {
+          if (!isOpen && isTyping) toast("Profile setup incomplete", { position: "top-center" })
+          setIsProfileSetupDrawerOpen(isOpen)
+        }}
+      >
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title>Set Up Your Profile</Drawer.Title>
+            <Drawer.Description>
+              We need a bit more information before you can get started.
+            </Drawer.Description>
+          </Drawer.Header>
+          <Form
+            onSubmit={(e) => {
+              e.preventDefault()
+              toast.success("Profile setup complete", { position: "top-center" })
+              setIsProfileSetupDrawerOpen(false)
+              setIsRegistrationDrawerOpen(false)
+            }}
+          >
+            <Drawer.Body className="space-y-4">
+              <Textarea
+                isRequired
+                label="Bio"
+                placeholder="Tell us something about yourself"
+                onInput={() => setIsTyping(true)}
+              />
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Drawer.Close>Skip for now</Drawer.Close>
+              <Button type="submit">Complete Setup</Button>
+            </Drawer.Footer>
+          </Form>
+        </Drawer.Content>
+      </Drawer>
+    </>
+  )
+}
diff --git a/components/docs/overlays/drawer/drawer-sticky-demo.tsx b/components/docs/overlays/drawer/drawer-sticky-demo.tsx
new file mode 100644
index 00000000..bffa19b0
--- /dev/null
+++ b/components/docs/overlays/drawer/drawer-sticky-demo.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import React from "react"
+
+import { buttonStyles, Drawer } from "ui"
+
+export default function DrawerStickyDemo() {
+  return (
+    <Drawer>
+      <Drawer.Trigger className={buttonStyles({ shape: "circle", appearance: "outline" })}>
+        Open
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>The Beatles</Drawer.Header>
+        <Drawer.Body>
+          <div className="prose dark:prose-invert prose-zinc">
+            <p>
+              Welcome to our Terms of Use. By accessing or using our services, you agree to be bound
+              by these terms. If you do not agree to these terms, please refrain from using our
+              services.
+            </p>
+            <h3> User Obligations</h3>
+            <h4>Account Responsibility</h4>
+            <p>
+              When you create an account with us, you are responsible for maintaining the
+              confidentiality of your account and password.
+            </p>{" "}
+            <p>
+              You agree to accept responsibility for all activities that occur under your account.
+              You must notify us immediately of any breach of security or unauthorized use of your
+              account.
+            </p>
+            <h4>Compliance with Laws</h4>
+            <p>
+              You agree to comply with all applicable laws, regulations, and policies in connection
+              with your use of our services. This includes adhering to intellectual property laws
+              and refraining from any unlawful behavior while using our platform.
+            </p>
+            <h3> Prohibited Activities</h3>
+            <p>
+              You are not permitted to access or attempt to access any of our services by any means
+              other than through the interface provided by us. Any form of hacking, bypassing, or
+              circumventing our security protocols is strictly prohibited.
+            </p>
+            <h4>Misuse of Content</h4>
+            <p>
+              You agree not to misuse, reproduce, distribute, or modify any content from our
+              services unless explicitly authorized by us. This includes engaging in activities such
+              as scraping, data mining, or using automated systems to extract data.
+            </p>
+            <h4>Harassment and Abuse</h4>
+            <p>
+              You are prohibited from using our services to harass, abuse, or harm other users. This
+              includes sending unsolicited messages, stalking, or engaging in any form of
+              cyberbullying. We reserve the right to terminate accounts found in violation of this
+              policy.
+            </p>
+            <h4>Ownership of Content</h4>
+            <p>
+              All content, trademarks, service marks, logos, and other intellectual property
+              displayed on our services are the property of their respective owners. You may not
+              use, copy, or distribute any content without prior written permission from the owner.
+            </p>
+            <h4>User-Generated Content</h4>
+            <p>
+              By submitting content to our services, you grant us a worldwide, royalty-free,
+              non-exclusive license to use, distribute, modify, and display that content for the
+              purpose of providing our services.
+            </p>
+            <p>
+              You retain all ownership rights to your content but agree to allow us to use it in
+              accordance with these terms.
+            </p>
+            <h3> Termination</h3>
+            <h4>Right to Terminate</h4>
+            We reserve the right to terminate or suspend your access to our services at any time,
+            without notice, for any reason, including but not limited to a breach of these terms.
+            Upon termination, your right to use our services will immediately cease.
+            <h4>Effect of Termination</h4>
+            Upon termination of your account, all provisions of these terms that, by their nature,
+            should survive termination shall remain in effect. This includes, but is not limited to,
+            ownership provisions, warranty disclaimers, and limitations of liability.
+            <h3> Limitation of Liability</h3>
+            <h4>Service Availability</h4>
+            We do not guarantee that our services will be available at all times or without
+            interruption. We are not liable for any downtime or technical issues that may prevent
+            access to our services.
+            <h4>No Warranties</h4>
+            Our services are provided "as is" and "as available" without any warranties of any kind,
+            whether express or implied. We do not warrant that our services will meet your
+            requirements or that they will be error-free or secure.
+            <h4>Limitation of Damages</h4>
+            In no event shall we be liable for any indirect, incidental, special, consequential, or
+            punitive damages arising out of or related to your use of our services. This includes,
+            but is not limited to, damages for loss of profits, data, or other intangibles.
+            <h3> Changes to These Terms</h3>
+            We reserve the right to modify or replace these terms at any time. If a revision is
+            material, we will provide at least 30 days' notice prior to any new terms taking effect.
+            What constitutes a material change will be determined at our sole discretion.
+            <h3> Governing Law</h3>
+            These terms shall be governed and construed in accordance with the laws of [Your
+            Jurisdiction], without regard to its conflict of law provisions. Any disputes arising
+            from or relating to these terms shall be resolved in the courts of [Your Jurisdiction].
+            <h3> Contact Information</h3>
+            If you have any questions about these terms, please contact us at xxx@example.com.
+          </div>
+        </Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close shape="circle">Close</Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/components/docs/overlays/drawer/drawer-without-notch-demo.tsx b/components/docs/overlays/drawer/drawer-without-notch-demo.tsx
new file mode 100644
index 00000000..af7ab59c
--- /dev/null
+++ b/components/docs/overlays/drawer/drawer-without-notch-demo.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import React from "react"
+
+import { buttonStyles, Drawer } from "ui"
+
+export default function DrawerWithoutNotchDemo() {
+  return (
+    <Drawer withNotch={false}>
+      <Drawer.Trigger className={buttonStyles({ shape: "circle", appearance: "outline" })}>
+        Open Drawer
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>The Beatles</Drawer.Title>
+          <Drawer.Description>
+            The Beatles were an English rock band formed in Liverpool in 1960, comprising John
+            Lennon, Paul McCartney, George Harrison and Ringo Starr.
+          </Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Footer>
+          <Drawer.Close shape="circle">Close</Drawer.Close>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  )
+}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
index 23ed2bff..210e8824 100644
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@@ -1,185 +1,287 @@
 "use client"
 
-import * as React from "react"
-
-import { tv } from "tailwind-variants"
-import { type DialogProps, Drawer as DrawerPrimitive, Root } from "vaul"
-
-import { buttonStyles } from "./button"
-
-const drawer = tv({
-  slots: {
-    overlay: "fixed inset-0 z-50 bg-dark/15 dark:bg-dark/40",
-    header:
-      "grid gap-1.5 p-4 text-center sm:text-left peer-data-[vaul-drawer-direction=right]:text-left",
-    footer: "mt-auto flex flex-col-reverse justify-between gap-3 p-4 sm:flex-row",
-    title: "text-lg font-semibold leading-none tracking-tight",
-    description: "text-sm text-muted-fg",
-    notch: "mx-auto mt-2 h-1.5 w-20 rounded-full bg-muted",
-    body: "px-4"
-  }
-})
+import React from "react"
+
+import type { PanInfo } from "framer-motion"
+import {
+  animate,
+  AnimatePresence,
+  type Inertia,
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useMotionValueEvent,
+  useTransform
+} from "framer-motion"
+import type { DialogProps } from "react-aria-components"
+import { type ButtonProps, Modal, ModalOverlay } from "react-aria-components"
+import { twJoin } from "tailwind-merge"
 
-const { overlay, header, body, footer, title, description, notch } = drawer()
+import { Dialog } from "./dialog"
+import { cn } from "./primitive"
+
+const inertiaTransition: Inertia = {
+  type: "inertia",
+  bounceStiffness: 300,
+  bounceDamping: 60,
+  timeConstant: 300
+}
+const staticTransition = {
+  duration: 0.4,
+  ease: [0.32, 0.72, 0, 1]
+}
+const drawerMargin = 60
+const drawerRadius = 32
 
-interface DrawerContextProps {
-  side?: "bottom" | "top" | "left" | "right"
-  hideNotch?: boolean
-  isCentered?: boolean
+interface DrawerContextType {
+  isOpen: boolean
+  openDrawer: () => void
+  closeDrawer: () => void
+  withNotch?: boolean
 }
 
-const DrawerContext = React.createContext<DrawerContextProps>({})
+const DrawerContext = React.createContext<DrawerContextType | undefined>(undefined)
 
-const useDrawer = () => {
+const useDrawerContext = () => {
   const context = React.useContext(DrawerContext)
   if (context === undefined) {
-    throw new Error("useDrawer must be used within a Drawer")
+    throw new Error("useDrawerContext must be used within a Drawer")
   }
   return context
 }
 
-type DrawerProps = Omit<DialogProps, "open" | "fadeFromIndex" | "direction"> & {
-  isOpen?: boolean
-} & DrawerContextProps &
-  (
-    | { side?: "bottom" | "top"; isCentered?: boolean }
-    | { side?: "left" | "right"; isCentered?: never }
-  ) & {}
+const ModalWrapper = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof Modal>>(
+  (props, ref) => <Modal ref={ref} {...props} />
+)
+ModalWrapper.displayName = "ModalWrapper"
 
-const Drawer = ({
-  side = "bottom",
-  isOpen,
-  isCentered = true,
-  hideNotch = false,
-  shouldScaleBackground = true,
-  ...props
-}: DrawerProps) => {
-  return (
-    <DrawerContext.Provider value={{ side, hideNotch, isCentered }}>
-      <Root
-        {...props}
-        direction={side}
-        open={isOpen}
-        shouldScaleBackground={shouldScaleBackground}
-      />
-    </DrawerContext.Provider>
-  )
+const ModalOverlayWrapper = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof ModalOverlay>
+>((props, ref) => <ModalOverlay ref={ref} {...props} />)
+ModalOverlayWrapper.displayName = "ModalOverlayWrapper"
+
+const ModalPrimitive = motion.create(ModalWrapper)
+const ModalOverlayPrimitive = motion.create(ModalOverlayWrapper)
+
+interface DrawerOverlayPrimitiveProps
+  extends Omit<
+    React.ComponentProps<typeof ModalOverlayPrimitive>,
+    "isOpen" | "onOpenChange" | "style"
+  > {
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
+  role?: DialogProps["role"]
 }
 
-type OverlayProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitiveProps) => {
+  const { closeDrawer, withNotch } = useDrawerContext()
+  const [contentHeight, setContentHeight] = React.useState(0)
 
-const Overlay = ({ className, ...props }: OverlayProps) => (
-  <DrawerPrimitive.Overlay className={overlay({ className })} {...props} />
-)
+  const h = Math.min(contentHeight + drawerMargin, window.innerHeight - drawerMargin)
+  const y = useMotionValue(h)
+  const bgOpacity = useTransform(y, [0, h], [0.15, 0])
+  const bg = useMotionTemplate`rgba(0, 0, 0, ${bgOpacity})`
+
+  const root = document.getElementsByTagName("main")[0] as HTMLElement
+
+  const bodyBorderRadius = useTransform(y, [0, h], [drawerRadius, 0])
+
+  useMotionValueEvent(bodyBorderRadius, "change", (v) => (root.style.borderRadius = `${v}px`))
 
-const content = tv({
-  base: "fixed dark:ring-border z-50 flex h-auto flex-col ring-1 ring-dark/5 bg-overlay text-overlay-fg",
-  variants: {
-    hideNotch: {
-      true: "[&>[data-slot=drawer-notch]]:hidden"
-    },
-    isCentered: {
-      true: [
-        "[&>[data-slot=drawer-header]]:w-full [&>[data-slot=drawer-footer]]:w-full  [&>[data-slot=drawer-body]]:w-full",
-        "[&>[data-slot=drawer-header]]:mx-auto [&>[data-slot=drawer-footer]]:mx-auto  [&>[data-slot=drawer-body]]:mx-auto",
-        "[&>[data-slot=drawer-header]]:max-w-md [&>[data-slot=drawer-footer]]:max-w-md  [&>[data-slot=drawer-body]]:max-w-md"
-      ]
-    },
-    side: {
-      bottom: "fixed inset-x-0 bottom-0 mt-24 rounded-t-3xl",
-      top: "inset-x-0 top-0 mb-24 rounded-t-xl",
-      left: "inset-y-0 left-0 h-full w-screen max-w-80",
-      right: "inset-y-0 right-0 h-full w-screen max-w-80"
+  const onDragEnd = (_: any, { offset, velocity }: PanInfo) => {
+    if (offset.y > h * 0.4 || velocity.y > 10) {
+      closeDrawer()
+    } else {
+      animate(y, 0, { ...inertiaTransition, min: 0, max: 0 })
     }
-  },
-  defaultVariants: {
-    side: "bottom"
   }
-})
 
-const Content = ({
-  className,
-  children,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>) => {
-  const { side, hideNotch, isCentered } = useDrawer()
   return (
-    <DrawerPrimitive.Portal>
-      <Overlay />
-      <DrawerPrimitive.Content
-        className={content({ hideNotch, isCentered, side, className })}
-        {...props}
+    <>
+      <ModalOverlayPrimitive
+        isDismissable
+        isOpen
+        onOpenChange={closeDrawer}
+        className={twJoin([
+          "fixed touch-none will-change-transform left-0 top-0 isolate z-50 h-[--visual-viewport-height] w-full",
+          "flex items-end [--visual-viewport-vertical-padding:100px]"
+        ])}
+        style={{
+          backgroundColor: bg as any
+        }}
       >
-        {side === "bottom" && <div data-slot="drawer-notch" className={notch()} />}
-        {children}
-      </DrawerPrimitive.Content>
-    </DrawerPrimitive.Portal>
+        <ModalPrimitive
+          className={cn(
+            "max-h-full flex flex-col w-full rounded-t-3xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg",
+            "ring-1 ring-dark/5 dark:ring-light/15"
+          )}
+          initial={{ y: h }}
+          animate={{ y: 0 }}
+          exit={{ y: h }}
+          transition={staticTransition}
+          style={{
+            y,
+            top: "auto",
+            height: contentHeight > 0 ? `${contentHeight + drawerMargin}px` : "auto",
+            maxHeight: `calc(100% - ${drawerMargin}px)`
+          }}
+          drag="y"
+          dragConstraints={{ top: 0, bottom: h }}
+          onDragEnd={onDragEnd}
+          {...props}
+        >
+          <div className="overflow-hidden">
+            {withNotch && (
+              <div className="notch touch-pan-y sticky top-0 mx-auto shrink-0 mt-2.5 h-1.5 w-10 rounded-full bg-fg/20" />
+            )}
+            <div
+              className="overflow-y-auto mt-3"
+              ref={(el) => {
+                if (el) {
+                  const resizeObserver = new ResizeObserver((entries) => {
+                    for (const entry of entries) {
+                      setContentHeight(entry.contentRect.height)
+                    }
+                  })
+                  resizeObserver.observe(el)
+                  return () => resizeObserver.disconnect()
+                }
+              }}
+            >
+              <>{children}</>
+            </div>
+          </div>
+        </ModalPrimitive>
+      </ModalOverlayPrimitive>
+    </>
   )
 }
 
-type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
-  title?: string
-  description?: string
+interface DrawerPrimitiveProps extends Omit<React.ComponentProps<typeof Modal>, "children"> {
+  "aria-label"?: DialogProps["aria-label"]
+  "aria-labelledby"?: DialogProps["aria-labelledby"]
+  role?: DialogProps["role"]
+  children?: DialogProps["children"]
 }
 
-const Header = ({ className, ...props }: DrawerHeaderProps) => (
-  <div data-slot="drawer-header" className={header({ className })}>
-    {props.title && <Title>{props.title}</Title>}
-    {props.description && <Description>{props.description}</Description>}
-    {!props.title && typeof props.children === "string" ? <Title {...props} /> : props.children}
-  </div>
-)
+const DrawerPrimitive = (props: DrawerPrimitiveProps) => {
+  const { isOpen } = useDrawerContext()
 
-const Body = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div data-slot="drawer-body" className={body({ className })} {...props} />
+  const h = window.innerHeight - drawerMargin
+  const y = useMotionValue(h)
+  const bodyBorderRadius = useTransform(y, [0, h], [drawerRadius, 0])
+  return (
+    <motion.div
+      style={{
+        borderRadius: bodyBorderRadius,
+        transformOrigin: "center 0"
+      }}
+    >
+      <AnimatePresence>{isOpen && <>{props.children}</>}</AnimatePresence>
+    </motion.div>
+  )
 }
 
-const Footer = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div data-slot="drawer-footer" className={footer({ className })} {...props} />
-)
+const DrawerTrigger = (props: ButtonProps) => {
+  const { openDrawer } = useDrawerContext()
 
-const Title = ({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>) => (
-  <DrawerPrimitive.Title className={title({ className })} {...props} />
+  return <Dialog.Trigger onPress={openDrawer} {...props} />
+}
+
+interface DrawerProps {
+  children: React.ReactNode
+  isOpen?: boolean
+  withNotch?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+const Drawer = ({
+  children,
+  withNotch = true,
+  isOpen: controlledIsOpen,
+  onOpenChange
+}: DrawerProps) => {
+  const [internalIsOpen, setInternalIsOpen] = React.useState(false)
+
+  const isControlled = controlledIsOpen !== undefined
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen
+
+  const openDrawer = () => {
+    if (isControlled && onOpenChange) {
+      onOpenChange(true)
+    } else {
+      setInternalIsOpen(true)
+    }
+  }
+
+  const closeDrawer = () => {
+    if (isControlled && onOpenChange) {
+      onOpenChange(false)
+    } else {
+      setInternalIsOpen(false)
+    }
+  }
+
+  if (typeof window === "undefined") {
+    return null
+  }
+
+  return (
+    <DrawerContext.Provider value={{ isOpen, openDrawer, closeDrawer, withNotch }}>
+      {children}
+    </DrawerContext.Provider>
+  )
+}
+
+const Content = ({ children, ...props }: React.ComponentProps<typeof DrawerPrimitive>) => {
+  return (
+    <DrawerPrimitive>
+      <DrawerContentPrimitive {...props}>
+        <Dialog
+          role={props.role ?? "dialog"}
+          aria-label={props["aria-label"] ?? undefined}
+          aria-labelledby={props["aria-labelledby"] ?? undefined}
+          className="sm:max-w-lg mx-auto"
+        >
+          {(values) => <>{typeof children === "function" ? children(values) : children}</>}
+        </Dialog>
+      </DrawerContentPrimitive>
+    </DrawerPrimitive>
+  )
+}
+
+const DrawerHeader = ({ className, ...props }: React.ComponentProps<typeof Dialog.Header>) => (
+  <Dialog.Header className={cn("pt-2", className)} {...props} />
 )
 
-const Description = ({
+const DrawerBody = ({
+  children,
   className,
   ...props
-}: React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>) => (
-  <DrawerPrimitive.Description className={description({ className })} {...props} />
+}: React.ComponentProps<typeof Dialog.Body>) => (
+  <Dialog.Body {...props} className={cn("px-4", className)}>
+    {children}
+  </Dialog.Body>
 )
 
-interface DrawerCloseProps extends React.ComponentProps<typeof DrawerPrimitive.Close> {
-  appearance?: "outline" | "solid"
-  shape?: "square" | "circle"
-  size?: "medium" | "large" | "square-petite" | "extra-small" | "small"
-}
-
-const Close = ({
+const DrawerFooter = ({
+  children,
   className,
-  appearance = "outline",
-  shape = "square",
-  size = "medium",
   ...props
-}: DrawerCloseProps) => (
-  <DrawerPrimitive.Close
-    {...props}
-    className={buttonStyles({ appearance, shape, size, className })}
-  />
+}: React.ComponentProps<typeof Dialog.Footer>) => (
+  <Dialog.Footer {...props} className={cn("pb-2", className)}>
+    {children}
+  </Dialog.Footer>
 )
 
-Drawer.Trigger = DrawerPrimitive.Trigger
-Drawer.Portal = DrawerPrimitive.Portal
-Drawer.Close = Close
-Drawer.Overlay = Overlay
+Drawer.Body = DrawerBody
+Drawer.Close = Dialog.Close
 Drawer.Content = Content
-Drawer.Body = Body
-Drawer.Header = Header
-Drawer.Footer = Footer
-Drawer.Title = Title
-Drawer.Description = Description
+Drawer.Description = Dialog.Description
+Drawer.Footer = DrawerFooter
+Drawer.Header = DrawerHeader
+Drawer.Title = Dialog.Title
+Drawer.Trigger = DrawerTrigger
 
 export { Drawer }
diff --git a/resources/content/docs/components/overlays/drawer.mdx b/resources/content/docs/components/overlays/drawer.mdx
index c1b162ec..e080cca2 100644
--- a/resources/content/docs/components/overlays/drawer.mdx
+++ b/resources/content/docs/components/overlays/drawer.mdx
@@ -3,7 +3,7 @@ title: "Drawer"
 description: Pull out a side menu or extra options, like opening a side drawer, handy for accessing additional functionalities.
 order: 3
 published: true
-references: ["https://vaul.emilkowal.ski/api"]
+references: ["https://react-spectrum.adobe.com/react-aria/Modal.html#props", "https://www.framer.com/motion/animate-presence"]
 ---
 
 
@@ -13,39 +13,30 @@ A slide-in overlay for extra content or options, anchored to the screen edge for
 
 ## Installation
 <Installation options={{ isComponent: true }} items={['drawer']}/>
+<WarningFramer/>
 
 ## Composed Components
-<Composed components={['button']}/>
+<Composed components={['button', 'dialog']}/>
 
 ## Manual Installation
-<Installation options={{ isManual: true }} items={['react-aria-components', 'vaul']}/>
+<Installation options={{ isManual: true }} items={['react-aria-components', 'framer-motion']}/>
+<SourceCode toShow={['drawer']}/>
 
 ## Anatomy
 <Anatomy show='drawer-anatomy'/>
 
-## Controlled
-To manually control the drawer's state, use the `isOpen` prop. When `isOpen` is set to `true`, the drawer opens; when it's `false`, the drawer closes.
+## Drawer Controlled
+You can control the drawer's state programmatically.
 <How toUse="overlays/drawer/drawer-controlled-demo" />
 
-## Positioning
-You can set the direction of the drawer to either `bottom`, `top`, `left`, or `right`.
-<How toUse="overlays/drawer/drawer-direction-demo" />
+## Without Notch
+Disable the notch on the drawer by setting the `withNotch` prop to `false`.
+<How toUse="overlays/drawer/drawer-without-notch-demo" />
 
+## Drawer Sticky
+The drawer also supports long content. Try it out!
+<How toUse="overlays/drawer/drawer-sticky-demo" />
 
-## Hide Notch
-You can hide the notch of the drawer by setting the `hideNotch` prop to `true`.
-<How toUse="overlays/drawer/drawer-hide-notch-demo" />
-
-## Centered
-By default, the drawer is centered, but you can disable this by setting the `isCentered` prop to `false`. This is useful when you need the drawer to align differently.
-<Note>Note that the `isCentered` prop only applies when the `side` is set to `bottom` or `top`. TypeScript will throw an error if used with `left` or `right`.</Note>
-<How toUse="overlays/drawer/drawer-is-not-centered-demo" />
-
-## Props
-There are several props available to customize the drawer. The `side` prop, originally called `direction` in Vaul, was renamed to align with Justd’s consistent naming convention. Likewise, `open` was renamed to `isOpen` for the same reason, ensuring uniformity across the API.
-| Props        | Default  |
-|--------------|----------|
-| `side`       | `bottom` |
-| `isOpen`     | -        |
-| `hideNotch`  | `false`  |
-| `isCentered` | `true`   |
+## Nested Drawer
+You can nest drawers inside each other. Try it out!
+<How toUse="overlays/drawer/drawer-nested-demo" />