react-better-html 1.1.154 → 1.1.156

package/dist/index.d.mts

@@ -388,7 +388,9 @@ type InputFieldProps = {
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
     prefix?: React.ReactNode;
+    prefixBackgroundColor?: string;
     suffix?: React.ReactNode;
+    suffixBackgroundColor?: string;
     insideInputFieldComponent?: React.ReactNode;
     /** @default false */
     withDebounce?: boolean;
@@ -521,6 +523,7 @@ declare function usePageScroll(): {
     scrollY: number;
 };
 declare function useMediaQuery(): {
+    screenWidth: number;
     size320: boolean;
     size400: boolean;
     size500: boolean;
@@ -582,6 +585,7 @@ type FormProps = {
     form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
     submitButtonText?: string;
     submitButtonLoaderName?: LoaderName | AnyOtherString;
+    submitButtonIsLoading?: boolean;
     submitButtonId?: string;
     /** @default false */
     submitButtonIsDisabled?: boolean;
@@ -590,14 +594,12 @@ type FormProps = {
     actionButtonsLocation?: "left" | "center" | "right";
     gap?: React.CSSProperties["gap"];
     /** @default false */
-    isSubmitting?: boolean;
-    /** @default false */
     isDestructive?: boolean;
     /** @default false */
     withDividers?: boolean;
     renderActionButtons?: React.ReactNode;
     onClickCancel?: () => void;
-    onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type FormComponentType = {

package/dist/index.d.ts

@@ -388,7 +388,9 @@ type InputFieldProps = {
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
     prefix?: React.ReactNode;
+    prefixBackgroundColor?: string;
     suffix?: React.ReactNode;
+    suffixBackgroundColor?: string;
     insideInputFieldComponent?: React.ReactNode;
     /** @default false */
     withDebounce?: boolean;
@@ -521,6 +523,7 @@ declare function usePageScroll(): {
     scrollY: number;
 };
 declare function useMediaQuery(): {
+    screenWidth: number;
     size320: boolean;
     size400: boolean;
     size500: boolean;
@@ -582,6 +585,7 @@ type FormProps = {
     form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
     submitButtonText?: string;
     submitButtonLoaderName?: LoaderName | AnyOtherString;
+    submitButtonIsLoading?: boolean;
     submitButtonId?: string;
     /** @default false */
     submitButtonIsDisabled?: boolean;
@@ -590,14 +594,12 @@ type FormProps = {
     actionButtonsLocation?: "left" | "center" | "right";
     gap?: React.CSSProperties["gap"];
     /** @default false */
-    isSubmitting?: boolean;
-    /** @default false */
     isDestructive?: boolean;
     /** @default false */
     withDividers?: boolean;
     renderActionButtons?: React.ReactNode;
     onClickCancel?: () => void;
-    onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
 type FormComponentType = {

package/dist/index.js

@@ -2864,6 +2864,7 @@ function usePageScroll() {
 function useMediaQuery() {
   const { width } = usePageResize();
   return {
+    screenWidth: width,
     size320: width <= 320,
     size400: width <= 400,
     size500: width <= 500,
@@ -3704,7 +3705,7 @@ var PageHeaderComponent = (0, import_react15.forwardRef)(function PageHeader({
     {
       alignItems: "center",
       gap: theme2.styles.space,
-      marginBottom: marginBottom || theme2.styles.space * 2,
+      marginBottom: marginBottom ?? theme2.styles.space * 2,
       ref,
       children: [
         imageUrl && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
@@ -6189,7 +6190,9 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
   leftIcon,
   rightIcon,
   prefix,
+  prefixBackgroundColor,
   suffix,
+  suffixBackgroundColor,
   insideInputFieldComponent,
   withDebounce,
   debounceDelay = 0.5,
@@ -6204,6 +6207,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
 }, ref) {
   const theme2 = useTheme();
   const internalId = (0, import_react20.useId)();
+  const { colorTheme } = useBetterHtmlContextInternal();
   const [_, debouncedValue, setDebouncedValue] = useDebounceState(
     props.value?.toString() ?? "",
     debounceDelay
@@ -6247,7 +6251,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
           justifyContent: "center",
           border: `1px solid ${theme2.colors.border}`,
           borderRight: "none",
-          backgroundColor: lightenColor(theme2.colors.border, 0.8),
+          backgroundColor: prefixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
           borderTopLeftRadius: theme2.styles.borderRadius,
           borderBottomLeftRadius: theme2.styles.borderRadius,
           paddingInline: theme2.styles.space,
@@ -6316,7 +6320,7 @@ var InputFieldComponent = (0, import_react20.forwardRef)(function InputField({
           justifyContent: "center",
           border: `1px solid ${theme2.colors.border}`,
           borderLeft: "none",
-          backgroundColor: lightenColor(theme2.colors.border, 0.8),
+          backgroundColor: suffixBackgroundColor ?? (colorTheme === "light" ? darkenColor(theme2.colors.backgroundContent, 0.03) : lightenColor(theme2.colors.backgroundContent, 0.1)),
           borderTopRightRadius: theme2.styles.borderRadius,
           borderBottomRightRadius: theme2.styles.borderRadius,
           paddingInline: theme2.styles.space,
@@ -7244,12 +7248,12 @@ var FormComponent = (0, import_react22.forwardRef)(function Form({
   form,
   submitButtonText,
   submitButtonLoaderName,
+  submitButtonIsLoading,
   submitButtonId,
   submitButtonIsDisabled,
   cancelButtonText,
   actionButtonsLocation = "right",
   gap,
-  isSubmitting,
   isDestructive,
   withDividers,
   renderActionButtons,
@@ -7286,7 +7290,7 @@ var FormComponent = (0, import_react22.forwardRef)(function Form({
             SubmitButtonTag,
             {
               text: submitButtonText,
-              isLoading: isSubmitting || form?.isSubmitting,
+              isLoading: submitButtonIsLoading || form?.isSubmitting,
               loaderName: submitButtonLoaderName,
               disabled: submitButtonIsDisabledFinal,
               id: submitButtonId,