@momo-webplatform/mobase 0.0.39 → 0.0.40

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type VariantProps } from "class-variance-authority";
+interface CalloutProps {
+    message: string;
+    type: "neutral" | "error" | "success" | "warning" | "info";
+    withAction?: string;
+    onClickAction?: () => void;
+    className?: string;
+    disabled?: boolean;
+    actionClassName?: string;
+}
+export declare const Callout: import("react").ForwardRefExoticComponent<CalloutProps & VariantProps<(props?: ({
+    typeDiv?: "warning" | "error" | "neutral" | "success" | "info" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & VariantProps<(props?: ({
+    typeIcon?: "warning" | "error" | "neutral" | "success" | "info" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/publish/esm/components/Callout/Callout.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { cn } from "../../helpers/utils";
+import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import { TextButton } from "../TextButton";
+const calloutVariants = cva("px-3 py-2 rounded-md border flex items-center space-x-2 text-gray-700 text-sm ", {
+    variants: {
+        typeDiv: {
+            neutral: "bg-gray-50 border-gray-300 ",
+            error: "bg-red-50 border-red-300",
+            success: "bg-green-50 border-green-300",
+            warning: "bg-yellow-50 border-yellow-300",
+            info: "bg-blue-50 border-blue-300",
+        },
+        disabled: {
+            true: "text-gray-400 bg-gray-50 opacity-55 pointer-events-none border-gray-300",
+        },
+    },
+    defaultVariants: {
+        typeDiv: "neutral",
+    },
+});
+const iconVariants = cva("w-5 h-5 shrink-0 border-none p-0 ", {
+    variants: {
+        typeIcon: {
+            neutral: "text-gray-700",
+            error: "text-red-700",
+            success: "text-green-700",
+            warning: "text-yellow-700",
+            info: "text-blue-700",
+        },
+        disabled: {
+            true: "text-gray-400",
+        },
+    },
+    defaultVariants: {
+        typeIcon: "neutral",
+    },
+});
+export const Callout = forwardRef(({ type = "neutral", message = "", withAction = false, onClickAction, className, disabled, actionClassName, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn("", className, calloutVariants({ typeDiv: type, disabled })), ...props, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(InformationCircleIcon, { className: cn(iconVariants({ typeIcon: type, disabled })), width: 20, height: 20 }), _jsx("div", { children: "B\u1EA1n c\u1EA7n cho ph\u00E9p website s\u1EED d\u1EE5ng th\u00F4ng tin v\u1ECB tr\u00ED \u0111\u1EC3 s\u1EED d\u1EE5ng t\u00EDnh n\u0103ng n\u00E0y" })] }), withAction && (_jsx(TextButton, { variant: "primary", onClick: () => onClickAction?.(), className: cn("", actionClassName), isDisabled: disabled, children: withAction }))] }));
+});

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

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

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

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

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

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export interface SearchBarProps extends InputHTMLAttributes<HTMLInputElement> {
+    inputClassName?: string;
+    size?: 1 | 2;
+    onClickClear?: (inputValue: string) => void;
+}
+export declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLInputElement>>;

package/publish/esm/components/SearchBar/SearchBar.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState, } from "react";
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { XCircleIcon } from "@heroicons/react/24/outline";
+import { cn } from "../../helpers/utils";
+export const SearchBar = forwardRef(({ disabled, className, inputClassName, size, onChange, onFocus, onClickClear, value, defaultValue, type = "text", ...restProps }, ref) => {
+    const [clearable, setClearable] = useState(false);
+    const rootRef = useRef(null);
+    const handleShowClearButton = (inputValue) => {
+        if (inputValue && !clearable) {
+            setClearable(true);
+        }
+        if (!inputValue && clearable) {
+            setClearable(false);
+        }
+    };
+    const onChangeFactory = (event) => {
+        handleShowClearButton(event.target.value);
+        onChange?.(event);
+    };
+    const onFocusFactory = (event) => {
+        handleShowClearButton(event.target.value);
+        onFocus?.(event);
+    };
+    const handleClear = () => {
+        const inputTarget = rootRef.current?.querySelector("input");
+        if (!inputTarget)
+            return;
+        onClickClear?.(inputTarget.value);
+        inputTarget.value = "";
+        inputTarget.focus();
+        setClearable(false);
+    };
+    useEffect(() => {
+        handleShowClearButton(defaultValue || value);
+    }, [value, defaultValue]);
+    return (_jsxs("div", { className: cn(className), ref: rootRef, children: [_jsxs("div", { className: "relative flex items-center", children: [_jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 shrink-0 text-gray-500 duration-200 ", children: _jsx(MagnifyingGlassIcon, { className: "w-4 h-4 text-gray-500" }) }), _jsx("input", { disabled: disabled, type: type, ref: ref, className: cn("mobase-text-input-box text-gray-900 h-10 bg-white w-full transition-all text-sm rounded-md border border-gray-400  placeholder:text-gray-500 px-9  focus:border-pink-500 disabled:bg-gray-50 disabled:border-gray-300 disabled:pointer-events-none block disabled:opacity-50", inputClassName), onChange: onChangeFactory, onFocus: onFocusFactory, value: value, defaultValue: defaultValue, ...restProps }), 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 }) }))] }), _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 {
+                box-shadow: 0px 0px 0px 1px rgb(var(--mobase-pink-500) / 1) inset;
+            }
+          ` })] }));
+});

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

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

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

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

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const textButtonVariants: (props?: ({
+    variant?: "default" | "primary" | "secondary" | null | undefined;
+    size?: "default" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface TextButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof textButtonVariants> {
+    /**
+     * CSS class to be appended to the root element.
+     */
+    className?: string;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    /**
+     * Disabled interaction and applies disabled styles
+     */
+    isDisabled?: boolean;
+}
+declare const TextButton: React.ForwardRefExoticComponent<TextButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { TextButton, textButtonVariants };

package/publish/esm/components/TextButton/TextButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../helpers/utils";
+// /dwd
+const textButtonVariants = cva("inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed border border-transparent flex-nowrap", {
+    variants: {
+        /**
+         * Determines style variation of Button component.
+         */
+        variant: {
+            default: "text-blue-700 hover:underline hover:bg-blue-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+            primary: "text-pink-500 hover:underline hover:bg-pink-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+            secondary: "text-gray-700 hover:underline hover:text-blue-700 hover:bg-blue-50 disabled:bg-transparent disabled:text-gray-400 disabled:no-underline",
+        },
+        /**
+         * Determines size variation of Button component.
+         */
+        size: {
+            default: "text-sm",
+            lg: "text-base",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const TextButton = React.forwardRef(({ className, variant = "default", size = "default", asChild = false, isDisabled = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const buttonClassName = cn(textButtonVariants({ variant, size, className }));
+    return (_jsx(Comp, { className: buttonClassName, disabled: isDisabled, ref: ref, ...props, children: props.children }));
+});
+TextButton.displayName = "TextButton";
+export { TextButton, textButtonVariants };

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

@@ -0,0 +1,2 @@
+export { TextButton } from "./TextButton";
+export type { TextButtonProps } from "./TextButton";

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

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

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

@@ -4,7 +4,7 @@ import { type VariantProps } from "class-variance-authority";
 declare const ToastProvider: React.FC<ToastPrimitives.ToastProviderProps>;
 declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React.RefAttributes<HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
 declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "sucess" | "warning" | "error" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
 declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/publish/esm/components/Toast/Toast.js

@@ -1,32 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva } from "class-variance-authority";
-import { X } from "lucide-react";
 import { cn } from "../../helpers/utils";
+import { XMarkIcon, CheckCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, } from "@heroicons/react/20/solid";
 const ToastProvider = ToastPrimitives.Provider;
-const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Viewport, { ref: ref, className: cn("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className), ...props })));
+const ToastViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Viewport, { ref: ref, className: cn("fixed bottom-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 left-0 sm:right-0 sm:left-auto sm:top-0 sm:bottom-auto sm:flex-col md:max-w-[420px]", className), ...props })));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-const toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", {
+const toastVariants = cva("group pointer-events-auto relative w-full overflow-hidden rounded-md border py-4 pr-10 pl-10 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-top-full bg-white text-gray-900 border border-gray-200 border-l-4", {
     variants: {
         variant: {
-            default: "border bg-background text-foreground",
-            destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+            sucess: "border-l-green-500",
+            warning: "border-l-yellow-500",
+            error: "border-l-red-500",
         },
     },
     defaultVariants: {
-        variant: "default",
+        variant: "sucess",
     },
 });
-const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
-    return (_jsx(ToastPrimitives.Root, { ref: ref, className: cn(toastVariants({ variant }), className), ...props }));
+const Toast = React.forwardRef(({ className, variant = "sucess", children, ...props }, ref) => {
+    return (_jsxs(ToastPrimitives.Root, { ref: ref, className: cn(toastVariants({ variant }), className), ...props, children: [_jsxs("div", { className: "w-5 h-5 flex items-center justify-center absolute top-4 left-3", children: [variant === "sucess" && (_jsx(CheckCircleIcon, { className: "w-5 h-5 text-green-500" })), variant === "warning" && (_jsx(ExclamationTriangleIcon, { className: "w-5 h-5 text-yellow-500" })), variant === "error" && (_jsx(InformationCircleIcon, { className: "w-5 h-5 text-red-500" }))] }), children] }));
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
-const ToastAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Action, { ref: ref, className: cn("inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", className), ...props })));
+const ToastAction = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Action, { ref: ref, className: cn("inline-flex shrink-0 items-center justify-center bg-transparent text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-0 focus:ring-ring focus:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 text-blue-600 hover:underline mt-2", className), ...props })));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
-const ToastClose = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Close, { ref: ref, className: cn("absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "", ...props, children: _jsx(X, { className: "h-4 w-4" }) })));
+const ToastClose = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Close, { ref: ref, className: cn("absolute right-2 top-2 rounded-md  transition-opacity hover:opacity-70 focus:opacity-100 focus:outline-none focus:ring-2 text-gray-800 w-8 h-8 flex items-center justify-center", className), "toast-close": "", ...props, children: _jsx(XMarkIcon, { className: "h-5 w-5" }) })));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
-const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Title, { ref: ref, className: cn("text-sm font-semibold", className), ...props })));
+const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Title, { ref: ref, className: cn("text-base font-semibold leading-tight", className), ...props })));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(ToastPrimitives.Description, { ref: ref, className: cn("text-sm opacity-90", className), ...props })));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;

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

@@ -1,3 +1,2 @@
-export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } from "./Toast";
-export { useToast, toast } from "./use-toast";
+export { useToast, toast } from "./useToast";
 export { Toaster } from "./toaster";

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

@@ -1,3 +1,2 @@
-export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } from "./Toast";
-export { useToast, toast } from "./use-toast";
+export { useToast, toast } from "./useToast";
 export { Toaster } from "./toaster";

package/publish/esm/components/Toast/toaster.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "../..//components/Toast/Toast";
-import { useToast } from "../../components/Toast/use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, } from "./Toast";
+import { useToast } from "./useToast";
 export function Toaster() {
     const { toasts } = useToast();
     return (_jsxs(ToastProvider, { children: [toasts.map(function ({ id, title, description, action, ...props }) {
-                return (_jsxs(Toast, { ...props, children: [_jsxs("div", { className: "grid gap-1", children: [title && _jsx(ToastTitle, { children: title }), description && (_jsx(ToastDescription, { children: description }))] }), action, _jsx(ToastClose, {})] }, id));
+                return (_jsxs(Toast, { ...props, children: [_jsxs("div", { className: "grid gap-2", children: [title && _jsx(ToastTitle, { children: title }), description && (_jsx(ToastDescription, { children: description }))] }), action, _jsx(ToastClose, {})] }, id));
             }), _jsx(ToastViewport, {})] }));
 }

package/publish/esm/components/Toast/{use-toast.d.ts → useToast.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ToastActionElement, ToastProps } from "../..//components/Toast/Toast";
+import type { ToastActionElement, ToastProps } from "./Toast";
 type ToasterToast = ToastProps & {
     id: string;
     title?: React.ReactNode;

package/publish/esm/components/Toast/{use-toast.js → useToast.js}

@@ -22,7 +22,7 @@ const addToRemoveQueue = (toastId) => {
         toastTimeouts.delete(toastId);
         dispatch({
             type: "REMOVE_TOAST",
-            toastId: toastId,
+            toastId,
         });
     }, TOAST_REMOVE_DELAY);
     toastTimeouts.set(toastId, timeout);
@@ -72,6 +72,8 @@ export const reducer = (state, action) => {
                 ...state,
                 toasts: state.toasts.filter((t) => t.id !== action.toastId),
             };
+        default:
+            return state;
     }
 };
 const listeners = [];
@@ -102,7 +104,7 @@ function toast({ ...props }) {
         },
     });
     return {
-        id: id,
+        id,
         dismiss,
         update,
     };

package/publish/esm/index.d.ts

@@ -10,6 +10,8 @@ export * from "./components/Pagination";
 export * from "./components/Popover";
 export * from "./components/Tabs";
 export * from "./components/TextArea";
+export * from "./components/Toast";
+export * from "./components/TextButton";
 export * from "./components/Tooltip";
 export * from "./components/TextInput";
 export * from "./components/Stepper";
@@ -22,5 +24,7 @@ export * from "./components/Footer";
 export * from "./components/Card";
 export * from "./components/Command";
 export * from "./components/Combobox";
+export * from "./components/Callout";
+export * from "./components/SearchBar";
 export * from "./mobase-tw-plugin";
 export * from "./site";

package/publish/esm/index.js

@@ -10,6 +10,8 @@ export * from "./components/Pagination";
 export * from "./components/Popover";
 export * from "./components/Tabs";
 export * from "./components/TextArea";
+export * from "./components/Toast";
+export * from "./components/TextButton";
 export * from "./components/Tooltip";
 export * from "./components/TextInput";
 export * from "./components/Stepper";
@@ -22,5 +24,7 @@ export * from "./components/Footer";
 export * from "./components/Card";
 export * from "./components/Command";
 export * from "./components/Combobox";
+export * from "./components/Callout";
+export * from "./components/SearchBar";
 export * from "./mobase-tw-plugin";
 export * from "./site";