@esportsplus/ui 0.53.0 → 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: opacity 0.3s ease-in-out, visibility 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/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/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;
-}

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

@@ -1,15 +0,0 @@
-@use './variables';
-
-.--flicker {
-    animation: flicker var(--transition-duration) ease-in-out infinite;
-}
-
-@keyframes flicker {
-    0%,
-    100% {
-        opacity: var(--from);
-    }
-    50% {
-        opacity: var(--to);
-    }
-}

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

@@ -1,5 +0,0 @@
-.--flicker {
-    --from: 0;
-    --to: 1;
-    --transition-duration: 1s;
-}

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

@@ -1,7 +0,0 @@
-@use './variables';
-
-.--focus-active {
-    &:has(> .--active) > *:not(.--active) {
-        opacity: var(--opacity);
-    }
-}

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

@@ -1,5 +0,0 @@
-.--focus-active {
-    > * {
-        --opacity: 0.24;
-    }
-}

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

@@ -1,13 +0,0 @@
-@use 'variables';
-
-.--gap {
-    gap: var(--gap-vertical) var(--gap-horizontal);
-
-    &-horizontal {
-        gap: 0px var(--gap-horizontal);
-    }
-
-    &-vertical {
-        gap: var(--gap-vertical) 0px;
-    }
-}

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

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

package/src/css-utilities/line-height/scss/index.scss

@@ -1 +0,0 @@
-@use './variables';

package/src/css-utilities/line-height/scss/variables.scss

@@ -1,10 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--line-height {
-    @each $key in lib.map-keys(tokens.$line-height) {
-        &-#{$key} {
-            --line-height: var(--line-height-#{$key});
-        }
-    }
-}

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

@@ -1,5 +0,0 @@
-.--pointer {
-    &-none {
-        pointer-events: none;
-    }
-}

package/src/css-utilities/scroll-fade/scss/index.scss

@@ -1,47 +0,0 @@
-@use 'variables';
-
-// Registered so the length custom properties can be interpolated by the
-// scroll-driven animation below.
-@property --scroll-fade-bottom {
-    inherits: false;
-    initial-value: 0px;
-    syntax: '<length>';
-}
-
-@property --scroll-fade-top {
-    inherits: false;
-    initial-value: 0px;
-    syntax: '<length>';
-}
-
-// A vertical scroll container that fades an edge only while there is content
-// past it: no top fade at the very top, no bottom fade at the very end. Driven
-// by the element's own scroll position (scroll-driven animations), so the fade
-// is direction-aware rather than a static gradient that clips the ends.
-.--scroll-fade {
-    overflow-y: auto;
-
-    @supports (animation-timeline: scroll()) {
-        animation: scroll-fade linear both;
-        animation-timeline: scroll(self);
-        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
-        mask-image: linear-gradient(to bottom, transparent, #000 var(--scroll-fade-top), #000 calc(100% - var(--scroll-fade-bottom)), transparent);
-    }
-}
-
-@keyframes scroll-fade {
-    0% {
-        --scroll-fade-bottom: var(--scroll-fade-size);
-        --scroll-fade-top: 0px;
-    }
-
-    5%, 95% {
-        --scroll-fade-bottom: var(--scroll-fade-size);
-        --scroll-fade-top: var(--scroll-fade-size);
-    }
-
-    100% {
-        --scroll-fade-bottom: 0px;
-        --scroll-fade-top: var(--scroll-fade-size);
-    }
-}

package/src/css-utilities/scroll-fade/scss/variables.scss

@@ -1,3 +0,0 @@
-.--scroll-fade {
-    --scroll-fade-size: 2.5rem;
-}

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

@@ -1 +0,0 @@
-@use './variables';

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

@@ -1,12 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--size {
-    --size: var(--size-400);
-
-    @each $key in lib.map-keys(tokens.$size) {
-        &-#{$key} {
-            --size: var(--size-#{$key});
-        }
-    }
-}