import { BaseElement } from '../shared/base';
/**
 * Variants of the `display` element type. Display elements render
 * content (read-only) — they don't bind to form data the way inputs do.
 */
export type DisplayStyle = "type" | "markdown" | "html" | "iframe" | "image" | "video" | "banner" | "chart" | "carousel" | "barcode" | "qrcode" | "icon" | "progress-bar" | "sprite" | "reactive-canvas";
/**
 * Sub-style for the `type` display — picks a typographic role.
 * Lets the same renderer produce headings, paragraphs, captions, etc.
 */
export type DisplayContentType = "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "heading-6" | "paragraph" | "lead" | "small" | "caption" | "code" | "quote";
export interface DisplayElement extends BaseElement<`display.${DisplayStyle}`> {
    /**
     * Optional data-model key. When set, the value at that path overrides
     * `defaultValue` at render time (useful for binding display content to
     * a sibling field's value).
     */
    name?: string | null;
    /**
     * Static content. Strings are treated as the raw display value; the
     * renderer interprets them according to `style` + `contentType`.
     */
    defaultValue?: string | number | null;
    /** Sub-style for the `type` display. */
    contentType?: DisplayContentType;
    /** For `image` / `video` / `iframe`: source URL. */
    src?: string;
    /** For `image`: alt text. */
    alt?: string;
    /** For `icon`: lucide icon name. */
    iconName?: string;
    /** For `progress-bar`: 0–100 percentage. */
    progress?: number;
    /** For `chart`: chart config payload. */
    chartConfig?: Record<string, unknown>;
    /** For `carousel`: slide payload. */
    slides?: ReadonlyArray<Record<string, unknown>>;
}
export declare const DisplayElementDefaults: {
    readonly type: "display.type";
    readonly contentType: "paragraph";
    readonly defaultValue: "";
    readonly name: null;
    readonly columns: 12;
    readonly columnsSm: 12;
    readonly columnsMd: 12;
    readonly columnsLg: 12;
    readonly columnsXl: 12;
};
export declare const DisplayElementMetadata: {
    readonly icon: "type";
    readonly displayLabel: "Display Content";
    readonly elementCategory: "display";
    readonly description: "Read-only content: typography, markdown, images, video, charts, barcodes, icons, and more.";
};
export declare const DisplayElementEditConfig: {
    readonly style: {
        readonly type: "option-select.select";
        readonly defaultValue: "type";
        readonly label: "Display Style";
        readonly columns: 12;
        readonly selectOptions: readonly [{
            readonly label: "Typography";
            readonly value: "type";
        }, {
            readonly label: "Markdown";
            readonly value: "markdown";
        }, {
            readonly label: "HTML";
            readonly value: "html";
        }, {
            readonly label: "Iframe";
            readonly value: "iframe";
        }, {
            readonly label: "Image";
            readonly value: "image";
        }, {
            readonly label: "Video";
            readonly value: "video";
        }, {
            readonly label: "Banner";
            readonly value: "banner";
        }, {
            readonly label: "Chart";
            readonly value: "chart";
        }, {
            readonly label: "Carousel";
            readonly value: "carousel";
        }, {
            readonly label: "Barcode";
            readonly value: "barcode";
        }, {
            readonly label: "QR Code";
            readonly value: "qrcode";
        }, {
            readonly label: "Icon";
            readonly value: "icon";
        }, {
            readonly label: "Progress Bar";
            readonly value: "progress-bar";
        }, {
            readonly label: "Sprite";
            readonly value: "sprite";
        }, {
            readonly label: "Reactive Canvas";
            readonly value: "reactive-canvas";
        }];
        readonly section: "layout";
    };
    readonly contentType: {
        readonly type: "option-select.select";
        readonly defaultValue: "paragraph";
        readonly label: "Content Type";
        readonly columns: 12;
        readonly selectOptions: readonly [{
            readonly label: "Heading 1";
            readonly value: "heading-1";
        }, {
            readonly label: "Heading 2";
            readonly value: "heading-2";
        }, {
            readonly label: "Heading 3";
            readonly value: "heading-3";
        }, {
            readonly label: "Heading 4";
            readonly value: "heading-4";
        }, {
            readonly label: "Heading 5";
            readonly value: "heading-5";
        }, {
            readonly label: "Heading 6";
            readonly value: "heading-6";
        }, {
            readonly label: "Paragraph";
            readonly value: "paragraph";
        }, {
            readonly label: "Lead";
            readonly value: "lead";
        }, {
            readonly label: "Small";
            readonly value: "small";
        }, {
            readonly label: "Caption";
            readonly value: "caption";
        }, {
            readonly label: "Code";
            readonly value: "code";
        }, {
            readonly label: "Quote";
            readonly value: "quote";
        }];
        readonly section: "layout";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "type";
        }];
    };
    readonly defaultValue: {
        readonly type: "input.textarea";
        readonly label: "Content";
        readonly columns: 12;
        readonly section: "configuration";
    };
    readonly name: {
        readonly type: "picker.data-model";
        readonly label: "Data Source Name";
        readonly columns: 12;
        readonly section: "configuration";
    };
    readonly src: {
        readonly type: "input.text";
        readonly label: "Source URL";
        readonly columns: 12;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "in-array";
            readonly value: readonly ["image", "video", "iframe"];
        }];
    };
    readonly alt: {
        readonly type: "input.text";
        readonly label: "Alt Text";
        readonly columns: 12;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "image";
        }];
    };
    readonly iconName: {
        readonly type: "picker.icon";
        readonly label: "Icon";
        readonly columns: 12;
        readonly section: "configuration";
        readonly conditionParams: [{
            readonly name: "style";
            readonly logic: "==";
            readonly value: "icon";
        }];
    };
};
export declare const DisplayStyleMetadataMap: Partial<Record<DisplayStyle, {
    displayLabel: string;
    description: string;
}>>;
//# sourceMappingURL=DisplayElement.d.ts.map