41:Tb5ce,

"use client"

import { createContext, useContext } from "react"
import { Drawer as SheetPrimitive } from "@base-ui/react/drawer"
import { cva } from "class-variance-authority"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"

type Side = "right" | "left" | "top" | "bottom"

const swipeDirection: Record<
  Side,
  SheetPrimitive.Root.Props["swipeDirection"]
> = { right: "right", left: "left", top: "up", bottom: "down" }

const SideContext = createContext<Side>("right")

const Sheet = ({
  side = "right",
  ...props
}: SheetPrimitive.Root.Props & { side?: Side }) => (
  <SideContext value={side}>
    <SheetPrimitive.Root
      data-slot="sheet"
      swipeDirection={swipeDirection[side]}
      {...props}
    />
  </SideContext>
)

const SheetTrigger = (props: SheetPrimitive.Trigger.Props) => (
  <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
)

const SheetClose = (props: SheetPrimitive.Close.Props) => (
  <SheetPrimitive.Close data-slot="sheet-close" {...props} />
)

const sheetVariants = cva(
  "fixed z-50 flex flex-col bg-glass-background-surface-thick text-text-primary shadow-glass-surface backdrop-glass-thick transition-transform duration-500 ease-spring will-change-transform outline-none motion-reduce:transition-none data-ending-style:duration-[calc(var(--drawer-swipe-strength)*300ms)] data-ending-style:ease-out data-swiping:duration-0 data-swiping:select-none",
  {
    variants: {
      side: {
        right:
          "inset-y-16 right-16 w-[calc(100%-32px)] max-w-400 rounded-24 [transform:translateX(var(--drawer-swipe-movement-x))] data-ending-style:[transform:translateX(calc(100%+16px))] data-starting-style:[transform:translateX(calc(100%+16px))]",
        left: "inset-y-16 left-16 w-[calc(100%-32px)] max-w-400 rounded-24 [transform:translateX(var(--drawer-swipe-movement-x))] data-ending-style:[transform:translateX(calc(-100%-16px))] data-starting-style:[transform:translateX(calc(-100%-16px))]",
        top: "inset-x-0 top-0 max-h-[80dvh] rounded-b-24 [transform:translateY(var(--drawer-swipe-movement-y))] data-ending-style:[transform:translateY(-100%)] data-starting-style:[transform:translateY(-100%)]",
        bottom:
          "inset-x-0 bottom-0 max-h-[80dvh] rounded-t-24 [transform:translateY(var(--drawer-swipe-movement-y))] data-ending-style:[transform:translateY(100%)] data-starting-style:[transform:translateY(100%)]",
      },
    },
    defaultVariants: { side: "right" },
  }
)

const grabberStyles: Record<Side, string> = {
  right: "top-1/2 left-8 h-40 w-4 -translate-y-1/2",
  left: "top-1/2 right-8 h-40 w-4 -translate-y-1/2",
  top: "bottom-8 left-1/2 h-4 w-40 -translate-x-1/2",
  bottom: "top-8 left-1/2 h-4 w-40 -translate-x-1/2",
}

const CloseIcon = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    aria-hidden="true"
  >
    <path
      d="M3 3l10 10M13 3L3 13"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
    />
  </svg>
)

const SheetContent = ({
  className,
  children,
  showCloseButton = true,
  ...props
}: SheetPrimitive.Popup.Props & { showCloseButton?: boolean }) => {
  const side = useContext(SideContext)
  return (
    <SheetPrimitive.Portal>
      <SheetPrimitive.Backdrop
        data-slot="sheet-overlay"
        className="fixed inset-0 z-50 bg-background-overlay opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-300 ease-out data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*300ms)] data-starting-style:opacity-0 data-swiping:duration-0 motion-reduce:transition-none"
      />
      <SheetPrimitive.Viewport className="pointer-events-none fixed inset-0 z-50">
        <SheetPrimitive.Popup
          data-slot="sheet-content"
          data-side={side}
          className={cn(
            "pointer-events-auto",
            sheetVariants({ side, className })
          )}
          {...props}
        >
          <div
            data-slot="sheet-grabber"
            aria-hidden="true"
            className={cn(
              "absolute shrink-0 cursor-grab rounded-full bg-background-quaternary",
              grabberStyles[side]
            )}
          />
          <SheetPrimitive.Content className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain">
            {children}
          </SheetPrimitive.Content>
          {showCloseButton && (
            <SheetPrimitive.Close
              render={
                <Button
                  variant="secondary"
                  size="icon"
                  className="absolute top-12 right-12 text-text-tertiary"
                />
              }
            >
              <CloseIcon />
              <span className="sr-only">Close</span>
            </SheetPrimitive.Close>
          )}
        </SheetPrimitive.Popup>
      </SheetPrimitive.Viewport>
    </SheetPrimitive.Portal>
  )
}

const SheetHeader = ({ className, ...props }: React.ComponentProps<"div">) => (
  <div
    data-slot="sheet-header"
    className={cn("flex flex-col gap-4 p-24 pr-56", className)}
    {...props}
  />
)

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

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

const SheetDescription = ({
  className,
  ...props
}: SheetPrimitive.Description.Props) => (
  <SheetPrimitive.Description
    data-slot="sheet-description"
    className={cn("text-body text-text-secondary", className)}
    {...props}
  />
)

export {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
}

36:["$","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:T2e53,

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

const Demo = () => (
  <div className="flex flex-wrap items-center gap-12">
    <Sheet>
      <SheetTrigger render={<Button variant="secondary" />}>
        Open sheet
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Filters</SheetTitle>
          <SheetDescription>Narrow down the screens you see.</SheetDescription>
        </SheetHeader>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>Reset</SheetClose>
          <SheetClose render={<Button />}>Apply</SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
    <Sheet side="left">
      <SheetTrigger render={<Button variant="secondary" />}>
        Left sheet
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Menu</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  </div>
)

export default Demo

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