@pagenflow/email 1.0.1 → 1.1.0

package/dist/components/Body.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+export interface GlobalConfig {
+    color?: string;
+    fontSize?: string;
+    backgroundColor?: string;
+    lineHeight?: string;
+    backgroundImage?: {
+        src?: string;
+        repeat?: string;
+        size?: string;
+        position?: string;
+    };
+}
+export interface BodyProps {
+    children: ReactNode;
+    /** Global configuration from GlobalEditor */
+    config?: GlobalConfig;
+}
+export default function Body({ children, config }: BodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/BodyDev.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { GlobalConfig } from "./Body";
+export interface BodyDevProps {
+    children: ReactNode;
+    /** Global configuration from GlobalEditor */
+    config?: GlobalConfig;
+}
+export default function BodyDev({ children, config }: BodyDevProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Button.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+export interface ButtonConfig {
+    /** The destination URL for the button. Required. */
+    href: string;
+    /** Button text. */
+    children: ReactNode;
+    /** Background color. Required for VML compatibility. */
+    backgroundColor?: string;
+    /** Text color. */
+    color?: string;
+    /** Padding for the button area (e.g., "12px 24px"). */
+    padding?: string;
+    /** Border radius (e.g., "3px"). */
+    borderRadius?: string;
+    /** Width of the button (e.g., "200px" or "100%"). */
+    width?: string;
+    /** Horizontal alignment within the container. */
+    justifyContent?: "start" | "center" | "end";
+}
+export type ButtonProps = {
+    config: ButtonConfig;
+    devMode?: boolean;
+};
+declare function Button({ config, devMode }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Button>;
+export default _default;

package/dist/components/Column.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from "react";
+export interface BackgroundImageType {
+    src: string;
+    repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
+    size?: "auto" | "cover" | "contain";
+    position?: string;
+}
+export interface BorderConfig {
+    width?: string;
+    style?: "solid" | "dashed" | "dotted" | "double";
+    color?: string;
+    top?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    right?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    bottom?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    left?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+}
+export type ColumnConfig = {
+    borderRadius?: string;
+    padding?: string;
+    border?: BorderConfig;
+    alignItems?: "start" | "center" | "end";
+    justifyContent?: "start" | "center" | "end";
+    backgroundColor?: string;
+    backgroundImage?: BackgroundImageType;
+    width?: string;
+    height?: string;
+    gap?: string;
+};
+export type ColumnProps = {
+    children: ReactNode;
+    config: ColumnConfig;
+    devNode?: ReactNode;
+};
+declare function Column({ children, config, devNode }: ColumnProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Column>;
+export default _default;

package/dist/components/Container.d.ts

@@ -0,0 +1,69 @@
+import { ReactNode } from "react";
+export type WidthType = "full" | "fixed";
+export type WidthDistributionType = "equals" | "ratio" | "manual";
+export interface RatioConstraint {
+    mainChildIndex: number;
+    value: [number, number];
+}
+export type ChildrenConstraints = {
+    widthDistributionType: "equals";
+} | {
+    widthDistributionType: "ratio";
+    ratio: RatioConstraint;
+} | {
+    widthDistributionType: "manual";
+    widths: string[];
+};
+export interface BorderConfig {
+    width?: string;
+    style?: "solid" | "dashed" | "dotted" | "double";
+    color?: string;
+    top?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    right?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    bottom?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    left?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+}
+export interface ContainerConfig {
+    widthType: WidthType;
+    childrenConstraints: ChildrenConstraints;
+    shouldWrap?: boolean;
+    borderRadius?: string;
+    border?: BorderConfig;
+    padding?: string;
+    gap?: string;
+    width?: string;
+    height?: string;
+    alignItems?: "start" | "center" | "end";
+    justifyContent?: "start" | "center" | "end";
+    backgroundColor?: string;
+    backgroundImage?: {
+        src: string;
+        repeat?: "no-repeat" | "repeat" | "repeat-x" | "repeat-y";
+        size?: "auto" | "cover" | "contain";
+        position?: string;
+    };
+}
+export type ContainerProps = {
+    config: ContainerConfig;
+    children: ReactNode;
+    devMode?: boolean;
+};
+declare function Container({ children, config, devMode }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Container>;
+export default _default;

package/dist/components/Divider.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+export interface DividerConfig {
+    /** Thickness of the line (e.g., "1px"). */
+    height?: string;
+    /** Color of the line. */
+    color?: string;
+    /** Width of the line (e.g., "100%" or "300px"). */
+    width?: string;
+    /** Spacing above and below the divider (e.g., "20px 0"). */
+    margin?: string;
+    /** Horizontal alignment of the divider. */
+    align?: "left" | "center" | "right";
+}
+export type DividerProps = {
+    config: DividerConfig;
+    devNode?: ReactNode;
+};
+declare function Divider({ config, devNode }: DividerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Divider>;
+export default _default;

package/dist/components/Head.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface HeadProps {
+    /** Additional elements like custom <style> blocks, <title>, etc. */
+    children?: ReactNode;
+    /** Global background color (used in CSS reset). */
+    backgroundColor?: string;
+    /** Subject line for the email title. */
+    title?: string;
+}
+export default function Head({ children, backgroundColor, title, }: HeadProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/HeadDev.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+export interface HeadDevProps {
+    /** Additional elements like custom <style> blocks, <title>, etc. */
+    children?: ReactNode;
+    /** Global background color (used in CSS reset). */
+    backgroundColor?: string;
+    /** Subject line for the email title. */
+    title?: string;
+}
+/**
+ * Dev variant of Head component for use in builder canvas.
+ * Injects styles directly into document head to maintain email behavior during development.
+ */
+export default function HeadDev({ children, backgroundColor, title, }: HeadDevProps): null;

package/dist/components/Heading.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export interface HeadingConfig {
+    /** The text content. */
+    text: ReactNode;
+    /** HTML heading level (h1 through h6). */
+    level?: HeadingLevel;
+    /** Padding around the heading (e.g., "10px 0"). */
+    padding?: string;
+    /** Text color. */
+    color?: string;
+    /** Horizontal text alignment. */
+    textAlign?: "left" | "center" | "right" | "justify";
+    /** Font size (e.g., '24px'). Overrides default size for the level. */
+    fontSize?: string;
+    /** Font weight (e.g., 'normal', 'bold', or '700'). */
+    fontWeight?: string;
+    /** Font style (e.g., 'italic'). */ fontStyle?: string;
+    /** Line height (e.g., '1.3' or '30px'). */
+    lineHeight?: string;
+    /** Letter spacing (e.g., '0.5px', '1px'). */ letterSpacing?: string;
+    /** Text transform (e.g., 'uppercase', 'lowercase', 'capitalize'). */ textTransform?: string;
+    /** Text decoration (e.g., 'underline', 'line-through'). */ textDecoration?: string;
+    /** Text direction (e.g., 'ltr', 'rtl'). */ direction?: string;
+    /** Vertical alignment (e.g., 'sub', 'super'). Applied to content wrapper in Text, applied to TD here for alignment. */ verticalAlign?: string;
+    /** Background color of the heading block. */ backgroundColor?: string;
+}
+export type HeadingProps = {
+    config: HeadingConfig;
+    devMode?: ReactNode;
+};
+declare function Heading({ config, devMode }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Heading>;
+export default _default;

package/dist/components/Html.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export interface HtmlProps {
+    children: ReactNode;
+    backgroundColor?: string;
+}
+export default function Html({ children, backgroundColor, }: HtmlProps): React.DetailedReactHTMLElement<{
+    xmlns: string;
+    "xmlns:v": string;
+    "xmlns:o": string;
+    lang: string;
+    xmlLang: string;
+    bgcolor: string;
+}, HTMLElement>;

package/dist/components/Image.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+export interface ImageConfig {
+    /** The source URL of the image. Required. */
+    src: string;
+    /** Alt text for accessibility. Required. */
+    alt: string;
+    /** Width of the image. Can be fixed (e.g., "600px") or percentage (e.g., "100%"). */
+    width?: string;
+    /** Height of the image. Optional, usually auto-calculated if width is set. */
+    height?: string;
+    /** Background color of the containing TD/parent element if the image has transparency. */
+    backgroundColor?: string;
+    /** Padding around the image (applied to the containing TD). */
+    padding?: string;
+    /** Border radius for the image (CSS only, limited compatibility). */
+    borderRadius?: string;
+    /** Optional URL to make the image clickable */
+    href?: string;
+    /** Link target attribute (e.g., "_blank" for new window) */
+    target?: string;
+}
+export type ImageProps = {
+    config: ImageConfig;
+    devNode?: ReactNode;
+    devMode?: boolean;
+};
+declare function Image({ config, devNode, devMode }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Image>;
+export default _default;

package/dist/components/Row.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from "react";
+export type JustifyContent = "start" | "center" | "end";
+export type AlignItems = "start" | "center" | "end";
+export interface BorderConfig {
+    width?: string;
+    style?: "solid" | "dashed" | "dotted" | "double";
+    color?: string;
+    top?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    right?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    bottom?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    left?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+}
+export interface RowConfig {
+    gap?: string;
+    justifyContent?: JustifyContent;
+    alignItems?: AlignItems;
+    width?: string;
+    height?: string;
+    padding?: string;
+    backgroundColor?: string;
+    borderRadius?: string;
+    border?: BorderConfig;
+}
+export type RowProps = {
+    children: ReactNode;
+    config: RowConfig;
+    devNode?: ReactNode;
+};
+declare function Row({ children, config, devNode }: RowProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Row>;
+export default _default;

package/dist/components/Section.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactNode } from "react";
+export interface BorderConfig {
+    width?: string;
+    style?: "solid" | "dashed" | "dotted" | "double";
+    color?: string;
+    top?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    right?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    bottom?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+    left?: {
+        width: string;
+        style: string;
+        color: string;
+    };
+}
+export type SectionConfig = {
+    sectionType: "header" | "footer" | "content";
+    gap?: string;
+    backgroundColor?: string;
+    padding?: string;
+    border?: BorderConfig;
+    backgroundImage?: {
+        src: string;
+        repeat?: string;
+        size?: string;
+        position?: string;
+    };
+};
+export interface SectionProps {
+    config: SectionConfig;
+    children: ReactNode;
+    devNode?: ReactNode;
+}
+declare const _default: React.NamedExoticComponent<SectionProps>;
+export default _default;

package/dist/components/Spacer.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+export interface SpacerConfig {
+    /** The height of the vertical space (e.g., "20px"). Required. */
+    height: string;
+}
+export type SpacerProps = {
+    config: SpacerConfig;
+    devNode?: ReactNode;
+};
+declare function Spacer({ config, devNode }: SpacerProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Spacer>;
+export default _default;

package/dist/components/Text.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export interface TextConfig {
+    /** The text content or React nodes to render. */
+    text: string;
+    /** Padding around the text (applied to the containing TD). */
+    padding?: string;
+    /** Text color. */
+    color?: string;
+    /** Horizontal text alignment (e.g., 'left', 'center'). */
+    textAlign?: "left" | "center" | "right" | "justify";
+    /** Font size (e.g., '16px'). */
+    fontSize?: string;
+    /** Font weight (e.g., 'bold' or '700'). */
+    fontWeight?: string;
+    /** Font style (e.g., 'italic'). */
+    fontStyle?: string;
+    /** Line height (e.g., '1.5' or '24px'). */
+    lineHeight?: string;
+    /** Letter spacing (e.g., '0.5px', '1px'). */
+    letterSpacing?: string;
+    /** Text transform (e.g., 'uppercase', 'lowercase', 'capitalize'). */
+    textTransform?: string;
+    /** Text decoration (e.g., 'underline', 'line-through'). */
+    textDecoration?: string;
+    /** Text direction (e.g., 'ltr', 'rtl'). */
+    direction?: string;
+    /** Vertical alignment (e.g., 'sub', 'super'). */
+    verticalAlign?: string;
+    /** Background color of the text block. */
+    backgroundColor?: string;
+}
+export type TextProps = {
+    config: TextConfig;
+    devMode?: ReactNode;
+};
+declare function Text({ config, devMode }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Text>;
+export default _default;