Sheet

1'use client';
2 
3import {
4  Close,
5  Content,
6  Description,
7  Overlay,
8  Portal,
9  Root,
10  Title,
11  Trigger,
12} from '@radix-ui/react-dialog';
13import { XIcon } from 'lucide-react';
14import { cn } from '@/lib/classnames';
15import type { ComponentProps } from 'react';
16 
17function SheetRoot({ ...props }: ComponentProps<typeof Root>) {
18  return <Root data-slot='sheet' {...props} />;
19}
20 
21function SheetTrigger({ ...props }: ComponentProps<typeof Trigger>) {
22  return <Trigger data-slot='sheet-trigger' {...props} />;
23}
24 
25function SheetClose({ ...props }: ComponentProps<typeof Close>) {
26  return <Close data-slot='sheet-close' {...props} />;
27}
28 
29function SheetPortal({ ...props }: ComponentProps<typeof Portal>) {
30  return <Portal data-slot='sheet-portal' {...props} />;
31}
32 
33function SheetOverlay({ className, ...props }: ComponentProps<typeof Overlay>) {
34  return (
35    <Overlay
36      className={cn(
37        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=open]:animate-in',
38        className,
39      )}
40      data-slot='sheet-overlay'
41      {...props}
42    />
43  );
44}
45 
46function SheetContent({
47  className,
48  children,
49  side = 'right',
50  ...props
51}: ComponentProps<typeof Content> & {
52  side?: 'top' | 'right' | 'bottom' | 'left';
53}) {
54  return (
55    <SheetPortal>
56      <SheetOverlay />
57      <Content
58        className={cn(
59          'fixed z-50 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            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
66          side === 'bottom' &&
67            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
68          className,
69        )}
70        data-slot='sheet-content'
71        {...props}
72      >
73        {children}
74// … truncated