@esportsplus/ui 0.18.1 → 0.19.0

package/build/components/field/title.d.ts

@@ -1,114 +1,121 @@
 declare const _default: {
-    (content: unknown): import("@esportsplus/template").Renderable;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
     (attributes: {
-        class?: string | (string | (() => unknown))[];
-        style?: string | (string | (() => unknown))[];
+        class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
+        style?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
     } & {
-        onabort?: ((event: UIEvent) => void) | undefined;
-        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
-        onanimationend?: ((event: AnimationEvent) => void) | undefined;
-        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
-        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
-        onauxclick?: ((event: MouseEvent) => void) | undefined;
-        onbeforeinput?: ((event: InputEvent) => void) | undefined;
-        onbeforetoggle?: ((event: Event) => void) | undefined;
-        onblur?: ((event: FocusEvent) => void) | undefined;
-        oncancel?: ((event: Event) => void) | undefined;
-        oncanplay?: ((event: Event) => void) | undefined;
-        oncanplaythrough?: ((event: Event) => void) | undefined;
-        onchange?: ((event: Event) => void) | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        onclose?: ((event: Event) => void) | undefined;
-        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
-        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
-        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
-        oncontextlost?: ((event: Event) => void) | undefined;
-        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
-        oncontextrestored?: ((event: Event) => void) | undefined;
-        oncopy?: ((event: ClipboardEvent) => void) | undefined;
-        oncuechange?: ((event: Event) => void) | undefined;
-        oncut?: ((event: ClipboardEvent) => void) | undefined;
-        ondblclick?: ((event: MouseEvent) => void) | undefined;
-        ondrag?: ((event: DragEvent) => void) | undefined;
-        ondragend?: ((event: DragEvent) => void) | undefined;
-        ondragenter?: ((event: DragEvent) => void) | undefined;
-        ondragleave?: ((event: DragEvent) => void) | undefined;
-        ondragover?: ((event: DragEvent) => void) | undefined;
-        ondragstart?: ((event: DragEvent) => void) | undefined;
-        ondrop?: ((event: DragEvent) => void) | undefined;
-        ondurationchange?: ((event: Event) => void) | undefined;
-        onemptied?: ((event: Event) => void) | undefined;
-        onended?: ((event: Event) => void) | undefined;
-        onerror?: ((event: ErrorEvent) => void) | undefined;
-        onfocus?: ((event: FocusEvent) => void) | undefined;
-        onfocusin?: ((event: FocusEvent) => void) | undefined;
-        onfocusout?: ((event: FocusEvent) => void) | undefined;
-        onformdata?: ((event: FormDataEvent) => void) | undefined;
-        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
-        oninput?: ((event: Event) => void) | undefined;
-        oninvalid?: ((event: Event) => void) | undefined;
-        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
-        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
-        onload?: ((event: Event) => void) | undefined;
-        onloadeddata?: ((event: Event) => void) | undefined;
-        onloadedmetadata?: ((event: Event) => void) | undefined;
-        onloadstart?: ((event: Event) => void) | undefined;
-        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
-        onmousedown?: ((event: MouseEvent) => void) | undefined;
-        onmouseenter?: ((event: MouseEvent) => void) | undefined;
-        onmouseleave?: ((event: MouseEvent) => void) | undefined;
-        onmousemove?: ((event: MouseEvent) => void) | undefined;
-        onmouseout?: ((event: MouseEvent) => void) | undefined;
-        onmouseover?: ((event: MouseEvent) => void) | undefined;
-        onmouseup?: ((event: MouseEvent) => void) | undefined;
-        onpaste?: ((event: ClipboardEvent) => void) | undefined;
-        onpause?: ((event: Event) => void) | undefined;
-        onplay?: ((event: Event) => void) | undefined;
-        onplaying?: ((event: Event) => void) | undefined;
-        onpointercancel?: ((event: PointerEvent) => void) | undefined;
-        onpointerdown?: ((event: PointerEvent) => void) | undefined;
-        onpointerenter?: ((event: PointerEvent) => void) | undefined;
-        onpointerleave?: ((event: PointerEvent) => void) | undefined;
-        onpointermove?: ((event: PointerEvent) => void) | undefined;
-        onpointerout?: ((event: PointerEvent) => void) | undefined;
-        onpointerover?: ((event: PointerEvent) => void) | undefined;
-        onpointerup?: ((event: PointerEvent) => void) | undefined;
-        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
-        onratechange?: ((event: Event) => void) | undefined;
-        onreset?: ((event: Event) => void) | undefined;
-        onresize?: ((event: UIEvent) => void) | undefined;
-        onscroll?: ((event: Event) => void) | undefined;
-        onscrollend?: ((event: Event) => void) | undefined;
-        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
-        onseeked?: ((event: Event) => void) | undefined;
-        onseeking?: ((event: Event) => void) | undefined;
-        onselect?: ((event: Event) => void) | undefined;
-        onselectionchange?: ((event: Event) => void) | undefined;
-        onselectstart?: ((event: Event) => void) | undefined;
-        onslotchange?: ((event: Event) => void) | undefined;
-        onstalled?: ((event: Event) => void) | undefined;
-        onsubmit?: ((event: SubmitEvent) => void) | undefined;
-        onsuspend?: ((event: Event) => void) | undefined;
-        ontimeupdate?: ((event: Event) => void) | undefined;
-        ontoggle?: ((event: Event) => void) | undefined;
-        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
-        ontouchend?: ((event: TouchEvent) => void) | undefined;
-        ontouchmove?: ((event: TouchEvent) => void) | undefined;
-        ontouchstart?: ((event: TouchEvent) => void) | undefined;
-        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
-        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
-        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
-        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
-        onvolumechange?: ((event: Event) => void) | undefined;
-        onwaiting?: ((event: Event) => void) | undefined;
-        onwebkitanimationend?: ((event: Event) => void) | undefined;
-        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
-        onwebkitanimationstart?: ((event: Event) => void) | undefined;
-        onwebkittransitionend?: ((event: Event) => void) | undefined;
-        onwheel?: ((event: WheelEvent) => void) | undefined;
+        onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+        onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+        onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
+        onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+        oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+        oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+        oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+        oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+        ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+        ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
+        onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+        onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
+        ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+        onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+        onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+        onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+        onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+        onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+        onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
+        onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+        onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
+        onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
+        onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+        ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+        onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+        onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
+    } & {
+        [key: `aria-${string}`]: string | number | boolean | undefined;
+        [key: `data-${string}`]: string | undefined;
+        onconnect?: (element: import("@esportsplus/template").Element) => void;
+        ondisconnect?: (element: import("@esportsplus/template").Element) => void;
+        onrender?: (element: import("@esportsplus/template").Element) => void;
     } & Record<PropertyKey, unknown> & {
         required?: boolean;
-    }, content: unknown): import("@esportsplus/template").Renderable;
+    }, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;

package/build/components/field/title.js

@@ -2,12 +2,19 @@ import { html } from '@esportsplus/template';
 import { omit } from '@esportsplus/utilities';
 import tooltip from '../../components/tooltip/index.js';
 import template from '../../components/template/index.js';
-export default template.factory((attributes, content) => html `
-        <div class='field-title --flex-horizontal-space-between --flex-vertical' ${omit(attributes, ['required'])}>
-            ${content}
+const OMIT = ['required'];
+export default template.factory((attributes, content) => {
+    let required = attributes?.required;
+    return html `
+            <div
+                class='field-title --flex-horizontal-space-between --flex-vertical'
+                ${omit(attributes, OMIT)}
+            >
+                ${content}
 
-            ${attributes.required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html `
-                <span class='tooltip-message tooltip-message--w'>Required</span>
-            `)}
-        </div>
-    `);
+                ${required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html `
+                    <span class='tooltip-message tooltip-message--w'>Required</span>
+                `)}
+            </div>
+        `;
+});

package/build/components/form/action.d.ts

@@ -1,7 +1,22 @@
-import { Action } from './types.js';
-export default function (action: Action, s?: {
-    processing: boolean;
-}): {
-    onclick: (this: HTMLFormElement, event: Event) => void;
-    onsubmit: (this: HTMLFormElement, event: SubmitEvent) => Promise<void>;
+import response, { Response } from '@esportsplus/action';
+import { Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    action: Action;
+    state?: {
+        processing: boolean;
+    };
 };
+type Action = (data: Payload) => Promise<Errors> | Errors;
+type Errors = {
+    errors: Response<unknown>['errors'];
+};
+type Payload = {
+    input: Record<string, any>;
+    response: typeof response;
+};
+declare const _default: {
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: A, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+};
+export default _default;

package/build/components/form/action.js

@@ -1,5 +1,9 @@
 import response from '@esportsplus/action';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
 import input from './input.js';
+const OMIT = ['action', 'state'];
 function parse(input) {
     let data = {};
     for (let [path, value] of input) {
@@ -22,8 +26,12 @@ function parse(input) {
     return data;
 }
 ;
-export default function (action, s) {
-    return {
+export default template.factory((attributes, content) => {
+    let { action, state } = attributes;
+    return html `
+            <form
+                ${omit(attributes, OMIT)}
+                ${{
         onclick: function (event) {
             let trigger = event.target;
             if (trigger?.type !== 'submit') {
@@ -34,8 +42,8 @@ export default function (action, s) {
         },
         onsubmit: async function (event) {
             event.preventDefault();
-            if (s) {
-                s.processing = true;
+            if (state) {
+                state.processing = true;
             }
             let { errors } = await action({
                 input: parse(new FormData(this).entries()),
@@ -48,10 +56,13 @@ export default function (action, s) {
                 }
                 reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
             }
-            if (s) {
-                s.processing = false;
+            if (state) {
+                state.processing = false;
             }
         }
-    };
-}
-;
+    }}
+            >
+                ${content}
+            </form>
+        `;
+});

package/build/components/form/index.d.ts

@@ -1,6 +1,134 @@
-import action from './action.js';
 declare const _default: {
-    action: typeof action;
+    action: {
+        (): import("@esportsplus/template").Renderable<unknown>;
+        (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+        (attributes: {
+            class?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
+            style?: ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>) | ((string | number | bigint | boolean | null | undefined) | import("@esportsplus/template/build/types").Effect<(string | number | bigint | boolean | null | undefined) | (string | number | bigint | boolean | null | undefined)[]>)[];
+        } & {
+            onabort?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+            onanimationcancel?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+            onanimationend?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+            onanimationiteration?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+            onanimationstart?: ((this: import("@esportsplus/template").Element, event: AnimationEvent) => void) | undefined;
+            onauxclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onbeforeinput?: ((this: import("@esportsplus/template").Element, event: InputEvent) => void) | undefined;
+            onbeforetoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onblur?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+            oncancel?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oncanplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oncanplaythrough?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onclose?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oncompositionend?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+            oncompositionstart?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+            oncompositionupdate?: ((this: import("@esportsplus/template").Element, event: CompositionEvent) => void) | undefined;
+            oncontextlost?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oncontextmenu?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            oncontextrestored?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oncopy?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+            oncuechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oncut?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+            ondblclick?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            ondrag?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondragend?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondragenter?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondragleave?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondragover?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondragstart?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondrop?: ((this: import("@esportsplus/template").Element, event: DragEvent) => void) | undefined;
+            ondurationchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onemptied?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onended?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onerror?: ((this: import("@esportsplus/template").Element, event: ErrorEvent) => void) | undefined;
+            onfocus?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+            onfocusin?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+            onfocusout?: ((this: import("@esportsplus/template").Element, event: FocusEvent) => void) | undefined;
+            onformdata?: ((this: import("@esportsplus/template").Element, event: FormDataEvent) => void) | undefined;
+            ongotpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            oninput?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            oninvalid?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onkeydown?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+            onkeypress?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+            onkeyup?: ((this: import("@esportsplus/template").Element, event: KeyboardEvent) => void) | undefined;
+            onload?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onloadeddata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onloadedmetadata?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onloadstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onlostpointercapture?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onmousedown?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onmouseenter?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onmouseleave?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onmousemove?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onmouseout?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onmouseover?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onmouseup?: ((this: import("@esportsplus/template").Element, event: MouseEvent) => void) | undefined;
+            onpaste?: ((this: import("@esportsplus/template").Element, event: ClipboardEvent) => void) | undefined;
+            onpause?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onplay?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onplaying?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onpointercancel?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointerdown?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointerenter?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointerleave?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointermove?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointerout?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointerover?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onpointerup?: ((this: import("@esportsplus/template").Element, event: PointerEvent) => void) | undefined;
+            onprogress?: ((this: import("@esportsplus/template").Element, event: ProgressEvent<EventTarget>) => void) | undefined;
+            onratechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onreset?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onresize?: ((this: import("@esportsplus/template").Element, event: UIEvent) => void) | undefined;
+            onscroll?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onscrollend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onsecuritypolicyviolation?: ((this: import("@esportsplus/template").Element, event: SecurityPolicyViolationEvent) => void) | undefined;
+            onseeked?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onseeking?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onselect?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onselectionchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onselectstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onslotchange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onstalled?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onsubmit?: ((this: import("@esportsplus/template").Element, event: SubmitEvent) => void) | undefined;
+            onsuspend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            ontimeupdate?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            ontoggle?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            ontouchcancel?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+            ontouchend?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+            ontouchmove?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+            ontouchstart?: ((this: import("@esportsplus/template").Element, event: TouchEvent) => void) | undefined;
+            ontransitioncancel?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+            ontransitionend?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+            ontransitionrun?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+            ontransitionstart?: ((this: import("@esportsplus/template").Element, event: TransitionEvent) => void) | undefined;
+            onvolumechange?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onwaiting?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onwebkitanimationend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onwebkitanimationiteration?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onwebkitanimationstart?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onwebkittransitionend?: ((this: import("@esportsplus/template").Element, event: Event) => void) | undefined;
+            onwheel?: ((this: import("@esportsplus/template").Element, event: WheelEvent) => void) | undefined;
+        } & {
+            [key: `aria-${string}`]: string | number | boolean | undefined;
+            [key: `data-${string}`]: string | undefined;
+            onconnect?: (element: import("@esportsplus/template").Element) => void;
+            ondisconnect?: (element: import("@esportsplus/template").Element) => void;
+            onrender?: (element: import("@esportsplus/template").Element) => void;
+        } & Record<PropertyKey, unknown> & {
+            action: (data: {
+                input: Record<string, any>;
+                response: typeof import("@esportsplus/action").default;
+            }) => Promise<{
+                errors: import("@esportsplus/action").Response<unknown>["errors"];
+            }> | {
+                errors: import("@esportsplus/action").Response<unknown>["errors"];
+            };
+            state?: {
+                processing: boolean;
+            };
+        }, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    };
     input: {
         get: (element?: import("@esportsplus/template").Element) => {
             error: string;

package/build/components/frame/index.d.ts

@@ -1,116 +1,7 @@
 import './scss/index.scss';
 declare const _default: {
-    (content: unknown): import("@esportsplus/template").Renderable;
-    (attributes: {
-        class?: string | (string | (() => unknown))[];
-        style?: string | (string | (() => unknown))[];
-    } & {
-        onabort?: ((event: UIEvent) => void) | undefined;
-        onanimationcancel?: ((event: AnimationEvent) => void) | undefined;
-        onanimationend?: ((event: AnimationEvent) => void) | undefined;
-        onanimationiteration?: ((event: AnimationEvent) => void) | undefined;
-        onanimationstart?: ((event: AnimationEvent) => void) | undefined;
-        onauxclick?: ((event: MouseEvent) => void) | undefined;
-        onbeforeinput?: ((event: InputEvent) => void) | undefined;
-        onbeforetoggle?: ((event: Event) => void) | undefined;
-        onblur?: ((event: FocusEvent) => void) | undefined;
-        oncancel?: ((event: Event) => void) | undefined;
-        oncanplay?: ((event: Event) => void) | undefined;
-        oncanplaythrough?: ((event: Event) => void) | undefined;
-        onchange?: ((event: Event) => void) | undefined;
-        onclick?: ((event: MouseEvent) => void) | undefined;
-        onclose?: ((event: Event) => void) | undefined;
-        oncompositionend?: ((event: CompositionEvent) => void) | undefined;
-        oncompositionstart?: ((event: CompositionEvent) => void) | undefined;
-        oncompositionupdate?: ((event: CompositionEvent) => void) | undefined;
-        oncontextlost?: ((event: Event) => void) | undefined;
-        oncontextmenu?: ((event: MouseEvent) => void) | undefined;
-        oncontextrestored?: ((event: Event) => void) | undefined;
-        oncopy?: ((event: ClipboardEvent) => void) | undefined;
-        oncuechange?: ((event: Event) => void) | undefined;
-        oncut?: ((event: ClipboardEvent) => void) | undefined;
-        ondblclick?: ((event: MouseEvent) => void) | undefined;
-        ondrag?: ((event: DragEvent) => void) | undefined;
-        ondragend?: ((event: DragEvent) => void) | undefined;
-        ondragenter?: ((event: DragEvent) => void) | undefined;
-        ondragleave?: ((event: DragEvent) => void) | undefined;
-        ondragover?: ((event: DragEvent) => void) | undefined;
-        ondragstart?: ((event: DragEvent) => void) | undefined;
-        ondrop?: ((event: DragEvent) => void) | undefined;
-        ondurationchange?: ((event: Event) => void) | undefined;
-        onemptied?: ((event: Event) => void) | undefined;
-        onended?: ((event: Event) => void) | undefined;
-        onerror?: ((event: ErrorEvent) => void) | undefined;
-        onfocus?: ((event: FocusEvent) => void) | undefined;
-        onfocusin?: ((event: FocusEvent) => void) | undefined;
-        onfocusout?: ((event: FocusEvent) => void) | undefined;
-        onformdata?: ((event: FormDataEvent) => void) | undefined;
-        ongotpointercapture?: ((event: PointerEvent) => void) | undefined;
-        oninput?: ((event: Event) => void) | undefined;
-        oninvalid?: ((event: Event) => void) | undefined;
-        onkeydown?: ((event: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((event: KeyboardEvent) => void) | undefined;
-        onkeyup?: ((event: KeyboardEvent) => void) | undefined;
-        onload?: ((event: Event) => void) | undefined;
-        onloadeddata?: ((event: Event) => void) | undefined;
-        onloadedmetadata?: ((event: Event) => void) | undefined;
-        onloadstart?: ((event: Event) => void) | undefined;
-        onlostpointercapture?: ((event: PointerEvent) => void) | undefined;
-        onmousedown?: ((event: MouseEvent) => void) | undefined;
-        onmouseenter?: ((event: MouseEvent) => void) | undefined;
-        onmouseleave?: ((event: MouseEvent) => void) | undefined;
-        onmousemove?: ((event: MouseEvent) => void) | undefined;
-        onmouseout?: ((event: MouseEvent) => void) | undefined;
-        onmouseover?: ((event: MouseEvent) => void) | undefined;
-        onmouseup?: ((event: MouseEvent) => void) | undefined;
-        onpaste?: ((event: ClipboardEvent) => void) | undefined;
-        onpause?: ((event: Event) => void) | undefined;
-        onplay?: ((event: Event) => void) | undefined;
-        onplaying?: ((event: Event) => void) | undefined;
-        onpointercancel?: ((event: PointerEvent) => void) | undefined;
-        onpointerdown?: ((event: PointerEvent) => void) | undefined;
-        onpointerenter?: ((event: PointerEvent) => void) | undefined;
-        onpointerleave?: ((event: PointerEvent) => void) | undefined;
-        onpointermove?: ((event: PointerEvent) => void) | undefined;
-        onpointerout?: ((event: PointerEvent) => void) | undefined;
-        onpointerover?: ((event: PointerEvent) => void) | undefined;
-        onpointerup?: ((event: PointerEvent) => void) | undefined;
-        onprogress?: ((event: ProgressEvent<EventTarget>) => void) | undefined;
-        onratechange?: ((event: Event) => void) | undefined;
-        onreset?: ((event: Event) => void) | undefined;
-        onresize?: ((event: UIEvent) => void) | undefined;
-        onscroll?: ((event: Event) => void) | undefined;
-        onscrollend?: ((event: Event) => void) | undefined;
-        onsecuritypolicyviolation?: ((event: SecurityPolicyViolationEvent) => void) | undefined;
-        onseeked?: ((event: Event) => void) | undefined;
-        onseeking?: ((event: Event) => void) | undefined;
-        onselect?: ((event: Event) => void) | undefined;
-        onselectionchange?: ((event: Event) => void) | undefined;
-        onselectstart?: ((event: Event) => void) | undefined;
-        onslotchange?: ((event: Event) => void) | undefined;
-        onstalled?: ((event: Event) => void) | undefined;
-        onsubmit?: ((event: SubmitEvent) => void) | undefined;
-        onsuspend?: ((event: Event) => void) | undefined;
-        ontimeupdate?: ((event: Event) => void) | undefined;
-        ontoggle?: ((event: Event) => void) | undefined;
-        ontouchcancel?: ((event: TouchEvent) => void) | undefined;
-        ontouchend?: ((event: TouchEvent) => void) | undefined;
-        ontouchmove?: ((event: TouchEvent) => void) | undefined;
-        ontouchstart?: ((event: TouchEvent) => void) | undefined;
-        ontransitioncancel?: ((event: TransitionEvent) => void) | undefined;
-        ontransitionend?: ((event: TransitionEvent) => void) | undefined;
-        ontransitionrun?: ((event: TransitionEvent) => void) | undefined;
-        ontransitionstart?: ((event: TransitionEvent) => void) | undefined;
-        onvolumechange?: ((event: Event) => void) | undefined;
-        onwaiting?: ((event: Event) => void) | undefined;
-        onwebkitanimationend?: ((event: Event) => void) | undefined;
-        onwebkitanimationiteration?: ((event: Event) => void) | undefined;
-        onwebkitanimationstart?: ((event: Event) => void) | undefined;
-        onwebkittransitionend?: ((event: Event) => void) | undefined;
-        onwheel?: ((event: WheelEvent) => void) | undefined;
-    } & Record<PropertyKey, unknown> & {
-        scrollbar?: import("@esportsplus/template").Attributes;
-        'scrollbar-container-content'?: import("@esportsplus/template").Attributes;
-    }, content: unknown): import("@esportsplus/template").Renderable;
+    (): import("@esportsplus/template").Renderable<unknown>;
+    (content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
+    (attributes: import("../../components/scrollbar/index.js").Attributes, content: import("@esportsplus/template").Renderable<unknown>): import("@esportsplus/template").Renderable<unknown>;
 };
 export default _default;