@esportsplus/ui 0.17.6 → 0.18.0

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

@@ -7,9 +7,9 @@ type Accordion = HTMLElement & {
 };
 declare const _default: () => {
     attributes: {
-        class: () => any;
+        class: () => false | 0 | "--active";
         onrender: (element: Accordion) => void;
-        style: (element: Accordion) => any;
+        style: (element: Accordion) => string | false | 0;
     };
     state: ReturnType<typeof reactive<{
         active: boolean;

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

@@ -1,17 +1,14 @@
+import { type Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-type Options = {
-    attributes?: Record<string, unknown>;
-    currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
+declare const _default: (data: Attributes & {
+    currency?: "IGNORE" | "EUR" | "GBP" | "USD";
     decimals?: number;
     delay?: number;
     max?: number;
+    state?: {
+        value: number;
+    };
     suffix?: string;
     value: number;
-};
-declare const _default: ({ attributes, currency, decimals, delay, max, suffix, value }: Options) => {
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-    state: Prettify<{ [K in keyof T]: import("@esportsplus/reactivity").Infer<T[K]>; } & {
-        dispose: VoidFunction;
-    }>;
-};
+}) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/counter/index.js

@@ -1,9 +1,10 @@
 import { effect, reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 let formatters = {};
-export default ({ attributes, currency, decimals, delay, max, suffix, value }) => {
-    let api = reactive({ value: -1 }), formatter = currency === 'IGNORE'
+export default (data) => {
+    let { currency, decimals, delay, max, suffix, value } = data, api = data.state || reactive({ value: -1 }), formatter = currency === 'IGNORE'
         ? undefined
         : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
             style: 'currency',
@@ -45,40 +46,37 @@ export default ({ attributes, currency, decimals, delay, max, suffix, value }) =
             setTimeout(() => api.value = value, delay || 1000);
         }
     });
-    return {
-        html: html `
-            <div class='counter' ${attributes}>
-                ${() => {
-            let n = state.length;
-            if (n === 0) {
-                return '';
-            }
-            return html.reactive(state.render, function (value, i) {
-                if (isNaN(parseInt(value, 10))) {
-                    return html `
-                                <span class='counter-character counter-character--symbol'>
-                                    ${value}
-                                </span>
-                            `;
-                }
+    return html `
+        <div class='counter' ${omit(data, ['currency', 'decimals', 'delay', 'max', 'state', 'suffix'])}>
+            ${() => {
+        let n = state.length;
+        if (n === 0) {
+            return '';
+        }
+        return html.reactive(state.render, function (value, i) {
+            if (isNaN(parseInt(value, 10))) {
                 return html `
-                            <div
-                                class='
-                                    ${i > n - 3 && 'counter-character--fraction'}
-                                    counter-character
-                                '
-                            >
-                                <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
-                                    <span>9</span>
-                                    ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
-                                    <span>0</span>
-                                </div>
-                            </div>
+                            <span class='counter-character counter-character--symbol'>
+                                ${value}
+                            </span>
                         `;
-            });
-        }}
-            </div>
-        `,
-        state: api
-    };
+            }
+            return html `
+                        <div
+                            class='
+                                ${i > n - 3 && 'counter-character--fraction'}
+                                counter-character
+                            '
+                        >
+                            <div class='counter-character-track' style='${() => `--value: ${this[i]}`}'>
+                                <span>9</span>
+                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html `<span>${value}</span>`)}
+                                <span>0</span>
+                            </div>
+                        </div>
+                    `;
+        });
+    }}
+        </div>
+    `;
 };

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

@@ -1,3 +1,4 @@
+import { Attributes } from '@esportsplus/template';
 import './scss/index.scss';
-declare const _default: (attributes?: Record<string, string>) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: (attributes?: Attributes) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/ellipsis/index.js

@@ -1,7 +1,7 @@
 import { html } from '@esportsplus/template';
 import './scss/index.scss';
 export default (attributes) => html `
-    <div class="ellipsis" ${attributes}>
+    <div class='ellipsis' ${attributes}>
         <span></span>
         <span></span>
         <span></span>

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

@@ -1,14 +1,357 @@
-import description from './description.js';
-type Data = {
-    class?: string;
-    content?: unknown;
-    description?: Parameters<typeof description>[0]['description'];
-    mask?: Record<string, unknown>;
+import { type Attributes, type Renderable } from '@esportsplus/template';
+type A = Attributes & {
+    checked?: boolean;
+    disabled?: boolean;
     name?: string;
-    style?: string;
-    tag?: Record<string, unknown>;
-    title: string;
+    required?: boolean;
+    type?: string;
     value?: unknown;
-} & Record<string, unknown>;
-declare const _default: (data: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+};
+declare const _default: {
+    checkbox: {
+        (content: (mask: ((attributes: A) => Renderable)) => Renderable): 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> & {
+            state?: {
+                active: boolean;
+            };
+        }, content: (mask: ((attributes: A) => Renderable)) => Renderable): Renderable;
+    };
+    radio: {
+        (content: (mask: ((attributes: A) => Renderable)) => Renderable): 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> & {
+            state?: {
+                active: boolean;
+            };
+        }, content: (mask: ((attributes: A) => Renderable)) => Renderable): Renderable;
+    };
+    switch: {
+        (content: (mask: ((attributes: A) => Renderable)) => Renderable): 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> & {
+            state?: {
+                active: boolean;
+            };
+        }, content: (mask: ((attributes: A) => Renderable)) => Renderable): Renderable;
+    };
+};
 export default _default;

package/build/components/field/checkbox.js

@@ -1,52 +1,57 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import description from './description.js';
-const FIELD_OMIT = ['content', 'description', 'mask', 'name', 'title', 'value'];
-export default (data) => {
-    let state = reactive({
-        active: false
-    });
+import { omit, pick } from '@esportsplus/utilities';
+import template from '../../components/template/index.js';
+const TAG_KEYS = ['checked', 'disabled', 'name', 'required'];
+function mask(attributes, modifier, state) {
     return html `
         <div
             class='
-                ${() => state.active && '--active'}
-                field
-                --flex-column
+                ${`field-mask--${modifier}`}
+                field-mask
             '
-            onchange='${(e) => {
+            ${omit(attributes, TAG_KEYS)}
+        >
+            <input
+                ${attributes.checked || attributes.value || state.active && 'checked'}
+                class='field-mask-tag field-mask-tag--hidden'
+                type='${modifier === 'radio' ? 'radio' : 'checkbox'}'
+                value='${attributes.value || 1}'
+                ${pick(attributes, TAG_KEYS)}
+            >
+        </div>
+    `;
+}
+const field = template.factory(function (attributes, content) {
+    let state = attributes.state || reactive({
+        active: false
+    });
+    return html `
+            <label
+                class='
+                    ${() => state.active && '--active'}
+                    field
+                '
+                onchange='${(e) => {
         if (e.target.type !== 'checkbox') {
             return;
         }
         state.active = e.target?.checked;
     }}'
-            ${omit(data, FIELD_OMIT)}
-        >
-            <div class='field-title --flex-horizontal-space-between --flex-vertical'>
-                ${data.title}
-
-                <label
-                    class='
-                        ${data.mask?.class && String(data.mask.class).indexOf('field-mask--switch') !== -1 && 'field-mask--switch'}
-                        field-mask
-                        --margin-left --margin-400
-                    '
-                    ${data.mask}
-                >
-                    <input
-                        ${(data.class && data.class.indexOf('--active') !== -1) || data.value ? 'checked' : ''}
-                        ${data.name && `name='${data.name}'`}
-                        class='field-tag field-tag--hidden'
-                        type='checkbox'
-                        value='1'
-                        ${data.tag}
-                    >
-                </label>
-            </div>
-
-            ${data.content || ''}
-
-            ${description(data)}
-        </div>
-    `;
+                ${omit(attributes, ['state'])}
+            >
+                ${content((attributes) => this(attributes, state))}
+            </label>
+        `;
+});
+export default {
+    checkbox: field.bind((attributes, state) => {
+        return mask(attributes, 'checkbox', state);
+    }),
+    radio: field.bind((attributes, state) => {
+        return mask(attributes, 'radio', state);
+    }),
+    switch: field.bind((attributes, state) => {
+        return mask(attributes, 'switch', state);
+    }),
 };

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

@@ -1,7 +1,6 @@
-declare const _default: (data: {
-    description?: {
-        attributes?: Record<string, unknown>;
-        content: unknown;
-    };
-}) => import("@esportsplus/template/build/types").RenderableTemplate | "";
+import { type Attributes } from '@esportsplus/template';
+declare const _default: {
+    (content: unknown): import("@esportsplus/template").Renderable;
+    (attributes: Attributes, content: unknown): import("@esportsplus/template").Renderable;
+};
 export default _default;

package/build/components/field/description.js

@@ -1,11 +1,7 @@
 import { html } from '@esportsplus/template';
-export default (data) => {
-    if (!data?.description) {
-        return '';
-    }
-    return html `
-        <div class='field-description' ${data.description.attributes}>
-            ${data.description.content}
+import template from '../../components/template/index.js';
+export default template.factory((attributes, content) => html `
+        <div class='field-description' ${attributes}>
+            ${content}
         </div>
-    `;
-};
+    `);

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

@@ -1,4 +1,4 @@
-declare const _default: (data: {
+declare const _default: (state: {
     error: unknown;
 }) => () => import("@esportsplus/template/build/types").RenderableTemplate | "";
 export default _default;