@dreamtree-org/twreact-ui 1.1.63 → 1.1.65

package/dist/index.js

@@ -3510,6 +3510,11 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     _useState10 = _slicedToArray(_useState1, 2),
     menuMaxHeight = _useState10[0],
     setMenuMaxHeight = _useState10[1]; // px or null
+  // Fixed-position coordinates for the portaled menu (anchored to the trigger).
+  var _useState11 = React.useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuCoords = _useState12[0],
+    setMenuCoords = _useState12[1]; // { left, top, width } in viewport px
   React.useImperativeHandle(forwardedRef, function () {
     return selectRef.current;
   }, []);
@@ -3572,16 +3577,47 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       desiredMenuHeight = Math.min(menuRef.current.scrollHeight, DEFAULT_MENU_MAX);
     }
     // decide placement: prefer bottom unless not enough space and top has more space
+    var nextPlacement;
+    var nextMaxHeight;
     if (spaceBelow >= desiredMenuHeight || spaceBelow >= spaceAbove) {
-      setPlacement("bottom");
-      setMenuMaxHeight(Math.min(desiredMenuHeight, Math.max(80, spaceBelow)));
+      nextPlacement = "bottom";
+      nextMaxHeight = Math.min(desiredMenuHeight, Math.max(80, spaceBelow));
+    } else {
+      nextPlacement = "top";
+      nextMaxHeight = Math.min(desiredMenuHeight, Math.max(80, spaceAbove));
+    }
+    setPlacement(nextPlacement);
+    setMenuMaxHeight(nextMaxHeight);
+    // The menu is portaled to document.body with position:fixed, so it floats
+    // above any ancestor with overflow:hidden|auto|scroll. Anchor it to the
+    // trigger via the viewport-relative rect (no scroll offset for fixed).
+    // maxHeight here mirrors the inline style applied to the menu (+10 fudge).
+    var renderedMaxHeight = nextMaxHeight + 10;
+    var next = {
+      left: rect.left,
+      width: rect.width
+    };
+    if (nextPlacement === "bottom") {
+      next.top = rect.bottom + 4; // ~mt-1
     } else {
-      setPlacement("top");
-      setMenuMaxHeight(Math.min(desiredMenuHeight, Math.max(80, spaceAbove)));
+      // place above the trigger; bottom of menu sits just above the trigger top
+      next.top = Math.max(MARGIN, rect.top - 4 - renderedMaxHeight);
     }
+    setMenuCoords(next);
   };
+  // Anchor the portaled menu BEFORE the browser paints, so it never flashes
+  // at (0,0). The menu is already in the DOM (createPortal runs during render),
+  // we just need its fixed coords set synchronously.
+  React.useLayoutEffect(function () {
+    if (isOpen) calculatePlacement();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, filtered.length]);
   React.useEffect(function () {
-    if (!isOpen) return;
+    if (!isOpen) {
+      // drop stale coords so the next open re-anchors from scratch
+      setMenuCoords(null);
+      return;
+    }
     // initial calc on open; wait a tick to allow DOM to render
     var raf = requestAnimationFrame(function () {
       var _searchRef$current;
@@ -3589,7 +3625,10 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       // focus search input if available
       if (searchable) (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus();
     });
-    // update on resize/scroll (throttle by requestAnimationFrame)
+    // Reposition on resize/scroll while open (throttled by rAF). Use
+    // capture-phase scroll so we also catch any scrolling ancestor — the
+    // menu is portaled with position:fixed, so its coords must track the
+    // trigger as the page (or a scroll container) moves.
     var rafId = null;
     var onWindowChange = function onWindowChange() {
       if (rafId) cancelAnimationFrame(rafId);
@@ -3601,13 +3640,16 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
       passive: true
     });
     window.addEventListener("scroll", onWindowChange, {
-      passive: true
+      passive: true,
+      capture: true
     });
     return function () {
       cancelAnimationFrame(raf);
       if (rafId) cancelAnimationFrame(rafId);
       window.removeEventListener("resize", onWindowChange);
-      window.removeEventListener("scroll", onWindowChange);
+      window.removeEventListener("scroll", onWindowChange, {
+        capture: true
+      });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, searchable, filtered.length]);
@@ -3697,7 +3739,13 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
     }
   };
   var handleClickOutside = function handleClickOutside(e) {
-    if (selectRef.current && !selectRef.current.contains(e.target)) {
+    // The menu is portaled to document.body, so it lives OUTSIDE selectRef's
+    // DOM subtree. Treat clicks inside the portaled menu as "inside" too —
+    // otherwise selecting an option would close the menu before the option's
+    // own click handler runs.
+    var inTrigger = selectRef.current && selectRef.current.contains(e.target);
+    var inMenu = menuRef.current && menuRef.current.contains(e.target);
+    if (!inTrigger && !inMenu) {
       setIsOpen(false);
       setFocusedIndex(-1);
     }
@@ -3921,19 +3969,23 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         type: "hidden",
         name: name,
         value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
-      })), isOpen && jsxRuntime.jsxs("div", {
+      })), isOpen && typeof document !== "undefined" && /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsxs("div", {
         ref: menuRef,
-        className: cn$1("absolute z-50 w-full rounded-md border border-gray-300 bg-white shadow-lg", {
-          // if placement is bottom, place it below with margin-top; if top, place it above with bottom full and margin-bottom
-          "mt-1 top-full": placement === "bottom",
-          "mb-1 bottom-full": placement === "top"
-        }),
+        className: cn$1("fixed z-50 rounded-md border border-gray-300 bg-white shadow-lg"),
         role: "dialog",
-        // set inline style for maxHeight based on available space (converted to px)
-        style: menuMaxHeight ? {
+        "data-placement": placement,
+        // Portaled to document.body with position:fixed so the menu
+        // 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$C({
+          left: menuCoords ? "".concat(menuCoords.left, "px") : undefined,
+          top: menuCoords ? "".concat(menuCoords.top, "px") : undefined,
+          width: menuCoords ? "".concat(menuCoords.width, "px") : undefined
+        }, menuMaxHeight ? {
           maxHeight: "".concat(menuMaxHeight + 10, "px"),
           overflow: "auto"
-        } : {},
+        } : {}),
         children: [searchable && jsxRuntime.jsx("div", {
           className: "border-b border-gray-200 p-2",
           children: jsxRuntime.jsxs("div", {
@@ -3976,7 +4028,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           "aria-multiselectable": multiSelect,
           children: grouped ? renderGroupedOptions() : renderFlatOptions()
         })]
-      })]
+      }), document.body)]
     }), error && jsxRuntime.jsx("p", {
       className: "mt-1 text-sm text-error-500",
       children: error
@@ -4761,7 +4813,7 @@ function MobileCard(_ref) {
   }, key);
 }
 
-var _excluded$x = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "TheadComponent", "TfootComponent"];
+var _excluded$x = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent"];
 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 DEFAULT_DATA = [];
@@ -4829,6 +4881,7 @@ var Table = function Table(_ref) {
     _ref$totalRecords = _ref.totalRecords,
     totalRecords = _ref$totalRecords === void 0 ? 0 : _ref$totalRecords,
     pageNumber = _ref.pageNumber,
+    onPageChange = _ref.onPageChange,
     _ref$TheadComponent = _ref.TheadComponent,
     TheadComponent = _ref$TheadComponent === void 0 ? null : _ref$TheadComponent,
     _ref$TfootComponent = _ref.TfootComponent,
@@ -5169,7 +5222,8 @@ var Table = function Table(_ref) {
   }, [applyGlobalSearch]);
   var handlePageChange = React.useCallback(function (newPage) {
     setCurrentPage(newPage);
-  }, []);
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+  }, [onPageChange]);
   var renderCell = React.useCallback(function (column, row, globalIndex) {
     if (column.render) return column.render(row, globalIndex);
     return row === null || row === void 0 ? void 0 : row[column.key];
@@ -16576,7 +16630,7 @@ function _objectSpread$h(e) { for (var r = 1; r < arguments.length; r++) { var t
  * - isMobileOpen, setIsMobileOpen
  * - showCollapsedTooltips: boolean (default true)
  */
-var Sidebar = function Sidebar(_ref2) {
+var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$items = _ref2.items,
     items = _ref2$items === void 0 ? [] : _ref2$items,
     _ref2$collapsed = _ref2.collapsed,
@@ -16819,6 +16873,7 @@ var Sidebar = function Sidebar(_ref2) {
     children: [jsxRuntime.jsx("div", {
       className: "hidden md:flex sticky top-0 h-screen",
       children: jsxRuntime.jsx("div", _objectSpread$h(_objectSpread$h({
+        ref: ref,
         className: cn$1(desktopPlacementClass, className)
       }, props), {}, {
         children: SidebarContent
@@ -16839,7 +16894,8 @@ var Sidebar = function Sidebar(_ref2) {
       children: SidebarContent
     })]
   });
-};
+});
+Sidebar.displayName = "Sidebar";
 
 var _excluded$c = ["trigger", "children", "placement", "className"];
 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; }
@@ -16891,7 +16947,7 @@ var Dropdown = function Dropdown(_ref) {
 };
 
 var _excluded$b = ["emitter", "content", "notifications"],
-  _excluded2$2 = ["emitter", "logo", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className"];
+  _excluded2$2 = ["emitter", "logo", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen"];
 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; }
 // Simplified Notifications, uses notifications from props and a single effect for fetch/update
@@ -17038,7 +17094,7 @@ var styledClassNames = {
   icon: "h-6 w-6",
   dropdown: "w-56 rounded-md border border-gray-200 bg-white py-1 shadow-lg"
 };
-var Navbar = function Navbar(_ref3) {
+var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var emitter = _ref3.emitter,
     logo = _ref3.logo,
     _ref3$items = _ref3.items,
@@ -17062,7 +17118,10 @@ var Navbar = function Navbar(_ref3) {
       return console.log("invoked onLogoutClick");
     } : _ref3$onLogoutClick,
     className = _ref3.className,
-    props = _objectWithoutProperties$1(_ref3, _excluded2$2);
+    onFetch = _ref3.onFetch;
+    _ref3.isMobileOpen;
+    _ref3.setIsMobileOpen;
+    var props = _objectWithoutProperties$1(_ref3, _excluded2$2);
   var _useState3 = React.useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isMobileMenuOpen = _useState4[0],
@@ -17131,6 +17190,7 @@ var Navbar = function Navbar(_ref3) {
     }, rest));
   };
   return jsxRuntime.jsxs("nav", _objectSpread$f(_objectSpread$f({
+    ref: ref,
     className: cn$1("bg-white border-b border-gray-200 px-4 sm:px-6 lg:px-8", className)
   }, props), {}, {
     children: [jsxRuntime.jsxs("div", {
@@ -17175,7 +17235,8 @@ var Navbar = function Navbar(_ref3) {
             })]
           })
         }), jsxRuntime.jsx(RightMenuComponent, {
-          notifications: notifications
+          notifications: notifications,
+          onFetch: onFetch
         }), !user && jsxRuntime.jsx("button", {
           className: styledClassNames.button,
           onClick: handleLoginClick,
@@ -17267,7 +17328,7 @@ var Navbar = function Navbar(_ref3) {
       })
     })]
   }));
-};
+});
 Navbar.displayName = "Navbar";
 Navbar.propTypes = {
   emitter: PropTypes.object.isRequired,
@@ -17282,12 +17343,13 @@ Navbar.propTypes = {
 var _excluded$a = ["items", "className"];
 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; }
-var FootNav = function FootNav(_ref) {
+var FootNav = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     className = _ref.className,
     props = _objectWithoutProperties$1(_ref, _excluded$a);
   return jsxRuntime.jsx("nav", _objectSpread$e(_objectSpread$e({
+    ref: ref,
     className: cn$1('fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-2 md:hidden', className)
   }, props), {}, {
     children: jsxRuntime.jsx("div", {
@@ -17315,12 +17377,13 @@ var FootNav = function FootNav(_ref) {
       })
     })
   }));
-};
+});
+FootNav.displayName = 'FootNav';
 
 var _excluded$9 = ["items", "separator", "showHome", "homeIcon", "onHomeClick", "className"];
 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; }
-var Breadcrumbs = function Breadcrumbs(_ref) {
+var Breadcrumbs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
     _ref$separator = _ref.separator,
@@ -17344,6 +17407,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
     onClick: onHomeClick
   }].concat(_toConsumableArray$1(items)) : items;
   return jsxRuntime.jsx("nav", _objectSpread$d(_objectSpread$d({
+    ref: ref,
     className: cn$1('flex items-center space-x-1 text-sm', className),
     "aria-label": "Breadcrumb"
   }, props), {}, {
@@ -17377,7 +17441,8 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       }, item.id);
     })
   }));
-};
+});
+Breadcrumbs.displayName = 'Breadcrumbs';
 
 var _excluded$8 = ["isOpen", "onClose", "title", "children", "size", "dismissible", "showCloseButton", "footer", "className", "onOpen"],
   _excluded2$1 = ["children", "className"],
@@ -17393,7 +17458,19 @@ var getFocusable = function getFocusable(root) {
     return el.getAttribute('aria-hidden') !== 'true';
   }) : [];
 };
-var Dialog = function Dialog(_ref) {
+// Assign one node to several refs (callback or object). Lets the dialog keep
+// its internal `dialogRef` for the focus trap while still exposing the panel
+// node to a consumer-supplied `ref` (issue #56).
+var setRefs = function setRefs(node) {
+  for (var _len = arguments.length, refs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    refs[_key - 1] = arguments[_key];
+  }
+  refs.forEach(function (ref) {
+    if (!ref) return;
+    if (typeof ref === 'function') ref(node);else ref.current = node;
+  });
+};
+var Dialog = /*#__PURE__*/React.forwardRef(function (_ref, _ref3) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
     title = _ref.title,
@@ -17484,7 +17561,9 @@ var Dialog = function Dialog(_ref) {
     className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4",
     onClick: handleBackdropClick,
     children: jsxRuntime.jsxs("div", _objectSpread$c(_objectSpread$c({
-      ref: dialogRef,
+      ref: function ref(node) {
+        return setRefs(node, dialogRef, _ref3);
+      },
       className: cn$1('w-full rounded-lg bg-white shadow-xl animate-scale-in motion-reduce:animate-none', sizeClasses[size], className),
       tabIndex: -1,
       role: "dialog",
@@ -17515,32 +17594,33 @@ var Dialog = function Dialog(_ref) {
       })]
     }))
   }), document.body);
-};
+});
+Dialog.displayName = 'Dialog';
 // Dialog components for composition
-Dialog.Header = function (_ref3) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    props = _objectWithoutProperties$1(_ref3, _excluded2$1);
+Dialog.Header = function (_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    props = _objectWithoutProperties$1(_ref4, _excluded2$1);
   return jsxRuntime.jsx("div", _objectSpread$c(_objectSpread$c({
     className: cn$1('border-b border-gray-200 px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
 };
-Dialog.Body = function (_ref4) {
-  var children = _ref4.children,
-    className = _ref4.className,
-    props = _objectWithoutProperties$1(_ref4, _excluded3$1);
+Dialog.Body = function (_ref5) {
+  var children = _ref5.children,
+    className = _ref5.className,
+    props = _objectWithoutProperties$1(_ref5, _excluded3$1);
   return jsxRuntime.jsx("div", _objectSpread$c(_objectSpread$c({
     className: cn$1('px-6 py-4', className)
   }, props), {}, {
     children: children
   }));
 };
-Dialog.Footer = function (_ref5) {
-  var children = _ref5.children,
-    className = _ref5.className,
-    props = _objectWithoutProperties$1(_ref5, _excluded4$1);
+Dialog.Footer = function (_ref6) {
+  var children = _ref6.children,
+    className = _ref6.className,
+    props = _objectWithoutProperties$1(_ref6, _excluded4$1);
   return jsxRuntime.jsx("div", _objectSpread$c(_objectSpread$c({
     className: cn$1('flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4', className)
   }, props), {}, {
@@ -17551,7 +17631,7 @@ Dialog.Footer = function (_ref5) {
 var _excluded$7 = ["id", "title", "message", "type", "duration", "onClose", "position"];
 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 = function Toast(_ref) {
+var Toast = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     title = _ref.title,
     message = _ref.message,
@@ -17607,6 +17687,7 @@ var Toast = function Toast(_ref) {
   };
   if (!isVisible) return null;
   return /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx("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])
   }, props), {}, {
     children: jsxRuntime.jsxs("div", {
@@ -17633,7 +17714,8 @@ var Toast = function Toast(_ref) {
       })]
     })
   })), document.body);
-};
+});
+Toast.displayName = 'Toast';
 // Toast Container Component
 var ToastContainer = function ToastContainer(_ref2) {
   var _ref2$toasts = _ref2.toasts,
@@ -17713,7 +17795,7 @@ var useToast = function useToast() {
 var _excluded$6 = ["variant", "title", "children", "dismissible", "onDismiss", "className"];
 function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Alert = function Alert(_ref) {
+var Alert = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'info' : _ref$variant,
     title = _ref.title,
@@ -17759,6 +17841,7 @@ var Alert = function Alert(_ref) {
   };
   var variantStyles = variants[variant];
   return jsxRuntime.jsx("div", _objectSpread$a(_objectSpread$a({
+    ref: ref,
     className: cn$1('rounded-md border p-4', variantStyles.container, className),
     role: "alert"
   }, props), {}, {
@@ -17796,12 +17879,13 @@ var Alert = function Alert(_ref) {
       })]
     })
   }));
-};
+});
+Alert.displayName = 'Alert';
 
 var _excluded$5 = ["children", "variant", "size", "rounded", "className"];
 function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Badge = function Badge(_ref) {
+var Badge = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
@@ -17826,6 +17910,7 @@ var Badge = function Badge(_ref) {
     lg: 'px-3 py-1 text-base'
   };
   return jsxRuntime.jsx("span", _objectSpread$9(_objectSpread$9({
+    ref: ref,
     className: cn$1('inline-flex items-center font-medium', variants[variant], sizes[size], {
       'rounded-full': rounded,
       'rounded-md': !rounded
@@ -17833,12 +17918,13 @@ var Badge = function Badge(_ref) {
   }, props), {}, {
     children: children
   }));
-};
+});
+Badge.displayName = 'Badge';
 
 var _excluded$4 = ["src", "alt", "name", "size", "shape", "status", "className"];
 function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Avatar = function Avatar(_ref) {
+var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var src = _ref.src,
     alt = _ref.alt,
     name = _ref.name,
@@ -17878,6 +17964,7 @@ var Avatar = function Avatar(_ref) {
     '2xl': 'h-5 w-5'
   };
   return jsxRuntime.jsxs("div", {
+    ref: ref,
     className: "relative inline-block",
     children: [jsxRuntime.jsxs("div", _objectSpread$8(_objectSpread$8({
       className: cn$1('flex items-center justify-center bg-gray-100 text-primary-600 font-medium', sizes[size], {
@@ -17914,7 +18001,8 @@ var Avatar = function Avatar(_ref) {
       className: cn$1('absolute bottom-0 right-0 rounded-full border-2 border-white', statusColors[status], statusSizes[size])
     })]
   });
-};
+});
+Avatar.displayName = 'Avatar';
 
 var _excluded$3 = ["children", "className", "hover"],
   _excluded2 = ["children", "className"],
@@ -17924,20 +18012,22 @@ var _excluded$3 = ["children", "className", "hover"],
   _excluded6 = ["children", "className"];
 function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Card = function Card(_ref) {
+var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _ref$hover = _ref.hover,
     hover = _ref$hover === void 0 ? false : _ref$hover,
     props = _objectWithoutProperties$1(_ref, _excluded$3);
   return jsxRuntime.jsx("div", _objectSpread$7(_objectSpread$7({
+    ref: ref,
     className: cn$1('rounded-lg border border-gray-200 bg-white shadow-sm', {
       'hover:shadow-md transition-shadow': hover
     }, className)
   }, props), {}, {
     children: children
   }));
-};
+});
+Card.displayName = 'Card';
 var CardHeader = function CardHeader(_ref2) {
   var children = _ref2.children,
     className = _ref2.className,
@@ -17997,7 +18087,7 @@ Card.Footer = CardFooter;
 var _excluded$2 = ["currentPage", "totalPages", "onPageChange", "showFirstLast", "showPrevNext", "maxVisiblePages", "className"];
 function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Pagination = function Pagination(_ref) {
+var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$currentPage = _ref.currentPage,
     currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
     _ref$totalPages = _ref.totalPages,
@@ -18037,6 +18127,7 @@ var Pagination = function Pagination(_ref) {
   };
   if (totalPages <= 1) return null;
   return jsxRuntime.jsxs("nav", _objectSpread$6(_objectSpread$6({
+    ref: ref,
     className: cn$1('flex items-center justify-center space-x-1', className),
     "aria-label": "Pagination"
   }, props), {}, {
@@ -18095,12 +18186,13 @@ var Pagination = function Pagination(_ref) {
       children: totalPages
     })]
   }));
-};
+});
+Pagination.displayName = 'Pagination';
 
 var _excluded$1 = ["steps", "currentStep", "orientation", "variant", "onStepClick", "className"];
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Stepper = function Stepper(_ref) {
+var Stepper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$steps = _ref.steps,
     steps = _ref$steps === void 0 ? [] : _ref$steps,
     _ref$currentStep = _ref.currentStep,
@@ -18134,6 +18226,7 @@ var Stepper = function Stepper(_ref) {
     }
   };
   return jsxRuntime.jsx("nav", _objectSpread$5(_objectSpread$5({
+    ref: ref,
     className: cn$1('flex', {
       'flex-col': orientation === 'vertical',
       'flex-row': orientation === 'horizontal'
@@ -18188,12 +18281,13 @@ var Stepper = function Stepper(_ref) {
       }, step.id || stepIndex);
     })
   }));
-};
+});
+Stepper.displayName = 'Stepper';
 
 var _excluded = ["accept", "multiple", "maxSize", "onFileSelect", "onFileRemove", "files", "disabled", "className"];
 function ownKeys$4(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$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var FileUpload = function FileUpload(_ref) {
+var FileUpload = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var accept = _ref.accept,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
@@ -18285,6 +18379,7 @@ var FileUpload = function FileUpload(_ref) {
     }
   };
   return jsxRuntime.jsxs("div", _objectSpread$4(_objectSpread$4({
+    ref: ref,
     className: cn$1('w-full', className)
   }, props), {}, {
     children: [jsxRuntime.jsxs("div", {
@@ -18357,7 +18452,8 @@ var FileUpload = function FileUpload(_ref) {
       })
     })]
   }));
-};
+});
+FileUpload.displayName = 'FileUpload';
 
 var Condition = function Condition(_ref) {
   var condition = _ref.condition,
@@ -18367,7 +18463,7 @@ var Condition = function Condition(_ref) {
   return condition ? children : fallback;
 };
 
-function Carousel(props) {
+var Carousel = /*#__PURE__*/React.forwardRef(function Carousel(props, ref) {
   var children = props.children,
     _props$autoPlay = props.autoPlay,
     autoPlay = _props$autoPlay === void 0 ? false : _props$autoPlay,
@@ -18407,6 +18503,7 @@ function Carousel(props) {
   }, [autoPlay, isPaused, next, interval]);
   var childrenArray = React.Children.toArray(children);
   return jsxRuntime.jsxs("div", {
+    ref: ref,
     className: cn$1("relative group overflow-hidden rounded-xl bg-card border border-border/50 shadow-sm", className),
     onMouseEnter: function onMouseEnter() {
       return setIsPaused(true);
@@ -18452,7 +18549,8 @@ function Carousel(props) {
       })
     })]
   });
-}
+});
+Carousel.displayName = "Carousel";
 
 var ThemeContext = /*#__PURE__*/React.createContext(undefined);
 var useTheme = function useTheme() {