@dreamtree-org/twreact-ui 1.0.60 → 1.0.62

package/dist/index.esm.js

@@ -10356,7 +10356,7 @@ function Switch(props) {
     topLabel = props.topLabel,
     bottomLabel = props.bottomLabel,
     rightLabel = props.rightLabel,
-    leftLable = props.leftLable,
+    leftLabel = props.leftLabel,
     ariaLabel = props.ariaLabel;
   var isControlled = typeof checked === "boolean";
   var _useState = useState(defaultChecked),
@@ -10406,11 +10406,11 @@ function Switch(props) {
   var fallbackOnClass = isOn && !bgColor ? "bg-sky-500" : "";
 
   // Accessible label fallback: prefer ariaLabel, otherwise first provided visible label, otherwise "Toggle"
-  var accessibleLabel = ariaLabel || rightLabel || leftLable || topLabel || bottomLabel || "Toggle";
+  var accessibleLabel = ariaLabel || rightLabel || leftLabel || topLabel || bottomLabel || "Toggle";
 
   // Container layout: column if top or bottom labels exist, otherwise row
   var containerIsColumn = Boolean(topLabel || bottomLabel);
-  var containerClass = [containerIsColumn ? "flex flex-col items-center" : "inline-flex items-center", "gap-2", className].filter(Boolean).join(" ");
+  var containerClass = [containerIsColumn ? "flex flex-col " : "inline-flex items-center", "gap-2", className].filter(Boolean).join(" ");
   var labelOpacityClass = disabled ? "opacity-50" : "";
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClass
@@ -10419,10 +10419,10 @@ function Switch(props) {
     className: labelOpacityClass
   }, topLabel) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "inline-flex items-center gap-2"
-  }, leftLable ? /*#__PURE__*/React__default.createElement("label", {
+  }, leftLabel ? /*#__PURE__*/React__default.createElement("label", {
     htmlFor: idRef.current,
     className: labelOpacityClass
-  }, leftLable) : null, /*#__PURE__*/React__default.createElement("button", {
+  }, leftLabel) : null, /*#__PURE__*/React__default.createElement("button", {
     id: idRef.current,
     type: "button",
     role: "switch",
@@ -10522,13 +10522,13 @@ var Form = function Form(_ref) {
       placeholder = field.placeholder,
       fieldProps = _objectWithoutProperties$1(field, _excluded2$3);
     var error = (_errors$name = errors[name]) === null || _errors$name === void 0 ? void 0 : _errors$name.message;
-    var commonProps = _objectSpread$8({
+    var commonProps = _objectSpread$8(_objectSpread$8({
       name: name,
       label: label,
       required: required,
       error: error,
       placeholder: placeholder
-    }, fieldProps);
+    }, fieldProps), field.options);
     switch (type) {
       case "text":
       case "email":
@@ -10784,13 +10784,13 @@ var Form = function Form(_ref) {
               onChange = _ref9$field.onChange,
               value = _ref9$field.value,
               ref = _ref9$field.ref;
-            return /*#__PURE__*/React__default.createElement(Switch, {
+            return /*#__PURE__*/React__default.createElement(Switch, _extends({
               checked: !!value,
               onChange: onChange,
               ref: ref,
               label: label,
               disabled: fieldProps.disabled
-            });
+            }, commonProps));
           }
         });
       case "custom":
@@ -15092,23 +15092,56 @@ function LocationPicker(_ref) {
   }, iconButton)));
 }
 
-var _excluded$d = ["items", "collapsed", "onToggle", "className", "logo", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen"];
-var Sidebar = function Sidebar(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? [] : _ref$items,
-    _ref$collapsed = _ref.collapsed,
-    collapsed = _ref$collapsed === void 0 ? false : _ref$collapsed,
-    onToggle = _ref.onToggle,
-    className = _ref.className,
-    logo = _ref.logo,
-    user = _ref.user,
-    onUserClick = _ref.onUserClick,
-    _ref$drawerPosition = _ref.drawerPosition,
-    drawerPosition = _ref$drawerPosition === void 0 ? "left" : _ref$drawerPosition,
-    _ref$isMobileOpen = _ref.isMobileOpen,
-    isMobileOpen = _ref$isMobileOpen === void 0 ? false : _ref$isMobileOpen,
-    setIsMobileOpen = _ref.setIsMobileOpen,
-    props = _objectWithoutProperties$1(_ref, _excluded$d);
+var _excluded$d = ["items", "collapsed", "onToggle", "className", "logo", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipClassName"];
+
+/**
+ * Small built-in tooltip used by the Sidebar when collapsed.
+ * Pure CSS + tiny visible prop for fade in/out.
+ */
+var SidebarTooltip = function SidebarTooltip(_ref) {
+  var label = _ref.label,
+    visible = _ref.visible,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: cn$1("absolute left-full top-1/2 -translate-y-1/2 ml-2 whitespace-nowrap", "px-2 py-1 rounded-md bg-gray-900 text-white text-xs shadow-lg", "opacity-0 pointer-events-none transition-opacity duration-150 pb-2 pt-2", {
+      "opacity-100": visible
+    }, className),
+    role: "tooltip",
+    "aria-hidden": !visible
+  }, label);
+};
+
+/**
+ * Sidebar component with custom tooltip for collapsed mode.
+ *
+ * Props:
+ * - items: array of { id, label, icon, children?, onClick?, active? }
+ * - collapsed: boolean (desktop collapsed)
+ * - onToggle: function to toggle collapse
+ * - className, logo, user, onUserClick
+ * - drawerPosition: 'left' | 'right'
+ * - isMobileOpen, setIsMobileOpen
+ * - showCollapsedTooltips: boolean (default true)
+ */
+var Sidebar = function Sidebar(_ref2) {
+  var _ref2$items = _ref2.items,
+    items = _ref2$items === void 0 ? [] : _ref2$items,
+    _ref2$collapsed = _ref2.collapsed,
+    collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    onToggle = _ref2.onToggle,
+    className = _ref2.className,
+    logo = _ref2.logo,
+    user = _ref2.user,
+    onUserClick = _ref2.onUserClick,
+    _ref2$drawerPosition = _ref2.drawerPosition,
+    drawerPosition = _ref2$drawerPosition === void 0 ? "left" : _ref2$drawerPosition,
+    _ref2$isMobileOpen = _ref2.isMobileOpen,
+    isMobileOpen = _ref2$isMobileOpen === void 0 ? false : _ref2$isMobileOpen,
+    setIsMobileOpen = _ref2.setIsMobileOpen,
+    _ref2$showCollapsedTo = _ref2.showCollapsedTooltips,
+    showCollapsedTooltips = _ref2$showCollapsedTo === void 0 ? true : _ref2$showCollapsedTo,
+    tooltipClassName = _ref2.tooltipClassName,
+    props = _objectWithoutProperties$1(_ref2, _excluded$d);
   var _useState = useState(new Set()),
     _useState2 = _slicedToArray(_useState, 2),
     expandedItems = _useState2[0],
@@ -15117,19 +15150,14 @@ var Sidebar = function Sidebar(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     activeItemId = _useState4[0],
     setActiveItemId = _useState4[1];
-
-  // Use props for mobile state, fallback to false
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hoveredItemId = _useState6[0],
+    setHoveredItemId = _useState6[1];
   var mobileOpen = isMobileOpen !== null && isMobileOpen !== void 0 ? isMobileOpen : false;
-
-  // Ensure mobile always shows full sidebar (no collapse on mobile)
   var effectiveCollapsed = mobileOpen ? false : collapsed;
   useEffect(function () {
-    // Prevent body scroll when mobile sidebar is open
-    if (mobileOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "";
-    }
+    if (mobileOpen) document.body.style.overflow = "hidden";else document.body.style.overflow = "";
     return function () {
       document.body.style.overflow = "";
     };
@@ -15139,58 +15167,53 @@ var Sidebar = function Sidebar(_ref) {
     if (next.has(itemId)) next["delete"](itemId);else next.add(itemId);
     setExpandedItems(next);
   };
-
-  // New helper to expand a single item (replace existing expanded set)
   var expandSingle = function expandSingle(itemId) {
-    var next = new Set(expandedItems);
+    var next = new Set();
     next.add(itemId);
     setExpandedItems(next);
   };
   var handleItemClick = function handleItemClick(item) {
     var hasChildren = item.children && item.children.length > 0;
-
-    // If item has children and sidebar is collapsed (desktop),
-    // uncollapse the sidebar and expand + activate this item.
     if (hasChildren && effectiveCollapsed && !mobileOpen) {
-      // Ask parent to toggle collapsed state (uncollapse)
+      // ask parent to uncollapse
       onToggle === null || onToggle === void 0 || onToggle();
-
-      // Mark this item active and expanded locally.
-      // We don't delay because the parent prop change will re-render; this state persists.
       setActiveItemId(item.id);
       expandSingle(item.id);
       return;
     }
-
-    // Normal behavior when not collapsed or on mobile:
     if (hasChildren) {
       toggleExpanded(item.id);
       setActiveItemId(item.id);
     } else {
       var _item$onClick;
-      // leaf item: call its onClick and close mobile if needed
       (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
       setActiveItemId(item.id);
-      if (mobileOpen && setIsMobileOpen) {
-        setIsMobileOpen(false);
-      }
+      if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
     }
   };
   var handleUserClick = function handleUserClick() {
     onUserClick === null || onUserClick === void 0 || onUserClick(user);
-    // Close mobile sidebar when user is clicked
-    if (mobileOpen && setIsMobileOpen) {
-      setIsMobileOpen(false);
-    }
+    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);
   };
   var _renderMenuItem = function renderMenuItem(item) {
     var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     var hasChildren = item.children && item.children.length > 0;
     var isExpanded = expandedItems.has(item.id);
-    // isActive if either the prop says so or we marked it active locally
     var isActive = Boolean(item.active) || activeItemId === item.id;
+    var showTooltipForThis = effectiveCollapsed && level === 0 && showCollapsedTooltips;
+
+    // container needs relative to position tooltip
     return /*#__PURE__*/React__default.createElement("div", {
-      key: item.id
+      key: item.id,
+      className: "relative",
+      onMouseEnter: function onMouseEnter() {
+        return setHoveredItemId(item.id);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHoveredItemId(function (id) {
+          return id === item.id ? null : id;
+        });
+      }
     }, /*#__PURE__*/React__default.createElement("div", {
       className: cn$1("flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors cursor-pointer", {
         "bg-primary-100 text-primary-700": isActive,
@@ -15202,11 +15225,20 @@ var Sidebar = function Sidebar(_ref) {
       },
       role: "button",
       tabIndex: 0,
+      "aria-label": item.label,
       onKeyDown: function onKeyDown(e) {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
           handleItemClick(item);
         }
+      },
+      onFocus: function onFocus() {
+        return setHoveredItemId(item.id);
+      },
+      onBlur: function onBlur() {
+        return setHoveredItemId(function (id) {
+          return id === item.id ? null : id;
+        });
       }
     }, item.icon && /*#__PURE__*/React__default.createElement("span", {
       className: cn$1("flex-shrink-0", {
@@ -15225,16 +15257,14 @@ var Sidebar = function Sidebar(_ref) {
       className: "mt-1 space-y-1 ml-2"
     }, item.children.map(function (child) {
       return _renderMenuItem(child, level + 1);
-    })));
+    })), showTooltipForThis && /*#__PURE__*/React__default.createElement(SidebarTooltip, {
+      label: item.label,
+      visible: hoveredItemId === item.id,
+      className: tooltipClassName
+    }));
   };
-
-  // When on mobile, clicking the toggle should close drawer instead of toggling collapse
   var handleToggleClick = function handleToggleClick() {
-    if (mobileOpen && setIsMobileOpen) {
-      setIsMobileOpen(false);
-    } else {
-      onToggle === null || onToggle === void 0 || onToggle();
-    }
+    if (mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
   var SidebarContent = /*#__PURE__*/React__default.createElement("div", {
     className: cn$1("flex h-full flex-col bg-white border-r border-gray-200 shadow-sm", "w-64 transition-all duration-200", {
@@ -15254,11 +15284,21 @@ var Sidebar = function Sidebar(_ref) {
   }) : /*#__PURE__*/React__default.createElement(ChevronLeft, {
     className: "h-5 w-5"
   }))), /*#__PURE__*/React__default.createElement("nav", {
-    className: "flex-1 space-y-1 p-4 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 hover:[&::-webkit-scrollbar-thumb]:bg-gray-400"
+    className: "flex-1 space-y-1 p-4 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 hover:[&::-webkit-scrollbar-thumb]:bg-gray-400"
   }, items.map(function (item) {
     return _renderMenuItem(item);
   })), user && /*#__PURE__*/React__default.createElement("div", {
     className: "border-t border-gray-200 p-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "relative",
+    onMouseEnter: function onMouseEnter() {
+      return setHoveredItemId("user");
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHoveredItemId(function (id) {
+        return id === "user" ? null : id;
+      });
+    }
   }, /*#__PURE__*/React__default.createElement("div", {
     className: cn$1("flex items-center rounded-md px-3 py-2 cursor-pointer hover:bg-gray-100 transition-colors", {
       "justify-center": effectiveCollapsed,
@@ -15267,10 +15307,13 @@ var Sidebar = function Sidebar(_ref) {
     onClick: handleUserClick,
     role: "button",
     tabIndex: 0,
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === "Enter" || e.key === " ") {
-        handleUserClick();
-      }
+    onFocus: function onFocus() {
+      return setHoveredItemId("user");
+    },
+    onBlur: function onBlur() {
+      return setHoveredItemId(function (id) {
+        return id === "user" ? null : id;
+      });
     }
   }, user.avatar && /*#__PURE__*/React__default.createElement("img", {
     src: user.avatar,
@@ -15282,12 +15325,11 @@ var Sidebar = function Sidebar(_ref) {
     className: "text-sm font-medium text-gray-700 truncate"
   }, user.name), /*#__PURE__*/React__default.createElement("p", {
     className: "text-xs text-gray-500 truncate"
-  }, user.email)))));
-
-  // Compute classes based on drawer position
+  }, user.email))), effectiveCollapsed && showCollapsedTooltips && /*#__PURE__*/React__default.createElement(SidebarTooltip, {
+    label: user.name,
+    visible: hoveredItemId === "user"
+  }))));
   var isRight = drawerPosition === "right";
-
-  // Mobile drawer styles
   var mobileDrawerClasses = cn$1("fixed top-0 z-50 h-full transition-transform duration-300 ease-in-out md:hidden", {
     "left-0": !isRight,
     "right-0": isRight
@@ -15296,8 +15338,6 @@ var Sidebar = function Sidebar(_ref) {
     "-translate-x-full": !mobileOpen && !isRight,
     "translate-x-full": !mobileOpen && isRight
   });
-
-  // Desktop placement
   var desktopPlacementClass = isRight ? "md:order-last" : "";
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "hidden md:flex sticky top-0 h-screen"