react-better-html 1.1.287 → 1.1.289

package/dist/index.mjs

@@ -4,7 +4,7 @@ import {
   useLoader as useLoader2,
   useLoaderControls,
   countries as countries3,
-  lightenColor as lightenColor4,
+  lightenColor as lightenColor5,
   darkenColor as darkenColor4,
   saturateColor,
   desaturateColor,
@@ -1485,6 +1485,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, let
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = useTheme4();
+  const lettersSplit = letters?.split(" ") ?? [];
   return letters ? /* @__PURE__ */ jsx3(
     Div_default.row,
     {
@@ -1498,7 +1499,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, let
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ jsx3(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ jsx3(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: lettersSplit.length > 1 ? lettersSplit[0][0] + (lettersSplit.at(-1)?.[0] ?? lettersSplit[0][1] ?? "") : letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ jsx3(
     Image,
@@ -1939,6 +1940,7 @@ var localStoragePlugin = (options) => ({
 // src/components/Button.tsx
 import { memo as memo8, useCallback as useCallback4 } from "react";
 import {
+  lightenColor,
   useBetterCoreContext as useBetterCoreContext3,
   useLoader,
   useTheme as useTheme9
@@ -2010,7 +2012,11 @@ var filterHover = () => {
     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)"
+    z3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(1.9)" : "brightness(0.7)",
+    b05: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.8)" : "brightness(1.05)",
+    b1: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.7)" : "brightness(1.1)",
+    b2: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.4)" : "brightness(1.2)",
+    b3: externalBetterCoreContextValue.colorTheme === "dark" ? "brightness(0.1)" : "brightness(1.3)"
   };
 };
 
@@ -2314,6 +2320,29 @@ ButtonComponent.destructive = function Destructive(buttonProps) {
     }
   );
 };
+ButtonComponent.text = function Text3(buttonProps) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const { color, ...props } = useComponentsPropsMerger(
+    betterHtmlContextInternal.components.button?.style?.text,
+    buttonProps
+  );
+  const theme2 = useTheme9();
+  const readyColor = color ?? theme2.colors.textPrimary;
+  return /* @__PURE__ */ jsx8(
+    ButtonComponent,
+    {
+      color: readyColor,
+      colorHover: lightenColor(readyColor, 0.3),
+      backgroundColor: "transparent",
+      backgroundColorHover: "transparent",
+      borderRadius: 0,
+      loaderSize: 12,
+      isSmall: true,
+      ...fromSubcomponentProps,
+      ...props
+    }
+  );
+};
 ButtonComponent.icon = function Icon3({ size = 16, buttonSize, backgroundButtonColor, ...buttonProps }) {
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const { ...props } = useComponentsPropsMerger(
@@ -2373,6 +2402,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
 var Button2 = memo8(ButtonComponent);
 Button2.secondary = ButtonComponent.secondary;
 Button2.destructive = ButtonComponent.destructive;
+Button2.text = ButtonComponent.text;
 Button2.icon = ButtonComponent.icon;
 Button2.upload = ButtonComponent.upload;
 var Button_default = Button2;
@@ -3627,7 +3657,7 @@ var PageHolder_default = PageHolder2;
 
 // src/components/Chip.tsx
 import { forwardRef as forwardRef9, memo as memo14, useCallback as useCallback8 } from "react";
-import { darkenColor, lightenColor, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
+import { darkenColor, lightenColor as lightenColor2, useBetterCoreContext as useBetterCoreContext6, useTheme as useTheme15 } from "react-better-core";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var borderRadiusOffset = 1.3;
 var ChipComponent = forwardRef9(function Chip({ fromSubcomponent, ...chipProps }, ref) {
@@ -3689,7 +3719,7 @@ ChipComponent.colored = forwardRef9(function Colored({ color, withWhiteBackgroun
   const chip = /* @__PURE__ */ jsx15(
     ChipComponent,
     {
-      color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor(readyColor, 0.7),
+      color: colorTheme === "light" ? darkenColor(readyColor, 0.7) : lightenColor2(readyColor, 0.7),
       backgroundColor: readyColor + "40",
       border: `${theme2.styles.borderWidth}px solid ${readyColor}`,
       ref,
@@ -3714,7 +3744,7 @@ var Chip_default = Chip2;
 import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback11, useState as useState7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef5, useId as useId2 } from "react";
 import {
   darkenColor as darkenColor2,
-  lightenColor as lightenColor2,
+  lightenColor as lightenColor3,
   useBooleanState as useBooleanState5,
   useDebounceState as useDebounceState2,
   countries as countries2,
@@ -3800,6 +3830,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     required,
     name,
     disabled,
@@ -4046,6 +4077,7 @@ var DropdownComponent = forwardRef10(function Dropdown(dropdownProps, ref) {
       labelGap,
       errorText,
       infoText,
+      infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
       name,
@@ -4698,6 +4730,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     leftIcon,
     rightIcon,
     prefix,
@@ -4774,7 +4807,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
           justifyContent: "center",
           border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
           borderRight: "none",
-          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor3(theme2.colors.backgroundContent, 0.1)),
           borderTopLeftRadius: theme2.styles.borderRadius,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           paddingInline: theme2.styles.space,
@@ -4849,7 +4882,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
           justifyContent: "center",
           border: `${theme2.styles.borderWidth}px solid ${theme2.colors.border}`,
           borderLeft: "none",
-          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor2(theme2.colors.backgroundContent, 0.1)),
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor2(theme2.colors.backgroundContent, 0.03) : lightenColor3(theme2.colors.backgroundContent, 0.1)),
           borderTopRightRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           paddingInline: theme2.styles.space,
@@ -4863,7 +4896,7 @@ var InputFieldComponent = forwardRef11(function InputField(inputFieldProps, ref)
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : infoTextColor ?? labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -5867,6 +5900,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
+  infoTextColor,
   size = componentSize,
   value,
   onChange,
@@ -5996,7 +6030,7 @@ var ToggleInputComponent = forwardRef12(function ToggleInput({
         as: "span",
         display: "block",
         fontSize: 14,
-        color: errorText ? theme2.colors.error : labelColor ?? theme2.colors.textSecondary,
+        color: errorText ? theme2.colors.error : infoTextColor ?? labelColor ?? theme2.colors.textSecondary,
         children: errorText || infoText
       }
     )
@@ -6123,30 +6157,32 @@ var ToggleInput_default = {
 import { Children, forwardRef as forwardRef13, Fragment as Fragment7, memo as memo19, useMemo as useMemo7 } from "react";
 import { useTheme as useTheme21 } from "react-better-core";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-var FormComponent = forwardRef13(function Form({
-  form,
-  name,
-  submitButtonText,
-  submitButtonLoaderName,
-  submitButtonIsLoading,
-  submitButtonId,
-  submitButtonIsDisabled,
-  cancelButtonText,
-  cancelButtonLoaderName,
-  cancelButtonIsLoading,
-  cancelButtonId,
-  cancelButtonIsDisabled,
-  actionButtonsLocation = "right",
-  gap,
-  isDestructive,
-  withDividers,
-  renderActionButtons,
-  onClickCancel,
-  onSubmit,
-  id,
-  children,
-  ...props
-}, ref) {
+var FormComponent = forwardRef13(function Form(formProps, ref) {
+  const betterHtmlContextInternal = useBetterHtmlContextInternal();
+  const {
+    form,
+    name,
+    submitButtonText,
+    submitButtonLoaderName,
+    submitButtonIsLoading,
+    submitButtonId,
+    submitButtonIsDisabled,
+    cancelButtonText,
+    cancelButtonLoaderName,
+    cancelButtonIsLoading,
+    cancelButtonId,
+    cancelButtonIsDisabled,
+    actionButtonsLocation = "right",
+    gap,
+    isDestructive,
+    withDividers,
+    renderActionButtons,
+    onClickCancel,
+    onSubmit,
+    id,
+    children,
+    ...props
+  } = useComponentsPropsMerger(betterHtmlContextInternal.components.form?.style?.default, formProps);
   const theme2 = useTheme21();
   const submitButtonIsDisabledInternal = useMemo7(() => {
     if (!form || !form.requiredFields) return false;
@@ -6156,6 +6192,17 @@ var FormComponent = forwardRef13(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
+  const cancelButton = /* @__PURE__ */ jsx20(
+    Button_default.secondary,
+    {
+      text: cancelButtonText ?? "Cancel",
+      isLoading: cancelButtonIsLoading,
+      loaderName: cancelButtonLoaderName,
+      disabled: cancelButtonIsDisabled,
+      id: cancelButtonId,
+      onClick: onClickCancel
+    }
+  );
   return /* @__PURE__ */ jsx20(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs16("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ jsx20(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs16(Fragment7, { children: [
       child,
@@ -6174,18 +6221,8 @@ var FormComponent = forwardRef13(function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          renderActionButtons,
-          onClickCancel && /* @__PURE__ */ jsx20(
-            Button_default.secondary,
-            {
-              text: cancelButtonText ?? "Cancel",
-              isLoading: cancelButtonIsLoading,
-              loaderName: cancelButtonLoaderName,
-              disabled: cancelButtonIsDisabled,
-              id: cancelButtonId,
-              onClick: onClickCancel
-            }
-          ),
+          actionButtonsLocation === "right" && renderActionButtons,
+          actionButtonsLocation === "right" && onClickCancel ? cancelButton : void 0,
           /* @__PURE__ */ jsx20(
             SubmitButtonTag,
             {
@@ -6196,7 +6233,9 @@ var FormComponent = forwardRef13(function Form({
               id: submitButtonId,
               isSubmit: true
             }
-          )
+          ),
+          actionButtonsLocation === "left" && onClickCancel ? cancelButton : void 0,
+          actionButtonsLocation === "left" && renderActionButtons
         ]
       }
     )
@@ -8046,7 +8085,7 @@ var Foldable_default = Foldable2;
 import { createContext as createContext2, memo as memo27, useCallback as useCallback19, useContext as useContext2, useEffect as useEffect16, useMemo as useMemo12, useState as useState15 } from "react";
 import {
   calculateColorContrast,
-  lightenColor as lightenColor3,
+  lightenColor as lightenColor4,
   useBetterCoreContext as useBetterCoreContext10,
   useBooleanState as useBooleanState8,
   useTheme as useTheme29
@@ -8121,7 +8160,7 @@ var MenuItemTypeItem = memo27(function MenuItemTypeItem2({
           alignItems: "center",
           gap: iconGap,
           whiteSpace: "nowrap",
-          backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? lightenColor3(theme2.colors.primary, 0.7) : lightenColor3(theme2.colors.primary, 0.85)) : readyBackgroundColor,
+          backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? lightenColor4(theme2.colors.primary, 0.7) : lightenColor4(theme2.colors.primary, 0.85)) : readyBackgroundColor,
           backgroundColorHover: isActive && activeItemColor ? void 0 : hoverItemColor,
           borderRadius: theme2.styles.borderRadius,
           paddingBlock,
@@ -8737,7 +8776,7 @@ export {
   getPluralWord2 as getPluralWord,
   isApiError,
   isMobileDevice,
-  lightenColor4 as lightenColor,
+  lightenColor5 as lightenColor,
   loaderControls,
   localStoragePlugin,
   log,