@olddevs/ui 0.0.0-stage → 4.0.0

package/src/components/actions/Button.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { buttonClasses, SPINNER_BASE, SPINNER_SIZES } from "../../lib/button.js";
+import { cn } from "../../lib/cn.js";
+import type { ButtonSize, Tone, Variant } from "../../lib/variants.js";
+
+export interface ButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+  /** Подпись кнопки. При `iconOnly` не рендерится; при `asChild` содержимым распоряжается дочерний элемент. */
+  children?: ReactNode;
+  /** Подача: `solid`, `soft`, `outline` или `ghost` из словаря кита. По умолчанию `soft`. */
+  variant?: Variant;
+  /** Тон: цветовая роль кнопки из словаря кита. По умолчанию `neutral`. */
+  tone?: Tone;
+  /**
+   * Размер кнопки из словаря кита. По умолчанию `md`.
+   *
+   * `xs` — четвёртая ступень, заведённая под кнопку-иконку в строке
+   * списка: 20 пикселей вместо 30 у `sm`, иначе строка на 32 растягивается до
+   * 42. Подпись в него не предполагается — берите вместе с `iconOnly`.
+   */
+  size?: ButtonSize;
+  /** Иконка перед подписью. Во время `loading` её место занимает кольцо отправки. */
+  icon?: ReactNode;
+  /**
+   * Только иконка: квадрат без горизонтальных отступов, подпись не рендерится.
+   *
+   * Такой кнопке нужно доступное имя — из `aria-label` или `title`. Компилятор
+   * этого не требует (союзный тип ломает вывод в Storybook и в обёртках, см.
+   * `Toggle`), зато требует аудит axe: безымянная кнопка роняет его как
+   * `critical`. Проверка есть в `tests-visual/a11y.spec.ts`.
+   */
+  iconOnly?: boolean;
+  /**
+   * Отправка идёт: вместо иконки крутится кольцо, кнопка не нажимается,
+   * а состояние объявляется через `aria-busy`.
+   *
+   * Выключенность здесь наступает сама — отдельный `disabled` рядом с
+   * `loading` писать не нужно. Так было в `ConfirmDialog`, и это же руками
+   * повторял экран логина: пятнадцать строк собственной кнопки с shimmer'ом.
+   *
+   * Индикатор занимает слот иконки. У кнопки без иконки это добавляет слот на
+   * время отправки, то есть подпись сдвигается — поэтому кнопке, которая
+   * умеет уходить в отправку, иконку лучше дать сразу.
+   *
+   * При `asChild` смысл тот же, что у `disabled` там же: настоящего атрибута
+   * у ссылки нет, поэтому выключенность выражается `aria-disabled` и снятием
+   * событий указателя.
+   */
+  loading?: boolean;
+  /**
+   * Нажатое состояние кнопки-переключателя: выставляет `aria-pressed` и нажатый вид.
+   *
+   * Нужно панельной кнопке, которая держит открытым что-то ещё. Не `active`: словарь допускает только `selected`.
+   */
+  selected?: boolean;
+  /**
+   * Вывести кнопку дочерним элементом вместо своей `<button>`: ссылкой,
+   * `next/link`, триггером чужого компонента. Пропы и `ref` сливаются с потомком.
+   *
+   * Нужен там, где элемент выглядит кнопкой, но кнопкой не является: «Создать
+   * кампанию» ведёт на другой экран, и это ссылка — её открывают в новой
+   * вкладке средней кнопкой мыши, копируют адрес, видят в строке состояния.
+   * Кнопка с `onClick={() => router.push(…)}` не умеет ничего из этого.
+   *
+   * ВАЖНО: `type="button"` при `asChild` не проставляется — у ссылки такого
+   * атрибута нет вовсе, и React отрисовал бы его в разметку мусором.
+   * Клавиатура при этом меняется, и это не дефект, а разница ролей: кнопка
+   * жмётся пробелом и Enter, ссылка — только Enter.
+   *
+   * Два пропа при `asChild` меняют поведение, потому что иначе молча врали бы:
+   *
+   * - `disabled` у ссылки не существует как атрибут: `<a disabled>` остаётся
+   *   и фокусируемой, и переходимой, а `disabled:opacity-50` не срабатывает,
+   *   потому что `:disabled` — псевдокласс полей формы. Поэтому здесь он
+   *   превращается в `aria-disabled` плюс снятие событий указателя.
+   * - `selected` не превращается в `aria-pressed`: у роли `link` этот атрибут
+   *   запрещён, и аудит axe ловит его как `aria-allowed-attr`. Нажатой ссылки
+   *   не бывает — если состояние нужно, это кнопка, а не ссылка.
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Кнопка.
+ *
+ * Единственный проп `kind` из версии во фронте разложен на две оси словаря.
+ * Таблица переезда:
+ *
+ *   kind="primary"  →  variant="solid"   tone="accent"
+ *   kind="ghost"    →  variant="soft"    tone="neutral"   (значение по умолчанию)
+ *   kind="quiet"    →  variant="ghost"   tone="neutral"
+ *   kind="danger"   →  variant="outline" tone="danger"
+ *   kind="success"  →  variant="solid"   tone="success"
+ *
+ * Главное отличие от прежней версии: она держала hover в `useState` и вешала
+ * `onMouseEnter`/`onMouseLeave`, из-за чего наведение курсора вызывало ререндер,
+ * а клавиатурный фокус и touch не подсвечивались вовсе. Здесь всё это —
+ * псевдоклассы CSS.
+ *
+ * Проп `iconRight` прежней версии не переносится: из 81 вызова во фронте он не
+ * встретился ни разу. `tone="success"` и `size="lg"` тоже не используются, но
+ * они часть общих осей словаря и ничего не стоят — в отличие от отдельного
+ * пропа, который пришлось бы поддерживать.
+ *
+ * `iconOnly` вобрал в себя отдельный примитив `IconButton` из фронта. Тот был
+ * конкурирующей реализацией той же кнопки: свой hover на `useState`, свой проп
+ * `active` вне словаря, свой набор размеров числами — и вдобавок два вызова
+ * `Button` во фронте руками делались квадратными через `style={{ width: 36 }}`.
+ * Идиома не новая: у `Chip` `iconOnly` был с самого начала.
+ */
+/**
+ * Снять единственного потомка с обхода.
+ *
+ * Не трогаем ничего, кроме `tabIndex`: остальное решает `Slot`. Не элемент —
+ * возвращаем как есть, ронять рендер на этом нельзя.
+ */
+function disableChild(children: ReactNode): ReactNode {
+  return isValidElement<{ tabIndex?: number }>(children)
+    ? cloneElement(children, { tabIndex: -1 })
+    : children;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    children,
+    variant = "soft",
+    tone = "neutral",
+    size = "md",
+    icon,
+    iconOnly = false,
+    loading = false,
+    selected = false,
+    asChild = false,
+    className,
+    type,
+    ...rest
+  },
+  ref
+) {
+  const Comp = asChild ? Slot : "button";
+  const { disabled, ...restWithoutDisabled } = rest;
+  // Отправка выключает кнопку сама: две причины «не нажимается» — одно
+  // состояние на выходе, и вызывающему не нужно держать их синхронными.
+  const isDisabled = disabled || loading;
+  // При `asChild` выключенность выражается ролью-независимыми средствами, а
+  // сам атрибут наружу не идёт — см. докстроку пропа.
+  const passthrough = asChild
+    ? restWithoutDisabled
+    : { ...restWithoutDisabled, disabled: isDisabled };
+
+  return (
+    <Comp
+      ref={ref}
+      // Умолчание `type="button"` живёт здесь, а не в сигнатуре: у потомка при
+      // `asChild` тега `button` может не быть вовсе, и атрибут ушёл бы в
+      // разметку ссылки. Без умолчания кнопка внутри формы отправляла бы её —
+      // ровно тот дефект, ради которого умолчание и заводилось.
+      type={asChild ? type : (type ?? "button")}
+      // Кнопка-переключатель обязана сообщать состояние, а не только подпись.
+      aria-pressed={!asChild && selected ? true : undefined}
+      aria-disabled={asChild && isDisabled ? true : undefined}
+      aria-busy={loading || undefined}
+      // Вид общий с триггером меню — см. `lib/button.ts`.
+      className={cn(
+        buttonClasses({ variant, tone, size, iconOnly, selected }),
+        asChild && isDisabled && "pointer-events-none opacity-50",
+        className
+      )}
+      {...passthrough}
+      /*
+        ПОСЛЕ спреда, и ключи добавляются только когда нужны.
+
+        Выключённость при `asChild` выражалась лишь рекомендательным
+        `aria-disabled` и классом `pointer-events-none`, который гасит один
+        указатель: ссылка оставалась в обходе и срабатывала по Enter —
+        `<Button asChild loading><a href="/pay">` уводила пользователя
+        клавиатуры со страницы прямо во время отправки формы.
+
+        Атрибута `disabled` у ссылки нет, поэтому глушим активацию руками.
+        Условный спред, а не пропы со значением `undefined`: такой ключ всё
+        равно попадает в объект и затирает чужой.
+
+        ПОРЯДОК ЗДЕСЬ НИ НА ЧТО НЕ ВЛИЯЕТ, и первая версия комментария
+        утверждала обратное. При `asChild` рендерится `Slot`, а он отдаёт
+        приоритет пропам ПОТОМКА независимо от того, где стоит спред: ссылка с
+        собственным `tabIndex={0}` оставалась в обходе, сколько её ни двигай.
+        Поэтому обход снимается не здесь, а на самом потомке — см. `Slottable`
+        ниже.
+      */
+      {...(asChild && isDisabled
+        ? {
+            tabIndex: -1,
+            onKeyDown: (event: KeyboardEvent<HTMLElement>) => {
+              if (event.key === "Enter" || event.key === " ") event.preventDefault();
+            },
+          }
+        : null)}
+    >
+      {loading ? <span aria-hidden className={cn(SPINNER_BASE, SPINNER_SIZES[size])} /> : icon}
+      {/*
+        `Slottable` — не украшение, а единственный способ сохранить иконку.
+        Slot сливает пропы с ЕДИНСТВЕННЫМ потомком, и пара «иконка + ссылка»
+        уронила бы его в рантайме. Обёртка вокруг них решила бы это ценой
+        молчаливой потери: иконку пришлось бы выбросить или заставить
+        потребителя класть её внутрь ссылки руками — то есть проп `icon` при
+        `asChild` перестал бы работать, ничего об этом не сказав.
+
+        С `Slottable` мишенью становится она, а иконка остаётся соседом и
+        уезжает внутрь ссылки вместе с её собственным содержимым.
+
+        Подпись при `asChild` не заворачивается в `<span>`: заворачивать нечего,
+        содержимое принадлежит потомку. На вид это не влияет — раскладка
+        кнопки на `flex` с `gap`, а голый текст участвует в ней анонимным
+        элементом наравне со `span`.
+      */}
+      {asChild ? (
+        /*
+          У ВЫКЛЮЧЕННОЙ ссылки обход снимается на самом потомке.
+
+          `Slot` отдаёт приоритет пропам потомка, поэтому `tabIndex: -1`,
+          переданный кнопке, ссылка с собственным `tabIndex={0}` попросту
+          перебивала — и оставалась достижимой табом, хотя выглядела
+          выключённой. Клонируем потомка, чтобы решение принимал компонент, а
+          не разметка вызывающего.
+        */
+        <Slottable>{asChild && isDisabled ? disableChild(children) : children}</Slottable>
+      ) : children != null && !iconOnly ? (
+        <span>{children}</span>
+      ) : null}
+    </Comp>
+  );
+});

package/src/components/actions/ButtonGroup.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { cn } from "../../lib/cn.js";
+
+export interface ButtonGroupProps extends ComponentPropsWithRef<"div"> {
+  /** Кнопки. Обычные `Button` — своего вида группа им не навязывает. */
+  children?: ReactNode;
+  /** Направление ряда: `horizontal` — в строку, `vertical` — в столбец. По умолчанию `horizontal`. */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * Доступное имя группы.
+   *
+   * Задавать стоит там, где кнопки образуют одно решение («Вид: список,
+   * плитка»). Без имени группа остаётся просто рядом кнопок — это законно и
+   * ничего не ломает.
+   */
+  "aria-label"?: string;
+}
+
+/**
+ * Ряд кнопок, сцепленных в один блок.
+ *
+ * Скругления и рамки правит ГРУППА, а не кнопки: иначе каждая кнопка должна
+ * была бы знать, где она стоит в ряду, — то есть получить проп «я первая»,
+ * который в одиночном применении не значит ничего.
+ *
+ * Делается это селекторами по потомкам, а не классами на детях, и поэтому
+ * работает с любым содержимым: обычной кнопкой, `iconOnly`, кнопкой-ссылкой
+ * через `asChild`. Соседям срезается общая граница (`-ml-px`), чтобы двойная
+ * рамка между кнопками не читалась толще внешней.
+ *
+ * `role="group"` ставится только вместе с именем: безымянная группа — это
+ * лишнее объявление в речи скринридера, за которым не следует ничего.
+ */
+export function ButtonGroup({
+  children,
+  orientation = "horizontal",
+  className,
+  ...rest
+}: ButtonGroupProps) {
+  const horizontal = orientation === "horizontal";
+
+  return (
+    <div
+      role={rest["aria-label"] ? "group" : undefined}
+      className={cn(
+        "inline-flex",
+        horizontal ? "flex-row" : "flex-col",
+        // Внутренние углы срезаются, внешние остаются.
+        horizontal
+          ? "[&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none"
+          : "[&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
+        // Кнопка под курсором и в фокусе поднимается над соседями: иначе её
+        // рамку и кольцо фокуса перекрывает соседняя, и подсветка выглядит
+        // обрезанной с одной стороны.
+        "[&>*:focus-visible]:relative [&>*:focus-visible]:z-10 [&>*:hover]:relative [&>*:hover]:z-10",
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/actions/Chip.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { cn } from "../../lib/cn.js";
+import { TONE_TOKENS, type Size, type Tone } from "../../lib/variants.js";
+
+export interface ChipProps extends Omit<ComponentPropsWithoutRef<"button">, "children"> {
+  /** Подпись чипа. Спрятанная `iconOnly`/`mobileIconOnly`, остаётся доступным именем кнопки. */
+  children?: ReactNode;
+  /** Только `sm` и `md`: чип крупнее среднего перестаёт читаться как чип. */
+  size?: Extract<Size, "sm" | "md">;
+  /** Цвет выбранного состояния. На невыбранный чип не влияет — он всегда нейтрален. */
+  tone?: Tone;
+  /** Было `active`. Переименовано: словарь допускает только `selected`. */
+  selected?: boolean;
+  /** Иконка перед подписью. */
+  icon?: ReactNode;
+  /** Счётчик справа. Ноль отображается, `null`/`undefined` — нет. */
+  count?: number | null;
+  /** Скрыть подпись всегда, оставив иконку. */
+  iconOnly?: boolean;
+  /** Скрыть подпись только на узких экранах (< 640px). */
+  mobileIconOnly?: boolean;
+}
+
+const SIZES: Record<"sm" | "md", string> = {
+  sm: "h-7 gap-1.5 px-2.5 text-xs",
+  md: "h-8 gap-2 px-3 text-[13px]",
+};
+
+/**
+ * Фильтрующий чип — эталон variant-API дизайн-системы.
+ *
+ * Три вещи, которые отличают его от версии во фронте и которым следуют
+ * остальные примитивы:
+ *
+ * 1. Все состояния — CSS, а не React. Ни `useState`, ни обработчиков мыши:
+ *    hover, focus-visible, disabled и нажатие описаны псевдоклассами. Компонент
+ *    не перерисовывается от наведения курсора.
+ * 2. Ни одного инлайн-`style`. Только Tailwind-утилиты поверх токенов, поэтому
+ *    смена темы работает без участия JS.
+ * 3. Явный `:focus-visible`. Глобальное правило в `styles.css` его тоже даёт,
+ *    но примитив не должен зависеть от того, подключил ли потребитель базовые стили.
+ */
+export const Chip = forwardRef<HTMLButtonElement, ChipProps>(function Chip(
+  {
+    children,
+    size = "md",
+    tone = "accent",
+    selected = false,
+    icon,
+    count,
+    iconOnly = false,
+    mobileIconOnly = false,
+    className,
+    type = "button",
+    ...rest
+  },
+  ref
+) {
+  const t = TONE_TOKENS[tone];
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      // Кнопка-переключатель: скринридер должен сообщать состояние, а не только подпись.
+      aria-pressed={selected}
+      className={cn(
+        "inline-flex shrink-0 cursor-pointer items-center rounded-full border font-semibold",
+        "transition-colors",
+        "focus-visible:outline-accent-strong focus-visible:outline-2 focus-visible:outline-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        SIZES[size],
+        selected
+          ? cn(t.border, t.bg, "text-fg-0")
+          : "border-line-soft text-fg-1 hover:bg-bg-2 hover:text-fg-0 bg-transparent",
+        className
+      )}
+      {...rest}
+    >
+      {icon ? <span className="shrink-0 opacity-70">{icon}</span> : null}
+      {/*
+        Спрятанная подпись остаётся в дереве доступности, а не исчезает из
+        разметки. Раньше `iconOnly` выбрасывал `children` совсем, а
+        `mobileIconOnly` гасил их через `hidden` (`display: none`) — и то и
+        другое убирает узел из дерева, то есть кнопка остаётся БЕЗ ИМЕНИ.
+        Видно это было только аудитом: глазами иконка на месте, чип работает.
+
+        `sr-only` прячет визуально, оставляя для скринридера; `sm:not-sr-only`
+        возвращает подпись на широком экране. Один узел вместо двух — копия
+        рядом читалась бы дважды.
+      */}
+      {children != null ? (
+        <span
+          className={
+            iconOnly ? "sr-only" : mobileIconOnly ? "sr-only sm:not-sr-only sm:inline" : undefined
+          }
+        >
+          {children}
+        </span>
+      ) : null}
+      {/*
+        Счётчик отличается от подписи начертанием, а не цветом. Свой `text-fg-3`
+        здесь был фиксированным серым поверх подложки, которая меняется вместе
+        с тоном: на `accent-soft` он давал 4.26, на `warning-soft` — 3.85.
+        Наследуемый цвет проходит по определению — он тот же, что у подписи,
+        а её контраст уже проверен.
+      */}
+      {count != null ? <span className="font-mono tabular-nums">{count}</span> : null}
+    </button>
+  );
+});

package/src/components/actions/CopyButton.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import { CheckIcon, CopyIcon } from "../../icons.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { hasContent } from "../../lib/empty.js";
+import { Button, type ButtonProps } from "./Button.js";
+import { BUTTON_ICON_SIZE } from "../../lib/button.js";
+
+export interface CopyButtonProps extends Omit<
+  ButtonProps,
+  // `onCopy` вытесняется намеренно: у `<button>` он свой, буферный, и наш
+  // одноимённый проп конфликтовал бы с ним по типу.
+  "children" | "icon" | "onClick" | "value" | "onCopy"
+> {
+  /** Что скопировать. */
+  value: string;
+  /** Подпись рядом с иконкой. Без неё кнопка иконочная. */
+  children?: ReactNode;
+  /** Сколько держать состояние «скопировано», мс. */
+  resetDelay?: number;
+  /** Сообщить наружу, чем кончилось. Логи и метрики — забота потребителя. */
+  onCopy?: (ok: boolean) => void;
+}
+
+/**
+ * Кнопка «скопировать»: значение в буфер и внятный ответ пользователю.
+ *
+ * РЕЗУЛЬТАТ ОБЪЯВЛЯЕТСЯ, а не только меняет иконку. Галочка вместо иконки —
+ * сигнал для глаз; пользователь скринридера, нажав кнопку, иначе не узнает,
+ * сработала она или нет. Поэтому рядом стоит живая область, смонтированная
+ * ВСЕГДА: вставленная вместе с текстом, она объявляется ненадёжно — часть
+ * скринридеров успевает её пропустить. Тот же приём, что в `FileDropzone`.
+ *
+ * ОТКАЗ БУФЕРА — ЗАКОННЫЙ ИСХОД, а не исключение. `navigator.clipboard`
+ * отсутствует в небезопасном контексте (страница по `http`), а запись может
+ * быть запрещена разрешениями. Кнопка при этом не падает и не притворяется
+ * успешной: она говорит, что скопировать не вышло, и значение остаётся
+ * доступным для выделения руками.
+ *
+ * Таймер сбрасывается при размонтировании: иначе `setState` прилетал бы в
+ * снятый компонент после закрытия попапа, в котором кнопка стояла.
+ */
+export function CopyButton({
+  value,
+  children,
+  resetDelay = 2000,
+  onCopy,
+  className,
+  ...rest
+}: CopyButtonProps) {
+  const messages = useMessages();
+  const [state, setState] = useState<"idle" | "copied" | "failed">("idle");
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timer.current != null) clearTimeout(timer.current);
+    },
+    []
+  );
+
+  const copy = useCallback(async () => {
+    let ok = false;
+    try {
+      // `navigator.clipboard` может отсутствовать целиком — в небезопасном
+      // контексте его нет, и обращение к `writeText` упало бы на `undefined`.
+      await navigator.clipboard.writeText(value);
+      ok = true;
+    } catch {
+      ok = false;
+    }
+
+    setState(ok ? "copied" : "failed");
+    onCopy?.(ok);
+
+    if (timer.current != null) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setState("idle"), resetDelay);
+  }, [value, onCopy, resetDelay]);
+
+  const label =
+    state === "copied"
+      ? messages.copyButton.copied
+      : state === "failed"
+        ? messages.copyButton.failed
+        : messages.copyButton.copy;
+
+  const iconSize = BUTTON_ICON_SIZE[rest.size ?? "md"];
+
+  return (
+    <span className={cn("inline-flex items-center", className)}>
+      <Button
+        {...rest}
+        // Имя кнопки МЕНЯЕТСЯ вместе с состоянием: «Скопировано» на кнопке,
+        // которая ничего не скопировала, — ложь, и наоборот.
+        aria-label={hasContent(children) ? undefined : label}
+        icon={state === "copied" ? <CheckIcon size={iconSize} /> : <CopyIcon size={iconSize} />}
+        iconOnly={!hasContent(children)}
+        tone={state === "failed" ? "danger" : rest.tone}
+        onClick={() => void copy()}
+      >
+        {children}
+      </Button>
+
+      {/* Область смонтирована всегда, подменяется только текст. */}
+      <span role="status" aria-live="polite" className="sr-only">
+        {state === "idle" ? "" : label}
+      </span>
+    </span>
+  );
+}

package/src/components/actions/Progress.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { forwardRef } from "react";
+import { ProgressBar } from "react-aria-components";
+import { cn } from "../../lib/cn.js";
+import { isShowableNumber } from "../../lib/empty.js";
+import { TONE_TOKENS, type Size, type Tone } from "../../lib/variants.js";
+
+export interface ProgressProps {
+  /**
+   * 0–100. `null` — прогресс неизвестен: бегущая полоса вместо доли.
+   *
+   * Это не то же самое, что `0`. Ноль означает «начали и пока ничего не
+   * сделали», `null` — «сколько всего работы, неизвестно». Второе бывает у
+   * запроса без длины ответа, и показывать его нулём значит врать.
+   */
+  value: number | null;
+  /** Цвет заполненной части полосы из словаря тонов. По умолчанию `accent`. */
+  tone?: Tone;
+  /** Толщина полосы: `sm` — тоньше, `md` — толще. По умолчанию `md`. */
+  size?: Extract<Size, "sm" | "md">;
+  /** Что именно идёт. Обязательно: безымянный индикатор ни о чём не сообщает. */
+  label: string;
+  /** Показать процент справа от полосы. */
+  showValue?: boolean;
+  /** Классы на корневой элемент, в который собраны полоса и процент. */
+  className?: string;
+}
+
+const HEIGHTS: Record<"sm" | "md", string> = { sm: "h-1", md: "h-1.5" };
+
+/**
+ * Полоса прогресса.
+ *
+ * `aria-valuenow` при неизвестном прогрессе ОТСУТСТВУЕТ, а не равен нулю —
+ * так ARIA отличает «полоса на нуле» от «идёт неизвестно сколько». Это делает
+ * react-aria, если не передать значение; подставить туда `0` значило бы
+ * сообщить скринридеру неправду.
+ *
+ * Когда полоса, а когда `Skeleton` или `Spinner`: полоса нужна там, где долю
+ * работы можно назвать — загрузка файла, обработка пачки. Если долю назвать
+ * нельзя, а форма будущего содержимого известна — `Skeleton`; если неизвестна и
+ * она — `Spinner`.
+ */
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(function Progress(
+  { value, tone = "accent", size = "md", label, showValue, className },
+  ref
+) {
+  const t = TONE_TOKENS[tone];
+  /*
+    `NaN` — это ТОЖЕ неизвестный прогресс, а не значение.
+
+    Проверка `value == null` его не ловила, и `?? 0` ниже тоже: `??` отвечает
+    только за null/undefined. В разметку уходило `width: NaN%` — объявление
+    невалидно, браузер его отбрасывает, и блочный div растягивался на всю
+    ширину: пользователь видел 100% у работы, которая не начиналась, а
+    скринридер читал «NaN процентов». Приходит это из обычной арифметики
+    потребителя: `loaded / total * 100` при нулевом `total`.
+  */
+  const indeterminate = !isShowableNumber(value);
+
+  return (
+    <ProgressBar
+      ref={ref}
+      // Через тот же предикат, что и `indeterminate` выше: `?? undefined` пропускает
+      // `NaN` внутрь react-aria, и спасает только то, что при неизвестном
+      // прогрессе она не читает `percentage`. Один предикат на оба места.
+      value={isShowableNumber(value) ? value : undefined}
+      isIndeterminate={indeterminate}
+      aria-label={label}
+      className={cn("flex items-center gap-2", className)}
+    >
+      {({ percentage, valueText }) => (
+        <>
+          <div
+            className={cn("bg-bg-3 relative w-full overflow-hidden rounded-full", HEIGHTS[size])}
+          >
+            <div
+              className={cn(
+                "duration-moderate h-full rounded-full transition-[width]",
+                t.dotBg,
+                // Неизвестный прогресс — бегущая треть полосы. Ширина при этом
+                // не анимируется: анимируется положение, иначе полоса дёргалась
+                // бы шириной на каждом кадре.
+                // Бегущая треть НЕ останавливается при `prefers-reduced-motion`:
+                // второе из двух исключений кита (ADR-0043, первое — `Spinner`).
+                // Когда доля неизвестна, движение полосы и есть всё сообщение —
+                // застывшая треть читается как «зависло», а не как «спокойно».
+                indeterminate && "animate-progress-indeterminate w-1/3"
+              )}
+              style={indeterminate ? undefined : { width: `${percentage ?? 0}%` }}
+            />
+          </div>
+          {showValue && (
+            <span className="text-fg-2 w-10 shrink-0 text-right text-[11px] tabular-nums">
+              {indeterminate ? "—" : valueText}
+            </span>
+          )}
+        </>
+      )}
+    </ProgressBar>
+  );
+});