@underverse-ui/underverse 0.2.29 → 0.2.31

package/dist/index.js

@@ -2382,6 +2382,8 @@ var Modal = ({
   const [isMounted, setIsMounted] = React10.useState(false);
   const [isVisible, setIsVisible] = React10.useState(false);
   const [isAnimating, setIsAnimating] = React10.useState(true);
+  const mouseDownTarget = React10.useRef(null);
+  const modalContentRef = React10.useRef(null);
   React10.useEffect(() => {
     setIsMounted(true);
     return () => setIsMounted(false);
@@ -2421,74 +2423,90 @@ var Modal = ({
       document.body.style.overflow = "unset";
     };
   }, [isOpen]);
-  const handleOverlayClick = (event) => {
-    if (closeOnOverlayClick) {
+  const handleOverlayMouseDown = (event) => {
+    mouseDownTarget.current = event.target;
+  };
+  const handleOverlayMouseUp = (event) => {
+    const modalContent2 = modalContentRef.current;
+    const mouseDownOutside = modalContent2 && !modalContent2.contains(mouseDownTarget.current);
+    const mouseUpOutside = modalContent2 && !modalContent2.contains(event.target);
+    if (closeOnOverlayClick && mouseDownOutside && mouseUpOutside) {
       onClose();
     }
+    mouseDownTarget.current = null;
   };
   if (!isMounted || !isOpen && !isVisible) {
     return null;
   }
   const maxWidthClass = width ? "max-w-none" : fullWidth ? "max-w-full" : sizeStyles3[size];
-  const modalContent = /* @__PURE__ */ jsxs12("div", { className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName), onClick: handleOverlayClick, children: [
-    /* @__PURE__ */ jsx14(
-      "div",
-      {
-        className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs12(
-      "div",
-      {
-        className: cn(
-          "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
-          "transition-all duration-200 ease-out",
-          maxWidthClass,
-          fullWidth && "mx-0",
-          className
+  const modalContent = /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn("fixed inset-0 z-9999 flex items-center justify-center", overlayClassName),
+      onMouseDown: handleOverlayMouseDown,
+      onMouseUp: handleOverlayMouseUp,
+      children: [
+        /* @__PURE__ */ jsx14(
+          "div",
+          {
+            className: "absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ease-out",
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0
+            }
+          }
         ),
-        style: {
-          opacity: isOpen && !isAnimating ? 1 : 0,
-          transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
-          // Thêm dòng này để tạo hiệu ứng nảy
-          transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
-          width,
-          height
-        },
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          (title || description || showCloseButton) && /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between p-6 pb-0", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5", children: [
-              title && /* @__PURE__ */ jsx14("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
-              description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: description })
-            ] }),
-            showCloseButton && /* @__PURE__ */ jsx14(
-              "button",
-              {
-                onClick: onClose,
-                className: cn(
-                  "rounded-sm opacity-70 ring-offset-background transition-opacity",
-                  "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                  "disabled:pointer-events-none "
-                ),
-                children: /* @__PURE__ */ jsx14(X4, { className: "h-4 w-4 cursor-pointer" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx14("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
-        ]
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsxs12(
+          "div",
+          {
+            ref: modalContentRef,
+            className: cn(
+              "relative w-full rounded-lg bg-card text-card-foreground shadow-xl",
+              "transition-all duration-200 ease-out",
+              maxWidthClass,
+              fullWidth && "mx-0",
+              className
+            ),
+            style: {
+              opacity: isOpen && !isAnimating ? 1 : 0,
+              transform: isOpen && !isAnimating ? "scale(1)" : "scale(0.9)",
+              // Thêm dòng này để tạo hiệu ứng nảy
+              transition: "all 300ms cubic-bezier(0.34, 1.76, 0.64, 1)",
+              width,
+              height
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              (title || description || showCloseButton) && /* @__PURE__ */ jsxs12("div", { className: "flex items-start justify-between p-6 pb-0", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "space-y-1.5", children: [
+                  title && /* @__PURE__ */ jsx14("h2", { className: "text-lg font-semibold leading-none tracking-tight", children: title }),
+                  description && /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: description })
+                ] }),
+                showCloseButton && /* @__PURE__ */ jsx14(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: cn(
+                      "rounded-sm opacity-70 ring-offset-background transition-opacity",
+                      "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                      "disabled:pointer-events-none "
+                    ),
+                    children: /* @__PURE__ */ jsx14(X4, { className: "h-4 w-4 cursor-pointer" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: cn("p-6", noPadding && "p-0", contentClassName), children })
+            ]
+          }
+        )
+      ]
+    }
+  );
   return typeof window !== "undefined" ? createPortal(modalContent, document.body) : null;
 };
 var Modal_default = Modal;
 
 // ../../components/ui/Toast.tsx
-import { createContext, useContext, useState as useState9, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { createContext, useContext, useState as useState9, useCallback as useCallback2, useEffect as useEffect2, useRef as useRef4 } from "react";
 import { X as X5, CheckCircle as CheckCircle2, AlertCircle as AlertCircle2, Info, AlertTriangle as AlertTriangle2 } from "lucide-react";
 import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 var ToastContext = createContext(void 0);
@@ -2501,7 +2519,7 @@ var useToast = () => {
 };
 var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
   const [toasts, setToasts] = useState9([]);
-  const idRef = useRef3(0);
+  const idRef = useRef4(0);
   const removeToast = useCallback2((id) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
@@ -2513,11 +2531,6 @@ var ToastProvider = ({ children, position = "top-right", maxToasts = 5 }) => {
         const updated = [newToast, ...prev];
         return updated.slice(0, maxToasts);
       });
-      if (toast.duration !== 0) {
-        setTimeout(() => {
-          removeToast(id);
-        }, toast.duration || 5e3);
-      }
     },
     [maxToasts, removeToast]
   );
@@ -2538,33 +2551,31 @@ var ToastComponent = ({ toast, onRemove }) => {
   const [isVisible, setIsVisible] = useState9(false);
   const [progress, setProgress] = useState9(100);
   const [paused, setPaused] = useState9(false);
-  const [startTs] = useState9(() => Date.now());
   const total = toast.duration && toast.duration > 0 ? toast.duration : 5e3;
-  const [remaining, setRemaining] = useState9(total);
+  const endTsRef = useRef4(Date.now() + total);
+  const remainingRef = useRef4(total);
+  const pausedRef = useRef4(false);
+  const handleRemove = useCallback2(() => {
+    setIsVisible(false);
+    setTimeout(() => onRemove(toast.id), 150);
+  }, [onRemove, toast.id]);
   useEffect2(() => {
     setIsVisible(true);
     if (toast.duration === 0) return;
-    let raf;
-    const tick = () => {
-      if (!paused) {
-        const elapsed = Date.now() - startTs;
-        const remain = Math.max(total - elapsed, 0);
-        setRemaining(remain);
+    remainingRef.current = total;
+    endTsRef.current = Date.now() + total;
+    const intervalId = window.setInterval(() => {
+      if (!pausedRef.current) {
+        const remain = Math.max(endTsRef.current - Date.now(), 0);
+        remainingRef.current = remain;
         setProgress(remain / total * 100);
         if (remain === 0) {
           handleRemove();
-          return;
         }
       }
-      raf = requestAnimationFrame(tick);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-  const handleRemove = () => {
-    setIsVisible(false);
-    setTimeout(() => onRemove(toast.id), 150);
-  };
+    }, 50);
+    return () => window.clearInterval(intervalId);
+  }, [handleRemove, toast.duration, total]);
   const typeConfig = {
     success: {
       icon: CheckCircle2,
@@ -2600,8 +2611,18 @@ var ToastComponent = ({ toast, onRemove }) => {
       ),
       role: "status",
       "aria-live": toast.type === "error" ? "assertive" : "polite",
-      onMouseEnter: () => setPaused(true),
-      onMouseLeave: () => setPaused(false),
+      onMouseEnter: () => {
+        if (toast.duration === 0) return;
+        pausedRef.current = true;
+        remainingRef.current = Math.max(endTsRef.current - Date.now(), 0);
+        setPaused(true);
+      },
+      onMouseLeave: () => {
+        if (toast.duration === 0) return;
+        pausedRef.current = false;
+        endTsRef.current = Date.now() + remainingRef.current;
+        setPaused(false);
+      },
       children: [
         /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-3 p-4", children: [
           /* @__PURE__ */ jsx15(Icon, { className: cn("h-5 w-5 mt-0.5 shrink-0", config.iconClassName) }),
@@ -7762,7 +7783,7 @@ function CategoryTreeSelect({ categories, value, onChange, placeholder = "Ch\u1E
 }
 
 // ../../components/ui/ImageUpload.tsx
-import { useState as useState26, useRef as useRef11, useCallback as useCallback9 } from "react";
+import { useState as useState26, useRef as useRef12, useCallback as useCallback9 } from "react";
 import { Upload, X as X10, Image as ImageIcon, Loader2 as Loader25, Check as Check7 } from "lucide-react";
 import { useTranslations as useTranslations6 } from "next-intl";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
@@ -7784,7 +7805,7 @@ function ImageUpload({
   const [isDragging, setIsDragging] = useState26(false);
   const [uploading, setUploading] = useState26(false);
   const [uploadedImages, setUploadedImages] = useState26([]);
-  const fileInputRef = useRef11(null);
+  const fileInputRef = useRef12(null);
   const { addToast } = useToast();
   const t = useTranslations6("OCR.imageUpload");
   const previewSizes = {
@@ -10923,7 +10944,7 @@ function AccessDenied({
 
 // ../../components/ui/ThemeToggleHeadless.tsx
 import { Moon, Sun, Monitor } from "lucide-react";
-import { useEffect as useEffect20, useRef as useRef13, useState as useState33 } from "react";
+import { useEffect as useEffect20, useRef as useRef14, useState as useState33 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { Fragment as Fragment18, jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function ThemeToggleHeadless({
@@ -10934,7 +10955,7 @@ function ThemeToggleHeadless({
 }) {
   const [isOpen, setIsOpen] = useState33(false);
   const [mounted, setMounted] = useState33(false);
-  const triggerRef = useRef13(null);
+  const triggerRef = useRef14(null);
   const [dropdownPosition, setDropdownPosition] = useState33(null);
   useEffect20(() => setMounted(true), []);
   const themes = [
@@ -11025,7 +11046,7 @@ function ThemeToggleHeadless({
 }
 
 // ../../components/ui/LanguageSwitcherHeadless.tsx
-import { useRef as useRef14, useState as useState34 } from "react";
+import { useRef as useRef15, useState as useState34 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Globe } from "lucide-react";
 import { Fragment as Fragment19, jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
@@ -11038,7 +11059,7 @@ function LanguageSwitcherHeadless({
 }) {
   const [isOpen, setIsOpen] = useState34(false);
   const [dropdownPosition, setDropdownPosition] = useState34(null);
-  const triggerButtonRef = useRef14(null);
+  const triggerButtonRef = useRef15(null);
   const currentLanguage = locales.find((l) => l.code === currentLocale) || locales[0];
   const calculatePosition = () => {
     const rect = triggerButtonRef.current?.getBoundingClientRect();