@vchasno/ui-kit 0.3.21 → 0.3.22

package/dist/css/Select.global.css

@@ -0,0 +1,190 @@
+.vchasno-ui-select {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.vchasno-ui-select.--wide {
+    width: 100%;
+}
+
+.vchasno-ui-select .vchasno-ui-select__control {
+    min-width: 200px;
+    min-height: 50px;
+    border-color: var(--vchasno-ui-input-border-color-default);
+    border-radius: 8px;
+    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;
+    outline: solid 3px transparent;
+}
+
+.vchasno-ui-select.--disabled .vchasno-ui-select__control {
+    border: 1px solid var(--vchasno-ui-input-border-color-default);
+    background-color: #f3f6f8;
+}
+
+.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {
+    opacity: 0.8;
+}
+
+.vchasno-ui-select .vchasno-ui-select__option {
+    transition:
+        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),
+        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-select.--disabled .vchasno-ui-select__option {
+    background-color: #f3f6f8;
+    opacity: 0.8;
+    pointer-events: none;
+}
+
+.vchasno-ui-select .vchasno-ui-select__menu {
+    z-index: 100;
+    border: 1px solid var(--vchasno-ui-input-border-color-default);
+    border-radius: 8px;
+    margin-top: 4px;
+    margin-bottom: 6px;
+    box-shadow: none;
+    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {
+    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);
+    outline-color: var(--vchasno-ui-input-outline-color-focused);
+}
+
+.vchasno-ui-select.--error .vchasno-ui-select__control,
+.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {
+    border: 1px solid #ff5937;
+    outline-color: var(--vchasno-ui-input-outline-color-error);
+}
+
+.vchasno-ui-select .vchasno-ui-select__control:hover {
+    border-color: var(--vchasno-ui-input-border-color-focused);
+}
+
+.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {
+    color: var(--vchasno-ui-input-font-color);
+}
+
+.vchasno-ui-select.--error .vchasno-ui-select__control:hover {
+    border-color: #ff5937;
+}
+
+.vchasno-ui-select
+    .vchasno-ui-select__control--menu-is-open
+    .vchasno-ui-select__dropdown-indicator {
+    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);
+    transition:
+        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
+        color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {
+    color: #ff5937;
+}
+
+.vchasno-ui-select.--error
+    .vchasno-ui-select__control--menu-is-open
+    .vchasno-ui-select__dropdown-indicator {
+    color: #ff5937;
+    transition:
+        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
+        color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,
+.vchasno-ui-select.--error
+    .vchasno-ui-select__control:hover
+    .vchasno-ui-select__dropdown-indicator {
+    color: #ff5937;
+}
+
+.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,
+.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {
+    border: 1px solid #ff5937;
+}
+
+.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {
+    border-color: var(--vchasno-ui-input-border-color-focused);
+    box-shadow: none;
+    outline-color: var(--vchasno-ui-input-outline-color-focused);
+}
+
+.vchasno-ui-select .vchasno-ui-spinner__svg__circle {
+    stroke: var(--vchasno-ui-input-border-color-focused);
+}
+
+.vchasno-ui-select .vchasno-ui-select__placeholder {
+    color: var(--vchasno-ui-input-border-color-default);
+    font-size: var(--vchasno-ui-input-font-size);
+    font-weight: 400;
+}
+
+.vchasno-ui-select .vchasno-ui-select__clear-indicator {
+    padding: 3px;
+    border-radius: 3px;
+    color: var(--vchasno-ui-input-font-color);
+    outline: 3px solid transparent;
+    transition:
+        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),
+        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {
+    background-color: rgb(0 0 0 / 10%);
+    cursor: pointer;
+    outline-color: rgb(0 0 0 / 10%);
+}
+
+.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {
+    transform: scale(0.6);
+}
+
+.vchasno-ui-select .vchasno-ui-select__option--is-selected,
+.vchasno-ui-select .vchasno-ui-select__option--is-focused,
+.vchasno-ui-select .vchasno-ui-select__option:hover {
+    background-color: var(--vchasno-ui-select-option-bg-selected);
+    color: var(--vchasno-ui-select-option-color-selected);
+}
+
+.vchasno-ui-select .vchasno-ui-select__option:hover {
+    cursor: pointer;
+}
+
+.vchasno-ui-select.--disabled {
+    cursor: not-allowed;
+}
+
+.vchasno-ui-select .vchasno-ui-select__multi-value {
+    background-color: var(--vchasno-ui-select-option-bg-selected);
+    outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);
+}
+
+.vchasno-ui-select .vchasno-ui-select__multi-value__remove {
+    transition:
+        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
+        color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {
+    cursor: pointer;
+}
+
+.vchasno-ui-select .vchasno-ui-select__indicators {
+    padding-right: 5px;
+}
+
+.vchasno-ui-select .vchasno-ui-select__value-container {
+    padding: 5px 14px;
+}
+
+.vchasno-ui-select .vchasno-ui-select__multi-value__label {
+    padding: 6px;
+    font-size: 14px;
+}
+
+.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove {
+    padding: 6px;
+    font-size: 14px;
+}

package/dist/css/Snackbar.global.css

@@ -0,0 +1,31 @@
+.vchasno-ui-snackbar {
+  width: auto;
+}
+
+.vchasno-ui-snackbar .vchasno-ui-snackbar-toast {
+  width: auto;
+  min-width: var(--vchasno-ui-snackbar-toast-min-width);
+  max-width: var(--vchasno-ui-snackbar-toast-max-width);
+  padding: 16px 8px 16px 16px;
+  background: var(--vchasno-ui-snackbar-toast-background);
+}
+
+.vchasno-ui-snackbar .vchasno-ui-snackbar-body {
+  align-items: flex-start;
+  padding: 0 8px 0 0;
+}
+
+.vchasno-ui-snackbar .vchasno-ui-snackbar-action-button {
+  border: none;
+  margin-left: auto;
+  color: var(--vchasno-ui-snackbar-action-button-color);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.vchasno-ui-snackbar .Toastify__toast-icon {
+  margin-right: 10px;
+  font-size: 20px;
+}

package/dist/css/Spinner.global.css

@@ -0,0 +1,47 @@
+.vchasno-ui-spinner {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+}
+
+.vchasno-ui-spinner__svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    margin: auto;
+    animation: spinner-rotate 1.3s linear infinite;
+    inset: 0;
+    transform-origin: center center;
+}
+
+.vchasno-ui-spinner__svg__circle {
+    animation: spinner-rotate-dash 2s ease-in-out infinite;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    stroke-width: 5px;
+}
+
+@keyframes spinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes spinner-rotate-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}

package/dist/css/SplashLogo.global.css

@@ -0,0 +1,29 @@
+.vchasno-ui-SplashLogo__logo-box {
+    --vchasno-ui-splash-screen-logo-box-width: 300px;
+    --vchasno-ui-splash-screen-logo-box-height: 100px;
+    --vchasno-ui-splash-screen-logo-color: #333;
+    --vchasno-ui-splash-screen-animation-duration: 2s;
+
+    display: inline-block;
+    width: var(--vchasno-ui-splash-screen-logo-box-width);
+    height: var(--vchasno-ui-splash-screen-logo-box-height);
+    animation: wave var(--vchasno-ui-splash-screen-animation-duration) infinite linear forwards;
+    background-image: linear-gradient(
+        to right,
+        transparent,
+        var(--vchasno-ui-splash-screen-logo-color),
+        transparent
+    );
+    background-size: var(--vchasno-ui-splash-screen-logo-box-width)
+        var(--vchasno-ui-splash-screen-logo-box-height);
+}
+
+@keyframes wave {
+    from {
+        background-position: calc(var(--vchasno-ui-splash-screen-logo-box-width) * -1) 0;
+    }
+
+    to {
+        background-position: 0 0;
+    }
+}

package/dist/css/SvgBorder.global.css

@@ -0,0 +1,32 @@
+.vchasno-ui-SvgBorder {
+    --vchasno-ui-svg-border-animation-duration-sec: 1s;
+    --vchasno-ui-svg-border-stroke-dashoffset: 100%;
+
+    position: relative;
+}
+
+.vchasno-ui-SvgBorder__svg {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    overflow: visible;
+    pointer-events: none;
+    transform: translateZ(0);
+    transition: var(--vchasno-ui-transition-duration-sec);
+}
+
+.vchasno-ui-SvgBorder__svg--animation-border-offset {
+    animation: stroke-offset var(--vchasno-ui-svg-border-animation-duration-sec) linear infinite;
+    animation-play-state: paused;
+}
+
+.vchasno-ui-SvgBorder__svg--animation-play {
+    animation-play-state: running;
+}
+
+@keyframes stroke-offset {
+    to {
+        stroke-dashoffset: var(--vchasno-ui-svg-border-stroke-dashoffset);
+    }
+}

package/dist/css/Switch.global.css

@@ -0,0 +1,82 @@
+.vchasno-ui-switch {
+    --vchasno-ui-switc-hcircle-size: calc(var(--vchasno-ui-switch-height) - 4px);
+
+    display: inline-flex;
+    align-content: center;
+    cursor: pointer;
+    line-height: var(--vchasno-ui-switch-height);
+}
+
+.vchasno-ui-switch.--sm {
+    --vchasno-ui-switch-height: 20px;
+}
+
+.vchasno-ui-switch.--md {
+    --vchasno-ui-switch-height: 30px;
+}
+
+.vchasno-ui-switch.--lg {
+    --vchasno-ui-switch-height: 40px;
+}
+
+.vchasno-ui-switch--bg {
+    position: relative;
+    z-index: 0;
+    display: inline-flex;
+    height: var(--vchasno-ui-switch-height, 20px);
+    box-sizing: border-box;
+    flex-shrink: 0;
+    border-radius: 100px;
+    aspect-ratio: 36/20;
+    background: var(--vchasno-ui-switch-color-bg);
+    box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);
+    transition: background-color 0.3s;
+}
+
+.vchasno-ui-switch__active .vchasno-ui-switch--bg {
+    background: var(--vchasno-ui-switch-active-color-bg);
+    box-shadow: inset 0 2px 0 rgb(57 96 131 / 20%);
+}
+
+.vchasno-ui-switch__disabled {
+    cursor: default;
+    opacity: 0.7;
+}
+
+.vchasno-ui-switch--circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: var(--vchasno-ui-switc-hcircle-size);
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    aspect-ratio: 1/1;
+    background-color: var(--vchasno-ui-switch-circle-color);
+    transform: translate(2px, 2px);
+    transition: transform 0.3s;
+}
+
+.vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {
+    transform: translate(18px, 2px);
+}
+
+.vchasno-ui-switch.--md .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {
+    transform: translate(26px, 2px);
+}
+
+.vchasno-ui-switch.--lg .vchasno-ui-switch--bg > input:checked + .vchasno-ui-switch--circle {
+    transform: translate(34px, 2px);
+}
+
+.vchasno-ui-spinner {
+    color: var(--vchasno-ui-switch-spinner-color);
+}
+
+.vchasno-ui-switch--label {
+    margin-left: 12px;
+    color: var(--vchasno-ui-input-font-color);
+    font-size: var(--vchasno-ui-input-font-size);
+    user-select: none;
+}

package/dist/css/Tabs.global.css

@@ -0,0 +1,122 @@
+.vchasno-ui-tabs-wrapper {
+    position: relative;
+    width: 100%;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.vchasno-ui-tabs-wrapper::-webkit-scrollbar {
+    display: none;
+}
+
+.--h-scroll {
+    overflow: auto;
+}
+
+.vchasno-ui-tabs-wrapper-root {
+    position: relative;
+}
+
+.vchasno-ui-tabs-wrapper-root::after,
+.vchasno-ui-tabs-wrapper-root::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: block;
+    width: 30px;
+    content: '';
+    pointer-events: none;
+}
+
+.--ping-right::after {
+    right: 0;
+    box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);
+}
+
+.--ping-left::before {
+    left: 0;
+    box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);
+}
+
+.vchasno-ui-tabs {
+    --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);
+
+    position: relative;
+    display: flex;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.vchasno-ui-tabs__indicator {
+    position: absolute;
+    z-index: 1;
+    bottom: -1px;
+    left: 0;
+    display: block;
+    width: 10px;
+    height: 3px;
+    border-radius: 3px;
+    background-color: var(--active-color);
+    transition:
+        width var(--vchasno-ui-transition-duration-sec, 0.3s),
+        left var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.--h-scroll .vchasno-ui-tabs__indicator {
+    display: none;
+}
+
+.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {
+    transition: none;
+}
+
+.vchasno-ui-tabs__label-item {
+    position: relative;
+    display: inline-flex;
+    height: 50px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 0 15px;
+    color: #333;
+    cursor: pointer;
+    transition:
+        color var(--vchasno-ui-transition-duration-sec),
+        background-color var(--vchasno-ui-transition-duration-sec);
+    user-select: none;
+}
+
+.vchasno-ui-tabs__label-item::after {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    height: 0;
+    border-radius: 3px;
+    background-color: var(--active-color);
+    content: '';
+    transition: height var(--vchasno-ui-transition-duration-sec);
+}
+
+.--h-scroll .vchasno-ui-tabs__label-item.--active::after {
+    height: 3px;
+}
+
+.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {
+    border-bottom: 1px solid #dbe5ea;
+}
+
+.vchasno-ui-tabs__label-item.--active {
+    color: var(--active-color);
+}
+
+.vchasno-ui-tabs__label-item:not(.--disabled):hover {
+    color: var(--active-color);
+}
+
+.vchasno-ui-tabs__label-item.--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}

package/dist/css/Text.global.css

@@ -0,0 +1,73 @@
+.vchasno-ui-text {
+    color: var(--vchasno-ui-text-primary-color, #333);
+}
+
+.vchasno-ui-text.--ellipsis {
+    display: inline-block;
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vchasno-ui-text.--secondary {
+    color: var(--vchasno-ui-text-secondary-color, #6b8091);
+}
+
+.vchasno-ui-text.--success {
+    color: var(--vchasno-ui-text-success-color, #1cb800);
+}
+
+.vchasno-ui-text.--warning {
+    color: var(--vchasno-ui-text-warning-color, #ffb200);
+}
+
+.vchasno-ui-text.--danger {
+    color: var(--vchasno-ui-text-error-color, #ff5937);
+}
+
+.vchasno-ui-text.--code {
+    padding: 0.2em 0.4em 0.1em;
+    border: 1px solid var(--vchasno-ui-input-border-color-default);
+    border-radius: 3px;
+    margin: 0 0.2em;
+    background: hsl(0deg 0% 58.8% / 10%);
+    font-size: 85%;
+}
+
+.vchasno-ui-text.--inherit {
+    font-size: inherit;
+}
+
+.vchasno-ui-text.--link,
+.vchasno-ui-text.--like-link {
+    color: #087dc1;
+    cursor: pointer;
+}
+
+.vchasno-ui-text.--link {
+    text-decoration-line: underline;
+}
+
+.vchasno-ui-text.--normal {
+    font-size: 1rem;
+    line-height: 1.1rem;
+}
+
+.vchasno-ui-text.--small {
+    font-size: 0.8rem;
+    line-height: 0.9rem;
+}
+
+.vchasno-ui-text.--large {
+    font-size: 1.2rem;
+    line-height: 1.3rem;
+}
+
+.vchasno-ui-text.--required::after {
+    position: relative;
+    top: -3px;
+    right: -2px;
+    color: var(--vchasno-ui-text-error-color, #ff5937);
+    content: '*';
+}

package/dist/css/TextAreaInput.global.css

@@ -0,0 +1,41 @@
+.vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {
+    height: auto;
+    min-height: 40px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.vchasno-ui-textarea-input {
+    width: 100%;
+    border: 0;
+    color: var(--vchasno-ui-text-primary-color);
+    font-size: var(--vchasno-ui-input-font-size);
+    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);
+    resize: none;
+}
+
+.vchasno-ui-textarea-input::placeholder {
+    color: var(--vchasno-ui-input-border-color-default);
+    font-size: var(--vchasno-ui-input-font-size);
+    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);
+    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
+    visibility: hidden;
+}
+
+.vchasno-ui-textarea-input:focus::placeholder {
+    visibility: visible;
+}
+
+.vchasno-ui-input__wrapper__label {
+    transform: none;
+}
+
+.vchasno-ui-textarea-input + .vchasno-ui-label-text {
+    top: 10px;
+    transform: none;
+}
+
+.vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,
+.vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {
+    top: -12px;
+}

package/dist/css/TextInput.global.css

@@ -0,0 +1,22 @@
+.vchasno-ui-text-input {
+    font-size: var(--vchasno-ui-input-font-size);
+    line-height: var(--vchasno-ui-input-font-size);
+}
+
+.vchasno-ui-text-input::-webkit-outer-spin-button,
+.vchasno-ui-text-input::-webkit-inner-spin-button {
+    margin: 0;
+    appearance: none;
+}
+
+/* Firefox */
+.vchasno-ui-text-input[type='number'] {
+    appearance: textfield;
+}
+
+.vchasno-ui-text-input::placeholder {
+    color: var(--vchasno-ui-input-border-color-default);
+    font-size: var(--vchasno-ui-input-font-size);
+    line-height: var(--vchasno-ui-input-font-size);
+    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}