@momo-webplatform/mobase 0.0.40 → 0.0.42

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://momo.vn/">
-      <img width="100%" src="https://homepage.momocdn.net/img/momo-upload-api-240307154531-638454231312111578.jpeg" alt="Mobase UI library" />
+      <img width="100%" src="https://homepage.momocdn.net/img/momo-upload-api-240509152105-638508648658180278.jpg" alt="Mobase UI library" />
   </a>
 </p>
 

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "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",
-    "build": "next build",
+    "dev": "rm -rf .next && next dev",
+    "build": "rm -rf .next && next build",
     "start": "next start",
     "build:lib": "rm -rf ./publish/ && yarn build:lib:esm && yarn build:lib:cjs",
     "build:lib:cjs": "tsc -p tsconfig.lib.json",
@@ -69,6 +69,7 @@
     "date-fns": "^3.2.0",
     "deepmerge": "^4.3.1",
     "dlv": "^1.1.3",
+    "embla-carousel-react": "^8.0.4",
     "flat": "^3.0.1",
     "framer-motion": "^11.0.24",
     "html-react-parser": "^5.1.10",
@@ -88,6 +89,7 @@
     "react-icons": "^4.11.0",
     "react-indiana-drag-scroll": "^2.2.0",
     "react-use": "^17.5.0",
+    "swiper": "^8.4.4",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",

package/publish/cjs/components/Accordion/Accordion.js

@@ -36,7 +36,7 @@ Accordion.displayName = "AccordionRoot";
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Item, { ref: ref, className: (0, utils_1.cn)("border-b border-gray-200", className), ...props })));
 exports.AccordionItem = AccordionItem;
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "flex", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("flex flex-1 items-center text-left justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 text-gray-900", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 ml-1" })] }) })));
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "flex", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("flex flex-1 items-center text-left justify-between py-4 font-medium transition-all hover:underline hover:text-pink-600 [&[data-state=open]]:text-pink-600 [&[data-state=open]>svg]:rotate-180 text-gray-900", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200 ml-1" })] }) })));
 exports.AccordionTrigger = AccordionTrigger;
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down text-left ", ...props, children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("pb-4 pt-0 text-gray-900 prose-sm", className), children: children }) })));

package/publish/cjs/components/Choicebox/Choicebox.js

@@ -0,0 +1,90 @@
+"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.ChoiceboxGroup = exports.ChoiceboxGroupItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const Checkbox_1 = require("../Checkbox");
+const utils_1 = require("../../helpers/utils");
+const lucide_react_1 = require("lucide-react");
+const ChoiceboxGroupItem = ({ title, description, value, type, name, checked, disabled, hiddenInput, classNameDescription, classNameTitle, className, onChange, children, }) => {
+    const [checkedCheckbox, setCheckedCheckbox] = (0, react_1.useState)(false);
+    const handleChange = (event) => {
+        if (onChange) {
+            onChange(event?.target?.value);
+        }
+    };
+    const handleChangeCheckbox = (checked) => {
+        setCheckedCheckbox(checked);
+        onChange?.(checked);
+    };
+    return ((0, jsx_runtime_1.jsxs)("label", { className: (0, utils_1.cn)(" flex rounded-md cursor-pointer p-4 items-center space-x-6", checked || checkedCheckbox ? "mobase-focus" : "mobase-visible", disabled ? "opacity-60 bg-gray-100" : "", className), htmlFor: value, children: [!title && !description ? null : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-gray-900 text-sm select-none font-bold", classNameTitle), children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("text-gray-900 select-none text-sm", classNameDescription), children: description })] })), children, type === "radio" ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative", hiddenInput ? "hidden" : ""), children: [(0, jsx_runtime_1.jsx)("input", { "aria-checked": checked, "data-state": checked ? "checked" : "unchecked", checked: checked, type: "radio", value: value, name: name, id: value, disabled: disabled, onChange: handleChange, className: "custom-radio cursor-pointer aspect-square ml-auto h-4 w-4 rounded-full border border-gray-700 disabled:bg-gray-300 disabled:data-[state=checked]:text-gray-500 data-[state=checked]:text-white disabled:data-[state=checked]:bg-gray-300 data-[state=checked]:bg-pink-500 disabled:border-none data-[state=checked]:border-none text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-40" }), (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: (0, utils_1.cn)("h-2 w-2 absolute top-[6px] right-[4px] fill-white text-current transition-opacity", checked ? "opacti-100" : "opacity-0", disabled ? "fill-gray-300" : "") })] })) : ((0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: disabled, id: value, value: value, name: value, onCheckedChange: handleChangeCheckbox, className: (0, utils_1.cn)("ml-auto", hiddenInput ? "hidden" : "") })), (0, jsx_runtime_1.jsx)("style", { children: `
+          .custom-radio {
+            appearance: none;
+            border: 1px solid #ccc;
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            position: relative;
+          }
+          .mobase-visible {
+            box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
+          }
+          
+          .mobase-focus {
+            box-shadow: 0px 0px 0px 2px rgb(var(--mobase-pink-500) / 1) inset;
+        }
+        ` })] }));
+};
+exports.ChoiceboxGroupItem = ChoiceboxGroupItem;
+const ChoiceboxGroup = ({ direction = "row", label, type, value, children, disabled, hiddenInput, onChange, className, ...props }) => {
+    const name = `choicebox-group-${label?.replace(/\s+/g, "-").toLowerCase()}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, children: [(0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsx)("ul", { className: (0, utils_1.cn)("", className, direction
+                    ? "flex md:flex-row md:space-y-0 md:space-x-4 flex-col space-y-4"
+                    : "block"), children: react_1.default.Children?.map(children, (child) => {
+                    if (react_1.default.isValidElement(child)) {
+                        const updatedProps = {
+                            disabled: child.props.disabled ?? disabled,
+                            type,
+                            name,
+                            checked: child.props.value === value,
+                            hiddenInput,
+                            className: child.props.className,
+                            classNameTitle: child.props.classNameTitle,
+                            classNameDescription: child.props.classNameDescription,
+                            onChange,
+                        };
+                        const knownProps = Object.keys(updatedProps).reduce((acc, key) => {
+                            if (updatedProps[key] !== undefined) {
+                                acc[key] = updatedProps[key];
+                            }
+                            return acc;
+                        }, {});
+                        return react_1.default.cloneElement(child, knownProps);
+                    }
+                    return null;
+                }) })] }));
+};
+exports.ChoiceboxGroup = ChoiceboxGroup;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChoiceboxGroupItem = exports.ChoiceboxGroup = void 0;
+var Choicebox_1 = require("./Choicebox");
+Object.defineProperty(exports, "ChoiceboxGroup", { enumerable: true, get: function () { return Choicebox_1.ChoiceboxGroup; } });
+Object.defineProperty(exports, "ChoiceboxGroupItem", { enumerable: true, get: function () { return Choicebox_1.ChoiceboxGroupItem; } });

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

@@ -42,11 +42,11 @@ exports.DialogOverlay = DialogOverlay;
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 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",
+        base: "fixed z-50 flex  bg-white shadow-lg sm:rounded-xl 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-xl",
+        bottom: "!duration-300 bottom-0 sm:bottom-1/2 left-1/2 rounded-t-xl 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-xl 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-xl 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",
@@ -66,10 +66,10 @@ const DialogContent = React.forwardRef(({ className, isRightCloseButton, size =
         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)]",
+            "h-full max-h-screen max-w-full w-full rounded-none sm:rounded-xl 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" })] })] })] }));
+    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-700" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] }));
 });
 exports.DialogContent = DialogContent;
 DialogContent.displayName = DialogPrimitive.Content.displayName;

package/publish/cjs/components/LightboxGallery/LightboxGallery.js

@@ -0,0 +1,203 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightboxGallery = exports.LightBoxContent = exports.DialogContent = exports.LightboxThumbnail = exports.LightboxGalleryDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("swiper/react");
+const swiper_1 = require("swiper");
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const react_2 = __importStar(require("react"));
+require("swiper/css");
+require("swiper/css/navigation");
+require("swiper/css/pagination");
+const IconButton_1 = require("../IconButton");
+const utils_1 = require("../../helpers/utils");
+const lucide_react_1 = require("lucide-react");
+const outline_1 = require("@heroicons/react/24/outline");
+const lodash_1 = __importDefault(require("lodash"));
+exports.LightboxGalleryDialog = DialogPrimitive.Root;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogOverlay = react_2.default.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/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const CloseDialog = ({ clearActiveIndex }) => {
+    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Close, { onClick: () => clearActiveIndex?.(), className: "flex transition-all z-10 text-sm items-center space-x-1 absolute left-3 top-6 md:left-6 hover:bg-white/20 text-white rounded-md px-4 py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4 mt-0.5" }), (0, jsx_runtime_1.jsx)("div", { className: "", children: "\u0110\u00F3ng c\u1EEDa s\u1ED5" })] }));
+};
+const LightboxThumbnail = ({ children, src, alt, className, classNameImage, onClick, }) => {
+    const handleOnClickThumbnail = () => {
+        onClick?.();
+    };
+    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Trigger, { className: (0, utils_1.cn)("aspect-[2/3] relative overflow-hidden rounded-lg", className), onClick: handleOnClickThumbnail, children: [children, (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: (0, utils_1.cn)("w-full h-full object-cover rounded-lg", classNameImage) })] }));
+};
+exports.LightboxThumbnail = LightboxThumbnail;
+exports.DialogContent = react_2.default.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(DialogPortal, { children: [(0, jsx_runtime_1.jsx)(DialogOverlay, { className: "bg-black" }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { ref: ref, className: (0, utils_1.cn)("h-full min-w-full border-none rounded-none fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg 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%] ", className), ...props, children: [children, (0, jsx_runtime_1.jsx)(CloseDialog, {})] })] })));
+exports.DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props }));
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = react_2.default.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { ref: ref, className: (0, utils_1.cn)("text-lg font-semibold leading-none tracking-tight", className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = react_2.default.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 })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+const LightBoxContent = ({ images, activeSlideIndex = 0, withSideBar, subHtmlSideBar, classNameSubHtmSideBar, className, }) => {
+    const [activeSlide, setActiveSlide] = (0, react_2.useState)(activeSlideIndex);
+    const [titleImage, setTitleImg] = (0, react_2.useState)("");
+    const onGetTitleImage = () => {
+        const result = lodash_1.default.filter(images, (_, idx) => idx === activeSlideIndex);
+        const titleImgDraf = result.length > 0 ? result[0]?.titleImage : "";
+        setTitleImg(titleImgDraf);
+    };
+    (0, react_2.useEffect)(() => {
+        setActiveSlide(activeSlideIndex);
+        onGetTitleImage();
+    }, [activeSlideIndex]);
+    const pagination = {
+        clickable: true,
+        renderBullet(index, className) {
+            const classNameParent = (0, utils_1.cn)("aspect-[1/1] min-w-[96px] mt-40 min-h-[76px] !rounded-lg overflow-hidden", className);
+            const classNameImage = (0, utils_1.cn)("w-full h-full object-cover rounded-lg");
+            if (!images[index]?.url) {
+                return "<div></div>";
+            }
+            return `
+        <div class="${classNameParent} ">
+          <img class="${classNameImage} " src="${images[index]?.url}" alt="Slide ${index + 1}" />
+        </div>
+      `;
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)(exports.DialogContent, { className: (0, utils_1.cn)("flex py-0", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "lightbox flex-1 py-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-end md:justify-center mt-2 w-full", children: (0, jsx_runtime_1.jsxs)("div", { children: [activeSlide ? activeSlide + 1 : 1, " / ", images?.length] }) }), (0, jsx_runtime_1.jsxs)(react_1.Swiper, { initialSlide: activeSlideIndex, onSlideChange: ({ realIndex }) => {
+                            setActiveSlide(realIndex);
+                            onGetTitleImage();
+                            const activeBullet = document.querySelector(".swiper-pagination-bullet-active");
+                            if (activeBullet) {
+                                activeBullet.scrollIntoView({
+                                    behavior: "smooth",
+                                    block: "nearest",
+                                });
+                            }
+                        }, onDestroy: () => {
+                            setActiveSlide(activeSlideIndex);
+                            onGetTitleImage();
+                        }, slidesPerView: "auto", className: "swiper lightboxSwiper", navigation: {
+                            nextEl: ".lightbox .next-lightbox",
+                            prevEl: ".lightbox .prev-lightbox",
+                        }, pagination: pagination, modules: [swiper_1.Navigation, swiper_1.Lazy, swiper_1.Pagination], lazy: {
+                            loadPrevNext: true,
+                        }, children: [images.map((img, index) => ((0, jsx_runtime_1.jsxs)(react_1.SwiperSlide, { children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-28 bottom-28 left-0 right-0 min-h-0 sm:left-20 sm:right-20", children: (0, jsx_runtime_1.jsx)("img", { src: img.url, alt: "", className: "absolute h-full w-full object-contain", loading: "lazy" }) }), (0, jsx_runtime_1.jsx)("div", { className: "swiper-lazy-preloader swiper-lazy-preloader-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm px-20 text-center text-white/80 absolute bottom-10 my-4 flex items-center justify-center w-full z-[999]", children: titleImage })] }, index))), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "disabled:bg-white/60 prev-lightbox button-swiper translate swiper-cate-merchant absolute inset-y-1/2 left-6 z-10 hidden h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-white shadow-md duration-200 ease-in-out hover:bg-white/80 hover:shadow-md md:flex", children: (0, jsx_runtime_1.jsx)(outline_1.ChevronLeftIcon, { className: "w-7 text-slate-900" }) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "disabled:bg-white/60 next-lightbox translate swiper-cate-merchant button-swiper absolute inset-y-1/2 right-6 z-10 hidden h-12 w-12 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white text-white shadow-md duration-300 ease-in-out hover:bg-white/80 hover:shadow-md md:flex", children: (0, jsx_runtime_1.jsx)(outline_1.ChevronRightIcon, { className: "w-7 text-slate-900" }) })] }), (0, jsx_runtime_1.jsx)("style", { children: `
+          .lightbox {
+            --lightbox-topnav: 112px;
+            --lightbox-botnav: 80px;
+          }
+
+          @media (max-width: 639px) {
+            .lightbox {
+              --lightbox-topnav: 60px;
+              --lightbox-botnav: 80px;
+            }
+            .lightbox .swiper-button-prev {
+              display: none;
+            }
+
+            .lightbox .swiper-button-next {
+              display: none;
+            }
+            .swiper-pagination{
+              justify-content: start !important;
+            }
+          }
+
+          .lightbox-content {
+            top: var(--lightbox-topnav) !important;
+            height: calc(100% - var(--lightbox-topnav)) !important;
+            width: 100% !important;
+          }
+          .lightboxSwiper {
+            width: 100%;
+            height: 95%;
+            padding: 0;
+          }
+
+          .lightboxSwiper .swiper-slide {
+            text-align: center;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: -webkit-flex;
+            display: flex;
+            -webkit-box-pack: center;
+            -ms-flex-pack: center;
+            -webkit-justify-content: center;
+            justify-content: center;
+            -webkit-box-align: center;
+            -ms-flex-align: center;
+            -webkit-align-items: center;
+            align-items: center;
+          }
+
+          .lightboxSwiper.swiper-slide img {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
+          .swiper-wrapper{
+            bottom: 90px;
+          }
+          .swiper-pagination{
+            max-width: 100%;
+            width: 100%;
+            overflow-x: auto;
+            display: flex;
+            justify-content: center;
+          }
+
+          .swiper-pagination-bullet{
+            background: unset;
+            opacity: 1;
+          }
+          .swiper-pagination-bullet-active{
+            border: 2px solid white;
+          }
+        ` })] }), withSideBar && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("hidden md:flex overflow-y-auto bg-white text-gray-900  px-6 pb-4 pt-2 w-full  max-w-sm lg:max-w-md", classNameSubHtmSideBar), children: subHtmlSideBar }))] }));
+};
+exports.LightBoxContent = LightBoxContent;
+const LightboxGallery = ({ children, className, open, onOpenChange, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("lightbox-gallery ", className), children: (0, jsx_runtime_1.jsx)(exports.LightboxGalleryDialog, { open: open, onOpenChange: onOpenChange, children: react_2.default.Children?.map(children, (child) => {
+                if (react_2.default.isValidElement(child)) {
+                    const updatedProps = {};
+                    const knownProps = Object.keys(updatedProps).reduce((acc, key) => {
+                        if (updatedProps[key] !== undefined) {
+                            acc[key] = updatedProps[key];
+                        }
+                        return acc;
+                    }, {});
+                    return react_2.default.cloneElement(child, knownProps);
+                }
+                return null;
+            }) }) }));
+};
+exports.LightboxGallery = LightboxGallery;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LightBoxContent = exports.LightboxThumbnail = exports.LightboxGallery = void 0;
+var LightboxGallery_1 = require("./LightboxGallery");
+Object.defineProperty(exports, "LightboxGallery", { enumerable: true, get: function () { return LightboxGallery_1.LightboxGallery; } });
+Object.defineProperty(exports, "LightboxThumbnail", { enumerable: true, get: function () { return LightboxGallery_1.LightboxThumbnail; } });
+Object.defineProperty(exports, "LightBoxContent", { enumerable: true, get: function () { return LightboxGallery_1.LightBoxContent; } });

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

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

package/publish/cjs/index.js

@@ -42,5 +42,7 @@ __exportStar(require("./components/Command"), exports);
 __exportStar(require("./components/Combobox"), exports);
 __exportStar(require("./components/Callout"), exports);
 __exportStar(require("./components/SearchBar"), exports);
+__exportStar(require("./components/LightboxGallery"), exports);
+__exportStar(require("./components/Choicebox"), exports);
 __exportStar(require("./mobase-tw-plugin"), exports);
 __exportStar(require("./site"), exports);

package/publish/cjs/mobase-tw-plugin/plugin.js

@@ -189,10 +189,10 @@ const mobaseTW = () => {
                 fontSize: {
                     ...(0, font_sizes_1.fontSizes)(prefix),
                 },
-                spacing: {
-                    unit: `var(--${prefix}-spacing-unit)`,
-                    ...(0, theme_1.createSpacingUnits)(prefix),
-                },
+                // spacing: {
+                //   unit: `var(--${prefix}-spacing-unit)`,
+                //   ...createSpacingUnits(prefix),
+                // },
                 ...animations_1.animations,
             },
         },