import type { Constructable } from '@furystack/inject';
import type { ChildrenList, PartialElement, RenderOptions } from './models/index.js';
export type ShadeOptions<TProps, TElementBase extends HTMLElement> = {
    /**
     * Explicit shadow dom name. Will fall back to 'shade-{guid}' if not provided
     */
    shadowDomName: string;
    /**
     * Render hook, this method will be executed on each and every render.
     */
    render: (options: RenderOptions<TProps, TElementBase>) => JSX.Element | string | null;
    /**
     * Construct hook. Will be executed once when the element has been constructed and initialized
     */
    constructed?: (options: RenderOptions<TProps, TElementBase>) => void | undefined | (() => void) | Promise<void | undefined | (() => void)>;
    /**
     * Will be executed when the element is attached to the DOM.
     */
    onAttach?: (options: RenderOptions<TProps, TElementBase>) => void;
    /**
     * Will be executed when the element is detached from the DOM.
     */
    onDetach?: (options: RenderOptions<TProps, TElementBase>) => void;
    /**
     * Name of the HTML Element's base class. Needs to be defined if the elementBase is set. E.g.: 'div', 'button', 'input'
     */
    elementBaseName?: string;
    /**
     * Base class for the custom element. Defaults to HTMLElement. E.g. HTMLButtonElement
     */
    elementBase?: Constructable<TElementBase>;
    /**
     * A default style that will be applied to the element. Can be overridden by external styles.
     */
    style?: Partial<CSSStyleDeclaration>;
};
/**
 * Factory method for creating Shade components
 * @param o for component creation
 * @returns the JSX element
 */
export declare const Shade: <TProps, TElementBase extends HTMLElement = HTMLElement>(o: ShadeOptions<TProps, TElementBase>) => (props: TProps & PartialElement<TElementBase>, children?: ChildrenList) => JSX.Element;
//# sourceMappingURL=shade.d.ts.map