@cloud-ru/ds-ai-queue 1.0.0

package/dist/cjs/styles.module.css

@@ -0,0 +1,148 @@
+.root{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  row-gap:0;
+  align-items:stretch;
+  width:100%;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.root[data-open]{
+  row-gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.trigger{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  cursor:pointer;
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  min-width:0;
+  margin:0;
+  padding:0;
+  border:0;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  text-align:left;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  background:transparent;
+  outline:none;
+}
+.trigger:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+
+.summary{
+  overflow:hidden;
+  display:inline-flex;
+  -moz-column-gap:var(--sn-primitive-dimension-2, 2px);
+       column-gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.chevron{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.content{
+  max-height:140px;
+}
+
+.steps{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:stretch;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
+}
+
+.step{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  min-width:0;
+}
+
+.stepStatus{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-primitive-dimension-16, 16px);
+  height:var(--sn-primitive-dimension-16, 16px);
+}
+
+.stepStatusIcon{
+  width:100%;
+  height:100%;
+}
+
+.stepStatusSuccess{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.stepStatusError{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+
+.stepStatusProgress{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+
+.stepStatusPending{
+  box-sizing:border-box;
+  width:var(--sn-primitive-dimension-8, 8px);
+  height:var(--sn-primitive-dimension-8, 8px);
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.stepLabel{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  overflow:hidden;
+  flex:1 1 auto;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.step[data-state=progress] .stepLabel{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+
+.step[data-state=error] .stepLabel,
+.step[data-state=done] .stepLabel{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.step[data-state=done] .stepLabel{
+  text-decoration:line-through;
+}

package/dist/cjs/types.d.ts

@@ -0,0 +1,38 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import type { ComponentPropsWithoutRef } from 'react';
+import { AI_QUEUE_STEP_STATE } from './constants';
+export type AiQueueStepState = ValueOf<typeof AI_QUEUE_STEP_STATE>;
+export type AiQueueStep = {
+    id?: string | number;
+    label: string;
+    state?: AiQueueStepState;
+};
+export type AiQueueSummary = {
+    total?: number;
+    planned?: number;
+    progress?: number;
+    done?: number;
+};
+export type AiQueueLabels = {
+    tasks: string;
+    planned: string;
+    inProgress: string;
+    done: string;
+};
+export type AiQueueOwnProps = {
+    /** Шаги очереди. */
+    steps?: AiQueueStep[];
+    /** Принудительные счётчики в заголовке; если не заданы, считаются по `steps`. */
+    summary?: AiQueueSummary;
+    /** Контролируемое состояние раскрытия. */
+    open?: boolean;
+    /** Начальное состояние раскрытия в uncontrolled-режиме. */
+    defaultOpen?: boolean;
+    /** Коллбек изменения раскрытия. */
+    onOpenChange?: (open: boolean) => void;
+    /** Тексты счётчика в заголовке. */
+    labels?: Partial<AiQueueLabels>;
+    /** Дополнительный CSS-класс корня. */
+    className?: string;
+};
+export type AiQueueProps = WithSupportProps<AiQueueOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AiQueueOwnProps | 'children'>>;

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/utils.d.ts

@@ -0,0 +1,3 @@
+import { AiQueueStep, AiQueueSummary } from './types';
+export declare function resolveStepState(state?: AiQueueStep['state']): import("./types").AiQueueStepState;
+export declare function calculateSummary(steps: AiQueueStep[]): Required<AiQueueSummary>;

package/dist/cjs/utils.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveStepState = resolveStepState;
+exports.calculateSummary = calculateSummary;
+const constants_1 = require("./constants");
+function resolveStepState(state) {
+    return state ?? constants_1.AI_QUEUE_STEP_STATE.Planned;
+}
+function calculateSummary(steps) {
+    return steps.reduce((acc, step) => {
+        const state = resolveStepState(step.state);
+        acc.total += 1;
+        if (state === constants_1.AI_QUEUE_STEP_STATE.Planned) {
+            acc.planned += 1;
+        }
+        if (state === constants_1.AI_QUEUE_STEP_STATE.Progress) {
+            acc.progress += 1;
+        }
+        if (state === constants_1.AI_QUEUE_STEP_STATE.Done) {
+            acc.done += 1;
+        }
+        return acc;
+    }, {
+        total: 0,
+        planned: 0,
+        progress: 0,
+        done: 0,
+    });
+}

package/dist/esm/AiQueue.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+import { AiQueueProps } from './types.js';
+export declare function AiQueue({ className, steps, summary, labels, open: openProp, defaultOpen, onOpenChange, 'data-test-id': dataTestId, ...rest }: AiQueueProps): ReactElement;

package/dist/esm/AiQueue.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AiButtonChevron } from '@cloud-ru/ds-ai-button-chevron';
+import { Scroll } from '@cloud-ru/ds-scroll';
+import { useUncontrolledProp } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+import { AiQueueStepStatus } from './AiQueueStepStatus.js';
+import { DEFAULT_LABELS, TEST_IDS } from './constants.js';
+import styles from './styles.module.css';
+import { calculateSummary, resolveStepState } from './utils.js';
+export function AiQueue({ className, steps = [], summary, labels, open: openProp, defaultOpen = false, onOpenChange, 'data-test-id': dataTestId = TEST_IDS.root, ...rest }) {
+    const [open, setOpen] = useUncontrolledProp(openProp, defaultOpen, onOpenChange);
+    const mergedLabels = { ...DEFAULT_LABELS, ...labels };
+    const derivedSummary = useMemo(() => calculateSummary(steps), [steps]);
+    const total = summary?.total ?? derivedSummary.total;
+    const planned = summary?.planned ?? derivedSummary.planned;
+    const progress = summary?.progress ?? derivedSummary.progress;
+    const done = summary?.done ?? derivedSummary.done;
+    return (_jsxs("div", { ...rest, className: cn(styles.root, className), "data-open": open || undefined, "data-test-id": dataTestId, children: [_jsxs("button", { type: 'button', className: styles.trigger, "aria-expanded": open, "data-test-id": TEST_IDS.trigger, onClick: () => setOpen(!open), children: [_jsxs("span", { className: styles.summary, "data-test-id": TEST_IDS.summary, children: [_jsx("span", { children: total }), _jsx("span", { children: mergedLabels.tasks }), _jsx("span", { children: "(" }), _jsx("span", { children: planned }), _jsx("span", { children: mergedLabels.planned }), _jsx("span", { children: "/" }), _jsx("span", { children: progress }), _jsx("span", { children: mergedLabels.inProgress }), _jsx("span", { children: "/" }), _jsx("span", { children: done }), _jsx("span", { children: mergedLabels.done }), _jsx("span", { children: ")" })] }), _jsx(AiButtonChevron, { opened: open, interactive: false, className: styles.chevron })] }), open && steps.length > 0 && (_jsx(Scroll, { size: 's', barHideStrategy: 'leave', className: styles.content, "data-test-id": TEST_IDS.content, children: _jsx("div", { className: styles.steps, children: steps.map((step, index) => {
+                        const state = resolveStepState(step.state);
+                        return (_jsxs("div", { className: styles.step, "data-state": state, "data-test-id": `${TEST_IDS.step}-${index}`, children: [_jsx("span", { className: styles.stepStatus, "aria-hidden": true, children: _jsx(AiQueueStepStatus, { state: state }) }), _jsx("span", { className: styles.stepLabel, children: step.label })] }, step.id ?? `${index}-${step.label}`));
+                    }) }) }))] }));
+}

package/dist/esm/AiQueueStepStatus.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+import { AiQueueStepState } from './types.js';
+type AiQueueStepStatusProps = {
+    state: AiQueueStepState;
+};
+export declare function AiQueueStepStatus({ state }: AiQueueStepStatusProps): ReactElement;
+export {};

package/dist/esm/AiQueueStepStatus.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckSVG, CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Sun, SUN_SIZE } from '@cloud-ru/ds-loader';
+import cn from 'classnames';
+import { AI_QUEUE_STEP_STATE } from './constants.js';
+import styles from './styles.module.css';
+const STEP_STATUS_ICON_SIZE = 16;
+export function AiQueueStepStatus({ state }) {
+    switch (state) {
+        case AI_QUEUE_STEP_STATE.Done:
+            return _jsx(CheckSVG, { size: STEP_STATUS_ICON_SIZE, className: cn(styles.stepStatusIcon, styles.stepStatusSuccess) });
+        case AI_QUEUE_STEP_STATE.Error:
+            return _jsx(CrossSVG, { size: STEP_STATUS_ICON_SIZE, className: cn(styles.stepStatusIcon, styles.stepStatusError) });
+        case AI_QUEUE_STEP_STATE.Progress:
+            return _jsx(Sun, { size: SUN_SIZE.XS, className: cn(styles.stepStatusIcon, styles.stepStatusProgress) });
+        default:
+            return _jsx("span", { className: styles.stepStatusPending });
+    }
+}

package/dist/esm/constants.d.ts

@@ -0,0 +1,15 @@
+import type { AiQueueLabels } from './types.js';
+export declare const AI_QUEUE_STEP_STATE: {
+    readonly Planned: "planned";
+    readonly Progress: "progress";
+    readonly Done: "done";
+    readonly Error: "error";
+};
+export declare const DEFAULT_LABELS: AiQueueLabels;
+export declare const TEST_IDS: {
+    readonly root: "ai-queue";
+    readonly trigger: "ai-queue__trigger";
+    readonly summary: "ai-queue__summary";
+    readonly content: "ai-queue__content";
+    readonly step: "ai-queue__step";
+};

package/dist/esm/constants.js

@@ -0,0 +1,19 @@
+export const AI_QUEUE_STEP_STATE = {
+    Planned: 'planned',
+    Progress: 'progress',
+    Done: 'done',
+    Error: 'error',
+};
+export const DEFAULT_LABELS = {
+    tasks: 'задач',
+    planned: 'запланировано',
+    inProgress: 'в процессе',
+    done: 'готово',
+};
+export const TEST_IDS = {
+    root: 'ai-queue',
+    trigger: 'ai-queue__trigger',
+    summary: 'ai-queue__summary',
+    content: 'ai-queue__content',
+    step: 'ai-queue__step',
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AiQueue.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './AiQueue.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/style.css

@@ -0,0 +1,148 @@
+.root{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  row-gap:0;
+  align-items:stretch;
+  width:100%;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.root[data-open]{
+  row-gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.trigger{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  cursor:pointer;
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  min-width:0;
+  margin:0;
+  padding:0;
+  border:0;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  text-align:left;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  background:transparent;
+  outline:none;
+}
+.trigger:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+
+.summary{
+  overflow:hidden;
+  display:inline-flex;
+  -moz-column-gap:var(--sn-primitive-dimension-2, 2px);
+       column-gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.chevron{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.content{
+  max-height:140px;
+}
+
+.steps{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:stretch;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
+}
+
+.step{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  min-width:0;
+}
+
+.stepStatus{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-primitive-dimension-16, 16px);
+  height:var(--sn-primitive-dimension-16, 16px);
+}
+
+.stepStatusIcon{
+  width:100%;
+  height:100%;
+}
+
+.stepStatusSuccess{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.stepStatusError{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+
+.stepStatusProgress{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+
+.stepStatusPending{
+  box-sizing:border-box;
+  width:var(--sn-primitive-dimension-8, 8px);
+  height:var(--sn-primitive-dimension-8, 8px);
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.stepLabel{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  overflow:hidden;
+  flex:1 1 auto;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.step[data-state=progress] .stepLabel{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+
+.step[data-state=error] .stepLabel,
+.step[data-state=done] .stepLabel{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.step[data-state=done] .stepLabel{
+  text-decoration:line-through;
+}

package/dist/esm/styles.module.css

@@ -0,0 +1,148 @@
+.root{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  row-gap:0;
+  align-items:stretch;
+  width:100%;
+  padding-top:var(--sn-primitive-dimension-4, 4px);
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.root[data-open]{
+  row-gap:var(--sn-primitive-dimension-8, 8px);
+}
+
+.trigger{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  cursor:pointer;
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  min-width:0;
+  margin:0;
+  padding:0;
+  border:0;
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+  text-align:left;
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none;
+  background:transparent;
+  outline:none;
+}
+.trigger:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+
+.summary{
+  overflow:hidden;
+  display:inline-flex;
+  -moz-column-gap:var(--sn-primitive-dimension-2, 2px);
+       column-gap:var(--sn-primitive-dimension-2, 2px);
+  align-items:center;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.chevron{
+  flex-shrink:0;
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.content{
+  max-height:140px;
+}
+
+.steps{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:stretch;
+  padding-right:var(--sn-primitive-dimension-8, 8px);
+}
+
+.step{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  align-items:center;
+  width:100%;
+  min-width:0;
+}
+
+.stepStatus{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  width:var(--sn-primitive-dimension-16, 16px);
+  height:var(--sn-primitive-dimension-16, 16px);
+}
+
+.stepStatusIcon{
+  width:100%;
+  height:100%;
+}
+
+.stepStatusSuccess{
+  color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+}
+
+.stepStatusError{
+  color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
+}
+
+.stepStatusProgress{
+  color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
+}
+
+.stepStatusPending{
+  box-sizing:border-box;
+  width:var(--sn-primitive-dimension-8, 8px);
+  height:var(--sn-primitive-dimension-8, 8px);
+  border:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
+  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
+}
+
+.stepLabel{
+  font-family:var(--sn-thin-label-s-fontFamily, var(--sn-brand-font-fontFamily-thin-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-label-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-label-s, var(--sn-brand-font-fontWeight-light-thin-label-s, var(--sn-primitive-font-fontWeightValue-450, 450))));
+  line-height:var(--sn-thin-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-thin-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-thin-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-thin-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+  overflow:hidden;
+  flex:1 1 auto;
+  min-width:0;
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+
+.step[data-state=progress] .stepLabel{
+  font-family:var(--sn-regular-label-s-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-label-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-regular-label-s-lineHeight, var(--sn-density-typography-roleLabel-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+  font-size:var(--sn-regular-label-s-fontSize, var(--sn-density-typography-roleLabel-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
+  letter-spacing:var(--sn-regular-label-s-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
+  paragraph-spacing:var(--sn-regular-label-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize11, 5px));
+}
+
+.step[data-state=error] .stepLabel,
+.step[data-state=done] .stepLabel{
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+}
+
+.step[data-state=done] .stepLabel{
+  text-decoration:line-through;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,38 @@
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import type { ComponentPropsWithoutRef } from 'react';
+import { AI_QUEUE_STEP_STATE } from './constants.js';
+export type AiQueueStepState = ValueOf<typeof AI_QUEUE_STEP_STATE>;
+export type AiQueueStep = {
+    id?: string | number;
+    label: string;
+    state?: AiQueueStepState;
+};
+export type AiQueueSummary = {
+    total?: number;
+    planned?: number;
+    progress?: number;
+    done?: number;
+};
+export type AiQueueLabels = {
+    tasks: string;
+    planned: string;
+    inProgress: string;
+    done: string;
+};
+export type AiQueueOwnProps = {
+    /** Шаги очереди. */
+    steps?: AiQueueStep[];
+    /** Принудительные счётчики в заголовке; если не заданы, считаются по `steps`. */
+    summary?: AiQueueSummary;
+    /** Контролируемое состояние раскрытия. */
+    open?: boolean;
+    /** Начальное состояние раскрытия в uncontrolled-режиме. */
+    defaultOpen?: boolean;
+    /** Коллбек изменения раскрытия. */
+    onOpenChange?: (open: boolean) => void;
+    /** Тексты счётчика в заголовке. */
+    labels?: Partial<AiQueueLabels>;
+    /** Дополнительный CSS-класс корня. */
+    className?: string;
+};
+export type AiQueueProps = WithSupportProps<AiQueueOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof AiQueueOwnProps | 'children'>>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};