@momo-webplatform/mobase 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "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/Select/Select.js

@@ -33,13 +33,13 @@ const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
 const utils_1 = require("../../helpers/utils");
 const Select = React.forwardRef(({ className, children, label, message, size, isError, disabled, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("select-mobase relative", className, disabled ? "disabled" : "", isError
         ? "[&>.select-mobase-button]:border-red-500 [&>.select-mobase-button]:ring-red-500 [&>.select-mobase-button]:ring-1"
-        : "", size === "lg"
+        : "", size === 2
         ? "[&>.select-mobase-button]:text-base [&>.select-mobase-button]:h-12"
-        : ""), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-select-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500 z-[1]", size === "lg" && "text-sm -top-2.5", disabled && "text-gray-400", isError && "text-red-500"), children: label })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mobase-select-message flex space-x-1 items-center mt-1 text-gray-500", disabled && "text-gray-400", isError && "text-red-500"), children: [isError ? ((0, jsx_runtime_1.jsx)(solid_2.XCircleIcon, { width: 16, height: 16 })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16 })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(size === "lg" ? "text-sm" : "text-xs"), children: message })] }))] })));
+        : ""), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-select-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500 z-[1]", size === 2 && "text-sm -top-2.5", isError && "text-red-500"), children: label })), (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("mobase-select-message flex space-x-1 items-center mt-1 text-gray-500", isError && "text-red-500"), children: [isError ? ((0, jsx_runtime_1.jsx)(solid_2.XCircleIcon, { width: 16, height: 16 })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16 })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)(size === 2 ? "text-sm" : "text-xs"), children: message })] }))] })));
 exports.Select = Select;
 const SelectValue = SelectPrimitive.Value;
 exports.SelectValue = SelectValue;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("select-mobase-button bg-white w-full ring-0 transition-all focus-visible:border-pink-500 focus-visible:ring-offset-0 focus-visible:ring-offset-transparent focus-visible:ring-1 focus-visible:!ring-pink-500 rounded border border-gray-400 data-[placeholder]:text-gray-500 p-3 disabled:bg-gray-50 disabled:border-gray-300 disabled:text-gray-500 disabled:pointer-events-none flex items-center justify-between data-[state=open]:border-pink-500 data-[state=open]:ring-1 hover:ring-1 hover:ring-gray-400 data-[state=open]:ring-pink-500 text-gray-900 h-11 ring-inset text-sm", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "line-clamp-1 text-left", children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { ref: ref, className: (0, utils_1.cn)("select-mobase-button bg-white w-full ring-0 transition-all focus-visible:border-pink-500 focus-visible:ring-offset-0 focus-visible:ring-offset-transparent focus-visible:ring-1 focus-visible:!ring-pink-500 rounded-md border border-gray-400 data-[placeholder]:text-gray-500 p-3 disabled:bg-gray-50 disabled:border-gray-300  disabled:pointer-events-none flex items-center justify-between data-[state=open]:border-pink-500 data-[state=open]:ring-1 hover:ring-1 hover:ring-gray-400 data-[state=open]:ring-pink-500 text-gray-900 h-11 ring-inset text-sm", className), ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "line-clamp-1 text-left", children: children }), (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" }) })] })));
 exports.SelectTrigger = SelectTrigger;
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { ref: ref, className: (0, utils_1.cn)("flex cursor-default items-center justify-center py-1", className), ...props, children: (0, jsx_runtime_1.jsx)(solid_1.ChevronUpIcon, { className: "h-5 w-5" }) })));

package/publish/cjs/components/TextArea/TextArea.js

@@ -6,8 +6,8 @@ const react_1 = require("react");
 const outline_1 = require("@heroicons/react/24/outline");
 const solid_1 = require("@heroicons/react/24/solid");
 const utils_1 = require("../../helpers/utils");
-exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, rows = 3, ...restProps }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative", className, isError && "mobase-text-area-error"), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-area-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)("textarea", { disabled: disabled, ref: ref, className: (0, utils_1.cn)("mobase-text-area-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 outline-none block", inputClassName), rows: rows, ...restProps }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-area-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 text-sm", children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
+exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, size, rows = 3, ...restProps }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("relative", className, isError && "mobase-text-area-error"), children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-area-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm text-gray-500", size === 2 && " -top-2.5 text-sm"), children: label })), (0, jsx_runtime_1.jsx)("textarea", { disabled: disabled, ref: ref, className: (0, utils_1.cn)("mobase-text-area-box bg-white w-full text-sm transition-all rounded-md border border-gray-400  placeholder:text-gray-500 p-3 text-gray-900 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 outline-none block", size === 2 && "text-base", inputClassName), rows: rows, ...restProps }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-area-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("text-gray-500 ", size === 2 ? "text-sm" : "text-xs"), children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
             .mobase-text-area-box:hover {
               box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }

package/publish/cjs/components/TextInput/TextInput.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const outline_1 = require("@heroicons/react/24/outline");
 const solid_1 = require("@heroicons/react/24/solid");
 const utils_1 = require("../../helpers/utils");
-exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, withClearButton, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label, className, inputClassName, withClearButton, 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) => {
@@ -39,7 +39,7 @@ exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label
     (0, react_1.useEffect)(() => {
         handleShowClearButton(defaultValue || value);
     }, [value, defaultValue]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className, isError && "mobase-text-input-error"), ref: rootRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-input-label absolute bg-white -top-2.5 px-1.5 left-2 text-sm", disabled ? "text-gray-400" : "text-gray-500"), children: label })), (0, jsx_runtime_1.jsx)("input", { disabled: disabled, type: type, ref: ref, className: (0, utils_1.cn)("mobase-text-input-box bg-white w-full transition-all rounded border border-gray-400 placeholder:text-base placeholder:text-gray-500 p-3 text-gray-900 h-12 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), withClearButton && 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 }) }))] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-500 text-sm", children: message })] })), (0, jsx_runtime_1.jsx)("style", { children: `
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(className, isError && "mobase-text-input-error"), ref: rootRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [label && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("mobase-text-input-label absolute bg-white -top-2 px-1.5 left-2 text-xs text-gray-500", size === 2 && " -top-2.5 text-sm"), children: label })), (0, jsx_runtime_1.jsx)("input", { disabled: disabled, type: type, ref: ref, className: (0, utils_1.cn)("mobase-text-input-box bg-white w-full transition-all text-sm rounded-md border border-gray-400  placeholder:text-gray-500 p-3 text-gray-900 h-11 focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block", size === 2 && "h-12 text-base", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), withClearButton && 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 }) }))] }), message && ((0, jsx_runtime_1.jsxs)("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? ((0, jsx_runtime_1.jsx)(solid_1.XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : ((0, jsx_runtime_1.jsx)(outline_1.QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)("text-gray-500 ", size === 2 ? "text-sm" : "text-xs"), children: message })] })), (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;
             }

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

@@ -6,6 +6,7 @@ exports.animations = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "spin-loading": "spin 1s steps(12, end) infinite",
+        "fade-in": "fade-in 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both",
     },
     keyframes: {
         "accordion-down": {
@@ -16,5 +17,9 @@ exports.animations = {
             from: { height: "var(--radix-accordion-content-height)" },
             to: { height: "0" },
         },
+        "fade-in": {
+            "0%": { opacity: "0" },
+            "100%": { opacity: "1" },
+        },
     },
 };

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

@@ -185,15 +185,6 @@ const mobaseTW = () => {
                     ...(0, theme_1.createSpacingUnits)(prefix),
                 },
                 ...animations_1.animations,
-                keyframes: {
-                    'fade-in': {
-                        '0%': { opacity: "0" },
-                        '100%': { opacity: "1" },
-                    },
-                },
-                animation: {
-                    'fade-in': 'fade-in 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both',
-                },
             },
         },
     });