react-tailwind-email-editor 0.0.1

package/dist/index.d.cts

@@ -0,0 +1,694 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SerializedNodes } from '@craftjs/core';
+
+interface EditorComponentConfig {
+    /** The React component to render in the editor canvas */
+    component: React.ComponentType<any>;
+    /** Display name in the toolbox */
+    label: string;
+    /** Short description shown below the label */
+    description?: string;
+    /** Lucide icon or custom icon component */
+    icon?: LucideIcon | React.ComponentType<{
+        className?: string;
+    }>;
+    /** Category grouping in the toolbox */
+    category?: string;
+    /** Default element to create when dragged (JSX element). If not provided, creates <Component /> */
+    createElement?: () => React.ReactElement;
+}
+type ComponentRegistry = Record<string, EditorComponentConfig>;
+interface EditorThemeColors {
+    /** Primary accent color */
+    primary?: string;
+    /** Primary foreground (text on primary) */
+    primaryForeground?: string;
+    /** Background color of sidebars and panels */
+    panelBackground?: string;
+    /** Canvas/workspace background */
+    canvasBackground?: string;
+    /** Border color for panels and components */
+    border?: string;
+    /** Muted background for inactive elements */
+    muted?: string;
+    /** Text color for muted/secondary text */
+    mutedForeground?: string;
+    /** Destructive/delete action color */
+    destructive?: string;
+    /** Foreground/text color */
+    foreground?: string;
+    /** Background color */
+    background?: string;
+}
+interface EditorTheme {
+    /** Custom color overrides */
+    colors?: EditorThemeColors;
+    /** Border radius for UI elements */
+    borderRadius?: number;
+    /** Font family for editor UI */
+    fontFamily?: string;
+    /** Paper/canvas width in pixels */
+    paperWidth?: number;
+    /** Paper minimum height in pixels */
+    paperMinHeight?: number;
+    /** Paper default background */
+    paperBackground?: string;
+}
+interface EditorSlots {
+    /** Custom toolbar component (replaces the entire top bar) */
+    toolbar?: React.ComponentType<ToolbarSlotProps>;
+    /** Custom toolbox/sidebar component */
+    toolbox?: React.ComponentType<ToolboxSlotProps>;
+    /** Custom settings panel component */
+    settingsPanel?: React.ComponentType<SettingsPanelSlotProps>;
+    /** Custom empty state for settings panel when nothing is selected */
+    settingsEmptyState?: React.ComponentType;
+    /** Custom render node wrapper */
+    renderNode?: React.ComponentType<{
+        render: React.ReactNode;
+    }>;
+    /** Custom export dialog content */
+    exportDialog?: React.ComponentType<ExportDialogSlotProps>;
+    /** Custom preview dialog content */
+    previewDialog?: React.ComponentType<PreviewDialogSlotProps>;
+}
+interface ToolbarSlotProps {
+    onExport: () => string;
+    onPreview: () => string;
+    onClear: () => void;
+    title?: string;
+    logo?: React.ReactNode;
+}
+interface ToolboxSlotProps {
+    components: ComponentRegistry;
+    categories: string[];
+}
+interface SettingsPanelSlotProps {
+    selectedId?: string;
+    selectedName?: string;
+    selectedSettings?: React.ComponentType;
+    onDelete?: () => void;
+    onDuplicate?: () => void;
+    onMoveUp?: () => void;
+    onMoveDown?: () => void;
+}
+interface ExportDialogSlotProps {
+    html: string;
+    onClose: () => void;
+}
+interface PreviewDialogSlotProps {
+    html: string;
+    onClose: () => void;
+}
+interface EmailTemplate {
+    /** Unique template identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Template description */
+    description?: string;
+    /** Lucide icon */
+    icon?: LucideIcon;
+    /** Serialized Craft.js JSON state */
+    data: string;
+}
+interface EditorCallbacks {
+    /** Called when HTML is exported */
+    onExport?: (html: string) => void;
+    /** Called when the editor state changes */
+    onChange?: (serializedState: string) => void;
+    /** Called when a template is loaded */
+    onTemplateLoad?: (templateId: string) => void;
+    /** Called when canvas is cleared */
+    onClear?: () => void;
+}
+type HtmlRenderer = (typeName: string, props: Record<string, unknown>, childrenHtml: string, linkedNodes?: Record<string, string>) => string | null;
+interface EmailEditorProps {
+    /** Additional components to register (merged with built-ins) */
+    components?: ComponentRegistry;
+    /** Replace ALL built-in components (use only your own) */
+    replaceBuiltins?: boolean;
+    /** Theme customization */
+    theme?: EditorTheme;
+    /** Slot overrides for UI sections */
+    slots?: EditorSlots;
+    /** Pre-defined templates */
+    templates?: EmailTemplate[];
+    /** Event callbacks */
+    callbacks?: EditorCallbacks;
+    /** Initial serialized state to load */
+    initialState?: string;
+    /** Default content to show (JSX children for the Frame) */
+    defaultContent?: React.ReactNode;
+    /** Editor title displayed in the toolbar */
+    title?: string;
+    /** Logo element for the toolbar */
+    logo?: React.ReactNode;
+    /** Custom HTML renderers for export (keyed by component resolved name) */
+    htmlRenderers?: Record<string, HtmlRenderer>;
+    /** Whether to show the toolbar */
+    showToolbar?: boolean;
+    /** Whether to show the left toolbox sidebar */
+    showToolbox?: boolean;
+    /** Whether to show the right settings panel */
+    showSettingsPanel?: boolean;
+    /** Custom class name for the editor root */
+    className?: string;
+    /** Custom inline styles for the editor root */
+    style?: React.CSSProperties;
+}
+
+declare const EmailEditor: React.FC<EmailEditorProps>;
+
+interface EditorContextValue {
+    components: ComponentRegistry;
+    theme: EditorTheme;
+    slots: EditorSlots;
+    templates: EmailTemplate[];
+    callbacks: EditorCallbacks;
+    htmlRenderers: Record<string, HtmlRenderer>;
+    title: string;
+    logo?: React.ReactNode;
+    showToolbar: boolean;
+    showToolbox: boolean;
+    showSettingsPanel: boolean;
+}
+declare const useEditorConfig: () => EditorContextValue;
+interface EditorProviderProps {
+    children: React.ReactNode;
+    value: Omit<EditorContextValue, 'theme'> & {
+        theme: EditorTheme;
+    };
+}
+declare const EditorProvider: React.FC<EditorProviderProps>;
+
+interface ContainerProps {
+    background?: string;
+    padding?: number;
+    children?: React.ReactNode;
+}
+declare const Container: {
+    ({ background, padding, children }: ContainerProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            background: string;
+            padding: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface EmailHeaderProps {
+    logoUrl?: string;
+    companyName?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    padding?: number;
+}
+declare const EmailHeader: {
+    ({ logoUrl, companyName, backgroundColor, textColor, padding, }: EmailHeaderProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            logoUrl: string;
+            companyName: string;
+            backgroundColor: string;
+            textColor: string;
+            padding: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface EmailFooterProps {
+    companyName?: string;
+    address?: string;
+    email?: string;
+    phone?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    padding?: number;
+}
+declare const EmailFooter: {
+    ({ companyName, address, email, phone, backgroundColor, textColor, padding, }: EmailFooterProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            companyName: string;
+            address: string;
+            email: string;
+            phone: string;
+            backgroundColor: string;
+            textColor: string;
+            padding: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface EmailButtonProps {
+    text?: string;
+    href?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    borderRadius?: number;
+    paddingX?: number;
+    paddingY?: number;
+    fontSize?: number;
+    align?: 'left' | 'center' | 'right';
+}
+declare const EmailButton: {
+    ({ text, href, backgroundColor, textColor, borderRadius, paddingX, paddingY, fontSize, align, }: EmailButtonProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            text: string;
+            href: string;
+            backgroundColor: string;
+            textColor: string;
+            borderRadius: number;
+            paddingX: number;
+            paddingY: number;
+            fontSize: number;
+            align: string;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface TextBlockProps {
+    text?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'bold';
+    color?: string;
+    align?: 'left' | 'center' | 'right';
+    padding?: number;
+    lineHeight?: number;
+}
+declare const TextBlock: {
+    ({ text, fontSize, fontWeight, color, align, padding, lineHeight, }: TextBlockProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            text: string;
+            fontSize: number;
+            fontWeight: string;
+            color: string;
+            align: string;
+            padding: number;
+            lineHeight: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface ImageBlockProps {
+    src?: string;
+    alt?: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    padding?: number;
+    borderRadius?: number;
+}
+declare const ImageBlock: {
+    ({ src, alt, width, align, padding, borderRadius, }: ImageBlockProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            src: string;
+            alt: string;
+            width: string;
+            align: string;
+            padding: number;
+            borderRadius: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface DividerProps {
+    color?: string;
+    thickness?: number;
+    margin?: number;
+    width?: string;
+}
+declare const Divider: {
+    ({ color, thickness, margin, width, }: DividerProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            color: string;
+            thickness: number;
+            margin: number;
+            width: string;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface InvoiceItem {
+    description: string;
+    quantity: number;
+    unitPrice: number;
+}
+interface InvoiceTableProps {
+    items?: InvoiceItem[];
+    headerBg?: string;
+    headerColor?: string;
+    borderColor?: string;
+    showTotal?: boolean;
+    currency?: string;
+}
+declare const InvoiceTable: {
+    ({ items, headerBg, headerColor, borderColor, showTotal, currency, }: InvoiceTableProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            items: {
+                description: string;
+                quantity: number;
+                unitPrice: number;
+            }[];
+            headerBg: string;
+            headerColor: string;
+            borderColor: string;
+            showTotal: boolean;
+            currency: string;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface SpacerProps {
+    height?: number;
+}
+declare const Spacer: {
+    ({ height }: SpacerProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            height: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface SocialLink {
+    platform: 'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'youtube' | 'tiktok';
+    url: string;
+}
+interface SocialLinksProps {
+    links?: SocialLink[];
+    iconSize?: number;
+    iconColor?: string;
+    backgroundColor?: string;
+    align?: 'left' | 'center' | 'right';
+    padding?: number;
+    gap?: number;
+}
+declare const SocialLinks: {
+    ({ links, iconSize, iconColor, backgroundColor, align, padding, gap, }: SocialLinksProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            links: {
+                platform: string;
+                url: string;
+            }[];
+            iconSize: number;
+            iconColor: string;
+            backgroundColor: string;
+            align: string;
+            padding: number;
+            gap: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface TwoColumnProps {
+    leftWidth?: number;
+    gap?: number;
+    padding?: number;
+    backgroundColor?: string;
+    children?: React.ReactNode;
+}
+declare const TwoColumn: {
+    ({ leftWidth, gap, padding, backgroundColor, }: TwoColumnProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            leftWidth: number;
+            gap: number;
+            padding: number;
+            backgroundColor: string;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface CountdownProps {
+    title?: string;
+    days?: number;
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    backgroundColor?: string;
+    numberColor?: string;
+    labelColor?: string;
+    titleColor?: string;
+    boxBackground?: string;
+    padding?: number;
+}
+declare const Countdown: {
+    ({ title, days, hours, minutes, seconds, backgroundColor, numberColor, labelColor, titleColor, boxBackground, padding, }: CountdownProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            title: string;
+            days: number;
+            hours: number;
+            minutes: number;
+            seconds: number;
+            backgroundColor: string;
+            numberColor: string;
+            labelColor: string;
+            titleColor: string;
+            boxBackground: string;
+            padding: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface PromoCodeProps {
+    title?: string;
+    code?: string;
+    description?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    codeBackground?: string;
+    textColor?: string;
+    codeColor?: string;
+    padding?: number;
+    borderStyle?: 'solid' | 'dashed' | 'dotted';
+}
+declare const PromoCode: {
+    ({ title, code, description, backgroundColor, borderColor, codeBackground, textColor, codeColor, padding, borderStyle, }: PromoCodeProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            title: string;
+            code: string;
+            description: string;
+            backgroundColor: string;
+            borderColor: string;
+            codeBackground: string;
+            textColor: string;
+            codeColor: string;
+            padding: number;
+            borderStyle: string;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface TestimonialProps {
+    quote?: string;
+    authorName?: string;
+    authorTitle?: string;
+    authorImage?: string;
+    backgroundColor?: string;
+    quoteColor?: string;
+    authorColor?: string;
+    accentColor?: string;
+    padding?: number;
+    showQuoteIcon?: boolean;
+}
+declare const Testimonial: {
+    ({ quote, authorName, authorTitle, authorImage, backgroundColor, quoteColor, authorColor, accentColor, padding, showQuoteIcon, }: TestimonialProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            quote: string;
+            authorName: string;
+            authorTitle: string;
+            authorImage: string;
+            backgroundColor: string;
+            quoteColor: string;
+            authorColor: string;
+            accentColor: string;
+            padding: number;
+            showQuoteIcon: boolean;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface VideoPlaceholderProps {
+    thumbnailUrl?: string;
+    videoUrl?: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    padding?: number;
+    borderRadius?: number;
+    playButtonColor?: string;
+    overlayOpacity?: number;
+}
+declare const VideoPlaceholder: {
+    ({ thumbnailUrl, videoUrl, width, align, padding, borderRadius, playButtonColor, overlayOpacity, }: VideoPlaceholderProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            thumbnailUrl: string;
+            videoUrl: string;
+            width: string;
+            align: string;
+            padding: number;
+            borderRadius: number;
+            playButtonColor: string;
+            overlayOpacity: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface VariableTextProps {
+    text?: string;
+    fontSize?: number;
+    fontWeight?: 'normal' | 'bold';
+    color?: string;
+    align?: 'left' | 'center' | 'right';
+    padding?: number;
+    lineHeight?: number;
+}
+declare const AVAILABLE_VARIABLES: {
+    key: string;
+    label: string;
+    preview: string;
+}[];
+declare const VariableText: {
+    ({ text, fontSize, fontWeight, color, align, padding, lineHeight, }: VariableTextProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            text: string;
+            fontSize: number;
+            fontWeight: string;
+            color: string;
+            align: string;
+            padding: number;
+            lineHeight: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+interface ListItem {
+    icon: string;
+    text: string;
+}
+interface IconListProps {
+    items?: ListItem[];
+    iconColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    fontSize?: number;
+    iconSize?: number;
+    gap?: number;
+    padding?: number;
+}
+declare const IconList: {
+    ({ items, iconColor, textColor, backgroundColor, fontSize, iconSize, gap, padding, }: IconListProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            items: {
+                icon: string;
+                text: string;
+            }[];
+            iconColor: string;
+            textColor: string;
+            backgroundColor: string;
+            fontSize: number;
+            iconSize: number;
+            gap: number;
+            padding: number;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+declare const DEFAULT_COMPONENTS: ComponentRegistry;
+/** Helper to get the Craft.js resolver map from a ComponentRegistry */
+declare const buildResolver: (registry: ComponentRegistry) => Record<string, React.ComponentType<any>>;
+/** Helper to get unique sorted categories from a ComponentRegistry */
+declare const getCategories: (registry: ComponentRegistry) => string[];
+
+interface PaperProps {
+    children?: React.ReactNode;
+    background?: string;
+}
+declare const Paper: {
+    ({ children, background }: PaperProps): react_jsx_runtime.JSX.Element;
+    craft: {
+        props: {
+            background: string;
+        };
+        related: {
+            settings: () => react_jsx_runtime.JSX.Element;
+        };
+    };
+};
+
+declare const Toolbox: () => react_jsx_runtime.JSX.Element;
+
+declare const SettingsPanel: () => react_jsx_runtime.JSX.Element;
+
+declare const RenderNode: ({ render }: {
+    render: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const generateEmailHtml: (nodes: SerializedNodes, customRenderers?: Record<string, HtmlRenderer>) => string;
+
+export { AVAILABLE_VARIABLES, type ComponentRegistry, Container, Countdown, DEFAULT_COMPONENTS, Divider, type EditorCallbacks, type EditorComponentConfig, EditorProvider, type EditorSlots, type EditorTheme, type EditorThemeColors, EmailButton, EmailEditor, type EmailEditorProps, EmailFooter, EmailHeader, type EmailTemplate, type ExportDialogSlotProps, type HtmlRenderer, IconList, ImageBlock, InvoiceTable, Paper, type PreviewDialogSlotProps, PromoCode, RenderNode, SettingsPanel, type SettingsPanelSlotProps, SocialLinks, Spacer, Testimonial, TextBlock, type ToolbarSlotProps, Toolbox, type ToolboxSlotProps, TwoColumn, VariableText, VideoPlaceholder, buildResolver, generateEmailHtml, getCategories, useEditorConfig };