@comet/mail-react 9.0.0-beta.0 → 9.0.0-beta.2

package/lib/components/text/MjmlText.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlText as BaseMjmlText } from "@faire/mjml-react";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { OutlookTextStyleProvider } from "./OutlookTextStyleContext.js";
+import { generateResponsiveTextCss } from "./textStyles.js";
+/**
+ * Text component that can be styled using the theme, optionally using a variant.
+ *
+ * Works without a `ThemeProvider` as a plain pass-through to the base MJML text component.
+ * The `variant` and `bottomSpacing` props require a `ThemeProvider` (or `MjmlMailRoot`).
+ */
+export function MjmlText({ variant: variantProp, bottomSpacing, className, children, ...restProps }) {
+    const theme = useOptionalTheme();
+    const themedProps = getThemedProps(theme, variantProp, bottomSpacing, restProps);
+    const resolvedClassName = clsx("mjmlText", themedProps.activeVariant && `mjmlText--${themedProps.activeVariant}`, bottomSpacing && "mjmlText--bottomSpacing", className);
+    return (_jsx(BaseMjmlText, { ...themedProps.baseProps, className: resolvedClassName, ...restProps, children: themedProps.outlookTextStyleValues !== null ? (_jsx(OutlookTextStyleProvider, { value: themedProps.outlookTextStyleValues, children: children })) : (children) }));
+}
+function getThemedProps(theme, variantProp, bottomSpacing, explicitProps) {
+    if (theme === null) {
+        if (variantProp !== undefined) {
+            throw new Error("The `variant` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+        }
+        if (bottomSpacing) {
+            throw new Error("The `bottomSpacing` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+        }
+        return { activeVariant: undefined, baseProps: {}, outlookTextStyleValues: null };
+    }
+    const { defaultVariant, variants, ...baseStyles } = theme.text;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = variantStyles ? { ...baseStyles, ...variantStyles } : baseStyles;
+    const fontWeightDefault = getDefaultOrUndefined(mergedStyles.fontWeight);
+    return {
+        activeVariant,
+        baseProps: {
+            fontFamily: getDefaultOrUndefined(mergedStyles.fontFamily),
+            fontSize: getDefaultOrUndefined(mergedStyles.fontSize),
+            fontWeight: fontWeightDefault !== undefined ? String(fontWeightDefault) : undefined,
+            fontStyle: getDefaultOrUndefined(mergedStyles.fontStyle),
+            lineHeight: getDefaultOrUndefined(mergedStyles.lineHeight),
+            letterSpacing: getDefaultOrUndefined(mergedStyles.letterSpacing),
+            textDecoration: getDefaultOrUndefined(mergedStyles.textDecoration),
+            textTransform: getDefaultOrUndefined(mergedStyles.textTransform),
+            color: getDefaultOrUndefined(mergedStyles.color),
+            paddingBottom: bottomSpacing ? getDefaultOrUndefined(mergedStyles.bottomSpacing) : undefined,
+        },
+        outlookTextStyleValues: {
+            fontFamily: explicitProps.fontFamily ?? getDefaultOrUndefined(mergedStyles.fontFamily),
+            fontSize: explicitProps.fontSize ?? getDefaultOrUndefined(mergedStyles.fontSize),
+            fontWeight: explicitProps.fontWeight ?? fontWeightDefault,
+            lineHeight: explicitProps.lineHeight ?? getDefaultOrUndefined(mergedStyles.lineHeight),
+            color: explicitProps.color ?? getDefaultOrUndefined(mergedStyles.color),
+        },
+    };
+}
+export function generateTextStyles(theme) {
+    return generateResponsiveTextCss(theme, {
+        styleSelector: (variantName) => `.mjmlText--${variantName} > div`,
+        spacingSelector: (variantName) => `.mjmlText--bottomSpacing.mjmlText--${variantName}`,
+    });
+}
+registerStyles(generateTextStyles);

package/lib/components/text/OutlookTextStyleContext.d.ts

@@ -0,0 +1,9 @@
+import { type CSSProperties, type ReactNode } from "react";
+type OutlookTextStyleValues = Pick<CSSProperties, "fontFamily" | "fontSize" | "lineHeight" | "fontWeight" | "color">;
+declare function OutlookTextStyleProvider({ value, children }: {
+    value: OutlookTextStyleValues;
+    children: ReactNode;
+}): ReactNode;
+declare function useOutlookTextStyle(): OutlookTextStyleValues | null;
+export { OutlookTextStyleProvider, useOutlookTextStyle };
+export type { OutlookTextStyleValues };

package/lib/components/text/OutlookTextStyleContext.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const OutlookTextStyleContext = createContext(null);
+function OutlookTextStyleProvider({ value, children }) {
+    return _jsx(OutlookTextStyleContext, { value: value, children: children });
+}
+function useOutlookTextStyle() {
+    return useContext(OutlookTextStyleContext);
+}
+export { OutlookTextStyleProvider, useOutlookTextStyle };

package/lib/components/text/__stories__/HtmlText.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HtmlText } from "../HtmlText.js";
+type Story = StoryObj<typeof HtmlText>;
+declare const config: Meta<typeof HtmlText>;
+export default config;
+export declare const Default: Story;
+export declare const WithVariants: Story;
+export declare const ResponsiveVariants: Story;
+export declare const BottomSpacing: Story;
+export declare const DefaultVariant: Story;
+export declare const ElementPropAsDiv: Story;
+export declare const ElementPropAsAnchor: Story;

package/lib/components/text/__stories__/HtmlText.stories.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn, MjmlRaw } from "@faire/mjml-react";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { HtmlText } from "../HtmlText.js";
+const config = {
+    title: "Components/HtmlText",
+    component: HtmlText,
+    tags: ["autodocs"],
+};
+export default config;
+export const Default = {
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx("table", { children: _jsx("tr", { children: _jsx(HtmlText, { children: "Default text with base theme styles" }) }) }) }) }) })),
+};
+export const WithVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
+                    body: { fontSize: "16px", lineHeight: "24px" },
+                    caption: { fontSize: "12px", lineHeight: "16px", color: "#666666" },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Heading variant" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "body", children: "Body variant" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "caption", children: "Caption variant" }) })] }) }) }) })),
+};
+export const ResponsiveVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        lineHeight: { default: "40px", mobile: "30px" },
+                        fontWeight: 700,
+                    },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx("table", { children: _jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Responsive heading \u2014 shrinks on mobile" }) }) }) }) }) })),
+};
+export const BottomSpacing = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                bottomSpacing: "20px",
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, bottomSpacing: { default: "24px", mobile: "16px" } },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "Heading with bottom spacing" }) }), _jsx("tr", { children: _jsx(HtmlText, { bottomSpacing: true, children: "Base text with bottom spacing" }) }), _jsx("tr", { children: _jsx(HtmlText, { children: "Text without bottom spacing" }) })] }) }) }) })),
+};
+export const DefaultVariant = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                    heading: { fontSize: "28px", fontWeight: 700 },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsxs("table", { children: [_jsx("tr", { children: _jsx(HtmlText, { children: "Uses the default \"body\" variant automatically" }) }), _jsx("tr", { children: _jsx(HtmlText, { variant: "heading", children: "Explicit heading variant" }) })] }) }) }) })),
+};
+export const ElementPropAsDiv = {
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlText, { element: "div", children: "Rendered as a div with theme styles" }) }) }) })),
+};
+export const ElementPropAsAnchor = {
+    render: () => (_jsx(MjmlSection, { children: _jsx(MjmlColumn, { children: _jsx(MjmlRaw, { children: _jsx(HtmlText, { element: "a", href: "https://example.com", style: { textDecoration: "underline" }, children: "Rendered as an anchor with href" }) }) }) })),
+};

package/lib/components/text/__stories__/MjmlText.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MjmlText } from "../MjmlText.js";
+type Story = StoryObj<typeof MjmlText>;
+declare const config: Meta<typeof MjmlText>;
+export default config;
+export declare const Default: Story;
+export declare const WithVariants: Story;
+export declare const ResponsiveVariants: Story;
+export declare const BottomSpacing: Story;
+export declare const DefaultVariant: Story;

package/lib/components/text/__stories__/MjmlText.stories.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { MjmlText } from "../MjmlText.js";
+const config = {
+    title: "Components/MjmlText",
+    component: MjmlText,
+    tags: ["autodocs"],
+};
+export default config;
+export const Default = {
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { children: "Default text with base theme styles" }) }) })),
+};
+export const WithVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, lineHeight: "40px" },
+                    body: { fontSize: "16px", lineHeight: "24px" },
+                    caption: { fontSize: "12px", lineHeight: "16px", color: "#666666" },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", children: "Heading variant" }), _jsx(MjmlText, { variant: "body", children: "Body variant" }), _jsx(MjmlText, { variant: "caption", children: "Caption variant" })] }) })),
+};
+export const ResponsiveVariants = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        lineHeight: { default: "40px", mobile: "30px" },
+                        fontWeight: 700,
+                    },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsx(MjmlColumn, { children: _jsx(MjmlText, { variant: "heading", children: "Responsive heading \u2014 shrinks on mobile" }) }) })),
+};
+export const BottomSpacing = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                bottomSpacing: "20px",
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700, bottomSpacing: { default: "24px", mobile: "16px" } },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Heading with bottom spacing" }), _jsx(MjmlText, { bottomSpacing: true, children: "Base text with bottom spacing" }), _jsx(MjmlText, { children: "Text without bottom spacing" })] }) })),
+};
+export const DefaultVariant = {
+    parameters: {
+        theme: createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                    heading: { fontSize: "28px", fontWeight: 700 },
+                },
+            },
+        }),
+    },
+    render: () => (_jsx(MjmlSection, { indent: true, children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { children: "Uses the default \"body\" variant automatically" }), _jsx(MjmlText, { variant: "heading", children: "Explicit heading variant" })] }) })),
+};

package/lib/components/text/__tests__/HtmlText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/text/__tests__/HtmlText.test.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { createTheme } from "../../../theme/createTheme.js";
+import { ThemeProvider } from "../../../theme/ThemeProvider.js";
+import { HtmlText } from "../HtmlText.js";
+// Type-level tests — validated by tsc, not at runtime.
+// An unused @ts-expect-error directive causes a compile error if the overloads
+// stop rejecting the invalid usage, so these act as regression guards.
+// @ts-expect-error href is not valid on the default <td>
+void (_jsx(HtmlText, { href: "/foo", children: "text" }));
+void ((
+// @ts-expect-error colSpan is not valid on <a>
+_jsx(HtmlText, { element: "a", colSpan: 2, children: "text" })));
+// Own props are always accepted regardless of element — no error expected
+void (_jsx(HtmlText, { element: "div", variant: "heading", bottomSpacing: true, children: "text" }));
+void (_jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "text" }));
+function renderHtmlText(element) {
+    return renderToStaticMarkup(element);
+}
+describe("HtmlText", () => {
+    it("renders a <td> with base theme styles as inline styles", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Hello" }) }));
+        expect(html).toContain("<td");
+        expect(html).toContain("Hello");
+        expect(html).toContain("font-family:Arial, sans-serif");
+        expect(html).toContain("font-size:16px");
+        expect(html).toContain("line-height:20px");
+    });
+    it("applies variant styles over base styles", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: { default: "32px", mobile: "24px" }, fontWeight: 700 },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
+        expect(html).toContain("font-size:32px");
+        expect(html).toContain("font-weight:700");
+    });
+    it("inherits base styles not overridden by variant", () => {
+        const theme = createTheme({
+            text: {
+                fontFamily: "Georgia, serif",
+                variants: {
+                    heading: { fontSize: "32px" },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
+        expect(html).toContain("font-family:Georgia, serif");
+        expect(html).toContain("font-size:32px");
+    });
+    it("applies defaultVariant when no variant prop is specified", () => {
+        const theme = createTheme({
+            text: {
+                defaultVariant: "body",
+                variants: {
+                    body: { fontSize: "14px" },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Text" }) }));
+        expect(html).toContain("font-size:14px");
+    });
+    it("applies bottomSpacing as padding-bottom", () => {
+        const theme = createTheme({ text: { bottomSpacing: "16px" } });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { bottomSpacing: true, children: "Text" }) }));
+        expect(html).toContain("padding-bottom:16px");
+    });
+    it("uses variant bottomSpacing over base", () => {
+        const theme = createTheme({
+            text: {
+                bottomSpacing: "16px",
+                variants: {
+                    heading: { bottomSpacing: { default: "24px", mobile: "16px" } },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", bottomSpacing: true, children: "Title" }) }));
+        expect(html).toContain("padding-bottom:24px");
+    });
+    it("does not apply padding-bottom when bottomSpacing is not set", () => {
+        const theme = createTheme({ text: { bottomSpacing: "16px" } });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Text" }) }));
+        expect(html).not.toContain("padding-bottom");
+    });
+    it("always applies the htmlText base class", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { children: "Hello" }) }));
+        expect(html).toContain('class="htmlText"');
+    });
+    it("applies variant modifier class", () => {
+        const theme = createTheme({
+            text: { variants: { heading: { fontSize: "32px" } } },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { variant: "heading", children: "Title" }) }));
+        expect(html).toContain("htmlText--heading");
+    });
+    it("applies bottomSpacing modifier class", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { bottomSpacing: true, children: "Text" }) }));
+        expect(html).toContain("htmlText--bottomSpacing");
+    });
+    it("merges consumer className", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { className: "custom", children: "Text" }) }));
+        expect(html).toContain("htmlText");
+        expect(html).toContain("custom");
+    });
+    it("lets user style prop override theme styles", () => {
+        const theme = createTheme({ text: { fontFamily: "Arial, sans-serif" } });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { style: { fontFamily: "Georgia" }, children: "Hello" }) }));
+        expect(html).toContain("font-family:Georgia");
+    });
+    it("forwards standard td attributes", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { colSpan: 2, align: "center", children: "Hello" }) }));
+        expect(html).toContain('colSpan="2"');
+        expect(html).toContain('align="center"');
+    });
+    it("renders a <div> when element is 'div'", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "div", children: "Hello" }) }));
+        expect(html).toContain("<div");
+        expect(html).not.toContain("<td");
+        expect(html).toContain("Hello");
+        expect(html).toContain("font-family:Arial, sans-serif");
+    });
+    it("renders an <a> with href when element is 'a'", () => {
+        const theme = createTheme();
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "a", href: "/link", children: "Click" }) }));
+        expect(html).toContain("<a");
+        expect(html).not.toContain("<td");
+        expect(html).toContain('href="/link"');
+        expect(html).toContain("Click");
+    });
+    it("applies theme styles and CSS classes to non-td elements", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: { fontSize: "32px", fontWeight: 700 },
+                },
+            },
+        });
+        const html = renderHtmlText(_jsx(ThemeProvider, { theme: theme, children: _jsx(HtmlText, { element: "div", variant: "heading", bottomSpacing: true, className: "custom", children: "Title" }) }));
+        expect(html).toContain("<div");
+        expect(html).toContain("font-size:32px");
+        expect(html).toContain("font-weight:700");
+        expect(html).toContain("htmlText");
+        expect(html).toContain("htmlText--heading");
+        expect(html).toContain("htmlText--bottomSpacing");
+        expect(html).toContain("custom");
+    });
+});

package/lib/components/text/__tests__/MjmlText.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/text/__tests__/MjmlText.test.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MjmlColumn } from "@faire/mjml-react";
+import { describe, expect, it } from "vitest";
+import { renderMailHtml } from "../../../server/renderMailHtml.js";
+import { createTheme } from "../../../theme/createTheme.js";
+import { MjmlMailRoot } from "../../mailRoot/MjmlMailRoot.js";
+import { MjmlSection } from "../../section/MjmlSection.js";
+import { generateTextStyles, MjmlText } from "../MjmlText.js";
+describe("MjmlText integration", () => {
+    // Full render pipeline: mjml2html must report no errors for this MjmlText + theme setup.
+    it("produces no MJML warnings with a variant theme", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        fontWeight: 700,
+                        lineHeight: { default: "40px", mobile: "30px" },
+                    },
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                },
+            },
+        });
+        const { mjmlWarnings } = renderMailHtml(_jsx(MjmlMailRoot, { theme: theme, children: _jsx(MjmlSection, { children: _jsxs(MjmlColumn, { children: [_jsx(MjmlText, { variant: "heading", bottomSpacing: true, children: "Heading" }), _jsx(MjmlText, { variant: "body", children: "Body text" }), _jsx(MjmlText, { children: "Base text" })] }) }) }));
+        expect(mjmlWarnings).toEqual([]);
+    });
+});
+describe("generateTextStyles", () => {
+    it("returns empty CSS when no variants are defined", () => {
+        const theme = createTheme();
+        const result = generateTextStyles(theme);
+        expect(result).toBe("");
+    });
+    it("emits style overrides with correct selector for a variant", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        expect(result).toContain(".mjmlText--heading > div");
+        expect(result).toContain("font-size: 24px !important");
+    });
+    it("groups multiple properties into a single media query per breakpoint", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        lineHeight: { default: "40px", mobile: "30px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        const mobileMediaQuery = `@media (max-width: ${theme.breakpoints.mobile.value - 1}px)`;
+        expect(result).toContain(mobileMediaQuery);
+        // Both declarations should appear within the same media query block
+        const mediaBlockStart = result.indexOf(mobileMediaQuery);
+        const blockContent = result.slice(mediaBlockStart);
+        expect(blockContent).toContain("font-size: 24px !important");
+        expect(blockContent).toContain("line-height: 30px !important");
+    });
+    it("uses compound selector for responsive bottomSpacing", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        bottomSpacing: { default: "24px", mobile: "16px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        expect(result).toContain(".mjmlText--bottomSpacing.mjmlText--heading");
+        expect(result).toContain("padding-bottom: 16px !important");
+    });
+    it("emits no media queries for non-responsive variant", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    body: { fontSize: "14px", lineHeight: "22px" },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        expect(result).not.toContain("@media");
+    });
+    it("keeps style and bottomSpacing overrides separate", () => {
+        const theme = createTheme({
+            text: {
+                variants: {
+                    heading: {
+                        fontSize: { default: "32px", mobile: "24px" },
+                        bottomSpacing: { default: "24px", mobile: "16px" },
+                    },
+                },
+            },
+        });
+        const result = generateTextStyles(theme);
+        // Style overrides use "> div" selector
+        expect(result).toContain(".mjmlText--heading > div");
+        expect(result).toContain("font-size: 24px !important");
+        // Spacing overrides use compound selector (no "> div")
+        expect(result).toContain(".mjmlText--bottomSpacing.mjmlText--heading");
+        expect(result).toContain("padding-bottom: 16px !important");
+    });
+});

package/lib/components/text/textStyles.d.ts

@@ -0,0 +1,12 @@
+import type { TextVariantStyles, Theme } from "../../theme/themeTypes.js";
+type StylePropertyKey = Exclude<keyof TextVariantStyles, "bottomSpacing">;
+export declare const textStyleCssProperties: ReadonlyArray<[StylePropertyKey, string]>;
+interface GenerateResponsiveTextCssOptions {
+    /** Selector for text style overrides, given a variant name. */
+    styleSelector: (variantName: string) => string;
+    /** Selector for bottomSpacing overrides, given a variant name. */
+    spacingSelector: (variantName: string) => string;
+}
+/** Generates responsive CSS media queries for text variant overrides. */
+export declare function generateResponsiveTextCss(theme: Theme, options: GenerateResponsiveTextCssOptions): string;
+export {};

package/lib/components/text/textStyles.js

@@ -0,0 +1,69 @@
+import { getResponsiveOverrides } from "../../theme/responsiveValue.js";
+import { css } from "../../utils/css.js";
+export const textStyleCssProperties = [
+    ["fontFamily", "font-family"],
+    ["fontSize", "font-size"],
+    ["fontWeight", "font-weight"],
+    ["fontStyle", "font-style"],
+    ["lineHeight", "line-height"],
+    ["letterSpacing", "letter-spacing"],
+    ["textDecoration", "text-decoration"],
+    ["textTransform", "text-transform"],
+    ["color", "color"],
+];
+/** Generates responsive CSS media queries for text variant overrides. */
+export function generateResponsiveTextCss(theme, options) {
+    const { variants } = theme.text;
+    if (!variants)
+        return css ``;
+    const cssChunks = [];
+    for (const [variantName, variantStyles] of Object.entries(variants)) {
+        if (!variantStyles)
+            continue;
+        const styleOverrides = new Map();
+        const spacingOverrides = new Map();
+        for (const [themeKey, cssProperty] of textStyleCssProperties) {
+            const value = variantStyles[themeKey];
+            if (value === undefined)
+                continue;
+            for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
+                const declarations = styleOverrides.get(breakpointKey) ?? [];
+                declarations.push(`${cssProperty}: ${String(breakpointValue)} !important`);
+                styleOverrides.set(breakpointKey, declarations);
+            }
+        }
+        const bottomSpacingValue = variantStyles.bottomSpacing;
+        if (bottomSpacingValue !== undefined) {
+            for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(bottomSpacingValue)) {
+                const declarations = spacingOverrides.get(breakpointKey) ?? [];
+                declarations.push(`padding-bottom: ${String(breakpointValue)} !important`);
+                spacingOverrides.set(breakpointKey, declarations);
+            }
+        }
+        for (const [breakpointKey, declarations] of styleOverrides) {
+            const breakpoint = theme.breakpoints[breakpointKey];
+            if (!breakpoint)
+                continue;
+            cssChunks.push(css `
+                ${breakpoint.belowMediaQuery} {
+                    ${options.styleSelector(variantName)} {
+                        ${declarations.join(";\n")}
+                    }
+                }
+            `);
+        }
+        for (const [breakpointKey, declarations] of spacingOverrides) {
+            const breakpoint = theme.breakpoints[breakpointKey];
+            if (!breakpoint)
+                continue;
+            cssChunks.push(css `
+                ${breakpoint.belowMediaQuery} {
+                    ${options.spacingSelector(variantName)} {
+                        ${declarations.join(";\n")}
+                    }
+                }
+            `);
+        }
+    }
+    return cssChunks.join("\n");
+}