Badge

Split Counter

Счётчик из двух половин: слева новые с порогом «9+», справа общее число — пара отвечает на вопрос «двенадцать из скольких».

badge
counter
unread
threshold

Превью

1440pxHost theme

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

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

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

Новых

Порог

Показать полную инструкцию

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

# Установка и размещение «badge-022» (Split Counter) из VibeUI

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

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

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

## 2. Что это
Счётчик из двух половин: слева новые с порогом «9+», справа общее число — пара отвечает на вопрос «двенадцать из скольких».

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

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

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-badge-022-* и не подменять её токенами вашей темы
- табличные цифры и минимум ширины у обеих половин: иначе плашка прыгает при каждом обновлении
- порог только на левом числе — «9+ из 9+» не сообщает ничего
- погасшую, но не исчезнувшую левую половину при нуле: пропажа зоны меняет ширину плашки
- aria-label на всей плашке: два числа подряд в скринридере звучат как «12 48»
- собственную светлую подложку плашки: без неё тёмный текст пропадает на тёмном фоне

## 6. Можно менять
- число новых через unread
- общее число через total
- порог через max
- акцентный цвет в переменной accent

## 7. Правила
- total не может быть меньше unread: компонент подтягивает его вверх, а не показывает противоречие.
- Порог по умолчанию 9, а не 99: две зоны занимают место, и трёхзначное число разносит пилюлю.
- Формулировка aria-label жёстко на русском — переведите её при локализации, иначе скринридер смешает языки.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/badge-022.json

https://vibeui.ru/r/badge-022.json

Один файл, ноль зависимостей, палитра в локальных переменных --vibeui-badge-022-*. Серверный: хуков нет. Пилюля разделена на две зоны с общим overflow:hidden, граница между ними — левая рамка правой половины, поэтому разделитель не требует отдельного узла. Обе половины набраны табличными цифрами и имеют одинаковый минимум ширины: при пересчёте плашка не меняет габарит и не дёргает соседей. Порог применяется только к левому числу — «9+ из 48» осмысленно, а «9+ из 9+» нет. Когда новых ноль, левая половина гаснет, но остаётся: исчезающая зона меняла бы ширину. Числа помечены aria-hidden, вся плашка объявляется одной фразой через aria-label.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Badge022Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children"
> & {
  unread?: number
  total?: number
  max?: number
}

// Идея компонента: счётчик из двух половин. Слева непрочитанные с порогом
// «9+», справа общее число без порога, между ними перегородка. Одно число
// заставляет гадать — «двенадцать чего?»: пара «новые из всех» отвечает сразу
// и занимает столько же места. Когда новых нет, левая половина гаснет, но не
// исчезает — иначе плашка меняет ширину и дёргает соседей.
const STYLES = `
:where([data-vibeui-block="badge-022"]){
--vibeui-badge-022-bg:oklch(0.97 0.004 265);
--vibeui-badge-022-border:oklch(0.89 0.006 265);
--vibeui-badge-022-accent:oklch(0.53 0.19 25);
--vibeui-badge-022-muted:oklch(0.54 0.014 265);
--vibeui-badge-022-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="badge-022"]{
display:inline-flex;align-items:stretch;box-sizing:border-box;
height:1.5rem;
border:1px solid var(--vibeui-badge-022-border);border-radius:9999px;
background:var(--vibeui-badge-022-bg);
font-family:var(--vibeui-badge-022-font);font-size:0.75rem;line-height:1;
/* Табличные цифры: половины не должны переставать совпадать по ширине. */
font-variant-numeric:tabular-nums;vertical-align:middle;overflow:hidden;
}
[data-vibeui-block="badge-022"] [data-part="unread"],
[data-vibeui-block="badge-022"] [data-part="total"]{
display:inline-flex;align-items:center;justify-content:center;
min-width:1.375rem;padding:0 0.5rem;
}
[data-vibeui-block="badge-022"] [data-part="unread"]{
color:var(--vibeui-badge-022-accent);font-weight:700;
background:color-mix(in oklab,var(--vibeui-badge-022-accent) 10%,oklch(1 0 0));
}
[data-vibeui-block="badge-022"] [data-part="total"]{
color:var(--vibeui-badge-022-muted);font-weight:500;
border-left:1px solid var(--vibeui-badge-022-border);
}
/* Ноль новых: половина остаётся на месте, но перестаёт звать. */
[data-vibeui-block="badge-022"][data-empty="true"] [data-part="unread"]{
color:var(--vibeui-badge-022-muted);font-weight:500;background:transparent;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="badge-022"] *{animation:none!important;transition:none!important}}
`

/**
 * Счётчик из двух половин: новые с порогом «9+» и общее число.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Badge022({
  unread = 12,
  total = 48,
  max = 9,
  className,
  style,
  ...props
}: Badge022Props) {
  const fresh = Math.max(0, Math.round(unread))
  const all = Math.max(fresh, Math.round(total))
  const shown = fresh > max ? `${max}+` : String(fresh)

  return (
    <>
      <style href="vibeui-badge-022" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="badge-022"
        data-empty={fresh === 0}
        className={className}
        style={style as CSSProperties}
        aria-label={`${fresh} новых из ${all}`}
      >
        <span data-part="unread" aria-hidden="true">
          {shown}
        </span>
        <span data-part="total" aria-hidden="true">
          {all}
        </span>
      </span>
    </>
  )
}