@pagenflow/email 1.3.2 → 1.3.3

package/dist/components/Row.d.ts

@@ -17,6 +17,10 @@ export interface RowConfig {
     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,7 +2213,7 @@ function getBorderStyle$1(border) {
     return style;
 }
 function Row({ children, config, devNode }) {
-    var _a, _b, _c;
+    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)
@@ -2225,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);