@esportsplus/ui 0.12.1 → 0.13.1

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

@@ -55,9 +55,11 @@ declare const _default: {
         text?: Record<string, unknown>;
         title?: unknown;
         tooltip?: {
-            direction?: unknown;
+            content?: Record<string, unknown>;
         } & Record<string, unknown>;
-    } & Record<string, unknown>) => import("@esportsplus/template/build/types").RenderableTemplate;
+    } & Record<string, unknown> & {
+        scrollbar?: Record<string, unknown>;
+    }) => import("@esportsplus/template/build/types").RenderableTemplate;
     switch: (data: Parameters<typeof checkbox>[0]) => import("@esportsplus/template/build/types").RenderableTemplate;
     textarea: (data: Parameters<typeof text>[0]) => import("@esportsplus/template/build/types").RenderableTemplate;
     text: (data: {

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

@@ -1,3 +1,4 @@
+import scrollbar from '../../components/scrollbar/index.js';
 type Data<T extends Record<number | string, number | string>> = {
     class?: string;
     content?: unknown;
@@ -15,8 +16,8 @@ type Data<T extends Record<number | string, number | string>> = {
     text?: Record<string, unknown>;
     title?: unknown;
     tooltip?: {
-        direction?: unknown;
+        content?: Record<string, unknown>;
     } & Record<string, unknown>;
-} & Record<string, unknown>;
+} & Parameters<typeof scrollbar>[0] & Record<string, unknown>;
 declare const _default: <T extends Record<number | string, number | string>>(data: Data<T>) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/field/select.js

@@ -1,9 +1,9 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
+import { isArray, 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 scrollbar from '../../components/scrollbar/index.js';
 import description from './description.js';
 import error from './error.js';
 import title from './title.js';
@@ -18,7 +18,6 @@ const FIELD_OMIT = [
     'selected', 'scrollbar',
     'tag', 'text', 'title', 'tooltip'
 ];
-const TOOLTIP_OMIT = ['direction'];
 function parse(keys, selected) {
     let options = {};
     for (let key of keys) {
@@ -32,22 +31,20 @@ function parse(keys, selected) {
 }
 function template(data, state) {
     data.scrollbar ??= {};
-    data.scrollbar.style = data.scrollbar.style || '--background-default: var(--color-black-400);';
+    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 `
+    let content = data.tooltip.content ??= {};
+    if (isArray(content.class)) {
+        content.class.push('tooltip-content tooltip-content--s --flex-column --width-full');
+    }
+    else {
+        content.class = [content.class, 'tooltip-content tooltip-content--s --flex-column --width-full'];
+    }
+    content.scrollbar = data.scrollbar;
+    return scrollbar(content, html `
         <div
-            class='tooltip-content --flex-column --width-full'
-            ${omit(data.tooltip, TOOLTIP_OMIT)}
-        >
-            <div
-                class='row --flex-column'
-                onclick='${(e) => {
+            class='row --flex-column'
+            onclick='${(e) => {
         let key = e?.target?.dataset?.key;
         if (key === undefined) {
             return;
@@ -60,28 +57,24 @@ function template(data, state) {
             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}
+        >
+            ${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>
-    `;
+    `);
 }
 export default (data) => {
     let state = reactive(Object.assign({

package/build/components/index.d.ts

@@ -16,13 +16,13 @@ export * as frame from './frame/index.js';
 export * as grid from './grid/index.js';
 export * as group from './group/index.js';
 export { default as highlight } from './highlight/index.js';
-export * as icon from './icon/index.js';
+export { default as icon } from './icon/index.js';
 export { default as json } from './json/index.js';
 export { default as link } from './link/index.js';
 export * as loader from './loader/index.js';
 export { default as loading } from './loading/index.js';
 export { default as magnet } from './magnet/index.js';
-export * as modal from './modal/index.js';
+export { default as modal } from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as page } from './page/index.js';
 export { default as root } from './root/index.js';

package/build/components/index.js

@@ -16,13 +16,13 @@ export * as frame from './frame/index.js';
 export * as grid from './grid/index.js';
 export * as group from './group/index.js';
 export { default as highlight } from './highlight/index.js';
-export * as icon from './icon/index.js';
+export { default as icon } from './icon/index.js';
 export { default as json } from './json/index.js';
 export { default as link } from './link/index.js';
 export * as loader from './loader/index.js';
 export { default as loading } from './loading/index.js';
 export { default as magnet } from './magnet/index.js';
-export * as modal from './modal/index.js';
+export { default as modal } from './modal/index.js';
 export { default as number } from './number/index.js';
 export { default as page } from './page/index.js';
 export { default as root } from './root/index.js';

package/build/components/magnet/index.js

@@ -33,12 +33,16 @@ export default ({ attributes, hide }) => {
     }
     return {
         html: html `
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
+            <div
+                class='magnet'
+                style='${() => `
+                    height: ${state.height ? `${state.height}px` : '100%'};
+                    opacity: ${state.opacity};
+                    transform: translate(${state.left}px, ${state.top}px);
+                    width: ${state.width}px;
+                `}'
+                ${attributes}
+            ></div>
         `,
         sibling: {
             attributes: events

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

@@ -1 +1,4 @@
+import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
+declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/modal/index.js

@@ -1 +1,10 @@
+import { isArray } from '@esportsplus/utilities';
+import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
+export default (data, content) => {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+    data.class.push('modal');
+    return scrollbar(data, content);
+};

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

@@ -1,14 +1,5 @@
 import './scss/index.scss';
-declare const _default: ({ attributes, fixed }?: {
-    attributes?: Record<string, unknown>;
-    fixed?: boolean;
-}) => {
-    html: import("@esportsplus/template/build/types").RenderableTemplate;
-    parent: {
-        attributes: {
-            class: string;
-            onscroll: (this: HTMLElement) => void;
-        };
-    };
-};
+declare const _default: (data: Record<string, unknown> & {
+    scrollbar?: Record<string, unknown>;
+}, content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/scrollbar/index.js

@@ -1,17 +1,31 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 let root = document.body, width;
-export default ({ attributes, fixed } = {}) => {
+export default (data, content) => {
     let state = reactive({
         height: 100,
         translate: 0
     });
-    return {
-        html: html `
+    return html `
+        <div
+            onscroll='${function () {
+        if (width === undefined) {
+            width = this.offsetWidth - this.clientWidth;
+            if (width && width !== 17) {
+                root.style.setProperty('--scrollbar-width', `${width}px`);
+            }
+        }
+        state.height = (this.clientHeight / this.scrollHeight) * 100;
+        state.translate = (this.scrollTop / this.clientHeight) * 100;
+    }}'
+            ${omit(data, ['scrollbar'])}
+        >
+            ${content}
+
             <div
                 class='
-                    ${fixed && 'scrollbar--fixed'}
                     ${() => state.height >= 100 && 'scrollbar--hidden'}
                     scrollbar
                 '
@@ -19,24 +33,9 @@ export default ({ attributes, fixed } = {}) => {
                     --translate: translate3d(0, ${state.translate}%, 0);
                     --height: ${state.height}%;
                 `}'
-                ${attributes}
+                ${data.scrollbar}
             >
             </div>
-        `,
-        parent: {
-            attributes: {
-                class: 'scrollbar-content',
-                onscroll: function () {
-                    if (width === undefined) {
-                        width = this.offsetWidth - this.clientWidth;
-                        if (width && width !== 17) {
-                            root.style.setProperty('--scrollbar-width', `${width}px`);
-                        }
-                    }
-                    state.height = (this.clientHeight / this.scrollHeight) * 100;
-                    state.translate = (this.scrollTop / this.clientHeight) * 100;
-                }
-            }
-        }
-    };
+        </div>
+    `;
 };

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

@@ -1 +1,4 @@
+import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
+declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+export default _default;

package/build/components/sidebar/index.js

@@ -1 +1,10 @@
+import { isArray } from '@esportsplus/utilities';
+import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
+export default (data, content) => {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+    data.class.push('sidebar');
+    return scrollbar(data, content);
+};

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

@@ -1,9 +1,4 @@
 import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-type Data = {
-    attributes?: Record<string, unknown>;
-    content?: any;
-    scrollbar?: Parameters<typeof scrollbar>[0];
-};
-declare const _default: ({ attributes, content, scrollbar: sb }: Data) => import("@esportsplus/template/build/types").RenderableTemplate;
+declare const _default: (data: Parameters<typeof scrollbar>[0], content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
 export default _default;

package/build/components/site/index.js

@@ -1,17 +1,13 @@
-import { html } from '@esportsplus/template';
+import { isArray } from '@esportsplus/utilities';
 import { onclick } from '../../components/root/index.js';
 import scrollbar from '../../components/scrollbar/index.js';
 import './scss/index.scss';
-export default ({ attributes, content, scrollbar: sb }) => {
-    sb ??= {};
-    sb.attributes ??= {};
-    sb.attributes.style ??= '--background-default: var(--color-black-400);';
-    sb.fixed ??= true;
-    let { html: h, parent } = scrollbar(sb);
-    return html `
-        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
-            ${content || ''}
-            ${h}
-        </section>
-    `;
+export default (data, content) => {
+    data.style ??= '--background-default: var(--color-black-400);';
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+    data.class.push('site');
+    data.onclick = onclick;
+    return scrollbar(data, content);
 };

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

@@ -1,24 +1,11 @@
 import './scss/index.scss';
 declare const _default: {
-    onclick: (data?: {
+    onclick: (data: Record<string, unknown> & {
         active?: boolean;
         toggle?: boolean;
-    }) => {
-        attributes: {
-            class: () => string;
-            onclick: (this: HTMLElement, e: Event) => void;
-        };
-        state: Prettify<{ [K in keyof T]: import("@esportsplus/reactivity").Infer<T[K]>; } & {
-            dispose: VoidFunction;
-        }>;
-    };
-    onhover: (active?: boolean) => {
-        attributes: {
-            class: () => string;
-            onmouseover: () => void;
-            onmouseout: () => void;
-        };
-        toggle: () => void;
-    };
+    }, content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
+    onhover: (data: Record<string, unknown> & {
+        active?: boolean;
+    }, content: unknown) => import("@esportsplus/template/build/types").RenderableTemplate;
 };
 export default _default;

package/build/components/tooltip/index.js

@@ -1,4 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { isArray, omit } from '@esportsplus/utilities';
 import root from '../../components/root/index.js';
 import './scss/index.scss';
 let queue = [], running = false, scheduled = false;
@@ -13,52 +15,64 @@ function frame() {
     }
     running = false;
 }
-const onclick = (data = {}) => {
+const onclick = (data, content) => {
     let state = reactive({
         active: data.active || false
     });
-    return {
-        attributes: {
-            class: () => {
-                return `tooltip ${state.active && '--active'}`;
-            },
-            onclick: function (e) {
-                let active = true, node = e.target;
-                if (data.toggle && (this.contains(node) || this.isSameNode(node))) {
-                    active = !state.active;
-                }
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+    data.class.push(() => {
+        return state.active && '--active';
+    });
+    return html `
+        <div
+            class='tooltip'
+            onclick='${function (e) {
+        let active = true, node = e.target;
+        if (data.toggle && (this.contains(node) || this.isSameNode(node))) {
+            active = !state.active;
+        }
+        frame();
+        state.active = active;
+        if (active) {
+            queue.push(() => state.active = false);
+        }
+        if (!scheduled) {
+            root.onclick.push(() => {
                 frame();
-                state.active = active;
-                if (active) {
-                    queue.push(() => state.active = false);
-                }
-                if (!scheduled) {
-                    root.onclick.push(() => {
-                        frame();
-                        scheduled = false;
-                    });
-                    scheduled = true;
-                }
-            }
-        },
-        state
-    };
-};
-const onhover = (active = false) => {
-    let state = reactive({ active });
-    return {
-        attributes: {
-            class: () => `tooltip ${state.active ? '--active' : ''}`,
-            onmouseover: () => {
-                state.active = true;
-            },
-            onmouseout: () => {
-                state.active = false;
-            }
-        },
-        toggle: () => {
-            state.active = !state.active;
+                scheduled = false;
+            });
+            scheduled = true;
         }
-    };
+    }}}'
+            ${omit(data, ['active', 'toggle'])}
+        >
+            ${content}
+        </div>
+    `;
+};
+const onhover = (data, content) => {
+    let state = reactive({ active: data.active || false });
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+    data.class.push(() => {
+        return state.active && '--active';
+    });
+    return html `
+        <div
+            class='tooltip'
+            onmouseover='${() => {
+        state.active = true;
+    }}}'
+            onmouseout='${() => {
+        state.active = false;
+    }}'
+            ${omit(data, ['active', 'toggle'])}
+        >
+            ${content}
+        </div>
+    `;
 };
 export default { onclick, onhover };

package/package.json

@@ -47,7 +47,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "scripts": {
     "build": "run-s build:vite build:ts",
     "build:ts": "tsc && tsc-alias",

package/src/components/field/select.ts

@@ -1,9 +1,9 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
+import { isArray, omit } from '@esportsplus/utilities';
 import form from '~/components/form';
-import scrollbar from '~/components/scrollbar';
 import root from '~/components/root';
+import scrollbar from '~/components/scrollbar';
 import description from './description';
 import error from './error';
 import title from './title';
@@ -26,9 +26,9 @@ type Data<T extends Record<number | string, number | string>> = {
     text?: Record<string, unknown>;
     title?: unknown;
     tooltip?: {
-        direction?: unknown;
+        content?: Record<string, unknown>;
     } & Record<string, unknown>;
-} & Record<string, unknown>;
+} & Parameters<typeof scrollbar>[0] & Record<string, unknown>;
 
 
 const FIELD_OMIT: (keyof Data<any>)[] = [
@@ -43,8 +43,6 @@ const FIELD_OMIT: (keyof Data<any>)[] = [
     'tag', 'text', 'title', 'tooltip'
 ];
 
-const TOOLTIP_OMIT: (keyof NonNullable<Data<any>['tooltip']>)[] = ['direction'];
-
 
 function parse(keys: (number | string)[], selected: number | string) {
     let options: Record<string, boolean> = {};
@@ -63,63 +61,58 @@ function parse(keys: (number | string)[], selected: number | string) {
 
 function template<T extends Record<number | string, number | string>>(data: Data<T>, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
     data.scrollbar ??= {};
-    data.scrollbar.style = data.scrollbar.style || '--background-default: var(--color-black-400);';
-
+    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
-        });
+    let content = data.tooltip.content ??= {};
 
-    return html`
+    if (isArray(content.class)) {
+        content.class.push('tooltip-content tooltip-content--s --flex-column --width-full');
+    }
+    else {
+        content.class = [content.class, 'tooltip-content tooltip-content--s --flex-column --width-full'];
+    }
+
+    content.scrollbar = data.scrollbar;
+
+    return scrollbar(content, html`
         <div
-            class='tooltip-content --flex-column --width-full'
-            ${omit(data.tooltip, TOOLTIP_OMIT)}
+            class='row --flex-column'
+            onclick='${(e: Event) => {
+                let key = (e?.target as HTMLElement)?.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);
+                }
+            }}'
         >
-            <div
-                class='row --flex-column'
-                onclick='${(e: Event) => {
-                    let key = (e?.target as HTMLElement)?.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: number | string) => 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}
+            ${Object.keys( data.options || {} ).map((key: number | string) => 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>
-    `;
+    `);
 }
 
 

package/src/components/index.ts

@@ -16,13 +16,13 @@ export * as frame from './frame';
 export * as grid from './grid';
 export * as group from './group';
 export { default as highlight } from './highlight';
-export * as icon from './icon';
+export { default as icon } from './icon';
 export { default as json } from './json';
 export { default as link } from './link';
 export * as loader from './loader';
 export { default as loading } from './loading';
 export { default as magnet } from './magnet';
-export * as modal from './modal';
+export { default as modal } from './modal';
 export { default as number } from './number';
 export { default as page } from './page';
 export { default as root } from './root';

package/src/components/magnet/index.ts

@@ -42,12 +42,16 @@ export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hi
 
     return {
         html: html`
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
+            <div
+                class='magnet'
+                style='${() => `
+                    height: ${state.height ? `${state.height}px` : '100%'};
+                    opacity: ${state.opacity};
+                    transform: translate(${state.left}px, ${state.top}px);
+                    width: ${state.width}px;
+                `}'
+                ${attributes}
+            ></div>
         `,
         sibling: {
             attributes: events

package/src/components/modal/index.ts

@@ -1 +1,14 @@
-import './scss/index.scss';
+import { isArray } from '@esportsplus/utilities';
+import scrollbar from '~/components/scrollbar';
+import './scss/index.scss';
+
+
+export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+
+    (data.class as unknown[]).push('modal');
+
+    return scrollbar(data, content);
+};

package/src/components/scrollbar/index.ts

@@ -1,5 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
 import './scss/index.scss';
 
 
@@ -7,19 +8,33 @@ let root = document.body,
     width: number | undefined;
 
 
-// Convert to wrapper object/container instead of manually placing attributes and html
-// Look into scrollbar customization options
-export default ({ attributes, fixed }: { attributes?: Record<string, unknown>, fixed?: boolean } = {}) => {
+// TODO: Look into scrollbar customization options
+export default (data: Record<string, unknown> & { scrollbar?: Record<string, unknown> }, content: unknown) => {
     let state = reactive({
             height: 100,
             translate: 0
         });
 
-    return {
-        html: html`
+    return html`
+        <div
+            onscroll='${function(this: HTMLElement) {
+                if (width === undefined) {
+                    width = this.offsetWidth - this.clientWidth;
+
+                    if (width && width !== 17) {
+                        root.style.setProperty('--scrollbar-width', `${width}px`);
+                    }
+                }
+
+                state.height = (this.clientHeight / this.scrollHeight) * 100;
+                state.translate = (this.scrollTop / this.clientHeight) * 100;
+            }}'
+            ${omit(data, ['scrollbar'])}
+        >
+            ${content}
+
             <div
                 class='
-                    ${fixed && 'scrollbar--fixed'}
                     ${() => state.height >= 100 && 'scrollbar--hidden'}
                     scrollbar
                 '
@@ -27,26 +42,9 @@ export default ({ attributes, fixed }: { attributes?: Record<string, unknown>, f
                     --translate: translate3d(0, ${state.translate}%, 0);
                     --height: ${state.height}%;
                 `}'
-                ${attributes}
+                ${data.scrollbar}
             >
             </div>
-        `,
-        parent: {
-            attributes: {
-                class: 'scrollbar-content',
-                onscroll: function(this: HTMLElement) {
-                    if (width === undefined) {
-                        width = this.offsetWidth - this.clientWidth;
-
-                        if (width && width !== 17) {
-                            root.style.setProperty('--scrollbar-width', `${width}px`);
-                        }
-                    }
-
-                    state.height = (this.clientHeight / this.scrollHeight) * 100;
-                    state.translate = (this.scrollTop / this.clientHeight) * 100;
-                }
-            }
-        }
-    };
+        </div>
+    `;
 };

package/src/components/sidebar/index.ts

@@ -1 +1,14 @@
-import './scss/index.scss';
+import { isArray } from '@esportsplus/utilities';
+import scrollbar from '~/components/scrollbar';
+import './scss/index.scss';
+
+
+export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+
+    (data.class as unknown[]).push('sidebar');
+
+    return scrollbar(data, content);
+};

package/src/components/site/index.ts

@@ -1,28 +1,19 @@
-import { html } from '@esportsplus/template';
+import { isArray } from '@esportsplus/utilities';
 import { onclick } from '~/components/root';
 import scrollbar from '~/components/scrollbar';
 import './scss/index.scss';
 
 
-type Data = {
-    attributes?: Record<string, unknown>;
-    content?: any;
-    scrollbar?: Parameters<typeof scrollbar>[0];
-};
+export default (data: Parameters<typeof scrollbar>[0], content: unknown) => {
+    data.style ??= '--background-default: var(--color-black-400);';
 
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
 
-export default ({ attributes, content, scrollbar: sb }: Data) => {
-    sb ??= {};
-    sb.attributes ??= {};
-    sb.attributes.style ??= '--background-default: var(--color-black-400);';
-    sb.fixed ??= true;
+    (data.class as unknown[]).push('site');
 
-    let { html: h, parent } = scrollbar(sb);
+    data.onclick = onclick;
 
-    return html`
-        <section class='site' ${attributes} ${{ onclick }} ${parent.attributes}>
-            ${content || ''}
-            ${h}
-        </section>
-    `;
+    return scrollbar(data, content);
 };

package/src/components/tooltip/index.ts

@@ -1,4 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import { isArray, omit } from '@esportsplus/utilities';
 import root from '~/components/root';
 import './scss/index.scss';
 
@@ -25,17 +27,23 @@ function frame() {
 }
 
 
-const onclick = (data: { active?: boolean, toggle?: boolean } = {}) => {
+const onclick = (data: Record<string, unknown> & { active?: boolean, toggle?: boolean }, content: unknown) => {
     let state = reactive({
             active: data.active || false
         });
 
-    return {
-        attributes: {
-            class: () => {
-                return `tooltip ${state.active && '--active'}`;
-            },
-            onclick: function(this: HTMLElement, e: Event) {
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+
+    (data.class as unknown[]).push(() => {
+        return state.active && '--active';
+    });
+
+    return html`
+        <div
+            class='tooltip'
+            onclick='${function(this: HTMLElement, e: Event) {
                 let active = true,
                     node = e.target as Node | null;
 
@@ -57,29 +65,39 @@ const onclick = (data: { active?: boolean, toggle?: boolean } = {}) => {
                     });
                     scheduled = true;
                 }
-            }
-        },
-        state
-    };
+            }}}'
+            ${omit(data, ['active', 'toggle'])}
+        >
+            ${content}
+        </div>
+    `;
 };
 
-const onhover = (active: boolean = false) => {
-    let state = reactive({ active });
+const onhover = (data: Record<string, unknown> & { active?: boolean }, content: unknown) => {
+    let state = reactive({ active: data.active || false });
+
+    if (!isArray(data.class)) {
+        data.class = data.class ? [data.class] : [];
+    }
+
+    (data.class as unknown[]).push(() => {
+        return state.active && '--active';
+    });
 
-    return {
-        attributes: {
-            class: () => `tooltip ${state.active ? '--active' : ''}`,
-            onmouseover: () => {
+    return html`
+        <div
+            class='tooltip'
+            onmouseover='${() => {
                 state.active = true;
-            },
-            onmouseout: () => {
+            }}}'
+            onmouseout='${() => {
                 state.active = false;
-            }
-        },
-        toggle: () => {
-            state.active = !state.active;
-        }
-    };
+            }}'
+            ${omit(data, ['active', 'toggle'])}
+        >
+            ${content}
+        </div>
+    `;
 };