@momo-webplatform/mobase 0.0.15 → 0.0.17

package/publish/esm/mobase-tw-plugin/foundation/font-sizes/index.d.ts

@@ -0,0 +1,59 @@
+type FontSizeValue = [
+    fontSize: string,
+    configuration: {
+        lineHeight?: string;
+        letterSpacing?: string;
+        fontWeight?: string;
+    }
+];
+export type FontSizes = Record<string, FontSizeValue>;
+export declare const fontSizes: {
+    xxs: [string, {
+        lineHeight: string;
+    }];
+    xs: [string, {
+        lineHeight: string;
+    }];
+    sm: [string, {
+        lineHeight: string;
+    }];
+    base: [string, {
+        lineHeight: string;
+    }];
+    lg: [string, {
+        lineHeight: string;
+    }];
+    xl: [string, {
+        lineHeight: string;
+    }];
+    "2xl": [string, {
+        lineHeight: string;
+    }];
+    "3xl": [string, {
+        lineHeight: string;
+    }];
+    "4xl": [string, {
+        lineHeight: string;
+    }];
+    "5xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "6xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "7xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "8xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+    "9xl": [string, {
+        lineHeight: string;
+        letterSpacing: string;
+    }];
+};
+export {};

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

@@ -0,0 +1,91 @@
+export const 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/esm/mobase-tw-plugin/foundation/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./colors";
+export * from "./font-sizes";
+export * from "./shadows";
+export * from "./animations";

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

@@ -0,0 +1,4 @@
+export * from "./colors";
+export * from "./font-sizes";
+export * from "./shadows";
+export * from "./animations";

package/publish/esm/mobase-tw-plugin/foundation/shadows/index.d.ts

@@ -0,0 +1,10 @@
+export declare const boxShadows: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    overlay: string;
+};
+export type BoxShadows = typeof boxShadows;

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

@@ -0,0 +1,9 @@
+export const 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/esm/mobase-tw-plugin/index.d.ts

@@ -0,0 +1 @@
+export { mobaseTW } from "./plugin";

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

@@ -0,0 +1 @@
+export { mobaseTW } from "./plugin";

package/publish/esm/mobase-tw-plugin/plugin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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
+ */
+export declare const mobaseTW: () => {
+    handler: import("tailwindcss/types/config").PluginCreator;
+    config?: Partial<import("tailwindcss/types/config").Config> | undefined;
+};

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

@@ -0,0 +1,77 @@
+/* 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
+ */
+import Color from "color";
+import plugin from "tailwindcss/plugin.js";
+import { utilities } from "./utilities";
+import { flattenThemeObject } from "./utils";
+import { colors as listColors, fontSizes, boxShadows, animations, } from "./foundation";
+import forEach from "lodash.foreach";
+const parsedColorsCache = {};
+const resolveConfig = () => {
+    const resolved = {
+        utilities: {},
+        colors: {},
+    };
+    const flatColors = flattenThemeObject(listColors);
+    const cssSelector = ":root";
+    resolved.utilities[cssSelector] = {};
+    forEach(flatColors, (colorValue, colorName) => {
+        if (!colorValue)
+            return;
+        try {
+            const parsedColor = parsedColorsCache[colorValue] ||
+                Color(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;
+};
+export const mobaseTW = () => {
+    const resolved = resolveConfig();
+    return plugin(({ addBase, addUtilities }) => {
+        addBase({
+            ":root": {
+                "font-smooth--webkit": "antialiased",
+            },
+            ...resolved?.utilities, // Xem lai cho nay, addBase
+        });
+        addUtilities({
+            // ...resolved?.utilities, //Xem lai cho nay, addBase
+            ...utilities,
+        });
+    }, 
+    // Extend the Tailwind config
+    {
+        theme: {
+            extend: {
+                colors: {
+                    ...listColors,
+                    ...resolved?.colors,
+                },
+                boxShadow: {
+                    ...boxShadows,
+                },
+                fontSize: {
+                    ...fontSizes,
+                },
+                ...animations,
+            },
+        },
+    });
+};

package/publish/esm/mobase-tw-plugin/utilities/custom.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    /**
+     * Custom utilities
+     */
+    ".leading-inherit": {
+        "line-height": string;
+    };
+    ".bg-img-inherit": {
+        "background-image": string;
+    };
+    ".bg-clip-inherit": {
+        "background-clip": string;
+    };
+    ".text-fill-inherit": {
+        "-webkit-text-fill-color": string;
+    };
+    ".tap-highlight-transparent": {
+        "-webkit-tap-highlight-color": string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,20 @@
+export 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/esm/mobase-tw-plugin/utilities/index.d.ts

@@ -0,0 +1,111 @@
+export declare const utilities: {
+    ".scrollbar-hide": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+    ".scrollbar-default": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+    ".transition-all": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-width": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-height": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-size": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-left": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-shadow": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors-opacity": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".leading-inherit": {
+        "line-height": string;
+    };
+    ".bg-img-inherit": {
+        "background-image": string;
+    };
+    ".bg-clip-inherit": {
+        "background-clip": string;
+    };
+    ".text-fill-inherit": {
+        "-webkit-text-fill-color": string;
+    };
+    ".tap-highlight-transparent": {
+        "-webkit-tap-highlight-color": string;
+    };
+};

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

@@ -0,0 +1,8 @@
+import transition from "./transition";
+import custom from "./custom";
+import scrollbarHide from "./scrollbar-hide";
+export const utilities = {
+    ...custom,
+    ...transition,
+    ...scrollbarHide,
+};

package/publish/esm/mobase-tw-plugin/utilities/scrollbar-hide.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Credits to: https://github.com/reslear/tailwind-scrollbar-hide/tree/main
+ */
+declare const _default: {
+    /**
+     * Scroll Hide
+     */
+    ".scrollbar-hide": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+    ".scrollbar-default": {
+        "-ms-overflow-style": string;
+        "scrollbar-width": string;
+        "&::-webkit-scrollbar": {
+            display: string;
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,28 @@
+/**
+ * Credits to: https://github.com/reslear/tailwind-scrollbar-hide/tree/main
+ */
+export 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",
+        },
+    },
+};

package/publish/esm/mobase-tw-plugin/utilities/transition.d.ts

@@ -0,0 +1,86 @@
+declare const _default: {
+    /**
+     * Transition utilities
+     */
+    ".transition-all": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-colors-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-width": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-height": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-size": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-left": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-shadow": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-opacity": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-background": {
+        "transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+    ".transition-transform-colors-opacity": {
+        " transition-property": string;
+        "transition-timing-function": string;
+        "transition-duration": string;
+    };
+};
+export default _default;

package/publish/esm/mobase-tw-plugin/utilities/transition.js

@@ -0,0 +1,86 @@
+const DEFAULT_TRANSITION_DURATION = "250ms";
+export default {
+    /**
+     * Transition utilities
+     */
+    ".transition-all": {
+        "transition-property": "all",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-background": {
+        "transition-property": "background",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition": {
+        "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-colors": {
+        "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-opacity": {
+        "transition-property": "opacity",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-colors-opacity": {
+        "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke, opacity",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-width": {
+        "transition-property": "width",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-height": {
+        "transition-property": "height",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-size": {
+        "transition-property": "width, height",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-left": {
+        "transition-property": "left",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-shadow": {
+        "transition-property": "box-shadow",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-transform": {
+        "transition-property": "transform",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-transform-opacity": {
+        "transition-property": "transform, opacity",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-transform-background": {
+        "transition-property": "transform, background",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-transform-colors": {
+        " transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+    ".transition-transform-colors-opacity": {
+        " transition-property": "transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity",
+        "transition-timing-function": "ease",
+        "transition-duration": DEFAULT_TRANSITION_DURATION,
+    },
+};

package/publish/esm/mobase-tw-plugin/utils/index.d.ts

@@ -0,0 +1 @@
+export * from "./object";

package/publish/esm/mobase-tw-plugin/utils/index.js

@@ -0,0 +1 @@
+export * from "./object";