@esportsplus/ui 0.1.8 → 0.2.2

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

@@ -1,28 +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;
-        }
-    }
-}
+@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

@@ -1,47 +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);
-    }
-}
+@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

@@ -1,24 +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);
-    }
-}
+.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

@@ -1,31 +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;
-                }
-            }
-        }
-    }
-}
+.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

@@ -1,32 +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;
-        }
-    }
+@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

@@ -1,10 +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);
-    }
-}
+.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/number/index.ts

@@ -1,24 +1,24 @@
-let formatter: null | Intl.NumberFormat = null,
-    suffixes = ['th', 'st', 'nd', 'rd'];
-
-
-const abbreviate = (number: number) => {
-    if (formatter === null) {
-        formatter = new Intl.NumberFormat('en-GB', {
-            notation: 'compact',
-            compactDisplay: 'short'
-        });
-    }
-
-    return formatter.format(number);
-};
-
-const ordinal = (number: number) => {
-    let value = number % 100;
-
-    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
-};
-
-
-export default { abbreviate, ordinal };
+let formatter: null | Intl.NumberFormat = null,
+    suffixes = ['th', 'st', 'nd', 'rd'];
+
+
+const abbreviate = (number: number) => {
+    if (formatter === null) {
+        formatter = new Intl.NumberFormat('en-GB', {
+            notation: 'compact',
+            compactDisplay: 'short'
+        });
+    }
+
+    return formatter.format(number);
+};
+
+const ordinal = (number: number) => {
+    let value = number % 100;
+
+    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
+};
+
+
+export default { abbreviate, ordinal };
 export { abbreviate, ordinal };

package/src/components/page/index.ts

@@ -1,15 +1,15 @@
-const subtitle = {
-    class: 'page-subtitle --margin-200 --text-crop-bottom'
-};
-
-const suptitle = {
-    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
-};
-
-const title = {
-    class: 'page-title --line-height-200 --margin-400 --text-crop'
-};
-
-
-export default { subtitle, suptitle, title };
+const subtitle = {
+    class: 'page-subtitle --margin-200 --text-crop-bottom'
+};
+
+const suptitle = {
+    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
+};
+
+const title = {
+    class: 'page-title --line-height-200 --margin-400 --text-crop'
+};
+
+
+export default { subtitle, suptitle, title };
 export { subtitle, suptitle, title };

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

@@ -1,27 +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);
-    }
-}
+.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

@@ -1,27 +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;
-        }
-    }
-}
+.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

@@ -1,47 +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);
-    }
+@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

@@ -1,11 +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);
-}
+.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/index.ts

@@ -1,5 +1,5 @@
-import onclick from './onclick';
-
-
-export default { onclick };
+import onclick from './onclick';
+
+
+export default { onclick };
 export { onclick };