Sheet

1"use client"
2 
3import * as React from "react"
4import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
5import { XIcon } from "lucide-react"
6 
7import { cn } from "@/registry/lib/surface"
8import { ThemedPortalShell } from "@/registry/lib/portal-container"
9import { Button } from "@/registry/ui/button"
10 
11function Sheet({ ...props }: SheetPrimitive.Root.Props) {
12  return <SheetPrimitive.Root data-slot="sheet" {...props} />
13}
14 
15function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
16  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
17}
18 
19function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
20  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
21}
22 
23function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
24  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
25}
26 
27function SheetOverlay({
28  className,
29  ...props
30}: SheetPrimitive.Backdrop.Props) {
31  return (
32    <SheetPrimitive.Backdrop
33      data-slot="sheet-overlay"
34      className={cn(
35        "fixed inset-0 z-50 bg-foreground/24 duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
36        className
37      )}
38      {...props}
39    />
40  )
41}
42 
43function SheetContent({
44  className,
45  children,
46  side = "right",
47  showCloseButton = true,
48  ...props
49}: SheetPrimitive.Popup.Props & {
50  side?: "top" | "right" | "bottom" | "left"
51  showCloseButton?: boolean
52}) {
53  return (
54    <SheetPortal>
55      <ThemedPortalShell>
56        <SheetOverlay />
57        <SheetPrimitive.Popup
58          data-slot="sheet-content"
59          data-side={side}
60          className={cn(
61// … truncated