@petnow/ui 4.1.0 → 4.1.2
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/Popup-Cr_pMP7h.js +95 -0
- package/dist/Popup-Cr_pMP7h.js.map +1 -0
- package/dist/index.es.js +1 -1
- package/dist/src/components/v1/popup/Popup.d.ts +2 -1
- package/dist/v1/popup.js +1 -1
- package/package.json +1 -1
- package/dist/Popup-D9fn8MGc.js +0 -90
- package/dist/Popup-D9fn8MGc.js.map +0 -1
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { t as e } from "./TailwindUtil-aZk2bbTo.js";
|
|
2
|
+
import { CTAButton as t } from "./v1/cta-button.js";
|
|
3
|
+
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
|
+
import * as i from "react";
|
|
5
|
+
import { Dialog as a } from "radix-ui";
|
|
6
|
+
//#region src/components/ui/dialog.tsx
|
|
7
|
+
var o = a.Root;
|
|
8
|
+
a.Trigger;
|
|
9
|
+
var s = a.Portal;
|
|
10
|
+
a.Close;
|
|
11
|
+
var c = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Overlay, {
|
|
12
|
+
ref: i,
|
|
13
|
+
className: e("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/40 duration-200", t),
|
|
14
|
+
...r
|
|
15
|
+
}));
|
|
16
|
+
c.displayName = a.Overlay.displayName;
|
|
17
|
+
var l = i.forwardRef(({ className: t, ...i }, o) => /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n(c, {}), /* @__PURE__ */ n(a.Content, {
|
|
18
|
+
ref: o,
|
|
19
|
+
className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none", t),
|
|
20
|
+
...i
|
|
21
|
+
})] }));
|
|
22
|
+
l.displayName = a.Content.displayName;
|
|
23
|
+
var u = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Title, {
|
|
24
|
+
ref: i,
|
|
25
|
+
className: e("text-lg font-semibold", t),
|
|
26
|
+
...r
|
|
27
|
+
}));
|
|
28
|
+
u.displayName = a.Title.displayName;
|
|
29
|
+
var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Description, {
|
|
30
|
+
ref: i,
|
|
31
|
+
className: e("text-muted-foreground text-sm", t),
|
|
32
|
+
...r
|
|
33
|
+
}));
|
|
34
|
+
d.displayName = a.Description.displayName;
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/components/v1/popup/Popup.tsx
|
|
37
|
+
var f = ({ isOpen: i, setIsOpen: a, onClose: s, title: c, description: f, content: p, confirm: m, cancel: h, preventEasyClose: g = !1, className: _ }) => {
|
|
38
|
+
let v = () => {
|
|
39
|
+
a(!1), s?.();
|
|
40
|
+
};
|
|
41
|
+
return /* @__PURE__ */ n(o, {
|
|
42
|
+
open: i,
|
|
43
|
+
onOpenChange: (e) => {
|
|
44
|
+
g && !e || (e || s?.(), a(e));
|
|
45
|
+
},
|
|
46
|
+
children: /* @__PURE__ */ r(l, {
|
|
47
|
+
onEscapeKeyDown: g ? (e) => e.preventDefault() : void 0,
|
|
48
|
+
onInteractOutside: g ? (e) => e.preventDefault() : void 0,
|
|
49
|
+
className: e("bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4", _),
|
|
50
|
+
children: [/* @__PURE__ */ r("div", {
|
|
51
|
+
className: "flex w-full flex-col gap-2 overflow-y-auto",
|
|
52
|
+
children: [
|
|
53
|
+
c && /* @__PURE__ */ n(u, {
|
|
54
|
+
className: "text-title-18-bold text-text-prominent-neutral-4",
|
|
55
|
+
children: c
|
|
56
|
+
}),
|
|
57
|
+
f && /* @__PURE__ */ n("div", {
|
|
58
|
+
className: "overflow-y-auto",
|
|
59
|
+
children: /* @__PURE__ */ n(d, {
|
|
60
|
+
className: "text-body-16-medium text-text-prominent-neutral-3",
|
|
61
|
+
children: f
|
|
62
|
+
})
|
|
63
|
+
}),
|
|
64
|
+
p && /* @__PURE__ */ n("div", {
|
|
65
|
+
className: "overflow-y-auto",
|
|
66
|
+
children: p
|
|
67
|
+
})
|
|
68
|
+
]
|
|
69
|
+
}), (m || h) && /* @__PURE__ */ r("div", {
|
|
70
|
+
className: "flex w-full flex-col gap-2",
|
|
71
|
+
children: [m && /* @__PURE__ */ n(t, {
|
|
72
|
+
label: m.label,
|
|
73
|
+
icon: m.icon,
|
|
74
|
+
size: "medium",
|
|
75
|
+
hierarchy: "primary",
|
|
76
|
+
onClick: ((e) => () => {
|
|
77
|
+
e?.onClick?.();
|
|
78
|
+
})(m)
|
|
79
|
+
}), h && /* @__PURE__ */ n(t, {
|
|
80
|
+
label: h.label,
|
|
81
|
+
icon: h.icon,
|
|
82
|
+
size: "medium",
|
|
83
|
+
hierarchy: "tertiary",
|
|
84
|
+
onClick: ((e) => () => {
|
|
85
|
+
e?.onClick?.(), v();
|
|
86
|
+
})(h)
|
|
87
|
+
})]
|
|
88
|
+
})]
|
|
89
|
+
})
|
|
90
|
+
});
|
|
91
|
+
};
|
|
92
|
+
//#endregion
|
|
93
|
+
export { f as t };
|
|
94
|
+
|
|
95
|
+
//# sourceMappingURL=Popup-Cr_pMP7h.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popup-Cr_pMP7h.js","names":[],"sources":["../src/components/ui/dialog.tsx","../src/components/v1/popup/Popup.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\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-50 bg-black/40 duration-200\",\n className,\n )}\n {...props}\n />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\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 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none\",\n className,\n )}\n {...props}\n />\n </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return <div className={cn(\"flex flex-col gap-2\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return <div className={cn(\"flex flex-col gap-2 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../../utils/TailwindUtil\";\nimport { CTAButton } from \"../cta-button/CTAButton\";\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\ntype PopupAction = {\n label: string | React.ReactNode;\n icon?: React.ComponentType<{ className?: string }>;\n onClick?: () => void;\n};\n\nexport interface PopupProps {\n isOpen: boolean;\n setIsOpen: (isOpen: boolean) => void;\n onClose?: () => void;\n title?: string | React.ReactNode;\n description?: string | React.ReactNode;\n content?: React.ReactNode;\n confirm?: PopupAction;\n cancel?: PopupAction;\n preventEasyClose?: boolean;\n className?: string;\n}\n\nconst Popup = ({\n isOpen,\n setIsOpen,\n onClose,\n title,\n description,\n content,\n confirm,\n cancel,\n preventEasyClose = false,\n className,\n}: PopupProps) => {\n const handleClose = () => {\n setIsOpen(false);\n onClose?.();\n };\n\n const handleConfirmAction = (action?: PopupAction) => () => {\n action?.onClick?.();\n };\n\n const handleCancelAction = (action?: PopupAction) => () => {\n action?.onClick?.();\n handleClose();\n };\n\n const handleOpenChange = (nextOpen: boolean) => {\n if (preventEasyClose && !nextOpen) {\n return;\n }\n\n if (!nextOpen) {\n onClose?.();\n }\n\n setIsOpen(nextOpen);\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n <DialogContent\n onEscapeKeyDown={preventEasyClose ? (event) => event.preventDefault() : undefined}\n onInteractOutside={preventEasyClose ? (event) => event.preventDefault() : undefined}\n className={cn(\n \"bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4\",\n className,\n )}\n >\n <div className=\"flex w-full flex-col gap-2 overflow-y-auto\">\n {title && <DialogTitle className=\"text-title-18-bold text-text-prominent-neutral-4\">{title}</DialogTitle>}\n {description && (\n <div className=\"overflow-y-auto\">\n <DialogDescription className=\"text-body-16-medium text-text-prominent-neutral-3\">\n {description}\n </DialogDescription>\n </div>\n )}\n {content && <div className=\"overflow-y-auto\">{content}</div>}\n </div>\n {(confirm || cancel) && (\n <div className=\"flex w-full flex-col gap-2\">\n {confirm && (\n <CTAButton\n label={confirm.label}\n icon={confirm.icon}\n size=\"medium\"\n hierarchy=\"primary\"\n onClick={handleConfirmAction(confirm)}\n />\n )}\n {cancel && (\n <CTAButton\n label={cancel.label}\n icon={cancel.icon}\n size=\"medium\"\n hierarchy=\"tertiary\"\n onClick={handleCancelAction(cancel)}\n />\n )}\n </div>\n )}\n </DialogContent>\n </Dialog>\n );\n};\n\nexport { Popup };\n"],"mappings":";;;;;;AAKA,IAAM,IAAS,EAAgB;AACT,EAAgB;AACtC,IAAM,IAAe,EAAgB;AACjB,EAAgB;AAEpC,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,uKACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAiB,CAAA,EACjB,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,gRACA,EACD;CACD,GAAI;CACJ,CAAA,CACW,EAAA,CAAA,CACf;AACF,EAAc,cAAc,EAAgB,QAAQ;AAUpD,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,OAAjB;CAA4B;CAAK,WAAW,EAAG,yBAAyB,EAAU;CAAE,GAAI;CAAS,CAAA,CACjG;AACF,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,aAAjB;CAAkC;CAAK,WAAW,EAAG,iCAAiC,EAAU;CAAE,GAAI;CAAS,CAAA,CAC/G;AACF,EAAkB,cAAc,EAAgB,YAAY;;;ACrC5D,IAAM,KAAS,EACb,WACA,cACA,YACA,UACA,gBACA,YACA,YACA,WACA,sBAAmB,IACnB,mBACgB;CAChB,IAAM,UAAoB;AAExB,EADA,EAAU,GAAM,EAChB,KAAW;;AAwBb,QACE,kBAAC,GAAD;EAAQ,MAAM;EAAQ,eAbE,MAAsB;AAC1C,QAAoB,CAAC,MAIpB,KACH,KAAW,EAGb,EAAU,EAAS;;YAKjB,kBAAC,GAAD;GACE,iBAAiB,KAAoB,MAAU,EAAM,gBAAgB,GAAG,KAAA;GACxE,mBAAmB,KAAoB,MAAU,EAAM,gBAAgB,GAAG,KAAA;GAC1E,WAAW,EACT,0HACA,EACD;aANH,CAQE,kBAAC,OAAD;IAAK,WAAU;cAAf;KACG,KAAS,kBAAC,GAAD;MAAa,WAAU;gBAAoD;MAAoB,CAAA;KACxG,KACC,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAmB,WAAU;iBAC1B;OACiB,CAAA;MAChB,CAAA;KAEP,KAAW,kBAAC,OAAD;MAAK,WAAU;gBAAmB;MAAc,CAAA;KACxD;QACJ,KAAW,MACX,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,GAAD;KACE,OAAO,EAAQ;KACf,MAAM,EAAQ;KACd,MAAK;KACL,WAAU;KACV,WAlDe,YAA+B;AAC1D,SAAQ,WAAW;QAiDsB,EAAQ;KACrC,CAAA,EAEH,KACC,kBAAC,GAAD;KACE,OAAO,EAAO;KACd,MAAM,EAAO;KACb,MAAK;KACL,WAAU;KACV,WAvDc,YAA+B;AAEzD,MADA,GAAQ,WAAW,EACnB,GAAa;QAqD2B,EAAO;KACnC,CAAA,CAEA;MAEM;;EACT,CAAA"}
|
package/dist/index.es.js
CHANGED
|
@@ -6,7 +6,7 @@ import r from "./v0/toggle.js";
|
|
|
6
6
|
import { Badge as i } from "./v1/badge.js";
|
|
7
7
|
import { Chip as a } from "./v1/chip.js";
|
|
8
8
|
import { CTAButton as o } from "./v1/cta-button.js";
|
|
9
|
-
import { t as s } from "./Popup-
|
|
9
|
+
import { t as s } from "./Popup-Cr_pMP7h.js";
|
|
10
10
|
import { CancelFilledIcon as c } from "./v1/icons/action/cancel-filled.js";
|
|
11
11
|
import { ChevronLeftIcon as l } from "./v1/icons/action/chevron-left.js";
|
|
12
12
|
import { TextFieldNormal as u, TextFieldSelect as d, TextFieldWithButton as f } from "./v1/text-field.js";
|
|
@@ -9,6 +9,7 @@ type PopupAction = {
|
|
|
9
9
|
export interface PopupProps {
|
|
10
10
|
isOpen: boolean;
|
|
11
11
|
setIsOpen: (isOpen: boolean) => void;
|
|
12
|
+
onClose?: () => void;
|
|
12
13
|
title?: string | React.ReactNode;
|
|
13
14
|
description?: string | React.ReactNode;
|
|
14
15
|
content?: React.ReactNode;
|
|
@@ -17,5 +18,5 @@ export interface PopupProps {
|
|
|
17
18
|
preventEasyClose?: boolean;
|
|
18
19
|
className?: string;
|
|
19
20
|
}
|
|
20
|
-
declare const Popup: ({ isOpen, setIsOpen, title, description, content, confirm, cancel, preventEasyClose, className, }: PopupProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
declare const Popup: ({ isOpen, setIsOpen, onClose, title, description, content, confirm, cancel, preventEasyClose, className, }: PopupProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
22
|
export { Popup };
|
package/dist/v1/popup.js
CHANGED
package/package.json
CHANGED
package/dist/Popup-D9fn8MGc.js
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
import { t as e } from "./TailwindUtil-aZk2bbTo.js";
|
|
2
|
-
import { CTAButton as t } from "./v1/cta-button.js";
|
|
3
|
-
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
|
-
import * as i from "react";
|
|
5
|
-
import { Dialog as a } from "radix-ui";
|
|
6
|
-
//#region src/components/ui/dialog.tsx
|
|
7
|
-
var o = a.Root;
|
|
8
|
-
a.Trigger;
|
|
9
|
-
var s = a.Portal;
|
|
10
|
-
a.Close;
|
|
11
|
-
var c = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Overlay, {
|
|
12
|
-
ref: i,
|
|
13
|
-
className: e("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/40 duration-200", t),
|
|
14
|
-
...r
|
|
15
|
-
}));
|
|
16
|
-
c.displayName = a.Overlay.displayName;
|
|
17
|
-
var l = i.forwardRef(({ className: t, ...i }, o) => /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n(c, {}), /* @__PURE__ */ n(a.Content, {
|
|
18
|
-
ref: o,
|
|
19
|
-
className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none", t),
|
|
20
|
-
...i
|
|
21
|
-
})] }));
|
|
22
|
-
l.displayName = a.Content.displayName;
|
|
23
|
-
var u = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Title, {
|
|
24
|
-
ref: i,
|
|
25
|
-
className: e("text-lg font-semibold", t),
|
|
26
|
-
...r
|
|
27
|
-
}));
|
|
28
|
-
u.displayName = a.Title.displayName;
|
|
29
|
-
var d = i.forwardRef(({ className: t, ...r }, i) => /* @__PURE__ */ n(a.Description, {
|
|
30
|
-
ref: i,
|
|
31
|
-
className: e("text-muted-foreground text-sm", t),
|
|
32
|
-
...r
|
|
33
|
-
}));
|
|
34
|
-
d.displayName = a.Description.displayName;
|
|
35
|
-
//#endregion
|
|
36
|
-
//#region src/components/v1/popup/Popup.tsx
|
|
37
|
-
var f = ({ isOpen: i, setIsOpen: a, title: s, description: c, content: f, confirm: p, cancel: m, preventEasyClose: h = !1, className: g }) => /* @__PURE__ */ n(o, {
|
|
38
|
-
open: i,
|
|
39
|
-
onOpenChange: (e) => {
|
|
40
|
-
h && !e || a(e);
|
|
41
|
-
},
|
|
42
|
-
children: /* @__PURE__ */ r(l, {
|
|
43
|
-
onEscapeKeyDown: h ? (e) => e.preventDefault() : void 0,
|
|
44
|
-
onInteractOutside: h ? (e) => e.preventDefault() : void 0,
|
|
45
|
-
className: e("bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4", g),
|
|
46
|
-
children: [/* @__PURE__ */ r("div", {
|
|
47
|
-
className: "flex w-full flex-col gap-2",
|
|
48
|
-
children: [
|
|
49
|
-
s && /* @__PURE__ */ n(u, {
|
|
50
|
-
className: "text-title-18-bold text-text-prominent-neutral-4",
|
|
51
|
-
children: s
|
|
52
|
-
}),
|
|
53
|
-
c && /* @__PURE__ */ n("div", {
|
|
54
|
-
className: "overflow-y-auto",
|
|
55
|
-
children: /* @__PURE__ */ n(d, {
|
|
56
|
-
className: "text-body-16-medium text-text-prominent-neutral-3",
|
|
57
|
-
children: c
|
|
58
|
-
})
|
|
59
|
-
}),
|
|
60
|
-
f && /* @__PURE__ */ n("div", {
|
|
61
|
-
className: "overflow-y-auto",
|
|
62
|
-
children: f
|
|
63
|
-
})
|
|
64
|
-
]
|
|
65
|
-
}), (p || m) && /* @__PURE__ */ r("div", {
|
|
66
|
-
className: "flex w-full flex-col gap-2",
|
|
67
|
-
children: [p && /* @__PURE__ */ n(t, {
|
|
68
|
-
label: p.label,
|
|
69
|
-
icon: p.icon,
|
|
70
|
-
size: "medium",
|
|
71
|
-
hierarchy: "primary",
|
|
72
|
-
onClick: ((e) => () => {
|
|
73
|
-
e?.onClick?.();
|
|
74
|
-
})(p)
|
|
75
|
-
}), m && /* @__PURE__ */ n(t, {
|
|
76
|
-
label: m.label,
|
|
77
|
-
icon: m.icon,
|
|
78
|
-
size: "medium",
|
|
79
|
-
hierarchy: "tertiary",
|
|
80
|
-
onClick: ((e) => () => {
|
|
81
|
-
e?.onClick?.(), a(!1);
|
|
82
|
-
})(m)
|
|
83
|
-
})]
|
|
84
|
-
})]
|
|
85
|
-
})
|
|
86
|
-
});
|
|
87
|
-
//#endregion
|
|
88
|
-
export { f as t };
|
|
89
|
-
|
|
90
|
-
//# sourceMappingURL=Popup-D9fn8MGc.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popup-D9fn8MGc.js","names":[],"sources":["../src/components/ui/dialog.tsx","../src/components/v1/popup/Popup.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/utils/TailwindUtil\";\n\nconst Dialog = DialogPrimitive.Root;\nconst DialogTrigger = DialogPrimitive.Trigger;\nconst DialogPortal = DialogPrimitive.Portal;\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\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-50 bg-black/40 duration-200\",\n className,\n )}\n {...props}\n />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n ref={ref}\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 bg-background fixed top-1/2 left-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg p-6 shadow-lg duration-200 outline-none\",\n className,\n )}\n {...props}\n />\n </DialogPortal>\n));\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return <div className={cn(\"flex flex-col gap-2\", className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n return <div className={cn(\"flex flex-col gap-2 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title ref={ref} className={cn(\"text-lg font-semibold\", className)} {...props} />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef<typeof DialogPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n","\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"../../../utils/TailwindUtil\";\nimport { CTAButton } from \"../cta-button/CTAButton\";\n\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"@/components/ui/dialog\";\n\ntype PopupAction = {\n label: string | React.ReactNode;\n icon?: React.ComponentType<{ className?: string }>;\n onClick?: () => void;\n};\n\nexport interface PopupProps {\n isOpen: boolean;\n setIsOpen: (isOpen: boolean) => void;\n title?: string | React.ReactNode;\n description?: string | React.ReactNode;\n content?: React.ReactNode;\n confirm?: PopupAction;\n cancel?: PopupAction;\n preventEasyClose?: boolean;\n className?: string;\n}\n\nconst Popup = ({\n isOpen,\n setIsOpen,\n title,\n description,\n content,\n confirm,\n cancel,\n preventEasyClose = false,\n className,\n}: PopupProps) => {\n const handleConfirmAction = (action?: PopupAction) => () => {\n action?.onClick?.();\n };\n\n const handleCancelAction = (action?: PopupAction) => () => {\n action?.onClick?.();\n setIsOpen(false);\n };\n\n const handleOpenChange = (nextOpen: boolean) => {\n if (preventEasyClose && !nextOpen) {\n return;\n }\n\n setIsOpen(nextOpen);\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n <DialogContent\n onEscapeKeyDown={preventEasyClose ? (event) => event.preventDefault() : undefined}\n onInteractOutside={preventEasyClose ? (event) => event.preventDefault() : undefined}\n className={cn(\n \"bg-surface-base-neutral-1 flex max-h-[440px] w-[300px] max-w-[300px] flex-col gap-4 overflow-hidden rounded-[16px] p-4\",\n className,\n )}\n >\n <div className=\"flex w-full flex-col gap-2\">\n {title && <DialogTitle className=\"text-title-18-bold text-text-prominent-neutral-4\">{title}</DialogTitle>}\n {description && (\n <div className=\"overflow-y-auto\">\n <DialogDescription className=\"text-body-16-medium text-text-prominent-neutral-3\">\n {description}\n </DialogDescription>\n </div>\n )}\n {content && <div className=\"overflow-y-auto\">{content}</div>}\n </div>\n {(confirm || cancel) && (\n <div className=\"flex w-full flex-col gap-2\">\n {confirm && (\n <CTAButton\n label={confirm.label}\n icon={confirm.icon}\n size=\"medium\"\n hierarchy=\"primary\"\n onClick={handleConfirmAction(confirm)}\n />\n )}\n {cancel && (\n <CTAButton\n label={cancel.label}\n icon={cancel.icon}\n size=\"medium\"\n hierarchy=\"tertiary\"\n onClick={handleCancelAction(cancel)}\n />\n )}\n </div>\n )}\n </DialogContent>\n </Dialog>\n );\n};\n\nexport { Popup };\n"],"mappings":";;;;;;AAKA,IAAM,IAAS,EAAgB;AACT,EAAgB;AACtC,IAAM,IAAe,EAAgB;AACjB,EAAgB;AAEpC,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,uKACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAc,cAAc,EAAgB,QAAQ;AAEpD,IAAM,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAiB,CAAA,EACjB,kBAAC,EAAgB,SAAjB;CACO;CACL,WAAW,EACT,gRACA,EACD;CACD,GAAI;CACJ,CAAA,CACW,EAAA,CAAA,CACf;AACF,EAAc,cAAc,EAAgB,QAAQ;AAUpD,IAAM,IAAc,EAAM,YAGvB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,OAAjB;CAA4B;CAAK,WAAW,EAAG,yBAAyB,EAAU;CAAE,GAAI;CAAS,CAAA,CACjG;AACF,EAAY,cAAc,EAAgB,MAAM;AAEhD,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,EAAgB,aAAjB;CAAkC;CAAK,WAAW,EAAG,iCAAiC,EAAU;CAAE,GAAI;CAAS,CAAA,CAC/G;AACF,EAAkB,cAAc,EAAgB,YAAY;;;ACtC5D,IAAM,KAAS,EACb,WACA,cACA,UACA,gBACA,YACA,YACA,WACA,sBAAmB,IACnB,mBAoBE,kBAAC,GAAD;CAAQ,MAAM;CAAQ,eATE,MAAsB;AAC1C,OAAoB,CAAC,KAIzB,EAAU,EAAS;;WAKjB,kBAAC,GAAD;EACE,iBAAiB,KAAoB,MAAU,EAAM,gBAAgB,GAAG,KAAA;EACxE,mBAAmB,KAAoB,MAAU,EAAM,gBAAgB,GAAG,KAAA;EAC1E,WAAW,EACT,0HACA,EACD;YANH,CAQE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACG,KAAS,kBAAC,GAAD;KAAa,WAAU;eAAoD;KAAoB,CAAA;IACxG,KACC,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAmB,WAAU;gBAC1B;MACiB,CAAA;KAChB,CAAA;IAEP,KAAW,kBAAC,OAAD;KAAK,WAAU;eAAmB;KAAc,CAAA;IACxD;OACJ,KAAW,MACX,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,KACC,kBAAC,GAAD;IACE,OAAO,EAAQ;IACf,MAAM,EAAQ;IACd,MAAK;IACL,WAAU;IACV,WA9Ce,YAA+B;AAC1D,QAAQ,WAAW;OA6CsB,EAAQ;IACrC,CAAA,EAEH,KACC,kBAAC,GAAD;IACE,OAAO,EAAO;IACd,MAAM,EAAO;IACb,MAAK;IACL,WAAU;IACV,WAnDc,YAA+B;AAEzD,KADA,GAAQ,WAAW,EACnB,EAAU,GAAM;OAiDwB,EAAO;IACnC,CAAA,CAEA;KAEM;;CACT,CAAA"}
|