@momo-webplatform/mobase 0.0.37 → 0.0.38

package/package.json

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

@@ -12,7 +12,7 @@ exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label,
               box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }
 
-            .mobase-text-area-box:focus {
+            .mobase-text-area-box:focus, .mobase-text-area-box:focus-visible {
               box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
             }
 

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

@@ -3,8 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const outline_1 = require("@heroicons/react/24/outline");
-const solid_1 = require("@heroicons/react/24/solid");
+const solid_1 = require("@heroicons/react/16/solid");
 const utils_1 = require("../../helpers/utils");
 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);
@@ -39,12 +38,12 @@ 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 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: `
+    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 outline-none", 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)(solid_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)(solid_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;
             }
 
-            .mobase-text-input-box:focus {
+            .mobase-text-input-box:focus , .mobase-text-input-box:focus-visible {
                 box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
             }
 

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

@@ -165,6 +165,7 @@ const mobaseTW = () => {
                 colors: {
                     ...colors_1.colors,
                     ...resolved?.colors,
+                    border: "rgba(var(--border))",
                 },
                 boxShadow: {
                     small: `var(--${prefix}-box-shadow-small)`,

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

@@ -19,4 +19,7 @@ exports.default = {
     ".tap-highlight-transparent": {
         "-webkit-tap-highlight-color": "transparent",
     },
+    "*": {
+        "border-color": "rgb(var(--mobase-gray-300))",
+    },
 };