sheet

1"use client"
2 
3import * as React from "react"
4 
5import { Dialog as SheetPrimitive, dialogAnatomy } from "@ark-ui/react/dialog"
6import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
7import { Portal } from "@ark-ui/react/portal"
8import { XIcon } from "lucide-react"
9 
10import { cn } from "@/lib/utils"
11 
12const sheetAnatomy = dialogAnatomy.rename("sheet")
13const parts = sheetAnatomy.extendWith("header", "footer").build()
14 
15const Sheet = SheetPrimitive.Root
16 
17const SheetBackdrop = React.forwardRef<
18  React.ElementRef<typeof SheetPrimitive.Backdrop>,
19  SheetPrimitive.BackdropProps
20>(({ className, ...props }, ref) => (
21  <SheetPrimitive.Backdrop
22    ref={ref}
23    {...parts.backdrop.attrs}
24    className={cn(
25      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-(--z-index) bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
26      className
27    )}
28    {...props}
29  />
30))
31SheetBackdrop.displayName = "SheetBackdrop"
32 
33const SheetCloseTrigger = React.forwardRef<
34  React.ElementRef<typeof SheetPrimitive.CloseTrigger>,
35  SheetPrimitive.CloseTriggerProps
36>(({ className, ...props }, ref) => (
37  <SheetPrimitive.CloseTrigger
38    ref={ref}
39    {...parts.closeTrigger.attrs}
40    className={cn(className)}
41    {...props}
42  />
43))
44SheetCloseTrigger.displayName = "SheetCloseTrigger"
45 
46const SheetContent = React.forwardRef<
47  React.ElementRef<typeof SheetPrimitive.Content>,
48  SheetPrimitive.ContentProps & {
49    side?: "top" | "right" | "bottom" | "left"
50  }
51>(({ className, children, side = "right", ...props }, ref) => (
52  <Portal>
53    <SheetBackdrop {...parts.backdrop.attrs} />
54    <SheetPrimitive.Positioner {...parts.positioner.attrs}>
55      <SheetPrimitive.Content
56        ref={ref}
57        {...parts.content.attrs}
58        className={cn(
59          "fixed z-(--z-index) flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:duration-300 data-[state=open]:duration-500",
60          side === "right" &&
61            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
62          side === "left" &&
63            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
64          side === "top" &&
65// … truncated