@esportsplus/ui 0.0.117 → 0.0.120

package/src/components/field/scss/variables.scss

@@ -0,0 +1,138 @@
+@use '/tokens';
+@use 'check' as check;
+@use 'text' as text;
+
+.field {
+    --transition-duration: var(--transition-duration-400);
+    --width: 100%;
+
+
+    &--optional {
+        --max-height: 0;
+        --max-height-active: 0;
+
+        #{tokens.state(active, '.field')} & {
+            --max-height: var(--max-height-active);
+        }
+    }
+
+
+    &-description,
+    &-error {
+        --font-size: var(--font-size-300);
+    }
+
+    &-error {
+        --color: var(--color-red-400);
+    }
+
+    &-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: 0.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);
+
+
+        #{tokens.state(active, '.field')} > &,
+        #{tokens.state(active, '.field')} *:not(.field) & {
+            --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);
+        }
+
+        $inactive: tokens.state(inactive, '.field');
+
+        #{tokens.state(hover, 'label#{$inactive}')} > &,
+        #{tokens.state(hover, '#{$inactive}:not(label) &')} {
+            --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);
+        }
+
+        #{tokens.state(pressed, 'label#{$inactive}')} > &,
+        #{tokens.state(pressed, '#{$inactive}:not(label) &')} {
+            --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);
+        }
+
+        &--outline {
+            @include tokens.state(pressed) {
+                --border-color: var(--border-color-default);
+
+                &::before {
+                    --outline-width: 0px;
+                }
+            }
+        }
+    }
+
+    &-required {
+        --border-radius: var(--border-radius-circle);
+        --size: 6px;
+    }
+
+    &-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);
+
+        #{tokens.state(active, '.field')} & {
+            --color: var(--color-active);
+        }
+
+        #{tokens.state(hover, '.field')} & {
+            --color: var(--color-hover);
+        }
+
+        #{tokens.state(pressed, '.field')} & {
+            --color: var(--color-pressed);
+        }
+    }
+
+
+    @include check.variables();
+    @include text.variables();
+}

package/src/components/field/select.ts

@@ -1,6 +1,8 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { form, scrollbar, root } from '~/components';
+import form from '~/components/form';
+import scrollbar from '~/components/scrollbar';
+import root from '~/components/root';
 import description from './description';
 import error from './error';
 import title from './title';

package/src/components/field/text.ts

@@ -1,6 +1,6 @@
 import { reactive } from '@esportsplus/reactivity';
 import { html } from '@esportsplus/template';
-import { form } from '~/components';
+import form from '~/components/form';
 import description from './description';
 import error from './error';
 import title from './title';

package/src/components/field/title.ts

@@ -1,5 +1,5 @@
 import { html } from '@esportsplus/template';
-import { tooltip } from '~/components';
+import tooltip from '~/components/tooltip';
 
 
 export default (data: { required?: boolean, title?: string }) => {

package/src/components/group/scss/index.scss

@@ -0,0 +1,36 @@
+.group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0 calc(var(--margin-horizontal) / -2);
+    position: relative;
+    width: calc(100% + var(--margin-horizontal));
+
+
+    &--offset {
+        @each $direction in 'bottom' 'top' {
+            &-#{$direction} {
+                margin-#{$direction}: calc(var(--margin-vertical) * -1);
+            }
+        }
+    }
+
+    &--scroller {
+        flex-flow: row;
+        margin-bottom: calc(var(--scrollbar-width) * -1);
+        overflow-y: hidden;
+        padding-bottom: var(--scrollbar-width);
+    }
+
+
+    &-item {
+        display: flex;
+        margin: var(--margin-vertical) calc(var(--margin-horizontal) / 2) 0;
+        position: relative;
+        width: var(--width);
+
+        &[class*='--width'] {
+            width: calc(var(--width) - var(--margin-horizontal));
+        }
+    }
+}

package/src/components/group/scss/variables.scss

@@ -0,0 +1,17 @@
+.group {
+    --margin-horizontal: var(--size-400);
+    --width: auto;
+
+
+    &.--flex-column {
+        .group-item {
+            --width: 100%;
+        }
+    }
+
+    &--scroller {
+        .group-item {
+            --margin-vertical: 0px;
+        }
+    }
+}

package/src/components/icon/scss/index.scss

@@ -0,0 +1,17 @@
+.icon {
+    color: var(--color);
+    display: flex;
+    flex: 0 0 var(--width);
+    height: var(--height);
+    pointer-events: none;
+    position: relative;
+    width: var(--width);
+
+
+    svg {
+        color: currentColor;
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+    }
+}

package/src/components/icon/scss/variables.scss

@@ -0,0 +1,7 @@
+.icon {
+    --color: inherit;
+    --height: var(--size);
+    --margin-horizontal: var(--size-300);
+    --size: var(--size-400);
+    --width: var(--size);
+}

package/src/components/link/scss/index.scss

@@ -0,0 +1,28 @@
+@use '/tokens';
+
+.link {
+    align-content: center;
+    background: var(--background);
+    color: var(--color);
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    font-size: var(--font-size);
+    justify-content: flex-start;
+    line-height: var(--line-height);
+    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
+    position: relative;
+    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);
+
+
+    &--underline {
+        @include tokens.state(active hover) {
+            text-decoration: underline;
+        }
+    }
+}

package/src/components/link/scss/variables.scss

@@ -0,0 +1,47 @@
+@use '/tokens';
+
+.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: var(--size-400);
+    --padding-vertical: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: auto;
+
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --color: var(--color-pressed);
+    }
+}

package/src/components/loading/scss/index.scss

@@ -0,0 +1,24 @@
+.loading {
+    animation: loading var(--animation-duration) infinite linear;
+    animation-delay: var(--animation-delay);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: 100%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    box-shadow: var(--box-shadow);
+    height: var(--height);
+    pointer-events: none;
+    position: relative;
+    transition: border-color var(--transition-duration) ease-in-out;
+    width: var(--width);
+    z-index: 0;
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/loading/scss/variables.scss

@@ -0,0 +1,31 @@
+.loading {
+    --animation-delay: calc(0s + (0.032s * var(--i)));
+    --animation-duration: calc(0.64s * (var(--i) + 1.5));
+    --border-color: inherit;
+    --border-style: solid;
+    --border-width: var(--border-width-400);
+    --box-shadow: none;
+    --height: calc(var(--size) * var(--multiplier));
+    --i: 0;
+    --multiplier: calc(1 - (.2 * var(--i)));
+    --size: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: calc(var(--size) * var(--multiplier));
+
+    .loading {
+        --i: 1;
+        --size: inherit;
+
+        .loading {
+            --i: 2;
+
+            .loading {
+                --i: 3;
+
+                .loading {
+                    --i: 4;
+                }
+            }
+        }
+    }
+}

package/src/components/modal/scss/index.scss

@@ -0,0 +1,32 @@
+@use '/lib';
+@use '/tokens';
+
+.modal {
+    @include lib.position(fixed, center);
+    max-height: var(--max-height);
+    max-width: var(--max-width);
+    overflow: hidden;
+    transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+    transform-origin: center;
+    width: var(--width);
+    z-index: 2;
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+        pointer-events: none;
+        transform: translate(50%, 50%) scale(0.8);
+
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+    &-frame {
+        transition: opacity var(--transition-duration) ease-in-out, transform var(--transition-duration) ease-in-out;
+        transform-origin: center;
+
+        @include tokens.state(inactive) {
+            display: none;
+        }
+    }
+}

package/src/components/modal/scss/variables.scss

@@ -0,0 +1,10 @@
+.modal {
+    --max-height: calc(100svh - (var(--margin) * 2));
+    --max-width: 320px;
+    --width: calc(100svw - (var(--margin) * 2));
+
+    &,
+    &-frame {
+        --transition-duration: var(--transition-duration-300);
+    }
+}

package/src/components/page/scss/index.scss

@@ -0,0 +1,27 @@
+.page {
+    min-height: 100svh;
+    position: relative;
+    width: 100vw;
+
+
+    &-subtitle,
+    &-suptitle,
+    &-title {
+        color: var(--color);
+        display: block;
+        line-height: var(--line-height);
+        position: relative;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-subtitle,
+    &-suptitle {
+        font-size: var(--font-size);
+    }
+
+    &-suptitle + &-title,
+    &-title + &-subtitle {
+        margin-top: var(--margin-vertical);
+    }
+}

package/src/components/page/scss/variables.scss

@@ -0,0 +1,27 @@
+.page {
+    &-subtitle,
+    &-suptitle {
+        --color: var(--color-default);
+        --color-default: var(--color-text-400);
+        --font-size: var(--font-size-400);
+        --line-height: var(--line-height-400);
+    }
+
+    &-suptitle + &-title {
+        &::before {
+            --line-height: 1;
+        }
+    }
+
+    &-title {
+        --color: var(--color-default);
+        --color-default: var(--color-text-500);
+        --line-height: var(--line-height-400);
+    }
+
+    &-title:has(+ .page-subtitle) {
+        &::after {
+            --line-height: 1;
+        }
+    }
+}

package/src/components/processing/scss/index.scss

@@ -0,0 +1,47 @@
+@use '/lib';
+
+.processing {
+    height: var(--size);
+    position: relative;
+    width: var(--size);
+    animation: processing var(--animation-duration) linear infinite;
+
+    &-ring {
+        clip: rect(calc(var(--size) / 2), var(--size), var(--size), 0);
+
+        &,
+        &::after,
+        &::before {
+            @include lib.position(absolute, full);
+        }
+
+        &,
+        &::before {
+            animation: processing calc(var(--animation-duration) / 2) cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
+        }
+
+        &::after,
+        &::before {
+            border-radius: 50%;
+            content: "";
+        }
+
+        &::after {
+            border: var(--border-width) var(--border-style) var(--border-color-secondary);
+            opacity: var(--opacity);
+        }
+
+        &::before {
+            border-top: var(--border-width) var(--border-style) var(--border-color-primary);
+        }
+    }
+}
+
+@keyframes processing {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/processing/scss/variables.scss

@@ -0,0 +1,11 @@
+.processing {
+    --animation-duration: 2.64s;
+    --border-color-primary: var(--color-black-500);
+    --border-color-secondary: var(--color-border-300);
+    --border-style: solid;
+    --border-width: var(--border-width-600);
+    --height: var(--size);
+    --opacity: 0.64;
+    --size: var(--size-600);
+    --width: var(--size);
+}

package/src/components/root/scss/index.scss

@@ -0,0 +1,93 @@
+body,
+html {
+    height: 100%;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+body {
+    background-color: var(--background);
+    color: var(--color);
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+    min-width: var(--min-width);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+    transition: inherit;
+}
+
+section {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    position: relative;
+    width: var(--width);
+}
+
+h1, h2, h3, h4, h5 {
+    color: var(--color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 100%;
+    word-wrap: break-word;
+
+    sub,
+    sup {
+        font-size: 0.64em;
+    }
+}
+
+a {
+    color: var(--color, inherit);
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+}
+
+b,
+strong {
+    color: var(--color, inherit);
+    font-weight: var(--font-weight);
+}
+
+p {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    word-wrap: break-word;
+}
+
+pre {
+    margin: 0;
+    overflow-wrap: break-word;
+    padding: 0;
+    white-space: break-spaces;
+    width: 100%;
+}
+
+sub,
+sup {
+    font-size: 0.8em;
+}
+
+sub {
+    bottom: -0.48em;
+}
+
+sup {
+    top: -0.48em;
+}

package/src/components/root/scss/variables.scss

@@ -0,0 +1,55 @@
+@use '/lib';
+@use '/tokens';
+
+body {
+    @include lib.css-variables(border-radius, tokens.$border-radius);
+    @include lib.css-variables(box-shadow, tokens.$box-shadow);
+    @include lib.css-variables(border-width, tokens.$border-width);
+    @include lib.css-variables(color, tokens.$color);
+    @include lib.css-variables(font-size, tokens.$font-size);
+    @include lib.css-variables(font-weight, tokens.$font-weight);
+    @include lib.css-variables(line-height, tokens.$line-height);
+    @include lib.css-variables(size, tokens.$size);
+    @include lib.css-variables(spacer, tokens.$spacer);
+    @include lib.css-variables(transition-duration, tokens.$transition-duration);
+
+    --background: var(--color-grey-400);
+    --color: var(--color-text-400);
+    --font-family: 'Montserrat', sans-serif;
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-400);
+    --line-height: var(--line-height-400);
+    --min-width: 320px;
+
+    // Used by components requiring scrollbar width
+    // - Should be updated using JS on load
+    --scrollbar-width: 17px;
+}
+
+section {
+    --width: 100%;
+}
+
+h1, h2, h3, h4, h5 {
+    --color: var(--color-text-400);
+    --font-weight: var(--font-weight-600);
+    --line-height: var(--line-height-300);
+}
+
+// Loop Through Font Size Keys To Set Header Font Size + Line Height
+$keys: lib.map-keys(tokens.$font-size);
+$i: nth($keys, lib.list-length($keys));
+
+@each $h in h1 h2 h3 h4 h5 {
+    #{$h} {
+        --font-size: var(--font-size-#{$i});
+    }
+
+    $i: $i - 100;
+}
+
+b,
+strong {
+    --color: var(--color-text-400);
+    --font-weight: var(--font-weight-500);
+}