Sheet

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiClose } from "@mdi/js";
5import { Dialog as SheetPrimitive } from "radix-ui";
6import type * as React from "react";
7 
8import { buttonVariants } from "@/components/ui/button";
9import { cn } from "@/lib/utils";
10 
11function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
12  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
13}
14 
15function SheetTrigger({
16  ...props
17}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
18  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
19}
20 
21function SheetClose({
22  ...props
23}: React.ComponentProps<typeof SheetPrimitive.Close>) {
24  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
25}
26 
27function SheetPortal({
28  ...props
29}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
30  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
31}
32 
33function SheetOverlay({
34  className,
35  ...props
36}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
37  return (
38    <SheetPrimitive.Overlay
39      data-slot="sheet-overlay"
40      className={cn(
41        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
42        className,
43      )}
44      {...props}
45    />
46  );
47}
48 
49function SheetContent({
50  className,
51  children,
52  side = "right",
53  ...props
54}: React.ComponentProps<typeof SheetPrimitive.Content> & {
55  side?: "top" | "right" | "bottom" | "left";
56}) {
57  return (
58    <SheetPortal>
59      <SheetOverlay />
60      <SheetPrimitive.Content
61        data-slot="sheet-content"
62        className={cn(
63          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
64          side === "right" &&
65            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 sm:max-w-sm",
66          side === "left" &&
67            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 sm:max-w-sm",
68          side === "top" &&
69            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto",
70          side === "bottom" &&
71            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto",
72// … truncated