@esportsplus/ui 0.51.7 → 0.54.0

package/src/components/loader/scss/index.scss

@@ -1,71 +0,0 @@
-@use 'variables';
-
-.loader {
-    background-color: #01020964;
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    opacity: 1;
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    transition: all 0.3s ease-in-out;
-    visibility: visible;
-    z-index: 9999;
-
-
-    &--load {
-        animation: 0.4s 0.2s ease-in-out 1 both loaderMove;
-
-        & & {
-            animation: 0.4s ease-in-out 1 both loaderMove;
-        }
-    }
-
-
-    @keyframes loaderMove {
-        0% {
-            transform: translateY(0);
-        }
-        80% {
-            transform: translateY(-102%);
-        }
-        100% {
-            transform: translateY(-102%);
-        }
-    }
-
-
-    & & {
-        background-color: var(--color-black-400);
-    }
-
-    &-content {
-        bottom: auto;
-        left: 50%;
-        position: absolute;
-        right: auto;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
-
-    &-logo {
-        color: white;
-
-        &--scale {
-            animation: loaderLogoScale 0.32s 1;
-            animation-fill-mode: both;
-
-            @keyframes loaderLogoScale {
-                from {
-                    opacity: 1;
-                    transform: scale3d(1, 1, 1);
-                }
-                to {
-                    opacity: 0;
-                    transform: scale3d(1.8, 1.8, 1.8);
-                }
-            }
-        }
-    }
-}

package/src/components/loader/scss/variables.scss

@@ -1,6 +0,0 @@
-.loader {
-    &-logo{
-        --size: 10svh;
-        --translateY: 8px;
-    }
-}

package/src/components/radio/scss/index.scss

@@ -1,50 +0,0 @@
-@use '/lib';
-@use 'variables';
-
-.radio {
-    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);
-    position: relative;
-    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);
-
-    &:invalid,
-    &:required {
-        box-shadow: none;
-    }
-
-    &::before {
-        background: var(--accent);
-        border-radius: inherit;
-        bottom: 50%;
-        box-shadow: var(--box-shadow);
-        content: '';
-        height: var(--height);
-        opacity: var(--opacity);
-        right: 50%;
-        position: absolute;
-        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
-        transform-origin: center;
-        width: var(--width);
-    }
-
-    // Hide HTML Field Element
-    &-tag {
-        @include lib.position(absolute, 0 null null 0);
-        height: 0px;
-        opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: 0;
-    }
-}

package/src/components/radio/scss/variables.scss

@@ -1,67 +0,0 @@
-@use '/tokens';
-
-.radio {
-    --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: 100%;
-    --border-style: solid;
-    --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
-    --height: var(--size);
-    --margin-horizontal: calc(var(--width-switch) - var(--width));
-    --opacity: var(--opacity-default);
-    --opacity-active: 1;
-    --opacity-default: 0.4;
-    --opacity-hover: var(--opacity-default);
-    --opacity-pressed: var(--opacity-default);
-    --rotate: 0deg;
-    --scale: var(--scale-default);
-    --scale-active: 0.9;
-    --scale-default: 0;
-    --scale-hover: 0.8;
-    --scale-pressed: 0.7;
-    --size: var(--size-600);
-    --width: var(--height);
-    --width-switch: 40px;
-
-    &::before {
-        --height: calc((var(--size) / 2) - (var(--border-width) * 2));
-        --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
-        --translateX: 50%;
-        --translateY: 50%;
-        --width: var(--height);
-    }
-
-    #{tokens.state(inactive, 'label')},
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --opacity: var(--opacity-hover);
-            --scale: var(--scale-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --opacity: var(--opacity-pressed);
-            --scale: var(--scale-pressed);
-        }
-    }
-
-    #{tokens.state(active)} {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --box-shadow: var(--box-shadow-active);
-        --opacity: var(--opacity-active);
-        --scale: var(--scale-active);
-    }
-}

package/src/components/root/index.ts

@@ -1,6 +0,0 @@
-import onclick from './onclick';
-import './scss/index.scss';
-
-
-export default { onclick };
-export { onclick };

package/src/components/root/onclick.ts

@@ -1,20 +0,0 @@
-import factory from '@esportsplus/queue';
-
-
-let queue = factory<VoidFunction | (() => Promise<void>)>(64);
-
-
-const onclick = async () => {
-    let item;
-
-    while (item = queue.next()) {
-        await item();
-    }
-};
-
-onclick.push = (fn: VoidFunction) => {
-    queue.add(fn);
-};
-
-
-export default onclick;

package/src/components/scrollbar/index.ts

@@ -1,70 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { reactive } from '@esportsplus/reactivity';
-import { omit } from '@esportsplus/utilities';
-import template from '~/components/template';
-import './scss/index.scss';
-
-
-type A = Attributes & { scrollbar?: Attributes, 'scrollbar-container-content'?: Attributes };
-
-
-const OMIT = ['scrollbar', 'scrollbar-container-content'];
-
-
-let root = document.body,
-    width: number | undefined;
-
-
-export default template.factory<A>(
-    function(this: { attributes?: A }, attributes, content) {
-        let state = reactive({
-                height: 100,
-                translate: 0
-            });
-
-        return html`
-            <div
-                class='scrollbar-container'
-                ${this?.attributes && omit(this.attributes, OMIT)}
-                ${omit(attributes, OMIT)}
-            >
-                <div
-                    class='scrollbar-container-content'
-                    ${this?.attributes?.['scrollbar-container-content']}
-                    ${attributes['scrollbar-container-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;
-                        }
-                    }}
-                >
-                    ${content}
-                </div>
-
-                <div
-                    class='scrollbar'
-                    ${this?.attributes?.scrollbar}
-                    ${attributes.scrollbar}
-                    ${{
-                        class: () => state.height >= 100 && 'scrollbar--hidden',
-                        style: () => `
-                            --translate: translate3d(0, ${state.translate}%, 0);
-                            --height: ${state.height}%;
-                        `
-                    }}
-                >
-                </div>
-            </div>
-        `;
-    }
-);
-export type { A as Attributes }

package/src/components/scrollbar/scss/index.scss

@@ -1,82 +0,0 @@
-@use 'variables';
-
-// Hide Chrome Mobile Scrollbar
-::-webkit-scrollbar,
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:window-inactive {
-    background: transparent;
-    box-shadow: unset;
-}
-
-.scrollbar {
-    height: 100%;
-    z-index: 9;
-
-
-    &,
-    &::before {
-        position: absolute;
-        right: 0;
-        top: 0;
-        transition: opacity var(--transition-duration) ease-in-out;
-        width: var(--width);
-    }
-
-    &::before {
-        background: var(--background);
-        border-radius: 1px 0 0 1px;
-        content: '';
-        height: var(--height);
-        transform: var(--translate);
-        transform-origin: top center;
-    }
-
-
-    &--fixed {
-        position: fixed;
-    }
-
-    &--hidden {
-        opacity: 0;
-    }
-
-
-    &-container {
-        display: flex;
-        flex-flow: column;
-        height: auto;
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-
-        &--full {
-            height: 100%;
-        }
-
-        &-content {
-            display: flex;
-            flex-wrap: wrap;
-            height: 100%;
-            justify-content: flex-start;
-            margin-right: calc(var(--scrollbar-width) * -1);
-            overflow-x: hidden;
-            overflow-y: scroll;
-            padding-right: var(--scrollbar-width);
-            scrollbar-gutter: stable;
-            scroll-behavior: smooth;
-            width: calc(100% + var(--scrollbar-width));
-
-            &--snap {
-                overflow: auto;
-                scroll-snap-type: both mandatory;
-                overscroll-behavior-x: contain;
-
-                > * {
-                    scroll-snap-stop: normal;
-                    scroll-snap-align: center;
-                }
-            }
-        }
-    }
-}

package/src/components/scrollbar/scss/variables.scss

@@ -1,6 +0,0 @@
-.scrollbar {
-    --background: var(--color-black-300);
-    --height: 0;
-    --translate: translate3d(0, 0, 0);
-    --width: 4px;
-}

package/src/components/site/index.ts

@@ -1,11 +0,0 @@
-import { onclick } from '~/components/root';
-import scrollbar from '~/components/scrollbar';
-import './scss/index.scss';
-
-
-export default scrollbar.bind({
-    attributes: {
-        class: 'site',
-        onclick
-    }
-});

package/src/components/site/scss/index.scss

@@ -1,3 +0,0 @@
-.site {
-    z-index: 0;
-}

package/src/components/switch/scss/index.scss

@@ -1,48 +0,0 @@
-@use '/lib';
-@use 'variables';
-
-.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);
-    position: relative;
-    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);
-
-    &:invalid,
-    &:required {
-        box-shadow: none;
-    }
-
-    &::before {
-        @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
-        background: var(--accent);
-        border-radius: inherit;
-        box-shadow: var(--box-shadow);
-        content: '';
-        height: var(--height);
-        opacity: var(--opacity);
-        transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
-        transform-origin: center;
-        width: var(--width);
-    }
-
-    // Hide HTML Field Element
-    &-tag {
-        @include lib.position(absolute, 0 null null 0);
-        height: 0px;
-        opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: 0;
-    }
-}

package/src/components/switch/scss/variables.scss

@@ -1,74 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.switch {
-    --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: 240px;
-    --border-style: solid;
-    --border-width: 0px;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-default: none;
-    --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);
-    --padding-horizontal: var(--border-width-400);
-    --padding-vertical: var(--border-width-400);
-    --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: var(--width-switch);
-    --width-switch: 40px;
-
-    &::before {
-        --box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
-        --height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
-        --translateX: 0px;
-        --translateY: 0px;
-        --width: var(--height);
-    }
-
-    #{tokens.state(inactive)} {
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --color: var(--color-hover);
-            --opacity: var(--opacity-hover);
-            --scale: var(--scale-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --color: var(--color-pressed);
-            --opacity: var(--opacity-pressed);
-            --scale: var(--scale-pressed);
-        }
-    }
-
-    #{tokens.state(active)} {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --box-shadow: var(--box-shadow-active);
-        --opacity: var(--opacity-active);
-        --scale: var(--scale-active);
-
-        &::before {
-            --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
-        }
-    }
-}

package/src/components/template/index.ts

@@ -1,40 +0,0 @@
-import { Attributes, Renderable } from '@esportsplus/template';
-
-
-const factory = <
-    A extends Attributes,
-    C = Renderable<any>,
-    Context = { attributes?: A, content?: C }
->(
-    template: (this: Context, attributes: Readonly<A>, content: C) => Renderable<any>
-) => {
-    function factory(): ReturnType<typeof template>;
-    function factory<T extends A>(attributes: T): ReturnType<typeof template>;
-    function factory<T extends C>(content: T): ReturnType<typeof template>;
-    function factory(attributes: A, content: C): ReturnType<typeof template>;
-    function factory(this: Context, one?: A | C, two?: C): ReturnType<typeof template> {
-        let attributes: A = {} as A,
-            content: C;
-
-        if (two === undefined) {
-            if (typeof one === 'object') {
-                attributes = one as A;
-                content = null as C;
-            }
-            else {
-                content = one as C;
-            }
-        }
-        else {
-            attributes = one as A;
-            content = two;
-        }
-
-        return template.call(this, attributes, content);
-    }
-
-    return factory;
-};
-
-
-export default { factory };

package/src/css-utilities/[margin,padding]/scss/index.scss

@@ -1,43 +0,0 @@
-@use './variables';
-
-@each $property in margin padding {
-    .--#{$property} {
-        &,
-        &-horizontal {
-            #{$property}-left: var(--#{$property}-horizontal);
-            #{$property}-right: var(--#{$property}-horizontal);
-
-            @if ($property == padding) {
-                &.--border {
-                    padding-left: calc(var(--padding-horizontal) - var(--border-width));
-                    padding-right: calc(var(--padding-horizontal) - var(--border-width));
-                }
-            }
-        }
-
-        &,
-        &-vertical {
-            #{$property}-bottom: var(--#{$property}-vertical);
-            #{$property}-top: var(--#{$property}-vertical);
-
-            @if ($property == padding) {
-                &.--border {
-                    padding-bottom: calc(var(--padding-vertical) - var(--border-width));
-                    padding-top: calc(var(--padding-vertical) - var(--border-width));
-                }
-            }
-        }
-
-        @each $direction in 'bottom' 'top' {
-            &-#{$direction} {
-                #{$property}-#{$direction}: var(--#{$property}-vertical);
-            }
-        }
-
-        @each $direction in 'left' 'right' {
-            &-#{$direction} {
-                #{$property}-#{$direction}: var(--#{$property}-horizontal);
-            }
-        }
-    }
-}

package/src/css-utilities/[margin,padding]/scss/variables.scss

@@ -1,54 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-@each $property in margin padding {
-    .--#{$property} {
-        @each $direction in 'horizontal' 'vertical' {
-            &,
-            &-#{$direction} {
-                @each $key in lib.map-keys(tokens.$border-width) {
-                    &-border-width {
-                        --#{$property}-#{$direction}: var(--border-width-400);
-
-                        &-#{$key} {
-                            --#{$property}-#{$direction}: var(--border-width-#{$key});
-                        }
-                    }
-                }
-
-                @each $key in lib.map-keys(tokens.$spacer) {
-                    &-spacer {
-                        --#{$property}-#{$direction}: var(--spacer-400);
-
-                        &-#{$key} {
-                            --#{$property}-#{$direction}: var(--spacer-#{$key});
-                        }
-                    }
-                }
-
-                @each $key in lib.map-keys(tokens.$size) {
-                    &-#{$key} {
-                        --#{$property}-#{$direction}: var(--size-#{$key});
-                    }
-                }
-
-                &-inherit {
-                    --#{$property}-#{$direction}: inherit;
-                }
-            }
-        }
-    }
-}
-
-@each $property in margin {
-    .--#{$property} {
-        @each $direction in 'horizontal' 'vertical' {
-            &,
-            &-#{$direction} {
-                &-auto {
-                    --#{$property}-#{$direction}: auto;
-                }
-            }
-        }
-    }
-}

package/src/css-utilities/error/scss/index.scss

@@ -1,24 +0,0 @@
-.--error {
-    animation: error var(--animation-duration) 1 linear;
-
-    @keyframes error {
-        0% {
-            transform: translate(8px);
-        }
-        20% {
-            transform: translate(-8px);
-        }
-        40% {
-            transform: translate(4px);
-        }
-        60% {
-            transform: translate(-4px);
-        }
-        80% {
-            transform: translate(2px);
-        }
-        100% {
-            transform: translate(0px);
-        }
-    }
-}

package/src/css-utilities/error/scss/variables.scss

@@ -1,3 +0,0 @@
-.--error {
-    --animation-duration: 0.4s;
-}