@momo-webplatform/mobase 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-webplatform/mobase",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "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",
@@ -62,16 +62,22 @@
     "@radix-ui/react-use-previous": "^1.0.1",
     "@radix-ui/react-use-size": "^1.0.1",
     "@storybook/addon-styling": "^1.3.7",
+    "@types/color": "^3.0.6",
     "autoprefixer": "^10.4.16",
     "axios": "^1.6.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
     "date-fns": "^3.2.0",
+    "deepmerge": "^4.3.1",
     "dlv": "^1.1.3",
+    "flat": "^3.0.1",
     "flowbite-react": "^0.7.2",
     "framer-motion": "^11.0.3",
     "fs": "0.0.1-security",
+    "lodash": "^4.17.21",
+    "lodash.foreach": "^4.5.0",
+    "lodash.omit": "^4.5.0",
     "lucide-react": "^0.307.0",
     "next": "^13.0.0",
     "nextra": "^2.13.2",
@@ -84,7 +90,7 @@
     "react-icons": "^4.11.0",
     "react-indiana-drag-scroll": "^2.2.0",
     "tailwind-merge": "^2.2.0",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.8.0"
   },

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

@@ -9,11 +9,11 @@ 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: `
             .mobase-text-area-box:hover {
-              box-shadow: 0px 0px 0px 1px var(--gray-500) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
             }
 
             .mobase-text-area-box:focus {
-              box-shadow: 0px 0px 0px 1px rgb(235, 47, 150) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
             }
 
             .mobase-text-area-box:disabled {
@@ -22,16 +22,16 @@ exports.TextArea = (0, react_1.forwardRef)(({ disabled, isError, message, label,
 
             .mobase-text-area-error {
               .mobase-text-area-label {
-                color: #f74e57;
+                color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-area-box {
-                box-shadow: 0px 0px 0px 1px #f74e57 inset;
-                border-color: #f74e57;
+                box-shadow: 0px 0px 0px 1px hsl(var(--red-500) / 1) inset;
+                border-color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-area-message span {
-                color: #f74e57;
+                color: rgb(var(--red-500) / 1);
               }
             }
           ` })] }));

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

@@ -41,25 +41,25 @@ exports.TextInput = (0, react_1.forwardRef)(({ disabled, isError, message, label
     }, [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: `
             .mobase-text-input-box:hover {
-                box-shadow: 0px 0px 0px 1px var(--gray-500) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
             }
 
             .mobase-text-input-box:focus {
-                box-shadow: 0px 0px 0px 1px rgb(235, 47, 150) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
             }
 
             .mobase-text-input-error {
               .mobase-text-input-label {
-                color: #f74e57;
+                color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-input-box {
-                box-shadow: 0px 0px 0px 1px #f74e57 inset;
-                border-color: #f74e57;
+                box-shadow: 0px 0px 0px 1px rgb(var(--red-500) / 1) inset;
+                border-color: rgb(var(--red-500) / 1);
               }
 
               .mobase-text-input-message span {
-                color: #f74e57;
+                color: rgb(var(--red-500) / 1);
               }
             }
           ` })] }));

package/publish/cjs/components/Tooltip/Tooltip.js

@@ -37,6 +37,8 @@ exports.TooltipTrigger = TooltipTrigger;
 const TooltipArrow = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Arrow, { ref: ref, className: (0, utils_1.cn)("drop-shadow-md", props.className), ...props })));
 exports.TooltipArrow = TooltipArrow;
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
-const TooltipContent = React.forwardRef(({ className, type = "dark", sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)("z-50 overflow-hidden rounded-md text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 p-1.5 shadow-base", type === "light" ? "bg-white text-gray-900 fill-white" : "bg-gray-800 fill-gray-800 text-white", className), ...props })));
+const TooltipContent = React.forwardRef(({ className, type = "dark", sideOffset = 4, ...props }, ref) => ((0, jsx_runtime_1.jsx)(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: (0, utils_1.cn)("z-50 overflow-hidden rounded-md text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 p-1.5 shadow-md", type === "light"
+        ? "bg-white text-gray-900 fill-white"
+        : "bg-gray-800 fill-gray-800 text-white", className), ...props })));
 exports.TooltipContent = TooltipContent;
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;

package/publish/cjs/index.js

@@ -25,3 +25,4 @@ __exportStar(require("./components/Tabs"), exports);
 __exportStar(require("./components/TextArea"), exports);
 __exportStar(require("./components/Tooltip"), exports);
 __exportStar(require("./components/TextInput"), exports);
+__exportStar(require("./mobase-tw-plugin"), exports);

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.animations = void 0;
+exports.animations = {
+    animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "spin-loading": "spin 1s steps(12, end) infinite",
+    },
+    keyframes: {
+        "accordion-down": {
+            from: { height: "0" },
+            to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+            from: { height: "var(--radix-accordion-content-height)" },
+            to: { height: "0" },
+        },
+    },
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/blue.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.blue = void 0;
+exports.blue = {
+    50: "#F2F8FF",
+    100: "#E5F1FF",
+    200: "#CCE4FF",
+    300: "#99caff",
+    400: "#3395ff",
+    500: "#1987FF",
+    600: "#007aff",
+    700: "#006ee6",
+    800: "#0062cc",
+    900: "#004794",
+    DEFAULT: "#1987FF",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/common.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonColors = void 0;
+const blue_1 = require("./blue");
+const green_1 = require("./green");
+const pink_1 = require("./pink");
+const purple_1 = require("./purple");
+const red_1 = require("./red");
+const yellow_1 = require("./yellow");
+const orange_1 = require("./orange");
+const gray_1 = require("./gray");
+exports.commonColors = {
+    white: "#ffffff",
+    black: "#000000",
+    blue: blue_1.blue,
+    green: green_1.green,
+    pink: pink_1.pink,
+    purple: purple_1.purple,
+    red: red_1.red,
+    yellow: yellow_1.yellow,
+    gray: gray_1.gray,
+    orange: orange_1.orange,
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/gray.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gray = void 0;
+exports.gray = {
+    50: "#FAFAFA",
+    100: "#F5F5F5",
+    200: "#E5E5E5",
+    300: "#D4D4D4",
+    400: "#A3A3A3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    DEFAULT: "#737373",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/green.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.green = void 0;
+exports.green = {
+    50: "#eaf9ee",
+    100: "#d6f4de",
+    200: "#aee9bd",
+    300: "#85DD9B",
+    400: "#5dd27a",
+    500: "#48cc69",
+    600: "#34c759",
+    700: "#2fb350",
+    800: "#2a9f47",
+    900: "#117A2B",
+    DEFAULT: "#48cc69",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.commonColors = exports.colors = void 0;
+const common_1 = require("./common");
+Object.defineProperty(exports, "commonColors", { enumerable: true, get: function () { return common_1.commonColors; } });
+const colors = {
+    ...common_1.commonColors,
+};
+exports.colors = colors;

package/publish/cjs/mobase-tw-plugin/foundation/colors/orange.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orange = void 0;
+exports.orange = {
+    50: "#fff6f3",
+    100: "#feede8",
+    200: "#feddd2",
+    300: "#fdbba4",
+    400: "#fc9877",
+    500: "#fb7649",
+    600: "#fa6532",
+    700: "#fa541c",
+    800: "#e14c19",
+    900: "#c84316",
+    DEFAULT: "#fb7649",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/pink.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pink = void 0;
+exports.pink = {
+    50: "#FEF8FC",
+    100: "#FDEAF4",
+    200: "#FBD5EA",
+    300: "#F382C0",
+    400: "#EF59AB",
+    500: "#EB2F96",
+    600: "#D42A87",
+    700: "#BC2678",
+    800: "#A50064",
+    900: "#780650",
+    DEFAULT: "#EB2F96",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/purple.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.purple = void 0;
+exports.purple = {
+    50: "#faf4fe",
+    100: "#f4e9fd",
+    200: "#ead4fc",
+    300: "#d5aaf9",
+    400: "#c07ff6",
+    500: "#ab55f3",
+    600: "#a03ff1",
+    700: "#962af0",
+    800: "#8726d8",
+    900: "#6A15B2",
+    DEFAULT: "#ab55f3",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/red.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.red = void 0;
+exports.red = {
+    50: "#fef4f4",
+    100: "#fee8ea",
+    200: "#fdd3d5",
+    300: "#fba7ab",
+    400: "#f97a81",
+    500: "#f74e57",
+    600: "#f63842",
+    700: "#f5222d",
+    800: "#dd1f29",
+    900: "#c41b24",
+    DEFAULT: "#f74e57",
+};

package/publish/cjs/mobase-tw-plugin/foundation/colors/yellow.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.yellow = void 0;
+exports.yellow = {
+    50: "#fff9e5",
+    100: "#fff5cc",
+    200: "#ffeb99",
+    300: "#ffe066",
+    400: "#ffd633",
+    500: "#ffd119",
+    600: "#ffcc00",
+    700: "#e6b800",
+    800: "#cca300",
+    900: "#A88600",
+    DEFAULT: "#ffd119",
+};

package/publish/cjs/mobase-tw-plugin/foundation/font-sizes/index.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontSizes = void 0;
+exports.fontSizes = {
+    xxs: [
+        "0.625rem",
+        {
+            lineHeight: "1rem",
+        },
+    ],
+    xs: [
+        "0.75rem",
+        {
+            lineHeight: "1rem",
+        },
+    ],
+    sm: [
+        "0.875rem",
+        {
+            lineHeight: "1.25rem",
+        },
+    ],
+    base: [
+        "1rem",
+        {
+            lineHeight: "1.5rem",
+        },
+    ],
+    lg: [
+        "1.125rem",
+        {
+            lineHeight: "1.75rem",
+        },
+    ],
+    xl: [
+        "1.25rem",
+        {
+            lineHeight: "1.75rem",
+        },
+    ],
+    "2xl": [
+        "1.5rem",
+        {
+            lineHeight: "2rem",
+        },
+    ],
+    "3xl": [
+        "1.875rem",
+        {
+            lineHeight: "2.25rem",
+        },
+    ],
+    "4xl": [
+        "2.25rem",
+        {
+            lineHeight: "2.5rem",
+        },
+    ],
+    "5xl": [
+        "3rem",
+        {
+            lineHeight: "3.5rem",
+            letterSpacing: "-0.075rem",
+        },
+    ],
+    "6xl": [
+        "3.75rem",
+        {
+            lineHeight: "4.5rem",
+            letterSpacing: "-0.09375rem",
+        },
+    ],
+    "7xl": [
+        "4.5rem",
+        {
+            lineHeight: "5rem",
+            letterSpacing: "-0.1125rem",
+        },
+    ],
+    "8xl": [
+        "6rem",
+        {
+            lineHeight: "6.5rem",
+            letterSpacing: "-0.15rem",
+        },
+    ],
+    "9xl": [
+        "8rem",
+        {
+            lineHeight: "8rem",
+            letterSpacing: "-0.2rem",
+        },
+    ],
+};

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

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./colors"), exports);
+__exportStar(require("./font-sizes"), exports);
+__exportStar(require("./shadows"), exports);
+__exportStar(require("./animations"), exports);

package/publish/cjs/mobase-tw-plugin/foundation/shadows/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.boxShadows = void 0;
+exports.boxShadows = {
+    xs: "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
+    sm: "0 1px 3px 0 rgba(18, 18, 23, 0.1), 0 1px 2px 0 rgba(18, 18, 23, 0.06)",
+    md: "0px 2px 4px -1px rgba(18, 18, 23, 0.06), 0px 4px 6px -1px rgba(18, 18, 23, 0.08)",
+    lg: "0px 4px 6px -2px rgba(18, 18, 23, 0.05), 0px 10px 15px -3px rgba(18, 18, 23, 0.08)",
+    xl: "0px 10px 10px -5px rgba(18, 18, 23, 0.04), 0px 20px 25px -5px rgba(18, 18, 23, 0.10)",
+    "2xl": "0px 25px 50px -20px rgba(18, 18, 23, 0.25)",
+    overlay: "0px 2px 4px 0px rgba(18, 18, 23, 0.04), 0px 5px 8px 0px rgba(18, 18, 23, 0.04), 0px 10px 18px 0px rgba(18, 18, 23, 0.03), 0px 24px 48px 0px rgba(18, 18, 23, 0.03), 0px 0px 0px 1px rgba(18, 18, 23, 0.10)",
+};

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

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

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

@@ -0,0 +1,84 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/**
+ * This Tailwind plugin is based and inspired on "tw-colors" and "NextUI".
+ *
+ * @see https://github.com/L-Blondy/tw-colors
+ * @see https://github.com/nextui-org/nextui
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mobaseTW = void 0;
+const color_1 = __importDefault(require("color"));
+const plugin_js_1 = __importDefault(require("tailwindcss/plugin.js"));
+const utilities_1 = require("./utilities");
+const utils_1 = require("./utils");
+const foundation_1 = require("./foundation");
+const lodash_foreach_1 = __importDefault(require("lodash.foreach"));
+const parsedColorsCache = {};
+const resolveConfig = () => {
+    const resolved = {
+        utilities: {},
+        colors: {},
+    };
+    const flatColors = (0, utils_1.flattenThemeObject)(foundation_1.colors);
+    const cssSelector = ":root";
+    resolved.utilities[cssSelector] = {};
+    (0, lodash_foreach_1.default)(flatColors, (colorValue, colorName) => {
+        if (!colorValue)
+            return;
+        try {
+            const parsedColor = parsedColorsCache[colorValue] ||
+                (0, color_1.default)(colorValue).rgb().round().array();
+            parsedColorsCache[colorValue] = parsedColor;
+            const [r, g, b] = parsedColor;
+            const colorVar = `--${colorName}`;
+            // Set the css variable in "@layer utilities"
+            resolved.utilities[cssSelector][colorVar] = `${r} ${g} ${b}`;
+            resolved.colors[colorName] = `rgb(var(${colorVar}) / <alpha-value>)`;
+        }
+        catch (error) {
+            // eslint-disable-next-line no-console
+            console.log("error", error?.message);
+        }
+    });
+    return resolved;
+};
+const mobaseTW = () => {
+    const resolved = resolveConfig();
+    return (0, plugin_js_1.default)(({ addBase, addUtilities }) => {
+        addBase({
+            ":root": {
+                "font-smooth--webkit": "antialiased",
+            },
+            ...resolved?.utilities, // Xem lai cho nay, addBase
+        });
+        addUtilities({
+            // ...resolved?.utilities, //Xem lai cho nay, addBase
+            ...utilities_1.utilities,
+        });
+    }, 
+    // Extend the Tailwind config
+    {
+        theme: {
+            extend: {
+                colors: {
+                    ...foundation_1.colors,
+                    ...resolved?.colors,
+                },
+                boxShadow: {
+                    ...foundation_1.boxShadows,
+                },
+                fontSize: {
+                    ...foundation_1.fontSizes,
+                },
+                ...foundation_1.animations,
+            },
+        },
+    });
+};
+exports.mobaseTW = mobaseTW;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    /**
+     * Custom utilities
+     */
+    ".leading-inherit": {
+        "line-height": "inherit",
+    },
+    ".bg-img-inherit": {
+        "background-image": "inherit",
+    },
+    ".bg-clip-inherit": {
+        "background-clip": "inherit",
+    },
+    ".text-fill-inherit": {
+        "-webkit-text-fill-color": "inherit",
+    },
+    ".tap-highlight-transparent": {
+        "-webkit-tap-highlight-color": "transparent",
+    },
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.utilities = void 0;
+const transition_1 = __importDefault(require("./transition"));
+const custom_1 = __importDefault(require("./custom"));
+const scrollbar_hide_1 = __importDefault(require("./scrollbar-hide"));
+exports.utilities = {
+    ...custom_1.default,
+    ...transition_1.default,
+    ...scrollbar_hide_1.default,
+};

package/publish/cjs/mobase-tw-plugin/utilities/scrollbar-hide.js

@@ -0,0 +1,30 @@
+"use strict";
+/**
+ * Credits to: https://github.com/reslear/tailwind-scrollbar-hide/tree/main
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    /**
+     * Scroll Hide
+     */
+    ".scrollbar-hide": {
+        /* IE and Edge */
+        "-ms-overflow-style": "none",
+        /* Firefox */
+        "scrollbar-width": "none",
+        /* Safari and Chrome */
+        "&::-webkit-scrollbar": {
+            display: "none",
+        },
+    },
+    ".scrollbar-default": {
+        /* IE and Edge */
+        "-ms-overflow-style": "auto",
+        /* Firefox */
+        "scrollbar-width": "auto",
+        /* Safari and Chrome */
+        "&::-webkit-scrollbar": {
+            display: "block",
+        },
+    },
+};