@greatapps/common 1.1.21 → 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.
|
@@ -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":";AAQS,cAkFC,YAlFD;AALT,YAAY,oBAAoB;AAChC,SAAS,aAAa;AACtB,SAAS,UAAU;AAEnB,SAAS,MAAM,EAAE,GAAG,MAAM,GAAqD;AAC7E,SAAO,oBAAC,eAAe,MAAf,EAAoB,aAAU,SAAS,GAAG,OAAO;AAC3D;AAEA,SAAS,aAAa;AAAA,EACpB,GAAG;AACL,GAAwD;AACtD,SAAO,oBAAC,eAAe,SAAf,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAEA,SAAS,WAAW;AAAA,EAClB,GAAG;AACL,GAAsD;AACpD,SAAO,oBAAC,eAAe,OAAf,EAAqB,aAAU,eAAe,GAAG,OAAO;AAClE;AAEA,SAAS,YAAY;AAAA,EACnB,GAAG;AACL,GAAuD;AACrD,SAAO,oBAAC,eAAe,QAAf,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,GAAG;AACL,GAIG;AACD,SACE,qBAAC,eACC;AAAA,wBAAC,gBAAa,WAAW,cAAc,kBAAkB,QAAW;AAAA,IACpE;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,CAAC,eACC;AAAA,UACF,CAAC,eACC,SAAS,WACT;AAAA,UACF,CAAC,eACC,SAAS,UACT;AAAA,UACF,CAAC,eACC,SAAS,SACT;AAAA,UACF,CAAC,eACC,SAAS,YACT;AAAA,UACF,SAAS,WACP;AAAA,UACF,SAAS,UACP;AAAA,UACF,SAAS,SAAS;AAAA,UAClB,SAAS,YAAY;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,mBACC;AAAA,YAAC,eAAe;AAAA,YAAf;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;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAgC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA,GAAG;AACL,GAA4D;AAC1D,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -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
|
+
};
|