@petnow/ui 4.1.1 → 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.
|
@@ -48,7 +48,7 @@ var f = ({ isOpen: i, setIsOpen: a, onClose: s, title: c, description: f, conten
|
|
|
48
48
|
onInteractOutside: g ? (e) => e.preventDefault() : void 0,
|
|
49
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
50
|
children: [/* @__PURE__ */ r("div", {
|
|
51
|
-
className: "flex w-full flex-col gap-2",
|
|
51
|
+
className: "flex w-full flex-col gap-2 overflow-y-auto",
|
|
52
52
|
children: [
|
|
53
53
|
c && /* @__PURE__ */ n(u, {
|
|
54
54
|
className: "text-title-18-bold text-text-prominent-neutral-4",
|
|
@@ -92,4 +92,4 @@ var f = ({ isOpen: i, setIsOpen: a, onClose: s, title: c, description: f, conten
|
|
|
92
92
|
//#endregion
|
|
93
93
|
export { f as t };
|
|
94
94
|
|
|
95
|
-
//# sourceMappingURL=Popup-
|
|
95
|
+
//# sourceMappingURL=Popup-Cr_pMP7h.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popup-
|
|
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";
|
package/dist/v1/popup.js
CHANGED