@unlayer/react-elements 0.1.8 → 0.1.10

package/dist/index.d.cts

@@ -257,20 +257,69 @@ type ItemProps<TValues> = SemanticProps$1<TValues, React.ReactNode> & {
     style?: React.CSSProperties;
     mode?: "web" | "email" | "document";
 };
+/** fontFamily accepts a ready stack object or a bare family-name string. */
+type FontFamilyInput = {
+    label: string;
+    value: string;
+} | string;
+/** fontWeight accepts a number, a numeric string, or a CSS keyword. */
+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 & {});
+/** Heading levels (h1–h6). */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Shared text/style props, agent-friendly (replace the loose `any` flat keys). */
+type TextStyleProps = {
+    fontFamily?: FontFamilyInput;
+    fontWeight?: FontWeightInput;
+    fontSize?: SizeInput;
+    lineHeight?: SizeInput;
+    /** Letter spacing — a CSS string ("0.5px", "-0.01em") or a number (px). */
+    letterSpacing?: SizeInput;
+    color?: string;
+};
+/** Image `src` accepts a plain URL string or the value object (loosened sizing). */
+type ImageSrcInput = string | {
+    url: string;
+    width?: SizeInput;
+    height?: number;
+    autoWidth?: boolean;
+    maxWidth?: SizeInput;
+    [key: string]: unknown;
+};
 /** Button component props */
-type ButtonProps = ItemProps<ButtonValues>;
+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 = ItemProps<HeadingValues>;
+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 = ItemProps<ParagraphValues>;
+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 = ItemProps<ImageValues> & {
+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> & {
@@ -338,6 +387,14 @@ type ItemComponentProps<TSemanticProps> = BaseItemComponentProps & TSemanticProp
  */
 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 & {
+    /** Display width — a number/px pins the button; "100%" makes it full-width. */
+    width?: SizeInput;
+};
 /**
  * Button - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -375,7 +432,7 @@ type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
  * </Button>
  * ```
  */
-declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>>;
+declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
 
 /**
  * Divider - Universal SSR/Client Component with Automatic Semantic Props
@@ -395,6 +452,18 @@ declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>
  */
 declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
 
+/**
+ * Heading semantic props — agent-friendly text/style types (replacing the loose
+ * `any` flat props) plus the `level` alias and h1–h6 levels.
+ */
+type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
+    /** Heading level h1–h6. */
+    headingType?: HeadingLevel;
+    /** Alias for `headingType`. */
+    level?: HeadingLevel;
+    /** Heading text (or use children). */
+    text?: string;
+};
 /**
  * Heading - Universal SSR/Client Component with Semantic Props API
  *
@@ -415,7 +484,7 @@ declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues
  * <Heading values={{ headingType: "h1", color: "#222" }}>Welcome</Heading>
  * ```
  */
-declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues>>>;
+declare const Heading: React$1.FC<ItemComponentProps<HeadingSemanticProps>>;
 
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
@@ -432,9 +501,20 @@ declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues
  */
 declare const Html: React$1.FC<ItemComponentProps<SemanticProps<HtmlValues>>>;
 
-type ImageSemanticProps = SemanticProps<ImageValues> & {
+/**
+ * Image semantic props — agent-friendly `src` (plain URL string or value object)
+ * and CSS-style sizing (number/px pins, "50%" sets a percentage), replacing the
+ * loose `any` flat props.
+ */
+type ImageSemanticProps = Omit<SemanticProps<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;
 };
 /**
  * Image - Renders an image element.
@@ -479,6 +559,14 @@ type MenuSemanticProps = SemanticProps<MenuValues> & {
  */
 declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
 
+/**
+ * Paragraph semantic props — agent-friendly text/style types (replacing the
+ * loose `any` flat props) plus the `text` shorthand (converted to textJson).
+ */
+type ParagraphSemanticProps = Omit<SemanticProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
+    /** Plain-text content (or use `html` for inline formatting, or children). */
+    text?: string;
+};
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -499,7 +587,7 @@ declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
  * <Paragraph values={{ textJson: "...", color: "#555" }} />
  * ```
  */
-declare const Paragraph: React$1.FC<ItemComponentProps<SemanticProps<ParagraphValues>>>;
+declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
 type SocialSemanticProps = SemanticProps<SocialValues> & {
     /** Social icons shorthand (array of {name, url}) */
@@ -578,7 +666,7 @@ type VideoSemanticProps = SemanticProps<VideoValues> & {
  */
 declare const Video: React$1.FC<ItemComponentProps<VideoSemanticProps>>;
 
-interface RowProps extends SemanticProps<RowValues> {
+type RowProps = Omit<SemanticProps<RowValues>, "padding"> & {
     children?: React__default.ReactNode;
     layout?: ColumnLayout;
     cells?: number[];
@@ -588,12 +676,14 @@ interface RowProps extends SemanticProps<RowValues> {
     index?: number;
     bodyValues?: any;
     collection?: string;
+    /** Padding — a CSS string ("0 48px", "20px 40px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body */
     _config?: UnlayerConfig;
-}
+};
 declare const Row: React__default.FC<RowProps>;
 
-interface ColumnProps extends SemanticProps<ColumnValues> {
+type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
     children?: React__default.ReactNode;
     index?: number;
     cells?: number[];
@@ -602,12 +692,14 @@ interface ColumnProps extends SemanticProps<ColumnValues> {
     mode?: RenderMode;
     className?: string;
     style?: React__default.CSSProperties;
+    /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
     _config?: UnlayerConfig;
-}
+};
 declare const Column: React__default.FC<ColumnProps>;
 
-interface BodyProps extends SemanticProps<BodyValues> {
+type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
     children?: React__default.ReactNode;
     mode?: RenderMode;
     className?: string;
@@ -617,7 +709,9 @@ interface BodyProps extends SemanticProps<BodyValues> {
     config?: Partial<UnlayerConfig>;
     /** Preview text shown in email client inboxes (email mode only) */
     previewText?: string;
-}
+    /** Padding — a CSS string ("0 48px", "20px") or a number (px). */
+    padding?: SizeInput;
+};
 /**
  * Body - Universal Server/Client Component
  *

package/dist/index.d.ts

@@ -257,20 +257,69 @@ type ItemProps<TValues> = SemanticProps$1<TValues, React.ReactNode> & {
     style?: React.CSSProperties;
     mode?: "web" | "email" | "document";
 };
+/** fontFamily accepts a ready stack object or a bare family-name string. */
+type FontFamilyInput = {
+    label: string;
+    value: string;
+} | string;
+/** fontWeight accepts a number, a numeric string, or a CSS keyword. */
+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 & {});
+/** Heading levels (h1–h6). */
+type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** Shared text/style props, agent-friendly (replace the loose `any` flat keys). */
+type TextStyleProps = {
+    fontFamily?: FontFamilyInput;
+    fontWeight?: FontWeightInput;
+    fontSize?: SizeInput;
+    lineHeight?: SizeInput;
+    /** Letter spacing — a CSS string ("0.5px", "-0.01em") or a number (px). */
+    letterSpacing?: SizeInput;
+    color?: string;
+};
+/** Image `src` accepts a plain URL string or the value object (loosened sizing). */
+type ImageSrcInput = string | {
+    url: string;
+    width?: SizeInput;
+    height?: number;
+    autoWidth?: boolean;
+    maxWidth?: SizeInput;
+    [key: string]: unknown;
+};
 /** Button component props */
-type ButtonProps = ItemProps<ButtonValues>;
+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 = ItemProps<HeadingValues>;
+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 = ItemProps<ParagraphValues>;
+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 = ItemProps<ImageValues> & {
+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> & {
@@ -338,6 +387,14 @@ type ItemComponentProps<TSemanticProps> = BaseItemComponentProps & TSemanticProp
  */
 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 & {
+    /** Display width — a number/px pins the button; "100%" makes it full-width. */
+    width?: SizeInput;
+};
 /**
  * Button - Universal SSR/Client Component with Automatic Semantic Props
  *
@@ -375,7 +432,7 @@ type SemanticProps<T> = SemanticProps$1<T, React.ReactNode>;
  * </Button>
  * ```
  */
-declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>>;
+declare const Button: React$1.FC<ItemComponentProps<ButtonSemanticProps>>;
 
 /**
  * Divider - Universal SSR/Client Component with Automatic Semantic Props
@@ -395,6 +452,18 @@ declare const Button: React$1.FC<ItemComponentProps<SemanticProps<ButtonValues>>
  */
 declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues>>>;
 
+/**
+ * Heading semantic props — agent-friendly text/style types (replacing the loose
+ * `any` flat props) plus the `level` alias and h1–h6 levels.
+ */
+type HeadingSemanticProps = Omit<SemanticProps<HeadingValues>, keyof TextStyleProps | "headingType"> & TextStyleProps & {
+    /** Heading level h1–h6. */
+    headingType?: HeadingLevel;
+    /** Alias for `headingType`. */
+    level?: HeadingLevel;
+    /** Heading text (or use children). */
+    text?: string;
+};
 /**
  * Heading - Universal SSR/Client Component with Semantic Props API
  *
@@ -415,7 +484,7 @@ declare const Divider: React$1.FC<ItemComponentProps<SemanticProps<DividerValues
  * <Heading values={{ headingType: "h1", color: "#222" }}>Welcome</Heading>
  * ```
  */
-declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues>>>;
+declare const Heading: React$1.FC<ItemComponentProps<HeadingSemanticProps>>;
 
 /**
  * Html - Universal SSR/Client Component for custom HTML with Automatic Semantic Props
@@ -432,9 +501,20 @@ declare const Heading: React$1.FC<ItemComponentProps<SemanticProps<HeadingValues
  */
 declare const Html: React$1.FC<ItemComponentProps<SemanticProps<HtmlValues>>>;
 
-type ImageSemanticProps = SemanticProps<ImageValues> & {
+/**
+ * Image semantic props — agent-friendly `src` (plain URL string or value object)
+ * and CSS-style sizing (number/px pins, "50%" sets a percentage), replacing the
+ * loose `any` flat props.
+ */
+type ImageSemanticProps = Omit<SemanticProps<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;
 };
 /**
  * Image - Renders an image element.
@@ -479,6 +559,14 @@ type MenuSemanticProps = SemanticProps<MenuValues> & {
  */
 declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
 
+/**
+ * Paragraph semantic props — agent-friendly text/style types (replacing the
+ * loose `any` flat props) plus the `text` shorthand (converted to textJson).
+ */
+type ParagraphSemanticProps = Omit<SemanticProps<ParagraphValues>, keyof TextStyleProps> & TextStyleProps & {
+    /** Plain-text content (or use `html` for inline formatting, or children). */
+    text?: string;
+};
 /**
  * Paragraph - Universal SSR/Client Component with Semantic Props API
  *
@@ -499,7 +587,7 @@ declare const Menu: React$1.FC<ItemComponentProps<MenuSemanticProps>>;
  * <Paragraph values={{ textJson: "...", color: "#555" }} />
  * ```
  */
-declare const Paragraph: React$1.FC<ItemComponentProps<SemanticProps<ParagraphValues>>>;
+declare const Paragraph: React$1.FC<ItemComponentProps<ParagraphSemanticProps>>;
 
 type SocialSemanticProps = SemanticProps<SocialValues> & {
     /** Social icons shorthand (array of {name, url}) */
@@ -578,7 +666,7 @@ type VideoSemanticProps = SemanticProps<VideoValues> & {
  */
 declare const Video: React$1.FC<ItemComponentProps<VideoSemanticProps>>;
 
-interface RowProps extends SemanticProps<RowValues> {
+type RowProps = Omit<SemanticProps<RowValues>, "padding"> & {
     children?: React__default.ReactNode;
     layout?: ColumnLayout;
     cells?: number[];
@@ -588,12 +676,14 @@ interface RowProps extends SemanticProps<RowValues> {
     index?: number;
     bodyValues?: any;
     collection?: string;
+    /** Padding — a CSS string ("0 48px", "20px 40px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body */
     _config?: UnlayerConfig;
-}
+};
 declare const Row: React__default.FC<RowProps>;
 
-interface ColumnProps extends SemanticProps<ColumnValues> {
+type ColumnProps = Omit<SemanticProps<ColumnValues>, "padding"> & {
     children?: React__default.ReactNode;
     index?: number;
     cells?: number[];
@@ -602,12 +692,14 @@ interface ColumnProps extends SemanticProps<ColumnValues> {
     mode?: RenderMode;
     className?: string;
     style?: React__default.CSSProperties;
+    /** Padding — a CSS string ("0 24px", "10px") or a number (px). */
+    padding?: SizeInput;
     /** @internal - Unlayer config threaded from UnlayerProvider via Body/Row */
     _config?: UnlayerConfig;
-}
+};
 declare const Column: React__default.FC<ColumnProps>;
 
-interface BodyProps extends SemanticProps<BodyValues> {
+type BodyProps = Omit<SemanticProps<BodyValues>, "padding"> & {
     children?: React__default.ReactNode;
     mode?: RenderMode;
     className?: string;
@@ -617,7 +709,9 @@ interface BodyProps extends SemanticProps<BodyValues> {
     config?: Partial<UnlayerConfig>;
     /** Preview text shown in email client inboxes (email mode only) */
     previewText?: string;
-}
+    /** Padding — a CSS string ("0 48px", "20px") or a number (px). */
+    padding?: SizeInput;
+};
 /**
  * Body - Universal Server/Client Component
  *