react-better-html 1.1.268 → 1.1.270

package/dist/index.mjs

@@ -7581,12 +7581,13 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
             className: `react-better-html-tabs-tab${selected ? " react-better-html-tabs-tab-selected" : ""}`,
             position: "relative",
             width: "fit-content",
-            backgroundColor: style === "box" ? selected ? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
+            backgroundColor: style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
             borderRadius: style === "box" ? theme2.styles.borderRadius : void 0,
             borderTopLeftRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
             borderTopRightRadius: style === "borderRadiusTop" ? theme2.styles.borderRadius : void 0,
             border: style === "box" ? `${theme2.styles.borderWidth}px solid ${selected ? "transparent" : theme2.colors.border}` : void 0,
-            filterHover: colorTheme === "dark" ? style === "box" ? "brightness(1.2)" : "brightness(2)" : "brightness(0.9)",
+            borderColorHover: style === "box" ? accentColor ?? theme2.colors.primary : void 0,
+            filterHover: style !== "box" ? filterHover().z1 : void 0,
             paddingInline: theme2.styles.space,
             paddingBlock: theme2.styles.gap,
             value: tab.id,
@@ -7844,7 +7845,7 @@ var useSideMenuContext = () => {
   }
   return context;
 };
-var MenuItemComponent = memo27(function MenuItemComponent2({
+var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
   item,
   backgroundColor,
   activeItemColor,
@@ -7872,8 +7873,8 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
     }
   }, [onClick, item, isCollapsed]);
   const childrenHaveDot = useMemo12(
-    () => item.children?.some((child) => child.withDot) ?? false,
-    [item.children]
+    () => item.children?.some((child) => child.type === "item" && child.withDot) ?? false,
+    [item]
   );
   const isActive = activeItem && item.href && activeItem.href === item.href;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
@@ -7978,7 +7979,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
   useEffect16(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
-      (child) => child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false
+      (child) => child.type === "item" ? child.href ? location.pathname === "/" ? location.pathname === child.href : location.pathname.startsWith(child.href) && child.href !== "/" : false : false
     );
     if (!isCollapsed) setIsOpened.setState(toBeOpened);
   }, [item, isCollapsed]);
@@ -7987,7 +7988,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
     setIsOpened.setFalse();
   }, [isCollapsed]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
-  return /* @__PURE__ */ jsxs24(Div_default, { width: "100%", children: [
+  return /* @__PURE__ */ jsxs24(Fragment8, { children: [
     item.href ? /* @__PURE__ */ jsx27(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
     item.children && /* @__PURE__ */ jsxs24(
       Div_default.column,
@@ -8001,7 +8002,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
           item.children.map((child) => /* @__PURE__ */ jsx27(
-            MenuItemComponent2,
+            MenuItemComponent,
             {
               item: child,
               backgroundColor: readyBackgroundColor,
@@ -8053,6 +8054,13 @@ var MenuItemComponent = memo27(function MenuItemComponent2({
     )
   ] });
 });
+var MenuItemTypeDivider = memo27(function MenuItemTypeDivider2({ item }) {
+  const theme2 = useTheme29();
+  return /* @__PURE__ */ jsx27(Div_default.row, { paddingTop: theme2.styles.space, paddingInline: theme2.styles.gap, children: /* @__PURE__ */ jsx27(Text_default, { fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: theme2.colors.textSecondary, children: item.text }) });
+});
+var MenuItemComponent = memo27(function MenuItemComponent2({ item, ...props }) {
+  return /* @__PURE__ */ jsx27(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ jsx27(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ jsx27(MenuItemTypeDivider, { item }) : void 0 });
+});
 var SideMenuComponent = function SideMenu({
   items,
   bottomItems,