JSX namespace

type Element = HTMLElement | DocumentFragment;

interface ElementChildrenAttribute {
    children: {};
}

interface HTMLAttributes<T extends EventTarget = HTMLElement> {
    class?: MaybeReactive<string>;
    className?: MaybeReactive<string>;
    id?: MaybeReactive<string>;
    style?: MaybeReactive<string | Record<string, string>>;
    title?: MaybeReactive<string>;
    tabIndex?: MaybeReactive<number>;
    hidden?: MaybeReactive<boolean>;
    role?: MaybeReactive<string>;
    slot?: string;
    dir?: MaybeReactive<string>;
    lang?: MaybeReactive<string>;
    draggable?: MaybeReactive<boolean>;
    contentEditable?: MaybeReactive<boolean | 'true' | 'false' | 'inherit'>;
    [key: `data-${string}`]: MaybeReactive<string | number | boolean> | undefined;
    [key: `aria-${string}`]: MaybeReactive<string | number | boolean> | undefined;
    onClick?: (e: MouseEvent) => void;
    onDblClick?: (e: MouseEvent) => void;
    onMouseDown?: (e: MouseEvent) => void;
    onMouseUp?: (e: MouseEvent) => void;
    onMouseEnter?: (e: MouseEvent) => void;
    onMouseLeave?: (e: MouseEvent) => void;
    onMouseMove?: (e: MouseEvent) => void;
    onContextMenu?: (e: MouseEvent) => void;
    onKeyDown?: (e: KeyboardEvent) => void;
    onKeyUp?: (e: KeyboardEvent) => void;
    onKeyPress?: (e: KeyboardEvent) => void;
    onFocus?: (e: FocusEvent) => void;
    onBlur?: (e: FocusEvent) => void;
    onFocusIn?: (e: FocusEvent) => void;
    onFocusOut?: (e: FocusEvent) => void;
    onInput?: (e: InputEvent) => void;
    onChange?: (e: Event) => void;
    onSubmit?: (e: SubmitEvent) => void;
    onReset?: (e: Event) => void;
    onInvalid?: (e: Event) => void;
    onCopy?: (e: ClipboardEvent) => void;
    onCut?: (e: ClipboardEvent) => void;
    onPaste?: (e: ClipboardEvent) => void;
    onTouchStart?: (e: TouchEvent) => void;
    onTouchEnd?: (e: TouchEvent) => void;
    onTouchMove?: (e: TouchEvent) => void;
    onTouchCancel?: (e: TouchEvent) => void;
    onPointerDown?: (e: PointerEvent) => void;
    onPointerUp?: (e: PointerEvent) => void;
    onPointerMove?: (e: PointerEvent) => void;
    onPointerEnter?: (e: PointerEvent) => void;
    onPointerLeave?: (e: PointerEvent) => void;
    onPointerCancel?: (e: PointerEvent) => void;
    onScroll?: (e: Event) => void;
    onWheel?: (e: WheelEvent) => void;
    onResize?: (e: UIEvent) => void;
    onAnimationStart?: (e: AnimationEvent) => void;
    onAnimationEnd?: (e: AnimationEvent) => void;
    onAnimationIteration?: (e: AnimationEvent) => void;
    onTransitionEnd?: (e: TransitionEvent) => void;
    onLoad?: (e: Event) => void;
    onError?: (e: Event) => void;
    ref?: (el: T) => void;
    children?: unknown;
    'data-forma-island'?: string;
    'data-forma-component'?: string;
    'data-forma-status'?: string;
    dangerouslySetInnerHTML?: {
        __html: RawMarkup;
    };
}

interface InputHTMLAttributes extends HTMLAttributes<HTMLInputElement> {
    type?: MaybeReactive<string>;
    value?: MaybeReactive<string | number>;
    placeholder?: MaybeReactive<string>;
    disabled?: MaybeReactive<boolean>;
    checked?: MaybeReactive<boolean>;
    name?: string;
    autocomplete?: string;
    required?: MaybeReactive<boolean>;
    readonly?: MaybeReactive<boolean>;
    min?: MaybeReactive<string | number>;
    max?: MaybeReactive<string | number>;
    step?: MaybeReactive<string | number>;
    pattern?: string;
    maxLength?: number;
    minLength?: number;
    accept?: string;
    multiple?: boolean;
    autofocus?: boolean;
}

interface SelectHTMLAttributes extends HTMLAttributes<HTMLSelectElement> {
    value?: MaybeReactive<string>;
    disabled?: MaybeReactive<boolean>;
    multiple?: boolean;
    name?: string;
    required?: MaybeReactive<boolean>;
    size?: number;
}

interface TextareaHTMLAttributes extends HTMLAttributes<HTMLTextAreaElement> {
    value?: MaybeReactive<string>;
    placeholder?: MaybeReactive<string>;
    disabled?: MaybeReactive<boolean>;
    readonly?: MaybeReactive<boolean>;
    rows?: number;
    cols?: number;
    name?: string;
    required?: MaybeReactive<boolean>;
    maxLength?: number;
    wrap?: string;
}

interface FormHTMLAttributes extends HTMLAttributes<HTMLFormElement> {
    action?: string;
    method?: string;
    enctype?: string;
    target?: string;
    noValidate?: boolean;
    autocomplete?: string;
}

interface AnchorHTMLAttributes extends HTMLAttributes<HTMLAnchorElement> {
    href?: MaybeReactive<string>;
    target?: string;
    rel?: string;
    download?: string | boolean;
    hreflang?: string;
    type?: string;
}

interface ImgHTMLAttributes extends HTMLAttributes<HTMLImageElement> {
    src?: MaybeReactive<string>;
    alt?: MaybeReactive<string>;
    loading?: 'lazy' | 'eager';
    decoding?: 'sync' | 'async' | 'auto';
    width?: number | string;
    height?: number | string;
    srcset?: string;
    sizes?: string;
    crossOrigin?: string;
}

interface VideoHTMLAttributes extends HTMLAttributes<HTMLVideoElement> {
    src?: MaybeReactive<string>;
    preload?: 'none' | 'metadata' | 'auto';
    autoplay?: boolean;
    loop?: boolean;
    muted?: MaybeReactive<boolean>;
    controls?: boolean;
    width?: number | string;
    height?: number | string;
    poster?: string;
    playsInline?: boolean;
}

interface LabelHTMLAttributes extends HTMLAttributes<HTMLLabelElement> {
    for?: string;
    htmlFor?: string;
}

interface ButtonHTMLAttributes extends HTMLAttributes<HTMLButtonElement> {
    type?: 'button' | 'submit' | 'reset';
    disabled?: MaybeReactive<boolean>;
    name?: string;
    value?: string;
    form?: string;
}

interface OptionHTMLAttributes extends HTMLAttributes<HTMLOptionElement> {
    value?: string;
    selected?: MaybeReactive<boolean>;
    disabled?: MaybeReactive<boolean>;
    label?: string;
}

interface IframeHTMLAttributes extends HTMLAttributes<HTMLIFrameElement> {
    src?: MaybeReactive<string>;
    srcdoc?: RawMarkup;
    sandbox?: string;
    allow?: string;
    width?: number | string;
    height?: number | string;
    loading?: 'lazy' | 'eager';
    name?: string;
}

interface DialogHTMLAttributes extends HTMLAttributes<HTMLDialogElement> {
    open?: MaybeReactive<boolean>;
}

interface CanvasHTMLAttributes extends HTMLAttributes<HTMLCanvasElement> {
    width?: number | string;
    height?: number | string;
}

interface TableCellHTMLAttributes extends HTMLAttributes<HTMLTableCellElement> {
    colSpan?: number;
    rowSpan?: number;
    scope?: string;
}

interface SVGAttributes extends HTMLAttributes<SVGElement> {
    viewBox?: string;
    xmlns?: string;
    fill?: MaybeReactive<string>;
    stroke?: MaybeReactive<string>;
    strokeWidth?: MaybeReactive<string | number>;
    strokeLinecap?: string;
    strokeLinejoin?: string;
    d?: MaybeReactive<string>;
    cx?: MaybeReactive<string | number>;
    cy?: MaybeReactive<string | number>;
    r?: MaybeReactive<string | number>;
    rx?: MaybeReactive<string | number>;
    ry?: MaybeReactive<string | number>;
    x?: MaybeReactive<string | number>;
    y?: MaybeReactive<string | number>;
    x1?: MaybeReactive<string | number>;
    y1?: MaybeReactive<string | number>;
    x2?: MaybeReactive<string | number>;
    y2?: MaybeReactive<string | number>;
    width?: MaybeReactive<string | number>;
    height?: MaybeReactive<string | number>;
    transform?: MaybeReactive<string>;
    opacity?: MaybeReactive<string | number>;
    clipPath?: string;
    points?: MaybeReactive<string>;
    pathLength?: number;
}

interface IntrinsicElements {
    div: HTMLAttributes<HTMLDivElement>;
    section: HTMLAttributes<HTMLElement>;
    article: HTMLAttributes<HTMLElement>;
    aside: HTMLAttributes<HTMLElement>;
    header: HTMLAttributes<HTMLElement>;
    footer: HTMLAttributes<HTMLElement>;
    main: HTMLAttributes<HTMLElement>;
    nav: HTMLAttributes<HTMLElement>;
    h1: HTMLAttributes<HTMLHeadingElement>;
    h2: HTMLAttributes<HTMLHeadingElement>;
    h3: HTMLAttributes<HTMLHeadingElement>;
    h4: HTMLAttributes<HTMLHeadingElement>;
    h5: HTMLAttributes<HTMLHeadingElement>;
    h6: HTMLAttributes<HTMLHeadingElement>;
    p: HTMLAttributes<HTMLParagraphElement>;
    span: HTMLAttributes<HTMLSpanElement>;
    strong: HTMLAttributes<HTMLElement>;
    em: HTMLAttributes<HTMLElement>;
    b: HTMLAttributes<HTMLElement>;
    i: HTMLAttributes<HTMLElement>;
    small: HTMLAttributes<HTMLElement>;
    code: HTMLAttributes<HTMLElement>;
    pre: HTMLAttributes<HTMLPreElement>;
    blockquote: HTMLAttributes<HTMLQuoteElement>;
    abbr: HTMLAttributes<HTMLElement>;
    cite: HTMLAttributes<HTMLElement>;
    mark: HTMLAttributes<HTMLElement>;
    sub: HTMLAttributes<HTMLElement>;
    sup: HTMLAttributes<HTMLElement>;
    del: HTMLAttributes<HTMLElement>;
    ins: HTMLAttributes<HTMLElement>;
    time: HTMLAttributes<HTMLTimeElement>;
    ul: HTMLAttributes<HTMLUListElement>;
    ol: HTMLAttributes<HTMLOListElement>;
    li: HTMLAttributes<HTMLLIElement>;
    dl: HTMLAttributes<HTMLDListElement>;
    dt: HTMLAttributes<HTMLElement>;
    dd: HTMLAttributes<HTMLElement>;
    form: FormHTMLAttributes;
    input: InputHTMLAttributes;
    select: SelectHTMLAttributes;
    textarea: TextareaHTMLAttributes;
    button: ButtonHTMLAttributes;
    label: LabelHTMLAttributes;
    option: OptionHTMLAttributes;
    optgroup: HTMLAttributes<HTMLOptGroupElement>;
    fieldset: HTMLAttributes<HTMLFieldSetElement>;
    legend: HTMLAttributes<HTMLLegendElement>;
    output: HTMLAttributes<HTMLOutputElement>;
    progress: HTMLAttributes<HTMLProgressElement>;
    meter: HTMLAttributes<HTMLMeterElement>;
    table: HTMLAttributes<HTMLTableElement>;
    caption: HTMLAttributes<HTMLTableCaptionElement>;
    colgroup: HTMLAttributes<HTMLTableColElement>;
    col: HTMLAttributes<HTMLTableColElement>;
    thead: HTMLAttributes<HTMLTableSectionElement>;
    tbody: HTMLAttributes<HTMLTableSectionElement>;
    tfoot: HTMLAttributes<HTMLTableSectionElement>;
    tr: HTMLAttributes<HTMLTableRowElement>;
    th: TableCellHTMLAttributes;
    td: TableCellHTMLAttributes;
    img: ImgHTMLAttributes;
    video: VideoHTMLAttributes;
    audio: HTMLAttributes<HTMLAudioElement>;
    source: HTMLAttributes<HTMLSourceElement>;
    picture: HTMLAttributes<HTMLPictureElement>;
    canvas: CanvasHTMLAttributes;
    svg: SVGAttributes;
    path: SVGAttributes;
    circle: SVGAttributes;
    rect: SVGAttributes;
    line: SVGAttributes;
    polyline: SVGAttributes;
    polygon: SVGAttributes;
    ellipse: SVGAttributes;
    g: SVGAttributes;
    defs: SVGAttributes;
    use: SVGAttributes;
    clipPath: SVGAttributes;
    mask: SVGAttributes;
    text: SVGAttributes;
    tspan: SVGAttributes;
    a: AnchorHTMLAttributes;
    iframe: IframeHTMLAttributes;
    dialog: DialogHTMLAttributes;
    details: HTMLAttributes<HTMLDetailsElement>;
    summary: HTMLAttributes<HTMLElement>;
    br: HTMLAttributes<HTMLBRElement>;
    hr: HTMLAttributes<HTMLHRElement>;
    wbr: HTMLAttributes<HTMLElement>;
    address: HTMLAttributes<HTMLElement>;
    figure: HTMLAttributes<HTMLElement>;
    figcaption: HTMLAttributes<HTMLElement>;
    link: HTMLAttributes<HTMLLinkElement>;
    meta: HTMLAttributes<HTMLMetaElement>;
    style: HTMLAttributes<HTMLStyleElement>;
    script: HTMLAttributes<HTMLScriptElement>;
    noscript: HTMLAttributes<HTMLElement>;
    template: HTMLAttributes<HTMLTemplateElement>;
}

type MaybeReactive<T> = T | (() => T);

type RawMarkup = {
    readonly __formaTrustedHtml: true;
};