@unlayer/react-elements 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,852 @@
+import * as React$1 from 'react';
+import React__default from 'react';
+import { ButtonValues } from '@unlayer/types/tools/button';
+export { ButtonValues } from '@unlayer/types/tools/button';
+import { DividerValues } from '@unlayer/types/tools/divider';
+export { DividerValues } from '@unlayer/types/tools/divider';
+import { HeadingValues } from '@unlayer/types/tools/heading';
+export { HeadingValues } from '@unlayer/types/tools/heading';
+import { HtmlValues } from '@unlayer/types/tools/html';
+export { HtmlValues } from '@unlayer/types/tools/html';
+import { ImageValues } from '@unlayer/types/tools/image';
+export { ImageValues } from '@unlayer/types/tools/image';
+import { MenuValues } from '@unlayer/types/tools/menu';
+export { MenuValues } from '@unlayer/types/tools/menu';
+import { ParagraphValues } from '@unlayer/types/tools/paragraph';
+export { ParagraphValues } from '@unlayer/types/tools/paragraph';
+import { SocialValues } from '@unlayer/types/tools/social';
+export { SocialValues } from '@unlayer/types/tools/social';
+import { TableValues } from '@unlayer/types/tools/table';
+export { TableValues } from '@unlayer/types/tools/table';
+import { VideoValues } from '@unlayer/types/tools/video';
+export { VideoValues } from '@unlayer/types/tools/video';
+import { RowValues } from '@unlayer/types/containers/row';
+export { RowValues } from '@unlayer/types/containers/row';
+import { ColumnValues } from '@unlayer/types/containers/column';
+export { ColumnValues } from '@unlayer/types/containers/column';
+import { BodyValues } from '@unlayer/types/containers/body';
+export { BodyValues } from '@unlayer/types/containers/body';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { ContentValues } from '@unlayer/types/containers/content';
+
+/**
+ * Shared Type Definitions
+ *
+ * Framework-agnostic types used across all Unlayer Elements packages.
+ * Value types use Record<string, any> since the runtime semantic-props mapper
+ * determines nesting from default-values objects, not from static types.
+ * Shared sub-types (Href, Icons, etc.) are inlined here.
+ */
+interface Href {
+    name: string;
+    attrs?: {
+        href?: string;
+        target?: string;
+        onClick?: unknown;
+        class?: string;
+        download?: boolean;
+        [k: string]: unknown;
+    };
+    values?: {
+        [k: string]: string | number | {
+            label?: string;
+            value: string | number;
+        }[];
+    };
+}
+interface Icons {
+    iconType: string;
+    icons: {
+        name: string;
+        url: string;
+        imgUrl?: string;
+    }[];
+    editor?: {
+        data?: {
+            customIcons?: {
+                name: string;
+                url: string;
+                icons: {
+                    [k: string]: string;
+                };
+            }[];
+            customOptions?: {
+                value: string;
+                label: string;
+            }[];
+            showDefaultIcons?: boolean;
+            showDefaultOptions?: boolean;
+        };
+    };
+}
+interface VideoSource {
+    loading?: boolean;
+    playIconColor?: string;
+    playIconSize?: number;
+    playIconType?: string;
+    thumbnail?: string | null;
+    type?: "youtube" | "vimeo";
+    url?: string;
+    videoId?: string;
+}
+type TextAlign = "left" | "center" | "right" | "justify";
+interface LinkStyle {
+    body?: boolean;
+    inherit?: boolean;
+    linkColor?: string;
+    linkHoverColor?: string;
+    linkUnderline?: boolean;
+    linkHoverUnderline?: boolean;
+}
+
+/** A social-media icon entry for the `icons` shorthand prop. */
+interface SocialIcon {
+    /** Platform name (e.g., "Facebook", "X", "Instagram") */
+    name: string;
+    /** Profile or share URL */
+    url: string;
+}
+/** A menu item entry for the `items` shorthand prop. */
+interface MenuItem {
+    /** Display text */
+    text: string;
+    /** Link URL */
+    href: string;
+    /** Link target (default: "_blank") */
+    target?: string;
+}
+type RenderMode = "web" | "email" | "document";
+interface DesignContent {
+    type: string;
+    values: Record<string, any>;
+}
+interface DesignColumn {
+    contents: DesignContent[];
+    values: Record<string, any>;
+}
+interface DesignRow {
+    cells: number[];
+    columns: DesignColumn[];
+    values: Record<string, any>;
+}
+interface DesignBody {
+    rows: DesignRow[];
+    values: Record<string, any>;
+}
+interface DesignJSON {
+    counters: Record<string, number>;
+    body: DesignBody;
+    schemaVersion: number;
+}
+
+interface HeadConfig {
+    hasFeature?: (featureName: string) => boolean;
+    getInitialValues?: (containerType: string) => Record<string, any>;
+}
+interface UnlayerConfig {
+    cdnBaseUrl: string;
+    toSafeHtml?: (text: string, options?: any) => string;
+    textDirection?: string;
+    mergeTagState?: Record<string, any>;
+    mode?: RenderMode;
+    headConfig?: HeadConfig;
+}
+declare const DEFAULT_CONFIG: UnlayerConfig;
+
+/**
+ * Column Layouts - All 8 supported column combinations from Unlayer Editor
+ *
+ * These layouts provide a structured and type-safe way to specify column
+ * configurations that match exactly what the Unlayer editor supports.
+ *
+ * Usage:
+ * import { ColumnLayouts } from '@unlayer-internal/shared-elements';
+ * <Row layout={ColumnLayouts.TwoEqual}>
+ *   <Column>...</Column>
+ *   <Column>...</Column>
+ * </Row>
+ */
+interface ColumnLayout {
+    name: string;
+    description: string;
+    cells: number[];
+    expectedColumns: number;
+    widths: string[];
+}
+declare const ColumnLayouts: {
+    OneColumn: ColumnLayout;
+    TwoEqual: ColumnLayout;
+    TwoWideNarrow: ColumnLayout;
+    TwoNarrowWide: ColumnLayout;
+    ThreeEqual: ColumnLayout;
+    ThreeNarrowWideNarrow: ColumnLayout;
+    FourEqual: ColumnLayout;
+    FiveEqual: ColumnLayout;
+};
+type ValidColumnLayout = (typeof ColumnLayouts)[keyof typeof ColumnLayouts];
+/**
+ * Validates that a layout has the correct number of Column components
+ */
+declare function validateColumnLayout(layout: ColumnLayout, childrenCount: number): void;
+/**
+ * Convert an HTML string to a textJson-compatible value.
+ *
+ * Wraps the HTML in a passthrough format that `generateHtmlFromTextJson`
+ * detects and returns directly — avoiding the Lexical headless editor
+ * round-trip (HTML → Lexical JSON → HTML) which doesn't work reliably
+ * in browser environments.
+ *
+ * Supports any HTML formatting: bold, italic, underline, strikethrough,
+ * code, links, lists, etc.
+ *
+ * @param html - HTML string with formatting (e.g. `"Hello <b>bold</b>"`)
+ * @returns JSON string compatible with Paragraph's `textJson` prop
+ *
+ * @example
+ * ```ts
+ * const json = htmlToTextJson('Hello <b>world</b> and <a href="https://example.com">link</a>');
+ * ```
+ */
+declare function htmlToTextJson(html: string): string;
+
+/**
+ * Universal Semantic Props System
+ *
+ * Automatically flattens nested properties for ALL components
+ * No build-time generation needed - pure TypeScript + runtime detection
+ *
+ * Example:
+ * - ButtonValues has: { buttonColors: { color, backgroundColor }, fontSize }
+ * - Users can pass: { color: "red", backgroundColor: "blue" } OR { buttonColors: { color: "red" } }
+ * - TypeScript provides autocomplete for ALL properties (flat and nested)
+ */
+/**
+ * Type utility: Extracts all properties from nested objects
+ * This provides TypeScript autocomplete for flat props!
+ */
+type FlattenObjectProps<T> = T extends object ? {
+    [K in keyof T]?: T[K] extends object ? T[K] | FlattenObjectProps<T[K]> : T[K];
+} & {
+    [K in keyof T as T[K] extends object ? keyof T[K] extends string ? keyof T[K] : never : never]?: any;
+} : T;
+/**
+ * Semantic props type for any component.
+ * Generic TChildren parameter allows each framework to supply its own child type.
+ */
+type SemanticProps$1<T, TChildren = any> = FlattenObjectProps<T> & {
+    children?: TChildren;
+    values?: T;
+    /** HTML string with inline formatting for Paragraph (e.g. `'Hello <b>bold</b>'`) */
+    html?: string;
+};
+
+/**
+ * Type Definitions
+ *
+ * Re-exports shared types from @unlayer-internal/shared-elements
+ * and defines React-specific component prop types.
+ */
+
+/**
+ * Public props for item components.
+ * Includes semantic flat props, children, values escape hatch,
+ * className, style, and mode. Excludes internal threading props.
+ */
+type ItemProps<TValues> = SemanticProps$1<TValues, React.ReactNode> & {
+    className?: string;
+    style?: React.CSSProperties;
+    mode?: "web" | "email" | "document";
+};
+/** Button component props */
+type ButtonProps = ItemProps<ButtonValues>;
+/** Heading component props */
+type HeadingProps = ItemProps<HeadingValues>;
+/** Divider component props */
+type DividerProps = ItemProps<DividerValues>;
+/** HTML component props */
+type HtmlProps = ItemProps<HtmlValues>;
+/** Paragraph component props */
+type ParagraphProps = ItemProps<ParagraphValues>;
+/** Image component props — supports `alt` shorthand for `altText`. */
+type ImageProps = ItemProps<ImageValues> & {
+    /** Alt text (alias for altText) */
+    alt?: string;
+};
+/** Social component props — supports `icons` shorthand array. */
+type SocialProps = ItemProps<SocialValues> & {
+    /** Social icons shorthand */
+    icons?: SocialIcon[];
+    /** Icon shape */
+    iconType?: "circle" | "rounded" | "squared";
+};
+/** Menu component props — supports `items` shorthand array. */
+type MenuProps = ItemProps<MenuValues> & {
+    /** Menu items shorthand */
+    items?: MenuItem[];
+};
+/** Table component props — supports `headers` + `data` shorthands. */
+type TableProps = ItemProps<TableValues> & {
+    /** Column headers */
+    headers?: string[];
+    /** Row data as 2D array */
+    data?: string[][];
+};
+/** Video component props — supports `videoUrl` shorthand. */
+type VideoProps = ItemProps<VideoValues> & {
+    /** YouTube/Vimeo URL (auto-parsed) */
+    videoUrl?: string;
+};
+
+/**
+ * Universal Component Factory
+ *
+ * Eliminates boilerplate by creating components from configuration.
+ * This factory handles all the repetitive logic that was duplicated
+ * across Button, Heading, Paragraph, etc.
+ */
+
+/**
+ * Base props that all item components support
+ */
+interface BaseItemComponentProps {
+    children?: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    mode?: RenderMode;
+    index?: number;
+    colIndex?: number;
+    cells?: any[];
+    bodyValues?: any;
+    rowValues?: any;
+    /** @internal - Unlayer config threaded from UnlayerProvider */
+    _config?: UnlayerConfig;
+}
+/**
+ * Props type that combines base props with semantic props
+ */
+type ItemComponentProps<TSemanticProps> = BaseItemComponentProps & TSemanticProps;
+
+/**
+ * React Semantic Props
+ *
+ * Re-exports the shared semantic props system with React.ReactNode
+ * as the default children type.
+ */
+
+/**
+ * React-specific SemanticProps — pins TChildren to React.ReactNode
+ */
+type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
+
+/**
+ * Button - Universal SSR/Client Component with Automatic Semantic Props
+ *
+ * ✅ TypeScript provides autocomplete for ALL props (flat and nested)
+ * ✅ Works for any nested structure - no configuration needed
+ * ✅ Escape hatch: values prop for full control
+ * ✅ Works on both server and client
+ *
+ * @example Flat Props (Simple - most common)
+ * ```tsx
+ * <Button color="white" backgroundColor="#3b82f6" fontSize="16px">
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example Advanced (per-side borders)
+ * ```tsx
+ * <Button
+ *   backgroundColor="blue"
+ *   borderTopColor="red"
+ *   borderTopWidth="2px"
+ *   borderBottomWidth="0px"
+ * >
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example Nested Objects (full control)
+ * ```tsx
+ * <Button
+ *   buttonColors={{ backgroundColor: "#3b82f6", hoverBackgroundColor: "#2563eb" }}
+ *   border={{ borderTopWidth: "2px" }}
+ * >
+ *   Click me
+ * </Button>
+ * ```
+ */
+declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>>;
+
+/**
+ * Divider - Universal SSR/Client Component with Automatic Semantic Props
+ *
+ * @example Flat Props
+ * ```tsx
+ * <Divider borderTopWidth="2px" borderTopColor="#ccc" width="80%" />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Divider values={{
+ *   border: { borderTopWidth: "2px", borderTopColor: "#ccc" },
+ *   width: "80%"
+ * }} />
+ * ```
+ */
+declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
+
+/**
+ * Heading - Universal SSR/Client Component with Semantic Props API
+ *
+ * ✅ Semantic flat props (level, color, fontSize, etc.)
+ * ✅ Escape hatch: values prop for full control
+ * ✅ Works on both server and client
+ * ✅ Minimal boilerplate using component factory
+ *
+ * @example Semantic Props (Recommended)
+ * ```tsx
+ * <Heading level="h1" color="#222" fontSize="32px">
+ *   Welcome
+ * </Heading>
+ * ```
+ *
+ * @example Full Control via Values
+ * ```tsx
+ * <Heading values={{ headingType: "h1", color: "#222" }}>Welcome</Heading>
+ * ```
+ */
+declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues>>>;
+
+/**
+ * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
+ *
+ * @example Flat Props
+ * ```tsx
+ * <Html html="<div>Custom HTML</div>" />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Html values={{ html: "<div>Custom HTML</div>" }} />
+ * ```
+ */
+declare const Html: React$1.FC<ItemComponentProps<SemanticProps<HtmlValues>>>;
+
+type ImageSemanticProps = SemanticProps<ImageValues> & {
+    /** Alt text (alias for altText) */
+    alt?: string;
+};
+/**
+ * Image - Renders an image element.
+ *
+ * @example Shorthand
+ * ```tsx
+ * <Image src="https://example.com/photo.jpg" alt="A photo" />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Image values={{
+ *   src: { url: "https://example.com/image.jpg", width: 600 },
+ *   altText: "Description"
+ * }} />
+ * ```
+ */
+declare const Image: React$1.FC<ItemComponentProps<ImageSemanticProps>>;
+
+type MenuSemanticProps = SemanticProps<MenuValues> & {
+    /** Menu items shorthand */
+    items?: MenuItem[];
+};
+/**
+ * Menu - Renders a navigation menu.
+ *
+ * @example Shorthand
+ * ```tsx
+ * <Menu items={[{ text: "Home", href: "/" }, { text: "About", href: "/about" }]} />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Menu values={{
+ *   menu: {
+ *     items: [
+ *       { key: "home", text: "Home", link: { name: "web", values: { href: "/" } } }
+ *     ]
+ *   }
+ * }} />
+ * ```
+ */
+declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
+
+/**
+ * Paragraph - Universal SSR/Client Component with Semantic Props API
+ *
+ * ✅ Semantic flat props (color, fontSize, textAlign, etc.)
+ * ✅ Escape hatch: values prop for full control
+ * ✅ Works on both server and client
+ * ✅ Minimal boilerplate using component factory
+ *
+ * @example Semantic Props (Recommended)
+ * ```tsx
+ * <Paragraph color="#555" fontSize="14px" lineHeight="1.6">
+ *   Your paragraph content here with <strong>rich text</strong> support
+ * </Paragraph>
+ * ```
+ *
+ * @example Full Control via Values
+ * ```tsx
+ * <Paragraph values={{ textJson: "...", color: "#555" }} />
+ * ```
+ */
+declare const Paragraph: React$1.FC<ItemComponentProps<SemanticProps<ParagraphValues>>>;
+
+type SocialSemanticProps = SemanticProps<SocialValues> & {
+    /** Social icons shorthand (array of {name, url}) */
+    icons?: SocialIcon[];
+    /** Icon shape */
+    iconType?: "circle" | "rounded" | "squared";
+};
+/**
+ * Social - Renders social-media icon links.
+ *
+ * @example Shorthand
+ * ```tsx
+ * <Social icons={[{ name: "Facebook", url: "https://facebook.com" }]} iconType="rounded" />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Social values={{
+ *   icons: { icons: [
+ *     { name: "Facebook", url: "https://facebook.com/..." },
+ *     { name: "Twitter", url: "https://twitter.com/..." }
+ *   ]}
+ * }} />
+ * ```
+ */
+declare const Social: React$1.FC<ItemComponentProps<SocialSemanticProps>>;
+
+type TableSemanticProps = SemanticProps<TableValues> & {
+    /** Column headers as string[] */
+    headers?: string[];
+    /** Row data as 2D string array */
+    data?: string[][];
+};
+/**
+ * Table - Renders a data table.
+ *
+ * @example Shorthand
+ * ```tsx
+ * <Table
+ *   headers={["Name", "Email", "Role"]}
+ *   data={[["Alice", "alice@co.com", "Admin"], ["Bob", "bob@co.com", "User"]]}
+ * />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Table values={{
+ *   table: {
+ *     headers: [{ cells: [{ text: "Name" }, { text: "Email" }] }],
+ *     rows: [{ cells: [{ text: "John" }, { text: "john@example.com" }] }]
+ *   },
+ *   enableHeader: true
+ * }} />
+ * ```
+ */
+declare const Table: React$1.FC<ItemComponentProps<TableSemanticProps>>;
+
+type VideoSemanticProps = SemanticProps<VideoValues> & {
+    /** YouTube/Vimeo URL (auto-parsed) */
+    videoUrl?: string;
+};
+/**
+ * Video - Renders an embedded video player (YouTube/Vimeo).
+ *
+ * @example Shorthand
+ * ```tsx
+ * <Video videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />
+ * ```
+ *
+ * @example Full Control
+ * ```tsx
+ * <Video values={{
+ *   video: { type: "youtube", videoId: "dQw4w9WgXcQ", thumbnail: "..." }
+ * }} />
+ * ```
+ */
+declare const Video: React$1.FC<ItemComponentProps<VideoSemanticProps>>;
+
+interface RowProps extends SemanticProps<RowValues> {
+    children?: React__default.ReactNode;
+    layout?: ColumnLayout;
+    cells?: number[];
+    mode?: RenderMode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    index?: number;
+    bodyValues?: any;
+    collection?: string;
+    /** @internal - Unlayer config threaded from UnlayerProvider via Body */
+    _config?: UnlayerConfig;
+}
+declare const Row: React__default.FC<RowProps>;
+
+interface ColumnProps extends SemanticProps<ColumnValues> {
+    children?: React__default.ReactNode;
+    index?: number;
+    cells?: number[];
+    bodyValues?: any;
+    rowValues?: any;
+    mode?: RenderMode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
+    _config?: UnlayerConfig;
+}
+declare const Column: React__default.FC<ColumnProps>;
+
+interface BodyProps extends SemanticProps<BodyValues> {
+    children?: React__default.ReactNode;
+    mode?: RenderMode;
+    className?: string;
+    style?: React__default.CSSProperties;
+    index?: number;
+    /** Optional config (replaces context-based config for Server Component usage) */
+    config?: Partial<UnlayerConfig>;
+    /** Preview text shown in email client inboxes (email mode only) */
+    previewText?: string;
+}
+/**
+ * Body - Universal Server/Client Component
+ *
+ * Works in both Server Components and Client Components.
+ * In Server Components, pass config as a prop.
+ * In Client Components, config can come from UnlayerProvider context or props.
+ *
+ * @example Server Component
+ * ```tsx
+ * <Body backgroundColor="#F7F8F9" contentWidth="600px" mode="web">
+ *   <Row><Column><Paragraph values={{...}} mode="web" /></Column></Row>
+ * </Body>
+ * ```
+ *
+ * @example Client Component with Provider
+ * ```tsx
+ * <UnlayerProvider config={{ mode: "email" }}>
+ *   <Body>...</Body>
+ * </UnlayerProvider>
+ * ```
+ */
+declare const Body: React__default.FC<BodyProps>;
+
+type EmailProps = Omit<BodyProps, "mode">;
+/**
+ * Email - Renders email-client safe HTML (tables for Outlook, Gmail, Yahoo).
+ *
+ * Thin wrapper around Body with mode locked to "email".
+ *
+ * @example
+ * ```tsx
+ * <Email backgroundColor="#f4f4f5" contentWidth="560px" previewText="Welcome!">
+ *   <Row><Column><Paragraph text="Hello" /></Column></Row>
+ * </Email>
+ * ```
+ */
+declare function Email(props: EmailProps): react_jsx_runtime.JSX.Element;
+declare namespace Email {
+    var displayName: string;
+}
+
+type PageProps = Omit<BodyProps, "mode">;
+/**
+ * Page - Renders with div/flexbox for responsive web display.
+ *
+ * Thin wrapper around Body with mode locked to "web".
+ *
+ * @example
+ * ```tsx
+ * <Page backgroundColor="#ffffff" contentWidth="960px">
+ *   <Row><Column><Paragraph text="Hello" /></Column></Row>
+ * </Page>
+ * ```
+ */
+declare function Page(props: PageProps): react_jsx_runtime.JSX.Element;
+declare namespace Page {
+    var displayName: string;
+}
+
+type DocumentProps = Omit<BodyProps, "mode">;
+/**
+ * Document - Print-optimized rendering for PDF generation.
+ *
+ * Thin wrapper around Body with mode locked to "document".
+ *
+ * @example
+ * ```tsx
+ * <Document backgroundColor="#ffffff" contentWidth="700px">
+ *   <Row><Column><Paragraph text="Hello" /></Column></Row>
+ * </Document>
+ * ```
+ */
+declare function Document(props: DocumentProps): react_jsx_runtime.JSX.Element;
+declare namespace Document {
+    var displayName: string;
+}
+
+interface UnlayerProviderProps {
+    config: Partial<UnlayerConfig>;
+    children: React__default.ReactNode;
+}
+declare const UnlayerProvider: React__default.FC<UnlayerProviderProps>;
+declare function useUnlayerConfig(): UnlayerConfig;
+
+/**
+ * Renders an Unlayer element tree to an HTML string.
+ *
+ * - Passes merged config via the `config` prop (no React context — works in Server Components)
+ * - Uses `renderToStaticMarkup` — no React hydration markers, clean HTML for email/PDF
+ * - Synchronous
+ *
+ * @param element - A React element tree (e.g. `<Body><Row>...</Row></Body>`)
+ * @param config  - Optional config overrides (mode, cdnBaseUrl, etc.)
+ * @returns Clean HTML string
+ * @throws {Error} If rendering fails, with a helpful message
+ *
+ * @example
+ * ```tsx
+ * import { renderToHtml, Body, Row, Column, Paragraph } from "@unlayer/react-elements";
+ *
+ * const html = renderToHtml(
+ *   <Body><Row><Column><Paragraph>Hello</Paragraph></Column></Row></Body>,
+ *   { mode: "email", cdnBaseUrl: "https://my-cdn.com" }
+ * );
+ * ```
+ */
+declare function renderToHtml(element: React__default.ReactElement, config?: Partial<UnlayerConfig>): string;
+/**
+ * Renders an Unlayer element tree to a plain text string.
+ *
+ * Internally calls `renderToHtml` then converts to plain text using
+ * `htmlToPlainText`. Useful for generating the text/plain MIME part
+ * of multipart emails (critical for deliverability).
+ *
+ * @param element - A React element tree (e.g. `<Body><Row>...</Row></Body>`)
+ * @param config  - Optional config overrides (mode, cdnBaseUrl, etc.)
+ * @returns Plain text representation of the email
+ *
+ * @example
+ * ```tsx
+ * import { renderToPlainText, Body, Row, Column, Paragraph } from "@unlayer/react-elements";
+ *
+ * const text = renderToPlainText(
+ *   <Body mode="email"><Row><Column><Paragraph>Hello World</Paragraph></Column></Row></Body>
+ * );
+ * // "Hello World"
+ * ```
+ */
+declare function renderToPlainText(element: React__default.ReactElement, config?: Partial<UnlayerConfig>): string;
+/**
+ * Result of renderToHtmlParts — head and body as separate strings.
+ */
+interface HtmlParts {
+    /** `<head>` content: `<style>` blocks with component CSS, optional `<script>` tags */
+    head: string;
+    /** `<body>` content: the rendered HTML (same output as `renderToHtml`) */
+    body: string;
+}
+/**
+ * Renders an Unlayer element tree to separate head and body HTML strings.
+ *
+ * This is the recommended API for sending emails, because email clients need
+ * the `<style>` block in `<head>` for hover effects, responsive breakpoints,
+ * and font declarations that cannot be expressed as inline styles.
+ *
+ * - `head` contains `<style>` tags with CSS generated by each component's
+ *   head function (button hover colors, body fonts, link styles, etc.)
+ * - `body` is identical to what `renderToHtml()` returns
+ *
+ * @param element - A React element tree (e.g. `<Email><Row>...</Row></Email>`)
+ * @param config  - Optional config overrides (mode, cdnBaseUrl, etc.)
+ * @returns `{ head, body }` — drop these into your HTML document template
+ *
+ * @example
+ * ```tsx
+ * import { renderToHtmlParts, Email, Row, Column, Button } from "@unlayer/react-elements";
+ *
+ * const { head, body } = renderToHtmlParts(
+ *   <Email>
+ *     <Row><Column><Button>Click</Button></Column></Row>
+ *   </Email>
+ * );
+ *
+ * const html = `<!DOCTYPE html>
+ * <html><head>${head}</head>${body}</html>`;
+ * ```
+ */
+declare function renderToHtmlParts(element: React__default.ReactElement, config?: Partial<UnlayerConfig>): HtmlParts;
+
+/**
+ * renderToJson — Convert a React element tree to Unlayer's DesignJSON format.
+ *
+ * Walks the React element tree statically via React.Children and extracts
+ * values at each level. No HTML rendering is performed.
+ *
+ * Produces the { body: { rows, values }, counters, schemaVersion } structure
+ * that the Unlayer editor uses, enabling round-tripping: build with React
+ * components → export as JSON → load into the Unlayer editor.
+ */
+
+/**
+ * Convert a React element tree to Unlayer's DesignJSON format.
+ *
+ * The root element must be a `<Body>`, `<Email>`, `<Page>`, or `<Document>`.
+ * The tree is walked statically — no HTML rendering is performed.
+ *
+ * @param element - A React element tree with Body > Row > Column > Item structure
+ * @returns DesignJSON object compatible with the Unlayer editor
+ * @throws {Error} If the root element is not a recognized container component
+ *
+ * @example
+ * ```tsx
+ * import { renderToJson, Body, Row, Column, Paragraph } from "@unlayer/react-elements";
+ *
+ * const design = renderToJson(
+ *   <Body backgroundColor="#ffffff" contentWidth="600px">
+ *     <Row>
+ *       <Column>
+ *         <Paragraph>Hello World</Paragraph>
+ *       </Column>
+ *     </Row>
+ *   </Body>
+ * );
+ * ```
+ */
+/**
+ * Convert a single `<Row>` element to Unlayer's row JSON format.
+ *
+ * Use this when targeting a Block Editor, which works with individual rows
+ * rather than full design JSON. For full designs, use `renderToJson` instead.
+ *
+ * @param element - A React element tree with Row > Column > Item structure
+ * @returns A DesignRow object compatible with the Unlayer block editor
+ * @throws {Error} If the element is not a `<Row>`
+ *
+ * @example
+ * ```tsx
+ * import { renderRowToJson, Row, Column, Paragraph } from "@unlayer/react-elements";
+ *
+ * const row = renderRowToJson(
+ *   <Row>
+ *     <Column>
+ *       <Paragraph>Hello World</Paragraph>
+ *     </Column>
+ *   </Row>
+ * );
+ * ```
+ */
+declare function renderRowToJson(element: React__default.ReactElement): DesignRow;
+declare function renderToJson(element: React__default.ReactElement): DesignJSON;
+
+export { Body, Button, type ButtonProps, Column, type ColumnLayout, ColumnLayouts, DEFAULT_CONFIG, type DesignBody, type DesignColumn, type DesignContent, type DesignJSON, type DesignRow, Divider, type DividerProps, Document, type DocumentProps, Email, type EmailProps, Heading, type HeadingProps, type Href, Html, type HtmlParts, type HtmlProps, type Icons, Image, type ImageProps, type LinkStyle, Menu, type MenuItem, type MenuProps, Page, type PageProps, Paragraph, type ParagraphProps, Row, type RowProps, Social, type SocialIcon, type SocialProps, Table, type TableProps, type TextAlign, type UnlayerConfig, UnlayerProvider, type UnlayerProviderProps, type ValidColumnLayout, Video, type VideoProps, type VideoSource, htmlToTextJson, renderRowToJson, renderToHtml, renderToHtmlParts, renderToJson, renderToPlainText, useUnlayerConfig, validateColumnLayout };