react-better-html 1.1.277 → 1.1.279

package/dist/index.mjs

@@ -42,6 +42,7 @@ var appConfig = {
 };
 var defaultAlertDuration = 2.3 * 1e3;
 var defaultSideMenuWidth = 300;
+var defaultSideBarWidth = 80;
 
 // src/constants/theme.ts
 var theme = {};
@@ -7630,6 +7631,7 @@ var TabsComponent = forwardRef17(function Tabs({
   accentColor,
   style = "default",
   gap,
+  borderRadius,
   noBottomLine,
   keepUrlHistory = true,
   onChange,
@@ -7642,7 +7644,7 @@ var TabsComponent = forwardRef17(function Tabs({
   const { language, componentsState } = useBetterHtmlContextInternal();
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
-  const tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
+  const tabsGap = gap ?? (style === "box" || style === "bubble" ? theme2.styles.gap / 2 : 0);
   const [selectedTabId, setSelectedTabId] = useState13(() => {
     const selectedTabId2 = tabs[0];
     if (!selectedTabId2) return "";
@@ -7734,9 +7736,10 @@ var TabsComponent = forwardRef17(function Tabs({
       selectTab: onClickTab
     };
   }, [selectedTabId, onClickTab]);
+  const readyBorderRadius = borderRadius ?? (style === "bubble" ? theme2.styles.borderRadius : void 0);
   return /* @__PURE__ */ jsxs22(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ jsxs22(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
-      /* @__PURE__ */ jsx26(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
+      /* @__PURE__ */ jsx26(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", zIndex: 2, children: tabs.map((tab) => {
         const selected = tab.id === selectedTabId;
         return /* @__PURE__ */ jsxs22(
           Div_default,
@@ -7744,8 +7747,9 @@ var TabsComponent = forwardRef17(function Tabs({
             className: `react-better-html-tabs-tab${selected ? " react-better-html-tabs-tab-selected" : ""}`,
             position: "relative",
             width: "fit-content",
-            backgroundColor: style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
-            borderRadius: style === "box" ? theme2.styles.borderRadius : void 0,
+            backgroundColor: style === "bubble" ? theme2.colors.textPrimary + "00" : style === "box" ? selected ? accentColor ?? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
+            backgroundColorHover: style === "bubble" ? theme2.colors.textPrimary + "20" : void 0,
+            borderRadius: readyBorderRadius ?? (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,
@@ -7778,7 +7782,7 @@ var TabsComponent = forwardRef17(function Tabs({
                 Text_default,
                 {
                   fontWeight: 700,
-                  color: !selected ? theme2.colors.textSecondary : style === "box" ? theme2.colors.base : void 0,
+                  color: !selected ? theme2.colors.textSecondary : style === "box" || style === "bubble" ? theme2.colors.base : void 0,
                   transition: theme2.styles.transition,
                   whiteSpace: "nowrap",
                   children: tab.label ?? tab.id
@@ -7789,7 +7793,20 @@ var TabsComponent = forwardRef17(function Tabs({
           tab.id
         );
       }) }),
-      style !== "box" && !noBottomLine && /* @__PURE__ */ jsx26(
+      style !== "box" && !noBottomLine && (style === "bubble" ? /* @__PURE__ */ jsx26(
+        Div_default,
+        {
+          position: "absolute",
+          width,
+          height: "100%",
+          bottom: 0,
+          left: leftSpacing,
+          backgroundColor: accentColor ?? theme2.colors.primary,
+          borderRadius: readyBorderRadius,
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none",
+          zIndex: 1
+        }
+      ) : /* @__PURE__ */ jsx26(
         Div_default,
         {
           position: "absolute",
@@ -7798,9 +7815,10 @@ var TabsComponent = forwardRef17(function Tabs({
           bottom: 0,
           left: leftSpacing,
           backgroundColor: accentColor ?? theme2.colors.primary,
-          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none"
+          transition: firstRenderPassedRef.current ? theme2.styles.transition : "none",
+          zIndex: 2
         }
-      )
+      ))
     ] }),
     children && /* @__PURE__ */ jsx26(Div_default, { width: "100%", children })
   ] });
@@ -7837,6 +7855,7 @@ var animationDurationOpen = animationDurationClose * 2;
 var FoldableComponent = forwardRef18(function Foldable({
   isOpen: controlledIsOpen,
   defaultOpen = false,
+  withoutLine,
   icon,
   iconColor,
   iconSize,
@@ -7954,7 +7973,7 @@ var FoldableComponent = forwardRef18(function Foldable({
         ]
       }
     ),
-    /* @__PURE__ */ jsx27(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx27(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
+    !withoutLine && /* @__PURE__ */ jsx27(Div_default, { height: isOpen ? 1 : 0, opacity: isOpen ? 1 : 0, transition: theme2.styles.transition, children: /* @__PURE__ */ jsx27(Divider_default.horizontal, { width: theme2.styles.borderWidth === 0 ? 1 : theme2.styles.borderWidth }) }),
     /* @__PURE__ */ jsx27(
       Div_default,
       {
@@ -8254,6 +8273,7 @@ var SideMenuComponent = function SideMenu({
   items,
   bottomItems,
   location,
+  position = "left",
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -8266,6 +8286,7 @@ var SideMenuComponent = function SideMenu({
   itemsAdditionalComponent,
   betweenItemsAdditionalComponent,
   bottomItemsAdditionalComponent,
+  border,
   isLoading,
   backgroundColor,
   activeItemColor,
@@ -8274,8 +8295,10 @@ var SideMenuComponent = function SideMenu({
   paddingTop,
   paddingBottom,
   mobileFoldToPosition = "left",
+  sideBar,
   renderItemsHolder,
-  renderBottomItemsHolder
+  renderBottomItemsHolder,
+  children
 }) {
   const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
@@ -8293,17 +8316,21 @@ var SideMenuComponent = function SideMenu({
       activeItem,
       setActiveItem,
       items: itemsState,
-      bottomItems: bottomItemsState
+      bottomItems: bottomItemsState,
+      position
     }),
-    [activeItem, itemsState, bottomItemsState]
+    [activeItem, itemsState, bottomItemsState, position]
   );
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  const sideBarWidth = components.sideMenu?.width ?? defaultSideBarWidth;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
+  const readyBorder = border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`;
+  const readyTransition = mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition;
   useEffect16(() => {
     setItemsState(items);
   }, [items]);
@@ -8355,139 +8382,168 @@ var SideMenuComponent = function SideMenu({
       ))
     }
   );
-  return /* @__PURE__ */ jsx28(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs24(
-    Div_default.column,
+  const sideBarComponent = sideBar ? /* @__PURE__ */ jsx28(
+    Div_default,
     {
-      as: "aside",
-      position: "fixed",
-      width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
-      height: `calc(100svh - ${topSpace}px)`,
-      top: topSpace,
-      left: 0,
-      backgroundColor: readyBackgroundColor,
-      borderRight: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
-      transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : `translateX(${mobileFoldToPosition === "left" ? "-" : ""}100%)`,
-      paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
-      paddingBottom,
-      transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
-      userSelect: "none",
-      zIndex: 10,
-      children: [
-        /* @__PURE__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
-            (logoAssetName || logoUrl) && /* @__PURE__ */ jsx28(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs24(
-              Div_default.row,
-              {
-                alignItems: "center",
-                width: sideMenuCollapsedWidth ? logoSize : void 0,
-                height: logoSize,
-                whiteSpace: "nowrap",
-                gap: theme2.styles.gap,
-                children: [
-                  /* @__PURE__ */ jsx28(
-                    Image_default,
-                    {
-                      name: logoAssetName,
-                      src: logoUrl,
-                      width: logoSize,
-                      height: logoSize,
-                      objectFit: "contain"
-                    }
-                  ),
-                  logoText && /* @__PURE__ */ jsx28(
-                    Text_default,
-                    {
-                      fontFamily: logoFontFamily,
-                      fontSize: 22,
-                      fontWeight: 800,
-                      opacity: !isCollapsed ? 1 : 0,
-                      transition: theme2.styles.transition,
-                      userSelect: "none",
-                      children: logoText
-                    }
-                  )
-                ]
-              }
-            ) }),
-            withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx28(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
-          ] }),
-          itemsAdditionalComponent,
-          !isLoading ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
-            renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
-            betweenItemsAdditionalComponent,
-            readyBottomItems && /* @__PURE__ */ jsx28(Fragment10, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
-          ] }) : /* @__PURE__ */ jsx28(Div_default, { flex: 1, children: /* @__PURE__ */ jsx28(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
-          bottomItemsAdditionalComponent,
-          isCollapsable && /* @__PURE__ */ jsx28(
-            Div_default,
+      width: sideBarWidth,
+      height: "100%",
+      flexShrink: 0,
+      borderRight: position === "left" ? readyBorder : void 0,
+      borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
+      children: sideBar
+    }
+  ) : sideBar;
+  return /* @__PURE__ */ jsxs24(SideMenuContextProvider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxs24(
+      Div_default.row,
+      {
+        as: "aside",
+        position: "fixed",
+        width: mediaQuery.size1000 ? "100%" : (isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth) + (sideBar ? sideBarWidth : 0),
+        height: `calc(100svh - ${topSpace}px)`,
+        top: topSpace,
+        left: position === "left" ? 0 : void 0,
+        right: position === "right" ? 0 : void 0,
+        backgroundColor: readyBackgroundColor,
+        transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : `translateX(${mobileFoldToPosition === "left" ? "-" : ""}100%)`,
+        transition: readyTransition,
+        userSelect: "none",
+        zIndex: 10,
+        children: [
+          position === "left" && sideBarComponent,
+          /* @__PURE__ */ jsxs24(
+            Div_default.column,
             {
-              borderTop: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
-              marginTop: !readyBottomItems ? "auto" : void 0,
-              paddingInline: theme2.styles.space,
-              paddingBlock: theme2.styles.space,
-              children: /* @__PURE__ */ jsx28(
-                Div_default.row,
-                {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: readyBackgroundColor,
-                  borderRadius: theme2.styles.borderRadius,
-                  cursor: "pointer",
-                  filterHover: filterHover().z1,
-                  isTabAccessed: true,
-                  paddingBlock: theme2.styles.gap,
-                  onClick: setSideMenuIsCollapsed.toggle,
-                  children: /* @__PURE__ */ jsx28(
-                    Icon_default,
+              width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+              height: "100%",
+              borderRight: position === "left" ? readyBorder : void 0,
+              borderLeft: position === "right" ? border ?? `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}` : void 0,
+              flexShrink: 0,
+              paddingTop: paddingTop ?? (logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space),
+              paddingBottom,
+              transition: readyTransition,
+              children: [
+                /* @__PURE__ */ jsxs24(Div_default.column, { width: "100%", height: "100%", gap: gap ?? theme2.styles.space, children: [
+                  (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ jsxs24(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
+                    (logoAssetName || logoUrl) && /* @__PURE__ */ jsx28(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ jsxs24(
+                      Div_default.row,
+                      {
+                        alignItems: "center",
+                        width: sideMenuCollapsedWidth ? logoSize : void 0,
+                        height: logoSize,
+                        whiteSpace: "nowrap",
+                        gap: theme2.styles.gap,
+                        children: [
+                          /* @__PURE__ */ jsx28(
+                            Image_default,
+                            {
+                              name: logoAssetName,
+                              src: logoUrl,
+                              width: logoSize,
+                              height: logoSize,
+                              objectFit: "contain"
+                            }
+                          ),
+                          logoText && /* @__PURE__ */ jsx28(
+                            Text_default,
+                            {
+                              fontFamily: logoFontFamily,
+                              fontSize: 22,
+                              fontWeight: 800,
+                              opacity: !isCollapsed ? 1 : 0,
+                              transition: theme2.styles.transition,
+                              userSelect: "none",
+                              children: logoText
+                            }
+                          )
+                        ]
+                      }
+                    ) }),
+                    withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ jsx28(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
+                  ] }),
+                  itemsAdditionalComponent,
+                  !isLoading ? /* @__PURE__ */ jsxs24(Fragment10, { children: [
+                    renderItemsHolder ? renderItemsHolder(itemsComponent) : itemsComponent,
+                    betweenItemsAdditionalComponent,
+                    readyBottomItems && /* @__PURE__ */ jsx28(Fragment10, { children: renderBottomItemsHolder ? renderBottomItemsHolder(bottomItemsComponent) : bottomItemsComponent })
+                  ] }) : /* @__PURE__ */ jsx28(Div_default, { flex: 1, children: /* @__PURE__ */ jsx28(Loader_default.box, { text: isCollapsed ? "" : void 0 }) }),
+                  bottomItemsAdditionalComponent,
+                  isCollapsable && /* @__PURE__ */ jsx28(
+                    Div_default,
                     {
-                      name: "chevronRight",
-                      size: 20,
-                      color: theme2.colors.textSecondary,
-                      transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
-                      transition: theme2.styles.transition
+                      borderTop: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
+                      marginTop: !readyBottomItems ? "auto" : void 0,
+                      paddingInline: theme2.styles.space,
+                      paddingBlock: theme2.styles.space,
+                      children: /* @__PURE__ */ jsx28(
+                        Div_default.row,
+                        {
+                          alignItems: "center",
+                          justifyContent: "center",
+                          backgroundColor: readyBackgroundColor,
+                          borderRadius: theme2.styles.borderRadius,
+                          cursor: "pointer",
+                          filterHover: filterHover().z1,
+                          isTabAccessed: true,
+                          paddingBlock: theme2.styles.gap,
+                          onClick: setSideMenuIsCollapsed.toggle,
+                          children: /* @__PURE__ */ jsx28(
+                            Icon_default,
+                            {
+                              name: position === "left" ? "chevronRight" : "chevronLeft",
+                              size: 20,
+                              color: theme2.colors.textSecondary,
+                              transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                              transition: theme2.styles.transition
+                            }
+                          )
+                        }
+                      )
                     }
                   )
-                }
-              )
+                ] }),
+                widthMobileHandle && /* @__PURE__ */ jsx28(
+                  Div_default.row,
+                  {
+                    position: "absolute",
+                    top: theme2.styles.space,
+                    left: "100%",
+                    backgroundColor: readyBackgroundColor,
+                    border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
+                    borderLeft: "none",
+                    borderTopRightRadius: theme2.styles.borderRadius,
+                    borderBottomRightRadius: theme2.styles.borderRadius,
+                    alignItems: "center",
+                    cursor: "pointer",
+                    opacity: !mediaQuery.size1000 ? 0 : void 0,
+                    pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
+                    padding: theme2.styles.gap,
+                    paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
+                    transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
+                    transition: theme2.styles.transition,
+                    onClick: setSideMenuIsOpenMobile.toggle,
+                    children: /* @__PURE__ */ jsx28(
+                      Icon_default,
+                      {
+                        name: "chevronRight",
+                        size: 20,
+                        color: theme2.colors.textSecondary,
+                        transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
+                        transition: theme2.styles.transition
+                      }
+                    )
+                  }
+                ),
+                absoluteComponent && /* @__PURE__ */ jsx28(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ jsx28(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
+              ]
             }
-          )
-        ] }),
-        widthMobileHandle && /* @__PURE__ */ jsx28(
-          Div_default.row,
-          {
-            position: "absolute",
-            top: theme2.styles.space,
-            left: "100%",
-            backgroundColor: readyBackgroundColor,
-            border: `solid ${theme2.styles.borderWidth}px ${theme2.colors.border}`,
-            borderLeft: "none",
-            borderTopRightRadius: theme2.styles.borderRadius,
-            borderBottomRightRadius: theme2.styles.borderRadius,
-            alignItems: "center",
-            cursor: "pointer",
-            opacity: !mediaQuery.size1000 ? 0 : void 0,
-            pointerEvents: !mediaQuery.size1000 ? "none" : void 0,
-            padding: theme2.styles.gap,
-            paddingRight: (theme2.styles.space + theme2.styles.gap) / 2,
-            transform: !mediaQuery.size1000 ? "translateX(-100%)" : void 0,
-            transition: theme2.styles.transition,
-            onClick: setSideMenuIsOpenMobile.toggle,
-            children: /* @__PURE__ */ jsx28(
-              Icon_default,
-              {
-                name: "chevronRight",
-                size: 20,
-                color: theme2.colors.textSecondary,
-                transform: sideMenuIsOpenMobile ? "rotate(180deg)" : void 0,
-                transition: theme2.styles.transition
-              }
-            )
-          }
-        ),
-        absoluteComponent && /* @__PURE__ */ jsx28(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ jsx28(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
-      ]
-    }
-  ) });
+          ),
+          position === "right" && sideBarComponent
+        ]
+      }
+    ),
+    children
+  ] });
 };
 SideMenuComponent.pageHolder = function SideMenuPageHolder({
   additionalTopComponent,
@@ -8497,14 +8553,17 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
   const theme2 = useTheme29();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const { position } = useSideMenuContext();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
   const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  const sideSpace = !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0;
   return /* @__PURE__ */ jsxs24(
     Div_default,
     {
       position: "relative",
       width: "100%",
-      paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
+      paddingLeft: position === "left" ? sideSpace : void 0,
+      paddingRight: position === "right" ? sideSpace : void 0,
       transition: theme2.styles.transition,
       children: [
         additionalTopComponent,