@vchasno/ui-kit 0.3.35 → 0.4.0

package/dist/css/Select.global.css

@@ -1,209 +0,0 @@
-.vchasno-ui-select {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    gap: 5px;
-}
-
-.vchasno-ui-select .vchasno-ui-label-text {
-    transform: translate(0, -18px);
-    transition:
-        font-size 0.3s,
-        transform 0.3s;
-}
-
-.vchasno-ui-select:has(.vchasno-ui-select__value-container--has-value) .vchasno-ui-label-text,
-.vchasno-ui-select:focus-within .vchasno-ui-label-text {
-    font-size: 12px;
-    transform: translate(0, -42px);
-}
-
-.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-input-border-color-focused, #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-placeholder-color);
-    font-size: var(--vchasno-ui-input-font-size);
-    font-weight: 400;
-}
-
-.vchasno-ui-select:not(:focus-within, :not(:has(.vchasno-ui-label-text)))
-    .vchasno-ui-select__placeholder {
-    visibility: hidden;
-}
-
-.vchasno-ui-select .vchasno-ui-select__clear-indicator {
-    padding: 0;
-    border-radius: 4px;
-    color: var(--vchasno-ui-input-font-color);
-}
-
-.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {
-    cursor: pointer;
-}
-
-.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 {
-    border-radius: 8px;
-    background-color: var(--vchasno-ui-select-option-bg-selected);
-    outline: 1px solid var(--vchasno-ui-select-menu-border-color, transparent);
-}
-
-.vchasno-ui-select .vchasno-ui-select__multi-value__remove {
-    padding: 0;
-    padding-right: 3px;
-    background-color: transparent;
-    color: var(--vchasno-ui-label-color-default);
-    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
-}
-
-.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {
-    background-color: transparent;
-    color: var(--vchasno-ui-input-color-error);
-    cursor: pointer;
-}
-
-.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {
-    width: 20px;
-    height: 20px;
-}
-
-.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 0 6px 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

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

@@ -1,47 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-.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

@@ -1,32 +0,0 @@
-.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

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

@@ -1,122 +0,0 @@
-.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

@@ -1,77 +0,0 @@
-.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: '*';
-}
-
-strong.vchasno-ui-text {
-    font-weight: 700;
-}

package/dist/css/TextAreaInput.global.css

@@ -1,39 +0,0 @@
-.vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {
-    height: auto;
-    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-placeholder-color);
-    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);
-}
-
-.vchasno-ui-input__wrapper__label {
-    transform: none;
-}
-
-.vchasno-ui-textarea-input + .vchasno-ui-label-text {
-    top: 0;
-    transform: translateY(10px);
-    transition:
-        transform var(--vchasno-ui-transition-duration-sec, 0.3s),
-        font-size var(--vchasno-ui-transition-duration-sec, 0.3s);
-}
-
-.vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,
-.vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {
-    top: 0;
-    transform: translateY(-12px);
-}

package/dist/css/TextInput.global.css

@@ -1,22 +0,0 @@
-.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-placeholder-color);
-    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);
-}