react-better-html 1.1.242 → 1.1.244

package/dist/index.js

@@ -1968,6 +1968,75 @@ var import_react10 = require("react");
 var import_react_better_core9 = require("react-better-core");
 var import_styled_components6 = __toESM(require("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
 var import_react9 = require("react");
 var import_react_better_core8 = require("react-better-core");
@@ -2034,7 +2103,9 @@ var Loader_default = Loader2;
 // src/components/Button.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ButtonElement = import_styled_components6.default.button.withConfig({
-  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "isSmall", "withText", "isLoading", "withNoBorder"].includes(
+    prop
+  )
 })`
    display: block;
    position: relative;
@@ -2060,12 +2131,12 @@ var ButtonElement = import_styled_components6.default.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 ? import_styled_components6.css`
-                           filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
+                           filter: ${props.hoverStyle.filter ?? filterHover().z1};
                         ` : import_styled_components6.css`
                            border-color: ${props.theme.colors.primary};
                         `}
@@ -3199,77 +3270,6 @@ var BetterHtmlProvider_default = (0, import_react14.memo)(BetterHtmlProvider);
 
 // src/utils/functions.ts
 var import_crypto_js = __toESM(require("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";
@@ -4295,7 +4295,17 @@ var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
 var InputElement = import_styled_components11.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "withPrefix", "withSuffix", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => ![
+    "theme",
+    "colorTheme",
+    "withLeftIcon",
+    "withRightIcon",
+    "withPrefix",
+    "withSuffix",
+    "style",
+    "hoverStyle",
+    "withNoBorder"
+  ].includes(prop)
 })`
    position: relative;
    width: 100%;
@@ -4321,7 +4331,11 @@ var InputElement = import_styled_components11.default.input.withConfig({
    }
 
    &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
+      ${(props) => props.withNoBorder ? import_styled_components11.css`
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
+              ` : import_styled_components11.css`
+                 border-color: ${props.theme.colors.primary};
+              `}
    }
 
    &:disabled {
@@ -4417,7 +4431,7 @@ var InputElement = import_styled_components11.default.input.withConfig({
    }
 `;
 var TextareaElement = import_styled_components11.default.textarea.withConfig({
-  shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "style", "hoverStyle"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "withLeftIcon", "withRightIcon", "style", "hoverStyle", "withNoBorder"].includes(prop)
 })`
    width: 100%;
    min-height: 3lh;
@@ -4440,9 +4454,11 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
       color: ${(props) => props.theme.colors.textSecondary}80;
    }
 
-   &:focus {
-      border-color: ${(props) => props.theme.colors.primary};
-   }
+   ${(props) => props.withNoBorder ? import_styled_components11.css`
+              filter: ${props.hoverStyle.filter ?? filterHover().z1};
+           ` : import_styled_components11.css`
+              border-color: ${props.theme.colors.primary};
+           `}
 
    ${(props) => props.style}
 
@@ -4566,6 +4582,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
             InputElement,
             {
               theme: theme2,
+              colorTheme,
               withLeftIcon: leftIcon !== void 0,
               withRightIcon: rightIcon !== void 0,
               withPrefix: prefix !== void 0,
@@ -4576,6 +4593,7 @@ var InputFieldComponent = (0, import_react21.forwardRef)(function InputField(inp
               onChange: onChangeElement,
               style,
               hoverStyle,
+              withNoBorder: theme2.styles.borderWidth === 0,
               ...restProps,
               ...dataProps,
               ...ariaProps,
@@ -4660,6 +4678,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
   );
   const theme2 = (0, import_react_better_core19.useTheme)();
   const internalId = (0, import_react21.useId)();
+  const { colorTheme } = (0, import_react_better_core19.useBetterCoreContext)();
   const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -4702,6 +4721,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
         TextareaElement,
         {
           theme: theme2,
+          colorTheme,
           withLeftIcon: leftIcon !== void 0,
           withRightIcon: rightIcon !== void 0,
           required,
@@ -4710,6 +4730,7 @@ InputFieldComponent.multiline = (0, import_react21.forwardRef)(function Multilin
           id: readyId,
           style,
           hoverStyle,
+          withNoBorder: theme2.styles.borderWidth === 0,
           ...restProps,
           ...dataProps,
           ...ariaProps,
@@ -5468,7 +5489,7 @@ var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
 var InputElement2 = import_styled_components12.default.input.withConfig({
-  shouldForwardProp: (prop) => !["theme", "style", "hoverStyle", "size"].includes(prop)
+  shouldForwardProp: (prop) => !["theme", "colorTheme", "style", "hoverStyle", "size", "withNoBorder"].includes(prop)
 })`
    position: relative;
    appearance: none;
@@ -5498,7 +5519,11 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
    ${(props) => props.style}
 
    &:hover {
-      border-color: ${(props) => props.theme.colors.primary};
+      ${(props) => props.withNoBorder ? import_styled_components12.css`
+                 filter: ${props.hoverStyle.filter ?? filterHover().z1};
+              ` : import_styled_components12.css`
+                 border-color: ${props.theme.colors.primary};
+              `}
 
       ${(props) => props.hoverStyle}
    }
@@ -5572,7 +5597,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
-  size,
+  size = componentSize,
   value,
   onChange,
   checked: controlledChecked,
@@ -5583,6 +5608,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
 }, ref) {
   const theme2 = (0, import_react_better_core20.useTheme)();
   const internalId = (0, import_react22.useId)();
+  const { colorTheme } = (0, import_react_better_core20.useBetterCoreContext)();
   const { style, hoverStyle, excludeStyle, restProps } = useComponentPropsGrouper(props, true);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
@@ -5623,7 +5649,9 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           InputElement2,
           {
             theme: theme2,
+            colorTheme,
             size,
+            withNoBorder: theme2.styles.borderWidth === 0,
             type: props.type ?? "checkbox",
             checked,
             onChange: onChangeElement,
@@ -5643,7 +5671,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(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",
@@ -5653,8 +5681,8 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
           Div_default,
           {
             position: "absolute",
-            width: 10,
-            height: 10,
+            width: size / 2,
+            height: size / 2,
             top: "50%",
             left: "50%",
             backgroundColor: theme2.colors.base,