react-better-html 1.1.257 → 1.1.259

package/dist/index.d.mts

@@ -517,6 +517,8 @@ type TabsProps = {
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
+    gap?: number;
+    noBottomLine?: boolean;
     onChange?: (tab: Tab) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;

package/dist/index.d.ts

@@ -517,6 +517,8 @@ type TabsProps = {
     name?: string;
     accentColor?: Color;
     style?: "default" | "borderRadiusTop" | "box";
+    gap?: number;
+    noBottomLine?: boolean;
     onChange?: (tab: Tab) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;

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, noBottomLine, 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${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,
@@ -7641,7 +7643,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
           tab.id
         );
       }) }),
-      style !== "box" && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      style !== "box" && !noBottomLine && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Div_default,
         {
           position: "absolute",