react-better-html 1.1.261 → 1.1.263

package/dist/index.mjs

@@ -2057,6 +2057,9 @@ var Loader_default = Loader2;
 
 // src/components/Button.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var fromSubcomponentProps = {
+  fromSubcomponent: true
+};
 var ButtonElement = styled6.button.withConfig({
   shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading", "withNoBorder"].includes(
     prop
@@ -2139,7 +2142,7 @@ var ButtonComponent = function Button(buttonProps) {
     onClickWithValue,
     ...props
   } = useComponentsPropsMerger(
-    betterHtmlContextInternal.components.button?.style?.default,
+    !buttonProps.fromSubcomponent ? betterHtmlContextInternal.components.button?.style?.default : {},
     buttonProps
   );
   const theme2 = useTheme9();
@@ -2264,6 +2267,7 @@ ButtonComponent.secondary = function Secondary(buttonProps) {
     {
       className: `secondary${className ? ` ${className}` : ""}`,
       color: theme2.colors.textPrimary,
+      ...fromSubcomponentProps,
       ...props
     }
   );
@@ -2275,7 +2279,15 @@ ButtonComponent.destructive = function Destructive(buttonProps) {
     buttonProps
   );
   const theme2 = useTheme9();
-  return /* @__PURE__ */ jsx8(ButtonComponent, { backgroundColor: theme2.colors.error, color: theme2.colors.base, ...props });
+  return /* @__PURE__ */ jsx8(
+    ButtonComponent,
+    {
+      backgroundColor: theme2.colors.error,
+      color: theme2.colors.base,
+      ...fromSubcomponentProps,
+      ...props
+    }
+  );
 };
 ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...buttonProps }) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -2289,7 +2301,6 @@ ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonC
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
-      ...betterHtmlContextInternal.components.button?.style?.icon,
       width: readyButtonSize,
       height: readyButtonSize,
       color: theme2.colors.textPrimary,
@@ -2302,6 +2313,7 @@ ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonC
       border: "none",
       padding: 0,
       filterHover: "none !important",
+      ...fromSubcomponentProps,
       ...props
     }
   );
@@ -2325,10 +2337,10 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
   return /* @__PURE__ */ jsx8(
     ButtonComponent,
     {
-      ...betterHtmlContextInternal.components.button?.style?.upload,
       text: "Upload",
       icon: "uploadCloud",
       onClick: onClickElement,
+      ...fromSubcomponentProps,
       ...props
     }
   );
@@ -7464,41 +7476,41 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
   const firstRenderPassedRef = useRef8(false);
   const tabsRef = useRef8({});
   const tabsGap = gap ?? (style === "box" ? theme2.styles.gap / 2 : 0);
-  const [selectedTab, setSelectedTab] = useState13(() => {
-    const selectedTabId = tabs[0];
+  const [selectedTabId, setSelectedTabId] = useState13(() => {
+    const selectedTabId2 = tabs[0];
     if (urlQuery) {
       const tabQueryValue = urlQuery.getQuery(name ?? defaultTabName);
-      if (!tabQueryValue) return selectedTabId;
+      if (!tabQueryValue) return selectedTabId2.id;
       const queryTab = tabs.find((tab) => tab.id === tabQueryValue);
-      if (queryTab) return queryTab;
+      if (queryTab) return queryTab.id;
     }
-    return selectedTabId;
+    return selectedTabId2.id;
   });
   const [rerenderState, setRerenderState] = useState13(0);
   const onClickTab = useCallback16(
-    (tab) => {
-      setSelectedTab(tab);
-      onChange?.(tab);
+    (tabId) => {
+      setSelectedTabId(tabId);
+      onChange?.(tabId);
       if (urlQuery) {
         urlQuery.setQuery({
-          [name ?? defaultTabName]: tab.id
+          [name ?? defaultTabName]: tabId
         });
       }
     },
     [onChange, name, urlQuery]
   );
   const width = useMemo11(
-    () => tabsRef.current[selectedTab.id]?.getBoundingClientRect().width ?? 0,
-    [rerenderState, selectedTab]
+    () => tabsRef.current[selectedTabId]?.getBoundingClientRect().width ?? 0,
+    [rerenderState, selectedTabId]
   );
   const leftSpacing = useMemo11(() => {
-    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTab.id);
+    const selectedTabIndex = tabs.findIndex((tab) => tab.id === selectedTabId);
     let spacing = 0;
     Object.values(tabsRef.current).forEach((tab, index) => {
       if (index < selectedTabIndex) spacing += (tab?.getBoundingClientRect().width ?? 0) + tabsGap;
     });
     return spacing;
-  }, [selectedTab, tabs, tabsGap]);
+  }, [selectedTabId, tabs, tabsGap]);
   useEffect14(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
@@ -7515,7 +7527,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
         return oldValue.map(
           (item) => item.name === (name ?? defaultTabName) ? {
             ...item,
-            selectedTab: selectedTab.id
+            selectedTab: selectedTabId
           } : item
         );
       } else {
@@ -7523,18 +7535,18 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
           ...oldValue,
           {
             name: name ?? defaultTabName,
-            selectedTab: selectedTab.id
+            selectedTab: selectedTabId
           }
         ];
       }
     });
-  }, [selectedTab, name]);
+  }, [selectedTabId, name]);
   useEffect14(() => {
-    tabsRef.current[selectedTab.id]?.scrollIntoView({
+    tabsRef.current[selectedTabId]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
-  }, [selectedTab]);
+  }, [selectedTabId]);
   useEffect14(() => {
     return () => {
       componentsState.tabs.setTabGroups(
@@ -7543,18 +7555,18 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
     };
   }, []);
   useEffect14(() => {
-    onChange?.(selectedTab);
+    onChange?.(selectedTabId);
   }, []);
   useImperativeHandle4(ref, () => {
     return {
-      selectedTab: selectedTab.id,
+      selectedTab: selectedTabId,
       selectTab: onClickTab
     };
-  }, [selectedTab, onClickTab]);
+  }, [selectedTabId, onClickTab]);
   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__ */ jsx25(Div_default.row, { position: "relative", width: "fit-content", gap: tabsGap, userSelect: "none", children: tabs.map((tab) => {
-        const selected = tab.id === selectedTab.id;
+        const selected = tab.id === selectedTabId;
         return /* @__PURE__ */ jsxs22(
           Div_default,
           {
@@ -7569,7 +7581,7 @@ var TabsComponent = forwardRef17(function Tabs({ tabs, name, accentColor, style
             filterHover: colorTheme === "dark" ? style === "box" ? "brightness(1.2)" : "brightness(2)" : "brightness(0.9)",
             paddingInline: theme2.styles.space,
             paddingBlock: theme2.styles.gap,
-            value: tab,
+            value: tab.id,
             cursor: "pointer",
             isTabAccessed: true,
             onClickWithValue: onClickTab,