@esportsplus/ui 0.8.3 → 0.9.0

package/src/components/field/optional.ts

@@ -0,0 +1,23 @@
+import s from './select';
+import sw from './switch';
+import t from './text';
+
+
+const select = (data: Parameters<typeof sw>[0] & { field: Parameters<typeof s>[0] }) => {
+    data.field ??= {} as typeof data.field;
+    data.field.class = `field--optional ${data.field?.class || ''}`;
+    data.field.content = s(data.field);
+
+    return sw(data);
+};
+
+const text = (data: Parameters<typeof sw>[0] & { field: Parameters<typeof t>[0] }) => {
+    data.field ??= {} as typeof data.field;
+    data.field.class = `field--optional ${data.field?.class || ''}`;
+    data.field.content = t(data.field);
+
+    return sw(data);
+};
+
+
+export default { select, text };

package/src/components/field/scss/_check.scss

@@ -0,0 +1,225 @@
+@use '/lib';
+@use '/tokens';
+
+@mixin css() {
+    &-mask {
+        &--checkbox,
+        &--radio,
+        &--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 {
+                box-shadow: var(--box-shadow);
+                content: '';
+                height: var(--height);
+                opacity: var(--opacity);
+                transform: translate(var(--translateX), var(--translateY)) rotate(var(--rotate)) scale(var(--scale));
+                width: var(--width);
+            }
+
+            // Hide HTML Field Element
+            .field-tag {
+                @include lib.position(absolute, 0 null null 0);
+                height: 0px;
+                opacity: 0;
+                pointer-events: none;
+                width: 0px;
+                z-index: 0;
+            }
+        }
+
+        &--checkbox,
+        &--radio {
+            &::before {
+                position: absolute;
+                bottom: 50%;
+                right: 50%;
+            }
+        }
+
+        &--radio,
+        &--switch {
+            &::before {
+                background: var(--accent);
+                border-radius: inherit;
+                transform-origin: center;
+            }
+        }
+
+        &--checkbox {
+            &::before {
+                border-bottom: var(--border-width) solid var(--accent);
+                border-right: var(--border-width) solid var(--accent);
+                transform-origin: center left;
+            }
+        }
+
+        &--switch {
+            &::before {
+                @include lib.position(absolute, var(--padding-vertical) null null var(--padding-horizontal));
+            }
+        }
+    }
+}
+
+@mixin variables() {
+    label#{&},
+    #{tokens.state(inactive, '.field:not(label)')} &-mask {
+        @include tokens.state(hover) {
+            --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);
+        }
+
+        @include tokens.state(pressed) {
+            --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);
+        }
+    }
+
+    &-mask {
+        &--checkbox,
+        &--radio,
+        &--switch {
+            --accent: var(--accent-default);
+            --accent-active: var(--accent-default);
+            --accent-default: var(--color-white-400);
+            --accent-hover: var(--accent-default);
+            --accent-pressed: var(--accent-default);
+            --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);
+            --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-switch: 40px;
+
+            &::before {
+                --translateX: 0px;
+                --translateY: 0px;
+            }
+
+            #{tokens.state(inactive, 'label.field')},
+            #{tokens.state(inactive, '.field:not(label)')} & {
+                @include tokens.state(hover) {
+                    --accent: var(--accent-hover);
+                    --opacity: var(--opacity-hover);
+                    --scale: var(--scale-hover);
+                }
+
+                @include tokens.state(pressed) {
+                    --accent: var(--accent-pressed);
+                    --opacity: var(--opacity-pressed);
+                    --scale: var(--scale-pressed);
+                }
+            }
+
+            #{tokens.state(active, '.field')} & {
+                --accent: var(--accent-active);
+                --opacity: var(--opacity-active);
+                --scale: var(--scale-active);
+            }
+        }
+
+        &--checkbox,
+        &--radio {
+            --margin-horizontal: calc(var(--width-switch) - var(--width));
+            --width: var(--height);
+        }
+
+        &--radio,
+        &--switch {
+            &::before {
+                --box-shadow: 0 1px 0 rgba(0,0,0, 0.16);
+            }
+        }
+
+        &--checkbox {
+            --border-radius: var(--border-radius-300);
+            --rotate: 45deg;
+            --scale-active: 1;
+            --scale-default: 0;
+            --scale-hover: 1.08;
+            --scale-pressed: 0.98;
+
+            &::before {
+                --box-shadow: 1px 1px 0 rgba(0,0,0, 0.16);
+                --border-width: 5px;
+                --height: 110%;
+                --translateX: 108%;
+                --translateY: 8%;
+                --width: 50%;
+
+                #{tokens.state(default, '.field')} & {
+                    --translateY: 100%;
+                }
+            }
+        }
+
+        &--radio {
+            --border-radius: var(--border-radius-circle);
+            --opacity-active: 1;
+            --opacity-default: 0.4;
+            --scale-active: 0.9;
+            --scale-default: 0;
+            --scale-hover: 0.8;
+            --scale-pressed: 0.7;
+
+            &::before {
+                --height: calc((var(--size) / 2) - (var(--border-width) * 2));
+                --translateX: 50%;
+                --translateY: 50%;
+                --width: var(--height);
+            }
+        }
+
+        &--switch {
+            --border-radius: var(--border-radius-curved);
+            --padding-horizontal: var(--border-width-400);
+            --padding-vertical: var(--border-width-400);
+            --width: var(--width-switch);
+
+            &::before {
+                --height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));
+                --width: var(--height);
+
+                #{tokens.state(active, '.field')} & {
+                    --translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2));
+                }
+            }
+        }
+    }
+}

package/src/components/field/scss/_normalize.scss

@@ -0,0 +1,36 @@
+@mixin normalize() {
+    button,
+    input,
+    select,
+    textarea {
+        background: transparent;
+        border-radius: 0;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        margin: 0;
+        padding: 0;
+
+        &,
+        &:active,
+        &:focus,
+        &:hover {
+            outline: none;
+        }
+
+        &:invalid {
+            box-shadow: none;
+        }
+    }
+
+    form {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+
+    label {
+        cursor: pointer;
+    }
+}

package/src/components/field/scss/_text.scss

@@ -0,0 +1,106 @@
+@use '/lib';
+
+@mixin css() {
+    &-mask {
+        &--input,
+        &--select {
+            align-items: center;
+            background: var(--background);
+            border: var(--border-width) var(--border-style) var(--border-color);
+            border-radius: var(--border-radius);
+            display: flex;
+            flex-wrap: wrap;
+            font-size: var(--font-size);
+            line-height: var(--line-height);
+            position: relative;
+            width: 100%;
+
+            &:invalid,
+            &:required {
+                box-shadow: none;
+            }
+
+            &,
+            .field-tag {
+                color: var(--color);
+            }
+        }
+
+        // Truncate Overflowing Text
+        &--input .field-tag,
+        &--select .field-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &--input {
+            cursor: text;
+            // Necessary To Maintain Height Of Hidden Password Fields In Floating Modals
+            // - Password Managers Cause Problems When Fields Are Not Using 'display:hidden' On Password Fields
+            min-height: calc((var(--padding-vertical) * 2) + var(--size));
+
+            .field-tag {
+                flex: 1 1 auto;
+                padding: var(--padding-vertical) var(--padding-horizontal);
+                min-width: 0;
+
+                &[type='number'] {
+                    appearance: textfield;
+                }
+            }
+
+            textarea.field-tag {
+                white-space: normal;
+            }
+        }
+
+        &--select {
+            cursor: pointer;
+            padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
+
+            &.--padding {
+                padding-right: calc((var(--padding-horizontal) * 1.5) + var(--arrow-size));
+            }
+        }
+
+        // Down Arrow
+        &-arrow {
+            @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
+            border-color: var(--border-color);
+            border-style: var(--border-style);
+            border-width: 0 var(--border-width) var(--border-width) 0;
+            content: '';
+            height: var(--arrow-size);
+            transform: translateY(50%) rotate(45deg);
+            width: var(--arrow-size);
+        }
+    }
+
+    &-text {
+        padding-right: var(--padding-horizontal);
+    }
+}
+
+@mixin variables() {
+    &-mask {
+        &--input,
+        &--select {
+            --font-size: var(--font-size-400);
+            --line-height: var(--line-height-400);
+        }
+
+        &--input {
+            --size: var(--size-400);
+        }
+
+        &--select {
+            --arrow-spacer: 1px;
+            --arrow-size: 6px;
+        }
+
+        &-arrow {
+            --border-width: var(--border-width-500);
+        }
+    }
+}

package/src/components/field/scss/index.scss

@@ -0,0 +1,161 @@
+@use '/lib';
+@use '/tokens';
+@use 'check' as check;
+@use 'normalize' as *;
+@use 'text' as text;
+@use './variables.scss';
+
+@include normalize();
+
+.field {
+    display: flex;
+    gap: var(--margin-vertical) var(--margin-horizontal);
+    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,
+        color var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+    width: var(--width);
+    z-index: 1;
+
+    @include tokens.state(hover) {
+        z-index: 8;
+    }
+
+    @include tokens.state(active) {
+        z-index: 9;
+    }
+
+
+    &--optional {
+        max-height: var(--max-height);
+        opacity: 0;
+        pointer-events: none;
+        transition:
+            background var(--transition-duration) ease-in-out,
+            border-color var(--transition-duration) ease-in-out,
+            box-shadow var(--transition-duration) ease-in-out,
+            color var(--transition-duration) ease-in-out,
+            max-height var(--transition-duration) ease-in-out,
+            opacity var(--transition-duration) ease-in-out;
+
+        #{tokens.state(active, '.field')} & {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+
+    &-description,
+    &-error,
+    &-title {
+        color: var(--color);
+        font-size: var(--font-size);
+        position: relative;
+        width: 100%;
+        word-wrap: break-word;
+
+        &:empty {
+            height: 0px;
+            margin: 0;
+        }
+    }
+
+    &-error {
+        animation: fieldError 0.32s 1 linear;
+
+        @keyframes fieldError {
+            0% {
+                transform: translate(8px);
+            }
+
+            20% {
+                transform: translate(-8px);
+            }
+
+            40% {
+                transform: translate(4px);
+            }
+
+            60% {
+                transform: translate(-4px);
+            }
+
+            80% {
+                transform: translate(2px);
+            }
+
+            100% {
+                transform: translate(0px);
+            }
+        }
+    }
+
+    &-mask {
+
+        // Pseudo Element Box Shadow
+        &::after {
+            @include lib.position(absolute, full);
+            border-radius: inherit;
+            box-shadow: var(--box-shadow);
+            content: '';
+            pointer-events: none;
+            transition:
+                box-shadow var(--transition-duration) ease-in-out,
+                opacity var(--transition-duration) ease-in-out,
+                transform var(--transition-duration) ease-in-out;
+            z-index: 0;
+        }
+
+        &--flat {
+            &::after {
+                display: none;
+            }
+        }
+
+        &--outline {
+            &::before {
+                @include lib.position(absolute, full);
+                box-shadow: 0 0 0 var(--outline-width) var(--border-color);
+                border-radius: var(--border-radius);
+                content: '';
+                opacity: var(--outline-opacity);
+                pointer-events: none;
+                transition:
+                    box-shadow var(--transition-duration) ease-in-out,
+                    opacity var(--transition-duration) ease-in-out;
+                z-index: 0;
+            }
+        }
+    }
+
+    &-required {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        height: var(--size);
+        width: var(--size);
+    }
+
+    &-tag {
+        &--hidden {
+            @include lib.position(absolute, 0 null null 0);
+            appearance: none;
+            height: 0px;
+            opacity: 0;
+            pointer-events: none;
+            width: 0px;
+            z-index: -1;
+        }
+    }
+
+    &-title {
+        font-weight: var(--font-weight);
+        z-index: 1;
+    }
+
+
+    @include check.css();
+    @include text.css();
+}

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

@@ -0,0 +1,139 @@
+@use '/tokens';
+@use 'check' as check;
+@use 'text' as text;
+
+.field {
+    --margin-horizontal: 0px;
+    --margin-vertical: var(--size-300);
+    --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();
+}