react-better-html 1.1.261 → 1.1.263

package/dist/index.d.mts

@@ -1,8 +1,7 @@
-import { IconName, AnyOtherString, AssetName, LoaderName, OmitProps, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
-export { API, APIConfigItem, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
+import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
+export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { WebTarget } from 'styled-components';
 import { Location, useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
 
@@ -24,7 +23,7 @@ type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
     ref?: React.Ref<ComponentRef>;
 };
 
-type ButtonProps<Value = unknown> = {
+type InternalButtonProps<Value = unknown> = {
     text?: string;
     value?: Value;
     href?: string;
@@ -55,8 +54,10 @@ type ButtonProps<Value = unknown> = {
     isSmall?: boolean;
     /** @default false */
     isSubmit?: boolean;
+    fromSubcomponent?: boolean;
     onClickWithValue?: (value: Value) => void;
 } & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue" | "translate" | "value"> & ComponentStyle & ComponentHoverStyle;
+type ButtonProps<Value = unknown> = OmitProps<InternalButtonProps<Value>, "fromSubcomponent">;
 type ButtonComponent = {
     <Value>(props: ButtonProps<Value>): React.ReactElement;
     secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
@@ -422,7 +423,7 @@ type LabelProps = {
     color?: React.CSSProperties["color"];
     htmlFor?: string;
 };
-declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
+declare function Label(labelProps: LabelProps): react.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof Label>;
 
 type ImageProps = {
@@ -519,12 +520,12 @@ type TabsProps = {
     style?: "default" | "borderRadiusTop" | "box";
     gap?: number;
     noBottomLine?: boolean;
-    onChange?: (tab: Tab) => void;
+    onChange?: (tab: Tab["id"]) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: Tab["id"];
-    selectTab: (tab: Tab) => void;
+    selectTab: (tabId: Tab["id"]) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -556,7 +557,7 @@ type BetterHtmlProviderConfig = BetterCoreProviderConfig & BetterHtmlProviderInt
 type BetterHtmlProviderProps = BetterProviderCommonProps & {
     config?: BetterHtmlProviderConfig;
 };
-declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
+declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react.JSX.Element;
 declare const _default$1: react.MemoExoticComponent<typeof BetterHtmlProvider>;
 
 declare const isMobileDevice: boolean;

package/dist/index.d.ts

@@ -1,8 +1,7 @@
-import { IconName, AnyOtherString, AssetName, LoaderName, OmitProps, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
-export { API, APIConfigItem, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
+import { OmitProps, IconName, AnyOtherString, AssetName, LoaderName, Country, Color, BetterCoreProviderConfig, DeepPartialRecord, BetterCoreConfig, PartialRecord, PickValue } from 'react-better-core';
+export { API, APIConfigItem, APIEndpointConfig, APIError, APIResponse, AnyOtherString, AssetName, AssetsConfig, Color, ColorName, ColorTheme, Colors, Country, DeepPartialRecord, ExcludeOptions, HttpHeaders as HttpHeader, HttpMethod, IconName, IconsConfig, LoaderConfig, LoaderName, OmitProps, PartialRecord, PickAllRequired, PickValue, Styles, Theme, ThemeConfig, Unsubscribe, UrlQuery, calculateColorContrast, colorThemeControls, countries, darkenColor, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, formatPhoneNumber, generateApi, generateEventEmitter, generateRandomString, getPluralWord, isApiError, lightenColor, loaderControls, log, saturateColor, useBooleanState, useDebounceState, useLoader, useLoaderControls, useTheme } from 'react-better-core';
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { WebTarget } from 'styled-components';
 import { Location, useNavigate, useLocation, useInRouterContext, useSearchParams, createSearchParams } from 'react-router-dom';
 
@@ -24,7 +23,7 @@ type ComponentPropWithRef<ComponentRef, ComponentProps> = ComponentProps & {
     ref?: React.Ref<ComponentRef>;
 };
 
-type ButtonProps<Value = unknown> = {
+type InternalButtonProps<Value = unknown> = {
     text?: string;
     value?: Value;
     href?: string;
@@ -55,8 +54,10 @@ type ButtonProps<Value = unknown> = {
     isSmall?: boolean;
     /** @default false */
     isSubmit?: boolean;
+    fromSubcomponent?: boolean;
     onClickWithValue?: (value: Value) => void;
 } & OmitProps<React.ComponentProps<"button">, "style" | "defaultValue" | "translate" | "value"> & ComponentStyle & ComponentHoverStyle;
+type ButtonProps<Value = unknown> = OmitProps<InternalButtonProps<Value>, "fromSubcomponent">;
 type ButtonComponent = {
     <Value>(props: ButtonProps<Value>): React.ReactElement;
     secondary: <Value>(props: ButtonProps<Value>) => React.ReactElement;
@@ -422,7 +423,7 @@ type LabelProps = {
     color?: React.CSSProperties["color"];
     htmlFor?: string;
 };
-declare function Label(labelProps: LabelProps): react_jsx_runtime.JSX.Element;
+declare function Label(labelProps: LabelProps): react.JSX.Element;
 declare const _default$3: react.MemoExoticComponent<typeof Label>;
 
 type ImageProps = {
@@ -519,12 +520,12 @@ type TabsProps = {
     style?: "default" | "borderRadiusTop" | "box";
     gap?: number;
     noBottomLine?: boolean;
-    onChange?: (tab: Tab) => void;
+    onChange?: (tab: Tab["id"]) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type TabsRef = {
     selectedTab: Tab["id"];
-    selectTab: (tab: Tab) => void;
+    selectTab: (tabId: Tab["id"]) => void;
 };
 type TabsComponent = {
     (props: ComponentPropWithRef<TabsRef, TabsProps>): React.ReactElement;
@@ -556,7 +557,7 @@ type BetterHtmlProviderConfig = BetterCoreProviderConfig & BetterHtmlProviderInt
 type BetterHtmlProviderProps = BetterProviderCommonProps & {
     config?: BetterHtmlProviderConfig;
 };
-declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
+declare function BetterHtmlProvider({ config, ...props }: BetterHtmlProviderProps): react.JSX.Element;
 declare const _default$1: react.MemoExoticComponent<typeof BetterHtmlProvider>;
 
 declare const isMobileDevice: boolean;

package/dist/index.js

@@ -2124,6 +2124,9 @@ var Loader_default = Loader2;
 
 // src/components/Button.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
+var fromSubcomponentProps = {
+  fromSubcomponent: true
+};
 var ButtonElement = import_styled_components6.default.button.withConfig({
   shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading", "withNoBorder"].includes(
     prop
@@ -2206,7 +2209,7 @@ var ButtonComponent = function Button(buttonProps) {
     onClickWithValue,
     ...props
   } = useComponentsPropsMerger(
-    betterHtmlContextInternal.components.button?.style?.default,
+    !buttonProps.fromSubcomponent ? betterHtmlContextInternal.components.button?.style?.default : {},
     buttonProps
   );
   const theme2 = (0, import_react_better_core9.useTheme)();
@@ -2331,6 +2334,7 @@ ButtonComponent.secondary = function Secondary(buttonProps) {
     {
       className: `secondary${className ? ` ${className}` : ""}`,
       color: theme2.colors.textPrimary,
+      ...fromSubcomponentProps,
       ...props
     }
   );
@@ -2342,7 +2346,15 @@ ButtonComponent.destructive = function Destructive(buttonProps) {
     buttonProps
   );
   const theme2 = (0, import_react_better_core9.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ButtonComponent, { backgroundColor: theme2.colors.error, color: theme2.colors.base, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ButtonComponent,
+    {
+      backgroundColor: theme2.colors.error,
+      color: theme2.colors.base,
+      ...fromSubcomponentProps,
+      ...props
+    }
+  );
 };
 ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...buttonProps }) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
@@ -2356,7 +2368,6 @@ ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonC
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
-      ...betterHtmlContextInternal.components.button?.style?.icon,
       width: readyButtonSize,
       height: readyButtonSize,
       color: theme2.colors.textPrimary,
@@ -2369,6 +2380,7 @@ ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonC
       border: "none",
       padding: 0,
       filterHover: "none !important",
+      ...fromSubcomponentProps,
       ...props
     }
   );
@@ -2392,10 +2404,10 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     ButtonComponent,
     {
-      ...betterHtmlContextInternal.components.button?.style?.upload,
       text: "Upload",
       icon: "uploadCloud",
       onClick: onClickElement,
+      ...fromSubcomponentProps,
       ...props
     }
   );
@@ -7503,41 +7515,41 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
   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];
+  const [selectedTabId, setSelectedTabId] = (0, import_react29.useState)(() => {
+    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] = (0, import_react29.useState)(0);
   const onClickTab = (0, import_react29.useCallback)(
-    (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 = (0, import_react29.useMemo)(
-    () => tabsRef.current[selectedTab.id]?.getBoundingClientRect().width ?? 0,
-    [rerenderState, selectedTab]
+    () => tabsRef.current[selectedTabId]?.getBoundingClientRect().width ?? 0,
+    [rerenderState, selectedTabId]
   );
   const leftSpacing = (0, import_react29.useMemo)(() => {
-    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]);
   (0, import_react29.useEffect)(() => {
     const timeout = setTimeout(() => {
       setRerenderState(Math.random());
@@ -7554,7 +7566,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
         return oldValue.map(
           (item) => item.name === (name ?? defaultTabName) ? {
             ...item,
-            selectedTab: selectedTab.id
+            selectedTab: selectedTabId
           } : item
         );
       } else {
@@ -7562,18 +7574,18 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
           ...oldValue,
           {
             name: name ?? defaultTabName,
-            selectedTab: selectedTab.id
+            selectedTab: selectedTabId
           }
         ];
       }
     });
-  }, [selectedTab, name]);
+  }, [selectedTabId, name]);
   (0, import_react29.useEffect)(() => {
-    tabsRef.current[selectedTab.id]?.scrollIntoView({
+    tabsRef.current[selectedTabId]?.scrollIntoView({
       behavior: firstRenderPassedRef.current ? "smooth" : void 0,
       block: "nearest"
     });
-  }, [selectedTab]);
+  }, [selectedTabId]);
   (0, import_react29.useEffect)(() => {
     return () => {
       componentsState.tabs.setTabGroups(
@@ -7582,18 +7594,18 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
     };
   }, []);
   (0, import_react29.useEffect)(() => {
-    onChange?.(selectedTab);
+    onChange?.(selectedTabId);
   }, []);
   (0, import_react29.useImperativeHandle)(ref, () => {
     return {
-      selectedTab: selectedTab.id,
+      selectedTab: selectedTabId,
       selectTab: onClickTab
     };
-  }, [selectedTab, onClickTab]);
+  }, [selectedTabId, onClickTab]);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default.column, { width: "100%", gap: theme2.styles.space, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Div_default, { position: "relative", className: "react-better-html-no-scrollbar", overflowY: "auto", children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(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__ */ (0, import_jsx_runtime26.jsxs)(
           Div_default,
           {
@@ -7608,7 +7620,7 @@ var TabsComponent = (0, import_react29.forwardRef)(function Tabs({ tabs, name, a
             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,