gitscope
/
← marzneshin / dashboard/src/common/components/ui/sheet.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/components/ui/sheet.tsx · master
Source
1 b15ff05 Mrdn 2y ago import * as React from "react"
2 b15ff05 Mrdn 2y ago import * as SheetPrimitive from "@radix-ui/react-dialog"
3 b15ff05 Mrdn 2y ago import { cva, type VariantProps } from "class-variance-authority"
4 b15ff05 Mrdn 2y ago import { X } from "lucide-react"
5 b15ff05 Mrdn 2y ago
6 d636f3f Dawsh 2y ago import { cn } from "@marzneshin/common/utils"
7 b15ff05 Mrdn 2y ago
8 b15ff05 Mrdn 2y ago const Sheet = SheetPrimitive.Root
9 b15ff05 Mrdn 2y ago
10 b15ff05 Mrdn 2y ago const SheetTrigger = SheetPrimitive.Trigger
11 b15ff05 Mrdn 2y ago
12 b15ff05 Mrdn 2y ago const SheetClose = SheetPrimitive.Close
13 b15ff05 Mrdn 2y ago
14 b15ff05 Mrdn 2y ago const SheetPortal = SheetPrimitive.Portal
15 b15ff05 Mrdn 2y ago
16 b15ff05 Mrdn 2y ago const SheetOverlay = React.forwardRef<
17 d636f3f Dawsh 2y ago React.ElementRef<typeof SheetPrimitive.Overlay>,
18 d636f3f Dawsh 2y ago React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
19 b15ff05 Mrdn 2y ago >(({ className, ...props }, ref) => (
20 d636f3f Dawsh 2y ago <SheetPrimitive.Overlay
21 d636f3f Dawsh 2y ago className={cn(
22 d636f3f Dawsh 2y ago "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
23 d636f3f Dawsh 2y ago className
24 d636f3f Dawsh 2y ago )}
25 d636f3f Dawsh 2y ago {...props}
26 d636f3f Dawsh 2y ago ref={ref}
27 d636f3f Dawsh 2y ago />
28 b15ff05 Mrdn 2y ago ))
29 b15ff05 Mrdn 2y ago SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
30 b15ff05 Mrdn 2y ago
31 b15ff05 Mrdn 2y ago const sheetVariants = cva(
32 d636f3f Dawsh 2y ago "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
33 d636f3f Dawsh 2y ago {
34 d636f3f Dawsh 2y ago variants: {
35 d636f3f Dawsh 2y ago side: {
36 d636f3f Dawsh 2y ago top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
37 d636f3f Dawsh 2y ago bottom:
38 d636f3f Dawsh 2y ago "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
39 d636f3f Dawsh 2y ago left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
40 d636f3f Dawsh 2y ago right:
41 d636f3f Dawsh 2y ago "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
42 d636f3f Dawsh 2y ago },
43 d636f3f Dawsh 2y ago },
44 d636f3f Dawsh 2y ago defaultVariants: {
45 d636f3f Dawsh 2y ago side: "right",
46 d636f3f Dawsh 2y ago },
47 d636f3f Dawsh 2y ago }
48 b15ff05 Mrdn 2y ago )
49 b15ff05 Mrdn 2y ago
50 b15ff05 Mrdn 2y ago interface SheetContentProps
51 d636f3f Dawsh 2y ago extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
52 d636f3f Dawsh 2y ago VariantProps<typeof sheetVariants> { }
53 b15ff05 Mrdn 2y ago
54 b15ff05 Mrdn 2y ago const SheetContent = React.forwardRef<
55 d636f3f Dawsh 2y ago React.ElementRef<typeof SheetPrimitive.Content>,
56 d636f3f Dawsh 2y ago SheetContentProps
57 b15ff05 Mrdn 2y ago >(({ side = "right", className, children, ...props }, ref) => (
58 d636f3f Dawsh 2y ago <SheetPortal>
59 d636f3f Dawsh 2y ago <SheetOverlay />
60 d636f3f Dawsh 2y ago <SheetPrimitive.Content
61 d636f3f Dawsh 2y ago ref={ref}
62 d636f3f Dawsh 2y ago className={cn(sheetVariants({ side }), className)}
63 d636f3f Dawsh 2y ago {...props}
64 d636f3f Dawsh 2y ago >
65 d636f3f Dawsh 2y ago {children}
66 d636f3f Dawsh 2y ago <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
67 d636f3f Dawsh 2y ago <X className="h-4 w-4" />
68 d636f3f Dawsh 2y ago <span className="sr-only">Close</span>
69 d636f3f Dawsh 2y ago </SheetPrimitive.Close>
70 d636f3f Dawsh 2y ago </SheetPrimitive.Content>
71 d636f3f Dawsh 2y ago </SheetPortal>
72 b15ff05 Mrdn 2y ago ))
73 b15ff05 Mrdn 2y ago SheetContent.displayName = SheetPrimitive.Content.displayName
74 b15ff05 Mrdn 2y ago
75 b15ff05 Mrdn 2y ago const SheetHeader = ({
76 d636f3f Dawsh 2y ago className,
77 d636f3f Dawsh 2y ago ...props
78 b15ff05 Mrdn 2y ago }: React.HTMLAttributes<HTMLDivElement>) => (
79 d636f3f Dawsh 2y ago <div
80 d636f3f Dawsh 2y ago className={cn(
81 d636f3f Dawsh 2y ago "flex flex-col space-y-2 text-center sm:text-left",
82 d636f3f Dawsh 2y ago className
83 d636f3f Dawsh 2y ago )}
84 d636f3f Dawsh 2y ago {...props}
85 d636f3f Dawsh 2y ago />
86 b15ff05 Mrdn 2y ago )
87 b15ff05 Mrdn 2y ago SheetHeader.displayName = "SheetHeader"
88 b15ff05 Mrdn 2y ago
89 b15ff05 Mrdn 2y ago const SheetFooter = ({
90 d636f3f Dawsh 2y ago className,
91 d636f3f Dawsh 2y ago ...props
92 b15ff05 Mrdn 2y ago }: React.HTMLAttributes<HTMLDivElement>) => (
93 d636f3f Dawsh 2y ago <div
94 d636f3f Dawsh 2y ago className={cn(
95 d636f3f Dawsh 2y ago "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
96 d636f3f Dawsh 2y ago className
97 d636f3f Dawsh 2y ago )}
98 d636f3f Dawsh 2y ago {...props}
99 d636f3f Dawsh 2y ago />
100 b15ff05 Mrdn 2y ago )
101 b15ff05 Mrdn 2y ago SheetFooter.displayName = "SheetFooter"
102 b15ff05 Mrdn 2y ago
103 b15ff05 Mrdn 2y ago const SheetTitle = React.forwardRef<
104 d636f3f Dawsh 2y ago React.ElementRef<typeof SheetPrimitive.Title>,
105 d636f3f Dawsh 2y ago React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
106 b15ff05 Mrdn 2y ago >(({ className, ...props }, ref) => (
107 d636f3f Dawsh 2y ago <SheetPrimitive.Title
108 d636f3f Dawsh 2y ago ref={ref}
109 d636f3f Dawsh 2y ago className={cn("text-lg font-semibold text-foreground", className)}
110 d636f3f Dawsh 2y ago {...props}
111 d636f3f Dawsh 2y ago />
112 b15ff05 Mrdn 2y ago ))
113 b15ff05 Mrdn 2y ago SheetTitle.displayName = SheetPrimitive.Title.displayName
114 b15ff05 Mrdn 2y ago
115 b15ff05 Mrdn 2y ago const SheetDescription = React.forwardRef<
116 d636f3f Dawsh 2y ago React.ElementRef<typeof SheetPrimitive.Description>,
117 d636f3f Dawsh 2y ago React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
118 b15ff05 Mrdn 2y ago >(({ className, ...props }, ref) => (
119 d636f3f Dawsh 2y ago <SheetPrimitive.Description
120 d636f3f Dawsh 2y ago ref={ref}
121 d636f3f Dawsh 2y ago className={cn("text-sm text-muted-foreground", className)}
122 d636f3f Dawsh 2y ago {...props}
123 d636f3f Dawsh 2y ago />
124 b15ff05 Mrdn 2y ago ))
125 b15ff05 Mrdn 2y ago SheetDescription.displayName = SheetPrimitive.Description.displayName
126 b15ff05 Mrdn 2y ago
127 b15ff05 Mrdn 2y ago export {
128 d636f3f Dawsh 2y ago Sheet,
129 d636f3f Dawsh 2y ago SheetPortal,
130 d636f3f Dawsh 2y ago SheetOverlay,
131 d636f3f Dawsh 2y ago SheetTrigger,
132 d636f3f Dawsh 2y ago SheetClose,
133 d636f3f Dawsh 2y ago SheetContent,
134 d636f3f Dawsh 2y ago SheetHeader,
135 d636f3f Dawsh 2y ago SheetFooter,
136 d636f3f Dawsh 2y ago SheetTitle,
137 d636f3f Dawsh 2y ago SheetDescription,
138 b15ff05 Mrdn 2y ago }