@esportsplus/ui 0.8.4 → 0.9.2

package/dist/components/field/optional.js

@@ -0,0 +1,16 @@
+import s from './select.js';
+import sw from './switch.js';
+import t from './text.js';
+const select = (data) => {
+    data.field ??= {};
+    data.field.class = `field--optional ${data.field?.class || ''}`;
+    data.field.content = s(data.field);
+    return sw(data);
+};
+const text = (data) => {
+    data.field ??= {};
+    data.field.class = `field--optional ${data.field?.class || ''}`;
+    data.field.content = t(data.field);
+    return sw(data);
+};
+export default { select, text };

package/dist/components/field/scss/index.scss

@@ -0,0 +1,2 @@
+.field{--margin-horizontal:0px;--margin-vertical:var(--size-300);--width:100%}.field--optional{--max-height:0;--max-height-active:0}.field.--active .field--optional{--max-height:var(--max-height-active)}.field-description,.field-error{--font-size:var(--font-size-300)}.field-error{--color:var(--color-red-400)}.field-mask{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-active:var(--box-shadow-400);--box-shadow-default:var(--box-shadow-300);--box-shadow-hover:var(--box-shadow-400);--box-shadow-pressed:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--outline-opacity:var(--outline-opacity-default);--outline-opacity-active:.32;--outline-opacity-default:0;--outline-opacity-hover:0;--outline-opacity-pressed:0;--outline-spacing:0px;--outline-width:var(--outline-width-default);--outline-width-active:4px;--outline-width-default:0px;--outline-width-hover:0px;--outline-width-pressed:0px;--padding-horizontal:0px;--padding-vertical:var(--size-400)}.field.--active>.field-mask,.field.--active :not(.field) .field-mask{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active);--outline-opacity:var(--outline-opacity-active);--outline-width:var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color:var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width:0px}.field-required{--border-radius:var(--border-radius-circle);--size:6px}.field-title{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500)}.field.--active .field-title{--color:var(--color-active)}.field:not(.--active):hover .field-title{--color:var(--color-hover)}.field:not(.--active):active .field-title{--color:var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--outline-opacity:var(--outline-opacity-hover);--outline-width:var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--outline-opacity:var(--outline-opacity-pressed);--outline-width:var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent:var(--accent-default);--accent-active:var(--accent-default);--accent-default:var(--color-white-400);--accent-hover:var(--accent-default);--accent-pressed:var(--accent-default);--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width-switch:40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX:0px;--translateY:0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent:var(--accent-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent:var(--accent-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent:var(--accent-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal:calc(var(--width-switch) - var(--width));--width:var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow:0 1px 0 #00000029}.field-mask--checkbox{--border-radius:var(--border-radius-300);--rotate:45deg;--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98}.field-mask--checkbox:before{--box-shadow:1px 1px 0 #00000029;--border-width:5px;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY:100%}.field-mask--radio{--border-radius:var(--border-radius-circle);--opacity-active:1;--opacity-default:.4;--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7}.field-mask--radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--translateX:50%;--translateY:50%;--width:var(--height)}.field-mask--switch{--border-radius:var(--border-radius-curved);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--width:var(--width-switch)}.field-mask--switch:before{--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--width:var(--height)}.field.--active .field-mask--switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.field-mask--input,.field-mask--select{--font-size:var(--font-size-400);--line-height:var(--line-height-400)}.field-mask--input{--size:var(--size-400)}.field-mask--select{--arrow-spacer:1px;--arrow-size:6px}.field-mask-arrow{--border-width:var(--border-width-500)}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;background:0 0;border:0;border-radius:0;margin:0;padding:0}button,button:active,button:focus,button:hover,input,input:active,input:focus,input:hover,select,select:active,select:focus,select:hover,textarea,textarea:active,textarea:focus,textarea:hover{outline:none}button:invalid,input:invalid,select:invalid,textarea:invalid{box-shadow:none}form{width:100%;margin:0;padding:0}label{cursor:pointer}.field{gap:var(--margin-vertical)var(--margin-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);z-index:1;display:flex;position:relative}.field:not(.--active):hover{z-index:8}.field.--active{z-index:9}.field--optional{max-height:var(--max-height);opacity:0;pointer-events:none;transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,max-height var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out}.field.--active .field--optional{opacity:1;pointer-events:auto}.field-description,.field-error,.field-title{color:var(--color);font-size:var(--font-size);word-wrap:break-word;width:100%;position:relative}.field-description:empty,.field-error:empty,.field-title:empty{height:0;margin:0}.field-error{animation:.32s linear fieldError}@keyframes fieldError{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}.field-mask:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;z-index:0;position:absolute;inset:0}.field-mask--flat:after{display:none}.field-mask--outline:before{box-shadow:0 0 0 var(--outline-width)var(--border-color);border-radius:var(--border-radius);content:"";opacity:var(--outline-opacity);pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:0;position:absolute;inset:0}.field-required{background:var(--background);border-radius:var(--border-radius);height:var(--size);width:var(--size)}.field-tag--hidden{appearance:none;opacity:0;pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:0;left:0}.field-title{font-weight:var(--font-weight);z-index:1}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.field-mask--checkbox:invalid,.field-mask--checkbox:required,.field-mask--radio:invalid,.field-mask--radio:required,.field-mask--switch:invalid,.field-mask--switch:required{box-shadow:none}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));width:var(--width)}.field-mask--checkbox .field-tag,.field-mask--radio .field-tag,.field-mask--switch .field-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}.field-mask--checkbox:before,.field-mask--radio:before{position:absolute;bottom:50%;right:50%}.field-mask--radio:before,.field-mask--switch:before{background:var(--accent);border-radius:inherit;transform-origin:50%}.field-mask--checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);transform-origin:0}.field-mask--switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);position:absolute}.field-mask--input,.field-mask--select{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size);line-height:var(--line-height);flex-wrap:wrap;align-items:center;width:100%;display:flex;position:relative}.field-mask--input:invalid,.field-mask--input:required,.field-mask--select:invalid,.field-mask--select:required{box-shadow:none}.field-mask--input,.field-mask--input .field-tag,.field-mask--select,.field-mask--select .field-tag{color:var(--color)}.field-mask--input .field-tag,.field-mask--select .field-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.field-mask--input{cursor:text;min-height:calc(var(--padding-vertical)*2 + var(--size))}.field-mask--input .field-tag{padding:var(--padding-vertical)var(--padding-horizontal);flex:auto;min-width:0}.field-mask--input .field-tag[type=number]{appearance:textfield}.field-mask--input textarea.field-tag{white-space:normal}.field-mask--select{cursor:pointer;padding:var(--padding-vertical)calc(var(--padding-horizontal)/1.5 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal)}.field-mask--select.--padding{padding-right:calc(var(--padding-horizontal)*1.5 + var(--arrow-size))}.field-mask-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--border-color);border-style:var(--border-style);border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.field-text{padding-right:var(--padding-horizontal)}
+/*$vite$:1*/

package/dist/components/field/select.js

@@ -0,0 +1,135 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import scrollbar from '../../components/scrollbar/index.js';
+import root from '../../components/root/index.js';
+import description from './description.js';
+import error from './error.js';
+import title from './title.js';
+const FIELD_OMIT = [
+    'content',
+    'description',
+    'effect',
+    'mask',
+    'name',
+    'options', 'option',
+    'required',
+    'selected', 'scrollbar',
+    'tag', 'text', 'title', 'tooltip'
+];
+const TOOLTIP_OMIT = ['direction'];
+function parse(keys, selected) {
+    let options = {};
+    for (let key of keys) {
+        options[key] = false;
+    }
+    options[selected] = true;
+    return {
+        options,
+        selected: selected || keys[0]
+    };
+}
+function template(data, state) {
+    data.scrollbar ??= {};
+    data.scrollbar.style = data.scrollbar.style || '--background-default: var(--color-black-400);';
+    data.tooltip ??= {};
+    data.tooltip.class = `tooltip-content--${data.tooltip?.direction || 's'} ${data.tooltip?.class || ''}`;
+    data.tooltip.direction ??= 's';
+    let { html: h, parent: { attributes: a } } = scrollbar({
+        attributes: data.scrollbar,
+        fixed: true
+    });
+    return html `
+        <div
+            class='tooltip-content --flex-column --width-full'
+            ${omit(data.tooltip, TOOLTIP_OMIT)}
+        >
+            <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);
+        }
+    }}'
+                ${a}
+            >
+                ${Object.keys(data.options || {}).map((key) => html `
+                    <div
+                        class='
+                            ${() => state.options[key] && '--active'}
+                            link
+                            --flex-vertical
+                        '
+                        data-key='${key}'
+                        ${data.option}
+                    >
+                        <span class='--text-truncate'>
+                            ${data.options[key]}
+                        </span>
+                    </div>
+                `)}
+            </div>
+
+            ${h}
+        </div>
+    `;
+}
+export default (data) => {
+    let state = reactive(Object.assign({
+        active: false,
+        error: '',
+        render: false,
+    }, parse(Object.keys(data.options || {}), data.selected)));
+    data.mask ??= {};
+    data.mask.onclick = () => {
+        state.render = true;
+        state.active = !state.active;
+        if (state.active) {
+            root.onclick.push(() => state.active = false);
+        }
+    };
+    data.tag ??= {};
+    data.tag.name = data.name;
+    data.tag.onclick = () => { };
+    data.tag.onrender = form.input.onrender(state);
+    data.tag.value = () => state.selected;
+    return html `
+        <div class='
+                ${() => state.active ? '--active' : ''}
+                field
+                tooltip
+                --flex-column
+            '
+            ${omit(data, FIELD_OMIT)}
+        >
+            ${title(data)}
+
+            <label
+                class='field-mask field-mask--select --flex-row --padding-400'
+                ${data.mask}
+            >
+                <input class='field-tag field-tag--hidden' ${data.tag}>
+
+                <div class='field-text' style='pointer-events: none' ${data.text}>
+                    ${() => data.options[state.selected] || '-'}
+                </div>
+
+                <div class='field-mask-arrow'></div>
+
+                ${() => state.render && template(data, state)}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/dist/components/field/switch.js

@@ -0,0 +1,6 @@
+import checkbox from './checkbox.js';
+export default (data) => {
+    data.mask = data.mask || {};
+    data.mask.class = `field-mask--switch ${data.mask?.class || ''}`;
+    return checkbox(data);
+};

package/dist/components/field/text.js

@@ -0,0 +1,64 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { omit, pick } from '@esportsplus/utilities';
+import form from '../../components/form/index.js';
+import description from './description.js';
+import error from './error.js';
+import title from './title.js';
+const FIELD_OMIT = [
+    'content',
+    'description',
+    'mask',
+    'name',
+    'placeholder',
+    'required',
+    'tag', 'textarea', 'title', 'type',
+    'value'
+];
+const INPUT_PICK = ['name', 'placeholder', 'required', 'type', 'value'];
+const TEXTAREA_PICK = ['name', 'placeholder'];
+export default (data) => {
+    let state = reactive({
+        active: false,
+        error: ''
+    });
+    data.onfocusin = () => {
+        state.active = true;
+    };
+    data.onfocusout = () => {
+        state.active = false;
+    };
+    data.tag ??= {};
+    data.tag.class = `field-tag --padding-400 ${data.tag.class || ''}`;
+    data.tag.onrender = form.input.onrender(state);
+    data.type ??= 'string';
+    data.value ??= '';
+    return html `
+        <div
+            class='
+                ${() => state.active && '--active'}
+                field
+                --flex-column
+            '
+            ${omit(data, FIELD_OMIT)}
+        >
+            ${title(data)}
+
+            <label class='field-mask field-mask--input --flex-row' ${data.mask}>
+                ${data.textarea
+        ? html `
+                        <textarea ${data.tag} ${pick(data, TEXTAREA_PICK)}>
+                            ${data.value}
+                        </textarea>
+                    `
+        : html `
+                        <input ${data.tag} ${pick(data, INPUT_PICK)}>
+                    `}
+                ${data.content || ''}
+            </label>
+
+            ${description(data)}
+            ${error(state)}
+        </div>
+    `;
+};

package/dist/components/field/textarea.js

@@ -0,0 +1,5 @@
+import text from './text.js';
+export default (data) => {
+    data.textarea = true;
+    return text(data);
+};

package/dist/components/field/title.js

@@ -0,0 +1,21 @@
+import { html } from '@esportsplus/template';
+import tooltip from '../../components/tooltip/index.js';
+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().attributes}
+                >
+                    <span class='tooltip-message tooltip-message--w'>Required</span>
+                </div>
+            `}
+        </div>
+    `;
+};

package/dist/components/footer/index.js

@@ -0,0 +1,60 @@
+import { html, svg } from '@esportsplus/template';
+import './scss/index.scss';
+function copy({ attributes, brand }) {
+    return html `
+        <div class='footer-copyright group-item --flex-center'>
+            <div
+                class='text --padding-vertical --padding-300 --text-300'
+                style='--color-default: var(--color-grey-500);'
+                ${attributes}
+            >
+                &copy; ${`${new Date().getFullYear()} ${brand}, All rights reserved`}
+            </div>
+        </div>
+    `;
+}
+export default ({ copyright, footer, nav, social }) => {
+    return html `
+        <footer class='footer' ${footer?.attributes}>
+            <div class='container'>
+                <div class='group group--offset-top --flex-center --margin-400'>
+
+                    ${nav
+        ? nav.links.map(({ text, url }) => html `
+                            <div class='group-item'>
+                                <a
+                                    class='link --color-white --padding-vertical-300 --text-300'
+                                    href='${url}'
+                                    style='--color-default: var(--color-grey-500);'
+                                    ${nav.attributes}
+                                >
+                                    ${text}
+                                </a>
+                            </div>
+                        `)
+        : copy(copyright)}
+
+                    <div class='footer-break'></div>
+
+                    ${social?.links && social.links.map(({ icon, url }) => html `
+                        <div class='group-item'>
+                            <a
+                                class='link --color-white --padding-0px'
+                                href='${url}'
+                                style='--color-default: var(--color-grey-500);'
+                                ${social.attributes}
+                            >
+                                <div class='icon --size-500'>
+                                    ${svg.sprite(icon)}
+                                </div>
+                            </a>
+                        </div>
+                    `)}
+
+                    ${nav && copy(copyright)}
+
+                </div>
+            </div>
+        </footer>
+    `;
+};

package/dist/components/footer/scss/index.scss

@@ -0,0 +1,2 @@
+.footer,.footer-break{width:100%}@media (max-width:640px){.footer-copyright:first-child{--width:100%}}@media (min-width:640px){.footer-copyright:first-child{margin-right:auto}}.footer-copyright:first-child+.footer-break{display:none}.footer-copyright:last-child{--width:100%}
+/*$vite$:1*/

package/dist/components/form/action.js

@@ -0,0 +1,57 @@
+import response from '@esportsplus/action';
+import input from './input.js';
+function parse(input) {
+    let data = {};
+    for (let [path, value] of input) {
+        let bucket = data, segments = path.indexOf('.') !== -1 ? path.split('.') : [path];
+        for (let i = 0; i < segments.length - 1; i++) {
+            bucket = bucket[segments[i]] = bucket[segments[i]] || {};
+        }
+        let key = segments.at(-1);
+        if (path.endsWith('[]')) {
+            if (typeof value === 'string' && value.trim() === '') {
+                continue;
+            }
+            bucket = bucket[key.substring(0, key.length - 2)] ??= [];
+            bucket.push(value);
+        }
+        else {
+            bucket[key] = value;
+        }
+    }
+    return data;
+}
+;
+export default function (action, s) {
+    return {
+        onclick: function (event) {
+            let trigger = event.target;
+            if (trigger?.type !== 'submit') {
+                return;
+            }
+            event.preventDefault();
+            this.dispatchEvent(new SubmitEvent('submit', { cancelable: true, bubbles: true, submitter: trigger }));
+        },
+        onsubmit: async function (event) {
+            event.preventDefault();
+            if (s) {
+                s.processing = true;
+            }
+            let { errors } = await action({
+                input: parse(new FormData(this).entries()),
+                response
+            });
+            for (let i = 0, n = errors.length; i < n; i++) {
+                let { message, path } = errors[i], reactive = input.get(this[path]);
+                if (!reactive) {
+                    continue;
+                }
+                reactive.error = `${message[0].toUpperCase()}${message.substring(1)}`;
+            }
+            if (s) {
+                s.processing = false;
+            }
+        }
+    };
+}
+;

package/dist/components/form/index.js

@@ -0,0 +1,3 @@
+import action from './action.js';
+import input from './input.js';
+export default { action, input };

package/dist/components/form/input.js

@@ -0,0 +1,10 @@
+let key = Symbol();
+const get = (element) => {
+    return element ? element[key] : undefined;
+};
+const onrender = (reactive) => {
+    return (element) => {
+        element[key] = reactive;
+    };
+};
+export default { get, onrender };

package/dist/components/form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/frame/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/dist/components/frame/scss/index.scss

@@ -0,0 +1,2 @@
+.frame{flex-wrap:wrap;justify-content:flex-start;width:100%;display:none;position:relative}.frame.--active{display:flex}
+/*$vite$:1*/

package/dist/components/grid/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/dist/components/grid/scss/index.scss

@@ -0,0 +1,2 @@
+.grid{--margin-horizontal:var(--size-400);--margin-vertical:var(--size-400);--max-width:1fr;--min-width:200px;grid-gap:var(--margin-horizontal)var(--margin-vertical);grid-template-columns:repeat(auto-fit,minmax(var(--min-width),var(--max-width)));display:grid;position:relative}.grid .grid-item{width:100%}
+/*$vite$:1*/

package/dist/components/group/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/dist/components/group/scss/index.scss

@@ -0,0 +1,2 @@
+.group{--margin-horizontal:var(--size-400);--width:auto}.group.--flex-column .group-item{--width:100%}.group--scroller .group-item{--margin-vertical:0px}.group{margin:0 calc(var(--margin-horizontal)/-2);width:calc(100% + var(--margin-horizontal));flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{margin-bottom:calc(var(--scrollbar-width)*-1);padding-bottom:var(--scrollbar-width);flex-flow:row;overflow-y:hidden}.group-item{margin:var(--margin-vertical)calc(var(--margin-horizontal)/2)0;width:var(--width);display:flex;position:relative}.group-item[class*=--width]{width:calc(var(--width) - var(--margin-horizontal))}
+/*$vite$:1*/

package/dist/components/highlight/index.js

@@ -0,0 +1,40 @@
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+let key = Symbol(), observer = null;
+export default (background) => {
+    if (observer === null) {
+        observer = new IntersectionObserver((entries) => {
+            let disconnected = 0, n = entries.length;
+            for (let i = 0; i < n; i++) {
+                let { isIntersecting, target } = entries[i];
+                if (target.isConnected) {
+                    target[key].highlight = +isIntersecting;
+                }
+                else {
+                    disconnected++;
+                    observer.unobserve(target);
+                }
+            }
+            if (n - disconnected === 0) {
+                observer.disconnect();
+                observer = null;
+            }
+        }, { threshold: 1 });
+    }
+    let state = reactive({
+        highlight: 0
+    });
+    return {
+        attributes: {
+            class: 'highlight',
+            onrender: function (element) {
+                element[key] = state;
+                observer.observe(element);
+            },
+            style: [
+                () => `--highlight: ${state.highlight}`,
+                `--background: ${background}`,
+            ]
+        }
+    };
+};

package/dist/components/highlight/scss/index.scss

@@ -0,0 +1,2 @@
+.highlight{--background:transparent;--highlight:1;background:linear-gradient(90deg,var(--background)50%,transparent 50%)110% 0/200% 100% no-repeat;background-position:calc((1 - var(--highlight))*110%)0;transition:background-position .32s}
+/*$vite$:1*/

package/dist/components/icon/index.js

@@ -0,0 +1 @@
+import './scss/index.scss';

package/dist/components/icon/scss/index.scss

@@ -0,0 +1,2 @@
+.icon{--color:inherit;--height:var(--size);--margin-horizontal:var(--size-300);--size:var(--size-400);--width:var(--size);color:var(--color);flex:0 0 var(--width);height:var(--height);width:var(--width);display:flex;position:relative}.icon svg{color:currentColor;fill:currentColor;width:100%;height:100%}
+/*$vite$:1*/

package/dist/components/index.js

@@ -0,0 +1,38 @@
+export * as accordion from './accordion/index.js';
+export * as anchor from './anchor/index.js';
+export * as banner from './banner/index.js';
+export * as border from './border/index.js';
+export * as bubble from './bubble/index.js';
+export * as button from './button/index.js';
+export * as card from './card/index.js';
+export * as clipboard from './clipboard/index.js';
+export * as container from './container/index.js';
+export * as counter from './counter/index.js';
+export * as ellipsis from './ellipsis/index.js';
+export * as field from './field/index.js';
+export * as footer from './footer/index.js';
+export * as form from './form/index.js';
+export * as frame from './frame/index.js';
+export * as grid from './grid/index.js';
+export * as group from './group/index.js';
+export * as highlight from './highlight/index.js';
+export * as icon from './icon/index.js';
+export * as json from './json/index.js';
+export * as link from './link/index.js';
+export * as loader from './loader/index.js';
+export * as loading from './loading/index.js';
+export * as magnet from './magnet/index.js';
+export * as modal from './modal/index.js';
+export * as normalize from './normalize/index.js';
+export * as number from './number/index.js';
+export * as page from './page/index.js';
+export * as root from './root/index.js';
+export * as row from './row/index.js';
+export * as scrollbar from './scrollbar/index.js';
+export * as sidebar from './sidebar/index.js';
+export * as site from './site/index.js';
+export * as text from './text/index.js';
+export * as thumbnail from './thumbnail/index.js';
+export * as tooltip from './tooltip/index.js';
+export * as truncate from './truncate/index.js';
+export * as typewriter from './typewriter/index.js';

package/dist/components/json/download.js

@@ -0,0 +1,8 @@
+export default (content, name) => {
+    let link = document.createElement('a');
+    link.download = name + '.json';
+    link.href = window.URL.createObjectURL(new Blob([JSON.stringify(content)], { type: 'application/json' }));
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+};

package/dist/components/json/index.js

@@ -0,0 +1,2 @@
+import download from './download.js';
+export default { download };

package/dist/components/link/hover.js

@@ -0,0 +1,17 @@
+import { html } from '@esportsplus/template';
+export default ({ attributes, content }) => {
+    return {
+        attributes: {
+            class: 'link--hover'
+        },
+        html: html `
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
+        `
+    };
+};

package/dist/components/link/index.js

@@ -0,0 +1,3 @@
+import hover from './hover.js';
+import './scss/index.scss';
+export default { hover };

package/dist/components/link/scss/index.scss

@@ -0,0 +1,2 @@
+.link{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--line-height:var(--line-height-400);--padding-horizontal:0px;--padding-vertical:var(--size-400);--width:auto}.link.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.link:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.link:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.link{background:var(--background);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,color var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center flex-start;display:flex;position:relative}.link--hover.tooltip:hover .link-hover--one,.link--hover:not(.--active):hover .link-hover--one{opacity:0;transform:translateY(-75%)}.link--hover.tooltip:hover .link-hover--two,.link--hover:not(.--active):hover .link-hover--two{opacity:1;transform:translate(50%,50%)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,all .3s cubic-bezier(.23,.65,.74,1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{opacity:0;padding:0 var(--padding-horizontal);white-space:nowrap;position:absolute;bottom:50%;right:50%;transform:translate(50%,125%)}
+/*$vite$:1*/

package/dist/components/loader/index.js

@@ -0,0 +1,39 @@
+import { html } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+export default ({ attributes, content }) => {
+    let state = reactive({
+        load: false,
+        scale: false
+    });
+    setTimeout(() => {
+        state.scale = true;
+    }, 300);
+    return html `
+        <div class='loader ${() => state.load && 'loader--load'}'>
+            <div class='loader ${() => state.load && 'loader--load'}'>
+                <div class='loader-content'>
+                    <div
+                        class='
+                            ${() => state.scale && 'loader-logo--scale'}
+                            loader-logo
+                            text
+                            --flex-center
+                            --text-uppercase
+                            --text-600
+                        '
+                        style='color: var(--color-grey-500);'
+                        onanimationend='${({ animationName: name }) => {
+        if (name === 'scale') {
+            state.load = true;
+        }
+    }}'
+                        ${attributes}
+                    >
+                        ${content}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+};

package/dist/components/loader/scss/index.scss

@@ -0,0 +1,2 @@
+.loader-logo{--size:10svh;--translateY:8px}.loader{background-color:var(--color-black-500);opacity:1;pointer-events:none;visibility:visible;z-index:9999;transition:all .3s ease-in-out;position:fixed;inset:0}.loader--load{animation:.6s ease-in-out .2s both move}.loader--load .loader--load{animation:.6s ease-in-out both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}to{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{position:absolute;inset:50% auto auto 50%;transform:translate(-50%)translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:.32s both scale}@keyframes scale{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale3d(1.8,1.8,1.8)}}
+/*$vite$:1*/

package/dist/components/loading/index.js

@@ -0,0 +1,12 @@
+import { html } from '@esportsplus/template';
+import './scss/index.scss';
+export default (attributes) => {
+    return html `
+        <div
+            class='loading --border-width-700 --size-800'
+            style='--border-color: var(--color-border-500);'
+            ${attributes}
+        >
+        </div>
+    `;
+};

package/dist/components/loading/scss/index.scss

@@ -0,0 +1,2 @@
+.loading{--animation-duration:.64s;--border-color:var(--color);--border-width:var(--border-width-400);--size:var(--size-400);animation:loading var(--animation-duration)linear infinite;border:var(--border-width)solid color-mix(in srgb,var(--border-color),transparent 90%);border-left-color:var(--border-color);height:var(--size);width:var(--size);border-radius:100%}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+/*$vite$:1*/