@momo-webplatform/mobase 0.0.22 → 0.0.24

package/publish/esm/components/AlertDialog/AlertDialog.js

@@ -8,19 +8,19 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: cn("fixed inset-0 z-50 bg-black/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className), ...props, ref: ref })));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] bg-white text-gray-700 border rounded-sm border-gray-300 top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  p-6 shadow-lg 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%] sm:rounded-lg", className), ...props })] })));
+const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn("fixed left-[50%] w-[90vw] bg-white text-gray-700 border  border-gray-300 top-[50%] z-50 grid w- max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4  p-6 shadow-lg 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", className), ...props })] })));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props }));
+const AlertDialogHeader = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col space-y-2 text-left", className), ...props }));
 AlertDialogHeader.displayName = "AlertDialogHeader";
-const AlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props }));
+const AlertDialogFooter = ({ className, ...props }) => (_jsx("div", { className: cn("flex flex-row justify-end space-x-4", className), ...props }));
 AlertDialogFooter.displayName = "AlertDialogFooter";
 const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn("text-lg text-gray-900 font-semibold", className), ...props })));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;
-const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants(), "", className), ...props })));
+const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn(buttonVariants({ variant: "primary" }), "", className), ...props })));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: "secondary" }), "mt-2 sm:mt-0", className), ...props })));
+const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn(buttonVariants({ variant: "secondary" }), className), ...props })));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/publish/esm/components/Pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+interface PaginationProps {
+    /**
+     * Current page.
+     */
+    current: number;
+    /**
+     * Items total count.
+     */
+    total: number;
+    /**
+     * Page change callback
+     */
+    onChange: (page: number) => void;
+}
+export default function Pagination({ current, total, onChange, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/publish/esm/components/Pagination/Pagination.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { iconButtonVariants } from "../IconButton/IconButton";
+import { cn } from "../../helpers/utils";
+export default function Pagination({ current, total, onChange, }) {
+    const getButton = (index) => (_jsx("li", { children: _jsx("button", { className: cn(iconButtonVariants({
+                variant: current === index ? "outline" : "secondary",
+                size: "sm",
+            })), onClick: () => onChange(index), children: index }) }, index));
+    return (_jsx("nav", { role: "navigation", "aria-label": "pagination", className: cn("mx-auto flex w-full justify-center"), children: _jsxs("ul", { className: cn("flex flex-row flex-wrap items-center gap-2"), children: [total > 1 && (_jsx("li", { children: _jsx("button", { className: cn(iconButtonVariants({
+                            variant: "secondary",
+                            size: "sm",
+                        })), disabled: current === 1, onClick: () => current > 1 && onChange(current - 1), children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }) })), total <= 6 ? (Array(total)
+                    .fill(0)
+                    .map((_, index) => getButton(index + 1))) : (_jsxs(_Fragment, { children: [getButton(1), current === 1 && [getButton(2), getButton(3)], current > 3 && (_jsx("li", { children: _jsx("button", { className: cn(iconButtonVariants({
+                                    variant: "secondary",
+                                    size: "sm",
+                                })), disabled: current === 1, onClick: () => onChange(current - 3), children: "..." }) })), current > 2 &&
+                            current !== 1 &&
+                            current !== total &&
+                            getButton(current - 1), current > 1 && current < total && getButton(current), current < total - 1 && current !== 1 && getButton(current + 1), current === total && [getButton(total - 2), getButton(total - 1)], current < total - 2 && current !== total && (_jsx("button", { className: cn(iconButtonVariants({
+                                variant: "secondary",
+                                size: "sm",
+                            })), disabled: current === 1, onClick: () => onChange(current + 3), children: "..." })), getButton(total)] })), total > 1 && (_jsx("li", { children: _jsx("button", { className: cn(iconButtonVariants({
+                            variant: "secondary",
+                            size: "sm",
+                        })), disabled: current === total, onClick: () => current < total && onChange(current + 1), children: _jsx(ChevronRight, { className: "h-4 w-4" }) }) }))] }) }));
+}

package/publish/esm/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination";

package/publish/esm/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination";

package/publish/esm/components/TextArea/TextArea.js

@@ -6,11 +6,11 @@ import { cn } from "../../helpers/utils";
 export const TextArea = forwardRef(({ disabled, isError, message, label, className, inputClassName, rows = 3, ...restProps }, ref) => {
     return (_jsxs("div", { className: cn("relative", className, isError && "mobase-text-area-error"), children: [label && (_jsx("span", { className: 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 })), _jsx("textarea", { disabled: disabled, ref: ref, className: 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 && (_jsxs("div", { className: "mobase-text-area-message flex space-x-1 items-center mt-0.5", children: [isError ? (_jsx(XCircleIcon, { width: 16, height: 16, className: "text-red-500" })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), _jsx("span", { className: "text-gray-500 text-sm", children: message })] })), _jsx("style", { children: `
             .mobase-text-area-box:hover {
-              box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }
 
             .mobase-text-area-box:focus {
-              box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
+              box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
             }
 
             .mobase-text-area-box:disabled {
@@ -19,16 +19,16 @@ export const TextArea = forwardRef(({ disabled, isError, message, label, classNa
 
             .mobase-text-area-error {
               .mobase-text-area-label {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-area-box {
-                box-shadow: 0px 0px 0px 1px hsl(var(--red-500) / 1) inset;
-                border-color: rgb(var(--red-500) / 1);
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-red-500) / 1) inset;
+                border-color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-area-message span {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
             }
           ` })] }));

package/publish/esm/components/TextInput/TextInput.js

@@ -38,25 +38,25 @@ export const TextInput = forwardRef(({ disabled, isError, message, label, classN
     }, [value, defaultValue]);
     return (_jsxs("div", { className: cn(className, isError && "mobase-text-input-error"), ref: rootRef, children: [_jsxs("div", { className: "relative", children: [label && (_jsx("span", { className: 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 })), _jsx("input", { disabled: disabled, type: type, ref: ref, className: 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 && (_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: _jsx(XCircleIcon, { strokeWidth: 2, width: 20, height: 20 }) }))] }), message && (_jsxs("div", { className: "mobase-text-input-message flex space-x-1 items-center mt-0.5", children: [isError ? (_jsx(XCircleIconSolid, { width: 16, height: 16, className: "text-red-500" })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16, className: "text-gray-500" })), _jsx("span", { className: "text-gray-500 text-sm", children: message })] })), _jsx("style", { children: `
             .mobase-text-input-box:hover {
-                box-shadow: 0px 0px 0px 1px rgb(var(--gray-400) / 1) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }
 
             .mobase-text-input-box:focus {
-                box-shadow: 0px 0px 0px 1px rgb(var(--pink-500) / 1) inset;
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
             }
 
             .mobase-text-input-error {
               .mobase-text-input-label {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-input-box {
-                box-shadow: 0px 0px 0px 1px rgb(var(--red-500) / 1) inset;
-                border-color: rgb(var(--red-500) / 1);
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-red-500) / 1) inset;
+                border-color: rgb(var(--mobase-red-500) / 1);
               }
 
               .mobase-text-input-message span {
-                color: rgb(var(--red-500) / 1);
+                color: rgb(var(--mobase-red-500) / 1);
               }
             }
           ` })] }));

package/publish/esm/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/AlertDialog";
 export * from "./components/IconButton";
+export * from "./components/Pagination";
 export * from "./components/Popover";
 export * from "./components/Tabs";
 export * from "./components/TextArea";

package/publish/esm/index.js

@@ -4,6 +4,7 @@ export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/AlertDialog";
 export * from "./components/IconButton";
+export * from "./components/Pagination";
 export * from "./components/Popover";
 export * from "./components/Tabs";
 export * from "./components/TextArea";

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

@@ -0,0 +1,13 @@
+export const blue = {
+    50: "#eef8ff",
+    100: "#d9eeff",
+    200: "#bce1ff",
+    300: "#8ed0ff",
+    400: "#59b4ff",
+    500: "#429cff",
+    600: "#1b74f5",
+    700: "#145ee1",
+    800: "#174bb6",
+    900: "#19428f",
+    DEFAULT: "#429cff",
+};

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

@@ -0,0 +1,13 @@
+export const green = {
+    50: "#f1fcf3",
+    100: "#dff9e5",
+    200: "#c0f2cc",
+    300: "#8fe6a4",
+    400: "#57d175",
+    500: "#34c759",
+    600: "#22973f",
+    700: "#1e7735",
+    800: "#1d5e2e",
+    900: "#194e28",
+    DEFAULT: "#34c759",
+};

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

@@ -0,0 +1,13 @@
+export const orange = {
+    50: "#fff4ed",
+    100: "#ffe6d5",
+    200: "#fecaaa",
+    300: "#fea473",
+    400: "#fc743b",
+    500: "#fa541c",
+    600: "#eb350b",
+    700: "#c3240b",
+    800: "#9b1e11",
+    900: "#7c1c12",
+    DEFAULT: "#fa541c",
+};

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

@@ -0,0 +1,13 @@
+export const pink = {
+    50: "#FEE5F6",
+    100: "#FECCED",
+    200: "#FFA2DF",
+    300: "#FE68C6",
+    400: "#F93BAD",
+    500: "#EB2F96",
+    600: "#D42A87",
+    700: "#CB0B6F",
+    800: "#A70D5B",
+    900: "#8B104E",
+    DEFAULT: "#EB2F96",
+};

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

@@ -0,0 +1,13 @@
+export const purple = {
+    50: "#faf5ff",
+    100: "#f4e9fe",
+    200: "#ead6fe",
+    300: "#dab6fc",
+    400: "#c487f9",
+    500: "#ab55f3",
+    600: "#9937e6",
+    700: "#8326ca",
+    800: "#6f24a5",
+    900: "#5b1e85",
+    DEFAULT: "#ab55f3",
+};

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

@@ -0,0 +1,13 @@
+export const red = {
+    50: "#fff1f2",
+    100: "#ffe1e3",
+    200: "#ffc8cb",
+    300: "#ffa1a6",
+    400: "#fe6b73",
+    500: "#f74e57",
+    600: "#e41e29",
+    700: "#c0151e",
+    800: "#9e161d",
+    900: "#83191f",
+    DEFAULT: "#f74e57",
+};

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

@@ -0,0 +1,13 @@
+export const yellow = {
+    50: "#fffee7",
+    100: "#fffec1",
+    200: "#fff886",
+    300: "#ffec41",
+    400: "#ffdb0d",
+    500: "#ffcc00",
+    600: "#d19500",
+    700: "#a66a02",
+    800: "#89530a",
+    900: "#74430f",
+    DEFAULT: "#ffcc00",
+};

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

@@ -7,7 +7,7 @@ type FontSizeValue = [
     }
 ];
 export type FontSizes = Record<string, FontSizeValue>;
-export declare const fontSizes: {
+export declare function fontSizes(prefix: string): {
     xxs: [string, {
         lineHeight: string;
     }];

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

@@ -0,0 +1,94 @@
+export function fontSizes(prefix) {
+    const fontSizes = {
+        xxs: [
+            `var(--${prefix}-font-size-xxs)`,
+            {
+                lineHeight: "1rem",
+            },
+        ],
+        xs: [
+            `var(--${prefix}-font-size-xs)`,
+            {
+                lineHeight: "1rem",
+            },
+        ],
+        sm: [
+            `var(--${prefix}-font-size-sm)`,
+            {
+                lineHeight: "1.25rem",
+            },
+        ],
+        base: [
+            `var(--${prefix}-font-size-base)`,
+            {
+                lineHeight: "1.5rem",
+            },
+        ],
+        lg: [
+            `var(--${prefix}-font-size-lg)`,
+            {
+                lineHeight: "1.75rem",
+            },
+        ],
+        xl: [
+            `var(--${prefix}-font-size-xl)`,
+            {
+                lineHeight: "1.75rem",
+            },
+        ],
+        "2xl": [
+            `var(--${prefix}-font-size-2xl)`,
+            {
+                lineHeight: "2rem",
+            },
+        ],
+        "3xl": [
+            `var(--${prefix}-font-size-3xl)`,
+            {
+                lineHeight: "2.25rem",
+            },
+        ],
+        "4xl": [
+            `var(--${prefix}-font-size-4xl)`,
+            {
+                lineHeight: "2.5rem",
+            },
+        ],
+        "5xl": [
+            `var(--${prefix}-font-size-5xl)`,
+            {
+                lineHeight: "3.5rem",
+                letterSpacing: "-0.075rem",
+            },
+        ],
+        "6xl": [
+            `var(--${prefix}-font-size-6xl)`,
+            {
+                lineHeight: "4.5rem",
+                letterSpacing: "-0.09375rem",
+            },
+        ],
+        "7xl": [
+            `var(--${prefix}-font-size-7xl)`,
+            {
+                lineHeight: "5rem",
+                letterSpacing: "-0.1125rem",
+            },
+        ],
+        "8xl": [
+            `var(--${prefix}-font-size-8xl)`,
+            {
+                lineHeight: "6.5rem",
+                letterSpacing: "-0.15rem",
+            },
+        ],
+        "9xl": [
+            `var(--${prefix}-font-size-9xl)`,
+            {
+                lineHeight: "8rem",
+                letterSpacing: "-0.2rem",
+            },
+        ],
+    };
+    return fontSizes;
+}

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

@@ -0,0 +1,34 @@
+export declare const layout: {
+    "spacing-unit": number;
+    "disabled-opacity": number;
+    "font-size": {
+        xxs: string;
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+        "5xl": string;
+        "6xl": string;
+        "7xl": string;
+        "8xl": string;
+        "9xl": string;
+    };
+    radius: {
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    "box-shadow": {
+        small: string;
+        medium: string;
+        large: string;
+    };
+};

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

@@ -0,0 +1,34 @@
+export const layout = {
+    "spacing-unit": 4,
+    "disabled-opacity": 0.5, // Numeric values don't need quotes
+    "font-size": {
+        xxs: "0.625rem",
+        xs: "0.75rem",
+        sm: "0.875rem",
+        base: "1rem",
+        lg: "1.125rem",
+        xl: "1.25rem",
+        "2xl": "1.5rem",
+        "3xl": "1.875rem",
+        "4xl": "2.25rem",
+        "5xl": "3rem",
+        "6xl": "3.75rem",
+        "7xl": "4.5rem",
+        "8xl": "6rem",
+        "9xl": "8rem",
+    },
+    radius: {
+        sm: "0.125rem",
+        base: "0.25rem",
+        md: "0.375rem",
+        lg: "0.5rem",
+        xl: "0.75rem",
+        "2xl": "1rem",
+        "3xl": "1.5rem",
+    },
+    "box-shadow": {
+        small: "0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+        medium: "0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+        large: "0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)",
+    },
+};

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

@@ -10,27 +10,32 @@
 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 = () => {
+import { flattenThemeObject } from "./utils/object";
+import { createSpacingUnits, generateSpacingScale } from "./utils/theme";
+import { colors as listColors } from "./colors";
+import { layout } from "./layout";
+import { animations } from "./animations";
+import { fontSizes } from "./font-sizes";
+import { radius } from "./radius";
+// import { animations } from "./animations";
+// import { fontSizes } from "./font-sizes";
+// import { radius } from "./radius";
+const resolveConfig = (prefix) => {
     const resolved = {
         utilities: {},
         colors: {},
     };
     const flatColors = flattenThemeObject(listColors);
+    const flatLayout = layout;
     const cssSelector = ":root";
     resolved.utilities[cssSelector] = {};
-    forEach(flatColors, (colorValue, colorName) => {
+    // Color
+    Object.entries(flatColors).forEach(([colorName, colorValue]) => {
         if (!colorValue)
             return;
         try {
-            const parsedColor = parsedColorsCache[colorValue] ||
-                Color(colorValue).rgb().round().array();
-            parsedColorsCache[colorValue] = parsedColor;
-            const [r, g, b] = parsedColor;
-            const colorVar = `--${colorName}`;
+            const [r, g, b] = Color(colorValue).rgb().array();
+            const colorVar = `--${prefix}-${colorName}`;
             // Set the css variable in "@layer utilities"
             resolved.utilities[cssSelector][colorVar] = `${r} ${g} ${b}`;
             resolved.colors[colorName] = `rgb(var(${colorVar}) / <alpha-value>)`;
@@ -40,10 +45,37 @@ const resolveConfig = () => {
             console.log("error", error?.message);
         }
     });
+    // Layout
+    Object.entries(flatLayout).forEach(([key, value]) => {
+        if (!value)
+            return;
+        const layoutVariablePrefix = `--${prefix}-${key}`;
+        if (typeof value === "object") {
+            Object.entries(value).forEach(([nestedKey, nestedValue]) => {
+                const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
+                resolved.utilities[cssSelector][nestedLayoutVariable] = nestedValue;
+            });
+        }
+        else if (key === "spacing-unit") {
+            resolved.utilities[cssSelector][layoutVariablePrefix] = value;
+            const spacingScale = generateSpacingScale(Number(value));
+            Object.entries(spacingScale).forEach(([scaleKey, scaleValue]) => {
+                const spacingVariable = `${layoutVariablePrefix}-${scaleKey}`;
+                resolved.utilities[cssSelector][spacingVariable] = scaleValue;
+            });
+        }
+        else {
+            const formattedValue = layoutVariablePrefix.includes("opacity") && typeof value === "number"
+                ? value.toString().replace(/^0\./, ".")
+                : value;
+            resolved.utilities[cssSelector][layoutVariablePrefix] = formattedValue;
+        }
+    });
     return resolved;
 };
 export const mobaseTW = () => {
-    const resolved = resolveConfig();
+    const prefix = "mobase";
+    const resolved = resolveConfig(prefix);
     return plugin(({ addBase, addUtilities }) => {
         addBase({
             ":root": {
@@ -60,15 +92,47 @@ export const mobaseTW = () => {
     {
         theme: {
             extend: {
+                fontFamily: {
+                    sans: [
+                        "-apple-system",
+                        "BlinkMacSystemFont",
+                        "Segoe UI",
+                        "Helvetica",
+                        "Arial",
+                        "sans-serif",
+                        "Apple Color Emoji",
+                        "Segoe UI Emoji",
+                        "Segoe UI Symbol",
+                    ],
+                    mono: [
+                        "SFMono-Regular",
+                        "Consolas",
+                        "Liberation Mono",
+                        "Menlo",
+                        "monospace",
+                    ],
+                },
                 colors: {
                     ...listColors,
                     ...resolved?.colors,
                 },
                 boxShadow: {
-                    ...boxShadows,
+                    small: `var(--${prefix}-box-shadow-small)`,
+                    medium: `var(--${prefix}-box-shadow-medium)`,
+                    large: `var(--${prefix}-box-shadow-large)`,
+                },
+                // fontSize: {
+                //   ...fontSizes,
+                // },
+                borderRadius: {
+                    ...radius(prefix),
                 },
                 fontSize: {
-                    ...fontSizes,
+                    ...fontSizes(prefix),
+                },
+                spacing: {
+                    unit: `var(--${prefix}-spacing-unit)`,
+                    ...createSpacingUnits(prefix),
                 },
                 ...animations,
             },

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

@@ -0,0 +1,9 @@
+export declare function radius(prefix: string): {
+    sm: string;
+    DEFAULT: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+};

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

@@ -0,0 +1,12 @@
+export function radius(prefix) {
+    const radius = {
+        sm: `var(--${prefix}-radius-sm)`,
+        DEFAULT: `var(--${prefix}-radius-base)`,
+        md: `var(--${prefix}-radius-md)`,
+        lg: `var(--${prefix}-radius-lg)`,
+        xl: `var(--${prefix}-radius-xl)`,
+        "2xl": `var(--${prefix}-radius-2xl)`,
+        "3xl": `var(--${prefix}-radius-3xl)`,
+    };
+    return radius;
+}