import { EventName } from '@lit/react';
import { StencilReactComponent } from './create-component.js';

type EventNames = Record<string, EventName | string>;
export type { ReactWebComponent, WebComponentProps } from '@lit/react';
export type SerializeShadowRootOptions = 'declarative-shadow-dom' | 'scoped' | {
    'declarative-shadow-dom'?: string[];
    scoped?: string[];
    default: 'declarative-shadow-dom' | 'scoped';
} | boolean;
/**
 * these types are defined by a Stencil hydrate app so we have to copy the minimal types here
 */
export interface RenderToStringOptions {
    fullDocument?: boolean;
    prettyHtml?: boolean;
    /**
     * Configure how Stencil serializes the components shadow root.
     * - If set to `declarative-shadow-dom` the component will be rendered within a Declarative Shadow DOM.
     * - If set to `scoped` Stencil will render the contents of the shadow root as a `scoped: true` component
     *   and the shadow DOM will be created during client-side hydration.
     * - Alternatively you can mix and match the two by providing an object with `declarative-shadow-dom` and `scoped` keys,
     * the value arrays containing the tag names of the components that should be rendered in that mode.
     *
     * Examples:
     * - `{ 'declarative-shadow-dom': ['my-component-1', 'another-component'], default: 'scoped' }`
     * Render all components as `scoped` apart from `my-component-1` and `another-component`
     * -  `{ 'scoped': ['an-option-component'], default: 'declarative-shadow-dom' }`
     * Render all components within `declarative-shadow-dom` apart from `an-option-component`
     * - `'scoped'` Render all components as `scoped`
     * - `false` disables shadow root serialization
     *
     * *NOTE* `true` has been deprecated in favor of `declarative-shadow-dom` and `scoped`
     * @default 'declarative-shadow-dom'
     */
    serializeShadowRoot?: SerializeShadowRootOptions;
}
export interface HydrateStyleElement {
    id?: string;
    href?: string | null;
    content?: string;
}
type RenderToString = (html: string, options: RenderToStringOptions) => Promise<{
    html: string | null;
    styles: HydrateStyleElement[];
}>;
export type HydrateModule = {
    renderToString: RenderToString;
    serializeProperty: (value: any) => string;
    transformTag: (tagName: string) => string;
    setTagTransformer: (transformer: (tagName: string) => string) => void;
};
interface CreateComponentForServerSideRenderingOptions {
    tagName: string;
    properties: Record<string, string>;
    renderToString: RenderToString;
    serializeProperty: (value: any) => string;
    serializeShadowRoot?: SerializeShadowRootOptions;
    transformTag?: (tagName: string) => string;
}
type CreateComponentForSSROptions<I extends HTMLElement, E extends EventNames = {}, C = Omit<I, keyof HTMLElement>> = Omit<CreateComponentForServerSideRenderingOptions, 'renderToString' | 'serializeProperty' | 'transformTag'> & {
    hydrateModule: Promise<HydrateModule>;
    transformTag?: (tag: string) => string;
    getTagTransformer?: () => ((tag: string) => string) | undefined;
    clientModule?: StencilReactComponent<I, E, C>;
};
/**
 * Defines a custom element and creates a React component for server side rendering.
 * @public
 */
export declare const createComponent: <I extends HTMLElement, E extends EventNames = {}, C = Omit<I, keyof HTMLElement>>(options: CreateComponentForSSROptions<I, E, C>) => StencilReactComponent<I, E, C>;