@comet/mail-react 9.3.0 → 9.3.1-canary-20260806072913

package/lib/blocks/pixelImage/HtmlPixelImageBlock.d.ts

@@ -6,6 +6,7 @@ export type HtmlPixelImageBlockProps = Omit<ComponentProps<"img">, "src" | "widt
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlPixelImageBlock` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlPixelImageBlock`.
  */
 export declare function HtmlPixelImageBlock({ data, width, largestPossibleRenderWidth, aspectRatio, className, ...imgProps }: HtmlPixelImageBlockProps): ReactNode;

package/lib/blocks/pixelImage/HtmlPixelImageBlock.js

@@ -7,6 +7,7 @@ import { usePixelImageBlockData } from "./usePixelImageBlockData.js";
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlPixelImageBlock` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlPixelImageBlock`.
  */
 export function HtmlPixelImageBlock({ data, width, largestPossibleRenderWidth, aspectRatio, className, ...imgProps }) {

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

@@ -11,7 +11,9 @@ import type { CreateRichTextBlockOptions, RichTextBlockProps } from "./common.js
  *
  * `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`).
+ * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`); inside
+ * `MjmlRaw` in an `MjmlColumn`, place `HtmlRichTextBlock` in a `<tr>` and
+ * `<td>` of its own.
  *
  * ```ts
  * export const { MjmlRichTextBlock, HtmlRichTextBlock } = createRichTextBlock({
@@ -25,6 +27,6 @@ import type { CreateRichTextBlockOptions, RichTextBlockProps } from "./common.js
 export declare function createRichTextBlock<TLinkTypes extends Record<string, unknown> = Record<string, unknown>>(options?: CreateRichTextBlockOptions<TLinkTypes>): {
     /** Renders CMS RichText block data (draft-js raw content) as one `MjmlText` per draft block. Must be placed within an `MjmlColumn`. */
     MjmlRichTextBlock: (props: RichTextBlockProps) => ReactNode;
-    /** Renders CMS RichText block data (draft-js raw content) as one `HtmlText` div per draft block, for raw-HTML contexts such as `MjmlRaw`. */
+    /** Renders CMS RichText block data (draft-js raw content) as one `HtmlText` div per draft block, for raw-HTML contexts such as `MjmlRaw`. Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlRichTextBlock` in a `<tr>` and `<td>` of its own. */
     HtmlRichTextBlock: (props: RichTextBlockProps) => ReactNode;
 };

package/lib/blocks/richText/createRichTextBlock.js

@@ -50,7 +50,9 @@ function renderRichTextContent({ draftContent, blockTypes, linkTypes, inline, bl
  *
  * `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`).
+ * as `HtmlText` for raw-HTML contexts (e.g. inside `MjmlRaw`); inside
+ * `MjmlRaw` in an `MjmlColumn`, place `HtmlRichTextBlock` in a `<tr>` and
+ * `<td>` of its own.
  *
  * ```ts
  * export const { MjmlRichTextBlock, HtmlRichTextBlock } = createRichTextBlock({

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

@@ -4,6 +4,8 @@ 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.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlButton` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlButton`.
  */
 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

@@ -8,6 +8,8 @@ import { defaultButtonStyles } from "./defaultButtonStyles.js";
 import { generateResponsiveButtonCss } from "./generateResponsiveButtonCss.js";
 /**
  * Themed button for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlButton` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlButton`.
  */
 export function HtmlButton({ variant: variantProp, fullWidth, target = "_blank", href = "#", className, style, children, ...restProps }) {
     const theme = useOptionalTheme();

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

@@ -4,6 +4,8 @@ import type { DividerProps } from "./dividerProps.js";
 export type HtmlDividerProps = DividerProps;
 /**
  * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlDivider` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlDivider`.
  */
 export declare function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }: HtmlDividerProps): ReactNode;
 export declare function generateHtmlDividerStyles(theme: Theme): string;

package/lib/components/divider/HtmlDivider.js

@@ -10,6 +10,8 @@ import { generateResponsiveDividerCss } from "./generateResponsiveDividerCss.js"
 const zeroWidthSpace = String.fromCharCode(0x200b);
 /**
  * Themed divider for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlDivider` in a `<tr>` and `<td>` of its own.
+ * For MJML context, use `MjmlDivider`.
  */
 export function HtmlDivider({ variant: variantProp, height: heightProp, backgroundColor: backgroundColorProp, backgroundImage: backgroundImageProp, className, style, }) {
     const theme = useOptionalTheme();

package/lib/components/image/HtmlImage.d.ts

@@ -6,6 +6,7 @@ export type HtmlImageProps = ComponentProps<"img">;
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlImage` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlImage`.
  */
 export declare function HtmlImage({ className, ...restProps }: HtmlImageProps): ReactNode;

package/lib/components/image/HtmlImage.js

@@ -8,6 +8,7 @@ import { css } from "../../utils/css.js";
  *
  * Use within raw HTML context — HTML-only emails or
  * [MJML ending tags](https://documentation.mjml.io/#ending-tags) like `MjmlRaw`.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlImage` in a `<tr>` and `<td>` of its own.
  * For MJML context, use `MjmlImage`.
  */
 export function HtmlImage({ className, ...restProps }) {

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

@@ -43,6 +43,8 @@ export type HtmlTextProps<E extends keyof JSX.IntrinsicElements = "td"> = HtmlTe
 } & Omit<ComponentPropsWithoutRef<E>, keyof HtmlTextOwnProps | "element">;
 /**
  * Themed text component for use inside MJML ending tags or outside of the MJML context.
+ * Inside `MjmlRaw` in an `MjmlColumn`, place `HtmlText` in a `<tr>` of its own,
+ * and in a `<td>` too when `element` is not the default `td`.
  */
 export declare function HtmlText<E extends keyof JSX.IntrinsicElements>(props: HtmlTextOwnProps & {
     element: E;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comet/mail-react",
-  "version": "9.3.0",
+  "version": "9.3.1-canary-20260806072913",
   "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",
-    "@comet/eslint-config": "9.3.0"
+    "@comet/cli": "9.3.1-canary-20260806072913",
+    "@comet/eslint-config": "9.3.1-canary-20260806072913"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",