@momo-webplatform/mobase 0.0.40 → 0.0.41

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,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "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",

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/index.js

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