@dreamtree-org/twreact-ui 1.1.71 → 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" }]
@@ -3171,8 +3198,8 @@ function cn$1() {
 }
 
 var _excluded$A = ["id", "className", "type", "label", "placeholder", "error", "success", "disabled", "required", "clearable", "icon", "iconPosition", "onClear", "showCount", "maxLength", "readOnly", "onChange", "value", "defaultValue"];
-function ownKeys$F(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$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$G(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$G(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$G(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$G(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
   var _ref$current$value2, _ref$current;
   var id = props.id,
@@ -3287,7 +3314,7 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
           className: "text-primary-400",
           children: icon
         })
-      }), jsx("input", _objectSpread$F({
+      }), jsx("input", _objectSpread$G({
         id: inputId,
         ref: ref,
         type: inputType,
@@ -3348,8 +3375,8 @@ var Input = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
 });
 
 var _excluded$z = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
-function ownKeys$E(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$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$F(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$F(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$F(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$F(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$variant = _ref.variant,
@@ -3379,7 +3406,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // Full width
     'w-full': fullWidth
   }, className);
-  return jsxs("button", _objectSpread$E(_objectSpread$E({
+  return jsxs("button", _objectSpread$F(_objectSpread$F({
     ref: ref,
     className: baseClasses,
     disabled: disabled || loading
@@ -3414,8 +3441,8 @@ function _toConsumableArray$1(r) {
 }
 
 var _excluded$y = ["options", "value", "onChange", "placeholder", "label", "error", "disabled", "required", "multiSelect", "searchable", "grouped", "onMenuItemRender", "className", "allowClear", "creatable", "onCreateOption", "onSearch", "loading", "selectAllOption", "closeOnSelect", "maxTagCount", "renderGroupLabel", "name"];
-function ownKeys$D(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$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$E(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$E(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Enhanced Select component (debounce removed)
  * - Supports single and multi select
@@ -3436,7 +3463,7 @@ var flattenGroups = function flattenGroups() {
   return groups.reduce(function (acc, g) {
     var groupLabel = g.label;
     g.options.forEach(function (opt) {
-      return acc.push(_objectSpread$D(_objectSpread$D({}, opt), {}, {
+      return acc.push(_objectSpread$E(_objectSpread$E({}, opt), {}, {
         _group: groupLabel
       }));
     });
@@ -3532,7 +3559,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
   var flatOptions = useMemo(function () {
     if (grouped) return flattenGroups(options);
     return options.map(function (opt) {
-      return _objectSpread$D({}, opt);
+      return _objectSpread$E({}, opt);
     });
   }, [options, grouped]);
   var selectedValues = multiSelect ? Array.isArray(value) ? value : [] : value;
@@ -3557,7 +3584,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     }
     if (grouped) {
       return options.map(function (g) {
-        return _objectSpread$D(_objectSpread$D({}, g), {}, {
+        return _objectSpread$E(_objectSpread$E({}, g), {}, {
           options: g.options.filter(function (o) {
             return o.label.toLowerCase().includes(searchTerm.toLowerCase());
           })
@@ -3827,7 +3854,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
               className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100",
               onClick: function onClick() {
                 return setCollapsedGroups(function (prev) {
-                  return _objectSpread$D(_objectSpread$D({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
+                  return _objectSpread$E(_objectSpread$E({}, prev), {}, _defineProperty$4({}, group.label, !prev[group.label]));
                 });
               },
               children: jsx(ChevronDown, {
@@ -3921,7 +3948,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
     }), jsxs("div", {
       ref: selectRef,
       className: "relative",
-      children: [jsxs("button", _objectSpread$D(_objectSpread$D({
+      children: [jsxs("button", _objectSpread$E(_objectSpread$E({
         type: "button",
         "aria-haspopup": "listbox",
         "aria-expanded": isOpen,
@@ -3988,7 +4015,7 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         // escapes any ancestor overflow:hidden|auto|scroll. Coordinates
         // are anchored to the trigger's viewport rect; width matches the
         // trigger; maxHeight is driven by available space.
-        style: _objectSpread$D({
+        style: _objectSpread$E({
           left: menuCoords ? "".concat(menuCoords.left, "px") : undefined,
           top: menuCoords ? "".concat(menuCoords.top, "px") : undefined,
           width: menuCoords ? "".concat(menuCoords.width, "px") : undefined
@@ -4470,8 +4497,8 @@ var DEFAULT_ACTIONS = [{
   })
 }];
 
-function ownKeys$C(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$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$D(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$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
 function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -4535,7 +4562,7 @@ var mergeDefaultActions = function mergeDefaultActions(overrides, defaults) {
     _iterator.f();
   }
   var merged = defaults.map(function (d) {
-    return d !== null && d !== void 0 && d.name && byName.has(d.name) ? _objectSpread$C(_objectSpread$C({}, d), byName.get(d.name)) : d;
+    return d !== null && d !== void 0 && d.name && byName.has(d.name) ? _objectSpread$D(_objectSpread$D({}, d), byName.get(d.name)) : d;
   });
   var defaultNames = new Set(defaults.map(function (d) {
     return d === null || d === void 0 ? void 0 : d.name;
@@ -4577,7 +4604,7 @@ var resolveActions = function resolveActions(actions, row, index) {
       var action = _step2.value;
       if (!action || _typeof$4(action) !== "object") continue;
       if (callIfFn(action.hidden, row, index)) continue;
-      var resolved = _objectSpread$C(_objectSpread$C({}, action), {}, {
+      var resolved = _objectSpread$D(_objectSpread$D({}, action), {}, {
         label: callIfFn(action.label, row, index),
         icon: callIfFn(action.icon, row, index),
         disabled: !!callIfFn(action.disabled, row, index),
@@ -5114,6 +5141,8 @@ function ActionMenu(_ref) {
   }), document.body);
 }
 
+function ownKeys$C(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$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$C(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Desktop table row component
  */
@@ -5162,6 +5191,8 @@ function TableRow(_ref) {
     renderInteractiveCellInput = _ref$renderInteractiv === void 0 ? null : _ref$renderInteractiv,
     _ref$invalidCellSet = _ref.invalidCellSet,
     invalidCellSet = _ref$invalidCellSet === void 0 ? null : _ref$invalidCellSet,
+    _ref$pendingEdits = _ref.pendingEdits,
+    pendingEdits = _ref$pendingEdits === void 0 ? null : _ref$pendingEdits,
     _ref$isNewRow = _ref.isNewRow,
     isNewRow = _ref$isNewRow === void 0 ? false : _ref$isNewRow,
     _ref$onDeleteNewRow = _ref.onDeleteNewRow,
@@ -5189,6 +5220,10 @@ function TableRow(_ref) {
   var stripeBg = stripedRows && !isSelected && Array.isArray(stripeColors) && stripeColors.length > 0 ? stripeColors[globalIndex % stripeColors.length] : undefined;
   var rowKey = isNewRow ? row._key : key;
   var isRowActive = interactive && (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey;
+  var effectiveRow = React__default.useMemo(function () {
+    if (!interactive || !pendingEdits || !pendingEdits[rowKey]) return row;
+    return _objectSpread$C(_objectSpread$C({}, row), pendingEdits[rowKey]);
+  }, [interactive, pendingEdits, rowKey, row]);
   return jsxs(React__default.Fragment, {
     children: [jsxs("tr", {
       style: stripeBg ? {
@@ -5201,7 +5236,7 @@ function TableRow(_ref) {
         "bg-amber-50/40": isNewRow && !isSelected && !isRowActive
       }, safeExtraRowClass),
       onClick: function onClick() {
-        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, globalIndex);
+        return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(effectiveRow, globalIndex);
       },
       children: [hasDetailsColumn && jsx("td", {
         className: "px-4 py-4 text-sm",
@@ -5209,7 +5244,7 @@ function TableRow(_ref) {
           type: "button",
           onClick: function onClick(e) {
             e.stopPropagation();
-            toggleExpandRow(row, rowIndexInPage);
+            toggleExpandRow(effectiveRow, rowIndexInPage);
           },
           "aria-expanded": isExpanded,
           "aria-label": isExpanded ? "Collapse row details" : "Expand row details",
@@ -5229,12 +5264,12 @@ function TableRow(_ref) {
           className: "rounded border-gray-300",
           checked: isSelected,
           onChange: function onChange() {
-            return handleSelectRow(row, rowIndexInPage);
+            return handleSelectRow(effectiveRow, rowIndexInPage);
           }
         })
       }), visibleColumns.map(function (column, columnIndex) {
         var extraCellClass = typeof cellClass === "function" ? cellClass({
-          row: row,
+          row: effectiveRow,
           rowIndex: globalIndex,
           column: column,
           columnIndex: columnIndex
@@ -5253,15 +5288,15 @@ function TableRow(_ref) {
           }, safeExtraCellClass),
           onClick: function onClick(e) {
             if (interactive && onCellClick) {
-              onCellClick(rowKey, column.key, row, column, globalIndex);
+              onCellClick(rowKey, column.key, effectiveRow, column, globalIndex);
             }
           },
           onDoubleClick: function onDoubleClick(e) {
             if (interactive && onCellDoubleClick && column.editable !== false) {
-              onCellDoubleClick(rowKey, column.key, row, column, globalIndex);
+              onCellDoubleClick(rowKey, column.key, effectiveRow, column, globalIndex);
             }
           },
-          children: isCellEditing && renderInteractiveCellInput ? renderInteractiveCellInput(column, row, globalIndex, rowKey) : renderCell(column, row, globalIndex)
+          children: isCellEditing && renderInteractiveCellInput ? renderInteractiveCellInput(column, effectiveRow, globalIndex, rowKey) : renderCell(column, effectiveRow, globalIndex)
         }, column.key);
       }), jsx("td", {
         className: "px-4 py-4"
@@ -5532,6 +5567,7 @@ function FieldInput(_ref) {
   var column = _ref.column,
     value = _ref.value,
     _onChange = _ref.onChange,
+    onKeyDown = _ref.onKeyDown,
     _ref$isEditing = _ref.isEditing,
     isEditing = _ref$isEditing === void 0 ? true : _ref$isEditing,
     _ref$row = _ref.row,
@@ -5544,14 +5580,22 @@ function FieldInput(_ref) {
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
   var currentValue = value !== null && value !== void 0 ? value : "";
   var inputType = column.type || column.inputType || "text";
+  var stopProp = function stopProp(e) {
+    e.stopPropagation();
+  };
   // Check if custom onRender renderer is provided on the column definition
   if (typeof column.onRender === "function") {
-    return column.onRender(row, rowIndex, column, {
-      value: currentValue,
-      onChange: function onChange(newVal) {
-        return _onChange === null || _onChange === void 0 ? void 0 : _onChange(newVal);
-      },
-      isEditing: isEditing
+    return jsx("div", {
+      onClick: stopProp,
+      onMouseDown: stopProp,
+      children: column.onRender(row, rowIndex, column, {
+        value: currentValue,
+        onChange: function onChange(newVal) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(newVal);
+        },
+        onKeyDown: onKeyDown,
+        isEditing: isEditing
+      })
     });
   }
   // Textarea / Longtext
@@ -5563,6 +5607,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none transition-all focus:ring-2 focus:ring-primary-500 bg-white resize-y min-h-[2.5rem]", className)
     });
@@ -5581,6 +5628,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className),
       children: [jsxs("option", {
         value: "",
@@ -5598,6 +5648,8 @@ function FieldInput(_ref) {
     var checked = Boolean(currentValue);
     return jsx("div", {
       className: cn$1("flex items-center justify-center py-1", className),
+      onClick: stopProp,
+      onMouseDown: stopProp,
       children: jsx("input", {
         type: "checkbox",
         autoFocus: autoFocus,
@@ -5605,6 +5657,7 @@ function FieldInput(_ref) {
         onChange: function onChange(e) {
           return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.checked);
         },
+        onKeyDown: onKeyDown,
         className: "w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500 cursor-pointer"
       })
     });
@@ -5618,6 +5671,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
     });
   }
@@ -5630,6 +5686,9 @@ function FieldInput(_ref) {
       onChange: function onChange(e) {
         return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value === "" ? "" : Number(e.target.value));
       },
+      onKeyDown: onKeyDown,
+      onClick: stopProp,
+      onMouseDown: stopProp,
       placeholder: "Enter ".concat(column.label || column.key, "..."),
       className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
     });
@@ -5642,6 +5701,9 @@ function FieldInput(_ref) {
     onChange: function onChange(e) {
       return _onChange === null || _onChange === void 0 ? void 0 : _onChange(e.target.value);
     },
+    onKeyDown: onKeyDown,
+    onClick: stopProp,
+    onMouseDown: stopProp,
     placeholder: "Enter ".concat(column.label || column.key, "..."),
     className: cn$1("w-full px-2 py-1 text-sm border rounded outline-none focus:ring-2 focus:ring-primary-500 bg-white", className)
   });
@@ -6116,13 +6178,24 @@ var Table = function Table(_ref) {
       }
     }, _callee, null, [[2, 5, 6, 7]]);
   })), [isDirty, isSaving, tableData, dirtyEdits, newRows, onSave]);
+  var handleClearChanges = useCallback(function () {
+    setPendingEdits({});
+    setNewRows([]);
+    setEditingCell(null);
+    setActiveCell(null);
+  }, []);
   var handleCellClick = useCallback(function (rowKey, colKey, row, column, globalIndex) {
     setActiveCell({
       rowKey: rowKey,
       colKey: colKey,
       rowIndex: globalIndex
     });
-    setEditingCell(null);
+    setEditingCell(function (prev) {
+      if (prev && prev.rowKey === rowKey && prev.colKey === colKey) {
+        return prev;
+      }
+      return null;
+    });
   }, []);
   var handleCellDoubleClick = useCallback(function (rowKey, colKey, row, column, globalIndex) {
     setActiveCell({
@@ -6138,21 +6211,6 @@ var Table = function Table(_ref) {
       });
     }
   }, []);
-  var renderInteractiveCellInput = useCallback(function (column, row, globalIndex, rowKey) {
-    var _row$column$key;
-    var value = pendingEdits[rowKey] && pendingEdits[rowKey][column.key] !== undefined ? pendingEdits[rowKey][column.key] : (_row$column$key = row[column.key]) !== null && _row$column$key !== void 0 ? _row$column$key : "";
-    return jsx(FieldInput, {
-      column: column,
-      value: value,
-      onChange: function onChange(newVal) {
-        return handleCellValueChange(rowKey, column.key, newVal);
-      },
-      isEditing: true,
-      row: row,
-      rowIndex: globalIndex,
-      autoFocus: (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowKey) === rowKey && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colKey) === column.key
-    });
-  }, [pendingEdits, handleCellValueChange, editingCell]);
   useClickOutside([tableContainerRef], interactive && Boolean(editingCell), function () {
     setEditingCell(null);
   });
@@ -6303,6 +6361,129 @@ var Table = function Table(_ref) {
       };
     });
   }, [limitOptions]);
+  var handleTableKeyDown = useCallback(function (e) {
+    if (!interactive) return;
+    var key = e.key,
+      shiftKey = e.shiftKey;
+    // Escape: stop editing
+    if (key === "Escape") {
+      if (editingCell) {
+        e.preventDefault();
+        setEditingCell(null);
+      }
+      return;
+    }
+    // Enter: Save changes only when there are modified changes (isDirty)
+    if (key === "Enter") {
+      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();
+        }
+      }
+      return;
+    }
+    var currentCell = activeCell || editingCell;
+    if (!currentCell) return;
+    var allRows = [].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);
+      return rKey === currentCell.rowKey;
+    });
+    var cIdx = visibleColumns.findIndex(function (c) {
+      return c.key === currentCell.colKey;
+    });
+    if (rIdx === -1 || cIdx === -1) return;
+    var nextRIdx = rIdx;
+    var nextCIdx = cIdx;
+    if (key === "Tab") {
+      e.preventDefault();
+      if (shiftKey) {
+        if (cIdx > 0) {
+          nextCIdx = cIdx - 1;
+        } else if (rIdx > 0) {
+          nextRIdx = rIdx - 1;
+          nextCIdx = visibleColumns.length - 1;
+        }
+      } else {
+        if (cIdx < visibleColumns.length - 1) {
+          nextCIdx = cIdx + 1;
+        } else if (rIdx < allRows.length - 1) {
+          nextRIdx = rIdx + 1;
+          nextCIdx = 0;
+        }
+      }
+    } else if (key === "ArrowRight") {
+      var _e$target2, _e$target$value;
+      if (editingCell && ((_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.selectionStart) !== undefined && e.target.selectionStart < String((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "").length) {
+        return;
+      }
+      if (cIdx < visibleColumns.length - 1) {
+        e.preventDefault();
+        nextCIdx = cIdx + 1;
+      }
+    } else if (key === "ArrowLeft") {
+      var _e$target3;
+      if (editingCell && ((_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.selectionStart) !== undefined && e.target.selectionStart > 0) {
+        return;
+      }
+      if (cIdx > 0) {
+        e.preventDefault();
+        nextCIdx = cIdx - 1;
+      }
+    } else if (key === "ArrowDown") {
+      var _e$target4;
+      if (((_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.tagName) === "SELECT") return;
+      if (rIdx < allRows.length - 1) {
+        e.preventDefault();
+        nextRIdx = rIdx + 1;
+      }
+    } else if (key === "ArrowUp") {
+      var _e$target5;
+      if (((_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : _e$target5.tagName) === "SELECT") return;
+      if (rIdx > 0) {
+        e.preventDefault();
+        nextRIdx = rIdx - 1;
+      }
+    } else {
+      return;
+    }
+    var targetRow = allRows[nextRIdx];
+    var targetCol = visibleColumns[nextCIdx];
+    if (!targetRow || !targetCol) return;
+    var targetRowKey = targetRow._key || getRowKey(targetRow, startIndex + nextRIdx);
+    var nextCellObj = {
+      rowKey: targetRowKey,
+      colKey: targetCol.key,
+      rowIndex: startIndex + nextRIdx
+    };
+    setActiveCell(nextCellObj);
+    if (editingCell && targetCol.editable !== false) {
+      setEditingCell(nextCellObj);
+    }
+  }, [interactive, editingCell, activeCell, isDirty, isValid, isSaving, handleSave, paginatedData, newRows, visibleColumns, startIndex]);
+  var renderInteractiveCellInput = useCallback(function (column, row, globalIndex, rowKey) {
+    var _row$column$key;
+    var value = pendingEdits[rowKey] && pendingEdits[rowKey][column.key] !== undefined ? pendingEdits[rowKey][column.key] : (_row$column$key = row[column.key]) !== null && _row$column$key !== void 0 ? _row$column$key : "";
+    return jsx(FieldInput, {
+      column: column,
+      value: value,
+      onChange: function onChange(newVal) {
+        return handleCellValueChange(rowKey, column.key, newVal);
+      },
+      onKeyDown: handleTableKeyDown,
+      isEditing: true,
+      row: row,
+      rowIndex: globalIndex,
+      autoFocus: (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowKey) === rowKey && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colKey) === column.key
+    });
+  }, [pendingEdits, handleCellValueChange, handleTableKeyDown, editingCell]);
   // Callbacks
   var toggleColumnVisibility = useCallback(function (key) {
     setColumnsState(function (prev) {
@@ -6525,11 +6706,14 @@ var Table = function Table(_ref) {
     onCellClick: handleCellClick,
     onCellDoubleClick: handleCellDoubleClick,
     renderInteractiveCellInput: renderInteractiveCellInput,
-    invalidCellSet: invalidCellSet
+    invalidCellSet: invalidCellSet,
+    pendingEdits: pendingEdits
   };
   return jsxs("div", {
     ref: tableContainerRef,
-    className: cn$1("w-full border rounded-lg md:rounded-md", className),
+    tabIndex: interactive ? 0 : undefined,
+    onKeyDown: handleTableKeyDown,
+    className: cn$1("w-full border rounded-lg md:rounded-md outline-none focus:ring-1 focus:ring-primary-400", className),
     children: [TheadComponent && typeof TheadComponent === "function" ? jsx(TheadComponent, {
       columns: columnsState,
       data: filteredData
@@ -6576,15 +6760,26 @@ var Table = function Table(_ref) {
             onClick: handleSave,
             disabled: !isValid || isSaving,
             title: !isValid ? "Cannot save: ".concat(((_validationErrors$ = validationErrors[0]) === null || _validationErrors$ === void 0 ? void 0 : _validationErrors$.message) || "Validation failed") : "Save changes",
-            className: cn$1("px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all shadow-sm", isValid ? "bg-success-600 hover:bg-success-700 active:bg-success-800 text-white cursor-pointer" : "bg-gray-200 text-gray-400 border border-gray-300 cursor-not-allowed opacity-75"),
+            className: cn$1("px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all shadow-sm", isValid ? "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white cursor-pointer" : "bg-gray-200 text-gray-400 border border-gray-300 cursor-not-allowed opacity-75"),
             children: [jsx(Save, {
               className: "w-4 h-4"
             }), jsx("span", {
               children: isSaving ? "Saving..." : "Save Changes"
             }), pendingCount > 0 && jsx("span", {
-              className: cn$1("ml-1 px-2 py-0.5 text-xs rounded-full font-bold", isValid ? "bg-success-700 text-white" : "bg-gray-300 text-gray-600"),
+              className: cn$1("ml-1 px-2 py-0.5 text-xs rounded-full font-bold", isValid ? "bg-primary-700 text-white" : "bg-gray-300 text-gray-600"),
               children: pendingCount
             })]
+          }), jsxs("button", {
+            type: "button",
+            onClick: handleClearChanges,
+            disabled: isSaving,
+            title: "Discard all pending modifications",
+            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
+            children: [jsx(X, {
+              className: "w-4 h-4 text-primary-600"
+            }), jsx("span", {
+              children: "Clear Changes"
+            })]
           }), !isValid && validationErrors.length > 0 && jsxs("div", {
             className: "flex items-center gap-1.5 px-3 py-1.5 bg-warning-50 border border-warning-200 text-warning-800 rounded-md text-xs font-medium",
             children: [jsx(AlertCircle, {
@@ -12637,7 +12832,7 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
   });
 });
 
-var _excluded$v = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
+var _excluded$v = ["id", "name", "checked", "defaultChecked", "onChange", "disabled", "size", "color", "trackClass", "thumbClass", "className", "topLabel", "bottomLabel", "rightLabel", "leftLabel", "ariaLabel"];
 function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -12669,6 +12864,52 @@ var SIZE_MAP$2 = {
     knobTranslate: "translate-x-6"
   }
 };
+var COLOR_PRESETS$1 = {
+  primary: {
+    bg: "bg-primary-600",
+    ring: "focus-visible:ring-primary-300"
+  },
+  secondary: {
+    bg: "bg-secondary-600",
+    ring: "focus-visible:ring-secondary-300"
+  },
+  success: {
+    bg: "bg-success-600",
+    ring: "focus-visible:ring-success-300"
+  },
+  green: {
+    bg: "bg-success-600",
+    ring: "focus-visible:ring-success-300"
+  },
+  error: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  danger: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  red: {
+    bg: "bg-error-600",
+    ring: "focus-visible:ring-error-300"
+  },
+  warning: {
+    bg: "bg-warning-600",
+    ring: "focus-visible:ring-warning-300"
+  },
+  blue: {
+    bg: "bg-blue-600",
+    ring: "focus-visible:ring-blue-300"
+  },
+  indigo: {
+    bg: "bg-indigo-600",
+    ring: "focus-visible:ring-indigo-300"
+  },
+  purple: {
+    bg: "bg-purple-600",
+    ring: "focus-visible:ring-purple-300"
+  }
+};
 var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
   var id = props.id,
     name = props.name,
@@ -12680,6 +12921,8 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$size = props.size,
     size = _props$size === void 0 ? "md" : _props$size,
+    _props$color = props.color,
+    color = _props$color === void 0 ? "primary" : _props$color,
     trackClass = props.trackClass,
     thumbClass = props.thumbClass,
     _props$className = props.className,
@@ -12715,16 +12958,18 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     }
   };
   var sizeStuff = SIZE_MAP$2[size] || SIZE_MAP$2.md;
+  var isPreset = COLOR_PRESETS$1[color];
   // Classes for the track (we use inline style for arbitrary trackClass when ON)
-  var trackClasses = cn$1("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
+  var trackClasses = cn$1("relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out", sizeStuff.track, isOn ? trackClass ? "" : isPreset ? isPreset.bg : "" : "bg-gray-100", disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", trackClass // Accepting trackClass as a class name
   );
   // Knob classes (thumb)
   var knobBase = cn$1("inline-block rounded-full bg-white shadow transform ring-0 transition-transform duration-200 ease-in-out", sizeStuff.knob, thumbClass // Accepting thumbClass as a class name
   );
   var knobTransform = isOn ? sizeStuff.knobTranslate : "translate-x-1";
-  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-sky-300";
-  var trackStyle = isOn && !trackClass ? {
-    backgroundColor: "rgb(14, 165, 233)"
+  var ringClass = isPreset ? isPreset.ring : "focus-visible:ring-primary-300";
+  var focusClasses = disabled ? "" : "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ".concat(ringClass);
+  var trackStyle = isOn && !trackClass && !isPreset ? {
+    backgroundColor: color
   } : undefined; // Fallback to default trackClass if trackClass is not a class
   var accessibleLabel = ariaLabel || rightLabel || leftLabel || topLabel || bottomLabel || "Toggle";
   var containerIsColumn = Boolean(topLabel || bottomLabel);
@@ -13439,7 +13684,7 @@ var Accordion = /*#__PURE__*/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", "iconClass", "checkedClass"];
+var _excluded$s = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass"];
 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 = {
@@ -13459,6 +13704,52 @@ var SIZE_CLASSES = {
     icon: "w-4 h-4"
   }
 };
+var COLOR_PRESETS = {
+  primary: {
+    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-primary-300"
+  },
+  secondary: {
+    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-secondary-300"
+  },
+  success: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  green: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  error: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  danger: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  red: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  warning: {
+    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white",
+    ring: "peer-focus:ring-warning-300"
+  },
+  blue: {
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
+    ring: "peer-focus:ring-blue-300"
+  },
+  indigo: {
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
+    ring: "peer-focus:ring-indigo-300"
+  },
+  purple: {
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white",
+    ring: "peer-focus:ring-purple-300"
+  }
+};
 var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _props$wrapperProps;
   var id = _ref.id,
@@ -13484,6 +13775,8 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
     _ref$borderColor = _ref.borderColor,
     borderColor = _ref$borderColor === void 0 ? "#ccc" : _ref$borderColor,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
     iconClass = _ref.iconClass,
     checkedClass = _ref.checkedClass,
     props = _objectWithoutProperties$1(_ref, _excluded$s);
@@ -13517,6 +13810,13 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var iconBase = "pointer-events-none transform transition-all duration-150 ease-out";
   var iconShown = "opacity-100 scale-100";
   var iconHidden = "opacity-0 scale-75";
+  var isPreset = COLOR_PRESETS[color];
+  var colorClasses = isPreset ? "".concat(isPreset.checked, " peer-focus:ring-2 peer-focus:ring-offset-1 ").concat(isPreset.ring) : "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-primary-300";
+  var customColorStyle = currentChecked && !isPreset && !checkedClass ? {
+    backgroundColor: color,
+    borderColor: color,
+    color: "#ffffff"
+  } : {};
   return 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 : {}), {}, {
@@ -13527,7 +13827,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), jsxs("div", {
       className: boxOuterCls,
       style: disabled ? {} : {
-        borderColor: borderColor
+        borderColor: currentChecked && (isPreset || customColorStyle.borderColor) ? undefined : borderColor
       },
       "aria-disabled": disabled,
       children: [jsx("input", _objectSpread$w({
@@ -13546,11 +13846,11 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
         "aria-label": ariaLabel,
         "aria-checked": Boolean(currentChecked)
       }, props)), jsx("div", {
-        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "peer-checked:bg-green-600 peer-checked:border-green-600 peer-checked:text-white " + "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-green-300 " + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
+        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "".concat(colorClasses, " ") + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
         style: currentChecked && checkedClass ? {
           backgroundColor: "",
           borderColor: ""
-        } : {},
+        } : customColorStyle,
         "aria-hidden": "true",
         children: jsx(Check, {
           className: "".concat(sizeClass.icon, " ").concat(iconBase, " ").concat(currentChecked ? iconShown : iconHidden, " ").concat(iconClass || ""),
@@ -18927,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,
@@ -18941,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
   };
 };