@comet/mail-react 9.3.0-canary-20260803113554 → 9.3.0

package/lib/blocks/richText/RichTextList.js

@@ -2,12 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useOutlookTextStyle } from "../../components/text/OutlookTextStyleContext.js";
 import { generateResponsiveTextCss } from "../../components/text/textStyles.js";
+import { generateResponsiveTokenCss } from "../../styles/generateResponsiveVariantCss.js";
 import { registerStyles } from "../../styles/registerStyles.js";
-import { getDefaultOrUndefined } from "../../theme/responsiveValue.js";
+import { defaultTheme } from "../../theme/defaultTheme.js";
+import { getDefaultFromResponsiveValue, getDefaultOrUndefined } from "../../theme/responsiveValue.js";
 import { useOptionalTheme } from "../../theme/ThemeProvider.js";
-const listIndent = 8;
-const markerGap = 12;
-const itemSpacing = 8;
 const unorderedMarker = "•";
 // Variant names come from the consumer, so the `variant` prefix keeps them apart from the package's own modifiers.
 function variantModifier(variantName) {
@@ -17,6 +16,7 @@ function variantModifier(variantName) {
 export function RichTextList({ ordered, variant, bottomSpacing, items }) {
     const theme = useOptionalTheme();
     const outlookTextStyle = useOutlookTextStyle();
+    const list = theme?.list ?? defaultTheme.list;
     const themeText = theme?.text ?? {};
     const { defaultVariant, variants, ...baseTextStyles } = themeText;
     const activeVariant = variant ?? defaultVariant;
@@ -31,22 +31,50 @@ export function RichTextList({ ordered, variant, bottomSpacing, items }) {
         ...outlookTextStyle,
         ...(outlookTextStyle?.lineHeight !== undefined && { msoLineHeightRule: "exactly" }),
     };
-    return (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: "100%", className: clsx("richTextBlock__list", activeVariant && variantModifier(activeVariant)), style: { borderCollapse: "collapse" }, children: _jsx("tbody", { children: items.map((item, index) => {
+    const itemSpacing = getDefaultFromResponsiveValue(list.itemSpacing);
+    const markerCellPadding = {
+        paddingLeft: getDefaultFromResponsiveValue(list.indent),
+        paddingRight: getDefaultFromResponsiveValue(list.markerGap),
+    };
+    return (_jsx("table", { role: "presentation", cellPadding: 0, cellSpacing: 0, border: 0, width: "100%", className: clsx("richTextBlock__list", ordered ? "richTextBlock__list--ordered" : "richTextBlock__list--unordered", activeVariant && variantModifier(activeVariant)), style: { borderCollapse: "collapse" }, children: _jsx("tbody", { children: items.map((item, index) => {
                 const isLastItem = index === items.length - 1;
                 const spacingBelow = isLastItem ? blockSpacing : itemSpacing;
                 const cellStyle = { ...fontStyle, ...(spacingBelow !== undefined && { paddingBottom: spacingBelow }) };
                 return (_jsxs("tr", { className: clsx("richTextBlock__listItem", !isLastItem && "richTextBlock__listItem--itemSpacing", isLastItem && blockSpacing !== undefined && "richTextBlock__listItem--blockSpacing"), children: [_jsx("td", { className: "richTextBlock__listItemMarker", align: ordered ? "right" : "left", valign: "top", style: {
                                 ...cellStyle,
-                                paddingLeft: listIndent,
-                                paddingRight: markerGap,
+                                ...markerCellPadding,
                                 whiteSpace: "nowrap", // The full-width text cell squeezes this column, so markers such as `10.` must stay on one line.
                             }, children: ordered ? `${index + 1}.` : unorderedMarker }), _jsx("td", { className: "richTextBlock__listItemText", width: "100%", valign: "top", style: cellStyle, children: item.content })] }, item.key));
             }) }) }));
 }
 export function generateRichTextListStyles(theme) {
-    return generateResponsiveTextCss(theme, {
-        styleSelector: (variantName) => `.${variantModifier(variantName)} .richTextBlock__listItemMarker, .${variantModifier(variantName)} .richTextBlock__listItemText`,
-        spacingSelector: (variantName) => `.${variantModifier(variantName)} .richTextBlock__listItem--blockSpacing > td`,
-    });
+    return [
+        generateResponsiveListSpacingCss(theme),
+        generateResponsiveTextCss(theme, {
+            styleSelector: (variantName) => `.${variantModifier(variantName)} .richTextBlock__listItemMarker, .${variantModifier(variantName)} .richTextBlock__listItemText`,
+            spacingSelector: (variantName) => `.${variantModifier(variantName)} .richTextBlock__listItem--blockSpacing > td`,
+        }),
+    ]
+        .filter(Boolean)
+        .join("\n");
+}
+function generateResponsiveListSpacingCss(theme) {
+    return [
+        generateResponsiveTokenCss({
+            breakpoints: theme.breakpoints,
+            selector: ".richTextBlock__listItemMarker",
+            tokens: [
+                { value: theme.list.indent, cssProperty: "padding-left", unit: "px" },
+                { value: theme.list.markerGap, cssProperty: "padding-right", unit: "px" },
+            ],
+        }),
+        generateResponsiveTokenCss({
+            breakpoints: theme.breakpoints,
+            selector: ".richTextBlock__listItem--itemSpacing > td",
+            tokens: [{ value: theme.list.itemSpacing, cssProperty: "padding-bottom", unit: "px" }],
+        }),
+    ]
+        .filter(Boolean)
+        .join("\n");
 }
 registerStyles(generateRichTextListStyles);

package/lib/index.d.ts

@@ -40,7 +40,7 @@ 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 type { ButtonStyles, ButtonVariants, ButtonVariantStyles, DividerStyles, DividerVariants, DividerVariantStyles, TextStyles, TextVariants, TextVariantStyles, Theme, ThemeBackgroundColors, ThemeBreakpoint, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeList, 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";

package/lib/styles/generateResponsiveVariantCss.d.ts

@@ -23,4 +23,18 @@ interface GenerateResponsiveVariantCssOptions<TVariantStyles> {
  * Returns an empty string when no variant has breakpoint overrides.
  */
 export declare function generateResponsiveVariantCss<TVariantStyles extends VariantStylesConstraint>({ breakpoints, variants, groups, }: GenerateResponsiveVariantCssOptions<TVariantStyles>): string;
+interface ResponsiveToken {
+    value: ResponsiveValue<string | number>;
+    cssProperty: string;
+    unit?: string;
+}
+/**
+ * Generates `max-width` media-query CSS for theme tokens that are not keyed by variant name.
+ * Returns an empty string when no token has breakpoint overrides.
+ */
+export declare function generateResponsiveTokenCss({ breakpoints, selector, tokens, }: {
+    breakpoints: ThemeBreakpoints;
+    selector: string;
+    tokens: readonly ResponsiveToken[];
+}): string;
 export {};

package/lib/styles/generateResponsiveVariantCss.js

@@ -21,6 +21,21 @@ export function generateResponsiveVariantCss({ breakpoints, variants, groups, })
     }
     return cssChunks.filter(Boolean).join("\n");
 }
+/**
+ * Generates `max-width` media-query CSS for theme tokens that are not keyed by variant name.
+ * Returns an empty string when no token has breakpoint overrides.
+ */
+export function generateResponsiveTokenCss({ breakpoints, selector, tokens, }) {
+    const overridesByBreakpoint = new Map();
+    for (const token of tokens) {
+        for (const { breakpointKey, value } of getResponsiveOverrides(token.value)) {
+            const declarations = overridesByBreakpoint.get(breakpointKey) ?? [];
+            declarations.push(formatDeclaration({ cssProperty: token.cssProperty, value, unit: token.unit }));
+            overridesByBreakpoint.set(breakpointKey, declarations);
+        }
+    }
+    return renderMediaQueries({ breakpoints, selector, overridesByBreakpoint });
+}
 function collectOverridesByBreakpoint(variantStyles, properties) {
     const overridesByBreakpoint = new Map();
     for (const entry of properties) {

package/lib/theme/createTheme.d.ts

@@ -1,8 +1,9 @@
-import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeSizes, ThemeText } from "./themeTypes.js";
+import type { Theme, ThemeBackgroundColors, ThemeBreakpoints, ThemeButton, ThemeColors, ThemeDivider, ThemeList, ThemeSizes, ThemeText } from "./themeTypes.js";
 type CreateThemeOverrides = {
     sizes?: Partial<ThemeSizes>;
     breakpoints?: Partial<ThemeBreakpoints>;
     text?: Partial<ThemeText>;
+    list?: Partial<ThemeList>;
     divider?: Partial<ThemeDivider>;
     button?: Partial<ThemeButton>;
     colors?: {

package/lib/theme/createTheme.js

@@ -21,6 +21,7 @@ export function createTheme(overrides) {
             ...overrides?.breakpoints,
         },
         text: { ...defaultTheme.text, ...overrides?.text },
+        list: { ...defaultTheme.list, ...overrides?.list },
         divider: { ...defaultTheme.divider, ...overrides?.divider },
         button: { ...defaultTheme.button, ...overrides?.button },
         colors: {

package/lib/theme/defaultTheme.js

@@ -17,6 +17,11 @@ export const defaultTheme = {
         bottomSpacing: "16px",
         color: "#000000",
     },
+    list: {
+        indent: 8,
+        markerGap: 12,
+        itemSpacing: 8,
+    },
     divider: defaultDividerStyles,
     button: defaultButtonStyles,
     colors: {

package/lib/theme/themeTypes.d.ts

@@ -46,6 +46,15 @@ export interface ThemeText extends TextStyles {
     defaultVariant?: VariantName;
     variants?: VariantsRecord;
 }
+/** Spacing tokens in pixels, applying to lists the RichText block renders. */
+export interface ThemeList {
+    /** The space before the marker, measured from the list's left edge. */
+    indent: ResponsiveValue;
+    /** The space between the marker and the item's text. */
+    markerGap: ResponsiveValue;
+    /** The space between items. The space below the last one comes from the text variant's `bottomSpacing`. */
+    itemSpacing: ResponsiveValue;
+}
 /**
  * Single source of truth for divider style property names and their value types.
  * Both `DividerStyles` and `DividerVariantStyles` are derived from this interface.
@@ -197,6 +206,7 @@ export interface Theme {
     sizes: ThemeSizes;
     breakpoints: ThemeBreakpoints;
     text: ThemeText;
+    list: ThemeList;
     divider: ThemeDivider;
     button: ThemeButton;
     colors: ThemeColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.3.0-canary-20260803113554",
+  "version": "9.3.0",
   "description": "Utilities for building HTML emails with React",
   "license": "BSD-2-Clause",
   "type": "module",
@@ -48,8 +48,8 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.1.8",
-    "@comet/cli": "9.3.0-canary-20260803113554",
-    "@comet/eslint-config": "9.3.0-canary-20260803113554"
+    "@comet/cli": "9.3.0",
+    "@comet/eslint-config": "9.3.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",