react-better-html 1.1.243 → 1.1.244

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1968,6 +1968,75 @@ var import_react10 = require("react");
1968
1968
  var import_react_better_core9 = require("react-better-core");
1969
1969
  var import_styled_components6 = __toESM(require("styled-components"));
1970
1970
 
1971
+ // src/utils/variableFunctions.ts
1972
+ var checkBetterCoreContextValue = (value, functionsName) => {
1973
+ if (value === void 0) {
1974
+ throw new Error(
1975
+ `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
1976
+ );
1977
+ }
1978
+ return value !== void 0;
1979
+ };
1980
+ var checkBetterHtmlContextValue = (value, functionsName) => {
1981
+ if (value === void 0) {
1982
+ throw new Error(
1983
+ `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
1984
+ );
1985
+ }
1986
+ return value !== void 0;
1987
+ };
1988
+ var alertControls = {
1989
+ createAlert: (alert) => {
1990
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
1991
+ return void 0;
1992
+ const readyAlert = {
1993
+ id: crypto.randomUUID(),
1994
+ ...alert
1995
+ };
1996
+ externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
1997
+ return readyAlert;
1998
+ },
1999
+ removeAlert: (alertId) => {
2000
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
2001
+ externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
2002
+ }
2003
+ };
2004
+ var sideMenuControls = {
2005
+ expand: () => {
2006
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
2007
+ externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
2008
+ },
2009
+ collapse: () => {
2010
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
2011
+ externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
2012
+ },
2013
+ toggleExpanded: () => {
2014
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
2015
+ externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
2016
+ },
2017
+ open: () => {
2018
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
2019
+ externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
2020
+ },
2021
+ close: () => {
2022
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
2023
+ externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
2024
+ },
2025
+ toggleOpened: () => {
2026
+ if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
2027
+ externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
2028
+ }
2029
+ };
2030
+ var filterHover = () => {
2031
+ if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "filterHover")) return void 0;
2032
+ return {
2033
+ z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
2034
+ z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
2035
+ z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
2036
+ z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
2037
+ };
2038
+ };
2039
+
1971
2040
  // src/components/Loader.tsx
1972
2041
  var import_react9 = require("react");
1973
2042
  var import_react_better_core8 = require("react-better-core");
@@ -2062,12 +2131,12 @@ var ButtonElement = import_styled_components6.default.button.withConfig({
2062
2131
  cursor: pointer;
2063
2132
 
2064
2133
  &:not(.secondary):hover {
2065
- filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
2134
+ filter: ${props.hoverStyle.filter ?? filterHover().z1};
2066
2135
  }
2067
2136
 
2068
2137
  &.secondary:hover {
2069
2138
  ${props.withNoBorder ? import_styled_components6.css`
2070
- filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
2139
+ filter: ${props.hoverStyle.filter ?? filterHover().z1};
2071
2140
  ` : import_styled_components6.css`
2072
2141
  border-color: ${props.theme.colors.primary};
2073
2142
  `}
@@ -3201,77 +3270,6 @@ var BetterHtmlProvider_default = (0, import_react14.memo)(BetterHtmlProvider);
3201
3270
 
3202
3271
  // src/utils/functions.ts
3203
3272
  var import_crypto_js = __toESM(require("crypto-js"));
3204
-
3205
- // src/utils/variableFunctions.ts
3206
- var checkBetterCoreContextValue = (value, functionsName) => {
3207
- if (value === void 0) {
3208
- throw new Error(
3209
- `\`${functionsName}()\` must be used within a \`<BetterCoreProvider>\`. Make sure to add one at the root of your component tree.`
3210
- );
3211
- }
3212
- return value !== void 0;
3213
- };
3214
- var checkBetterHtmlContextValue = (value, functionsName) => {
3215
- if (value === void 0) {
3216
- throw new Error(
3217
- `\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`
3218
- );
3219
- }
3220
- return value !== void 0;
3221
- };
3222
- var alertControls = {
3223
- createAlert: (alert) => {
3224
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.createAlert"))
3225
- return void 0;
3226
- const readyAlert = {
3227
- id: crypto.randomUUID(),
3228
- ...alert
3229
- };
3230
- externalBetterHtmlContextValue.setAlerts((oldValue) => [...oldValue, readyAlert]);
3231
- return readyAlert;
3232
- },
3233
- removeAlert: (alertId) => {
3234
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "alertControls.removeAlert")) return;
3235
- externalBetterHtmlContextValue.setAlerts((oldValue) => oldValue.filter((alert) => alert.id !== alertId));
3236
- }
3237
- };
3238
- var sideMenuControls = {
3239
- expand: () => {
3240
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.expand")) return;
3241
- externalBetterHtmlContextValue.setSideMenuIsCollapsed.setFalse();
3242
- },
3243
- collapse: () => {
3244
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.collapse")) return;
3245
- externalBetterHtmlContextValue.setSideMenuIsCollapsed.setTrue();
3246
- },
3247
- toggleExpanded: () => {
3248
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleExpanded")) return;
3249
- externalBetterHtmlContextValue.setSideMenuIsCollapsed.toggle();
3250
- },
3251
- open: () => {
3252
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.open")) return;
3253
- externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setTrue();
3254
- },
3255
- close: () => {
3256
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.close")) return;
3257
- externalBetterHtmlContextValue.setSideMenuIsOpenMobile.setFalse();
3258
- },
3259
- toggleOpened: () => {
3260
- if (!checkBetterHtmlContextValue(externalBetterHtmlContextValue, "sideMenuControls.toggleOpened")) return;
3261
- externalBetterHtmlContextValue.setSideMenuIsOpenMobile.toggle();
3262
- }
3263
- };
3264
- var filterHover = () => {
3265
- if (!checkBetterCoreContextValue(externalBetterCoreContextValue, "filterHover")) return void 0;
3266
- return {
3267
- z05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.95)",
3268
- z1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.3)" : "brightness(0.9)",
3269
- z2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.6)" : "brightness(0.8)",
3270
- z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)"
3271
- };
3272
- };
3273
-
3274
- // src/utils/functions.ts
3275
3273
  var getBrowser = () => {
3276
3274
  const userAgent = navigator.userAgent.toLowerCase();
3277
3275
  if (userAgent.includes("firefox")) return "firefox";
@@ -4334,7 +4332,7 @@ var InputElement = import_styled_components11.default.input.withConfig({
4334
4332
 
4335
4333
  &:focus {
4336
4334
  ${(props) => props.withNoBorder ? import_styled_components11.css`
4337
- filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
4335
+ filter: ${props.hoverStyle.filter ?? filterHover().z1};
4338
4336
  ` : import_styled_components11.css`
4339
4337
  border-color: ${props.theme.colors.primary};
4340
4338
  `}
@@ -4457,7 +4455,7 @@ var TextareaElement = import_styled_components11.default.textarea.withConfig({
4457
4455
  }
4458
4456
 
4459
4457
  ${(props) => props.withNoBorder ? import_styled_components11.css`
4460
- filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
4458
+ filter: ${props.hoverStyle.filter ?? filterHover().z1};
4461
4459
  ` : import_styled_components11.css`
4462
4460
  border-color: ${props.theme.colors.primary};
4463
4461
  `}
@@ -5522,7 +5520,7 @@ var InputElement2 = import_styled_components12.default.input.withConfig({
5522
5520
 
5523
5521
  &:hover {
5524
5522
  ${(props) => props.withNoBorder ? import_styled_components12.css`
5525
- filter: ${props.colorTheme === "dark" ? "brightness(1.2)" : "brightness(0.9)"};
5523
+ filter: ${props.hoverStyle.filter ?? filterHover().z1};
5526
5524
  ` : import_styled_components12.css`
5527
5525
  border-color: ${props.theme.colors.primary};
5528
5526
  `}
@@ -5599,7 +5597,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
5599
5597
  textAdvanced,
5600
5598
  errorText,
5601
5599
  infoText,
5602
- size,
5600
+ size = componentSize,
5603
5601
  value,
5604
5602
  onChange,
5605
5603
  checked: controlledChecked,
@@ -5673,7 +5671,7 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
5673
5671
  top: "50%",
5674
5672
  left: "50%",
5675
5673
  color: theme2.colors.base,
5676
- size: 14,
5674
+ size: size / 1.8,
5677
5675
  transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`,
5678
5676
  opacity: checked ? 1 : 0,
5679
5677
  pointerEvents: "none",
@@ -5683,8 +5681,8 @@ var ToggleInputComponent = (0, import_react22.forwardRef)(function ToggleInput({
5683
5681
  Div_default,
5684
5682
  {
5685
5683
  position: "absolute",
5686
- width: 10,
5687
- height: 10,
5684
+ width: size / 2,
5685
+ height: size / 2,
5688
5686
  top: "50%",
5689
5687
  left: "50%",
5690
5688
  backgroundColor: theme2.colors.base,