react-better-html 1.1.256 → 1.1.258

package/dist/index.d.mts

@@ -517,6 +517,7 @@ type TabsProps = {
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
+    gap?: number;
     onChange?: (tab: Tab) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -1127,7 +1128,8 @@ type SideMenuComponentType = {
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
-    outsideComponent?: React.ReactNode;
+    additionalTopComponent?: React.ReactNode;
+    additionalBottomComponent?: React.ReactNode;
 };
 type BurgerButtonProps = {
     /** @default "left" */

package/dist/index.d.ts

@@ -517,6 +517,7 @@ type TabsProps = {
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
+    gap?: number;
     onChange?: (tab: Tab) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
@@ -1127,7 +1128,8 @@ type SideMenuComponentType = {
 };
 declare const SideMenuComponent: SideMenuComponentType;
 type SideMenuPageHolderProps = PageHolderProps & {
-    outsideComponent?: React.ReactNode;
+    additionalTopComponent?: React.ReactNode;
+    additionalBottomComponent?: React.ReactNode;
 };
 type BurgerButtonProps = {
     /** @default "left" */

package/dist/index.js

@@ -1550,6 +1550,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
       borderRadius: 999,
       alignItems: "center",
       justifyContent: "center",
+      userSelect: "none",
       ref,
       ...props,
       width: size,
@@ -7492,7 +7493,7 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var tabBottomLineWidth = 2;
 var tabDotSize = 6;
 var defaultTabName = "tab";
-var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", onChange, children, ...props }, ref) {
+var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, accentColor, style = "default", gap, onChange, children, ...props }, ref) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   const theme2 = (0, import_react_better_core27.useTheme)();
   const urlQuery = reactRouterDomPlugin2 ? useUrlQuery() : void 0;
@@ -7500,6 +7501,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
   const { colorTheme } = (0, import_react_better_core27.useBetterCoreContext)();
   const firstRenderPassedRef = (0, import_react29.useRef)(false);
   const tabsRef = (0, import_react29.useRef)({});
+  const tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
   const [selectedTab, setSelectedTab] = (0, import_react29.useState)(() => {
     const selectedTabId = tabs[0];
     if (urlQuery) {
@@ -7511,7 +7513,6 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     return selectedTabId;
   });
   const [rerenderState, setRerenderState] = (0, import_react29.useState)(0);
-  const tabsGap = style === "box" ? theme2.styles.gap / 2 : 0;
   const onClickTab = (0, import_react29.useCallback)(
     (tab) => {
       setSelectedTab(tab);
@@ -7595,6 +7596,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
         return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
+            className: "react-better-html-tabs-tab",
             position: "relative",
             width: "fit-content",
             backgroundColor: style === "box" ? selected ? theme2.colors.primary : theme2.colors.backgroundContent : theme2.colors.backgroundBase,
@@ -8284,7 +8286,11 @@ var SideMenuComponent = function SideMenu({
     }
   ) });
 };
-SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, ...props }) {
+SideMenuComponent.pageHolder = function SideMenuPageHolder({
+  additionalTopComponent,
+  additionalBottomComponent,
+  ...props
+}) {
   const theme2 = (0, import_react_better_core29.useTheme)();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
@@ -8298,8 +8304,9 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
       paddingLeft: !mediaQuery.size1000 ? !sideMenuIsCollapsed ? sideMenuWidth : sideMenuCollapsedWidth : void 0,
       transition: theme2.styles.transition,
       children: [
-        outsideComponent,
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PageHolder_default, { ...props })
+        additionalTopComponent,
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PageHolder_default, { ...props }),
+        additionalBottomComponent
       ]
     }
   );