react-better-html 1.1.283 → 1.1.285

package/dist/index.d.mts

@@ -212,6 +212,10 @@ type PageHeaderProps = {
     descriptionFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
+    /** @default theme.styles.space */
+    imageGap?: React.CSSProperties["gap"];
+    /** @default theme.styles.gap / 2 */
+    titleGap?: React.CSSProperties["gap"];
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
     /** @default false */
@@ -1196,6 +1200,8 @@ type SideMenuPageHolderProps = PageHolderProps & {
 type BurgerButtonProps = {
     /** @default "left" */
     position?: "left" | "center" | "right";
+    /** @default theme.colors.border */
+    color?: React.CSSProperties["color"];
     onClick?: (isOpened: boolean) => void;
 };
 declare const SideMenu: typeof SideMenuComponent & {

package/dist/index.d.ts

@@ -212,6 +212,10 @@ type PageHeaderProps = {
     descriptionFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
     descriptionColor?: React.CSSProperties["color"];
+    /** @default theme.styles.space */
+    imageGap?: React.CSSProperties["gap"];
+    /** @default theme.styles.gap / 2 */
+    titleGap?: React.CSSProperties["gap"];
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
     /** @default false */
@@ -1196,6 +1200,8 @@ type SideMenuPageHolderProps = PageHolderProps & {
 type BurgerButtonProps = {
     /** @default "left" */
     position?: "left" | "center" | "right";
+    /** @default theme.colors.border */
+    color?: React.CSSProperties["color"];
     onClick?: (isOpened: boolean) => void;
 };
 declare const SideMenu: typeof SideMenuComponent & {

package/dist/index.js

@@ -1687,6 +1687,8 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
   description,
   descriptionFontSize,
   descriptionColor,
+  imageGap,
+  titleGap,
   textAlign,
   rightElement,
   lightMode,
@@ -1701,7 +1703,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
     Div_default.row,
     {
       alignItems: "center",
-      gap: theme2.styles.space,
+      gap: imageGap ?? theme2.styles.space,
       marginBottom: marginBottom ?? theme2.styles.space * 2,
       ref,
       children: [
@@ -1722,7 +1724,7 @@ var PageHeaderComponent = (0, import_react7.forwardRef)(function PageHeader({
           {
             alignItems: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : void 0,
             flex: 1,
-            gap: theme2.styles.gap / 2,
+            gap: titleGap ?? theme2.styles.gap / 2,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
                 Div_default.row,
@@ -1869,6 +1871,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
   titleRightElement,
   description,
   descriptionColor,
+  titleGap,
   textAlign,
   rightElement,
   lightMode,
@@ -1922,6 +1925,7 @@ DivComponent.box = (0, import_react8.forwardRef)(function Box({
                   titleRightElement,
                   description,
                   descriptionColor,
+                  titleGap,
                   textAlign,
                   rightElement,
                   lightMode,
@@ -7941,6 +7945,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
   description,
   descriptionFontSize,
   descriptionColor,
+  titleGap,
   textAlign,
   rightElement,
   lightMode,
@@ -8033,6 +8038,7 @@ var FoldableComponent = (0, import_react31.forwardRef)(function Foldable({
               description,
               descriptionFontSize,
               descriptionColor,
+              titleGap,
               textAlign,
               rightElement,
               lightMode,
@@ -8381,9 +8387,10 @@ var SideMenuComponent = function SideMenu({
       setActiveItem,
       items: itemsState,
       bottomItems: bottomItemsState,
-      position
+      position,
+      withSideBar: sideBar !== void 0
     }),
-    [activeItem, itemsState, bottomItemsState, position]
+    [activeItem, itemsState, bottomItemsState, position, sideBar]
   );
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
@@ -8430,8 +8437,8 @@ var SideMenuComponent = function SideMenu({
       gap: theme2.styles.gap / 2,
       marginTop: "auto",
       paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
-      paddingInline: !renderItemsHolder ? theme2.styles.space : void 0,
-      paddingBottom: !renderItemsHolder ? !isCollapsable ? theme2.styles.space : void 0 : void 0,
+      paddingInline: !renderBottomItemsHolder ? theme2.styles.space : void 0,
+      paddingBottom: !renderBottomItemsHolder ? !isCollapsable ? mediaQuery.size1000 && bottomItemsAdditionalComponent ? 0 : theme2.styles.space : void 0 : void 0,
       children: readyBottomItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         MenuItemComponent,
         {
@@ -8478,7 +8485,7 @@ var SideMenuComponent = function SideMenu({
           /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             Div_default.column,
             {
-              width: mediaQuery.size1000 ? "100%" : isCollapsed ? sideMenuCollapsedWidth : sideMenuWidth,
+              width: mediaQuery.size1000 ? `calc(100% - ${sideBar ? sideBarWidth : 0}px)` : 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,
@@ -8617,10 +8624,11 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
   const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
-  const { position } = useSideMenuContext();
+  const { position, withSideBar } = 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;
+  const sideBarWidth = components.sideMenu?.width ?? defaultSideBarWidth;
+  const sideSpace = !mediaQuery.size1000 ? (!sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth) + (withSideBar ? sideBarWidth : 0) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Div_default,
     {
@@ -8637,7 +8645,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({
     }
   );
 };
-SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onClick }) {
+SideMenuComponent.burgerButton = function BurgerButton({ position = "left", color, onClick }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = (0, import_react_better_core29.useBooleanState)();
@@ -8646,6 +8654,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
     onClick?.(!sideMenuIsOpenMobile);
   }, [onClick, sideMenuIsOpenMobile]);
   const width = 2;
+  const backgroundColor = color ?? theme2.colors.border;
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     Div_default,
     {
@@ -8667,7 +8676,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
             left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
             right: position === "right" ? 0 : void 0,
-            backgroundColor: theme2.colors.border,
+            backgroundColor,
             borderRadius: 999,
             transform: sideMenuIsOpenMobile ? "rotate(45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
@@ -8682,7 +8691,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             top: "50%",
             left: position === "left" ? 0 : position === "center" ? "50%" : "auto",
             right: position === "right" ? 0 : void 0,
-            backgroundColor: theme2.colors.border,
+            backgroundColor,
             borderRadius: 999,
             transform: `translateY(-50%)${position === "center" ? " translateX(-50%)" : ""}`,
             opacity: sideMenuIsOpenMobile ? 0 : void 0,
@@ -8698,7 +8707,7 @@ SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onCl
             bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
             left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
             right: position === "right" ? 0 : void 0,
-            backgroundColor: theme2.colors.border,
+            backgroundColor,
             borderRadius: 999,
             transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition