react-better-html 1.1.287 → 1.1.289

package/dist/index.js

@@ -1558,6 +1558,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
   const betterHtmlContextInternal = useBetterHtmlContextInternal();
   const props = useComponentsPropsMerger(betterHtmlContextInternal.components.image?.style?.default, ImageProps3);
   const theme2 = (0, import_react_better_core4.useTheme)();
+  const lettersSplit = letters?.split(" ") ?? [];
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Div_default.row,
     {
@@ -1571,7 +1572,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsx)(
     Image,
@@ -2079,7 +2080,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)"
   };
 };
 
@@ -2383,6 +2388,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 = (0, import_react_better_core9.useTheme)();
+  const readyColor = color ?? theme2.colors.textPrimary;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ButtonComponent,
+    {
+      color: readyColor,
+      colorHover: (0, import_react_better_core9.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(
@@ -2442,6 +2470,7 @@ ButtonComponent.upload = function Upload({ accept, multiple, onUpload, ...button
 var Button2 = (0, import_react10.memo)(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;
@@ -3851,6 +3880,7 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     required,
     name,
     disabled,
@@ -4097,6 +4127,7 @@ var DropdownComponent = (0, import_react19.forwardRef)(function Dropdown(dropdow
       labelGap,
       errorText,
       infoText,
+      infoTextColor,
       required: withMultiselect ? (Array.isArray(value) ? value.length > 0 : value !== void 0) ? false : required : required,
       textAlign,
       name,
@@ -4749,6 +4780,7 @@ var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inp
     labelGap,
     errorText,
     infoText,
+    infoTextColor,
     leftIcon,
     rightIcon,
     prefix,
@@ -4914,7 +4946,7 @@ var InputFieldComponent = (0, import_react22.forwardRef)(function InputField(inp
         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
       }
     )
@@ -5918,6 +5950,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(function ToggleInput({
   textAdvanced,
   errorText,
   infoText,
+  infoTextColor,
   size = componentSize,
   value,
   onChange,
@@ -6047,7 +6080,7 @@ var ToggleInputComponent = (0, import_react23.forwardRef)(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
       }
     )
@@ -6174,30 +6207,32 @@ var ToggleInput_default = {
 var import_react24 = require("react");
 var import_react_better_core21 = require("react-better-core");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormComponent = (0, import_react24.forwardRef)(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 = (0, import_react24.forwardRef)(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 = (0, import_react_better_core21.useTheme)();
   const submitButtonIsDisabledInternal = (0, import_react24.useMemo)(() => {
     if (!form || !form.requiredFields) return false;
@@ -6207,6 +6242,17 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
   }, [form]);
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
+  const cancelButton = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    Button_default.secondary,
+    {
+      text: cancelButtonText ?? "Cancel",
+      isLoading: cancelButtonIsLoading,
+      loaderName: cancelButtonLoaderName,
+      disabled: cancelButtonIsDisabled,
+      id: cancelButtonId,
+      onClick: onClickCancel
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("form", { name, onSubmit: onSubmit ?? form?.onSubmit, id, ref, children: [
     gap !== void 0 || withDividers ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? import_react24.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react24.Fragment, { children: [
       child,
@@ -6225,18 +6271,8 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
         gap: theme2.styles.gap,
         marginTop: theme2.styles.space,
         children: [
-          renderActionButtons,
-          onClickCancel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-            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__ */ (0, import_jsx_runtime21.jsx)(
             SubmitButtonTag,
             {
@@ -6247,7 +6283,9 @@ var FormComponent = (0, import_react24.forwardRef)(function Form({
               id: submitButtonId,
               isSubmit: true
             }
-          )
+          ),
+          actionButtonsLocation === "left" && onClickCancel ? cancelButton : void 0,
+          actionButtonsLocation === "left" && renderActionButtons
         ]
       }
     )