@momo-webplatform/mobase 0.0.29 → 0.0.31

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

@@ -4,7 +4,7 @@ declare const Select: React.ForwardRefExoticComponent<SelectPrimitive.SelectProp
     className?: string | undefined;
     label?: string | null | undefined;
     message?: string | null | undefined;
-    size?: "lg" | null | undefined;
+    size?: 2 | 1 | undefined;
     isError?: boolean | undefined;
 } & React.RefAttributes<never>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;

package/publish/esm/components/Select/Select.js

@@ -7,11 +7,11 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { cn } from "../../helpers/utils";
 const Select = React.forwardRef(({ className, children, label, message, size, isError, disabled, ...props }) => (_jsxs("div", { className: 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 && (_jsx("span", { className: 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 })), _jsx(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && (_jsxs("div", { className: 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 ? (_jsx(XCircleIcon, { width: 16, height: 16 })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16 })), _jsx("span", { className: cn(size === "lg" ? "text-sm" : "text-xs"), children: message })] }))] })));
+        : ""), children: [label && (_jsx("span", { className: 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 })), _jsx(SelectPrimitive.Root, { disabled: disabled, ...props, children: children }), message && (_jsxs("div", { className: cn("mobase-select-message flex space-x-1 items-center mt-1 text-gray-500", isError && "text-red-500"), children: [isError ? (_jsx(XCircleIcon, { width: 16, height: 16 })) : (_jsx(QuestionMarkCircleIcon, { width: 16, height: 16 })), _jsx("span", { className: cn(size === 2 ? "text-sm" : "text-xs"), children: message })] }))] })));
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: 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: [_jsx("div", { className: "line-clamp-1 text-left", children: children }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: 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: [_jsx("div", { className: "line-clamp-1 text-left", children: children }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "h-4 w-4 text-gray-700 flex-none" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "h-5 w-5" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;

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

@@ -4,5 +4,6 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     message?: string;
     isError?: boolean;
     inputClassName?: string;
+    size?: 1 | 2;
 }
 export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

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

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 import { XCircleIcon } from "@heroicons/react/24/solid";
 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: `
+export const TextArea = forwardRef(({ disabled, isError, message, label, className, inputClassName, size, 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 text-gray-500", size === 2 && " -top-2.5 text-sm"), children: label })), _jsx("textarea", { disabled: disabled, ref: ref, className: 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 && (_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: cn("text-gray-500 ", size === 2 ? "text-sm" : "text-xs"), children: message })] })), _jsx("style", { children: `
             .mobase-text-area-box:hover {
               box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }

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

@@ -5,6 +5,7 @@ export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
     isError?: boolean;
     inputClassName?: string;
     withClearButton?: boolean;
+    size?: 1 | 2;
     onClickClear?: (inputValue: string) => void;
 }
 export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useRef, useState, } from "react";
 import { QuestionMarkCircleIcon, XCircleIcon, } from "@heroicons/react/24/outline";
 import { XCircleIcon as XCircleIconSolid } from "@heroicons/react/24/solid";
 import { cn } from "../../helpers/utils";
-export const TextInput = forwardRef(({ disabled, isError, message, label, className, inputClassName, withClearButton, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+export const TextInput = forwardRef(({ disabled, isError, message, label, className, inputClassName, withClearButton, size, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
     const [clearable, setClearable] = useState(false);
     const rootRef = useRef(null);
     const handleShowClearButton = (inputValue) => {
@@ -36,7 +36,7 @@ export const TextInput = forwardRef(({ disabled, isError, message, label, classN
     useEffect(() => {
         handleShowClearButton(defaultValue || value);
     }, [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: `
+    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 px-1.5 left-2 text-xs text-gray-500", size === 2 && " -top-2.5 text-sm"), children: label })), _jsx("input", { disabled: disabled, type: type, ref: ref, className: 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 && (_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: cn("text-gray-500 ", size === 2 ? "text-sm" : "text-xs"), children: message })] })), _jsx("style", { children: `
             .mobase-text-input-box:hover {
                 box-shadow: 0px 0px 0px 1px rgb(var(--mobase-gray-400) / 1) inset;
             }

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

@@ -3,6 +3,7 @@ export declare const animations: {
         "accordion-down": string;
         "accordion-up": string;
         "spin-loading": string;
+        "fade-in": string;
     };
     keyframes: {
         "accordion-down": {
@@ -21,5 +22,13 @@ export declare const animations: {
                 height: string;
             };
         };
+        "fade-in": {
+            "0%": {
+                opacity: string;
+            };
+            "100%": {
+                opacity: string;
+            };
+        };
     };
 };

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

@@ -3,6 +3,7 @@ export const 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": {
@@ -13,5 +14,9 @@ export const animations = {
             from: { height: "var(--radix-accordion-content-height)" },
             to: { height: "0" },
         },
+        "fade-in": {
+            "0%": { opacity: "0" },
+            "100%": { opacity: "1" },
+        },
     },
 };

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

@@ -179,15 +179,6 @@ export const mobaseTW = () => {
                     ...createSpacingUnits(prefix),
                 },
                 ...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',
-                },
             },
         },
     });