@esportsplus/ui 0.8.3 → 0.9.0

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

@@ -1,65 +1,65 @@
-.--flex {
-    &-center {
-        align-content: center;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    &-column {
-        display: flex;
-        flex-flow: column;
-    }
-
-    &-end {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-    }
-
-    &-fill {
-        display: flex;
-        flex: 1;
-        min-width: 0;
-    }
-
-    &-fixed {
-        display: flex;
-        flex: 0 0 var(--width);
-    }
-
-    &-horizontal {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        &-space-between {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-        }
-    }
-
-    &-row {
-        display: flex;
-        flex-flow: row;
-    }
-
-    &-start {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-    }
-
-    &-vertical {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-
-        &-space-between {
-            align-items: space-between;
-            display: flex;
-            flex-wrap: wrap;
-        }
-    }
-}
+.--flex {
+    &-center {
+        align-content: center;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    &-column {
+        display: flex;
+        flex-flow: column;
+    }
+
+    &-end {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+    }
+
+    &-fill {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &-fixed {
+        display: flex;
+        flex: 0 0 var(--width);
+    }
+
+    &-horizontal {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        &-space-between {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+    }
+
+    &-row {
+        display: flex;
+        flex-flow: row;
+    }
+
+    &-start {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+
+    &-vertical {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+
+        &-space-between {
+            align-items: space-between;
+            display: flex;
+            flex-wrap: wrap;
+        }
+    }
+}

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

@@ -1,3 +1,5 @@
-.--glass {
-    backdrop-filter: blur(var(--blur));
+@use './variables';
+
+.--glass {
+    backdrop-filter: blur(var(--blur));
 }

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

@@ -1,3 +1,3 @@
-.--glass {
-    --blur: 24px;
+.--glass {
+    --blur: 24px;
 }

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

@@ -1,28 +1,28 @@
-@use '/lib';
-@use '/tokens';
-
-.--hidden {
-    display: none;
-
-    &-active {
-        @include tokens.state(active) {
-            display: none;
-        }
-    }
-
-    &-inactive {
-        @include tokens.state(inactive) {
-            display: none;
-        }
-    }
-
-    &-offcanvas {
-        @include lib.position(absolute, 0 null null 0);
-        appearance: none;
-        height: 0px;
-        opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: -1;
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--hidden {
+    display: none;
+
+    &-active {
+        @include tokens.state(active) {
+            display: none;
+        }
+    }
+
+    &-inactive {
+        @include tokens.state(inactive) {
+            display: none;
+        }
+    }
+
+    &-offcanvas {
+        @include lib.position(absolute, 0 null null 0);
+        appearance: none;
+        height: 0px;
+        opacity: 0;
+        pointer-events: none;
+        width: 0px;
+        z-index: -1;
+    }
+}

package/src/css-utilities/index.ts

@@ -0,0 +1,18 @@
+import './[margin,padding]/scss/index.scss';
+import './absolute/scss/index.scss';
+import './background/scss/index.scss';
+import './border/scss/index.scss';
+import './color/scss/index.scss';
+import './disabled/scss/index.scss';
+import './flex/scss/index.scss';
+import './glass/scss/index.scss';
+import './hidden/scss/index.scss';
+import './inline/scss/index.scss';
+import './line-height/scss/index.scss';
+import './not-allowed/scss/index.scss';
+import './pointer/scss/index.scss';
+import './size/scss/index.scss';
+import './squircle/scss/index.scss';
+import './text/scss/index.scss';
+import './viewport/scss/index.scss';
+import './width/scss/index.scss';

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

@@ -1,7 +1,7 @@
-.--inline {
-    display: inline;
-    font-size: inherit;
-    line-height: inherit;
-    margin: 0;
-    padding: 0;
-}
+.--inline {
+    display: inline;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+}

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

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

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

@@ -1,10 +1,10 @@
-@use '/lib';
-@use '/tokens';
-
-.--line-height {
-    @each $key in lib.map-keys(tokens.$line-height) {
-        &-#{$key} {
-            --line-height: var(--line-height-#{$key});
-        }
-    }
-}
+@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/not-allowed/scss/index.scss

@@ -1,7 +1,7 @@
-.--not-allowed {
-    cursor: not-allowed;
-
-    * {
-        pointer-events: none;
-    }
-}
+.--not-allowed {
+    cursor: not-allowed;
+
+    * {
+        pointer-events: none;
+    }
+}

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
-.--squircle {
-    aspect-ratio: 1; // square
-    clip-path: polygon(100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, 99.56% 71.64%, 99.21% 74.93%, 98.76% 77.79%, 98.21% 80.34%, 97.56% 82.63%, 96.81% 84.70%, 95.94% 86.60%, 94.97% 88.33%, 93.89% 89.92%, 92.69% 91.37%, 91.37% 92.69%, 89.92% 93.89%, 88.33% 94.97%, 86.60% 95.94%, 84.70% 96.81%, 82.63% 97.56%, 80.34% 98.21%, 77.79% 98.76%, 74.93% 99.21%, 71.64% 99.56%, 67.70% 99.80%, 62.53% 99.95%, 50.00% 100.00%, 37.47% 99.95%, 32.30% 99.80%, 28.36% 99.56%, 25.07% 99.21%, 22.21% 98.76%, 19.66% 98.21%, 17.37% 97.56%, 15.30% 96.81%, 13.40% 95.94%, 11.67% 94.97%, 10.08% 93.89%, 8.63% 92.69%, 7.31% 91.37%, 6.11% 89.92%, 5.03% 88.33%, 4.06% 86.60%, 3.19% 84.70%, 2.44% 82.63%, 1.79% 80.34%, 1.24% 77.79%, 0.79% 74.93%, 0.44% 71.64%, 0.20% 67.70%, 0.05% 62.53%, 0.00% 50.00%, 0.05% 37.47%, 0.20% 32.30%, 0.44% 28.36%, 0.79% 25.07%, 1.24% 22.21%, 1.79% 19.66%, 2.44% 17.37%, 3.19% 15.30%, 4.06% 13.40%, 5.03% 11.67%, 6.11% 10.08%, 7.31% 8.63%, 8.63% 7.31%, 10.08% 6.11%, 11.67% 5.03%, 13.40% 4.06%, 15.30% 3.19%, 17.37% 2.44%, 19.66% 1.79%, 22.21% 1.24%, 25.07% 0.79%, 28.36% 0.44%, 32.30% 0.20%, 37.47% 0.05%, 50.00% 0.00%, 62.53% 0.05%, 67.70% 0.20%, 71.64% 0.44%, 74.93% 0.79%, 77.79% 1.24%, 80.34% 1.79%, 82.63% 2.44%, 84.70% 3.19%, 86.60% 4.06%, 88.33% 5.03%, 89.92% 6.11%, 91.37% 7.31%, 92.69% 8.63%, 93.89% 10.08%, 94.97% 11.67%, 95.94% 13.40%, 96.81% 15.30%, 97.56% 17.37%, 98.21% 19.66%, 98.76% 22.21%, 99.21% 25.07%, 99.56% 28.36%, 99.80% 32.30%, 99.95% 37.47%, 100.00% 50.00%);
-    width: var(--width, var(--size-800));
+.--squircle {
+    aspect-ratio: 1; // square
+    clip-path: polygon(100.00% 50.00%, 99.95% 62.53%, 99.80% 67.70%, 99.56% 71.64%, 99.21% 74.93%, 98.76% 77.79%, 98.21% 80.34%, 97.56% 82.63%, 96.81% 84.70%, 95.94% 86.60%, 94.97% 88.33%, 93.89% 89.92%, 92.69% 91.37%, 91.37% 92.69%, 89.92% 93.89%, 88.33% 94.97%, 86.60% 95.94%, 84.70% 96.81%, 82.63% 97.56%, 80.34% 98.21%, 77.79% 98.76%, 74.93% 99.21%, 71.64% 99.56%, 67.70% 99.80%, 62.53% 99.95%, 50.00% 100.00%, 37.47% 99.95%, 32.30% 99.80%, 28.36% 99.56%, 25.07% 99.21%, 22.21% 98.76%, 19.66% 98.21%, 17.37% 97.56%, 15.30% 96.81%, 13.40% 95.94%, 11.67% 94.97%, 10.08% 93.89%, 8.63% 92.69%, 7.31% 91.37%, 6.11% 89.92%, 5.03% 88.33%, 4.06% 86.60%, 3.19% 84.70%, 2.44% 82.63%, 1.79% 80.34%, 1.24% 77.79%, 0.79% 74.93%, 0.44% 71.64%, 0.20% 67.70%, 0.05% 62.53%, 0.00% 50.00%, 0.05% 37.47%, 0.20% 32.30%, 0.44% 28.36%, 0.79% 25.07%, 1.24% 22.21%, 1.79% 19.66%, 2.44% 17.37%, 3.19% 15.30%, 4.06% 13.40%, 5.03% 11.67%, 6.11% 10.08%, 7.31% 8.63%, 8.63% 7.31%, 10.08% 6.11%, 11.67% 5.03%, 13.40% 4.06%, 15.30% 3.19%, 17.37% 2.44%, 19.66% 1.79%, 22.21% 1.24%, 25.07% 0.79%, 28.36% 0.44%, 32.30% 0.20%, 37.47% 0.05%, 50.00% 0.00%, 62.53% 0.05%, 67.70% 0.20%, 71.64% 0.44%, 74.93% 0.79%, 77.79% 1.24%, 80.34% 1.79%, 82.63% 2.44%, 84.70% 3.19%, 86.60% 4.06%, 88.33% 5.03%, 89.92% 6.11%, 91.37% 7.31%, 92.69% 8.63%, 93.89% 10.08%, 94.97% 11.67%, 95.94% 13.40%, 96.81% 15.30%, 97.56% 17.37%, 98.21% 19.66%, 98.76% 22.21%, 99.21% 25.07%, 99.56% 28.36%, 99.80% 32.30%, 99.95% 37.47%, 100.00% 50.00%);
+    width: var(--width, var(--size-800));
 }

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

@@ -1,89 +1,90 @@
-@use '/lib';
-@use '/tokens';
-
-.--text {
-    &-bold {
-        font-weight: var(--font-weight-500);
-
-        @each $key in lib.map-keys(tokens.$font-weight) {
-            @if $key > 500 {
-                &-#{$key} {
-                    font-weight: var(--font-weight-#{$key});
-                }
-            }
-        }
-    }
-
-    &-center {
-        text-align: center;
-    }
-
-    &-crop {
-        &::after,
-        &::before,
-        &-bottom::after,
-        &-top::before {
-            content: '';
-            display: block;
-            height: 0;
-            width: 100%;
-        }
-
-        &::after,
-        &-bottom::after {
-            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
-        }
-
-        &::before,
-        &-top::before {
-            margin-top: calc((1 - var(--line-height)) * 0.618em);
-        }
-    }
-
-    &-italic {
-        font-style: italic;
-    }
-
-    &-line-through {
-        text-decoration: line-through;
-        text-decoration-thickness: var(--line-width);
-    }
-
-    &-multiplier {
-        font-size: calc(var(--font-size) * var(--text-multiplier));
-    }
-
-    &-outline {
-        color: var(--color);
-        word-break: break-word;
-        word-wrap: break-word;
-
-        @supports (-webkit-text-stroke-width: 1px) {
-            color: transparent;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke-color: var(--color);
-            -webkit-text-stroke-width: var(--stroke-width);
-        }
-    }
-
-    &-truncate {
-        line-height: var(--size);
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &-underline {
-        text-decoration: underline;
-
-        &-dotted {
-            text-decoration: underline;
-            text-decoration-style: dotted;
-        }
-    }
-
-    &-uppercase {
-        text-transform: uppercase;
-    }
-}
+@use '/lib';
+@use '/tokens';
+@use './variables';
+
+.--text {
+    &-bold {
+        font-weight: var(--font-weight-500);
+
+        @each $key in lib.map-keys(tokens.$font-weight) {
+            @if $key > 500 {
+                &-#{$key} {
+                    font-weight: var(--font-weight-#{$key});
+                }
+            }
+        }
+    }
+
+    &-center {
+        text-align: center;
+    }
+
+    &-crop {
+        &::after,
+        &::before,
+        &-bottom::after,
+        &-top::before {
+            content: '';
+            display: block;
+            height: 0;
+            width: 100%;
+        }
+
+        &::after,
+        &-bottom::after {
+            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
+        }
+
+        &::before,
+        &-top::before {
+            margin-top: calc((1 - var(--line-height)) * 0.618em);
+        }
+    }
+
+    &-italic {
+        font-style: italic;
+    }
+
+    &-line-through {
+        text-decoration: line-through;
+        text-decoration-thickness: var(--line-width);
+    }
+
+    &-multiplier {
+        font-size: calc(var(--font-size) * var(--text-multiplier));
+    }
+
+    &-outline {
+        color: var(--color);
+        word-break: break-word;
+        word-wrap: break-word;
+
+        @supports (-webkit-text-stroke-width: 1px) {
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            -webkit-text-stroke-color: var(--color);
+            -webkit-text-stroke-width: var(--stroke-width);
+        }
+    }
+
+    &-truncate {
+        line-height: var(--size);
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-underline {
+        text-decoration: underline;
+
+        &-dotted {
+            text-decoration: underline;
+            text-decoration-style: dotted;
+        }
+    }
+
+    &-uppercase {
+        text-transform: uppercase;
+    }
+}

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

@@ -1,31 +1,31 @@
-@use '/lib';
-@use '/tokens';
-
-.--text {
-    @each $key in lib.map-keys(tokens.$font-size) {
-        &-#{$key} {
-            --font-size: var(--font-size-#{$key});
-        }
-    }
-
-    &-line-through {
-        --line-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --line-width: var(--border-width-#{$key});
-            }
-        }
-    }
-
-    &-outline {
-        --color: inherit;
-        --stroke-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --stroke-width: var(--border-width-#{$key});
-            }
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--text {
+    @each $key in lib.map-keys(tokens.$font-size) {
+        &-#{$key} {
+            --font-size: var(--font-size-#{$key});
+        }
+    }
+
+    &-line-through {
+        --line-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --line-width: var(--border-width-#{$key});
+            }
+        }
+    }
+
+    &-outline {
+        --color: inherit;
+        --stroke-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --stroke-width: var(--border-width-#{$key});
+            }
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
-.--viewport {
-    overflow: hidden;
-    height: calc(100svh - var(--margin-vertical, 0px) * 2);
-    width: calc(100vw - var(--margin-horizontal, 0px) * 2);
+.--viewport {
+    overflow: hidden;
+    height: calc(100svh - var(--margin-vertical, 0px) * 2);
+    width: calc(100vw - var(--margin-horizontal, 0px) * 2);
 }

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

@@ -1,3 +1,5 @@
-.--width {
-    width: var(--width);
-}
+@use './variables';
+
+.--width {
+    width: var(--width);
+}

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

@@ -1,9 +1,9 @@
-.--width {
-    &-full {
-        --width: 100%;
-    }
-
-    &-half {
-        --width: 50%;
-    }
-}
+.--width {
+    &-full {
+        --width: 100%;
+    }
+
+    &-half {
+        --width: 50%;
+    }
+}

package/src/lib/index.scss

@@ -1,7 +1,7 @@
-@forward 'scss/breakpoint';
-@forward 'scss/color' as color-*;
-@forward 'scss/css-variables';
-@forward 'scss/list' as list-*;
-@forward 'scss/map' as map-*;
-@forward 'scss/position';
-@forward 'scss/string' as string-*;
+@forward 'scss/breakpoint';
+@forward 'scss/color' as color-*;
+@forward 'scss/css-variables';
+@forward 'scss/list' as list-*;
+@forward 'scss/map' as map-*;
+@forward 'scss/position';
+@forward 'scss/string' as string-*;