@dreamtree-org/twreact-ui 1.1.72 → 1.1.73

package/dist/index.esm.js

@@ -227,6 +227,22 @@ const Calendar = createLucideIcon$1("Calendar", [
  */
 
 
+const CheckCircle2 = createLucideIcon$1("CheckCircle2", [
+  [
+    "path",
+    {
+      d: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
+      key: "14v8dr"
+    }
+  ],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+
 const CheckCircle = createLucideIcon$1("CheckCircle", [
   ["path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14", key: "g774vq" }],
   ["polyline", { points: "22 4 12 14.01 9 11.01", key: "6xbx8j" }]
@@ -637,6 +653,17 @@ const User = createLucideIcon$1("User", [
  */
 
 
+const XCircle = createLucideIcon$1("XCircle", [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
+  ["path", { d: "m9 9 6 6", key: "z0biqf" }]
+]);
+
+/**
+ * lucide-react v0.0.1 - ISC
+ */
+
+
 const X = createLucideIcon$1("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
@@ -19200,13 +19227,57 @@ Dialog.Footer = function (_ref6) {
   }));
 };
 
-var _excluded$7 = ["id", "title", "message", "type", "duration", "onClose", "position"];
+var _excluded$7 = ["id", "title", "message", "description", "type", "duration", "onClose", "position", "statusIcon", "actions", "color", "footerNote", "showFooterNote", "portal", "className"];
 function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Toast = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+var STATUS_CONFIG = {
+  success: {
+    icon: CheckCircle2,
+    iconClass: 'text-emerald-500 dark:text-emerald-400',
+    progressClass: 'bg-emerald-500 dark:bg-emerald-400'
+  },
+  error: {
+    icon: XCircle,
+    iconClass: 'text-rose-500 dark:text-rose-400',
+    progressClass: 'bg-rose-500 dark:bg-rose-400'
+  },
+  warning: {
+    icon: AlertTriangle,
+    iconClass: 'text-amber-500 dark:text-amber-400',
+    progressClass: 'bg-amber-500 dark:bg-amber-400'
+  },
+  info: {
+    icon: Info,
+    iconClass: 'text-sky-500 dark:text-sky-400',
+    progressClass: 'bg-sky-500 dark:bg-sky-400'
+  },
+  "default": {
+    icon: Bell,
+    iconClass: 'text-primary-500 dark:text-primary-400',
+    progressClass: 'bg-primary-500 dark:bg-primary-400'
+  }
+};
+var POSITION_CLASSES = {
+  'top-right': 'top-4 right-4 items-end',
+  'top-left': 'top-4 left-4 items-start',
+  'bottom-right': 'bottom-4 right-4 items-end',
+  'bottom-left': 'bottom-4 left-4 items-start',
+  'top-center': 'top-4 left-1/2 transform -translate-x-1/2 items-center',
+  'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2 items-center'
+};
+var STANDALONE_POSITION_CLASSES = {
+  'top-right': 'top-4 right-4',
+  'top-left': 'top-4 left-4',
+  'bottom-right': 'bottom-4 right-4',
+  'bottom-left': 'bottom-4 left-4',
+  'top-center': 'top-4 left-1/2 transform -translate-x-1/2',
+  'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2'
+};
+var Toast = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
     title = _ref.title,
     message = _ref.message,
+    description = _ref.description,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'info' : _ref$type,
     _ref$duration = _ref.duration,
@@ -19214,153 +19285,277 @@ var Toast = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onClose = _ref.onClose,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? 'top-right' : _ref$position,
+    statusIcon = _ref.statusIcon,
+    _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? [] : _ref$actions,
+    color = _ref.color,
+    footerNote = _ref.footerNote,
+    _ref$showFooterNote = _ref.showFooterNote,
+    showFooterNote = _ref$showFooterNote === void 0 ? false : _ref$showFooterNote,
+    _ref$portal = _ref.portal,
+    portal = _ref$portal === void 0 ? true : _ref$portal,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties$1(_ref, _excluded$7);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
-  useEffect(function () {
-    if (duration > 0) {
-      var timer = setTimeout(function () {
-        handleClose();
-      }, duration);
-      return function () {
-        return clearTimeout(timer);
-      };
-    }
-  }, [duration]);
-  var handleClose = function handleClose() {
-    setIsVisible(false);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLeaving = _useState4[0],
+    setIsLeaving = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPaused = _useState6[0],
+    setIsPaused = _useState6[1];
+  var progressBarRef = useRef(null);
+  var timerTextRef = useRef(null);
+  var startTimeRef = useRef(null);
+  var remainingRef = useRef(duration);
+  var timerRef = useRef(null);
+  var animFrameRef = useRef(null);
+  var handleClose = useCallback(function () {
+    if (isLeaving) return;
+    setIsLeaving(true);
     setTimeout(function () {
+      setIsVisible(false);
       onClose === null || onClose === void 0 || onClose(id);
     }, 300);
-  };
-  var icons = {
-    success: jsx(CheckCircle, {
-      className: "h-5 w-5 text-success-500"
-    }),
-    error: jsx(AlertCircle, {
-      className: "h-5 w-5 text-error-500"
-    }),
-    warning: jsx(AlertTriangle, {
-      className: "h-5 w-5 text-warning-500"
-    }),
-    info: jsx(Info, {
-      className: "h-5 w-5 text-primary-500"
-    })
-  };
-  var positionClasses = {
-    'top-right': 'top-4 right-4',
-    'top-left': 'top-4 left-4',
-    'bottom-right': 'bottom-4 right-4',
-    'bottom-left': 'bottom-4 left-4',
-    'top-center': 'top-4 left-1/2 transform -translate-x-1/2',
-    'bottom-center': 'bottom-4 left-1/2 transform -translate-x-1/2'
-  };
+  }, [id, onClose, isLeaving]);
+  var handleStopTimer = useCallback(function (e) {
+    e === null || e === void 0 || e.stopPropagation();
+    setIsPaused(true);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+  }, []);
+  // Direct DOM-based progress updates to prevent 60 FPS React re-renders and glitches
+  useEffect(function () {
+    if (duration <= 0) return;
+    if (isPaused) {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+      return;
+    }
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(function () {
+      handleClose();
+    }, remainingRef.current);
+    var _updateProgress = function updateProgress() {
+      var elapsed = startTimeRef.current ? Date.now() - startTimeRef.current : 0;
+      var currentRemaining = Math.max(0, remainingRef.current - elapsed);
+      var pct = currentRemaining / duration * 100;
+      if (progressBarRef.current) {
+        progressBarRef.current.style.width = "".concat(pct, "%");
+      }
+      if (timerTextRef.current) {
+        var secs = Math.ceil(currentRemaining / 1000);
+        timerTextRef.current.textContent = "This message will close in ".concat(secs, " seconds. ");
+      }
+      if (currentRemaining > 0 && !isPaused) {
+        animFrameRef.current = requestAnimationFrame(_updateProgress);
+      }
+    };
+    animFrameRef.current = requestAnimationFrame(_updateProgress);
+    return function () {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current);
+      if (!isPaused && startTimeRef.current) {
+        var elapsed = Date.now() - startTimeRef.current;
+        remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+      }
+    };
+  }, [duration, isPaused, handleClose]);
   if (!isVisible) return null;
-  return /*#__PURE__*/createPortal(jsx("div", _objectSpread$b(_objectSpread$b({
+  var statusStyle = STATUS_CONFIG[type] || STATUS_CONFIG.info || STATUS_CONFIG["default"];
+  var StatusIconComponent = statusStyle.icon;
+  var bodyText = description || message;
+  var toastContent = jsxs("div", _objectSpread$b(_objectSpread$b({
     ref: ref,
-    className: cn$1('fixed z-50 max-w-sm rounded-lg border border-gray-200 bg-white p-4 shadow-lg animate-slide-up', positionClasses[position])
+    onMouseEnter: function onMouseEnter() {
+      return setIsPaused(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsPaused(false);
+    },
+    className: cn$1('relative overflow-hidden rounded-xl border border-slate-200/90 bg-white/95 shadow-xl backdrop-blur-md transition-all duration-300', 'dark:border-slate-800/80 dark:bg-[#18181b] dark:text-slate-100 dark:shadow-2xl', 'max-w-md w-full', isLeaving ? 'opacity-0 scale-95 translate-y-1' : 'animate-slide-up opacity-100 scale-100', portal ? ['fixed z-50', STANDALONE_POSITION_CLASSES[position] || STANDALONE_POSITION_CLASSES['top-right']] : '', className)
   }, props), {}, {
-    children: jsxs("div", {
-      className: "flex items-start",
-      children: [jsx("div", {
-        className: "flex-shrink-0",
-        children: icons[type]
-      }), jsxs("div", {
-        className: "ml-3 flex-1",
-        children: [title && jsx("h4", {
-          className: "text-sm font-medium text-primary-900",
-          children: title
-        }), message && jsx("p", {
-          className: "mt-1 text-sm text-primary-600",
-          children: message
+    children: [jsx("div", {
+      className: "p-4",
+      children: jsxs("div", {
+        className: "flex items-start gap-3 justify-between",
+        children: [jsx("span", {
+          className: "flex-shrink-0 mt-0.5",
+          children: statusIcon ? statusIcon : jsx(StatusIconComponent, {
+            className: cn$1('h-5 w-5', statusStyle.iconClass)
+          })
+        }), jsxs("div", {
+          className: "flex-1 min-w-0 pr-2",
+          children: [title && jsx("h4", {
+            className: "text-sm font-semibold text-slate-900 dark:text-slate-100 leading-snug",
+            children: title
+          }), bodyText && jsx("p", {
+            className: "mt-1 text-xs text-slate-600 dark:text-slate-400 leading-relaxed whitespace-pre-line",
+            children: bodyText
+          }), actions && actions.length > 0 && jsx("div", {
+            className: "mt-3 flex items-center gap-2 flex-wrap",
+            children: actions.map(function (actItem, idx) {
+              return jsx("button", {
+                type: "button",
+                onClick: function onClick(e) {
+                  var _actItem$onClick;
+                  (_actItem$onClick = actItem.onClick) === null || _actItem$onClick === void 0 || _actItem$onClick.call(actItem, e);
+                  if (actItem.dismiss !== false) {
+                    handleClose();
+                  }
+                },
+                className: cn$1('px-3 py-1.5 text-xs font-medium rounded-lg transition-colors border shadow-xs', actItem.variant === 'primary' ? 'bg-primary-600 hover:bg-primary-700 text-white border-primary-600' : 'bg-slate-100 dark:bg-zinc-800/80 text-slate-700 dark:text-zinc-200 border-slate-200 dark:border-zinc-700 hover:bg-slate-200 dark:hover:bg-zinc-700', actItem.className),
+                children: actItem.label
+              }, actItem.id || actItem.label || "act-".concat(idx));
+            })
+          })]
+        }), jsx("button", {
+          type: "button",
+          "aria-label": "Close notification",
+          className: "flex-shrink-0 rounded-lg p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-zinc-800/70 transition-colors outline-none focus:ring-2 focus:ring-primary-500",
+          onClick: handleClose,
+          children: jsx(X, {
+            className: "h-4 w-4"
+          })
         })]
-      }), jsx("button", {
-        type: "button",
-        className: "ml-4 flex-shrink-0 rounded-md p-1 text-primary-400 hover:text-primary-600 hover:bg-gray-100",
-        onClick: handleClose,
-        children: jsx(X, {
-          className: "h-4 w-4"
+      })
+    }), (showFooterNote || footerNote) && duration > 0 && jsx("div", {
+      className: "px-4 py-2 bg-slate-50 dark:bg-zinc-950/40 border-t border-slate-100 dark:border-zinc-800/50 text-[11px] text-slate-500 dark:text-zinc-400 flex items-center justify-between",
+      children: jsx("span", {
+        children: footerNote ? footerNote : jsxs(Fragment, {
+          children: [jsxs("span", {
+            ref: timerTextRef,
+            children: ["This message will close in ", Math.ceil(duration / 1000), " seconds.", ' ']
+          }), jsx("button", {
+            type: "button",
+            onClick: handleStopTimer,
+            className: "font-medium text-slate-700 dark:text-zinc-200 hover:underline inline",
+            children: "Click to stop."
+          })]
         })
-      })]
-    })
-  })), document.body);
+      })
+    }), duration > 0 && jsx("div", {
+      className: "absolute bottom-0 left-0 right-0 h-0.5 bg-slate-100 dark:bg-zinc-800/80 overflow-hidden rounded-b-xl",
+      children: jsx("div", {
+        ref: progressBarRef,
+        className: cn$1('h-full transition-all ease-linear', color ? '' : statusStyle.progressClass),
+        style: {
+          width: '100%',
+          backgroundColor: color || undefined
+        }
+      })
+    })]
+  }));
+  if (portal) {
+    return /*#__PURE__*/createPortal(toastContent, document.body);
+  }
+  return toastContent;
 });
 Toast.displayName = 'Toast';
-// Toast Container Component
+// Toast Container Component for vertical stacking & scrollable overflow without visible scrollbars
 var ToastContainer = function ToastContainer(_ref2) {
   var _ref2$toasts = _ref2.toasts,
     toasts = _ref2$toasts === void 0 ? [] : _ref2$toasts,
     _ref2$position = _ref2.position,
     position = _ref2$position === void 0 ? 'top-right' : _ref2$position,
-    onRemove = _ref2.onRemove;
-  return jsx("div", {
-    className: "fixed z-50 space-y-2",
-    style: _defineProperty$4(_defineProperty$4({}, position.includes('top') ? 'top' : 'bottom', '1rem'), position.includes('right') ? 'right' : position.includes('left') ? 'left' : 'left', position.includes('center') ? '50%' : '1rem'),
-    children: toasts.map(function (toast) {
-      return jsx(Toast, _objectSpread$b(_objectSpread$b({}, toast), {}, {
-        position: position,
-        onClose: onRemove
-      }), toast.id);
+    onRemove = _ref2.onRemove,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className;
+  if (!toasts || toasts.length === 0) {
+    return null;
+  }
+  var posClass = POSITION_CLASSES[position] || POSITION_CLASSES['top-right'];
+  return /*#__PURE__*/createPortal(jsx("div", {
+    className: cn$1('fixed z-50 flex flex-col gap-3 max-h-[calc(100vh-2rem)] overflow-y-auto overflow-x-hidden p-2 pointer-events-none', '[scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden', posClass, className),
+    children: toasts.map(function (t) {
+      return jsx("div", {
+        className: "pointer-events-auto w-full max-w-md",
+        children: jsx(Toast, _objectSpread$b(_objectSpread$b({}, t), {}, {
+          portal: false,
+          position: position,
+          onClose: onRemove
+        }))
+      }, t.id);
     })
-  });
+  }), document.body);
 };
 // Toast Hook
 var useToast = function useToast() {
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    toasts = _useState4[0],
-    setToasts = _useState4[1];
-  var addToast = function addToast(toast) {
-    var id = Date.now().toString();
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    toasts = _useState8[0],
+    setToasts = _useState8[1];
+  var addToast = useCallback(function (toastOptions) {
+    var id = toastOptions.id || "".concat(Date.now(), "-").concat(Math.random().toString(36).slice(2, 7));
+    var newToast = _objectSpread$b(_objectSpread$b({}, toastOptions), {}, {
+      id: id
+    });
     setToasts(function (prev) {
-      return [].concat(_toConsumableArray$1(prev), [_objectSpread$b(_objectSpread$b({}, toast), {}, {
-        id: id
-      })]);
+      return [].concat(_toConsumableArray$1(prev), [newToast]);
     });
-  };
-  var removeToast = function removeToast(id) {
+    return id;
+  }, []);
+  var removeToast = useCallback(function (id) {
     setToasts(function (prev) {
-      return prev.filter(function (toast) {
-        return toast.id !== id;
+      return prev.filter(function (t) {
+        return t.id !== id;
       });
     });
+  }, []);
+  var clearToasts = useCallback(function () {
+    setToasts([]);
+  }, []);
+  var toast = useCallback(function (options) {
+    return addToast(typeof options === 'string' ? {
+      message: options
+    } : options);
+  }, [addToast]);
+  toast.success = function (title, message, options) {
+    return addToast(_objectSpread$b({
+      title: title,
+      message: message,
+      type: 'success'
+    }, _typeof$4(options) === 'object' ? options : {}));
   };
-  var toast = {
-    success: function success(title, message, options) {
-      return addToast(_objectSpread$b({
-        title: title,
-        message: message,
-        type: 'success'
-      }, options));
-    },
-    error: function error(title, message, options) {
-      return addToast(_objectSpread$b({
-        title: title,
-        message: message,
-        type: 'error'
-      }, options));
-    },
-    warning: function warning(title, message, options) {
-      return addToast(_objectSpread$b({
-        title: title,
-        message: message,
-        type: 'warning'
-      }, options));
-    },
-    info: function info(title, message, options) {
-      return addToast(_objectSpread$b({
-        title: title,
-        message: message,
-        type: 'info'
-      }, options));
-    }
+  toast.error = function (title, message, options) {
+    return addToast(_objectSpread$b({
+      title: title,
+      message: message,
+      type: 'error'
+    }, _typeof$4(options) === 'object' ? options : {}));
+  };
+  toast.warning = function (title, message, options) {
+    return addToast(_objectSpread$b({
+      title: title,
+      message: message,
+      type: 'warning'
+    }, _typeof$4(options) === 'object' ? options : {}));
+  };
+  toast.info = function (title, message, options) {
+    return addToast(_objectSpread$b({
+      title: title,
+      message: message,
+      type: 'info'
+    }, _typeof$4(options) === 'object' ? options : {}));
+  };
+  toast["default"] = function (title, message, options) {
+    return addToast(_objectSpread$b({
+      title: title,
+      message: message,
+      type: 'default'
+    }, _typeof$4(options) === 'object' ? options : {}));
   };
   return {
     toast: toast,
     toasts: toasts,
-    removeToast: removeToast
+    removeToast: removeToast,
+    clearToasts: clearToasts,
+    addToast: addToast
   };
 };