@greatapps/common 1.1.20 → 1.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/overlay/Dialog.mjs +6 -2
- package/dist/components/ui/overlay/Dialog.mjs.map +1 -1
- package/dist/components/ui/overlay/Sheet.mjs +12 -6
- package/dist/components/ui/overlay/Sheet.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/ui/overlay/Dialog.tsx +27 -22
- package/src/components/ui/overlay/Sheet.tsx +42 -28
|
@@ -43,10 +43,11 @@ function DialogContent({
|
|
|
43
43
|
className,
|
|
44
44
|
children,
|
|
45
45
|
showCloseButton = true,
|
|
46
|
+
overlayClassName,
|
|
46
47
|
...props
|
|
47
48
|
}) {
|
|
48
49
|
return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
|
|
49
|
-
/* @__PURE__ */ jsx(DialogOverlay, {}),
|
|
50
|
+
/* @__PURE__ */ jsx(DialogOverlay, { className: overlayClassName }),
|
|
50
51
|
/* @__PURE__ */ jsxs(
|
|
51
52
|
DialogPrimitive.Content,
|
|
52
53
|
{
|
|
@@ -79,7 +80,10 @@ function DialogHeader({ className, ...props }) {
|
|
|
79
80
|
"div",
|
|
80
81
|
{
|
|
81
82
|
"data-slot": "dialog-header",
|
|
82
|
-
className: cn(
|
|
83
|
+
className: cn(
|
|
84
|
+
"p-5 flex flex-col gap-2 text-center sm:text-left",
|
|
85
|
+
className
|
|
86
|
+
),
|
|
83
87
|
...props
|
|
84
88
|
}
|
|
85
89
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/overlay/Dialog.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/overlay/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Dialog({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogClose({\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n \"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-[1000] bg-black/50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n overlayClassName,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n showCloseButton?: boolean;\n overlayClassName?: string;\n}) {\n return (\n <DialogPortal data-slot=\"dialog-portal\">\n <DialogOverlay className={overlayClassName} />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[1000] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg\",\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <div className=\"absolute top-0.5 right-0\">\n <div className=\"p-4\">\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className=\"hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none\"\n >\n <XIcon className=\"size-[18px]\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </div>\n </div>\n )}\n </DialogPrimitive.Content>\n </DialogPortal>\n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-header\"\n className={cn(\n \"p-5 flex flex-col gap-2 text-center sm:text-left\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn(\"text-lg leading-none font-semibold\", className)}\n {...props}\n />\n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n"],"mappings":";AAUS,cA8DK,YA9DL;AAPT,YAAY,qBAAqB;AACjC,SAAS,aAAa;AACtB,SAAS,UAAU;AAEnB,SAAS,OAAO;AAAA,EACd,GAAG;AACL,GAAsD;AACpD,SAAO,oBAAC,gBAAgB,MAAhB,EAAqB,aAAU,UAAU,GAAG,OAAO;AAC7D;AAEA,SAAS,cAAc;AAAA,EACrB,GAAG;AACL,GAAyD;AACvD,SAAO,oBAAC,gBAAgB,SAAhB,EAAwB,aAAU,kBAAkB,GAAG,OAAO;AACxE;AAEA,SAAS,aAAa;AAAA,EACpB,GAAG;AACL,GAAwD;AACtD,SAAO,oBAAC,gBAAgB,QAAhB,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAEA,SAAS,YAAY;AAAA,EACnB,GAAG;AACL,GAAuD;AACrD,SAAO,oBAAC,gBAAgB,OAAhB,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,GAAG;AACL,GAAyD;AACvD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,qBAAC,gBAAa,aAAU,iBACtB;AAAA,wBAAC,iBAAc,WAAW,kBAAkB;AAAA,IAC5C;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,mBACC,oBAAC,SAAI,WAAU,4BACb,8BAAC,SAAI,WAAU,OACb;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,aAAU;AAAA,cACV,WAAU;AAAA,cAEV;AAAA,oCAAC,SAAM,WAAU,eAAc;AAAA,gBAC/B,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA;AAAA;AAAA,UACjC,GACF,GACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAuD;AACrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAA6D;AAC3D,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -42,20 +42,26 @@ function SheetContent({
|
|
|
42
42
|
children,
|
|
43
43
|
side = "right",
|
|
44
44
|
showCloseButton = true,
|
|
45
|
+
noAnimation = false,
|
|
45
46
|
...props
|
|
46
47
|
}) {
|
|
47
48
|
return /* @__PURE__ */ jsxs(SheetPortal, { children: [
|
|
48
|
-
/* @__PURE__ */ jsx(SheetOverlay, {}),
|
|
49
|
+
/* @__PURE__ */ jsx(SheetOverlay, { className: noAnimation ? "!animate-none" : void 0 }),
|
|
49
50
|
/* @__PURE__ */ jsxs(
|
|
50
51
|
SheetPrimitive.Content,
|
|
51
52
|
{
|
|
52
53
|
"data-slot": "sheet-content",
|
|
53
54
|
className: cn(
|
|
54
|
-
"bg-background
|
|
55
|
-
|
|
56
|
-
side === "
|
|
57
|
-
side === "
|
|
58
|
-
side === "
|
|
55
|
+
"bg-background fixed z-50 flex flex-col gap-4 shadow-lg",
|
|
56
|
+
!noAnimation && "data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
57
|
+
!noAnimation && side === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
58
|
+
!noAnimation && side === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
59
|
+
!noAnimation && side === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
60
|
+
!noAnimation && side === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
61
|
+
side === "right" && "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
62
|
+
side === "left" && "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
63
|
+
side === "top" && "inset-x-0 top-0 h-auto border-b",
|
|
64
|
+
side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
|
|
59
65
|
className
|
|
60
66
|
),
|
|
61
67
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ui/overlay/Sheet.tsx"],"sourcesContent":["\"use client\"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/overlay/Sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { XIcon } from \"lucide-react\";\nimport { cn } from \"../../../infra/utils/clsx\";\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n return (\n <SheetPrimitive.Overlay\n data-slot=\"sheet-overlay\"\n className={cn(\n \"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-[1000] bg-black/50\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n showCloseButton = true,\n noAnimation = false,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n showCloseButton?: boolean;\n noAnimation?: boolean;\n}) {\n return (\n <SheetPortal>\n <SheetOverlay className={noAnimation ? \"!animate-none\" : undefined} />\n <SheetPrimitive.Content\n data-slot=\"sheet-content\"\n className={cn(\n \"bg-background fixed z-50 flex flex-col gap-4 shadow-lg\",\n !noAnimation &&\n \"data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n !noAnimation &&\n side === \"right\" &&\n \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right\",\n !noAnimation &&\n side === \"left\" &&\n \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left\",\n !noAnimation &&\n side === \"top\" &&\n \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n !noAnimation &&\n side === \"bottom\" &&\n \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n side === \"right\" &&\n \"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n side === \"left\" &&\n \"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n side === \"top\" && \"inset-x-0 top-0 h-auto border-b\",\n side === \"bottom\" && \"inset-x-0 bottom-0 h-auto border-t\",\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton && (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className=\"absolute top-3 right-3 hover:cursor-pointer flex size-8 items-center justify-center rounded-lg p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-950 focus:outline-none\"\n >\n <XIcon className=\"size-[18px]\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n )}\n </SheetPrimitive.Content>\n </SheetPortal>\n );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n {...props}\n />\n );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n {...props}\n />\n );\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn(\"text-foreground font-semibold\", className)}\n {...props}\n />\n );\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n};\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
"use client"
|
|
1
|
+
"use client";
|
|
2
2
|
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
|
5
|
-
import { XIcon } from "lucide-react"
|
|
6
|
-
import { cn } from "../../../infra/utils/clsx"
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { XIcon } from "lucide-react";
|
|
6
|
+
import { cn } from "../../../infra/utils/clsx";
|
|
7
7
|
|
|
8
8
|
function Dialog({
|
|
9
9
|
...props
|
|
10
10
|
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
|
11
|
-
return <DialogPrimitive.Root data-slot="dialog" {...props}
|
|
11
|
+
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
function DialogTrigger({
|
|
15
15
|
...props
|
|
16
16
|
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
|
17
|
-
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props}
|
|
17
|
+
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
function DialogPortal({
|
|
21
21
|
...props
|
|
22
22
|
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
|
23
|
-
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props}
|
|
23
|
+
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
function DialogClose({
|
|
27
27
|
...props
|
|
28
28
|
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
|
29
|
-
return <DialogPrimitive.Close data-slot="dialog-close" {...props}
|
|
29
|
+
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
function DialogOverlay({
|
|
@@ -38,29 +38,31 @@ function DialogOverlay({
|
|
|
38
38
|
data-slot="dialog-overlay"
|
|
39
39
|
className={cn(
|
|
40
40
|
"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-[1000] bg-black/50",
|
|
41
|
-
className
|
|
41
|
+
className,
|
|
42
42
|
)}
|
|
43
43
|
{...props}
|
|
44
44
|
/>
|
|
45
|
-
)
|
|
45
|
+
);
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
function DialogContent({
|
|
49
49
|
className,
|
|
50
50
|
children,
|
|
51
51
|
showCloseButton = true,
|
|
52
|
+
overlayClassName,
|
|
52
53
|
...props
|
|
53
54
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
54
|
-
showCloseButton?: boolean
|
|
55
|
+
showCloseButton?: boolean;
|
|
56
|
+
overlayClassName?: string;
|
|
55
57
|
}) {
|
|
56
58
|
return (
|
|
57
59
|
<DialogPortal data-slot="dialog-portal">
|
|
58
|
-
<DialogOverlay />
|
|
60
|
+
<DialogOverlay className={overlayClassName} />
|
|
59
61
|
<DialogPrimitive.Content
|
|
60
62
|
data-slot="dialog-content"
|
|
61
63
|
className={cn(
|
|
62
64
|
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[1000] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
|
|
63
|
-
className
|
|
65
|
+
className,
|
|
64
66
|
)}
|
|
65
67
|
{...props}
|
|
66
68
|
>
|
|
@@ -80,17 +82,20 @@ function DialogContent({
|
|
|
80
82
|
)}
|
|
81
83
|
</DialogPrimitive.Content>
|
|
82
84
|
</DialogPortal>
|
|
83
|
-
)
|
|
85
|
+
);
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
87
89
|
return (
|
|
88
90
|
<div
|
|
89
91
|
data-slot="dialog-header"
|
|
90
|
-
className={cn(
|
|
92
|
+
className={cn(
|
|
93
|
+
"p-5 flex flex-col gap-2 text-center sm:text-left",
|
|
94
|
+
className,
|
|
95
|
+
)}
|
|
91
96
|
{...props}
|
|
92
97
|
/>
|
|
93
|
-
)
|
|
98
|
+
);
|
|
94
99
|
}
|
|
95
100
|
|
|
96
101
|
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
@@ -99,11 +104,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
99
104
|
data-slot="dialog-footer"
|
|
100
105
|
className={cn(
|
|
101
106
|
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
|
|
102
|
-
className
|
|
107
|
+
className,
|
|
103
108
|
)}
|
|
104
109
|
{...props}
|
|
105
110
|
/>
|
|
106
|
-
)
|
|
111
|
+
);
|
|
107
112
|
}
|
|
108
113
|
|
|
109
114
|
function DialogTitle({
|
|
@@ -116,7 +121,7 @@ function DialogTitle({
|
|
|
116
121
|
className={cn("text-lg leading-none font-semibold", className)}
|
|
117
122
|
{...props}
|
|
118
123
|
/>
|
|
119
|
-
)
|
|
124
|
+
);
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
function DialogDescription({
|
|
@@ -129,7 +134,7 @@ function DialogDescription({
|
|
|
129
134
|
className={cn("text-muted-foreground text-sm", className)}
|
|
130
135
|
{...props}
|
|
131
136
|
/>
|
|
132
|
-
)
|
|
137
|
+
);
|
|
133
138
|
}
|
|
134
139
|
|
|
135
140
|
export {
|
|
@@ -143,4 +148,4 @@ export {
|
|
|
143
148
|
DialogPortal,
|
|
144
149
|
DialogTitle,
|
|
145
150
|
DialogTrigger,
|
|
146
|
-
}
|
|
151
|
+
};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
"use client"
|
|
1
|
+
"use client";
|
|
2
2
|
|
|
3
|
-
import * as React from "react"
|
|
4
|
-
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
|
5
|
-
import { XIcon } from "lucide-react"
|
|
6
|
-
import { cn } from "../../../infra/utils/clsx"
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
5
|
+
import { XIcon } from "lucide-react";
|
|
6
|
+
import { cn } from "../../../infra/utils/clsx";
|
|
7
7
|
|
|
8
8
|
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
|
9
|
-
return <SheetPrimitive.Root data-slot="sheet" {...props}
|
|
9
|
+
return <SheetPrimitive.Root data-slot="sheet" {...props} />;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
function SheetTrigger({
|
|
13
13
|
...props
|
|
14
14
|
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
|
15
|
-
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props}
|
|
15
|
+
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
function SheetClose({
|
|
19
19
|
...props
|
|
20
20
|
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
|
21
|
-
return <SheetPrimitive.Close data-slot="sheet-close" {...props}
|
|
21
|
+
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
function SheetPortal({
|
|
25
25
|
...props
|
|
26
26
|
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
|
27
|
-
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props}
|
|
27
|
+
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
function SheetOverlay({
|
|
@@ -36,11 +36,11 @@ function SheetOverlay({
|
|
|
36
36
|
data-slot="sheet-overlay"
|
|
37
37
|
className={cn(
|
|
38
38
|
"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-[1000] bg-black/50",
|
|
39
|
-
className
|
|
39
|
+
className,
|
|
40
40
|
)}
|
|
41
41
|
{...props}
|
|
42
42
|
/>
|
|
43
|
-
)
|
|
43
|
+
);
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
function SheetContent({
|
|
@@ -48,27 +48,41 @@ function SheetContent({
|
|
|
48
48
|
children,
|
|
49
49
|
side = "right",
|
|
50
50
|
showCloseButton = true,
|
|
51
|
+
noAnimation = false,
|
|
51
52
|
...props
|
|
52
53
|
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
|
53
|
-
side?: "top" | "right" | "bottom" | "left"
|
|
54
|
-
showCloseButton?: boolean
|
|
54
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
55
|
+
showCloseButton?: boolean;
|
|
56
|
+
noAnimation?: boolean;
|
|
55
57
|
}) {
|
|
56
58
|
return (
|
|
57
59
|
<SheetPortal>
|
|
58
|
-
<SheetOverlay />
|
|
60
|
+
<SheetOverlay className={noAnimation ? "!animate-none" : undefined} />
|
|
59
61
|
<SheetPrimitive.Content
|
|
60
62
|
data-slot="sheet-content"
|
|
61
63
|
className={cn(
|
|
62
|
-
"bg-background
|
|
64
|
+
"bg-background fixed z-50 flex flex-col gap-4 shadow-lg",
|
|
65
|
+
!noAnimation &&
|
|
66
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
|
67
|
+
!noAnimation &&
|
|
68
|
+
side === "right" &&
|
|
69
|
+
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
|
|
70
|
+
!noAnimation &&
|
|
71
|
+
side === "left" &&
|
|
72
|
+
"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
73
|
+
!noAnimation &&
|
|
74
|
+
side === "top" &&
|
|
75
|
+
"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
76
|
+
!noAnimation &&
|
|
77
|
+
side === "bottom" &&
|
|
78
|
+
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
63
79
|
side === "right" &&
|
|
64
|
-
"
|
|
80
|
+
"inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
|
65
81
|
side === "left" &&
|
|
66
|
-
"
|
|
67
|
-
side === "top" &&
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
|
|
71
|
-
className
|
|
82
|
+
"inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
|
|
83
|
+
side === "top" && "inset-x-0 top-0 h-auto border-b",
|
|
84
|
+
side === "bottom" && "inset-x-0 bottom-0 h-auto border-t",
|
|
85
|
+
className,
|
|
72
86
|
)}
|
|
73
87
|
{...props}
|
|
74
88
|
>
|
|
@@ -84,7 +98,7 @@ function SheetContent({
|
|
|
84
98
|
)}
|
|
85
99
|
</SheetPrimitive.Content>
|
|
86
100
|
</SheetPortal>
|
|
87
|
-
)
|
|
101
|
+
);
|
|
88
102
|
}
|
|
89
103
|
|
|
90
104
|
function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
@@ -94,7 +108,7 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
94
108
|
className={cn("flex flex-col gap-1.5 p-4", className)}
|
|
95
109
|
{...props}
|
|
96
110
|
/>
|
|
97
|
-
)
|
|
111
|
+
);
|
|
98
112
|
}
|
|
99
113
|
|
|
100
114
|
function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
@@ -104,7 +118,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
|
|
|
104
118
|
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
|
|
105
119
|
{...props}
|
|
106
120
|
/>
|
|
107
|
-
)
|
|
121
|
+
);
|
|
108
122
|
}
|
|
109
123
|
|
|
110
124
|
function SheetTitle({
|
|
@@ -117,7 +131,7 @@ function SheetTitle({
|
|
|
117
131
|
className={cn("text-foreground font-semibold", className)}
|
|
118
132
|
{...props}
|
|
119
133
|
/>
|
|
120
|
-
)
|
|
134
|
+
);
|
|
121
135
|
}
|
|
122
136
|
|
|
123
137
|
function SheetDescription({
|
|
@@ -130,7 +144,7 @@ function SheetDescription({
|
|
|
130
144
|
className={cn("text-muted-foreground text-sm", className)}
|
|
131
145
|
{...props}
|
|
132
146
|
/>
|
|
133
|
-
)
|
|
147
|
+
);
|
|
134
148
|
}
|
|
135
149
|
|
|
136
150
|
export {
|
|
@@ -142,4 +156,4 @@ export {
|
|
|
142
156
|
SheetFooter,
|
|
143
157
|
SheetTitle,
|
|
144
158
|
SheetDescription,
|
|
145
|
-
}
|
|
159
|
+
};
|