@momo-webplatform/mobase 0.0.38 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "description": "Mobase is the UI framework upon we build product experiences at MoMo.vn, base on Radix primitives, and Tailwind CSS.",
   "scripts": {
     "dev": "next dev",
@@ -80,6 +80,7 @@
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
     "postcss": "^8.4.33",
+    "qrcode.react": "1.0.1",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.0",
     "react-docgen-typescript": "^2.2.2",

package/publish/cjs/components/Callout/Callout.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const class_variance_authority_1 = require("class-variance-authority");
+const react_1 = require("react");
+const utils_1 = require("../../helpers/utils");
+const outline_1 = require("@heroicons/react/24/outline");
+const TextButton_1 = require("../TextButton");
+const calloutVariants = (0, class_variance_authority_1.cva)("px-3 py-2 rounded-md border flex items-center space-x-2 text-gray-700 text-sm ", {
+    variants: {
+        typeDiv: {
+            neutral: "bg-gray-50 border-gray-300 ",
+            error: "bg-red-50 border-red-300",
+            success: "bg-green-50 border-green-300",
+            warning: "bg-yellow-50 border-yellow-300",
+            info: "bg-blue-50 border-blue-300",
+        },
+        disabled: {
+            true: "text-gray-400 bg-gray-50 opacity-55 pointer-events-none border-gray-300",
+        },
+    },
+    defaultVariants: {
+        typeDiv: "neutral",
+    },
+});
+const iconVariants = (0, class_variance_authority_1.cva)("w-5 h-5 shrink-0 border-none p-0 ", {
+    variants: {
+        typeIcon: {
+            neutral: "text-gray-700",
+            error: "text-red-700",
+            success: "text-green-700",
+            warning: "text-yellow-700",
+            info: "text-blue-700",
+        },
+        disabled: {
+            true: "text-gray-400",
+        },
+    },
+    defaultVariants: {
+        typeIcon: "neutral",
+    },
+});
+exports.Callout = (0, react_1.forwardRef)(({ type = "neutral", message = "", withAction = false, onClickAction, className, disabled, actionClassName, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, utils_1.cn)("", className, calloutVariants({ typeDiv: type, disabled })), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)(outline_1.InformationCircleIcon, { className: (0, utils_1.cn)(iconVariants({ typeIcon: type, disabled })), width: 20, height: 20 }), (0, jsx_runtime_1.jsx)("div", { children: "B\u1EA1n c\u1EA7n cho ph\u00E9p website s\u1EED d\u1EE5ng th\u00F4ng tin v\u1ECB tr\u00ED \u0111\u1EC3 s\u1EED d\u1EE5ng t\u00EDnh n\u0103ng n\u00E0y" })] }), withAction && ((0, jsx_runtime_1.jsx)(TextButton_1.TextButton, { variant: "primary", onClick: () => onClickAction?.(), className: (0, utils_1.cn)("", actionClassName), isDisabled: disabled, children: withAction }))] }));
+});

package/publish/cjs/components/Callout/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Callout = void 0;
+var Callout_1 = require("./Callout");
+Object.defineProperty(exports, "Callout", { enumerable: true, get: function () { return Callout_1.Callout; } });

package/publish/cjs/components/Dialog/Dialog.js

@@ -28,7 +28,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
 const utils_1 = require("../../helpers/utils");
-const solid_1 = require("@heroicons/react/24/solid");
+const solid_1 = require("@heroicons/react/20/solid");
 const Dialog = DialogPrimitive.Root;
 exports.Dialog = Dialog;
 const DialogTrigger = DialogPrimitive.Trigger;
@@ -40,11 +40,37 @@ exports.DialogClose = DialogClose;
 const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { ref: ref, className: (0, utils_1.cn)("fixed inset-0 z-50 bg-black/60 !duration-300 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
 exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, isRightCloseButton, size = "md", position = "center", isFull = false, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("fixed z-50 flex border bg-background shadow-lg sm:rounded-lg bg-white text-gray-900 max-h-full w-full max-w-full flex-col", size === "sm" && "md:max-w-xs max-h-[432px] md:max-h-[432px]", size === "md" && "md:max-w-lg max-h-[432px] md:max-h-[432px]", size === "lg" && "md:max-w-2xl max-h-[454px] md:max-h-[454px]", size === "xl" && "md:max-w-5xl max-h-[640px] md:max-h-[640px]", position === "center" &&
-                "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] max-w-xs rounded-lg", position === "left" &&
-                "!duration-300 max-h-screen md:max-h-screen rounded-r-lg sm:rounded-l-none h-full top-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-left data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left max-w-xs ease-in-out", position === "right" &&
-                "!duration-300 max-h-screen md:max-h-screen rounded-l-lg sm:rounded-r-none h-full top-0 right-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right max-w-xs ease-in-out", position === "bottom" &&
-                "!duration-300 bottom-0 sm:bottom-1/2 left-1/2 rounded-t-lg sm:translate-y-1/2 data-[state=closed]:animate-out -translate-x-1/2 data-[state=open]:animate-in data-[state=open]:slide-in-from-left-1/2 ease-in-out data-[state=open]:slide-in-from-bottom-2/3 data-[state=closed]:slide-out-to-bottom-2/3 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", isFull && "h-full max-h-screen max-w-full w-full rounded-none", className), ...props, children: [children, (0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("absolute md:top-4 top-2 focus:outline-none focus:ring-0 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-gray-900 w-8 h-8 flex justify-center items-center rounded-full hover:bg-gray-50 hover:bg-opacity-20 hover:opacity-70", isRightCloseButton ? "md:right-4 right-3" : "md:left-4 left-3"), title: "\u0110\u00F3ng", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "h-5 w-5 text-gray-900" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] })));
+const DialogContent = React.forwardRef(({ className, isRightCloseButton, size = "md", position = "center", height = "auto", isFull = false, children, ...props }, ref) => {
+    const classNames = {
+        base: "fixed z-50 flex border bg-background shadow-lg sm:rounded-lg bg-white text-gray-900 w-full max-w-[calc(-64px_+_100vw)] max-h-[calc(-64px_+_100vh)] flex-col",
+        center: "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        bottom: "!duration-300 bottom-0 sm:bottom-1/2 left-1/2 rounded-t-lg sm:translate-y-1/2 data-[state=closed]:animate-out -translate-x-1/2 data-[state=open]:animate-in data-[state=open]:slide-in-from-left-1/2 ease-in-out data-[state=open]:slide-in-from-bottom-2/3 data-[state=closed]:slide-out-to-bottom-2/3 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 max-w-full max-h-[calc(-32px_+_100vh)] sm:max-h-[calc(-64px_+_100vh)]",
+        left: "!duration-300 max-h-screen !h-full rounded-r-lg sm:rounded-l-none top-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-left data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left ease-in-out",
+        right: "!duration-300 !h-full rounded-l-lg sm:rounded-r-none max-h-screen top-0 right-0 data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right ease-in-out",
+    };
+    const sizeClassNames = {
+        sm: "w-80 sm:w-80",
+        md: "w-[512px] sm:w-[512px]",
+        lg: "w-[672px] sm:w-[672px]",
+        xl: "w-[1024px] sm:-[1024px]",
+    };
+    const heightClassNames = {
+        auto: "h-auto sm:h-auto",
+        small: "h-[480px] sm:h-[480px]",
+        large: "h-[640px] sm:h-[640px]",
+        full: "h-full",
+    };
+    const classNamesDialogContent = [
+        classNames.base,
+        classNames[position],
+        sizeClassNames[size],
+        heightClassNames[height],
+        isFull &&
+            "h-full max-h-screen max-w-full w-full rounded-none sm:rounded-lg sm:max-h-[calc(-64px_+_100vh)]",
+        className,
+    ];
+    return ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)(...classNamesDialogContent), ...props, children: [children, (0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { className: (0, utils_1.cn)("absolute md:top-4 top-2 focus:outline-none focus:ring-0 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-700 text-gray-900 w-8 h-8   flex justify-center items-center rounded-full before:opacity-0  hover:before:opacity-100 before:transition-opacity before:z-[-1]  before:content-[''] before:absolute before:inset-0 before:rounded-full before:select-none  before:left-0 before:top-0 before:bg-gray-200  left-3 md:left-auto md:right-4", isRightCloseButton && "left-auto right-3 md:right-4"), title: "\u0110\u00F3ng", children: [(0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "h-5 w-5 text-gray-900" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] }));
+});
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 const DialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("dialog-header py-2 md:py-4 h-12 md:h-16 px-10 md:px-12 items-center justify-center flex border-b border-gray-200 w-full shrink-0", className), ...props }));
@@ -56,9 +82,9 @@ DialogBody.displayName = "DialogBody";
 const DialogFooter = ({ className, isDivider = true, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("dialog-footer flex sm:flex-row justify-center [&>*]:basis-1/2 [&>*]:sm:basis-auto sm:justify-end space-x-2 px-6 pb-4 shrink-0", isDivider && "border-gray-200 border-t py-4", className), ...props }));
 exports.DialogFooter = DialogFooter;
 DialogFooter.displayName = "DialogFooter";
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-base font-bold line-clamp-1 max-w-full", className), ...props })));
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-base font-semibold line-clamp-1 max-w-full", className), ...props })));
 exports.DialogTitle = DialogTitle;
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-muted-foreground", className), ...props })));
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Description, { ref: ref, className: (0, utils_1.cn)("text-sm text-gray-700", className), ...props })));
 exports.DialogDescription = DialogDescription;
 DialogDescription.displayName = DialogPrimitive.Description.displayName;

package/publish/cjs/components/DialogQr/DialogQr.js

@@ -0,0 +1,98 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogQr = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Dialog_1 = require("../Dialog");
+const qrcode_react_1 = __importDefault(require("qrcode.react"));
+const utils_1 = require("../../helpers/utils");
+const QRCodeScan = ({ img = "", children, isQrForAll }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "qrcode__scan__container", children: (0, jsx_runtime_1.jsxs)("div", { className: "qrcode__scan", children: [(0, jsx_runtime_1.jsx)("div", { className: "qrcode__gradient", children: (0, jsx_runtime_1.jsx)("img", { alt: "step 1", className: "img-fluid", src: "https://homepage.momocdn.net/jk/momo2020/img/qrcode/qrcode-gradient.png" }) }), (0, jsx_runtime_1.jsx)("div", { className: "qrcode__border", children: (0, jsx_runtime_1.jsx)("img", { alt: "step 2", className: "img-fluid", src: "https://homepage.momocdn.net/jk/momo2020/img/qrcode/border-qrcode.svg" }) }), (0, jsx_runtime_1.jsx)("div", { className: "qrcode__image p-4", children: img ? ((0, jsx_runtime_1.jsx)("img", { alt: "step 3", className: "img-fluid d-block mx-auto", src: img, loading: "lazy" })) : (children) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 text-sm text-white", children: isQrForAll ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://homepage.momocdn.net/img/momo-upload-api-231211171009-638379114093056419.png", width: 255, height: 32, className: "mx-auto", alt: "QR all" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: "Nh\u1EADn ti\u1EC1n t\u1EEB m\u1ECDi V\u00ED \u0110i\u1EC7n T\u1EED v\u00E0 Ng\u00E2n H\u00E0ng" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", className: "mr-1 inline h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" }) }), "S\u1EED d\u1EE5ng App MoMo ho\u1EB7c", (0, jsx_runtime_1.jsx)("br", {}), "\u1EE9ng d\u1EE5ng Camera h\u1ED7 tr\u1EE3 QR code \u0111\u1EC3 qu\u00E9t m\u00E3."] })) }), (0, jsx_runtime_1.jsx)("style", { children: `
+            .qrcode__scan__container {
+              padding: 15px;
+              background-color: white;
+              width: 280px;
+              height: 280px;
+              border-radius: 20px;
+              border-radius: 15px;
+              margin: 0 auto;
+            }
+    
+            .qrcode__image {
+              width: 100%;
+            }
+    
+            .qrcode__image img {
+              width: 100%;
+            }
+    
+            .qrcode__scan {
+              width: 245px;
+              height: 245px;
+              margin: 0 auto;
+              overflow: hidden;
+              background-color: white;
+              position: relative;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+    
+            .qrcode__border {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              top: 0;
+              left: 0;
+              z-index: 5;
+              opacity: 0.9;
+              pointer-events: none;
+            }
+    
+            .qrcode__gradient {
+              position: absolute;
+              opacity: 0.6;
+              width: 98%;
+              height: 98%;
+              top: 1%;
+              left: 1%;
+              z-index: 6;
+              // pointer-events: none;
+              transform: translate3d(0, -110%, 0);
+              animation: QRCodeScan 3s infinite cubic-bezier(0.45, 0.03, 0.81, 0.63);
+    
+              backface-visibility: hidden;
+            }
+    
+            @keyframes QRCodeScan {
+              0% {
+                transform: translate3d(0, -110%, 0);
+              }
+    
+              90% {
+                transform: translate3d(0, 30%, 0);
+              }
+              100% {
+                transform: translate3d(0, 30%, 0);
+              }
+            }
+          ` })] }));
+};
+const DialogQr = ({ className, children, title, shortTitle, qrImage, qrLink, logoQr, isQrForAll = false, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsx)(Dialog_1.DialogContent, { className: (0, utils_1.cn)("md:max-w-2xl lg:max-w-3xl h-auto md:max-h-screen max-h-screen overflow-hidden [&>button>svg]:text-white border-0", className), size: "xl", isRightCloseButton: true, children: (0, jsx_runtime_1.jsx)(Dialog_1.DialogBody, { className: "p-0", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row flex-wrap", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full flex-none md:w-5/12 hidden sm:block", children: children || ((0, jsx_runtime_1.jsxs)("div", { className: "px-5 text-sm py-8 grid grid-cols-1 gap-y-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-nowrap items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-none", children: (0, jsx_runtime_1.jsx)("img", { className: "w-20", loading: "lazy", src: "https://homepage.momocdn.net/images/s/momo-upload-api-200917091602-637359309621891617.png", alt: "Step 1" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 pl-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "step font-semibold text-gray-800 ", children: "B\u01B0\u1EDBc 1 :" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-gray-500 ", children: isQrForAll
+                                                            ? "Mở app MoMo hoặc ứng dụng ngân hàng/ví điện tử chấp nhận mã vạch từ QR Đa Năng"
+                                                            : "Mở ứng dụng camera mặc định hoặc ứng dụng hỗ trợ QR code của bạn" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-nowrap items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-none", children: (0, jsx_runtime_1.jsx)("img", { className: "w-20 ", loading: "lazy", src: "https://homepage.momocdn.net/images/s/momo-upload-api-200917091443-637359308837905996.png", alt: "Step 2" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 pl-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "step font-semibold text-gray-800 ", children: "B\u01B0\u1EDBc 2 :" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-1 text-gray-500 ", children: "Qu\u00E9t m\u00E3 QR Code theo h\u00ECnh b\u00EAn ph\u1EA3i" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-nowrap items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-none", children: (0, jsx_runtime_1.jsx)("img", { className: "w-20 ", loading: "lazy", src: "https://homepage.momocdn.net/images/s/momo-upload-api-200917090146-637359301062519803.png", alt: "Step 3" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 pl-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "step font-semibold text-gray-800 ", children: "B\u01B0\u1EDBc 3 :" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1 text-gray-500 ", children: ["B\u1EA5m v\u00E0o th\u00F4ng b\u00E1o hi\u1EC3n th\u1ECB \u0111\u1EC3 t\u1EA3i \u1EE9ng d\u1EE5ng ho\u1EB7c", " ", shortTitle || "Truy cập ngay"] })] })] })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-full items-center justify-center md:w-7/12 h-auto", style: {
+                                background: "url(https://homepage.momocdn.net/jk/momo2020/img/intro/qrcode-pattern.png) 10px 10px no-repeat,linear-gradient(to top,#c1177c,#e11b90)",
+                            }, children: (0, jsx_runtime_1.jsxs)("div", { className: "px-5 py-10 text-center", children: [title && ((0, jsx_runtime_1.jsx)("h4", { className: "mb-5 text-base font-semibold text-white", children: title })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [isQrForAll && ((0, jsx_runtime_1.jsx)("div", { className: "absolute -top-2 left-1/2 z-[5] -translate-x-1/2", children: (0, jsx_runtime_1.jsx)("img", { src: "https://homepage.momocdn.net/fileuploads/svg/momo-file-231211170324.svg", alt: "Title QR all" }) })), (0, jsx_runtime_1.jsx)(QRCodeScan, { img: qrImage, isQrForAll: isQrForAll, children: qrLink && ((0, jsx_runtime_1.jsx)(qrcode_react_1.default, { value: qrLink, size: 215, renderAs: "svg", imageSettings: {
+                                                        src: `${logoQr ||
+                                                            "https://homepage.momocdn.net/pwa/images/logoMomox50.png"}`,
+                                                        x: null,
+                                                        y: null,
+                                                        height: 50,
+                                                        width: 50,
+                                                        excavate: true,
+                                                    }, level: "H" })) })] })] }) })] }) }) }) }));
+};
+exports.DialogQr = DialogQr;

package/publish/cjs/components/DialogQr/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogQr = void 0;
+var DialogQr_1 = require("./DialogQr");
+Object.defineProperty(exports, "DialogQr", { enumerable: true, get: function () { return DialogQr_1.DialogQr; } });

package/publish/cjs/components/SearchBar/SearchBar.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const solid_1 = require("@heroicons/react/20/solid");
+const outline_1 = require("@heroicons/react/24/outline");
+const utils_1 = require("../../helpers/utils");
+exports.SearchBar = (0, react_1.forwardRef)(({ disabled, className, inputClassName, size, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+    const [clearable, setClearable] = (0, react_1.useState)(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const handleShowClearButton = (inputValue) => {
+        if (inputValue && !clearable) {
+            setClearable(true);
+        }
+        if (!inputValue && clearable) {
+            setClearable(false);
+        }
+    };
+    const onChangeFactory = (event) => {
+        handleShowClearButton(event.target.value);
+        onChange?.(event);
+    };
+    const onFocusFactory = (event) => {
+        handleShowClearButton(event.target.value);
+        onFocus?.(event);
+    };
+    const handleClear = () => {
+        const inputTarget = rootRef.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        onClickClear?.(inputTarget.value);
+        inputTarget.value = "";
+        inputTarget.focus();
+        setClearable(false);
+    };
+    (0, react_1.useEffect)(() => {
+        handleShowClearButton(defaultValue || value);
+    }, [value, defaultValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className), ref: rootRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 shrink-0 text-gray-500 duration-200 ", children: (0, jsx_runtime_1.jsx)(solid_1.MagnifyingGlassIcon, { className: "w-4 h-4 text-gray-500" }) }), (0, jsx_runtime_1.jsx)("input", { disabled: disabled, type: type, ref: ref, className: (0, utils_1.cn)("mobase-text-input-box text-gray-900 h-10 bg-white w-full transition-all text-sm rounded-md border border-gray-400  placeholder:text-gray-500 px-9  focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block disabled:opacity-50", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), clearable && ((0, jsx_runtime_1.jsx)("button", { "aria-label": "button", type: "button", className: "absolute right-3 top-1/2 -translate-y-1/2 shrink-0 cursor-pointer text-gray-500 duration-200 hover:opacity-70 disabled:pointer-events-none", disabled: disabled, onClick: handleClear, children: (0, jsx_runtime_1.jsx)(outline_1.XCircleIcon, { strokeWidth: 2, width: 20, height: 20 }) }))] }), (0, jsx_runtime_1.jsx)("style", { children: `
+            .mobase-text-input-box:hover {
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
+            }
+            .mobase-text-input-box:focus {
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
+            }
+          ` })] }));
+});

package/publish/cjs/components/SearchBar/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = void 0;
+var SearchBar_1 = require("./SearchBar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });

package/publish/cjs/components/TextButton/TextButton.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textButtonVariants = exports.TextButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const class_variance_authority_1 = require("class-variance-authority");
+const utils_1 = require("../../helpers/utils");
+// /dwd
+const textButtonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed border border-transparent flex-nowrap", {
+    variants: {
+        /**
+         * Determines style variation of Button component.
+         */
+        variant: {
+            default: "text-blue-700 hover:underline hover:bg-blue-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+            primary: "text-pink-500 hover:underline hover:bg-pink-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+            secondary: "text-gray-700 hover:underline hover:text-blue-700 hover:bg-blue-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+        },
+        /**
+         * Determines size variation of Button component.
+         */
+        size: {
+            default: "text-sm",
+            lg: "text-base",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+exports.textButtonVariants = textButtonVariants;
+const TextButton = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, isDisabled = false, ...props }, ref) => {
+    const Comp = asChild ? react_slot_1.Slot : "button";
+    const buttonClassName = (0, utils_1.cn)(textButtonVariants({ variant, size, className }));
+    return ((0, jsx_runtime_1.jsx)(Comp, { className: buttonClassName, disabled: isDisabled, ref: ref, ...props, children: props.children }));
+});
+exports.TextButton = TextButton;
+TextButton.displayName = "TextButton";

package/publish/cjs/components/TextButton/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextButton = void 0;
+var TextButton_1 = require("./TextButton");
+Object.defineProperty(exports, "TextButton", { enumerable: true, get: function () { return TextButton_1.TextButton; } });

package/publish/cjs/components/Toast/Toast.js

@@ -28,36 +28,37 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const ToastPrimitives = __importStar(require("@radix-ui/react-toast"));
 const class_variance_authority_1 = require("class-variance-authority");
-const lucide_react_1 = require("lucide-react");
 const utils_1 = require("../../helpers/utils");
+const solid_1 = require("@heroicons/react/20/solid");
 const ToastProvider = ToastPrimitives.Provider;
 exports.ToastProvider = ToastProvider;
-const ToastViewport = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Viewport, { ref: ref, className: (0, utils_1.cn)("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className), ...props })));
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Viewport, { ref: ref, className: (0, utils_1.cn)("fixed bottom-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 left-0 sm:right-0 sm:left-auto sm:top-0 sm:bottom-auto sm:flex-col md:max-w-[420px]", className), ...props })));
 exports.ToastViewport = ToastViewport;
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-const toastVariants = (0, class_variance_authority_1.cva)("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
+const toastVariants = (0, class_variance_authority_1.cva)("group pointer-events-auto relative w-full overflow-hidden rounded-md border py-4 pr-10 pl-10 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full bg-white text-gray-900 border border-gray-200 border-l-4", {
     variants: {
         variant: {
-            default: "border bg-background text-foreground",
-            destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+            sucess: "border-l-green-500",
+            warning: "border-l-yellow-500",
+            error: "border-l-red-500",
         },
     },
     defaultVariants: {
-        variant: "default",
+        variant: "sucess",
     },
 });
-const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(ToastPrimitives.Root, { ref: ref, className: (0, utils_1.cn)(toastVariants({ variant }), className), ...props }));
+const Toast = React.forwardRef(({ className, variant = "sucess", children, ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)(ToastPrimitives.Root, { ref: ref, className: (0, utils_1.cn)(toastVariants({ variant }), className), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-5 h-5 flex items-center justify-center absolute top-4 left-3", children: [variant === "sucess" && ((0, jsx_runtime_1.jsx)(solid_1.CheckCircleIcon, { className: "w-5 h-5 text-green-500" })), variant === "warning" && ((0, jsx_runtime_1.jsx)(solid_1.ExclamationTriangleIcon, { className: "w-5 h-5 text-yellow-500" })), variant === "error" && ((0, jsx_runtime_1.jsx)(solid_1.InformationCircleIcon, { className: "w-5 h-5 text-red-500" }))] }), children] }));
 });
 exports.Toast = Toast;
 Toast.displayName = ToastPrimitives.Root.displayName;
-const ToastAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Action, { ref: ref, className: (0, utils_1.cn)("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className), ...props })));
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Action, { ref: ref, className: (0, utils_1.cn)("inline-flex shrink-0 items-center justify-center bg-transparent text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-0 focus:ring-ring focus:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-blue-600 hover:underline mt-2", className), ...props })));
 exports.ToastAction = ToastAction;
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-const ToastClose = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Close, { ref: ref, className: (0, utils_1.cn)("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "", ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })));
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Close, { ref: ref, className: (0, utils_1.cn)("absolute right-2 top-2 rounded-md  transition-opacity hover:opacity-70 focus:opacity-100 focus:outline-none focus:ring-2 text-gray-800 w-8 h-8 flex items-center justify-center", className), "toast-close": "", ...props, children: (0, jsx_runtime_1.jsx)(solid_1.XMarkIcon, { className: "h-5 w-5" }) })));
 exports.ToastClose = ToastClose;
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-const ToastTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Title, { ref: ref, className: (0, utils_1.cn)("text-sm font-semibold", className), ...props })));
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Title, { ref: ref, className: (0, utils_1.cn)("text-base font-semibold leading-tight", className), ...props })));
 exports.ToastTitle = ToastTitle;
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(ToastPrimitives.Description, { ref: ref, className: (0, utils_1.cn)("text-sm opacity-90", className), ...props })));

package/publish/cjs/components/Toast/index.js

@@ -1,16 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toaster = exports.toast = exports.useToast = exports.ToastAction = exports.ToastClose = exports.ToastDescription = exports.ToastTitle = exports.Toast = exports.ToastViewport = exports.ToastProvider = void 0;
-var Toast_1 = require("./Toast");
-Object.defineProperty(exports, "ToastProvider", { enumerable: true, get: function () { return Toast_1.ToastProvider; } });
-Object.defineProperty(exports, "ToastViewport", { enumerable: true, get: function () { return Toast_1.ToastViewport; } });
-Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return Toast_1.Toast; } });
-Object.defineProperty(exports, "ToastTitle", { enumerable: true, get: function () { return Toast_1.ToastTitle; } });
-Object.defineProperty(exports, "ToastDescription", { enumerable: true, get: function () { return Toast_1.ToastDescription; } });
-Object.defineProperty(exports, "ToastClose", { enumerable: true, get: function () { return Toast_1.ToastClose; } });
-Object.defineProperty(exports, "ToastAction", { enumerable: true, get: function () { return Toast_1.ToastAction; } });
-var use_toast_1 = require("./use-toast");
-Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return use_toast_1.useToast; } });
-Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return use_toast_1.toast; } });
+exports.Toaster = exports.toast = exports.useToast = void 0;
+var useToast_1 = require("./useToast");
+Object.defineProperty(exports, "useToast", { enumerable: true, get: function () { return useToast_1.useToast; } });
+Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return useToast_1.toast; } });
 var toaster_1 = require("./toaster");
 Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return toaster_1.Toaster; } });

package/publish/cjs/components/Toast/toaster.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toaster = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Toast_1 = require("../..//components/Toast/Toast");
-const use_toast_1 = require("../../components/Toast/use-toast");
+const Toast_1 = require("./Toast");
+const useToast_1 = require("./useToast");
 function Toaster() {
-    const { toasts } = (0, use_toast_1.useToast)();
+    const { toasts } = (0, useToast_1.useToast)();
     return ((0, jsx_runtime_1.jsxs)(Toast_1.ToastProvider, { children: [toasts.map(function ({ id, title, description, action, ...props }) {
-                return ((0, jsx_runtime_1.jsxs)(Toast_1.Toast, { ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid gap-1", children: [title && (0, jsx_runtime_1.jsx)(Toast_1.ToastTitle, { children: title }), description && ((0, jsx_runtime_1.jsx)(Toast_1.ToastDescription, { children: description }))] }), action, (0, jsx_runtime_1.jsx)(Toast_1.ToastClose, {})] }, id));
+                return ((0, jsx_runtime_1.jsxs)(Toast_1.Toast, { ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid gap-2", children: [title && (0, jsx_runtime_1.jsx)(Toast_1.ToastTitle, { children: title }), description && ((0, jsx_runtime_1.jsx)(Toast_1.ToastDescription, { children: description }))] }), action, (0, jsx_runtime_1.jsx)(Toast_1.ToastClose, {})] }, id));
             }), (0, jsx_runtime_1.jsx)(Toast_1.ToastViewport, {})] }));
 }
 exports.Toaster = Toaster;

package/publish/cjs/components/Toast/{use-toast.js → useToast.js}

@@ -48,7 +48,7 @@ const addToRemoveQueue = (toastId) => {
         toastTimeouts.delete(toastId);
         dispatch({
             type: "REMOVE_TOAST",
-            toastId: toastId,
+            toastId,
         });
     }, TOAST_REMOVE_DELAY);
     toastTimeouts.set(toastId, timeout);
@@ -98,6 +98,8 @@ const reducer = (state, action) => {
                 ...state,
                 toasts: state.toasts.filter((t) => t.id !== action.toastId),
             };
+        default:
+            return state;
     }
 };
 exports.reducer = reducer;
@@ -129,7 +131,7 @@ function toast({ ...props }) {
         },
     });
     return {
-        id: id,
+        id,
         dismiss,
         update,
     };

package/publish/cjs/index.js

@@ -19,12 +19,15 @@ __exportStar(require("./components/Breadcrumb"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/Checkbox"), exports);
 __exportStar(require("./components/Dialog"), exports);
+__exportStar(require("./components/DialogQr"), exports);
 __exportStar(require("./components/AlertDialog"), exports);
 __exportStar(require("./components/IconButton"), exports);
 __exportStar(require("./components/Pagination"), exports);
 __exportStar(require("./components/Popover"), exports);
 __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/TextArea"), exports);
+__exportStar(require("./components/Toast"), exports);
+__exportStar(require("./components/TextButton"), exports);
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/TextInput"), exports);
 __exportStar(require("./components/Stepper"), exports);
@@ -37,5 +40,7 @@ __exportStar(require("./components/Footer"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Command"), exports);
 __exportStar(require("./components/Combobox"), exports);
+__exportStar(require("./components/Callout"), exports);
+__exportStar(require("./components/SearchBar"), exports);
 __exportStar(require("./mobase-tw-plugin"), exports);
 __exportStar(require("./site"), exports);