react-better-html 1.1.159 → 1.1.161

package/dist/index.d.mts

@@ -257,8 +257,9 @@ type VerticalDividerProps = DividerProps & {
 };
 type HorizontalDividerProps = DividerProps & {
     text?: string;
+    textFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
-    textColor?: string;
+    textColor?: React.CSSProperties["color"];
 };
 type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
@@ -318,21 +319,20 @@ declare const Modal: typeof ModalComponent & {
 type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
-    backgroundColor?: string;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundImage?: React.CSSProperties["backgroundImage"];
     children?: React.ReactNode;
 } & ComponentPaddingProps;
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        pageBackgroundColor?: string;
+        pageBackgroundColor?: React.CSSProperties["backgroundColor"];
+        pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
-        sideImageSrc?: string;
-        sideImageName?: AssetName | AnyOtherString;
+        behindComponent?: React.ReactNode;
+        sideComponent?: React.ReactNode;
         /** @default "right" */
-        sideImagePosition?: "left" | "right";
-        /** @default "center" */
-        sideImageAlignment?: "left" | "center" | "right";
-        sideImageFooter?: React.ReactNode;
+        sideComponentPosition?: "left" | "right";
     }>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;
@@ -405,7 +405,10 @@ type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
+        /** @default "current-password" */
+        autoComplete?: React.ComponentProps<"input">["autoComplete"];
+    }>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
     date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {

package/dist/index.d.ts

@@ -257,8 +257,9 @@ type VerticalDividerProps = DividerProps & {
 };
 type HorizontalDividerProps = DividerProps & {
     text?: string;
+    textFontSize?: React.CSSProperties["fontSize"];
     /** @default textSecondary */
-    textColor?: string;
+    textColor?: React.CSSProperties["color"];
 };
 type DividerComponentType = {
     vertical: (props: ComponentPropWithRef<HTMLDivElement, VerticalDividerProps>) => React.ReactElement;
@@ -318,21 +319,20 @@ declare const Modal: typeof ModalComponent & {
 type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
-    backgroundColor?: string;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundImage?: React.CSSProperties["backgroundImage"];
     children?: React.ReactNode;
 } & ComponentPaddingProps;
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        pageBackgroundColor?: string;
+        pageBackgroundColor?: React.CSSProperties["backgroundColor"];
+        pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
-        sideImageSrc?: string;
-        sideImageName?: AssetName | AnyOtherString;
+        behindComponent?: React.ReactNode;
+        sideComponent?: React.ReactNode;
         /** @default "right" */
-        sideImagePosition?: "left" | "right";
-        /** @default "center" */
-        sideImageAlignment?: "left" | "center" | "right";
-        sideImageFooter?: React.ReactNode;
+        sideComponentPosition?: "left" | "right";
     }>) => React.ReactElement;
 };
 declare const PageHolderComponent: PageHolderComponentType;
@@ -405,7 +405,10 @@ type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
     email: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
-    password: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    password: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "autoComplete"> & {
+        /** @default "current-password" */
+        autoComplete?: React.ComponentProps<"input">["autoComplete"];
+    }>) => React.ReactElement;
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     phoneNumber: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, "type" | "prefix">>) => React.ReactElement;
     date: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {

package/dist/index.js

@@ -3345,11 +3345,11 @@ var Divider_default = {
     })
   ),
   horizontal: (0, import_react12.memo)(
-    (0, import_react12.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textColor, ...props }, ref) {
+    (0, import_react12.forwardRef)(function Divider2({ width = 1, backgroundColor, text, textFontSize, textColor, ...props }, ref) {
       const theme2 = useTheme();
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: text ? theme2.styles.space : void 0, ...props, ref, children: [
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border }),
-        text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: textColor ?? theme2.colors.textSecondary, children: text }),
+        text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: textFontSize, color: textColor ?? theme2.colors.textSecondary, children: text }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Div_default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme2.colors.border })
       ] });
     })
@@ -3659,12 +3659,11 @@ var PageHolderComponent = (0, import_react14.forwardRef)(function PageHolder({ n
 });
 PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   pageBackgroundColor,
+  pageBackgroundImage,
   contentMaxWidth,
-  sideImageSrc,
-  sideImageName,
-  sideImagePosition = "right",
-  sideImageAlignment = "center",
-  sideImageFooter,
+  behindComponent,
+  sideComponent,
+  sideComponentPosition = "right",
   noMaxContentWidth,
   children,
   ...props
@@ -3673,21 +3672,36 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   const mediaQuery = useMediaQuery();
   const { app } = useBetterHtmlContextInternal();
   const breakingPoint = mediaQuery.size1000;
-  const withSideImage = (sideImageSrc || sideImageName) && !breakingPoint;
+  const withSideComponent = sideComponent && !breakingPoint;
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Div_default.row,
     {
+      position: "relative",
       width: "100%",
       minHeight: "100svh",
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
+      backgroundImage: pageBackgroundImage,
       children: [
-        sideImagePosition === "left" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { width: `${withSideImage ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        behindComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Div_default,
+          {
+            position: "fixed",
+            width: `${withSideComponent ? 50 : 100}%`,
+            height: "100svh",
+            top: 0,
+            left: sideComponentPosition === "right" ? 0 : "auto",
+            right: sideComponentPosition === "left" ? 0 : "auto",
+            zIndex: 1,
+            children: behindComponent
+          }
+        ),
+        sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Div_default.box,
           {
-            width: `calc(100% - ${theme2.styles.space}px * 2)`,
+            width: `calc(100% - ${theme2.styles.space * 2}px)`,
             maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
             marginInline: theme2.styles.space,
             marginBlock: theme2.styles.space,
@@ -3696,32 +3710,17 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
             children
           }
         ) }),
-        sideImagePosition === "right" && withSideImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        withSideImage && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        sideComponentPosition === "right" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
+        withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Div_default,
           {
             position: "fixed",
             width: "50%",
             height: "100svh",
             top: 0,
-            left: sideImagePosition === "left" ? 0 : "auto",
-            right: sideImagePosition === "right" ? 0 : "auto",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                Div_default.row,
-                {
-                  position: "absolute",
-                  width: "100%",
-                  height: "100%",
-                  top: 0,
-                  left: 0,
-                  justifyContent: sideImageAlignment === "left" ? "flex-start" : sideImageAlignment === "right" ? "flex-end" : "center",
-                  overflow: "hidden",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Image_default, { name: sideImageName, height: "100%", src: sideImageSrc })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", width: "100%", bottom: theme2.styles.space, children: sideImageFooter })
-            ]
+            left: sideComponentPosition === "left" ? 0 : "auto",
+            right: sideComponentPosition === "right" ? 0 : "auto",
+            children: sideComponent
           }
         )
       ]