@rt-tools/ui-kit-v2 0.1.0

package/src/lib/components/toast/rt-toast.component.scss

@@ -0,0 +1,201 @@
+.rt-toast {
+    --y: translateY(100%);
+    --lift-amount: calc(var(--lift) * var(--gap));
+
+    position: absolute;
+    z-index: var(--z-index);
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    padding: var(--rt-space-4);
+    border: var(--rt-border-width-thin) solid var(--rt-color-border-subtle);
+    border-radius: var(--rt-radius-md);
+    background: var(--rt-color-bg-surface);
+    box-shadow: var(--rt-shadow-card);
+    color: var(--rt-color-text-primary);
+    font-size: var(--rt-text-sm);
+    font-weight: var(--rt-font-weight-medium);
+    gap: var(--rt-space-2);
+    line-height: var(--rt-leading-normal);
+    opacity: 0;
+    outline: none;
+    overflow-wrap: anywhere;
+    touch-action: none;
+    transform: var(--y);
+    transition:
+        transform var(--rt-duration-slow),
+        opacity var(--rt-duration-slow),
+        height var(--rt-duration-slow),
+        box-shadow var(--rt-duration-base);
+
+    &:after {
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        width: 100%;
+        height: calc(var(--gap) + 1px);
+        content: '';
+    }
+
+    > * {
+        transition: opacity var(--rt-duration-slow);
+    }
+
+    &--y--top {
+        --y: translateY(-100%);
+        --lift: 1;
+
+        top: 0;
+    }
+
+    &--y--bottom {
+        --y: translateY(100%);
+        --lift: -1;
+
+        bottom: 0;
+    }
+
+    &--filled {
+        .rt-toast__description {
+            color: inherit;
+        }
+
+        &.rt-toast--severity--info {
+            border-color: var(--rt-color-state-info-bg);
+            background: var(--rt-color-state-info-bg);
+            color: var(--rt-color-state-info);
+        }
+
+        &.rt-toast--severity--success {
+            border-color: var(--rt-color-state-success-bg);
+            background: var(--rt-color-state-success-bg);
+            color: var(--rt-color-state-success);
+        }
+
+        &.rt-toast--severity--warning {
+            border-color: var(--rt-color-state-warning-bg);
+            background: var(--rt-color-state-warning-bg);
+            color: var(--rt-color-state-warning);
+        }
+
+        &.rt-toast--severity--danger {
+            border-color: var(--rt-color-state-danger-bg);
+            background: var(--rt-color-state-danger-bg);
+            color: var(--rt-color-state-danger);
+        }
+    }
+
+    &--mounted {
+        --y: translateY(0);
+
+        opacity: 1;
+    }
+
+    &:not(.rt-toast--expanded, .rt-toast--front) {
+        --scale: var(--toasts-before) * 0.05 + 1;
+        --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
+
+        height: var(--front-toast-height);
+
+        > * {
+            opacity: 0;
+        }
+    }
+
+    &--hidden {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    &--mounted.rt-toast--expanded {
+        --y: translateY(calc(var(--lift) * var(--offset)));
+
+        height: var(--initial-height);
+    }
+
+    &--removed.rt-toast--front {
+        --y: translateY(calc(var(--lift) * -100%));
+
+        opacity: 0;
+    }
+
+    &--removed.rt-toast--expanded:not(.rt-toast--front) {
+        --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
+
+        opacity: 0;
+    }
+
+    &--removed:not(.rt-toast--front, .rt-toast--expanded) {
+        --y: translateY(40%);
+
+        opacity: 0;
+        transition:
+            transform var(--rt-duration-slower),
+            opacity var(--rt-duration-base);
+    }
+
+    &--removed:not(.rt-toast--front):before {
+        position: absolute;
+        content: '';
+        inset: 0;
+        transform: scaleY(2);
+    }
+
+    &__icon {
+        flex-shrink: 0;
+    }
+
+    &__content {
+        display: flex;
+        min-width: 0;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: var(--rt-space-0-5);
+    }
+
+    &__description {
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-regular);
+    }
+
+    &__meta {
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-regular);
+    }
+
+    &__actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--rt-space-2);
+        margin-block-start: var(--rt-space-1);
+    }
+
+    & &__action {
+        align-self: flex-start;
+    }
+
+    & &__close {
+        flex-shrink: 0;
+        align-self: flex-start;
+        margin-inline-start: auto;
+        opacity: 0;
+        transition: opacity var(--rt-duration-fast);
+    }
+
+    &:hover &__close,
+    & &__close:focus-visible {
+        opacity: 1;
+    }
+
+    @media (prefers-reduced-motion) {
+        transition: none;
+
+        > * {
+            transition: none;
+        }
+    }
+}

package/src/lib/components/toast/rt-toaster.component.scss

@@ -0,0 +1,45 @@
+.rt-toaster {
+    --width: 356px;
+    --toaster-offset: 32px;
+
+    position: fixed;
+    z-index: 1100;
+    width: var(--width);
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    outline: none;
+
+    &--x--right {
+        right: max(var(--toaster-offset), env(safe-area-inset-right));
+    }
+
+    &--x--left {
+        left: max(var(--toaster-offset), env(safe-area-inset-left));
+    }
+
+    &--x--center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    &--y--top {
+        top: max(var(--toaster-offset), env(safe-area-inset-top));
+    }
+
+    &--y--bottom {
+        bottom: max(var(--toaster-offset), env(safe-area-inset-bottom));
+    }
+
+    @media (width <= 480px) {
+        --toaster-offset: 16px;
+
+        right: var(--toaster-offset);
+        left: var(--toaster-offset);
+        width: auto;
+
+        &--x--center {
+            transform: none;
+        }
+    }
+}

package/src/lib/components/toggle-button-group/rt-toggle-button-group.component.scss

@@ -0,0 +1,138 @@
+/* rt-toggle-button-group — segmented control.
+   ViewEncapsulation = default (Emulated) → стили обёрнуты в :host { ... }.
+   Размеры — три тира sm/md/lg, общая высота совпадает с rt-button
+   (sm 30 / md 40 / lg 50px).
+   Цвета — только семантические --rt-* токены. */
+
+:host {
+    display: inline-flex;
+
+    /* Локальные overridable custom properties — позволяют потребителю
+       подстроить trackовый bg без перекраски всей темы (см. dark override ниже). */
+    // --rt-toggle-button-group-track-bg: var(--rt-color-bg-surface-subtle-2);
+    --rt-toggle-button-group-track-bg: #eef0f4;
+    --rt-toggle-button-group-active-bg: var(--rt-color-bg-surface);
+
+    .rt-toggle-button-group {
+        /* Default size = sm. md/lg переопределяют ниже. */
+        --rt-toggle-button-group-height: 30px;
+        --rt-toggle-button-group-track-padding: 4px;
+        --rt-toggle-button-group-track-radius: 8px;
+        --rt-toggle-button-group-btn-padding: 0 8px;
+        --rt-toggle-button-group-btn-radius: 8px;
+        --rt-toggle-button-group-btn-gap: 4px;
+        --rt-toggle-button-group-btn-font-size: 12px;
+        --rt-toggle-button-group-btn-line-height: 14px;
+
+        display: inline-flex;
+        height: var(--rt-toggle-button-group-height);
+        box-sizing: border-box;
+        align-items: stretch;
+        padding: var(--rt-toggle-button-group-track-padding);
+        border-radius: var(--rt-toggle-button-group-track-radius);
+        background-color: var(--rt-toggle-button-group-track-bg);
+        gap: 0;
+
+        &__button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: var(--rt-toggle-button-group-btn-padding);
+            border: 0;
+            border-radius: var(--rt-toggle-button-group-btn-radius);
+            background-color: transparent;
+            color: var(--rt-color-text-muted);
+            cursor: pointer;
+
+            /* Нативный <button>: без явного наследования берёт UA-шрифт (Arial),
+               а не Montserrat от body. */
+            font-family: inherit;
+            font-size: var(--rt-toggle-button-group-btn-font-size);
+            font-weight: var(--rt-font-weight-semibold);
+            gap: var(--rt-toggle-button-group-btn-gap);
+            line-height: var(--rt-toggle-button-group-btn-line-height);
+            transition:
+                background-color var(--rt-duration-fast) ease,
+                color var(--rt-duration-fast) ease;
+
+            &:hover:not(:disabled, &--active) {
+                color: var(--rt-color-text-primary);
+            }
+
+            &--active {
+                background-color: var(--rt-toggle-button-group-active-bg);
+                color: var(--rt-color-text-primary);
+            }
+
+            &:focus-visible {
+                position: relative;
+                z-index: 1;
+                box-shadow: var(--rt-shadow-focus-ring);
+                outline: 2px solid transparent;
+                outline-offset: 1px;
+            }
+
+            &:disabled {
+                cursor: not-allowed;
+            }
+        }
+
+        &__label {
+            display: inline-block;
+            white-space: nowrap;
+        }
+
+        &__icon {
+            flex-shrink: 0;
+        }
+
+        /* Размерные тиры — общая высота совпадает с rt-button (sm/md/lg). */
+        &--md {
+            --rt-toggle-button-group-height: 40px;
+            --rt-toggle-button-group-track-radius: 10px;
+            --rt-toggle-button-group-btn-padding: 0 14px;
+            --rt-toggle-button-group-btn-radius: 10px;
+            --rt-toggle-button-group-btn-gap: 6px;
+            --rt-toggle-button-group-btn-font-size: 14px;
+            --rt-toggle-button-group-btn-line-height: 16px;
+        }
+
+        &--lg {
+            --rt-toggle-button-group-height: 50px;
+            --rt-toggle-button-group-track-radius: 12px;
+            --rt-toggle-button-group-btn-padding: 0 20px;
+            --rt-toggle-button-group-btn-radius: 12px;
+            --rt-toggle-button-group-btn-gap: 8px;
+            --rt-toggle-button-group-btn-font-size: 16px;
+            --rt-toggle-button-group-btn-line-height: 18px;
+        }
+
+        &--disabled {
+            opacity: 0.5;
+        }
+    }
+}
+
+/* full-width: группа растягивается на контейнер, опции делят ширину поровну. */
+:host(.rt-toggle-button-group--full-width) {
+    display: flex;
+    width: 100%;
+
+    .rt-toggle-button-group {
+        display: flex;
+        width: 100%;
+        flex: 1 1 auto;
+
+        .rt-toggle-button-group__button {
+            flex: 1 1 0;
+        }
+    }
+}
+
+/* Dark theme: `--rt-color-bg-surface-subtle` совпадает с `--rt-color-bg-surface`
+   в палитре (см. styles/_theme-dark.scss), поэтому track теряет контраст с
+   активным сегментом. Локально перекрашиваем track в более тёмный neutral. */
+:host-context(:root[data-theme='dark']),
+:host-context(html.rt-theme-dark) {
+    --rt-toggle-button-group-track-bg: var(--rt-neutral-900);
+}

package/src/lib/components/toggle-switch/rt-toggle-switch.component.scss

@@ -0,0 +1,98 @@
+:host {
+    display: inline-flex;
+}
+
+.rt-toggle-switch {
+    /* Геометрия размера. База — `sm`; модификаторы перекрывают только числа,
+       правила ниже к размерам не привязаны. `thumb-travel` держим явным
+       числом, а не calc из ширины: каждое значение сверяется с макетом. */
+    --rt-toggle-track-width: 42px;
+    --rt-toggle-track-height: 24px;
+    --rt-toggle-thumb-size: 18px;
+    --rt-toggle-thumb-inset: 3px;
+    --rt-toggle-thumb-travel: 18px;
+    --rt-toggle-icon-inset: 4px;
+
+    display: inline-flex;
+    padding: 0;
+    border: none;
+    background: none;
+    cursor: pointer;
+
+    &--md {
+        --rt-toggle-track-width: 52px;
+        --rt-toggle-thumb-travel: 28px;
+    }
+
+    &--lg {
+        --rt-toggle-track-width: 60px;
+        --rt-toggle-track-height: 30px;
+        --rt-toggle-thumb-size: 24px;
+        --rt-toggle-thumb-travel: 30px;
+        --rt-toggle-icon-inset: 6px;
+    }
+
+    &:focus-visible {
+        border-radius: var(--rt-radius-full);
+        box-shadow: var(--rt-shadow-focus-ring);
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    &__track {
+        position: relative;
+        display: inline-block;
+        width: var(--rt-toggle-track-width);
+        height: var(--rt-toggle-track-height);
+        border-radius: var(--rt-radius-full);
+        background: var(--rt-toggle-color-track);
+        box-shadow: var(--rt-toggle-shadow-border);
+        color: var(--rt-toggle-color-icon);
+        transition:
+            background var(--rt-duration-fast) ease,
+            box-shadow var(--rt-duration-fast) ease;
+    }
+
+    &--on &__track {
+        background: var(--rt-toggle-color-track-on);
+        box-shadow: none;
+    }
+
+    /* Иконки статичны: бегунок наезжает на иконку активного состояния и
+       закрывает её, поэтому видна всегда иконка целевого состояния. */
+    &__icon-off,
+    &__icon-on {
+        position: absolute;
+        inset-block-start: 50%;
+        transform: translateY(-50%);
+    }
+
+    &__icon-off {
+        inset-inline-start: var(--rt-toggle-icon-inset);
+    }
+
+    &__icon-on {
+        inset-inline-end: var(--rt-toggle-icon-inset);
+    }
+
+    &__thumb {
+        position: absolute;
+        width: var(--rt-toggle-thumb-size);
+        height: var(--rt-toggle-thumb-size);
+        border-radius: var(--rt-radius-full);
+        background: var(--rt-toggle-color-thumb);
+        box-shadow: var(--rt-toggle-shadow-thumb);
+        inset-block-start: var(--rt-toggle-thumb-inset);
+        inset-inline-start: var(--rt-toggle-thumb-inset);
+        transition: transform var(--rt-duration-fast) ease;
+    }
+
+    &--on &__thumb {
+        transform: translateX(var(--rt-toggle-thumb-travel));
+    }
+}

package/src/lib/components/toolbar/rt-toolbar.component.scss

@@ -0,0 +1,69 @@
+.rt-toolbar {
+    display: block;
+
+    &__bars {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: var(--rt-space-2-5) 0;
+        gap: var(--rt-space-2-5);
+    }
+
+    &__bar {
+        display: flex;
+        align-items: center;
+
+        // left/right — по контенту; center — эластичный спейсер, который
+        // прижимает right-бар к краю. Раньше каждый list-page переопределял
+        // эти три флекса через ::ng-deep — теперь поведение зашито здесь.
+        &--left {
+            flex: 0 0 auto;
+            gap: var(--rt-space-2-5);
+        }
+
+        &--center {
+            flex: 1 1 auto;
+            justify-content: flex-end;
+            gap: var(--rt-space-2-5);
+
+            // Контрол-фильтр (поиск/селект) занимает ширину center и право-
+            // выравнивается к action-кнопкам; свой max-width задаёт потребитель.
+            rt-input,
+            rt-select {
+                width: 100%;
+            }
+        }
+
+        &--right {
+            // Прижатие к правому краю даже когда right — единственный бар
+            // (нет left/center, которые бы вытолкнули его через space-between).
+            flex: 0 0 auto;
+            margin-left: auto;
+            gap: var(--rt-space-sm);
+        }
+    }
+}
+
+// Мобилка: три зоны не влезают в строку — стекаем в колонку на всю ширину
+// (фильтр → поиск → действия), поиск растягивается. `--dense` (компактная
+// шапка вроде rt-chat) из стекинга исключён — остаётся в одну строку.
+@media (width <= 768px) {
+    .rt-toolbar:not(.rt-toolbar--dense) {
+        .rt-toolbar__bars {
+            flex-direction: column;
+            align-items: stretch;
+            gap: var(--rt-space-sm);
+        }
+
+        .rt-toolbar__bar--center {
+            justify-content: stretch;
+        }
+
+        .rt-toolbar__bar--right {
+            justify-content: flex-end;
+            margin-left: 0;
+        }
+    }
+}

package/src/lib/components/tooltip/rt-tooltip.component.scss

@@ -0,0 +1,18 @@
+/* rt-tooltip — панель подсказки в CDK Overlay. ViewEncapsulation.None.
+   Тёмная инверсная подложка (theme-aware пара bg-inverse / text-inverse). */
+
+.rt-tooltip {
+    display: block;
+    max-width: 240px;
+    padding: var(--rt-space-xs) var(--rt-space-sm);
+    border-radius: var(--rt-radius-sm);
+    background: var(--rt-color-bg-inverse);
+    box-shadow: var(--rt-shadow-md);
+    color: var(--rt-color-text-inverse);
+    font-size: var(--rt-text-xs);
+    line-height: var(--rt-leading-snug);
+
+    /* Tooltip — чисто визуальная подсказка: не перехватывает указатель, чтобы
+       не мешать hover/leave логике host'а. */
+    pointer-events: none;
+}

package/src/lib/components/welcome-dialog/rt-welcome-dialog.component.scss

@@ -0,0 +1,48 @@
+/* Welcome-модалка первого входа — открывается через RtDialogService.open().
+   rt-dialog даёт styled-frame, контент внутри получает свой padding. */
+
+:host {
+    display: contents;
+
+    .rt-welcome-dialog {
+        display: flex;
+        flex-direction: column;
+        padding: var(--rt-space-16) var(--rt-space-5);
+        gap: var(--rt-space-5);
+
+        &__text {
+            display: flex;
+            flex-direction: column;
+            gap: var(--rt-space-2-5);
+            text-align: center;
+        }
+
+        &__title {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-family: var(--rt-font-family-sans);
+            font-size: var(--rt-text-md);
+            font-weight: var(--rt-font-weight-bold);
+            line-height: var(--rt-leading-snug);
+        }
+
+        &__description {
+            margin: 0;
+            color: var(--rt-color-text-primary);
+            font-family: var(--rt-font-family-sans);
+            font-size: var(--rt-text-xs);
+            font-weight: var(--rt-font-weight-regular);
+            line-height: var(--rt-leading-snug);
+
+            /* Одиночные переводы строк внутри абзаца сохраняются как <br>. */
+            white-space: pre-line;
+        }
+
+        &__cta {
+            --rt-btn-font-size: 14px;
+
+            width: 100%;
+            letter-spacing: 0;
+        }
+    }
+}