41:T1f4e,

import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const Demo = () => (
  <Drawer>
    <DrawerTrigger render={<Button variant="secondary" />}>
      Open drawer
    </DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Move to collection</DrawerTitle>
        <DrawerDescription>Swipe down to dismiss.</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>
        <DrawerClose render={<Button />}>Move</DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
)

export default Demo

3e:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$41"}}],"$L42"]}] 43:T676b,

"use client"

import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"

import { cn } from "@/lib/utils"

const Drawer = (props: DrawerPrimitive.Root.Props) => (
  <DrawerPrimitive.Root data-slot="drawer" {...props} />
)

const DrawerTrigger = (props: DrawerPrimitive.Trigger.Props) => (
  <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
)

const DrawerClose = (props: DrawerPrimitive.Close.Props) => (
  <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
)

// ponytail: bottom sheet only; base ui supports other swipe directions, add a side prop when needed
const DrawerContent = ({
  className,
  children,
  ...props
}: DrawerPrimitive.Popup.Props) => (
  <DrawerPrimitive.Portal>
    <DrawerPrimitive.Backdrop
      data-slot="drawer-overlay"
      className="fixed inset-0 z-50 min-h-dvh bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:opacity-0 data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute"
    />
    <DrawerPrimitive.Viewport className="fixed inset-0 z-50 flex items-end justify-center">
      <DrawerPrimitive.Popup
        data-slot="drawer-content"
        className={cn(
          "flex max-h-[calc(100dvh-64px)] w-full [transform:translateY(var(--drawer-swipe-movement-y))] flex-col rounded-t-24 bg-glass-background-surface-thick pb-[--spacing(48)] text-text-primary shadow-glass-surface backdrop-glass-thick transition-transform duration-500 ease-spring will-change-transform outline-none data-ending-style:[transform:translateY(calc(100%+2px))] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-ending-style:ease-out data-starting-style:[transform:translateY(calc(100%+2px))] data-swiping:duration-0 data-swiping:select-none motion-reduce:transition-none",
          "-mb-48",
          className
        )}
        {...props}
      >
        <div
          aria-hidden="true"
          className="mx-auto mt-8 h-4 w-40 shrink-0 rounded-full bg-background-quaternary"
        />
        <DrawerPrimitive.Content className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
          {children}
        </DrawerPrimitive.Content>
      </DrawerPrimitive.Popup>
    </DrawerPrimitive.Viewport>
  </DrawerPrimitive.Portal>
)

const DrawerHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="drawer-header"
    className={cn("flex flex-col gap-4 p-24 text-center", className)}
    {...props}
  />
)

const DrawerFooter = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="drawer-footer"
    className={cn("mt-auto flex gap-8 p-16 *:flex-1", className)}
    {...props}
  />
)

const DrawerTitle = ({ className, ...props }: DrawerPrimitive.Title.Props) => (
  <DrawerPrimitive.Title
    data-slot="drawer-title"
    className={cn("text-feature-bold", className)}
    {...props}
  />
)

const DrawerDescription = ({
  className,
  ...props
}: DrawerPrimitive.Description.Props) => (
  <DrawerPrimitive.Description
    data-slot="drawer-description"
    className={cn("text-body text-balance text-text-secondary", className)}
    {...props}
  />
)

export {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
}

40:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$43"}}],"$L44"]}]

Installation

Usage