VibeUI

Display

Category Usage Bars

Расход по категориям столбиком полос с общей шкалой: все дорожки нормированы на одну ёмкость, поэтому длины сравнимы между собой, а не каждая сама себе сто процентов.

  • progress
  • storage
  • breakdown
  • display

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/progress-005

Занято 299 ГБсвободно 213 ГБ
  • Видео148 ГБ
  • Фотографии96 ГБ
  • Документы34 ГБ
  • Кэш приложений21 ГБ
Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «progress-005» (Category Usage Bars) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/progress-005.json

Registry item: https://vibeui.ru/r/progress-005.json
Ставится в: components/vibeui/progress-005.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Расход по категориям столбиком полос с общей шкалой: все дорожки нормированы на одну ёмкость, поэтому длины сравнимы между собой, а не каждая сама себе сто процентов.

Расход по категориям: несколько дорожек с общей шкалой, оттенок строки считается из её имени, у каждой полосы своя роль progressbar. Ноль зависимостей, один файл, серверный рендер.

## 3. Как использовать
import { Progress005 } from "@/components/vibeui/progress-005"

<Progress005
  rows={[
    { label: "Видео", value: 148 },
    { label: "Фотографии", value: 96 },
  ]}
  capacity={512}
  unit="ГБ"
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-progress-005-* и не подменять её токенами вашей темы
- общую нормировку на capacity: доли от собственной суммы строк сделают полосы несравнимыми
- отдельный role="progressbar" на каждой дорожке — одна общая роль скроет разбивку от скринридера
- цветную метку рядом с именем: она связывает строку с её дорожкой без легенды
- моноширинные числа: иначе колонка значений пляшет при обновлении
- собственную светлую подложку карточки: без неё тёмный текст пропадает на тёмном фоне

## 6. Можно менять
- состав и значения строк через rows
- полную ёмкость через capacity
- единицу измерения через unit
- формулу оттенка в функции hue, если нужна фирменная палитра

## 7. Правила
- capacity равная нулю переводит шкалу на сумму строк: свободное место тогда всегда ноль.
- Строк больше восьми превращают карточку в частокол — сворачивайте хвост в «Прочее».
- Хеш имени иногда сводит две соседние категории к близким оттенкам: проверяйте реальный список.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/progress-005.json
https://vibeui.ru/r/progress-005.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-progress-005-*. Серверный: хуков нет. Каждая строка — grid из двух колонок (имя и число) плюс дорожка на всю ширину: числа выстраиваются в колонку без табличной разметки. Доля считается от capacity, а не от суммы строк, поэтому свободное место остаётся видимым. Оттенок строки берётся хешем из её имени — новая категория получает свой цвет сама, таблицы соответствий нет; hue передаётся строке инлайновой переменной --vibeui-progress-005-hue и подставляется в oklch. У каждой дорожки собственный role="progressbar" со шкалой в единицах ёмкости и aria-valuetext словами.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Progress005Row = {
  label: string
  value: number
}

export type Progress005Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children"
> & {
  rows?: Progress005Row[]
  /** Ёмкость, к которой считаются доли. Ноль — берём сумму строк. */
  capacity?: number
  unit?: string
}

// Идея компонента: расход по категориям читается не одной полосой, а
// столбиком полос с общей шкалой. Все дорожки нормированы на одну ёмкость,
// поэтому длины сравнимы между собой, а не каждая сама себе сто процентов.
// Оттенок каждой строки считается из её имени, поэтому список можно менять,
// не выдавая цвета руками.
const STYLES = `
:where([data-vibeui-block="progress-005"]){
--vibeui-progress-005-bg:oklch(1 0 0);
--vibeui-progress-005-fg:oklch(0.25 0.016 265);
--vibeui-progress-005-muted:oklch(0.56 0.014 265);
--vibeui-progress-005-border:oklch(0.9 0.006 265);
--vibeui-progress-005-track:oklch(0.94 0.004 265);
--vibeui-progress-005-hue:262;
--vibeui-progress-005-value:0;
--vibeui-progress-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="progress-005"]{
display:flex;flex-direction:column;gap:0.875rem;
width:100%;max-width:28rem;box-sizing:border-box;padding:1rem 1.125rem;
background:var(--vibeui-progress-005-bg);
border:1px solid var(--vibeui-progress-005-border);border-radius:1rem;
font-family:var(--vibeui-progress-005-font);color:var(--vibeui-progress-005-fg);
}
[data-vibeui-block="progress-005"] [data-part="total"]{
display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;
font-size:0.8125rem;font-weight:650;
}
[data-vibeui-block="progress-005"] [data-part="free"]{
font-weight:500;color:var(--vibeui-progress-005-muted);font-variant-numeric:tabular-nums;
}
[data-vibeui-block="progress-005"] ul{
display:flex;flex-direction:column;gap:0.625rem;margin:0;padding:0;list-style:none;
}
/* Строка: имя, значение и дорожка — сетка, чтобы числа стояли в колонку. */
[data-vibeui-block="progress-005"] li{
display:grid;grid-template-columns:1fr auto;gap:0.25rem 0.75rem;
font-size:0.75rem;
}
[data-vibeui-block="progress-005"] [data-part="name"]{
display:flex;align-items:center;gap:0.4375rem;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="progress-005"] [data-part="chip"]{
flex:none;width:0.5rem;height:0.5rem;border-radius:0.1875rem;
background:oklch(0.62 0.16 var(--vibeui-progress-005-hue));
}
[data-vibeui-block="progress-005"] [data-part="amount"]{
color:var(--vibeui-progress-005-muted);font-variant-numeric:tabular-nums;
}
[data-vibeui-block="progress-005"] [data-part="track"]{
grid-column:1 / -1;
height:0.3125rem;border-radius:9999px;overflow:hidden;
background:var(--vibeui-progress-005-track);
}
[data-vibeui-block="progress-005"] [data-part="bar"]{
height:100%;border-radius:inherit;
width:calc(var(--vibeui-progress-005-value) * 1%);
background:oklch(0.62 0.16 var(--vibeui-progress-005-hue));
transition:width .3s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="progress-005"] *{animation:none!important;transition:none!important}
}
`

const DEFAULT_ROWS: Progress005Row[] = [
  { label: "Видео", value: 148 },
  { label: "Фотографии", value: 96 },
  { label: "Документы", value: 34 },
  { label: "Кэш приложений", value: 21 },
]

function hue(name: string) {
  let hash = 2166136261

  for (const symbol of name) {
    hash ^= symbol.codePointAt(0)!
    hash = Math.imul(hash, 16777619)
  }

  return ((hash >>> 0) % 12) * 30
}

/**
 * Расход по категориям столбиком полос с общей шкалой.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Progress005({
  rows = DEFAULT_ROWS,
  capacity = 512,
  unit = "ГБ",
  className,
  style,
  ...props
}: Progress005Props) {
  const used = rows.reduce((sum, row) => sum + Math.max(0, row.value), 0)
  const scale = capacity > 0 ? capacity : used || 1

  return (
    <>
      <style href="vibeui-progress-005" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="progress-005"
        className={className}
        style={style as CSSProperties}
      >
        <div data-part="total">
          <span>
            Занято {used} {unit}
          </span>
          <span data-part="free">
            свободно {Math.max(0, scale - used)} {unit}
          </span>
        </div>
        <ul>
          {rows.map((row) => {
            const percent = Math.min(
              100,
              Math.max(0, (row.value / scale) * 100),
            )

            return (
              <li
                key={row.label}
                style={
                  {
                    "--vibeui-progress-005-hue": hue(row.label),
                    "--vibeui-progress-005-value": percent,
                  } as CSSProperties
                }
              >
                <span data-part="name">
                  <span data-part="chip" aria-hidden="true" />
                  {row.label}
                </span>
                <span data-part="amount">
                  {row.value} {unit}
                </span>
                <div
                  data-part="track"
                  role="progressbar"
                  aria-label={row.label}
                  aria-valuemin={0}
                  aria-valuemax={scale}
                  aria-valuenow={row.value}
                  aria-valuetext={`${row.label}: ${row.value} ${unit} из ${scale} ${unit}`}
                >
                  <div data-part="bar" />
                </div>
              </li>
            )
          })}
        </ul>
      </div>
    </>
  )
}