react-better-html 1.1.243 → 1.1.245

package/dist/index.mjs

@@ -1308,6 +1308,8 @@ import { jsx } from "react/jsx-runtime";
 var TextStyledComponent = styled.p.withConfig({
   shouldForwardProp: (prop) => !["style", "hoverStyle"].includes(prop)
 })`
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+
    ${(props) => props.style}
 
    &:hover {
@@ -1315,6 +1317,7 @@ var TextStyledComponent = styled.p.withConfig({
    }
 `;
 var TextComponent = forwardRef(function Text({ htmlContentTranslate, children, ...props }, ref) {
+  const theme2 = useTheme2();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -1322,6 +1325,7 @@ var TextComponent = forwardRef(function Text({ htmlContentTranslate, children, .
     TextStyledComponent,
     {
       as: props.as,
+      theme: theme2,
       translate: htmlContentTranslate,
       style,
       hoverStyle,
@@ -1429,7 +1433,12 @@ var ImageElement = styled2.img.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var Image = forwardRef3(function Image2({ name, src, ...props }, ref) {
+var Image = forwardRef3(function Image2(ImageProps3, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { name, src, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.image?.style?.default,
+    ImageProps3
+  );
   const { assets: assets2 } = useBetterCoreContext();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
@@ -1454,7 +1463,9 @@ var Image = forwardRef3(function Image2({ name, src, ...props }, ref) {
     }
   );
 });
-Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...props }, ref) {
+Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...ImageProps3 }, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = useTheme4();
   return letters ? /* @__PURE__ */ jsx3(
     Div_default.row,
@@ -1901,6 +1912,75 @@ import {
 } from "react-better-core";
 import styled6, { css } from "styled-components";
 
+// src/utils/variableFunctions.ts
+var checkBetterCoreContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var checkBetterHtmlContextValue = (value, functionsName) => {
+  if (value === void 0) {
+    throw new Error(
+      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
+    );
+  }
+  return value !== void 0;
+};
+var alertControls = {
+  createAlert: (alert) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
+      return void 0;
+    const readyAlert = {
+      id: crypto.randomUUID(),
+      ...alert
+    };
+    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
+    return readyAlert;
+  },
+  removeAlert: (alertId) => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
+    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
+  }
+};
+var sideMenuControls = {
+  expand: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
+  },
+  collapse: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
+  },
+  toggleExpanded: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
+    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
+  },
+  open: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
+  },
+  close: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
+  },
+  toggleOpened: () => {
+    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
+    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
+  }
+};
+var filterHover = () => {
+  if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "filterHover")) return void 0;
+  return {
+    z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
+    z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
+    z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
+    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
+  };
+};
+
 // src/components/Loader.tsx
 import { memo as memo7 } from "react";
 import { useTheme as useTheme8 } from "react-better-core";
@@ -1976,8 +2056,8 @@ var ButtonElement = styled6.button.withConfig({
    width: fit-content;
    min-width: max-content;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    text-decoration: none;
    color: ${(props) => props.theme.colors.base};
    background-color: ${(props) => props.theme.colors.primary};
@@ -1995,12 +2075,12 @@ var ButtonElement = styled6.button.withConfig({
                 cursor: pointer;
 
                 &:not(.secondary):hover {
-                   filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                   filter: ${props.hoverStyle.filter ?? filterHover().z1};
                 }
 
                 &.secondary:hover {
                    ${props.withNoBorder ? css`
-                           filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                           filter: ${props.hoverStyle.filter ?? filterHover().z1};
                         ` : css`
                            border-color: ${props.theme.colors.primary};
                         `}
@@ -2068,7 +2148,7 @@ var ButtonComponent = function Button(buttonProps) {
   const iconComponent = icon ? /* @__PURE__ */ jsx8(
     Div_default.row,
     {
-      height: iconSize ?? parseInt(style.fontSize?.toString() ?? "16"),
+      height: iconSize ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString()),
       alignItems: "center",
       justifyContent: "center",
       children: /* @__PURE__ */ jsx8(
@@ -2076,7 +2156,7 @@ var ButtonComponent = function Button(buttonProps) {
         {
           name: icon,
           color: iconColor ?? props.color ?? theme2.colors.base,
-          size: iconSize ?? parseInt(style.fontSize?.toString() ?? "16")
+          size: iconSize ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString())
         }
       )
     }
@@ -2086,7 +2166,7 @@ var ButtonComponent = function Button(buttonProps) {
     {
       name: image,
       color: iconColor ?? props.color ?? theme2.colors.base,
-      width: imageWidth ?? parseInt(style.fontSize?.toString() ?? "16"),
+      width: imageWidth ?? parseInt(style.fontSize?.toString() ?? theme2.styles.fontSize.toString()),
       height: imageHeight
     }
   ) : void 0;
@@ -2875,7 +2955,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ jsxs7(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ jsx10(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
-            alert.message && /* @__PURE__ */ jsx10(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
+            alert.message && /* @__PURE__ */ jsx10(Text_default, { fontSize: theme2.styles.fontSize, color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ jsx10(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -3138,77 +3218,6 @@ var BetterHtmlProvider_default = memo12(BetterHtmlProvider);
 
 // src/utils/functions.ts
 import CryptoJS from "crypto-js";
-
-// src/utils/variableFunctions.ts
-var checkBetterCoreContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var checkBetterHtmlContextValue = (value, functionsName) => {
-  if (value === void 0) {
-    throw new Error(
-      `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
-    );
-  }
-  return value !== void 0;
-};
-var alertControls = {
-  createAlert: (alert) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
-      return void 0;
-    const readyAlert = {
-      id: crypto.randomUUID(),
-      ...alert
-    };
-    externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
-    return readyAlert;
-  },
-  removeAlert: (alertId) => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
-    externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
-  }
-};
-var sideMenuControls = {
-  expand: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
-  },
-  collapse: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
-  },
-  toggleExpanded: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
-    externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
-  },
-  open: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
-  },
-  close: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
-  },
-  toggleOpened: () => {
-    if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
-    externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
-  }
-};
-var filterHover = () => {
-  if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "filterHover")) return void 0;
-  return {
-    z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
-    z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
-    z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
-    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
-  };
-};
-
-// src/utils/functions.ts
 var getBrowser = () => {
   const userAgent = navigator.userAgent.toLowerCase();
   if (userAgent.includes("firefox")) return "firefox";
@@ -4263,8 +4272,8 @@ var InputElement = styled10.input.withConfig({
    position: relative;
    width: 100%;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
@@ -4285,7 +4294,7 @@ var InputElement = styled10.input.withConfig({
 
    &:focus {
       ${(props) => props.withNoBorder ? css2`
-                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
               ` : css2`
                  border-color: ${props.theme.colors.primary};
               `}
@@ -4390,8 +4399,8 @@ var TextareaElement = styled10.textarea.withConfig({
    min-height: 3lh;
    max-height: 8lh;
    font-family: ${(props) => props.theme.styles.fontFamily};
-   font-size: 16px;
-   line-height: 20px;
+   font-size: ${(props) => props.theme.styles.fontSize}px;
+   line-height: ${(props) => props.theme.styles.fontSize + 4}px;
    color: ${(props) => props.theme.colors.textPrimary};
    background: ${(props) => props.theme.colors.backgroundContent};
    border: ${(props) => props.theme.styles.borderWidth}px solid ${(props) => props.theme.colors.border};
@@ -4408,7 +4417,7 @@ var TextareaElement = styled10.textarea.withConfig({
    }
 
    ${(props) => props.withNoBorder ? css2`
-              filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+              filter: ${props.hoverStyle.filter ?? filterHover().z1};
            ` : css2`
               border-color: ${props.theme.colors.primary};
            `}
@@ -5473,7 +5482,7 @@ var InputElement2 = styled11.input.withConfig({
 
    &:hover {
       ${(props) => props.withNoBorder ? css3`
-                 filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
               ` : css3`
                  border-color: ${props.theme.colors.primary};
               `}
@@ -5550,7 +5559,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
-  size,
+  size = componentSize,
   value,
   onChange,
   checked: controlledChecked,
@@ -5624,7 +5633,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
             top: "50%",
             left: "50%",
             color: theme2.colors.base,
-            size: 14,
+            size: size / 1.8,
             transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
             opacity: checked ? 1 : 0,
             pointerEvents: "none",
@@ -5634,8 +5643,8 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           Div_default,
           {
             position: "absolute",
-            width: 10,
-            height: 10,
+            width: size / 2,
+            height: size / 2,
             top: "50%",
             left: "50%",
             backgroundColor: theme2.colors.base,
@@ -5659,7 +5668,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
           onClick: onClickText,
           children: [
             text,
-            required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+            required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
               " ",
               "*"
             ] })
@@ -5667,7 +5676,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         }
       ) : textAdvanced ? /* @__PURE__ */ jsxs15(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         textAdvanced,
-        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
+        required && !label && /* @__PURE__ */ jsxs15(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, marginLeft: 4, children: [
           " ",
           "*"
         ] })
@@ -5928,12 +5937,12 @@ FormRowComponent.withTitle = forwardRef14(function WithTitle({
       /* @__PURE__ */ jsxs17(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
         /* @__PURE__ */ jsxs17(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
           title,
-          required && /* @__PURE__ */ jsxs17(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+          required && /* @__PURE__ */ jsxs17(Text_default, { as: "span", fontSize: theme2.styles.fontSize, color: theme2.colors.error, children: [
             " ",
             "*"
           ] })
         ] }),
-        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize, color: theme2.colors.textSecondary, children: description })
+        description && /* @__PURE__ */ jsx20(Text_default, { fontSize: descriptionFontSize ?? theme2.styles.fontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ jsx20(Div_default, { width: 26 - titleGap })
     ] }),
@@ -8152,10 +8161,14 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
     }
   );
 };
-SideMenuComponent.burgerButton = function BurgerButton() {
+SideMenuComponent.burgerButton = function BurgerButton({ position = "left", onClick }) {
   const theme2 = useTheme29();
   const { sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
   const [isHovered, setIsHovered] = useBooleanState8();
+  const onClickElement = useCallback18(() => {
+    setSideMenuIsOpenMobile.toggle();
+    onClick?.(!sideMenuIsOpenMobile);
+  }, [onClick, sideMenuIsOpenMobile]);
   const width = 2;
   return /* @__PURE__ */ jsxs24(
     Div_default,
@@ -8167,7 +8180,7 @@ SideMenuComponent.burgerButton = function BurgerButton() {
       onMouseOver: setIsHovered.setTrue,
       onMouseLeave: setIsHovered.setFalse,
       onMouseOut: setIsHovered.setFalse,
-      onClick: setSideMenuIsOpenMobile.toggle,
+      onClick: onClickElement,
       children: [
         /* @__PURE__ */ jsx27(
           Div_default,
@@ -8176,10 +8189,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered || sideMenuIsOpenMobile ? "100%" : "50%",
             height: width,
             top: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : void 0,
+            transform: sideMenuIsOpenMobile ? "rotate(45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
           }
         ),
@@ -8190,10 +8204,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered ? "100%" : "100%",
             height: width,
             top: "50%",
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: "translateY(-50%)",
+            transform: `translateY(-50%)${position === "center" ? " translateX(-50%)" : ""}`,
             opacity: sideMenuIsOpenMobile ? 0 : void 0,
             transition: theme2.styles.transition
           }
@@ -8205,10 +8220,11 @@ SideMenuComponent.burgerButton = function BurgerButton() {
             width: isHovered || sideMenuIsOpenMobile ? "100%" : "75%",
             height: width,
             bottom: sideMenuIsOpenMobile ? `calc(50% - ${width / 2}px)` : 0,
-            left: 0,
+            left: position === "left" ? 0 : position === "center" ? sideMenuIsOpenMobile ? 0 : "50%" : "auto",
+            right: position === "right" ? 0 : void 0,
             backgroundColor: theme2.colors.border,
             borderRadius: 999,
-            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : void 0,
+            transform: sideMenuIsOpenMobile ? "rotate(-45deg)" : position === "center" ? "translateX(-50%)" : void 0,
             transition: theme2.styles.transition
           }
         )