@dextinity/mail-react 2.0.0-canary-20260729062014

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

@@ -0,0 +1,10 @@
+import type { Theme } from "../../theme/themeTypes.js";
+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,24 @@
+import { generateResponsiveVariantCss } from "../../styles/generateResponsiveVariantCss.js";
+const textStyleProperties = [
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "fontStyle",
+    "lineHeight",
+    "letterSpacing",
+    "textDecoration",
+    "textTransform",
+    "color",
+];
+const spacingProperties = [{ themeKey: "bottomSpacing", cssProperties: "padding-bottom" }];
+/** Generates responsive CSS media queries for text variant overrides. */
+export function generateResponsiveTextCss(theme, options) {
+    return generateResponsiveVariantCss({
+        breakpoints: theme.breakpoints,
+        variants: theme.text.variants,
+        groups: [
+            { selector: options.styleSelector, properties: textStyleProperties },
+            { selector: options.spacingSelector, properties: spacingProperties },
+        ],
+    });
+}

package/lib/components/wrapper/InsideMjmlWrapperContext.d.ts

@@ -0,0 +1,3 @@
+export declare const InsideMjmlWrapperContext: import("react").Context<boolean>;
+/** Returns `true` when rendered inside a custom `MjmlWrapper` subtree. Internal use only. */
+export declare function useIsInsideMjmlWrapper(): boolean;

package/lib/components/wrapper/InsideMjmlWrapperContext.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+export const InsideMjmlWrapperContext = createContext(false);
+/** Returns `true` when rendered inside a custom `MjmlWrapper` subtree. Internal use only. */
+export function useIsInsideMjmlWrapper() {
+    return useContext(InsideMjmlWrapperContext);
+}

package/lib/components/wrapper/MjmlWrapper.d.ts

@@ -0,0 +1,14 @@
+import { type IMjmlWrapperProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+export type MjmlWrapperProps = Omit<IMjmlWrapperProps, "backgroundColor"> & {
+    /**
+     * Background color of the wrapper.
+     *
+     * @defaultValue The theme's `colors.background.content`
+     */
+    backgroundColor?: IMjmlWrapperProps["backgroundColor"];
+};
+/**
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of `MjmlBody`.
+ */
+export declare function MjmlWrapper({ children, ...restProps }: MjmlWrapperProps): ReactNode;

package/lib/components/wrapper/MjmlWrapper.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlWrapper as BaseMjmlWrapper } from "@faire/mjml-react";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { InsideMjmlWrapperContext } from "./InsideMjmlWrapperContext.js";
+/**
+ * A wrapper that groups multiple sections sharing a background. Must be a direct child of `MjmlBody`.
+ */
+export function MjmlWrapper({ children, ...restProps }) {
+    const theme = useOptionalTheme();
+    const themeBackgroundProps = theme ? { backgroundColor: theme.colors.background.content } : {};
+    return (_jsx(BaseMjmlWrapper, { ...themeBackgroundProps, ...restProps, children: _jsx(InsideMjmlWrapperContext.Provider, { value: true, children: children }) }));
+}

package/lib/config/ConfigProvider.d.ts

@@ -0,0 +1,43 @@
+import { type PropsWithChildren, type ReactNode } from "react";
+export interface PixelImageBlockConfig {
+    /**
+     * Image widths supported by the API, used to pick a render width.
+     * Generally derived from `cometConfig.images.imageSizes` and `cometConfig.images.deviceSizes`.
+     */
+    validSizes: number[];
+    /**
+     * Origin to prefix relative image URLs with, e.g. `http://localhost:3000`.
+     */
+    baseUrl: string;
+}
+/**
+ * Configuration context for mails.
+ *
+ * Add custom keys via TypeScript interface declaration merging:
+ *
+ * ```ts
+ * declare module "@dextinity/mail-react" {
+ *     interface Config {
+ *         myKey?: { foo: string };
+ *     }
+ * }
+ * ```
+ */
+export interface Config {
+    /**
+     * Configuration consumed by `HtmlPixelImageBlock` and `MjmlPixelImageBlock`.
+     * Required when those components are rendered.
+     */
+    pixelImageBlock?: PixelImageBlockConfig;
+}
+/**
+ * Places a `Config` value into a React context, making it available to all
+ * descendants via `useConfig`.
+ */
+export declare function ConfigProvider({ config, children }: PropsWithChildren<{
+    config: Config;
+}>): ReactNode;
+/**
+ * Returns the nearest `Config` from context, defined by `ConfigProvider` or by the `config` prop on `MjmlMailRoot`.
+ */
+export declare function useConfig(): Config;

package/lib/config/ConfigProvider.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ConfigContext = createContext({});
+/**
+ * Places a `Config` value into a React context, making it available to all
+ * descendants via `useConfig`.
+ */
+export function ConfigProvider({ config, children }) {
+    return _jsx(ConfigContext.Provider, { value: config, children: children });
+}
+/**
+ * Returns the nearest `Config` from context, defined by `ConfigProvider` or by the `config` prop on `MjmlMailRoot`.
+ */
+export function useConfig() {
+    return useContext(ConfigContext);
+}

package/lib/index.d.ts

@@ -0,0 +1,47 @@
+export { BlocksBlock } from "./blocks/factories/BlocksBlock.js";
+export { ListBlock } from "./blocks/factories/ListBlock.js";
+export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
+export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
+export type { SupportedBlocks } from "./blocks/factories/types.js";
+export type { PropsWithData } from "./blocks/helpers/PropsWithData.js";
+export type { HtmlPixelImageBlockProps } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export type { MjmlPixelImageBlockProps } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export type { CreateRichTextBlockOptions, RichTextBlockProps } from "./blocks/richText/common.js";
+export { createRichTextBlock } from "./blocks/richText/createRichTextBlock.js";
+export type { HtmlButtonProps } from "./components/button/HtmlButton.js";
+export { HtmlButton } from "./components/button/HtmlButton.js";
+export type { MjmlButtonProps } from "./components/button/MjmlButton.js";
+export { MjmlButton } from "./components/button/MjmlButton.js";
+export type { HtmlDividerProps } from "./components/divider/HtmlDivider.js";
+export { HtmlDivider } from "./components/divider/HtmlDivider.js";
+export type { MjmlDividerProps } from "./components/divider/MjmlDivider.js";
+export { MjmlDivider } from "./components/divider/MjmlDivider.js";
+export type { HtmlImageProps } from "./components/image/HtmlImage.js";
+export { HtmlImage } from "./components/image/HtmlImage.js";
+export type { MjmlImageProps } from "./components/image/MjmlImage.js";
+export { MjmlImage } from "./components/image/MjmlImage.js";
+export type { HtmlInlineLinkProps } from "./components/inlineLink/HtmlInlineLink.js";
+export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
+export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
+export type { MjmlSectionProps } from "./components/section/MjmlSection.js";
+export { MjmlSection } from "./components/section/MjmlSection.js";
+export type { HtmlTextProps } from "./components/text/HtmlText.js";
+export { HtmlText } from "./components/text/HtmlText.js";
+export type { MjmlTextProps } from "./components/text/MjmlText.js";
+export { MjmlText } from "./components/text/MjmlText.js";
+export type { MjmlWrapperProps } from "./components/wrapper/MjmlWrapper.js";
+export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
+export { type Config, ConfigProvider, type PixelImageBlockConfig, useConfig } from "./config/ConfigProvider.js";
+export { registerStyles } from "./styles/registerStyles.js";
+export { createBreakpoint } from "./theme/createBreakpoint.js";
+export { createTheme } from "./theme/createTheme.js";
+export type { ResponsiveValue } from "./theme/responsiveValue.js";
+export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
+export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
+export type { ButtonStyles, ButtonVariants, ButtonVariantStyles, DividerStyles, DividerVariants, DividerVariantStyles, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeSizes, ThemeText, } from "./theme/themeTypes.js";
+export { css } from "./utils/css.js";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, type IMjmlAccordionElementProps as MjmlAccordionElementProps, type IMjmlAccordionProps as MjmlAccordionProps, MjmlAccordionText, type IMjmlAccordionTextProps as MjmlAccordionTextProps, MjmlAccordionTitle, type IMjmlAccordionTitleProps as MjmlAccordionTitleProps, MjmlAll, type IMjmlAllProps as MjmlAllProps, MjmlAttributes, type IMjmlAttributesProps as MjmlAttributesProps, MjmlBody, type IMjmlBodyProps as MjmlBodyProps, MjmlBreakpoint, type IMjmlBreakpointProps as MjmlBreakpointProps, MjmlCarousel, MjmlCarouselImage, type IMjmlCarouselImageProps as MjmlCarouselImageProps, type IMjmlCarouselProps as MjmlCarouselProps, MjmlClass, type IMjmlClassProps as MjmlClassProps, MjmlColumn, type IMjmlColumnProps as MjmlColumnProps, MjmlFont, type IMjmlFontProps as MjmlFontProps, MjmlGroup, type IMjmlGroupProps as MjmlGroupProps, MjmlHead, type IMjmlHeadProps as MjmlHeadProps, MjmlHero, type IMjmlHeroProps as MjmlHeroProps, MjmlHtmlAttribute, type IMjmlHtmlAttributeProps as MjmlHtmlAttributeProps, MjmlHtmlAttributes, type IMjmlHtmlAttributesProps as MjmlHtmlAttributesProps, MjmlInclude, type IMjmlIncludeProps as MjmlIncludeProps, MjmlNavbar, MjmlNavbarLink, type IMjmlNavbarLinkProps as MjmlNavbarLinkProps, type IMjmlNavbarProps as MjmlNavbarProps, MjmlPreview, type IMjmlPreviewProps as MjmlPreviewProps, type IMjmlProps as MjmlProps, MjmlRaw, type IMjmlRawProps as MjmlRawProps, MjmlSelector, type IMjmlSelectorProps as MjmlSelectorProps, MjmlSocial, MjmlSocialElement, type IMjmlSocialElementProps as MjmlSocialElementProps, type IMjmlSocialProps as MjmlSocialProps, MjmlSpacer, type IMjmlSpacerProps as MjmlSpacerProps, MjmlStyle, type IMjmlStyleProps as MjmlStyleProps, MjmlTable, type IMjmlTableProps as MjmlTableProps, MjmlTitle, type IMjmlTitleProps as MjmlTitleProps, } from "@faire/mjml-react";
+export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
+export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/index.js

@@ -0,0 +1,29 @@
+export { BlocksBlock } from "./blocks/factories/BlocksBlock.js";
+export { ListBlock } from "./blocks/factories/ListBlock.js";
+export { OneOfBlock } from "./blocks/factories/OneOfBlock.js";
+export { OptionalBlock } from "./blocks/factories/OptionalBlock.js";
+export { HtmlPixelImageBlock } from "./blocks/pixelImage/HtmlPixelImageBlock.js";
+export { MjmlPixelImageBlock } from "./blocks/pixelImage/MjmlPixelImageBlock.js";
+export { createRichTextBlock } from "./blocks/richText/createRichTextBlock.js";
+export { HtmlButton } from "./components/button/HtmlButton.js";
+export { MjmlButton } from "./components/button/MjmlButton.js";
+export { HtmlDivider } from "./components/divider/HtmlDivider.js";
+export { MjmlDivider } from "./components/divider/MjmlDivider.js";
+export { HtmlImage } from "./components/image/HtmlImage.js";
+export { MjmlImage } from "./components/image/MjmlImage.js";
+export { HtmlInlineLink } from "./components/inlineLink/HtmlInlineLink.js";
+export { MjmlMailRoot } from "./components/mailRoot/MjmlMailRoot.js";
+export { MjmlSection } from "./components/section/MjmlSection.js";
+export { HtmlText } from "./components/text/HtmlText.js";
+export { MjmlText } from "./components/text/MjmlText.js";
+export { MjmlWrapper } from "./components/wrapper/MjmlWrapper.js";
+export { ConfigProvider, useConfig } from "./config/ConfigProvider.js";
+export { registerStyles } from "./styles/registerStyles.js";
+export { createBreakpoint } from "./theme/createBreakpoint.js";
+export { createTheme } from "./theme/createTheme.js";
+export { getDefaultFromResponsiveValue, getResponsiveOverrides } from "./theme/responsiveValue.js";
+export { ThemeProvider, useTheme } from "./theme/ThemeProvider.js";
+export { css } from "./utils/css.js";
+export { Mjml, MjmlAccordion, MjmlAccordionElement, MjmlAccordionText, MjmlAccordionTitle, MjmlAll, MjmlAttributes, MjmlBody, MjmlBreakpoint, MjmlCarousel, MjmlCarouselImage, MjmlClass, MjmlColumn, MjmlFont, MjmlGroup, MjmlHead, MjmlHero, MjmlHtmlAttribute, MjmlHtmlAttributes, MjmlInclude, MjmlNavbar, MjmlNavbarLink, MjmlPreview, MjmlRaw, MjmlSelector, MjmlSocial, MjmlSocialElement, MjmlSpacer, MjmlStyle, MjmlTable, MjmlTitle, } from "@faire/mjml-react";
+export { MjmlComment, MjmlConditionalComment, MjmlHtml, MjmlTrackingPixel, MjmlYahooStyle } from "@faire/mjml-react/extensions/index.js";
+export { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";

package/lib/server/index.d.ts

@@ -0,0 +1 @@
+export { renderMailHtml } from "./renderMailHtml.js";

package/lib/server/index.js

@@ -0,0 +1 @@
+export { renderMailHtml } from "./renderMailHtml.js";

package/lib/server/renderMailHtml.d.ts

@@ -0,0 +1,9 @@
+import mjml2html from "mjml";
+import type { ReactElement } from "react";
+type MjmlOptions = Parameters<typeof mjml2html>[1];
+type MjmlWarning = ReturnType<typeof mjml2html>["errors"][number];
+export declare function renderMailHtml(element: ReactElement, options?: MjmlOptions): {
+    html: string;
+    mjmlWarnings: MjmlWarning[];
+};
+export {};

package/lib/server/renderMailHtml.js

@@ -0,0 +1,7 @@
+import { renderToMjml } from "@faire/mjml-react/utils/renderToMjml.js";
+import mjml2html from "mjml";
+export function renderMailHtml(element, options) {
+    const mjmlString = renderToMjml(element);
+    const { html, errors: mjmlWarnings } = mjml2html(mjmlString, { validationLevel: "soft", ...options });
+    return { html, mjmlWarnings };
+}

package/lib/storybook/CopyMailHtmlButton.d.ts

@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React from "react";
+export declare function CopyMailHtmlButton(): React.JSX.Element;

package/lib/storybook/CopyMailHtmlButton.js

@@ -0,0 +1,33 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "storybook/internal/components";
+import { useChannel } from "storybook/manager-api";
+const RENDER_RESULT_EVENT = "comet-mail-render-result";
+export function CopyMailHtmlButton() {
+    const htmlRef = useRef("");
+    const [copied, setCopied] = useState(false);
+    const copiedTimeoutRef = useRef(undefined);
+    useChannel({
+        [RENDER_RESULT_EVENT]: ({ html }) => {
+            htmlRef.current = html;
+            setCopied(false);
+        },
+    });
+    useEffect(() => {
+        return () => {
+            if (copiedTimeoutRef.current) {
+                clearTimeout(copiedTimeoutRef.current);
+            }
+        };
+    }, []);
+    const handleClick = useCallback(async () => {
+        await navigator.clipboard.writeText(htmlRef.current);
+        setCopied(true);
+        if (copiedTimeoutRef.current) {
+            clearTimeout(copiedTimeoutRef.current);
+        }
+        copiedTimeoutRef.current = setTimeout(() => setCopied(false), 2000);
+    }, []);
+    return (React.createElement(Button, { size: "small", onClick: handleClick }, copied ? "Copied to clipboard!" : "Copy Mail HTML"));
+}

package/lib/storybook/MailRendererDecorator.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from "../theme/themeTypes.js";
+export declare function MailRendererDecorator(Story: () => React.JSX.Element, context: {
+    parameters: {
+        mailRoot?: boolean;
+        theme?: Theme;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/lib/storybook/MailRendererDecorator.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useChannel, useGlobals } from "storybook/preview-api";
+import { renderMailHtml } from "../client/renderMailHtml.js";
+import { MjmlMailRoot } from "../components/mailRoot/MjmlMailRoot.js";
+import { replaceImagesWithPublicUrl } from "./replaceImagesWithPublicUrl.js";
+const RENDER_RESULT_EVENT = "comet-mail-render-result";
+export function MailRendererDecorator(Story, context) {
+    const [globals] = useGlobals();
+    const emit = useChannel({});
+    const { html: rawHtml, mjmlWarnings } = renderMailHtml(context.parameters.mailRoot === false ? (_jsx(Story, {})) : (_jsx(MjmlMailRoot, { theme: context.parameters.theme, children: _jsx(Story, {}) })));
+    for (const warning of mjmlWarnings) {
+        console.warn("MJML warning:", warning);
+    }
+    const html = globals.usePublicImageUrls ? replaceImagesWithPublicUrl(rawHtml) : rawHtml;
+    emit(RENDER_RESULT_EVENT, { html, mjmlWarnings });
+    return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
+}

package/lib/storybook/MjmlWarningsPanel.d.ts

@@ -0,0 +1,7 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React from "react";
+export declare function MjmlWarningsPanel({ active }: {
+    active: boolean;
+}): React.JSX.Element;
+export declare function MjmlWarningsPanelTitle(): React.JSX.Element;

package/lib/storybook/MjmlWarningsPanel.js

@@ -0,0 +1,33 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React, { useState } from "react";
+import { AddonPanel, Badge } from "storybook/internal/components";
+import { useChannel } from "storybook/manager-api";
+const RENDER_RESULT_EVENT = "comet-mail-render-result";
+export function MjmlWarningsPanel({ active }) {
+    const [renderResult, setRenderResult] = useState(null);
+    useChannel({
+        [RENDER_RESULT_EVENT]: (result) => {
+            setRenderResult(result);
+        },
+    });
+    return (React.createElement(AddonPanel, { active: active }, renderResult && (React.createElement("div", { style: { padding: 16 } }, renderResult.mjmlWarnings.length === 0 ? (React.createElement("p", { style: { color: "green" } }, "\u2713 No MJML warnings")) : (React.createElement("ul", { style: { margin: 0, padding: 0, listStyle: "none" } }, renderResult.mjmlWarnings.map((warning, index) => (React.createElement("li", { key: index, style: { marginBottom: 8 } },
+        React.createElement("strong", null, warning.tagName),
+        " (line ",
+        warning.line,
+        "): ",
+        warning.message)))))))));
+}
+export function MjmlWarningsPanelTitle() {
+    const [renderResult, setRenderResult] = useState(null);
+    useChannel({
+        [RENDER_RESULT_EVENT]: (result) => {
+            setRenderResult(result);
+        },
+    });
+    const warningCount = renderResult?.mjmlWarnings.length ?? 0;
+    const hasWarnings = warningCount > 0;
+    return (React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } },
+        React.createElement("span", null, "MJML Warnings"),
+        React.createElement(Badge, { compact: true, status: hasWarnings ? "negative" : "positive" }, hasWarnings ? warningCount : "✓")));
+}

package/lib/storybook/UsePublicImageUrlsToggle.d.ts

@@ -0,0 +1,4 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React from "react";
+export declare function UsePublicImageUrlsToggle(): React.JSX.Element;

package/lib/storybook/UsePublicImageUrlsToggle.js

@@ -0,0 +1,14 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React from "react";
+import { IconButton, TooltipNote, WithTooltip } from "storybook/internal/components";
+import { useGlobals } from "storybook/manager-api";
+export function UsePublicImageUrlsToggle() {
+    const [globals, updateGlobals] = useGlobals();
+    const isActive = Boolean(globals.usePublicImageUrls);
+    return (React.createElement(WithTooltip, { tooltip: React.createElement(TooltipNote, { note: "Helpful to test with real images on external devices that cannot access localhost, e.g. Email on Acid." }), trigger: "hover" },
+        React.createElement(IconButton, { size: "small", active: isActive, onClick: () => updateGlobals({ usePublicImageUrls: !isActive }) },
+            React.createElement("input", { type: "checkbox", checked: isActive, readOnly: true, style: { pointerEvents: "none", marginLeft: 4 } }),
+            "Use public image URLs",
+            React.createElement("span", { role: "img", "aria-label": "info" }, "\u2139\uFE0F"))));
+}

package/lib/storybook/index.d.ts

@@ -0,0 +1,2 @@
+export declare function managerEntries(existing?: string[]): string[];
+export declare function previewAnnotations(input?: string[]): string[];

package/lib/storybook/index.js

@@ -0,0 +1,9 @@
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+const directoryOfThisFile = dirname(fileURLToPath(import.meta.url));
+export function managerEntries(existing = []) {
+    return [...existing, resolve(directoryOfThisFile, "manager.js")];
+}
+export function previewAnnotations(input = []) {
+    return [...input, resolve(directoryOfThisFile, "preview.js")];
+}

package/lib/storybook/manager.d.ts

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

package/lib/storybook/manager.js

@@ -0,0 +1,25 @@
+/** @jsxRuntime classic */
+/** @jsx React.createElement */
+import React from "react";
+import { addons, types } from "storybook/manager-api";
+import { CopyMailHtmlButton } from "./CopyMailHtmlButton.js";
+import { MjmlWarningsPanel, MjmlWarningsPanelTitle } from "./MjmlWarningsPanel.js";
+import { UsePublicImageUrlsToggle } from "./UsePublicImageUrlsToggle.js";
+const ADDON_ID = "comet-mail-react";
+addons.register(ADDON_ID, () => {
+    addons.add(`${ADDON_ID}/copy-html`, {
+        type: types.TOOL,
+        title: "Copy Mail HTML",
+        render: () => React.createElement(CopyMailHtmlButton, null),
+    });
+    addons.add(`${ADDON_ID}/public-urls`, {
+        type: types.TOOL,
+        title: "Use public image URLs",
+        render: () => React.createElement(UsePublicImageUrlsToggle, null),
+    });
+    addons.add(`${ADDON_ID}/mjml-warnings`, {
+        type: types.PANEL,
+        title: () => React.createElement(MjmlWarningsPanelTitle, null),
+        render: ({ active }) => React.createElement(MjmlWarningsPanel, { active: Boolean(active) }),
+    });
+});

package/lib/storybook/preview.d.ts

@@ -0,0 +1,39 @@
+import { MailRendererDecorator } from "./MailRendererDecorator.js";
+export declare const decorators: (typeof MailRendererDecorator)[];
+export declare const initialGlobals: {
+    usePublicImageUrls: boolean;
+};
+export declare const parameters: {
+    viewport: {
+        options: {
+            mobile: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            tablet: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            emailWidth: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+            desktop: {
+                name: string;
+                styles: {
+                    width: string;
+                    height: string;
+                };
+            };
+        };
+    };
+};

package/lib/storybook/preview.js

@@ -0,0 +1,27 @@
+import { MailRendererDecorator } from "./MailRendererDecorator.js";
+export const decorators = [MailRendererDecorator];
+export const initialGlobals = {
+    usePublicImageUrls: false,
+};
+export const parameters = {
+    viewport: {
+        options: {
+            mobile: {
+                name: "Mobile (375px)",
+                styles: { width: "375px", height: "1024px" },
+            },
+            tablet: {
+                name: "Tablet (500px)",
+                styles: { width: "500px", height: "1024px" },
+            },
+            emailWidth: {
+                name: "Email max-width (600px)",
+                styles: { width: "600px", height: "1024px" },
+            },
+            desktop: {
+                name: "Desktop (768px)",
+                styles: { width: "768px", height: "1024px" },
+            },
+        },
+    },
+};

package/lib/storybook/replaceImagesWithPublicUrl.d.ts

@@ -0,0 +1 @@
+export declare function replaceImagesWithPublicUrl(html: string): string;

package/lib/storybook/replaceImagesWithPublicUrl.js

@@ -0,0 +1,15 @@
+export function replaceImagesWithPublicUrl(html) {
+    let seedCounter = 0;
+    return html.replace(/<img\b[^>]*>/gi, (imgTag) => {
+        const widthMatch = imgTag.match(/\bwidth="(\d+)"/);
+        const heightMatch = imgTag.match(/\bheight="(\d+)"/);
+        if (!widthMatch || !heightMatch) {
+            return imgTag;
+        }
+        const retinaWidth = parseInt(widthMatch[1], 10) * 2;
+        const retinaHeight = parseInt(heightMatch[1], 10) * 2;
+        const seed = seedCounter++;
+        const publicUrl = `https://picsum.photos/seed/${seed}/${retinaWidth}/${retinaHeight}`;
+        return imgTag.replace(/\bsrc="[^"]*"/, `src="${publicUrl}"`);
+    });
+}

package/lib/styles/Styles.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+/**
+ * Internal component that iterates the styles registry and renders one
+ * `<MjmlStyle>` element per entry.
+ */
+export declare function Styles(): ReactNode;

package/lib/styles/Styles.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { MjmlStyle } from "@faire/mjml-react";
+import { useTheme } from "../theme/ThemeProvider.js";
+import { getRegisteredStyles } from "./registerStyles.js";
+/**
+ * Internal component that iterates the styles registry and renders one
+ * `<MjmlStyle>` element per entry.
+ */
+export function Styles() {
+    const theme = useTheme();
+    const entries = Array.from(getRegisteredStyles().values());
+    return (_jsx(_Fragment, { children: entries.map((entry, index) => {
+            const cssString = typeof entry.styles === "function" ? entry.styles(theme) : entry.styles;
+            return (_jsx(MjmlStyle, { ...entry.mjmlStyleProps, children: cssString }, index));
+        }) }));
+}

package/lib/styles/generateResponsiveVariantCss.d.ts

@@ -0,0 +1,26 @@
+import { type ResponsiveValue } from "../theme/responsiveValue.js";
+import type { ThemeBreakpoints } from "../theme/themeTypes.js";
+type VariantStylesConstraint = Record<string, ResponsiveValue<string | number> | undefined>;
+export interface ResponsiveVariantProperty<TVariantStyles> {
+    themeKey: keyof TVariantStyles;
+    /** CSS property name(s); defaults to the kebab-case form of `themeKey`. */
+    cssProperties?: string | readonly string[];
+    unit?: string;
+}
+/** A variant property is either a bare theme key (CSS name derived) or a descriptor for the exceptions. */
+export type ResponsiveVariantProperties<TVariantStyles> = ReadonlyArray<keyof TVariantStyles | ResponsiveVariantProperty<TVariantStyles>>;
+interface ResponsiveVariantGroup<TVariantStyles> {
+    selector: (variantName: string) => string;
+    properties: ResponsiveVariantProperties<TVariantStyles>;
+}
+interface GenerateResponsiveVariantCssOptions<TVariantStyles> {
+    breakpoints: ThemeBreakpoints;
+    variants: Record<string, TVariantStyles | undefined> | undefined;
+    groups: ReadonlyArray<ResponsiveVariantGroup<TVariantStyles>>;
+}
+/**
+ * Generates `max-width` media-query CSS for a themed component's variant overrides.
+ * Returns an empty string when no variant has breakpoint overrides.
+ */
+export declare function generateResponsiveVariantCss<TVariantStyles extends VariantStylesConstraint>({ breakpoints, variants, groups, }: GenerateResponsiveVariantCssOptions<TVariantStyles>): string;
+export {};

package/lib/styles/generateResponsiveVariantCss.js

@@ -0,0 +1,66 @@
+import { getResponsiveOverrides } from "../theme/responsiveValue.js";
+import { css } from "../utils/css.js";
+const toKebabCase = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+/**
+ * Generates `max-width` media-query CSS for a themed component's variant overrides.
+ * Returns an empty string when no variant has breakpoint overrides.
+ */
+export function generateResponsiveVariantCss({ breakpoints, variants, groups, }) {
+    if (!variants) {
+        return "";
+    }
+    const cssChunks = [];
+    for (const [variantName, variantStyles] of Object.entries(variants)) {
+        if (!variantStyles) {
+            continue;
+        }
+        for (const group of groups) {
+            const overridesByBreakpoint = collectOverridesByBreakpoint(variantStyles, group.properties);
+            cssChunks.push(renderMediaQueries({ breakpoints, selector: group.selector(variantName), overridesByBreakpoint }));
+        }
+    }
+    return cssChunks.filter(Boolean).join("\n");
+}
+function collectOverridesByBreakpoint(variantStyles, properties) {
+    const overridesByBreakpoint = new Map();
+    for (const entry of properties) {
+        const property = typeof entry === "object" ? entry : { themeKey: entry };
+        const value = variantStyles[property.themeKey];
+        if (value === undefined) {
+            continue;
+        }
+        const cssProperties = resolveCssProperties(property);
+        for (const { breakpointKey, value: breakpointValue } of getResponsiveOverrides(value)) {
+            const declarations = overridesByBreakpoint.get(breakpointKey) ?? [];
+            for (const cssProperty of cssProperties) {
+                declarations.push(formatDeclaration({ cssProperty, value: breakpointValue, unit: property.unit }));
+            }
+            overridesByBreakpoint.set(breakpointKey, declarations);
+        }
+    }
+    return overridesByBreakpoint;
+}
+function resolveCssProperties(property) {
+    const cssProperties = property.cssProperties ?? toKebabCase(String(property.themeKey));
+    return typeof cssProperties === "string" ? [cssProperties] : cssProperties;
+}
+function formatDeclaration({ cssProperty, value, unit }) {
+    return `${cssProperty}: ${String(value)}${unit ?? ""} !important`;
+}
+function renderMediaQueries({ breakpoints, selector, overridesByBreakpoint, }) {
+    const cssChunks = [];
+    for (const [breakpointKey, declarations] of overridesByBreakpoint) {
+        const breakpoint = breakpoints[breakpointKey];
+        if (!breakpoint) {
+            continue;
+        }
+        cssChunks.push(css `
+            ${breakpoint.belowMediaQuery} {
+                ${selector} {
+                    ${declarations.join(";\n")}
+                }
+            }
+        `);
+    }
+    return cssChunks.join("\n");
+}