@gravity-ui/aikit 0.1.1 → 0.1.2

package/dist/components/atoms/Alert/Alert.scss

@@ -0,0 +1,29 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}alert';
+
+#{$block} {
+    display: flex;
+    align-items: center;
+    gap: var(--g-spacing-2);
+
+    &__icon {
+        flex-shrink: 0;
+
+        &_variant_error {
+            color: var(--g-color-text-danger);
+        }
+
+        &_variant_warning {
+            color: var(--g-color-text-warning-heavy);
+        }
+
+        &_variant_info {
+            color: var(--g-color-text-info);
+        }
+    }
+
+    &__action {
+        margin-left: auto;
+    }
+}

package/dist/components/atoms/ChatDate/ChatDate.scss

@@ -0,0 +1,15 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}chat-date';
+
+#{$block} {
+    color: var(--g-color-text-secondary);
+
+    font-family: var(--g-text-body-font-family);
+    font-size: var(--g-text-body-1-font-size);
+    font-style: normal;
+    font-weight: var(--g-text-body-font-weight);
+    line-height: var(--g-text-body-1-line-height);
+
+    display: inline-block;
+}

package/dist/components/atoms/ChatDate/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "ago": {
+    "zero": "Today",
+    "one": "Yesterday",
+    "other": "{{count}} days ago"
+  },
+  "invalid-date": "Input date is invalid"
+}

package/dist/components/atoms/ChatDate/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+  "ago": {
+    "zero": "Сегодня",
+    "one": "Вчера",
+    "few": "{{count}} дня назад",
+    "many": "{{count}} дней назад",
+    "other": "{{count}} дней назад"
+  },
+  "invalid-date": "Входная дата неверная"
+}

package/dist/components/atoms/ContextIndicator/ContextIndicator.scss

@@ -0,0 +1,93 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}context-indicator';
+
+@mixin progress-color($opacity: 1) {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    opacity: $opacity;
+}
+
+#{$block} {
+    &__container {
+        $container: &;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+
+        &_orientation {
+            &_horizontal {
+                flex-direction: row;
+
+                &#{$container}_reversed {
+                    flex-direction: row-reverse;
+                }
+            }
+
+            &_vertical {
+                flex-direction: column;
+
+                &#{$container}_reversed {
+                    flex-direction: column-reverse;
+                }
+            }
+        }
+    }
+
+    &__progress {
+        --percentage: 0;
+        --progress-color: var(--g-aikit-ci-color-progress-1);
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        position: relative;
+
+        &::before {
+            @include progress-color(0.3);
+
+            background: var(--progress-color);
+            opacity: 0.3;
+        }
+
+        &::after {
+            @include progress-color(1);
+
+            background: conic-gradient(
+                var(--progress-color) 0deg,
+                var(--progress-color) calc(3.6deg * var(--percentage)),
+                transparent calc(3.6deg * var(--percentage)),
+                transparent 360deg
+            );
+        }
+    }
+
+    &__inner {
+        box-sizing: border-box;
+        width: calc(100% - 4px);
+        height: calc(100% - 4px);
+        border-radius: 50%;
+        background: var(--g-aikit-color-bg-primary);
+        position: relative;
+        z-index: 1;
+    }
+
+    &__value {
+        color: var(--g-color-text-primary);
+        font-family: var(--g-text-body-font-family);
+        font-size: var(--g-text-body-1-font-size);
+        font-style: normal;
+        font-weight: var(--g-text-body-font-weight);
+        line-height: var(--g-text-body-1-line-height);
+
+        &::after {
+            content: '%';
+        }
+    }
+}

package/dist/components/atoms/DiffStat/DiffStat.scss

@@ -0,0 +1,36 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}diff-stat';
+
+#{$block} {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    color: var(--g-color-text-danger);
+    font-family: var(--g-text-code-font-family);
+    font-size: var(--g-text-code-inline-1);
+    font-style: normal;
+    font-weight: var(--g-text-code-font-weight);
+    line-height: var(--g-text-code-inline-1-line-height);
+
+    &__added {
+        color: var(--g-color-text-positive-heavy);
+
+        &_allow_sign {
+            &::before {
+                content: '+';
+            }
+        }
+    }
+
+    &__deleted {
+        color: var(--g-color-text-danger);
+
+        &_allow_sign {
+            &::before {
+                content: '-';
+            }
+        }
+    }
+}

package/dist/components/atoms/Disclaimer/Disclaimer.scss

@@ -0,0 +1,13 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}disclaimer';
+
+#{$block} {
+    &__container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: var(--g-aikit-disclaimer-gap);
+        align-self: stretch;
+    }
+}

package/dist/components/atoms/Loader/Loader.scss

@@ -0,0 +1,72 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}loader';
+
+$pulse-duration: 800ms;
+$pulse-delay: $pulse-duration * 0.25;
+$animation: pulse ease $pulse-duration infinite;
+
+@keyframes pulse {
+    100% {
+        opacity: 0;
+    }
+    50% {
+        opacity: 70%;
+    }
+    0% {
+        opacity: 40%;
+    }
+}
+
+#{$block} {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--g-spacing-1);
+
+    &__left,
+    &__center,
+    &__right {
+        background: var(--g-color-text-secondary);
+        border-radius: 50%;
+        animation: $animation;
+    }
+
+    &_size_xs {
+        #{$block}__left,
+        #{$block}__center,
+        #{$block}__right {
+            width: 3px;
+            height: 3px;
+        }
+    }
+
+    &_size_s {
+        #{$block}__left,
+        #{$block}__center,
+        #{$block}__right {
+            width: 5px;
+            height: 5px;
+        }
+    }
+
+    &_size_m {
+        #{$block}__left,
+        #{$block}__center,
+        #{$block}__right {
+            width: 8px;
+            height: 8px;
+        }
+    }
+
+    &__left {
+        animation-delay: $pulse-delay;
+    }
+
+    &__center {
+        animation-delay: 2 * $pulse-delay;
+    }
+
+    &__right {
+        animation-delay: 3 * $pulse-delay;
+    }
+}

package/dist/components/atoms/MarkdownRenderer/MarkdownRenderer.scss

@@ -0,0 +1,5 @@
+@use '../../../styles/variables';
+
+@import '@diplodoc/transform/dist/css/yfm.css';
+
+$block: '.#{variables.$ns}markdown-renderer';

package/dist/components/atoms/MessageBalloon/MessageBalloon.scss

@@ -0,0 +1,11 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}message-balloon';
+
+#{$block} {
+    display: inline-block;
+    background-color: var(--g-color-base-info-light);
+    padding: var(--g-spacing-2) var(--g-spacing-3);
+    border-radius: var(--g-spacing-3) 0 var(--g-spacing-3) var(--g-spacing-3);
+    white-space: pre-wrap;
+}

package/dist/components/atoms/Shimmer/Shimmer.scss

@@ -0,0 +1,32 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}shimmer';
+
+#{$block} {
+    &__container {
+        position: relative;
+        display: inline-block;
+
+        background: linear-gradient(
+            90deg,
+            var(--g-aikit-shimmer-color-from) 0%,
+            var(--g-aikit-shimmer-color-from) 40%,
+            var(--g-aikit-shimmer-color-to) 50%,
+            var(--g-aikit-shimmer-color-from) 60%,
+            var(--g-aikit-shimmer-color-from) 100%
+        );
+        background-size: var(--g-aikit-shimmer-gradient-size) 100%;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: shimmer var(--g-aikit-shimmer-duration) infinite linear;
+    }
+}
+
+@keyframes shimmer {
+    0% {
+        background-position: 200% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}

package/dist/components/atoms/SubmitButton/SubmitButton.scss

@@ -0,0 +1,29 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}submit-button';
+
+#{$block} {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &_size_s#{&}_loading {
+        padding: 4px;
+    }
+
+    &_size_m#{&}_loading {
+        padding: 6px;
+    }
+
+    &_size_l#{&}_loading {
+        padding: 10px;
+    }
+
+    &__loader {
+        display: flex;
+    }
+
+    &__spinner {
+        --g-color-line-brand: var(--g-color-text-brand-contrast);
+    }
+}

package/dist/components/atoms/SubmitButton/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "tooltip-send": "Send"
+}

package/dist/components/atoms/SubmitButton/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "tooltip-send": "Отправить"
+}

package/dist/components/atoms/ToolIndicator/ToolIndicator.scss

@@ -0,0 +1,15 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}tool-indicator';
+
+#{$block} {
+    &__success {
+        color: var(--g-color-text-positive);
+    }
+    &__error {
+        color: var(--g-color-text-danger);
+    }
+    &__info {
+        color: var(--g-color-text-secondary);
+    }
+}

package/dist/components/molecules/BaseMessage/BaseMessage.scss

@@ -0,0 +1,41 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}base-message';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    gap: var(--g-spacing-1);
+
+    &_variant_user {
+        align-items: flex-end;
+        margin-left: var(--g-spacing-10);
+    }
+
+    &_variant_system,
+    &_variant_assistant {
+        align-items: flex-start;
+    }
+
+    &_btn-hover {
+        #{$block}__actions {
+            visibility: hidden;
+        }
+
+        &:hover {
+            #{$block}__actions {
+                visibility: visible;
+            }
+        }
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-3);
+
+        &_reverse {
+            flex-direction: row-reverse;
+        }
+    }
+}

package/dist/components/molecules/BaseMessage/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "action-tooltip-copy": "Copy",
+  "action-tooltip-edit": "Edit",
+  "action-tooltip-retry": "Retry",
+  "action-tooltip-like": "Like",
+  "action-tooltip-unlike": "Dislike",
+  "action-tooltip-delete": "Delete"
+}

package/dist/components/molecules/BaseMessage/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "action-tooltip-copy": "Копировать",
+  "action-tooltip-edit": "Редактировать",
+  "action-tooltip-retry": "Повторить",
+  "action-tooltip-like": "Нравится",
+  "action-tooltip-unlike": "Не нравится",
+  "action-tooltip-delete": "Удалить"
+}

package/dist/components/molecules/ButtonGroup/ButtonGroup.scss

@@ -0,0 +1,19 @@
+@use '../../../styles/variables';
+
+$block: '.#{variables.$ns}button-group';
+
+#{$block} {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--g-spacing-1);
+
+    &_or_vertical {
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    &_or_horizontal {
+        flex-direction: row;
+        align-items: center;
+    }
+}

package/dist/components/molecules/PromptInputBody/PromptInputBody.scss

@@ -0,0 +1,22 @@
+@use '../../../styles/variables.scss';
+
+$block: '.#{variables.$ns}prompt-input-body';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    align-self: stretch;
+
+    &__textarea {
+        width: 100%;
+    }
+
+    &__textarea-control {
+        resize: none;
+    }
+
+    .g-text-area_disabled {
+        --_--background-color: none;
+    }
+}

package/dist/components/molecules/PromptInputFooter/PromptInputFooter.scss

@@ -0,0 +1,25 @@
+@use '../../../styles/variables.scss';
+
+$block: '.#{variables.$ns}prompt-input-footer';
+
+#{$block} {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    align-self: stretch;
+    gap: var(--g-spacing-1);
+
+    &__action-button {
+        color: var(--g-color-text-secondary);
+
+        &:hover {
+            color: var(--g-color-text-primary);
+        }
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        flex: 1;
+    }
+}

package/dist/components/molecules/PromptInputFooter/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "tooltip-settings": "Settings",
+  "tooltip-attachment": "Attach file",
+  "tooltip-microphone": "Voice input"
+}

package/dist/components/molecules/PromptInputFooter/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "tooltip-settings": "Настройки",
+  "tooltip-attachment": "Прикрепить файл",
+  "tooltip-microphone": "Голосовой ввод"
+}

package/dist/components/molecules/PromptInputHeader/PromptInputHeader.scss

@@ -0,0 +1,27 @@
+@use '../../../styles/variables.scss';
+
+$block: '.#{variables.$ns}prompt-input-header';
+
+#{$block} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--g-spacing-2);
+    align-self: stretch;
+
+    &__context-items {
+        display: flex;
+        align-items: center;
+        gap: var(--g-spacing-1);
+        flex-wrap: wrap;
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__context-indicator {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+}

package/dist/components/molecules/PromptInputPanel/PromptInputPanel.scss

@@ -0,0 +1,11 @@
+@use '../../../styles/variables.scss';
+
+$block: '.#{variables.$ns}prompt-input-panel';
+
+#{$block} {
+    display: flex;
+    padding: var(--g-spacing-2);
+    flex-direction: row;
+    align-items: center;
+    gap: var(--g-spacing-2);
+}

package/dist/components/molecules/Suggestions/Suggestions.scss

@@ -0,0 +1,73 @@
+@use '../../../styles/variables';
+@use '../../../styles/functions' as *;
+
+$block: '.#{variables.$ns}suggestions';
+
+#{$block} {
+    display: flex;
+    align-items: flex-start;
+    align-content: flex-start;
+    gap: var(--g-spacing-2) var(--g-spacing-2);
+    align-self: stretch;
+    flex-wrap: wrap;
+
+    &_layout_grid {
+        flex-direction: row;
+    }
+
+    &_layout_list {
+        flex-direction: column;
+    }
+
+    &_layout_list &__button {
+        width: 100%;
+    }
+
+    &__button {
+        padding: spacing(2) spacing(4);
+        height: 100%;
+        box-shadow: none;
+
+        .g-button__text {
+            width: 100%;
+        }
+    }
+
+    &__button-content {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        flex: 1;
+        gap: spacing(1);
+        min-width: 0;
+
+        &_text-align_left {
+            justify-content: flex-start;
+        }
+
+        &_text-align_center {
+            justify-content: center;
+        }
+
+        &_text-align_right {
+            justify-content: flex-end;
+        }
+    }
+
+    &__button-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 0;
+    }
+
+    &__button-icon {
+        width: 16px;
+        height: 16px;
+        color: var(--g-color-text-hint);
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+    }
+}