@esportsplus/ui 0.0.21 → 0.0.22

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

@@ -0,0 +1,8 @@
+declare const _default: (data: {
+    description?: string;
+}) => "" | {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/description.js

@@ -0,0 +1,9 @@
+import { html } from '@esportsplus/template';
+export default (data) => {
+    if (!data?.description) {
+        return '';
+    }
+    return html `
+        <div class='field-description --margin-top --margin-300'>${data.description}</div>
+    `;
+};

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

@@ -0,0 +1,8 @@
+declare const _default: (data: {
+    error: string;
+}) => () => "" | {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/error.js

@@ -0,0 +1,11 @@
+import { html } from '@esportsplus/template';
+export default (data) => {
+    return () => {
+        if (!data.error) {
+            return '';
+        }
+        return html `
+            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
+        `;
+    };
+};

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

@@ -0,0 +1,66 @@
+import select from './select';
+import text from './text';
+declare const _default: {
+    select: (data: {
+        class?: string | undefined;
+        effect?: ((selected: string | number) => void) | undefined;
+        mask?: {
+            class?: string | undefined;
+            content?: any;
+            style?: string | undefined;
+        } | undefined;
+        name?: string | undefined;
+        options: Record<string | number, string | number>;
+        option?: {
+            class?: string | undefined;
+            style?: string | undefined;
+        } | undefined;
+        selected?: any;
+        scrollbar?: {
+            style?: string | undefined;
+        } | undefined;
+        style?: string | undefined;
+        text?: {
+            class?: string | undefined;
+        } | undefined;
+        tooltip?: {
+            class?: string | undefined;
+            direction?: any;
+            style?: string | undefined;
+        } | undefined;
+    } & {
+        description?: string | undefined;
+    } & {
+        required?: boolean | undefined;
+        title?: string | undefined;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
+    text: (data: {
+        active?: boolean | undefined;
+        class?: string | undefined;
+        mask?: {
+            class?: string | undefined;
+            content?: any;
+            style?: string | undefined;
+        } | undefined;
+        name?: string | undefined;
+        placeholder?: string | undefined;
+        style?: string | undefined;
+        type?: string | undefined;
+        value?: unknown;
+    } & {
+        description?: string | undefined;
+    } & {
+        required?: boolean | undefined;
+        title?: string | undefined;
+    }) => {
+        content: string;
+        type: string;
+        values: never[];
+    };
+};
+export default _default;
+export { select, text };

package/build/components/field/index.js

@@ -0,0 +1,4 @@
+import select from './select';
+import text from './text';
+export default { select, text };
+export { select, text };

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

@@ -0,0 +1,36 @@
+import description from './description';
+import title from './title';
+type Data = {
+    class?: string;
+    effect?: (selected: number | string) => void;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    options: Record<number | string, number | string>;
+    option?: {
+        class?: string;
+        style?: string;
+    };
+    selected?: any;
+    scrollbar?: {
+        style?: string;
+    };
+    style?: string;
+    text?: {
+        class?: string;
+    };
+    tooltip?: {
+        class?: string;
+        direction?: any;
+        style?: string;
+    };
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+declare const _default: (data: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/select.js

@@ -0,0 +1,101 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form, scrollbar, root } from '../../components';
+import description from './description';
+import error from './error';
+import title from './title';
+function options(keys, selected) {
+    let options = {};
+    for (let key of keys) {
+        options[key] = false;
+    }
+    options[selected] = true;
+    return options;
+}
+export default (data) => {
+    let { attributes: a, html: h } = scrollbar({
+        fixed: true,
+        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+    }), state = reactive({
+        active: false,
+        error: '',
+        options: options(Object.keys(data.options || {}), data.selected),
+        render: false,
+        selected: data.selected
+    });
+    return html `
+        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
+            ${title(data)}
+
+            <label
+                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
+                onclick='${() => {
+        state.render = true;
+        state.active = !state.active;
+        if (state.active) {
+            root.queue.onclick(() => state.active = false);
+        }
+    }}'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { }}'
+                    value='${() => state.selected}'
+                    ${form.input.attributes(state)}
+                >
+
+                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
+                    ${() => data.options[state.selected] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => {
+        if (!state.render) {
+            return '';
+        }
+        return html `
+                        <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
+                            <div
+                                class='row --flex-column'
+                                onclick='${(e) => {
+            let key = e?.target?.dataset?.key;
+            if (key === undefined) {
+                return;
+            }
+            state.options[key] = true;
+            state.options[state.selected] = false;
+            state.active = false;
+            state.selected = key;
+            if (data.effect) {
+                data.effect(key);
+            }
+        }}'
+                                style='${data?.tooltip?.style || ''}'
+                                ${a}
+                            >
+                                ${Object.keys(state.options).map((key) => html `
+                                    <div
+                                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
+                                        style='${data?.option?.style || ''}'
+                                    >
+                                        <span class="--text-truncate">
+                                            ${data.options[key]}
+                                        </span>
+                                    </div>
+                                `)}
+                            </div>
+
+                            ${h}
+                        </div>
+                    `;
+    }}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,22 @@
+import description from './description';
+import title from './title';
+type Data = {
+    active?: boolean;
+    class?: string;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    placeholder?: string;
+    style?: string;
+    type?: string;
+    value?: unknown;
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+declare const _default: (data: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/text.js

@@ -0,0 +1,45 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form } from '../../components';
+import description from './description';
+import error from './error';
+import title from './title';
+export default (data) => {
+    let state = reactive({
+        active: (data?.active || false),
+        error: ''
+    });
+    return html `
+        <div
+            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
+            onfocusin='${() => {
+        state.active = true;
+    }}'
+            onfocusout='${() => {
+        state.active = false;
+    }}'
+            style='${data?.style || ''}'
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag --padding-400'
+                    name='${data?.name || ''}'
+                    placeholder='${data?.placeholder || ''}'
+                    type='${data?.type || 'string'}'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                    ${form.input.attributes(state)}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

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

@@ -0,0 +1,9 @@
+declare const _default: (data: {
+    required?: boolean;
+    title?: string;
+}) => "" | {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/field/title.js

@@ -0,0 +1,18 @@
+import { html } from '@esportsplus/template';
+import { tooltip } from '../../components';
+export default (data) => {
+    if (!data?.title) {
+        return '';
+    }
+    return html `
+        <div class="field-title --flex-horizontal-space-between --flex-vertical">
+            ${data.title}
+
+            ${data?.required && html `
+                <div class="bubble --background-primary --margin-left" ${tooltip.onhover()}>
+                    <span class="tooltip-message tooltip-message--w">Required</span>
+                </div>
+            `}
+        </div>
+    `;
+};

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

@@ -8,8 +8,8 @@ type Data = {
     };
     class?: string;
     content?: any;
-};
-declare const _default: (data: Data & Parameters<typeof header>[0]) => {
+} & Parameters<typeof header>[0];
+declare const _default: (data: Data) => {
     content: string;
     type: string;
     values: never[];

package/build/components/index.d.ts

@@ -1,6 +1,9 @@
 export { default as alert } from './alert';
+export { default as field } from './field';
 export { default as form } from './form';
+export { default as overlay } from './overlay';
 export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
+export { default as site } from './site';
 export { default as tooltip } from './tooltip';

package/build/components/index.js

@@ -1,6 +1,9 @@
 export { default as alert } from './alert';
+export { default as field } from './field';
 export { default as form } from './form';
+export { default as overlay } from './overlay';
 export { default as page } from './page';
 export { default as root } from './root';
 export { default as scrollbar } from './scrollbar';
+export { default as site } from './site';
 export { default as tooltip } from './tooltip';

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

@@ -0,0 +1,10 @@
+type Data = {
+    class?: string;
+    content?: any;
+};
+declare const _default: (data?: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/overlay/index.js

@@ -0,0 +1,6 @@
+import { html } from '@esportsplus/template';
+export default (data = {}) => html `
+    <section class='overlay ${data?.class || ''}'>
+        ${data?.content || ''}
+    </section>
+`;

package/build/components/page/header.d.ts

@@ -1,9 +1,8 @@
-type Data = {
+declare const _default: (data: {
     subtitle?: string;
     suptitle?: string;
     title?: string;
-};
-declare const _default: ({ subtitle, suptitle, title }: Data) => {
+}) => {
     content: string;
     type: string;
     values: never[];

package/build/components/page/header.js

@@ -1,20 +1,20 @@
 import { html } from '@esportsplus/template';
-export default ({ subtitle, suptitle, title }) => html `
-    ${suptitle ? html `
+export default (data) => html `
+    ${data?.suptitle ? html `
         <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
-            ${suptitle}
+            ${data?.suptitle}
         </span>
     ` : ''}
 
-    ${title ? html `
-        <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
-            ${title}
+    ${data?.title ? html `
+        <h1 class="page-title --line-height-200 --margin-300 ${!data?.subtitle && '--text-crop-bottom'} ${data?.suptitle ? '--margin-top' : '--text-crop-top'}">
+            ${data?.title}
         </h1>
     ` : ''}
 
-    ${subtitle ? html `
+    ${data?.subtitle ? html `
         <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
-            ${subtitle}
+            ${data?.subtitle}
         </span>
     ` : ''}
 `;

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

@@ -1,7 +1,7 @@
 import header from './header';
 import layout from './layout';
 declare const _default: {
-    header: ({ subtitle, suptitle, title }: {
+    header: (data: {
         subtitle?: string | undefined;
         suptitle?: string | undefined;
         title?: string | undefined;

package/build/components/page/layout.d.ts

@@ -1,8 +1,7 @@
-type Data = {
+declare const _default: (data?: {
     class?: string;
     content?: any;
-};
-declare const _default: (data?: Data) => {
+}) => {
     content: string;
     type: string;
     values: never[];

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

@@ -1,26 +1,8 @@
-import layout from './layout';
 import queue from './queue';
 declare const _default: {
-    layout: (data?: {
-        overlay?: {
-            class?: string | undefined;
-            content?: any;
-        } | undefined;
-        site?: {
-            class?: string | undefined;
-            content?: any;
-            scrollbar?: {
-                style?: string | undefined;
-            } | undefined;
-        } | undefined;
-    }) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
     queue: {
         onclick: (fn: VoidFunction) => void;
     };
 };
 export default _default;
-export { layout, queue };
+export { queue };

package/build/components/root/index.js

@@ -1,4 +1,3 @@
-import layout from './layout';
 import queue from './queue';
-export default { layout, queue };
-export { layout, queue };
+export default { queue };
+export { queue };

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

@@ -0,0 +1,13 @@
+type Data = {
+    class?: string;
+    content?: any;
+    scrollbar?: {
+        style?: string;
+    };
+};
+declare const _default: (data: Data) => {
+    content: string;
+    type: string;
+    values: never[];
+};
+export default _default;

package/build/components/site/index.js

@@ -0,0 +1,14 @@
+import { html } from '@esportsplus/template';
+import { scrollbar } from '../../components';
+export default (data) => {
+    let { attributes: a, html: h } = scrollbar({
+        fixed: true,
+        style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+    });
+    return html `
+        <section class='site ${data?.class || ''}' ${a}>
+            ${data?.content || ''}
+            ${h}
+        </section>
+    `;
+};

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

@@ -7,11 +7,6 @@ declare const _default: {
         type: string;
         values: never[];
     };
-    onfocus: (active?: boolean) => {
-        content: string;
-        type: string;
-        values: never[];
-    };
     onhover: (active?: boolean) => {
         content: string;
         type: string;
@@ -32,8 +27,11 @@ declare const _default: {
             text: string;
             url?: string | undefined;
         }[] | undefined;
+        state: {
+            active: boolean;
+        };
         style?: string | undefined;
-    }) => {
+    }) => () => "" | {
         content: string;
         type: string;
         values: never[];

package/build/components/tooltip/index.js

@@ -22,20 +22,6 @@ const onclick = ({ active, toggle }) => {
         }
     });
 };
-const onfocus = (active = false) => {
-    let state = reactive({ active });
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onfocusin: () => {
-            state.active = true;
-        },
-        onfocusout: () => {
-            state.active = false;
-        }
-    });
-};
 const onhover = (active = false) => {
     let state = reactive({ active });
     return html({
@@ -50,4 +36,4 @@ const onhover = (active = false) => {
         }
     });
 };
-export default { onclick, onfocus, onhover, menu };
+export default { onclick, onhover, menu };

package/build/components/tooltip/menu.d.ts

@@ -13,9 +13,12 @@ type Data = {
         text: string;
         url?: string;
     }[];
+    state: {
+        active: boolean;
+    };
     style?: string;
 };
-declare const _default: (data: Data) => {
+declare const _default: (data: Data) => () => "" | {
     content: string;
     type: string;
     values: never[];

package/build/components/tooltip/menu.js

@@ -1,32 +1,49 @@
+import { effect, reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-export default (data) => html `
-    <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-        ${(data?.items || []).map(item => html `
-            ${item?.border ? html `
-                <div
-                    class="border ${item?.border?.class || ''}"
-                    style='
-                        margin-left: calc(var(--margin-horizontal) * -1);
-                        width: calc(100% + var(--margin-horizontal) * 2);
-                    '
-                ></div>
-            ` : ''}
+export default (data) => {
+    let state = reactive({
+        render: false
+    });
+    effect(() => {
+        if (!data.state.active || state.render) {
+            return;
+        }
+        state.render = true;
+    });
+    return () => {
+        if (!state.render) {
+            return '';
+        }
+        return html `
+            <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
+                ${(data?.items || []).map(item => html `
+                    ${item?.border ? html `
+                        <div
+                            class="border ${item?.border?.class || ''}"
+                            style='
+                                margin-left: calc(var(--margin-horizontal) * -1);
+                                width: calc(100% + var(--margin-horizontal) * 2);
+                            '
+                        ></div>
+                    ` : ''}
 
-            <${item.url ? 'a' : 'div'}
-                class='link --flex-vertical ${item?.class}' ${item?.onclick ? html `onclick='${item.onclick}'` : ''}
-                style='${item?.style || ''}'
-                ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-            >
-                ${item?.svg ? html `
-                    <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                        ${item.svg}
-                    </div>
-                ` : ''}
+                    <${item?.url ? 'a' : 'div'}
+                        class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
+                        style='${item?.style || ''}'
+                        ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
+                    >
+                        ${item?.svg ? html `
+                            <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
+                                ${item.svg}
+                            </div>
+                        ` : ''}
 
-                <div class="text --color-text --flex-fill">
-                    ${item.text}
-                </div>
-            </${item.url ? 'a' : 'div'}>
-        `)}
-    </div>
-`;
+                        <div class="text --color-text --flex-fill">
+                            ${item.text}
+                        </div>
+                    </${item?.url ? 'a' : 'div'}>
+                `)}
+            </div>
+        `;
+    };
+};

package/package.json

@@ -37,5 +37,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "./build/index.d.ts",
-    "version": "0.0.21"
+    "version": "0.0.22"
 }

package/src/components/field/description.ts

@@ -0,0 +1,12 @@
+import { html } from '@esportsplus/template';
+
+
+export default (data: { description?: string }) => {
+    if (!data?.description) {
+        return '';
+    }
+
+    return html`
+        <div class='field-description --margin-top --margin-300'>${data.description}</div>
+    `;
+}

package/src/components/field/error.ts

@@ -0,0 +1,14 @@
+import { html } from '@esportsplus/template';
+
+
+export default (data: { error: string }) => {
+    return () => {
+        if (!data.error) {
+            return '';
+        }
+
+        return html`
+            <div class='field-error --margin-top --margin-300 --text-bold'>${data.error}</div>
+        `;
+    };
+}

package/src/components/field/index.ts

@@ -0,0 +1,6 @@
+import select from './select';
+import text from './text';
+
+
+export default { select, text };
+export { select, text };

package/src/components/field/select.ts

@@ -0,0 +1,147 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form, scrollbar, root } from '~/components';
+import description from './description';
+import error from './error';
+import title from './title';
+
+
+type Data = {
+    class?: string;
+    effect?: (selected: number | string) => void;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    options: Record<number | string, number | string>;
+    option?: {
+        class?: string;
+        style?: string;
+    };
+    selected?: any;
+    scrollbar?: {
+        style?: string;
+    };
+    style?: string;
+    text?: {
+        class?: string;
+    };
+    tooltip?: {
+        class?: string;
+        direction?: any;
+        style?: string;
+    };
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+
+
+function options(keys: (number | string)[], selected: number | string) {
+    let options: Record<string, boolean> = {};
+
+    for (let key of keys) {
+        options[key] = false;
+    }
+
+    options[selected] = true;
+
+    return options;
+}
+
+
+export default (data: Data) => {
+    let { attributes: a, html: h } = scrollbar({
+            fixed: true,
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        }),
+        state = reactive({
+            active: false,
+            error: '',
+            options: options(Object.keys( data.options || {} ), data.selected),
+            render: false,
+            selected: data.selected
+        });
+
+    return html`
+        <div class="field tooltip ${data?.class || ''} ${() => state.active ? '--active' : ''} --flex-column" style='${data?.style || ''}'>
+            ${title(data)}
+
+            <label
+                class="field-mask field-mask--select --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300 --padding-400"
+                onclick='${() => {
+                    state.render = true;
+                    state.active = !state.active;
+
+                    if (state.active) {
+                        root.queue.onclick(() => state.active = false);
+                    }
+                }}'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag field-tag--hidden'
+                    name='${data.name}'
+                    onclick='${() => { /* Prevent double click events from firing */ }}'
+                    value='${() => state.selected}'
+                    ${form.input.attributes(state)}
+                >
+
+                <div class="field-text ${data?.text?.class || ''}" style='pointer-events: none'>
+                    ${() => data.options[ state.selected ] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => {
+                    if (!state.render) {
+                        return '';
+                    }
+
+                    return html`
+                        <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
+                            <div
+                                class='row --flex-column'
+                                onclick='${(e: Event) => {
+                                    let key = (e?.target as HTMLElement)?.dataset?.key;
+
+                                    if (key === undefined) {
+                                        return;
+                                    }
+
+                                    // Swap active
+                                    state.options[key] = true;
+                                    state.options[state.selected] = false;
+
+                                    state.active = false;
+                                    state.selected = key;
+
+                                    if (data.effect) {
+                                        data.effect(key);
+                                    }
+                                }}'
+                                style='${data?.tooltip?.style || ''}'
+                                ${a}
+                            >
+                                ${Object.keys( state.options ).map((key: number | string) => html`
+                                    <div
+                                        class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
+                                        style='${data?.option?.style || ''}'
+                                    >
+                                        <span class="--text-truncate">
+                                            ${data.options[key]}
+                                        </span>
+                                    </div>
+                                `)}
+                            </div>
+
+                            ${h}
+                        </div>
+                    `;
+                }}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/src/components/field/text.ts

@@ -0,0 +1,64 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { form } from '~/components';
+import description from './description';
+import error from './error';
+import title from './title';
+
+
+type Data = {
+    active?: boolean;
+    class?: string;
+    mask?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    name?: string;
+    placeholder?: string;
+    style?: string;
+    type?: string;
+    value?: unknown;
+} & Parameters<typeof description>[0] & Parameters<typeof title>[0];
+
+
+export default (data: Data) => {
+    let state = reactive({
+            active: (data?.active || false),
+            error: ''
+        });
+
+    return html`
+        <div
+            class="field --flex-column ${data?.class || ''} ${() => state.active ? '--active' : ''}"
+            onfocusin='${() => {
+                state.active = true;
+            }}'
+            onfocusout='${() => {
+                state.active = false;
+            }}'
+            style='${data?.style || ''}'
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--input --flex-row ${data?.mask?.class || ''} ${(data?.title || (data?.class || '').indexOf('field--optional') !== -1) && '--margin-top'} --margin-300'
+                style='${data?.mask?.style || ''}'
+            >
+                <input
+                    class='field-tag --padding-400'
+                    name='${data?.name || ''}'
+                    placeholder='${data?.placeholder || ''}'
+                    type='${data?.type || 'string'}'
+                    ${data?.value !== undefined ? `value='${data.value}'` : ''}
+                    ${form.input.attributes(state)}
+                >
+
+                ${data?.mask?.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/src/components/field/title.ts

@@ -0,0 +1,21 @@
+import { html } from '@esportsplus/template';
+import { tooltip } from '~/components';
+
+
+export default (data: { required?: boolean, title?: string }) => {
+    if (!data?.title) {
+        return '';
+    }
+
+    return html`
+        <div class="field-title --flex-horizontal-space-between --flex-vertical">
+            ${data.title}
+
+            ${data?.required && html`
+                <div class="bubble --background-primary --margin-left" ${tooltip.onhover()}>
+                    <span class="tooltip-message tooltip-message--w">Required</span>
+                </div>
+            `}
+        </div>
+    `;
+}

package/src/components/form/layout.ts

@@ -11,10 +11,10 @@ type Data = {
     };
     class?: string;
     content?: any;
-};
+} & Parameters<typeof header>[0];
 
 
-export default (data: Data & Parameters<typeof header>[0]) => html`
+export default (data: Data) => html`
     ${header(data)}
 
     <form class='${data?.class}' ${data?.action || ''}>

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export { default as alert }from './alert';
+export { default as field }from './field';
 export { default as form }from './form';
+export { default as overlay }from './overlay';
 export { default as page }from './page';
 export { default as root }from './root';
 export { default as scrollbar }from './scrollbar';
+export { default as site }from './site';
 export { default as tooltip }from './tooltip';

package/src/components/overlay/index.ts

@@ -0,0 +1,14 @@
+import { html } from '@esportsplus/template';
+
+
+type Data = {
+    class?: string;
+    content?: any;
+};
+
+
+export default (data: Data = {}) => html`
+    <section class='overlay ${data?.class || ''}'>
+        ${data?.content || ''}
+    </section>
+`;

package/src/components/page/header.ts

@@ -1,29 +1,22 @@
 import { html } from '@esportsplus/template';
 
 
-type Data = {
-    subtitle?: string;
-    suptitle?: string;
-    title?: string;
-};
-
-
-export default ({ subtitle, suptitle, title }: Data) => html`
-    ${suptitle ? html`
+export default (data: { subtitle?: string, suptitle?: string, title?: string }) => html`
+    ${data?.suptitle ? html`
         <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
-            ${suptitle}
+            ${data?.suptitle}
         </span>
     ` : ''}
 
-    ${title ? html`
-        <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
-            ${title}
+    ${data?.title ? html`
+        <h1 class="page-title --line-height-200 --margin-300 ${!data?.subtitle && '--text-crop-bottom'} ${data?.suptitle ? '--margin-top' : '--text-crop-top'}">
+            ${data?.title}
         </h1>
     ` : ''}
 
-    ${subtitle ? html`
+    ${data?.subtitle ? html`
         <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
-            ${subtitle}
+            ${data?.subtitle}
         </span>
     ` : ''}
 `;

package/src/components/page/layout.ts

@@ -1,13 +1,7 @@
 import { html } from '@esportsplus/template';
 
 
-type Data = {
-    class?: string;
-    content?: any;
-};
-
-
-export default (data: Data = {}) => html`
+export default (data: { class?: string, content?: any } = {}) => html`
     <section class='page ${data?.class}'>
         ${data?.content}
     </section>

package/src/components/root/index.ts

@@ -1,6 +1,5 @@
-import layout from './layout';
 import queue from './queue';
 
 
-export default { layout, queue };
-export { layout, queue };
+export default { queue };
+export { queue };

package/src/components/site/index.ts

@@ -0,0 +1,26 @@
+import { html } from '@esportsplus/template';
+import { scrollbar } from '~/components';
+
+
+type Data = {
+    class?: string;
+    content?: any;
+    scrollbar?: {
+        style?: string;
+    };
+};
+
+
+export default (data: Data) => {
+    let { attributes: a, html: h } = scrollbar({
+            fixed: true,
+            style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
+        });
+
+    return html`
+        <section class='site ${data?.class || ''}' ${a}>
+            ${data?.content || ''}
+            ${h}
+        </section>
+    `;
+};

package/src/components/tooltip/index.ts

@@ -29,22 +29,6 @@ const onclick = ({ active, toggle }: { active?: boolean, toggle?: boolean }) =>
     });
 };
 
-const onfocus = (active: boolean = false) => {
-    let state = reactive({ active });
-
-    return html({
-        class: () => {
-            return `tooltip ${state.active ? '--active' : ''}`;
-        },
-        onfocusin: () => {
-            state.active = true;
-        },
-        onfocusout: () => {
-            state.active = false;
-        }
-    });
-};
-
 const onhover = (active: boolean = false) => {
     let state = reactive({ active });
 
@@ -62,4 +46,4 @@ const onhover = (active: boolean = false) => {
 };
 
 
-export default { onclick, onfocus, onhover, menu };
+export default { onclick, onhover, menu };

package/src/components/tooltip/menu.ts

@@ -1,3 +1,4 @@
+import { effect, reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
 
 
@@ -16,38 +17,59 @@ type Data = {
         text: string;
         url?: string;
     }[];
+    state: { active: boolean };
     style?: string;
 };
 
 
-export default (data: Data) => html`
-    <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
-        ${(data?.items || []).map(item => html`
-            ${item?.border ? html`
-                <div
-                    class="border ${item?.border?.class || ''}"
-                    style='
-                        margin-left: calc(var(--margin-horizontal) * -1);
-                        width: calc(100% + var(--margin-horizontal) * 2);
-                    '
-                ></div>
-            ` : ''}
-
-            <${item.url ? 'a' : 'div'}
-                class='link --flex-vertical ${item?.class}' ${item?.onclick ? html`onclick='${item.onclick}'` : ''}
-                style='${item?.style || ''}'
-                ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
-            >
-                ${item?.svg ? html`
-                    <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
-                        ${item.svg}
-                    </div>
-                ` : ''}
-
-                <div class="text --color-text --flex-fill">
-                    ${item.text}
-                </div>
-            </${item.url ? 'a' : 'div'}>
-        `)}
-    </div>
-`;
+export default (data: Data) => {
+    let state = reactive({
+            render: false
+        });
+
+    effect(() => {
+        if (!data.state.active || state.render) {
+            return;
+        }
+
+        state.render = true;
+    });
+
+    return () => {
+        if (!state.render) {
+            return '';
+        }
+
+        return html`
+            <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
+                ${(data?.items || []).map(item => html`
+                    ${item?.border ? html`
+                        <div
+                            class="border ${item?.border?.class || ''}"
+                            style='
+                                margin-left: calc(var(--margin-horizontal) * -1);
+                                width: calc(100% + var(--margin-horizontal) * 2);
+                            '
+                        ></div>
+                    ` : ''}
+
+                    <${item?.url ? 'a' : 'div'}
+                        class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
+                        style='${item?.style || ''}'
+                        ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
+                    >
+                        ${item?.svg ? html`
+                            <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
+                                ${item.svg}
+                            </div>
+                        ` : ''}
+
+                        <div class="text --color-text --flex-fill">
+                            ${item.text}
+                        </div>
+                    </${item?.url ? 'a' : 'div'}>
+                `)}
+            </div>
+        `;
+    };
+};

package/src/components/root/layout.ts

@@ -1,36 +0,0 @@
-import { html } from '@esportsplus/template';
-import { scrollbar } from '~/components';
-
-
-type Data = {
-    overlay?: {
-        class?: string;
-        content?: any;
-    };
-    site?: {
-        class?: string;
-        content?: any;
-        scrollbar?: {
-            style?: string;
-        };
-    };
-};
-
-
-export default (data: Data = {}) => {
-    let s = scrollbar({
-            fixed: true,
-            style: data?.site?.scrollbar?.style || '--background-default: var(--color-black-400);'
-        });
-
-    return html`
-        <section class='site ${data?.site?.class || ''}' ${s.attributes}>
-            ${data?.site?.content || ''}
-            ${s.html}
-        </section>
-
-        <section class='overlay ${data?.overlay?.class || ''}'>
-            ${data?.overlay?.content || ''}
-        </section>
-    `;
-};