@dextinity/mail-react 2.0.0-canary-20260729062014

package/lib/blocks/richText/createRichTextBlock.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import redraftImport from "redraft";
+import { HtmlText } from "../../components/text/HtmlText.js";
+import { MjmlText } from "../../components/text/MjmlText.js";
+import { builtInLinkTypes, createRichTextRenderers } from "./createRichTextRenderers.js";
+// redraft is CommonJS-only: under native ESM the default import is the whole
+// `module.exports` object, under bundlers it is the render function itself.
+const redraft = typeof redraftImport === "function" ? redraftImport : redraftImport.default;
+function MjmlBlockText({ bottomSpacing, variant, className, fontWeight, children, ...styleProps }) {
+    return (_jsx(MjmlText, { variant: variant, bottomSpacing: bottomSpacing, className: clsx("richTextBlock__text", className), ...(fontWeight !== undefined && { fontWeight: String(fontWeight) }), ...styleProps, children: children }));
+}
+function HtmlBlockText({ bottomSpacing, variant, className, children, ...styleProps }) {
+    return (_jsx(HtmlText, { element: "div", variant: variant, bottomSpacing: bottomSpacing, className: clsx("richTextBlock__text", className), style: styleProps, children: children }));
+}
+function isDraftBlock(block) {
+    if (typeof block !== "object" || block === null || !("key" in block) || !("text" in block)) {
+        return false;
+    }
+    const { key, text } = block;
+    return typeof key === "string" && typeof text === "string";
+}
+function isDraftContent(draftContent) {
+    if (typeof draftContent !== "object" || draftContent === null || !("blocks" in draftContent)) {
+        return false;
+    }
+    const { blocks } = draftContent;
+    return Array.isArray(blocks) && blocks.every(isDraftBlock);
+}
+function renderRichTextContent({ draftContent, blockTypes, linkTypes, inline, blockTextComponent }) {
+    if (!isDraftContent(draftContent)) {
+        return null;
+    }
+    const blocksWithText = draftContent.blocks.filter((block) => block.text !== "");
+    const lastBlockKey = blocksWithText[blocksWithText.length - 1]?.key;
+    if (lastBlockKey === undefined) {
+        return null;
+    }
+    const renderers = createRichTextRenderers({ blockTypes, linkTypes, inline, blockTextComponent, lastBlockKey });
+    return redraft({ ...draftContent, blocks: blocksWithText }, renderers);
+}
+/**
+ * Creates a pair of rich-text block components that render CMS RichText block
+ * data (draft-js raw content) as themed text.
+ *
+ * Call the factory once per configuration — at the top level of a file, not
+ * inside a component — and reuse the returned components. Call it again for
+ * differently-configured rich-text blocks (e.g. a generic and a headline-only
+ * one).
+ *
+ * `MjmlRichTextBlock` renders each draft block as `MjmlText` and must be
+ * placed within an `MjmlColumn`. `HtmlRichTextBlock` renders each draft block
+ * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`).
+ *
+ * ```ts
+ * export const { MjmlRichTextBlock, HtmlRichTextBlock } = createRichTextBlock({
+ *     blockTypes: {
+ *         "header-one": { variant: "heading1" },
+ *         "paragraph-standard": { variant: "body" },
+ *     },
+ * });
+ * ```
+ */
+export function createRichTextBlock(options = {}) {
+    const blockTypes = options.blockTypes ?? {};
+    const linkTypes = {
+        ...builtInLinkTypes,
+        // Consumers declare each resolver's props via the typed map, but at
+        // runtime they are unknown draft-js data. This one contained cast lets
+        // consumers work typed without casting in their own resolvers.
+        ...options.linkTypes,
+    };
+    const inline = options.inline ?? {};
+    function MjmlRichTextBlock({ data }) {
+        return renderRichTextContent({ draftContent: data.draftContent, blockTypes, linkTypes, inline, blockTextComponent: MjmlBlockText });
+    }
+    function HtmlRichTextBlock({ data }) {
+        return renderRichTextContent({ draftContent: data.draftContent, blockTypes, linkTypes, inline, blockTextComponent: HtmlBlockText });
+    }
+    return { MjmlRichTextBlock, HtmlRichTextBlock };
+}

package/lib/blocks/richText/createRichTextRenderers.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import type { Renderers } from "redraft";
+import type { RichTextBlockTypeProps, RichTextInlineRenderer, RichTextLinkHrefResolver } from "./common.js";
+export type BlockTextProps = PropsWithChildren<RichTextBlockTypeProps & {
+    /** Whether the theme's spacing below the text applies — set for every draft block except the last. */
+    bottomSpacing: boolean;
+}>;
+export declare const builtInLinkTypes: Record<string, RichTextLinkHrefResolver>;
+interface CreateRichTextRenderersOptions {
+    blockTypes: Record<string, RichTextBlockTypeProps>;
+    linkTypes: Record<string, RichTextLinkHrefResolver>;
+    inline: Record<string, RichTextInlineRenderer>;
+    blockTextComponent: ComponentType<BlockTextProps>;
+    lastBlockKey: string;
+}
+export declare function createRichTextRenderers({ blockTypes, linkTypes, inline, blockTextComponent, lastBlockKey, }: CreateRichTextRenderersOptions): Renderers;
+export {};

package/lib/blocks/richText/createRichTextRenderers.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HtmlInlineLink } from "../../components/inlineLink/HtmlInlineLink.js";
+const inlineStyleRenderers = {
+    // The explicit styles back up the semantic tags in rendering engines that don't apply their default styling.
+    BOLD: (children, { key }) => (_jsx("strong", { style: { fontWeight: "bold" }, children: children }, key)),
+    ITALIC: (children, { key }) => (_jsx("em", { style: { fontStyle: "italic" }, children: children }, key)),
+    SUB: (children, { key }) => _jsx("sub", { children: children }, key),
+    SUP: (children, { key }) => _jsx("sup", { children: children }, key),
+    STRIKETHROUGH: (children, { key }) => _jsx("s", { children: children }, key),
+};
+function resolveExternalLinkHref(props) {
+    if (typeof props !== "object" || props === null || !("targetUrl" in props)) {
+        return undefined;
+    }
+    const { targetUrl } = props;
+    return typeof targetUrl === "string" ? targetUrl : undefined;
+}
+export const builtInLinkTypes = {
+    external: resolveExternalLinkHref,
+};
+function getLinkBlock(entityData) {
+    if (typeof entityData !== "object" || entityData === null || !("block" in entityData)) {
+        return undefined;
+    }
+    const { block } = entityData;
+    if (typeof block !== "object" || block === null || !("type" in block) || !("props" in block)) {
+        return undefined;
+    }
+    const { type, props } = block;
+    return typeof type === "string" ? { type, props } : undefined;
+}
+function renderWithLineBreaks(node) {
+    if (typeof node === "string" && node.includes("\n")) {
+        const lines = node.split("\n");
+        return lines.flatMap((line, index) => (index === 0 ? [line] : [_jsx("br", {}, index), line]));
+    }
+    if (Array.isArray(node)) {
+        return node.map((child) => renderWithLineBreaks(child));
+    }
+    return node;
+}
+function createTextBlockRenderFn({ blockTextComponent: BlockText, blockTypeProps, lastBlockKey }) {
+    return (children, { keys }) => children.map((child, index) => (_jsx(BlockText, { bottomSpacing: keys[index] !== lastBlockKey, ...blockTypeProps, children: renderWithLineBreaks(child) }, keys[index])));
+}
+function createListBlockRenderFn({ listElement: ListElement, blockTextComponent: BlockText, blockTypeProps, lastBlockKey, }) {
+    return (children, { keys }) => (_jsx(BlockText, { bottomSpacing: !keys.includes(lastBlockKey), ...blockTypeProps, children: _jsx(ListElement, { className: "richTextBlock__list", style: { marginTop: 0, marginBottom: 0 }, children: children.map((child, index) => (_jsx("li", { className: "richTextBlock__listItem", children: renderWithLineBreaks(child) }, keys[index]))) }) }, keys.join("-")));
+}
+const listBlockTypes = ["unordered-list-item", "ordered-list-item"];
+export function createRichTextRenderers({ blockTypes, linkTypes, inline, blockTextComponent, lastBlockKey, }) {
+    const blocks = {};
+    // "unstyled" is redraft's blockFallback: registering it makes every block type the caller did not configure render with base theme styles.
+    for (const blockType of new Set(["unstyled", ...Object.keys(blockTypes)])) {
+        if (listBlockTypes.includes(blockType)) {
+            continue;
+        }
+        blocks[blockType] = createTextBlockRenderFn({ blockTextComponent, blockTypeProps: blockTypes[blockType] ?? {}, lastBlockKey });
+    }
+    for (const listBlockType of listBlockTypes) {
+        blocks[listBlockType] = createListBlockRenderFn({
+            listElement: listBlockType === "unordered-list-item" ? "ul" : "ol",
+            blockTextComponent,
+            blockTypeProps: blockTypes[listBlockType] ?? {},
+            lastBlockKey,
+        });
+    }
+    return {
+        inline: { ...inlineStyleRenderers, ...inline },
+        blocks,
+        entities: {
+            LINK: (children, data, { key }) => {
+                const linkBlock = getLinkBlock(data);
+                if (linkBlock === undefined) {
+                    return children;
+                }
+                const href = linkTypes[linkBlock.type]?.(linkBlock.props);
+                if (href === undefined) {
+                    return children;
+                }
+                return (_jsx(HtmlInlineLink, { className: "richTextBlock__link", href: href, children: children }, key));
+            },
+        },
+    };
+}

package/lib/blocks.generated.d.ts

@@ -0,0 +1,140 @@
+export interface AnchorBlockData {
+    name?: string;
+}
+export interface DamFileDownloadLinkBlockData {
+    file?: {
+        id: string;
+        name: string;
+        fileUrl: string;
+        size: number;
+        mimetype: string;
+        scope?: unknown;
+        altText?: string;
+        title?: string;
+    };
+    openFileType: "NewTab" | "Download";
+}
+export interface DamImageBlockData {
+    attachedBlocks: Array<{
+        type: string;
+        props: PixelImageBlockData | SvgImageBlockData;
+    }>;
+    activeType?: string;
+    block?: {
+        type: string;
+        props: PixelImageBlockData | SvgImageBlockData;
+    };
+}
+export interface DamVideoBlockData {
+    autoplay?: boolean;
+    showControls?: boolean;
+    loop?: boolean;
+    previewImage: PixelImageBlockData;
+    damFile?: {
+        id: string;
+        name: string;
+        size: number;
+        mimetype: string;
+        contentHash: string;
+        title?: string;
+        altText?: string;
+        archived: boolean;
+        scope?: unknown;
+        fileUrl: string;
+        captions?: Array<{
+            id: string;
+            language: string;
+            fileUrl: string;
+        }>;
+    };
+}
+export interface EmailLinkBlockData {
+    email?: string;
+}
+export interface ExternalLinkBlockData {
+    targetUrl?: string;
+    openInNewWindow: boolean;
+    noFollow: boolean;
+}
+export interface InternalLinkBlockData {
+    targetPageAnchor?: string;
+    targetPage?: {
+        id: string;
+        name: string;
+        path: string;
+        scope?: unknown;
+        documentType: string;
+    };
+}
+export interface NewsletterImageBlockData {
+    image: PixelImageBlockData;
+}
+export interface PhoneLinkBlockData {
+    phone?: string;
+}
+export interface PixelImageBlockData {
+    damFile?: {
+        id: string;
+        name: string;
+        size: number;
+        mimetype: string;
+        contentHash: string;
+        title?: string;
+        altText?: string;
+        archived: boolean;
+        scope?: unknown;
+        image?: {
+            width: number;
+            height: number;
+            cropArea: {
+                focalPoint: "SMART" | "CENTER" | "NORTHWEST" | "NORTHEAST" | "SOUTHWEST" | "SOUTHEAST";
+                width?: number;
+                height?: number;
+                x?: number;
+                y?: number;
+            };
+            dominantColor?: string;
+        };
+        fileUrl: string;
+    };
+    cropArea?: {
+        focalPoint: "SMART" | "CENTER" | "NORTHWEST" | "NORTHEAST" | "SOUTHWEST" | "SOUTHEAST";
+        width?: number;
+        height?: number;
+        x?: number;
+        y?: number;
+    };
+    urlTemplate: string;
+}
+export interface SpaceBlockData {
+    height: number;
+}
+export interface SvgImageBlockData {
+    damFile?: {
+        id: string;
+        name: string;
+        size: number;
+        mimetype: string;
+        contentHash: string;
+        title?: string;
+        altText?: string;
+        archived: boolean;
+        scope?: unknown;
+        fileUrl: string;
+    };
+}
+export interface VimeoVideoBlockData {
+    autoplay?: boolean;
+    showControls?: boolean;
+    loop?: boolean;
+    previewImage: PixelImageBlockData;
+    vimeoIdentifier?: string;
+}
+export interface YouTubeVideoBlockData {
+    autoplay?: boolean;
+    showControls?: boolean;
+    loop?: boolean;
+    previewImage: PixelImageBlockData;
+    youtubeIdentifier?: string;
+}
+export type AllBlockNames = "Anchor" | "DamFileDownloadLink" | "DamImage" | "DamVideo" | "EmailLink" | "ExternalLink" | "InternalLink" | "NewsletterImage" | "PhoneLink" | "PixelImage" | "Space" | "SvgImage" | "VimeoVideo" | "YouTubeVideo";

package/lib/blocks.generated.js

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

package/lib/client/index.d.ts

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

package/lib/client/index.js

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

package/lib/client/renderMailHtml.d.ts

@@ -0,0 +1,9 @@
+import mjml2html from "mjml-browser";
+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/client/renderMailHtml.js

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

package/lib/components/button/HtmlButton.d.ts

@@ -0,0 +1,9 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import type { Theme } from "../../theme/themeTypes.js";
+import type { ButtonProps } from "./buttonProps.js";
+export type HtmlButtonProps = ButtonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonProps>;
+/**
+ * Themed button for use inside MJML ending tags or outside of the MJML context.
+ */
+export declare function HtmlButton({ variant: variantProp, fullWidth, target, href, className, style, children, ...restProps }: HtmlButtonProps): ReactNode;
+export declare function generateHtmlButtonStyles(theme: Theme): string;

package/lib/components/button/HtmlButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { registerStyles } from "../../styles/registerStyles.js";
+import { defaultTheme } from "../../theme/defaultTheme.js";
+import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { useOptionalTheme } from "../../theme/ThemeProvider.js";
+import { defaultButtonStyles } from "./defaultButtonStyles.js";
+import { generateResponsiveButtonCss } from "./generateResponsiveButtonCss.js";
+/**
+ * Themed button for use inside MJML ending tags or outside of the MJML context.
+ */
+export function HtmlButton({ variant: variantProp, fullWidth, target = "_blank", href = "#", className, style, children, ...restProps }) {
+    const theme = useOptionalTheme();
+    if (theme === null && variantProp !== undefined) {
+        throw new Error("The `variant` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+    }
+    const themeButton = theme?.button ?? defaultButtonStyles;
+    const textStyles = theme?.text ?? defaultTheme.text;
+    const { defaultVariant, variants, ...baseStyles } = themeButton;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = { ...baseStyles, ...variantStyles };
+    const backgroundColor = getDefaultOrUndefined(mergedStyles.backgroundColor);
+    const borderRadius = getDefaultOrUndefined(mergedStyles.borderRadius);
+    const innerPadding = getDefaultOrUndefined(mergedStyles.padding);
+    const cellStyle = {
+        border: getDefaultOrUndefined(mergedStyles.border),
+        borderRadius,
+        backgroundColor,
+        msoPaddingAlt: innerPadding,
+    };
+    const anchorStyle = {
+        display: fullWidth ? "block" : "inline-block",
+        boxSizing: fullWidth ? "border-box" : undefined,
+        width: fullWidth ? "100%" : undefined,
+        backgroundColor,
+        backgroundImage: getDefaultOrUndefined(mergedStyles.backgroundImage),
+        color: getDefaultOrUndefined(mergedStyles.color),
+        fontFamily: getDefaultOrUndefined(mergedStyles.fontFamily) ?? textStyles.fontFamily,
+        fontSize: getDefaultOrUndefined(mergedStyles.fontSize) ?? textStyles.fontSize,
+        fontWeight: getDefaultOrUndefined(mergedStyles.fontWeight) ?? textStyles.fontWeight,
+        lineHeight: getDefaultOrUndefined(mergedStyles.lineHeight) ?? textStyles.lineHeight,
+        margin: 0,
+        textAlign: "center",
+        textDecoration: "none",
+        padding: innerPadding,
+        borderRadius,
+        msoPaddingAlt: "0px",
+        ...style,
+    };
+    return (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: fullWidth ? "100%" : undefined, className: clsx("htmlButton", activeVariant && `htmlButton--${activeVariant}`, fullWidth && "htmlButton--fullWidth", className), style: { borderCollapse: "separate", lineHeight: "100%", msoLineHeightRule: "exactly" }, children: _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { align: "center", valign: "middle", bgcolor: backgroundColor, style: cellStyle, children: _jsx("a", { ...restProps, href: href, target: target, style: anchorStyle, children: children }) }) }) }) }));
+}
+export function generateHtmlButtonStyles(theme) {
+    return generateResponsiveButtonCss(theme, {
+        styleSelector: (variantName) => `.htmlButton--${variantName} a`,
+    });
+}
+registerStyles(generateHtmlButtonStyles);

package/lib/components/button/MjmlButton.d.ts

@@ -0,0 +1,10 @@
+import { type IMjmlButtonProps } from "@faire/mjml-react";
+import type { ReactNode } from "react";
+import type { Theme } from "../../theme/themeTypes.js";
+import type { ButtonProps } from "./buttonProps.js";
+export type MjmlButtonProps = Omit<IMjmlButtonProps, "href" | "target"> & ButtonProps;
+/**
+ * Themed button for use inside an `MjmlColumn`.
+ */
+export declare function MjmlButton({ variant: variantProp, fullWidth, width, href, target, className, children, ...restProps }: MjmlButtonProps): ReactNode;
+export declare function generateMjmlButtonStyles(theme: Theme): string;

package/lib/components/button/MjmlButton.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MjmlButton as BaseMjmlButton } 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 { css } from "../../utils/css.js";
+import { defaultButtonStyles } from "./defaultButtonStyles.js";
+import { generateResponsiveButtonCss } from "./generateResponsiveButtonCss.js";
+/**
+ * Themed button for use inside an `MjmlColumn`.
+ */
+export function MjmlButton({ variant: variantProp, fullWidth, width, href = "#", target = "_blank", className, children, ...restProps }) {
+    const theme = useOptionalTheme();
+    const themedProps = getThemedProps(theme, variantProp);
+    return (_jsx(BaseMjmlButton, { ...themedProps.baseProps, ...restProps, href: href, target: target, width: fullWidth ? "100%" : width, className: clsx("mjmlButton", themedProps.activeVariant && `mjmlButton--${themedProps.activeVariant}`, fullWidth && "mjmlButton--fullWidth", className), children: children }));
+}
+function getThemedProps(theme, variantProp) {
+    if (theme === null && variantProp !== undefined) {
+        throw new Error("The `variant` prop requires being wrapped in a ThemeProvider or MjmlMailRoot.");
+    }
+    const themeButton = theme?.button ?? defaultButtonStyles;
+    const { defaultVariant, variants, ...baseStyles } = themeButton;
+    const activeVariant = variantProp ?? defaultVariant;
+    const variantStyles = activeVariant ? variants?.[activeVariant] : undefined;
+    const mergedStyles = { ...baseStyles, ...variantStyles };
+    const fontWeightDefault = getDefaultOrUndefined(mergedStyles.fontWeight);
+    return {
+        activeVariant,
+        baseProps: {
+            color: getDefaultOrUndefined(mergedStyles.color),
+            backgroundColor: getDefaultOrUndefined(mergedStyles.backgroundColor),
+            border: getDefaultOrUndefined(mergedStyles.border),
+            borderRadius: getDefaultOrUndefined(mergedStyles.borderRadius),
+            fontFamily: getDefaultOrUndefined(mergedStyles.fontFamily),
+            fontSize: getDefaultOrUndefined(mergedStyles.fontSize),
+            fontWeight: fontWeightDefault !== undefined ? String(fontWeightDefault) : undefined,
+            lineHeight: getDefaultOrUndefined(mergedStyles.lineHeight),
+            innerPadding: getDefaultOrUndefined(mergedStyles.padding),
+        },
+    };
+}
+// The wrapped MJML button has no `background-image` prop, so a gradient goes in a `<style>`
+// rule over the solid `backgroundColor`; variant rules come after the base so they override it.
+// Only the static value lives here; responsive overrides flow through generateResponsiveButtonCss.
+function generateStaticBackgroundImageCss(theme) {
+    const { variants, ...baseStyles } = theme.button;
+    const cssChunks = [];
+    const baseBackgroundImage = getDefaultOrUndefined(baseStyles.backgroundImage);
+    if (baseBackgroundImage !== undefined) {
+        cssChunks.push(css `
+            .mjmlButton a {
+                background-image: ${baseBackgroundImage} !important;
+            }
+        `);
+    }
+    if (variants) {
+        for (const [variantName, variantStyles] of Object.entries(variants)) {
+            const backgroundImage = getDefaultOrUndefined(variantStyles?.backgroundImage);
+            if (backgroundImage !== undefined) {
+                cssChunks.push(css `
+                    .mjmlButton--${variantName} a {
+                        background-image: ${backgroundImage} !important;
+                    }
+                `);
+            }
+        }
+    }
+    return cssChunks.join("\n");
+}
+export function generateMjmlButtonStyles(theme) {
+    return [
+        generateStaticBackgroundImageCss(theme),
+        generateResponsiveButtonCss(theme, {
+            styleSelector: (variantName) => `.mjmlButton--${variantName} a`,
+        }),
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+registerStyles(generateMjmlButtonStyles);
+// The cell is already full-width; this widens the anchor inside it so a gradient covers the
+// whole bar and the whole bar is clickable. Inlined so it survives clients that drop `<style>`.
+registerStyles(css `
+        .mjmlButton--fullWidth a {
+            display: block !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+            text-align: center !important;
+        }
+    `, { inline: true });

package/lib/components/button/buttonProps.d.ts

@@ -0,0 +1,35 @@
+import type { AnchorHTMLAttributes } from "react";
+import type { ButtonVariantName } from "../../theme/themeTypes.js";
+export interface ButtonProps {
+    /**
+     * The component's variant to apply, as defined in the theme.
+     *
+     * Custom variants should be defined in the theme through module augmentation:
+     *
+     * ```ts
+     * declare module "@dextinity/mail-react" {
+     *     interface ButtonVariants { primary: true; secondary: true }
+     * }
+     * ```
+     *
+     * ```ts
+     * const theme = createTheme({
+     *     button: {
+     *         variants: {
+     *             primary: { backgroundColor: "#5B4FC7", color: "#FFFFFF" },
+     *             secondary: { backgroundColor: "#EEEEEE", color: "#222222" },
+     *         },
+     *     },
+     * });
+     * ```
+     *
+     * @defaultValue The theme's `button.defaultVariant`, when set
+     */
+    variant?: ButtonVariantName;
+    /** When true, the button spans the full width of its container. */
+    fullWidth?: boolean;
+    /** @defaultValue "#" */
+    href?: string;
+    /** @defaultValue "_blank" */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+}

package/lib/components/button/buttonProps.js

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

package/lib/components/button/defaultButtonStyles.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonStyles } from "../../theme/themeTypes.js";
+export declare const defaultButtonStyles: ButtonStyles;

package/lib/components/button/defaultButtonStyles.js

@@ -0,0 +1,9 @@
+export const defaultButtonStyles = {
+    color: "#ffffff",
+    backgroundColor: "#414141",
+    border: "none",
+    borderRadius: "3px",
+    fontSize: "13px",
+    lineHeight: "120%",
+    padding: "10px 25px",
+};

package/lib/components/button/generateResponsiveButtonCss.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from "../../theme/themeTypes.js";
+interface GenerateResponsiveButtonCssOptions {
+    /** Selector for variant style overrides, given a variant name. */
+    styleSelector: (variantName: string) => string;
+}
+/** Generates responsive CSS media queries for button variant overrides. */
+export declare function generateResponsiveButtonCss(theme: Theme, options: GenerateResponsiveButtonCssOptions): string;
+export {};

package/lib/components/button/generateResponsiveButtonCss.js

@@ -0,0 +1,21 @@
+import { generateResponsiveVariantCss } from "../../styles/generateResponsiveVariantCss.js";
+const buttonProperties = [
+    "color",
+    "backgroundColor",
+    "backgroundImage",
+    "border",
+    "borderRadius",
+    "fontFamily",
+    "fontSize",
+    "fontWeight",
+    "lineHeight",
+    "padding",
+];
+/** Generates responsive CSS media queries for button variant overrides. */
+export function generateResponsiveButtonCss(theme, options) {
+    return generateResponsiveVariantCss({
+        breakpoints: theme.breakpoints,
+        variants: theme.button.variants,
+        groups: [{ selector: options.styleSelector, properties: buttonProperties }],
+    });
+}

package/lib/components/divider/HtmlDivider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import type { Theme } from "../../theme/themeTypes.js";
+import type { DividerProps } from "./dividerProps.js";
+export type HtmlDividerProps = DividerProps;
+/**
+ * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ */
+export declare function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }: HtmlDividerProps): ReactNode;
+export declare function generateHtmlDividerStyles(theme: Theme): string;