@pagenflow/email 1.3.1 → 1.3.3

package/dist/components/Row.d.ts

@@ -1,5 +1,11 @@
 import { ReactNode } from "react";
 import { AlignItems, BorderConfig, JustifyContent } from "../types";
+export interface BackgroundImageType {
+    src: string;
+    repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
+    size?: "auto" | "cover" | "contain";
+    position?: string;
+}
 export interface RowConfig {
     gap?: string;
     justifyContent?: JustifyContent;
@@ -8,8 +14,13 @@ export interface RowConfig {
     height?: string;
     padding?: string;
     backgroundColor?: string;
+    backgroundImage?: BackgroundImageType;
     borderRadius?: string;
     border?: BorderConfig;
+    mobile?: {
+        justifyContent?: JustifyContent;
+        alignItems?: AlignItems;
+    };
 }
 export type RowProps = {
     children: ReactNode;

package/dist/index.cjs.js

@@ -1956,6 +1956,35 @@ function Head({ children, backgroundColor = "#ffffff", title = "Email Preview",
                 mso-line-height-rule: exactly;
             }
         }
+
+        @media only screen and (max-width: 600px) {
+          /* 1. Handling Mobile Alignment (Justify) */
+          /* We target the inner table alignment */
+          .responsive-row[data-mobile-justify="center"] .content-table {
+            margin: 0 auto !important;
+            float: none !important;
+          }
+          .responsive-row[data-mobile-justify="start"] .content-table {
+            margin: 0 !important;
+            float: left !important;
+          }
+          .responsive-row[data-mobile-justify="end"] .content-table {
+            margin: 0 0 0 auto !important;
+            float: right !important;
+          }
+
+          /* 2. Handling Mobile Vertical Alignment (Align Items) */
+          /* We target the child cells if they are still side-by-side */
+          .responsive-row[data-mobile-align="center"] .child-cell {
+            vertical-align: middle !important;
+          }
+          .responsive-row[data-mobile-align="start"] .child-cell {
+            vertical-align: top !important;
+          }
+          .responsive-row[data-mobile-align="end"] .child-cell {
+            vertical-align: bottom !important;
+          }
+        }
         
         /* ================================================= */
         /* 🔒 UNIVERSAL LINK RESET */
@@ -2184,10 +2213,15 @@ function getBorderStyle$1(border) {
     return style;
 }
 function Row({ children, config, devNode }) {
+    var _a, _b, _c, _d, _e;
     const childrenArray = (Array.isArray(children) ? children : [children]).filter((child) => child != null);
     const numChildren = childrenArray.length;
     // 1. Outer TD for Background and Border Radius (no border here)
-    const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height }, (config.borderRadius && { overflow: "hidden" }));
+    const backgroundTdStyle = Object.assign({ backgroundColor: config.backgroundColor, borderRadius: config.borderRadius, width: config.width || "100%", height: config.height, 
+        // Background Image styles
+        backgroundImage: config.backgroundImage
+            ? `url(${config.backgroundImage.src})`
+            : undefined, backgroundRepeat: (_a = config.backgroundImage) === null || _a === void 0 ? void 0 : _a.repeat, backgroundSize: (_b = config.backgroundImage) === null || _b === void 0 ? void 0 : _b.size, backgroundPosition: (_c = config.backgroundImage) === null || _c === void 0 ? void 0 : _c.position }, (config.borderRadius && { overflow: "hidden" }));
     // 2. Inner Table for Border and Border Radius
     const borderTableStyle = Object.assign({ width: "100%", height: "100%", borderCollapse: "separate", borderSpacing: 0, borderRadius: config.borderRadius }, getBorderStyle$1(config.border));
     // 3. TD for Padding
@@ -2220,16 +2254,16 @@ function Row({ children, config, devNode }) {
             width: config.width || "100%",
             height: config.height,
             borderCollapse: "collapse",
-        } }, (config.height && { height: config.height }), { children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", Object.assign({ style: backgroundTdStyle }, (config.height && { height: config.height }), { children: jsxRuntime.jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: paddingTdStyle, children: jsxRuntime.jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
+        } }, (config.height && { height: config.height }), { "data-mobile-justify": (_d = config.mobile) === null || _d === void 0 ? void 0 : _d.justifyContent, "data-mobile-align": (_e = config.mobile) === null || _e === void 0 ? void 0 : _e.alignItems, className: "responsive-row", children: [jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", Object.assign({ style: backgroundTdStyle }, (config.height && { height: config.height }), { children: jsxRuntime.jsx("table", { "aria-label": "Row Border Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: borderTableStyle, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { style: paddingTdStyle, children: jsxRuntime.jsx("table", { "aria-label": "Row Justification Wrapper", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: {
                                                 width: "100%",
                                                 height: "100%",
                                                 borderCollapse: "collapse",
-                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
+                                            }, children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { align: tdAlign, children: jsxRuntime.jsx("table", Object.assign({ "aria-label": "Row Content", role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, style: contentTableStyle }, (config.height && { height: config.height }), { className: "content-table", children: jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { className: "content-tr", children: childrenArray.map((child, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("td", { valign: tdValign, style: {
                                                                                     verticalAlign: tdValign,
                                                                                     textAlign: "left",
                                                                                     padding: "0",
                                                                                     margin: "0",
-                                                                                }, children: child }), index < numChildren - 1 &&
+                                                                                }, className: "child-cell", children: child }), index < numChildren - 1 &&
                                                                                 config.gap && (jsxRuntime.jsx("td", { width: config.gap, style: gapTdStyle, children: "\u00A0" }, `row-gap-${index}`))] }, `row-child-${index}`))) }) }) })) }) }) }) }) }) }) }) }) })) }) }), devNode && (jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { children: devNode }) }) }))] })));
 }
 var Row_default = React.memo(Row, arePropsEqual);