@rt-tools/ui-kit-v2 0.1.0

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

@@ -0,0 +1,67 @@
+.rt-header {
+    display: block;
+    height: 45px;
+    padding: 0 var(--rt-space-5);
+    background: var(--rt-color-bg-surface);
+    border-bottom-left-radius: var(--rt-radius-lg);
+    border-bottom-right-radius: var(--rt-radius-lg);
+
+    // Мягкая тень (тот же токен, что у карточек) отделяет хедер от контента —
+    // в тёмной теме фон хедера и страницы почти совпадают и сливались.
+    box-shadow: var(--rt-shadow-card-soft);
+    color: var(--rt-color-text-primary);
+
+    &__content {
+        display: flex;
+        width: 100%;
+        max-width: var(--rt-header-content-max-width, 100%);
+        height: 100%;
+        align-items: center;
+        margin: 0 auto;
+        gap: 0;
+    }
+
+    &__back {
+        display: inline-flex;
+        overflow: hidden;
+
+        /* Hidden state по умолчанию — slot полностью схлопнут (нулевая ширина),
+           Контент скрыт через opacity + сдвиг влево; pointer-events:none снимает hit-target. */
+        width: 0;
+        height: 45px;
+        align-items: center;
+        justify-content: flex-start;
+        opacity: 0;
+        pointer-events: none;
+        transform: translateX(-8px);
+        transition:
+            width var(--rt-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1),
+            opacity var(--rt-duration-base) ease-out,
+            transform var(--rt-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1);
+
+        &--visible {
+            width: 35px;
+            opacity: 1;
+            pointer-events: auto;
+            transform: translateX(0);
+        }
+    }
+
+    &__logo {
+        display: flex;
+        min-width: 0;
+        flex: 1 0 0;
+        align-items: center;
+    }
+}
+
+/* dark override: header bg = navy, близко к --rt-blue-900 */
+[data-theme='dark'] .rt-header {
+    background: var(--rt-blue-900);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rt-header__back {
+        transition: none;
+    }
+}

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

@@ -0,0 +1,17 @@
+/* rt-icon — глобальные правила компонента (ViewEncapsulation.None).
+   Намеренно без :host-обёртки: правила должны таргетировать `.rt-icon` глобально
+   (host-класс компонента + потенциальные программные потребители sprite'а).
+   Это исключение из общего правила "обёртывать стили в :host", применимого
+   только для Emulated-инкапсуляции. */
+.rt-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+    line-height: 0;
+
+    svg {
+        display: block;
+        width: 100%;
+        height: 100%;
+        fill: currentcolor;
+    }
+}

package/src/lib/components/icon-button/rt-icon-button.component.scss

@@ -0,0 +1,139 @@
+:host {
+    display: inline-flex;
+
+    /* Дефолт = md; перезаписывается модификаторами sm/lg ниже либо inline стилем потребителя */
+    --rt-icon-button-size: 36px;
+
+    .rt-icon-button {
+        position: relative;
+        display: inline-flex;
+        width: var(--rt-icon-button-size);
+        height: var(--rt-icon-button-size);
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--rt-icon-button-color, var(--rt-color-text-primary));
+        cursor: pointer;
+        transition: background-color var(--rt-duration-fast) ease;
+
+        &--sm {
+            --rt-icon-button-size: 28px;
+        }
+
+        &--md {
+            --rt-icon-button-size: 36px;
+        }
+
+        &--lg {
+            --rt-icon-button-size: 44px;
+        }
+
+        &--circle {
+            border-radius: var(--rt-radius-full);
+        }
+
+        &--square {
+            border-radius: var(--rt-radius-md);
+        }
+
+        &--ghost {
+            &:hover:not(:disabled) {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+
+            &.rt-icon-button--active {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+        }
+
+        &--primary {
+            background-color: var(--rt-color-action-primary);
+            color: var(--rt-color-action-on-primary);
+
+            &:hover:not(:disabled) {
+                background-color: var(--rt-color-action-primary-hover);
+            }
+        }
+
+        &--secondary {
+            background-color: var(--rt-color-bg-surface-subtle);
+            color: var(--rt-color-text-primary);
+
+            &:hover:not(:disabled) {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+        }
+
+        &--danger {
+            color: var(--rt-color-state-danger);
+
+            &:hover:not(:disabled) {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+
+            &.rt-icon-button--active {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+        }
+
+        &--success {
+            color: var(--rt-color-state-success);
+
+            &:hover:not(:disabled) {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+
+            &.rt-icon-button--active {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+        }
+
+        &--warning {
+            color: var(--rt-color-state-warning);
+
+            &:hover:not(:disabled) {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+
+            &.rt-icon-button--active {
+                background-color: var(--rt-icon-button-color-bg-hover);
+            }
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        &:focus-visible {
+            box-shadow: var(--rt-shadow-focus-ring);
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+        }
+
+        &__spinner {
+            --rt-icon-button-spin-duration: 1s;
+
+            animation: rt-icon-button-spin var(--rt-icon-button-spin-duration) linear infinite;
+        }
+
+        &__indicator {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: var(--rt-radius-full);
+            background: var(--rt-color-state-danger);
+            inset-block-start: -2px;
+            inset-inline-end: -2px;
+            pointer-events: none;
+        }
+    }
+}
+
+@keyframes rt-icon-button-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

package/src/lib/components/info-item/rt-info-item.component.scss

@@ -0,0 +1,46 @@
+@use '../../../styles/mixins' as kv;
+
+.rt-info-item {
+    @include kv.surface-card;
+
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    margin: 0;
+    gap: var(--rt-space-0-5);
+
+    &--grow {
+        flex: 1 0 0;
+    }
+
+    &__label {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-xs);
+        font-weight: var(--rt-font-weight-regular);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+    }
+
+    &__value {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-sm);
+        font-weight: var(--rt-font-weight-bold);
+        gap: var(--rt-space-0-5);
+        letter-spacing: var(--rt-letter-spacing-wide);
+        line-height: var(--rt-leading-snug);
+        overflow-wrap: anywhere;
+    }
+
+    &__value-skeleton {
+        display: block;
+    }
+}
+
+[data-theme='dark'] .rt-info-item {
+    @include kv.surface-card-dark;
+}

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

@@ -0,0 +1,120 @@
+.rt-input {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    min-height: var(--rt-input-height);
+    box-sizing: border-box;
+    align-items: center;
+    padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
+    border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+    border-radius: var(--rt-input-radius);
+    background-color: var(--rt-input-color-bg);
+    color: var(--rt-input-color-text);
+    cursor: text;
+    font-size: var(--rt-input-font-size);
+    gap: var(--rt-space-sm);
+    line-height: var(--rt-input-line-height);
+    transition: var(--rt-input-transition);
+
+    &:focus-within {
+        border-color: var(--rt-input-color-border-focus);
+        box-shadow: var(--rt-input-focus-shadow);
+        outline: 2px solid transparent;
+        outline-offset: var(--rt-input-focus-outline-offset);
+    }
+
+    /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+       ниже по source-order и перекрывают её своей рамкой. */
+    &--borderless {
+        border-color: transparent;
+    }
+
+    &--invalid {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus-within {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    &--size--sm {
+        min-height: var(--rt-input-height-sm);
+    }
+
+    &--size--lg {
+        min-height: var(--rt-input-height-lg);
+    }
+
+    /* Read-only: контрол превращается в плоский текст — снимаем рамку/фон/паддинги,
+       чтобы значение читалось как обычный текст под label'ом rt-field. */
+    &--readonly {
+        padding-right: 0;
+        padding-left: 0;
+        border-color: transparent;
+        background-color: transparent;
+        cursor: default;
+    }
+
+    &__readonly {
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+
+    &__field {
+        min-width: 0;
+        flex: 1 1 auto;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        outline: none;
+
+        &::placeholder {
+            color: var(--rt-input-color-text-placeholder);
+            opacity: 1;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__icon-left,
+    &__icon-right,
+    &__clear {
+        flex-shrink: 0;
+    }
+
+    &__toggle {
+        display: inline-flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        padding: var(--rt-space-1);
+        border: none;
+        border-radius: var(--rt-radius-sm);
+        margin: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--rt-input-color-bg-hover);
+        }
+
+        &:focus-visible {
+            outline: var(--rt-input-border-width) solid var(--rt-input-color-border-focus);
+            outline-offset: var(--rt-input-focus-outline-offset);
+        }
+    }
+}

package/src/lib/components/input-number/rt-input-number.component.scss

@@ -0,0 +1,102 @@
+.rt-input-number {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    min-height: var(--rt-input-height);
+    box-sizing: border-box;
+    align-items: center;
+    padding: var(--rt-input-padding-y) var(--rt-input-padding-x);
+    border: var(--rt-input-border-width) solid var(--rt-input-color-border);
+    border-radius: var(--rt-input-radius);
+    background-color: var(--rt-input-color-bg);
+    color: var(--rt-input-color-text);
+    cursor: text;
+    font-size: var(--rt-input-font-size);
+    gap: var(--rt-space-sm);
+    line-height: var(--rt-input-line-height);
+    transition: var(--rt-input-transition);
+
+    &:focus-within {
+        border-color: var(--rt-input-color-border-focus);
+        box-shadow: var(--rt-input-focus-shadow);
+        outline: 2px solid transparent;
+        outline-offset: var(--rt-input-focus-outline-offset);
+    }
+
+    /* bordered=false: снимаем только resting-рамку; invalid/focus/readonly идут
+       ниже по source-order и перекрывают её своей рамкой. */
+    &--borderless {
+        border-color: transparent;
+    }
+
+    &--invalid {
+        border-color: var(--rt-input-color-border-error);
+
+        &:focus-within {
+            box-shadow: var(--rt-input-focus-shadow-error);
+        }
+    }
+
+    &--disabled {
+        cursor: not-allowed;
+        opacity: var(--rt-input-disabled-opacity);
+    }
+
+    &--size--sm {
+        min-height: var(--rt-input-height-sm);
+    }
+
+    &--size--lg {
+        min-height: var(--rt-input-height-lg);
+    }
+
+    /* Read-only: плоский текст вместо input — снимаем рамку/фон/паддинги. */
+    &--readonly {
+        padding-right: 0;
+        padding-left: 0;
+        border-color: transparent;
+        background-color: transparent;
+        cursor: default;
+    }
+
+    &__readonly {
+        color: var(--rt-field-value-color);
+        font-size: var(--rt-field-value-font-size);
+
+        &--empty {
+            color: var(--rt-field-value-empty-color);
+        }
+    }
+
+    &__field {
+        min-width: 0;
+        flex: 1 1 auto;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        outline: none;
+
+        &::placeholder {
+            color: var(--rt-input-color-text-placeholder);
+            opacity: 1;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    &__icon-left,
+    &__prefix,
+    &__clear {
+        flex-shrink: 0;
+    }
+
+    /* Текстовый префикс (напр. «₽»): приглушён, неинтерактивен. */
+    &__prefix {
+        color: var(--rt-color-text-muted);
+        user-select: none;
+    }
+}

package/src/lib/components/live-badge/rt-live-badge.component.scss

@@ -0,0 +1,28 @@
+/* rt-live-badge — пилюля живого счётчика в common/ui (Emulated encapsulation; :host обязательно). */
+
+:host {
+    display: inline-flex;
+
+    .rt-live-badge {
+        display: inline-flex;
+        align-items: center;
+        color: var(--rt-color-text-muted);
+        font-size: var(--rt-text-sm);
+        gap: var(--rt-space-1);
+
+        &--active .rt-live-badge__dot {
+            background: var(--rt-color-state-success);
+        }
+
+        &__dot {
+            width: 8px;
+            height: 8px;
+            border-radius: var(--rt-radius-full);
+            background: var(--rt-color-border-subtle);
+        }
+
+        &__count {
+            color: var(--rt-color-text-primary);
+        }
+    }
+}

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

@@ -0,0 +1,64 @@
+/* rt-logo — логотип приложения.
+ *
+ * Размеры host'а задаются inline через style.height/width (см. rt-logo.component.ts),
+ * а сами начертания приходят свойствами оформления от приложения: кит своего
+ * логотипа не имеет и умолчаний тут не ставит.
+ *
+ * Внутри host'а начертание сверху, слоган под ним ужат по ширине. Начертания
+ * лежат фоном, а не в <img>: у тёмной темы своя пара файлов, и подмена
+ * background-image — единственный способ переключить их одним правилом.
+ */
+:host {
+    display: inline-block;
+    line-height: 0;
+}
+
+.rt-logo {
+    &__wordmark,
+    &__tagline {
+        display: block;
+        width: 100%;
+        background-position: left center;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+
+    &__wordmark {
+        height: 100%;
+        background-image: var(--rt-logo-wordmark, none);
+    }
+
+    &__tagline {
+        background-image: var(--rt-logo-tagline, none);
+    }
+}
+
+/* Тёмная тема: тёмная надпись на тёмной поверхности не читается, поэтому берётся
+   вариант со светлым ink. Не задали пару — остаётся то же начертание. */
+[data-theme='dark'] .rt-logo {
+    &__wordmark {
+        background-image: var(--rt-logo-wordmark-dark, var(--rt-logo-wordmark, none));
+    }
+
+    &__tagline {
+        background-image: var(--rt-logo-tagline-dark, var(--rt-logo-tagline, none));
+    }
+}
+
+/* Композиция lockup: начертание и слоган стоят колонкой и делят высоту host'а.
+   Пропорция та же, что у пары в макете: ~66.7% начертанию, ~22.1% слогану,
+   остальное — зазор между ними. */
+:host:has(.rt-logo__tagline) {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+}
+
+:host:has(.rt-logo__tagline) .rt-logo__wordmark {
+    height: 66.7%;
+}
+
+:host:has(.rt-logo__tagline) .rt-logo__tagline {
+    height: 22.1%;
+}

package/src/lib/components/menu/rt-menu-confirm-dialog.component.scss

@@ -0,0 +1,36 @@
+/* rt-menu-confirm-dialog — confirm-модалка деструктивного пункта rt-menu-item.
+   ViewEncapsulation.None — селекторы префиксованы `.rt-menu-confirm-dialog`.
+   Frame (фон/радиус/тень) даёт rt-dialog; здесь — только layout контента. */
+
+.rt-menu-confirm-dialog {
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    padding: var(--rt-space-xl);
+    gap: var(--rt-space-lg);
+
+    &__text {
+        display: flex;
+        flex-direction: column;
+        gap: var(--rt-space-sm);
+    }
+
+    &__title {
+        margin: 0;
+        color: var(--rt-color-text-primary);
+        font-size: var(--rt-text-md);
+        font-weight: var(--rt-font-weight-bold);
+    }
+
+    &__message {
+        margin: 0;
+        color: var(--rt-color-text-secondary);
+        font-size: var(--rt-text-sm);
+    }
+
+    &__footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--rt-space-sm);
+    }
+}

package/src/lib/components/menu/rt-menu-item.component.scss

@@ -0,0 +1,54 @@
+/* rt-menu-item — пункт меню rt-menu. ViewEncapsulation.None.
+   Host (`<rt-menu-item>`) несёт класс блока и сам является кликабельной зоной. */
+
+.rt-menu-item {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    align-items: center;
+    padding: var(--rt-space-sm) var(--rt-space-md);
+    border-radius: var(--rt-radius-sm);
+    color: var(--rt-color-text-primary);
+    cursor: pointer;
+    font-size: var(--rt-text-sm);
+    gap: var(--rt-space-sm);
+    text-align: start;
+    transition: background-color var(--rt-duration-fast) ease;
+
+    &:hover {
+        background: var(--rt-color-bg-hover);
+    }
+
+    &:focus-visible {
+        background: var(--rt-color-bg-hover);
+        outline: none;
+    }
+
+    &__icon {
+        flex-shrink: 0;
+        color: var(--rt-color-text-muted);
+    }
+
+    &__label {
+        flex: 1 1 auto;
+        white-space: nowrap;
+    }
+
+    &--danger {
+        color: var(--rt-color-state-error-text);
+
+        .rt-menu-item__icon {
+            color: var(--rt-color-state-error-text);
+        }
+    }
+
+    &--disabled {
+        color: var(--rt-color-text-muted);
+        cursor: default;
+        opacity: 0.5;
+
+        &:hover {
+            background: transparent;
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+/* rt-menu — dropdown-меню действий. ViewEncapsulation.None.
+   Триггер живёт в host'е, панель (`__panel`) рендерится в CDK Overlay. */
+
+.rt-menu {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &__panel {
+        display: flex;
+        min-width: 180px;
+        flex-direction: column;
+        padding: var(--rt-space-xs);
+        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-lg);
+    }
+}