@dreamtree-org/twreact-ui 1.1.72 → 1.2.0

package/dist/index.js

@@ -247,6 +247,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" }]
@@ -657,6 +673,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" }]
@@ -5702,7 +5729,7 @@ function FieldInput(_ref) {
   });
 }
 
-var _excluded$x = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete"],
+var _excluded$x = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow"],
   _excluded2$4 = ["_key", "_isNew"];
 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; }
@@ -5715,7 +5742,7 @@ var DEFAULT_THEME = {
   menuBg: "bg-white",
   menuItemHover: "hover:bg-gray-50"
 };
-var Table = function Table(_ref) {
+var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
   var _validationErrors$;
   var _ref$data = _ref.data,
     initialData = _ref$data === void 0 ? DEFAULT_DATA : _ref$data,
@@ -5785,6 +5812,14 @@ var Table = function Table(_ref) {
     onEdit = _ref.onEdit,
     onRowAdd = _ref.onRowAdd,
     onRowDelete = _ref.onRowDelete,
+    _ref$editKeyBinding = _ref.editKeyBinding,
+    editKeyBinding = _ref$editKeyBinding === void 0 ? "e" : _ref$editKeyBinding,
+    _ref$newRowPosition = _ref.newRowPosition,
+    newRowPosition = _ref$newRowPosition === void 0 ? "bottom" : _ref$newRowPosition,
+    addRowRef = _ref.addRowRef,
+    onInitAddRow = _ref.onInitAddRow,
+    renderAddRowButton = _ref.renderAddRowButton,
+    renderExternalAddRow = _ref.renderExternalAddRow,
     props = _objectWithoutProperties$1(_ref, _excluded$x);
   theme = _objectSpread$B(_objectSpread$B({}, DEFAULT_THEME), theme);
   // State
@@ -6062,9 +6097,10 @@ var Table = function Table(_ref) {
       return _objectSpread$B(_objectSpread$B({}, prev), {}, _defineProperty$4({}, rowKey, nextRowEdits));
     });
   }, [newRows, tableData, onEdit]);
-  var handleAddRow = React.useCallback(function () {
+  var _handleAddRow = React.useCallback(function (positionOverride) {
     var _columnsState$find, _columnsState$;
-    var newKey = "new-".concat(Date.now());
+    var targetPos = typeof positionOverride === "string" && (positionOverride === "top" || positionOverride === "bottom") ? positionOverride : newRowPosition || "bottom";
+    var newKey = "new-".concat(Date.now(), "-").concat(Math.random().toString(36).substring(2, 6));
     var newRowObj = {
       _key: newKey,
       _isNew: true
@@ -6074,23 +6110,51 @@ var Table = function Table(_ref) {
       newRowObj[col.key] = (_col$defaultValue = col.defaultValue) !== null && _col$defaultValue !== void 0 ? _col$defaultValue : "";
     });
     setNewRows(function (prev) {
+      if (targetPos === "top") {
+        return [newRowObj].concat(_toConsumableArray$1(prev));
+      }
       return [].concat(_toConsumableArray$1(prev), [newRowObj]);
     });
     var firstColKey = ((_columnsState$find = columnsState.find(function (c) {
       return c.isVisible !== false;
     })) === null || _columnsState$find === void 0 ? void 0 : _columnsState$find.key) || ((_columnsState$ = columnsState[0]) === null || _columnsState$ === void 0 ? void 0 : _columnsState$.key);
+    var initialRowIndex = targetPos === "top" ? 0 : tableData.length + newRows.length;
     setActiveCell({
       rowKey: newKey,
       colKey: firstColKey,
-      rowIndex: tableData.length + newRows.length
+      rowIndex: initialRowIndex
     });
     setEditingCell({
       rowKey: newKey,
       colKey: firstColKey,
-      rowIndex: tableData.length + newRows.length
+      rowIndex: initialRowIndex
     });
-    onRowAdd === null || onRowAdd === void 0 || onRowAdd(newRowObj);
-  }, [columnsState, tableData.length, newRows.length, onRowAdd]);
+    onRowAdd === null || onRowAdd === void 0 || onRowAdd(newRowObj, targetPos);
+  }, [columnsState, tableData.length, newRows.length, onRowAdd, newRowPosition]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      addRow: function addRow(pos) {
+        return _handleAddRow(pos);
+      },
+      addNewRow: function addNewRow(pos) {
+        return _handleAddRow(pos);
+      },
+      handleAddRow: function handleAddRow(pos) {
+        return _handleAddRow(pos);
+      },
+      tableContainerRef: tableContainerRef.current
+    };
+  }, [_handleAddRow]);
+  React.useEffect(function () {
+    if (addRowRef) {
+      addRowRef.current = function (pos) {
+        return _handleAddRow(pos);
+      };
+    }
+    onInitAddRow === null || onInitAddRow === void 0 || onInitAddRow(function (pos) {
+      return _handleAddRow(pos);
+    });
+  }, [addRowRef, onInitAddRow, _handleAddRow]);
   var handleDeleteNewRow = React.useCallback(function (rowKey) {
     setNewRows(function (prev) {
       return prev.filter(function (r) {
@@ -6354,6 +6418,15 @@ var Table = function Table(_ref) {
       };
     });
   }, [limitOptions]);
+  var isEditKey = React.useCallback(function (key, e) {
+    if (typeof editKeyBinding === "function") {
+      return editKeyBinding(e);
+    }
+    if (typeof editKeyBinding === "string" && editKeyBinding.trim() !== "") {
+      return key.toLowerCase() === editKeyBinding.toLowerCase();
+    }
+    return key.toLowerCase() === "e" || key === "Insert";
+  }, [editKeyBinding]);
   var handleTableKeyDown = React.useCallback(function (e) {
     if (!interactive) return;
     var key = e.key,
@@ -6366,24 +6439,33 @@ var Table = function Table(_ref) {
       }
       return;
     }
-    // Enter: Save changes only when there are modified changes (isDirty)
-    if (key === "Enter") {
+    // Enter: Save changes when there are modified changes (isDirty)
+    if (key === "Enter" && isDirty) {
       var _e$target;
       if (((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === "TEXTAREA" && shiftKey) {
         return;
       }
-      if (isDirty) {
-        e.preventDefault();
-        setEditingCell(null);
-        if (isValid && !isSaving) {
-          handleSave();
-        }
+      e.preventDefault();
+      setEditingCell(null);
+      if (isValid && !isSaving) {
+        handleSave();
       }
       return;
     }
+    // Standard Edit Key ('e' or custom editKeyBinding) when focused on active cell and not editing: enter edit mode
+    if (isEditKey(key, e) && activeCell && !editingCell) {
+      var col = visibleColumns.find(function (c) {
+        return c.key === activeCell.colKey;
+      });
+      if (col && col.editable !== false) {
+        e.preventDefault();
+        setEditingCell(activeCell);
+        return;
+      }
+    }
     var currentCell = activeCell || editingCell;
     if (!currentCell) return;
-    var allRows = [].concat(_toConsumableArray$1(paginatedData), _toConsumableArray$1(newRows));
+    var allRows = newRowPosition === "top" ? [].concat(_toConsumableArray$1(newRows), _toConsumableArray$1(paginatedData)) : [].concat(_toConsumableArray$1(paginatedData), _toConsumableArray$1(newRows));
     if (allRows.length === 0 || visibleColumns.length === 0) return;
     var rIdx = allRows.findIndex(function (r, idx) {
       var rKey = r._key || getRowKey(r, startIndex + idx);
@@ -6702,6 +6784,26 @@ var Table = function Table(_ref) {
     invalidCellSet: invalidCellSet,
     pendingEdits: pendingEdits
   };
+  var renderAddRowClickableRow = React.useCallback(function () {
+    return jsxRuntime.jsx("tr", {
+      onClick: function onClick() {
+        return _handleAddRow(newRowPosition);
+      },
+      className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
+      children: jsxRuntime.jsx("td", {
+        colSpan: visibleCount,
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        children: jsxRuntime.jsxs("div", {
+          className: "flex items-center justify-start gap-2",
+          children: [jsxRuntime.jsx(Plus, {
+            className: "w-4 h-4 text-primary-600 group-hover:scale-110 transition-transform"
+          }), jsxRuntime.jsx("span", {
+            children: "Click here to add new record instantly...."
+          })]
+        })
+      })
+    });
+  }, [_handleAddRow, newRowPosition, visibleCount]);
   return jsxRuntime.jsxs("div", {
     ref: tableContainerRef,
     tabIndex: interactive ? 0 : undefined,
@@ -6746,7 +6848,14 @@ var Table = function Table(_ref) {
         })]
       }), jsxRuntime.jsxs("div", {
         className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto",
-        children: [interactive && isDirty && jsxRuntime.jsxs("div", {
+        children: [interactive && (renderAddRowButton || renderExternalAddRow) && jsxRuntime.jsx("div", {
+          className: "flex items-center gap-2",
+          children: typeof (renderAddRowButton || renderExternalAddRow) === "function" ? (renderAddRowButton || renderExternalAddRow)({
+            addRow: _handleAddRow,
+            handleAddRow: _handleAddRow,
+            newRowPosition: newRowPosition
+          }) : renderAddRowButton || renderExternalAddRow
+        }), interactive && isDirty && jsxRuntime.jsxs("div", {
           className: "flex items-center gap-2 flex-wrap",
           children: [jsxRuntime.jsxs("button", {
             type: "button",
@@ -6942,9 +7051,9 @@ var Table = function Table(_ref) {
               className: "pb-4"
             })]
           })]
-        }), jsxRuntime.jsxs("tbody", {
+        }), jsxRuntime.jsx("tbody", {
           className: "divide-y divide-gray-200",
-          children: [loading ? jsxRuntime.jsx("tr", {
+          children: loading ? jsxRuntime.jsx("tr", {
             children: jsxRuntime.jsx("td", {
               colSpan: visibleCount,
               className: "px-6 py-8 text-center",
@@ -6958,32 +7067,43 @@ var Table = function Table(_ref) {
                 })]
               })
             })
-          }) : paginatedData.length === 0 && newRows.length === 0 ? jsxRuntime.jsx("tr", {
-            children: jsxRuntime.jsx("td", {
-              colSpan: visibleCount,
-              className: "px-6 py-8 text-center",
-              children: jsxRuntime.jsxs("div", {
-                className: "flex flex-col items-center gap-2",
-                children: [jsxRuntime.jsx("div", {
-                  className: "text-primary-400",
-                  children: jsxRuntime.jsx(List, {
-                    className: "h-8 w-8"
-                  })
-                }), jsxRuntime.jsx("span", {
-                  className: "text-sm text-primary-500",
-                  children: "No results found."
-                })]
+          }) : paginatedData.length === 0 && newRows.length === 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [interactive && newRowPosition === "top" && renderAddRowClickableRow(), jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                colSpan: visibleCount,
+                className: "px-6 py-8 text-center",
+                children: jsxRuntime.jsxs("div", {
+                  className: "flex flex-col items-center gap-2",
+                  children: [jsxRuntime.jsx("div", {
+                    className: "text-primary-400",
+                    children: jsxRuntime.jsx(List, {
+                      className: "h-8 w-8"
+                    })
+                  }), jsxRuntime.jsx("span", {
+                    className: "text-sm text-primary-500",
+                    children: "No results found."
+                  })]
+                })
               })
-            })
+            }), interactive && newRowPosition !== "top" && renderAddRowClickableRow()]
           }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-            children: [paginatedData.map(function (row, rowIndexInPage) {
+            children: [interactive && newRowPosition === "top" && renderAddRowClickableRow(), interactive && newRowPosition === "top" && newRows.map(function (newRow, newIdx) {
+              return jsxRuntime.jsx(TableRow, _objectSpread$B({
+                row: newRow,
+                rowIndexInPage: newIdx,
+                startIndex: 0,
+                visibleCount: visibleCount,
+                isNewRow: true,
+                onDeleteNewRow: handleDeleteNewRow
+              }, rowSharedProps), newRow._key);
+            }), paginatedData.map(function (row, rowIndexInPage) {
               return jsxRuntime.jsx(TableRow, _objectSpread$B({
                 row: row,
                 rowIndexInPage: rowIndexInPage,
                 startIndex: startIndex,
                 visibleCount: visibleCount
               }, rowSharedProps), getRowKey(row, startIndex + rowIndexInPage));
-            }), interactive && newRows.map(function (newRow, newIdx) {
+            }), interactive && newRowPosition !== "top" && newRows.map(function (newRow, newIdx) {
               return jsxRuntime.jsx(TableRow, _objectSpread$B({
                 row: newRow,
                 rowIndexInPage: paginatedData.length + newIdx,
@@ -6992,23 +7112,8 @@ var Table = function Table(_ref) {
                 isNewRow: true,
                 onDeleteNewRow: handleDeleteNewRow
               }, rowSharedProps), newRow._key);
-            })]
-          }), interactive && jsxRuntime.jsx("tr", {
-            onClick: handleAddRow,
-            className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-dashed border-primary-300 cursor-pointer group",
-            children: jsxRuntime.jsx("td", {
-              colSpan: visibleCount,
-              className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
-              children: jsxRuntime.jsxs("div", {
-                className: "flex items-center justify-start gap-2",
-                children: [jsxRuntime.jsx(Plus, {
-                  className: "w-4 h-4 text-primary-600 group-hover:scale-110 transition-transform"
-                }), jsxRuntime.jsx("span", {
-                  children: "Click here to add new record instantly...."
-                })]
-              })
-            })
-          })]
+            }), interactive && newRowPosition !== "top" && renderAddRowClickableRow()]
+          })
         })]
       }))
     }), isMobileView && jsxRuntime.jsx("div", {
@@ -7056,7 +7161,7 @@ var Table = function Table(_ref) {
       theme: safeTheme
     })]
   });
-};
+});
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -13677,7 +13782,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function Accordion(_ref, ref) {
 });
 Accordion.displayName = "Accordion";
 
-var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass"];
+var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
 function ownKeys$w(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$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SIZE_CLASSES = {
@@ -13744,7 +13849,6 @@ var COLOR_PRESETS = {
   }
 };
 var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _props$wrapperProps;
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -13772,6 +13876,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     color = _ref$color === void 0 ? "primary" : _ref$color,
     iconClass = _ref.iconClass,
     checkedClass = _ref.checkedClass,
+    wrapperProps = _ref.wrapperProps,
     props = _objectWithoutProperties$1(_ref, _excluded$s);
   var autoId = React.useId();
   var inputId = id || "".concat(autoId, "-checkbox");
@@ -13812,7 +13917,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   } : {};
   return jsxRuntime.jsxs("div", _objectSpread$w(_objectSpread$w({
     className: wrapperCls
-  }, (_props$wrapperProps = props === null || props === void 0 ? void 0 : props.wrapperProps) !== null && _props$wrapperProps !== void 0 ? _props$wrapperProps : {}), {}, {
+  }, wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), {}, {
     children: [label && labelPosition === "left" && jsxRuntime.jsx("label", {
       htmlFor: inputId,
       className: "".concat(sizeClass.label, " select-none mr-2"),
@@ -13831,7 +13936,6 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         className: "peer absolute inset-0 m-0 p-0 opacity-0 z-10",
         // ensure we set checked only from the boolean (avoid undefined)
         checked: Boolean(currentChecked),
-        defaultChecked: defaultChecked,
         onChange: handleChange,
         disabled: disabled,
         required: required,
@@ -13858,6 +13962,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     })]
   }));
 });
+Checkbox.displayName = "Checkbox";
 
 var _excluded$r = ["value", "defaultValue", "onChange", "swatches", "showAlpha", "size", "disabled", "className", "label", "id"];
 function ownKeys$v(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; }
@@ -19220,13 +19325,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 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__*/React.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,
@@ -19234,153 +19383,277 @@ var Toast = /*#__PURE__*/React.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 = React.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
-  React.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 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLeaving = _useState4[0],
+    setIsLeaving = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isPaused = _useState6[0],
+    setIsPaused = _useState6[1];
+  var progressBarRef = React.useRef(null);
+  var timerTextRef = React.useRef(null);
+  var startTimeRef = React.useRef(null);
+  var remainingRef = React.useRef(duration);
+  var timerRef = React.useRef(null);
+  var animFrameRef = React.useRef(null);
+  var handleClose = React.useCallback(function () {
+    if (isLeaving) return;
+    setIsLeaving(true);
     setTimeout(function () {
+      setIsVisible(false);
       onClose === null || onClose === void 0 || onClose(id);
     }, 300);
-  };
-  var icons = {
-    success: jsxRuntime.jsx(CheckCircle, {
-      className: "h-5 w-5 text-success-500"
-    }),
-    error: jsxRuntime.jsx(AlertCircle, {
-      className: "h-5 w-5 text-error-500"
-    }),
-    warning: jsxRuntime.jsx(AlertTriangle, {
-      className: "h-5 w-5 text-warning-500"
-    }),
-    info: jsxRuntime.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 = React.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
+  React.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__*/ReactDOM.createPortal(jsxRuntime.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 = jsxRuntime.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: jsxRuntime.jsxs("div", {
-      className: "flex items-start",
-      children: [jsxRuntime.jsx("div", {
-        className: "flex-shrink-0",
-        children: icons[type]
-      }), jsxRuntime.jsxs("div", {
-        className: "ml-3 flex-1",
-        children: [title && jsxRuntime.jsx("h4", {
-          className: "text-sm font-medium text-primary-900",
-          children: title
-        }), message && jsxRuntime.jsx("p", {
-          className: "mt-1 text-sm text-primary-600",
-          children: message
+    children: [jsxRuntime.jsx("div", {
+      className: "p-4",
+      children: jsxRuntime.jsxs("div", {
+        className: "flex items-start gap-3 justify-between",
+        children: [jsxRuntime.jsx("span", {
+          className: "flex-shrink-0 mt-0.5",
+          children: statusIcon ? statusIcon : jsxRuntime.jsx(StatusIconComponent, {
+            className: cn$1('h-5 w-5', statusStyle.iconClass)
+          })
+        }), jsxRuntime.jsxs("div", {
+          className: "flex-1 min-w-0 pr-2",
+          children: [title && jsxRuntime.jsx("h4", {
+            className: "text-sm font-semibold text-slate-900 dark:text-slate-100 leading-snug",
+            children: title
+          }), bodyText && jsxRuntime.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 && jsxRuntime.jsx("div", {
+            className: "mt-3 flex items-center gap-2 flex-wrap",
+            children: actions.map(function (actItem, idx) {
+              return jsxRuntime.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));
+            })
+          })]
+        }), jsxRuntime.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: jsxRuntime.jsx(X, {
+            className: "h-4 w-4"
+          })
         })]
-      }), jsxRuntime.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: jsxRuntime.jsx(X, {
-          className: "h-4 w-4"
+      })
+    }), (showFooterNote || footerNote) && duration > 0 && jsxRuntime.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: jsxRuntime.jsx("span", {
+        children: footerNote ? footerNote : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsxs("span", {
+            ref: timerTextRef,
+            children: ["This message will close in ", Math.ceil(duration / 1000), " seconds.", ' ']
+          }), jsxRuntime.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 && jsxRuntime.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: jsxRuntime.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__*/ReactDOM.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 jsxRuntime.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 jsxRuntime.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__*/ReactDOM.createPortal(jsxRuntime.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 jsxRuntime.jsx("div", {
+        className: "pointer-events-auto w-full max-w-md",
+        children: jsxRuntime.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 = React.useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    toasts = _useState4[0],
-    setToasts = _useState4[1];
-  var addToast = function addToast(toast) {
-    var id = Date.now().toString();
+  var _useState7 = React.useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    toasts = _useState8[0],
+    setToasts = _useState8[1];
+  var addToast = React.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 = React.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 = React.useCallback(function () {
+    setToasts([]);
+  }, []);
+  var toast = React.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
   };
 };