@unlayer/react-elements 0.1.10 → 0.1.12

package/dist/index.d.cts

@@ -1,5 +1,7 @@
 import * as React$1 from 'react';
 import React__default from 'react';
+import { ColumnValues } from '@unlayer/types/containers/column';
+export { ColumnValues } from '@unlayer/types/containers/column';
 import { ButtonValues } from '@unlayer/types/tools/button';
 export { ButtonValues } from '@unlayer/types/tools/button';
 import { DividerValues } from '@unlayer/types/tools/divider';
@@ -22,8 +24,6 @@ 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';
@@ -243,20 +243,13 @@ type SemanticProps$1<T, TChildren = any> = FlattenObjectProps<T> & {
 /**
  * Type Definitions
  *
- * Re-exports shared types from @unlayer-internal/shared-elements
- * and defines React-specific component prop types.
+ * Re-exports the canonical value types from @unlayer-internal/shared-elements
+ * and defines the agent-friendly input types components build their props from.
+ *
+ * Each component's prop type (ButtonProps, HeadingProps, …) lives next to its
+ * component — these are just the shared building blocks they share.
  */
 
-/**
- * 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";
-};
 /** fontFamily accepts a ready stack object or a bare family-name string. */
 type FontFamilyInput = {
     label: string;
@@ -266,9 +259,20 @@ type FontFamilyInput = {
 type FontWeightInput = number | `${number}` | "normal" | "bold" | "lighter" | "bolder";
 /** A CSS size: a number (treated as px) or a string ("24px", "50%", "1.5em"). */
 type SizeInput = number | (string & {});
+/**
+ * The `border` object, agent-friendly. The canonical type pins each per-side
+ * `*Width` to `${number}px`, so a literal like "1px" type-checks inline but a
+ * factored-out object widens "1px" to `string` and stops compiling — exactly the
+ * reusable-divider pattern authors reach for. Relax the `*Width` fields to
+ * SizeInput (the runtime accepts any CSS string), derived from the canonical
+ * shape so it tracks the schema instead of duplicating it.
+ */
+type BorderInput = {
+    [K in keyof NonNullable<ColumnValues["border"]>]?: K extends `${string}Width` ? SizeInput : NonNullable<ColumnValues["border"]>[K];
+};
 /** Heading levels (h1–h6). */
 type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-/** Shared text/style props, agent-friendly (replace the loose `any` flat keys). */
+/** Shared text/style inputs, agent-friendly. */
 type TextStyleProps = {
     fontFamily?: FontFamilyInput;
     fontWeight?: FontWeightInput;
@@ -287,64 +291,6 @@ type ImageSrcInput = string | {
     maxWidth?: SizeInput;
     [key: string]: unknown;
 };
-/** Button component props */
-type ButtonProps = Omit<ItemProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
-    /** Display width — a number/px pins the button; "100%" makes it full-width. */
-    width?: SizeInput;
-};
-/** Heading component props */
-type HeadingProps = Omit<ItemProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
-    /** Heading level h1–h6. */
-    headingType?: HeadingLevel;
-    /** Alias for `headingType`. */
-    level?: HeadingLevel;
-    /** Heading text (or use children). */
-    text?: string;
-};
-/** Divider component props */
-type DividerProps = ItemProps<DividerValues>;
-/** HTML component props */
-type HtmlProps = ItemProps<HtmlValues>;
-/** Paragraph component props */
-type ParagraphProps = Omit<ItemProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
-    /** Plain-text content (or use `html` for inline formatting, or children). */
-    text?: string;
-};
-/** Image component props — supports `alt` shorthand for `altText`. */
-type ImageProps = Omit<ItemProps<ImageValues>, "src" | "width" | "maxWidth"> & {
-    /** Alt text (alias for altText) */
-    alt?: string;
-    /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
-    src?: ImageSrcInput;
-    /** Display width — number/px pins the image; "50%" sets a percentage width. */
-    width?: SizeInput;
-    /** Display width as a CSS value ("50%", "300px"). */
-    maxWidth?: SizeInput;
-};
-/** 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
@@ -391,10 +337,22 @@ type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
  * Button semantic props — agent-friendly text/style types (replacing the loose
  * `any` flat props) plus a CSS-style `width` (number/px pins; "100%" full-width).
  */
-type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
+type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProps | "width" | "padding" | "borderRadius" | "border"> & TextStyleProps & {
     /** Display width — a number/px pins the button; "100%" makes it full-width. */
     width?: SizeInput;
+    /** Inner padding — a number (→ px) or CSS string ("14px 28px"). */
+    padding?: SizeInput;
+    /** Corner radius — a number (→ px) or CSS string ("8px", "500px"). */
+    borderRadius?: SizeInput;
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
 };
+/**
+ * Button Component Props
+ * Automatically provides autocomplete for ALL properties (flat and nested)
+ */
+interface ButtonProps extends ItemComponentProps<ButtonSemanticProps> {
+}
 /**
  * Button - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -434,6 +392,12 @@ type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProp
  */
 declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
 
+type DividerSemanticProps = Omit<SemanticProps<DividerValues>, "border"> & {
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
+};
+interface DividerProps extends ItemComponentProps<DividerSemanticProps> {
+}
 /**
  * Divider - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -450,7 +414,7 @@ declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
  * }} />
  * ```
  */
-declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
+declare const Divider: React$1.FC<ItemComponentProps<DividerSemanticProps>>;
 
 /**
  * Heading semantic props — agent-friendly text/style types (replacing the loose
@@ -464,6 +428,12 @@ type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStylePr
     /** Heading text (or use children). */
     text?: string;
 };
+/**
+ * Heading Component Props
+ * Automatically provides autocomplete for ALL properties (flat and nested)
+ */
+interface HeadingProps extends ItemComponentProps<HeadingSemanticProps> {
+}
 /**
  * Heading - Universal SSR/Client Component with Semantic Props API
  *
@@ -486,6 +456,8 @@ type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStylePr
  */
 declare const Heading: React$1.FC<ItemComponentProps<HeadingSemanticProps>>;
 
+interface HtmlProps extends ItemComponentProps<SemanticProps<HtmlValues>> {
+}
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
  *
@@ -516,6 +488,8 @@ type ImageSemanticProps = Omit<SemanticProps<ImageValues>, "src" | "width" | "ma
     /** Display width as a CSS value ("50%", "300px"). */
     maxWidth?: SizeInput;
 };
+interface ImageProps extends ItemComponentProps<ImageSemanticProps> {
+}
 /**
  * Image - Renders an image element.
  *
@@ -534,10 +508,14 @@ type ImageSemanticProps = Omit<SemanticProps<ImageValues>, "src" | "width" | "ma
  */
 declare const Image: React$1.FC<ItemComponentProps<ImageSemanticProps>>;
 
-type MenuSemanticProps = SemanticProps<MenuValues> & {
+type MenuSemanticProps = Omit<SemanticProps<MenuValues>, "padding" | "fontFamily" | "fontWeight" | "fontSize" | "letterSpacing"> & Omit<TextStyleProps, "color" | "lineHeight"> & {
     /** Menu items shorthand */
     items?: MenuItem[];
+    /** Inner padding — a number (→ px) or CSS string. */
+    padding?: SizeInput;
 };
+interface MenuProps extends ItemComponentProps<MenuSemanticProps> {
+}
 /**
  * Menu - Renders a navigation menu.
  *
@@ -567,6 +545,12 @@ type ParagraphSemanticProps = Omit<SemanticProps<ParagraphValues>, keyof TextSty
     /** Plain-text content (or use `html` for inline formatting, or children). */
     text?: string;
 };
+/**
+ * Paragraph Component Props
+ * Automatically provides autocomplete for ALL properties (flat and nested)
+ */
+interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
+}
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -595,6 +579,10 @@ type SocialSemanticProps = SemanticProps<SocialValues> & {
     /** Icon shape */
     iconType?: "circle" | "rounded" | "squared";
 };
+interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons"> {
+    icons?: SocialIcon[] | SocialValues["icons"];
+    iconType?: "circle" | "rounded" | "squared";
+}
 /**
  * Social - Renders social-media icon links.
  *
@@ -615,12 +603,24 @@ type SocialSemanticProps = SemanticProps<SocialValues> & {
  */
 declare const Social: React$1.FC<ItemComponentProps<SocialSemanticProps>>;
 
-type TableSemanticProps = SemanticProps<TableValues> & {
+type TableSemanticProps = Omit<SemanticProps<TableValues>, "padding" | "border"> & {
     /** Column headers as string[] */
     headers?: string[];
     /** Row data as 2D string array */
     data?: string[][];
+    /** Inner padding — a number (→ px) or CSS string. */
+    padding?: SizeInput;
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
 };
+interface TableProps extends Omit<ItemComponentProps<Omit<SemanticProps<TableValues>, "padding" | "border">>, "headers" | "data"> {
+    headers?: string[];
+    data?: string[][];
+    /** Inner padding — a number (→ px) or CSS string. */
+    padding?: SizeInput;
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
+}
 /**
  * Table - Renders a data table.
  *
@@ -649,6 +649,9 @@ type VideoSemanticProps = SemanticProps<VideoValues> & {
     /** YouTube/Vimeo URL (auto-parsed) */
     videoUrl?: string;
 };
+interface VideoProps extends ItemComponentProps<SemanticProps<VideoValues>> {
+    videoUrl?: string;
+}
 /**
  * Video - Renders an embedded video player (YouTube/Vimeo).
  *
@@ -683,7 +686,7 @@ type RowProps = Omit<SemanticProps<RowValues>, "padding"> & {
 };
 declare const Row: React__default.FC<RowProps>;
 
-type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
+type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding" | "border" | "borderRadius"> & {
     children?: React__default.ReactNode;
     index?: number;
     cells?: number[];
@@ -694,12 +697,17 @@ type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
     style?: React__default.CSSProperties;
     /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
     padding?: SizeInput;
+    /** Corner radius — a number (→ px) or CSS string ("8px"). */
+    borderRadius?: SizeInput;
+    /** Per-side border object (great for hairline dividers). Width fields accept
+     *  a number/px string; reuse it as a factored-out const without `as const`. */
+    border?: BorderInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
     _config?: UnlayerConfig;
 };
 declare const Column: React__default.FC<ColumnProps>;
 
-type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
+type BodyProps = Omit<SemanticProps<BodyValues>, "padding" | "borderRadius"> & {
     children?: React__default.ReactNode;
     mode?: RenderMode;
     className?: string;
@@ -711,6 +719,8 @@ type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
     previewText?: string;
     /** Padding — a CSS string ("0 48px", "20px") or a number (px). */
     padding?: SizeInput;
+    /** Corner radius — a number (→ px) or CSS string ("8px"). */
+    borderRadius?: SizeInput;
 };
 /**
  * Body - Universal Server/Client Component

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import * as React$1 from 'react';
 import React__default from 'react';
+import { ColumnValues } from '@unlayer/types/containers/column';
+export { ColumnValues } from '@unlayer/types/containers/column';
 import { ButtonValues } from '@unlayer/types/tools/button';
 export { ButtonValues } from '@unlayer/types/tools/button';
 import { DividerValues } from '@unlayer/types/tools/divider';
@@ -22,8 +24,6 @@ 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';
@@ -243,20 +243,13 @@ type SemanticProps$1<T, TChildren = any> = FlattenObjectProps<T> & {
 /**
  * Type Definitions
  *
- * Re-exports shared types from @unlayer-internal/shared-elements
- * and defines React-specific component prop types.
+ * Re-exports the canonical value types from @unlayer-internal/shared-elements
+ * and defines the agent-friendly input types components build their props from.
+ *
+ * Each component's prop type (ButtonProps, HeadingProps, …) lives next to its
+ * component — these are just the shared building blocks they share.
  */
 
-/**
- * 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";
-};
 /** fontFamily accepts a ready stack object or a bare family-name string. */
 type FontFamilyInput = {
     label: string;
@@ -266,9 +259,20 @@ type FontFamilyInput = {
 type FontWeightInput = number | `${number}` | "normal" | "bold" | "lighter" | "bolder";
 /** A CSS size: a number (treated as px) or a string ("24px", "50%", "1.5em"). */
 type SizeInput = number | (string & {});
+/**
+ * The `border` object, agent-friendly. The canonical type pins each per-side
+ * `*Width` to `${number}px`, so a literal like "1px" type-checks inline but a
+ * factored-out object widens "1px" to `string` and stops compiling — exactly the
+ * reusable-divider pattern authors reach for. Relax the `*Width` fields to
+ * SizeInput (the runtime accepts any CSS string), derived from the canonical
+ * shape so it tracks the schema instead of duplicating it.
+ */
+type BorderInput = {
+    [K in keyof NonNullable<ColumnValues["border"]>]?: K extends `${string}Width` ? SizeInput : NonNullable<ColumnValues["border"]>[K];
+};
 /** Heading levels (h1–h6). */
 type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-/** Shared text/style props, agent-friendly (replace the loose `any` flat keys). */
+/** Shared text/style inputs, agent-friendly. */
 type TextStyleProps = {
     fontFamily?: FontFamilyInput;
     fontWeight?: FontWeightInput;
@@ -287,64 +291,6 @@ type ImageSrcInput = string | {
     maxWidth?: SizeInput;
     [key: string]: unknown;
 };
-/** Button component props */
-type ButtonProps = Omit<ItemProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
-    /** Display width — a number/px pins the button; "100%" makes it full-width. */
-    width?: SizeInput;
-};
-/** Heading component props */
-type HeadingProps = Omit<ItemProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
-    /** Heading level h1–h6. */
-    headingType?: HeadingLevel;
-    /** Alias for `headingType`. */
-    level?: HeadingLevel;
-    /** Heading text (or use children). */
-    text?: string;
-};
-/** Divider component props */
-type DividerProps = ItemProps<DividerValues>;
-/** HTML component props */
-type HtmlProps = ItemProps<HtmlValues>;
-/** Paragraph component props */
-type ParagraphProps = Omit<ItemProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
-    /** Plain-text content (or use `html` for inline formatting, or children). */
-    text?: string;
-};
-/** Image component props — supports `alt` shorthand for `altText`. */
-type ImageProps = Omit<ItemProps<ImageValues>, "src" | "width" | "maxWidth"> & {
-    /** Alt text (alias for altText) */
-    alt?: string;
-    /** Image URL string, or the value object `{ url, width?, maxWidth?, ... }`. */
-    src?: ImageSrcInput;
-    /** Display width — number/px pins the image; "50%" sets a percentage width. */
-    width?: SizeInput;
-    /** Display width as a CSS value ("50%", "300px"). */
-    maxWidth?: SizeInput;
-};
-/** 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
@@ -391,10 +337,22 @@ type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
  * Button semantic props — agent-friendly text/style types (replacing the loose
  * `any` flat props) plus a CSS-style `width` (number/px pins; "100%" full-width).
  */
-type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProps | "width"> & TextStyleProps & {
+type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProps | "width" | "padding" | "borderRadius" | "border"> & TextStyleProps & {
     /** Display width — a number/px pins the button; "100%" makes it full-width. */
     width?: SizeInput;
+    /** Inner padding — a number (→ px) or CSS string ("14px 28px"). */
+    padding?: SizeInput;
+    /** Corner radius — a number (→ px) or CSS string ("8px", "500px"). */
+    borderRadius?: SizeInput;
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
 };
+/**
+ * Button Component Props
+ * Automatically provides autocomplete for ALL properties (flat and nested)
+ */
+interface ButtonProps extends ItemComponentProps<ButtonSemanticProps> {
+}
 /**
  * Button - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -434,6 +392,12 @@ type ButtonSemanticProps = Omit<SemanticProps<ButtonValues>, keyof TextStyleProp
  */
 declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
 
+type DividerSemanticProps = Omit<SemanticProps<DividerValues>, "border"> & {
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
+};
+interface DividerProps extends ItemComponentProps<DividerSemanticProps> {
+}
 /**
  * Divider - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -450,7 +414,7 @@ declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
  * }} />
  * ```
  */
-declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
+declare const Divider: React$1.FC<ItemComponentProps<DividerSemanticProps>>;
 
 /**
  * Heading semantic props — agent-friendly text/style types (replacing the loose
@@ -464,6 +428,12 @@ type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStylePr
     /** Heading text (or use children). */
     text?: string;
 };
+/**
+ * Heading Component Props
+ * Automatically provides autocomplete for ALL properties (flat and nested)
+ */
+interface HeadingProps extends ItemComponentProps<HeadingSemanticProps> {
+}
 /**
  * Heading - Universal SSR/Client Component with Semantic Props API
  *
@@ -486,6 +456,8 @@ type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStylePr
  */
 declare const Heading: React$1.FC<ItemComponentProps<HeadingSemanticProps>>;
 
+interface HtmlProps extends ItemComponentProps<SemanticProps<HtmlValues>> {
+}
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
  *
@@ -516,6 +488,8 @@ type ImageSemanticProps = Omit<SemanticProps<ImageValues>, "src" | "width" | "ma
     /** Display width as a CSS value ("50%", "300px"). */
     maxWidth?: SizeInput;
 };
+interface ImageProps extends ItemComponentProps<ImageSemanticProps> {
+}
 /**
  * Image - Renders an image element.
  *
@@ -534,10 +508,14 @@ type ImageSemanticProps = Omit<SemanticProps<ImageValues>, "src" | "width" | "ma
  */
 declare const Image: React$1.FC<ItemComponentProps<ImageSemanticProps>>;
 
-type MenuSemanticProps = SemanticProps<MenuValues> & {
+type MenuSemanticProps = Omit<SemanticProps<MenuValues>, "padding" | "fontFamily" | "fontWeight" | "fontSize" | "letterSpacing"> & Omit<TextStyleProps, "color" | "lineHeight"> & {
     /** Menu items shorthand */
     items?: MenuItem[];
+    /** Inner padding — a number (→ px) or CSS string. */
+    padding?: SizeInput;
 };
+interface MenuProps extends ItemComponentProps<MenuSemanticProps> {
+}
 /**
  * Menu - Renders a navigation menu.
  *
@@ -567,6 +545,12 @@ type ParagraphSemanticProps = Omit<SemanticProps<ParagraphValues>, keyof TextSty
     /** Plain-text content (or use `html` for inline formatting, or children). */
     text?: string;
 };
+/**
+ * Paragraph Component Props
+ * Automatically provides autocomplete for ALL properties (flat and nested)
+ */
+interface ParagraphProps extends ItemComponentProps<ParagraphSemanticProps> {
+}
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -595,6 +579,10 @@ type SocialSemanticProps = SemanticProps<SocialValues> & {
     /** Icon shape */
     iconType?: "circle" | "rounded" | "squared";
 };
+interface SocialProps extends Omit<ItemComponentProps<SemanticProps<SocialValues>>, "icons"> {
+    icons?: SocialIcon[] | SocialValues["icons"];
+    iconType?: "circle" | "rounded" | "squared";
+}
 /**
  * Social - Renders social-media icon links.
  *
@@ -615,12 +603,24 @@ type SocialSemanticProps = SemanticProps<SocialValues> & {
  */
 declare const Social: React$1.FC<ItemComponentProps<SocialSemanticProps>>;
 
-type TableSemanticProps = SemanticProps<TableValues> & {
+type TableSemanticProps = Omit<SemanticProps<TableValues>, "padding" | "border"> & {
     /** Column headers as string[] */
     headers?: string[];
     /** Row data as 2D string array */
     data?: string[][];
+    /** Inner padding — a number (→ px) or CSS string. */
+    padding?: SizeInput;
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
 };
+interface TableProps extends Omit<ItemComponentProps<Omit<SemanticProps<TableValues>, "padding" | "border">>, "headers" | "data"> {
+    headers?: string[];
+    data?: string[][];
+    /** Inner padding — a number (→ px) or CSS string. */
+    padding?: SizeInput;
+    /** Per-side border object (width fields accept a number/px string). */
+    border?: BorderInput;
+}
 /**
  * Table - Renders a data table.
  *
@@ -649,6 +649,9 @@ type VideoSemanticProps = SemanticProps<VideoValues> & {
     /** YouTube/Vimeo URL (auto-parsed) */
     videoUrl?: string;
 };
+interface VideoProps extends ItemComponentProps<SemanticProps<VideoValues>> {
+    videoUrl?: string;
+}
 /**
  * Video - Renders an embedded video player (YouTube/Vimeo).
  *
@@ -683,7 +686,7 @@ type RowProps = Omit<SemanticProps<RowValues>, "padding"> & {
 };
 declare const Row: React__default.FC<RowProps>;
 
-type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
+type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding" | "border" | "borderRadius"> & {
     children?: React__default.ReactNode;
     index?: number;
     cells?: number[];
@@ -694,12 +697,17 @@ type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
     style?: React__default.CSSProperties;
     /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
     padding?: SizeInput;
+    /** Corner radius — a number (→ px) or CSS string ("8px"). */
+    borderRadius?: SizeInput;
+    /** Per-side border object (great for hairline dividers). Width fields accept
+     *  a number/px string; reuse it as a factored-out const without `as const`. */
+    border?: BorderInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
     _config?: UnlayerConfig;
 };
 declare const Column: React__default.FC<ColumnProps>;
 
-type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
+type BodyProps = Omit<SemanticProps<BodyValues>, "padding" | "borderRadius"> & {
     children?: React__default.ReactNode;
     mode?: RenderMode;
     className?: string;
@@ -711,6 +719,8 @@ type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
     previewText?: string;
     /** Padding — a CSS string ("0 48px", "20px") or a number (px). */
     padding?: SizeInput;
+    /** Corner radius — a number (→ px) or CSS string ("8px"). */
+    borderRadius?: SizeInput;
 };
 /**
  * Body - Universal Server/Client Component

package/dist/index.js

@@ -1546,6 +1546,29 @@ function getDisplayName2(element) {
   const type = element.type;
   return type?.displayName || type?.name;
 }
+var VALID_ROOTS = /* @__PURE__ */ new Set(["Body", "Email", "Page", "Document"]);
+function unwrapRoot(element) {
+  let current = element;
+  for (let depth = 0; depth < 10; depth++) {
+    const name = getDisplayName2(current);
+    if (name && VALID_ROOTS.has(name)) break;
+    const type = current.type;
+    const isPlainFunctionComponent = typeof type === "function" && !type.prototype?.isReactComponent;
+    if (!isPlainFunctionComponent) break;
+    let produced;
+    try {
+      produced = type({ ...current.props });
+    } catch (cause) {
+      const detail = cause instanceof Error ? cause.message : String(cause);
+      throw new Error(
+        `[Unlayer] renderToJson: could not unwrap <${name || "wrapper"}>. A wrapper must be a plain component that synchronously returns a root (<Email>, <Page>, <Document>, or <Body>) and uses no React hooks. Pass the root element directly \u2014 e.g. renderToJson(<Email>\u2026</Email>). (${detail})`
+      );
+    }
+    if (!React.isValidElement(produced)) break;
+    current = produced;
+  }
+  return current;
+}
 function collectChildren2(node) {
   const result = [];
   React.Children.forEach(node, (child) => {
@@ -1762,9 +1785,9 @@ function renderRowToJson(element) {
   return processRow(element, counters);
 }
 function renderToJson(element) {
+  element = unwrapRoot(element);
   const displayName = getDisplayName2(element);
-  const validRoots = /* @__PURE__ */ new Set(["Body", "Email", "Page", "Document"]);
-  if (!displayName || !validRoots.has(displayName)) {
+  if (!displayName || !VALID_ROOTS.has(displayName)) {
     throw new Error(
       `[Unlayer] renderToJson: Root element must be <Body>, <Email>, <Page>, or <Document>, but got <${displayName || "unknown"}>. Wrap your content: <Body><Row><Column>...</Column></Row></Body>`
     );