VibeUI

Button Group

Table Density

Плотность таблицы с живым образцом: выбранный radio меняет переменную высоты строки на корне, и три строки под группой перестраиваются без JS.

  • buttongroup
  • density
  • table
  • css-only

Превью

1440pxHost theme

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

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

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

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

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

# Установка и размещение «buttongroup-027» (Table Density) из VibeUI

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

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

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

## 2. Что это
Плотность таблицы с живым образцом: выбранный radio меняет переменную высоты строки на корне, и три строки под группой перестраиваются без JS.

Переключатель плотности таблицы с образцом строк, который перестраивается одним CSS. Ноль зависимостей, один файл, серверный компонент.

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

<Buttongroup027
  compactLabel="Плотно"
  regularLabel="Обычно"
  roomyLabel="Свободно"
  defaultValue="regular"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-buttongroup-027-* и не подменять её токенами вашей темы
- объявление переменной строки в :where(): с обычной специфичностью правила :has её не перебьют
- образец под группой: словами «плотно» и «свободно» разницу в четверть строки не объяснить
- aria-hidden на образце — он ничего не добавляет к названию плотности
- совпадение просвета в значке и в образце: расходящиеся картинки обучают неправде
- z-index у выбранного и сфокусированного сегмента при схлопнутых границах

## 6. Можно менять
- подписи вариантов через compactLabel, regularLabel и roomyLabel
- исходную плотность через defaultValue
- доступное имя группы через label
- имя поля формы через name и акцент через accent

## 7. Правила
- Вариантов ровно три: правила :has написаны по nth-of-type и на четвёртый не рассчитаны.
- Образец — три вымышленные строки: подставлять в него настоящие данные не нужно и незачем.
- Компонент не меняет вашу таблицу: значение нужно применить самому после отправки формы.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/buttongroup-027.json
https://vibeui.ru/r/buttongroup-027.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в переменных --vibeui-buttongroup-027-*. Серверный: выбор держат radio внутри fieldset. Приём — переменная --vibeui-buttongroup-027-row объявлена в :where() с нулевой специфичностью, а правила вида [data-vibeui-block]:has([data-part="segment"]:nth-of-type(2) input:checked) переопределяют её на корне; образец строк читает переменную и перестраивается сам. Значок сегмента — те же три полосы с тем же просветом, что и в образце: подпись, значок и результат говорят об одном. Образец помечен aria-hidden, потому что для скринридера он ничего не добавляет к названию плотности.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Buttongroup027Props = Omit<
  ComponentPropsWithoutRef<"fieldset">,
  "children"
> & {
  compactLabel?: string
  regularLabel?: string
  roomyLabel?: string
  defaultValue?: string
  label?: string
  name?: string
  accent?: string
}

// Идея компонента: переключатель плотности, который показывает результат
// на месте. Под сцепкой лежат три строки-образца, и высота их ячеек берётся
// из переменной --vibeui-buttongroup-027-row; выбранный radio меняет эту
// переменную на корне через :has, поэтому образец перестраивается без единой
// строки JS. Значок каждого сегмента — те же три полосы с тем же просветом,
// что и в образце: подпись, образец и значок говорят об одном.
const STYLES = `
:where([data-vibeui-block="buttongroup-027"]){
--vibeui-buttongroup-027-surface:oklch(1 0 0);
--vibeui-buttongroup-027-fg:oklch(0.25 0.016 265);
--vibeui-buttongroup-027-muted:oklch(0.57 0.014 265);
--vibeui-buttongroup-027-border:oklch(0.89 0.008 265);
--vibeui-buttongroup-027-on:oklch(0.96 0.03 215);
--vibeui-buttongroup-027-accent:oklch(0.48 0.13 215);
--vibeui-buttongroup-027-radius:0.625rem;
--vibeui-buttongroup-027-row:1.75rem;
--vibeui-buttongroup-027-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="buttongroup-027"]{
box-sizing:border-box;display:block;width:100%;max-width:22rem;
margin:0;padding:0;border:0;
font-family:var(--vibeui-buttongroup-027-font);
}
[data-vibeui-block="buttongroup-027"] *{box-sizing:border-box}
[data-vibeui-block="buttongroup-027"] legend{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
[data-vibeui-block="buttongroup-027"] [data-part="track"]{display:flex;isolation:isolate}
[data-vibeui-block="buttongroup-027"] [data-part="segment"]{
position:relative;z-index:0;flex:1 1 0;min-width:0;
display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;
height:2.375rem;padding:0 0.5rem;margin-inline-start:-1px;
border:1px solid var(--vibeui-buttongroup-027-border);
background:var(--vibeui-buttongroup-027-surface);
color:var(--vibeui-buttongroup-027-muted);
font-size:0.75rem;font-weight:650;line-height:1;white-space:nowrap;cursor:pointer;
transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
[data-vibeui-block="buttongroup-027"] [data-part="segment"]:first-child{
margin-inline-start:0;
border-start-start-radius:var(--vibeui-buttongroup-027-radius);
border-end-start-radius:var(--vibeui-buttongroup-027-radius);
}
[data-vibeui-block="buttongroup-027"] [data-part="segment"]:last-child{
border-start-end-radius:var(--vibeui-buttongroup-027-radius);
border-end-end-radius:var(--vibeui-buttongroup-027-radius);
}
[data-vibeui-block="buttongroup-027"] input{
position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
[data-vibeui-block="buttongroup-027"] [data-part="glyph"]{
display:flex;flex-direction:column;justify-content:center;
width:0.9375rem;height:0.9375rem;flex:none;
}
[data-vibeui-block="buttongroup-027"] [data-part="glyph"] i{
display:block;height:2px;border-radius:1px;background:currentColor;
}
[data-vibeui-block="buttongroup-027"] [data-density="compact"] i + i{margin-top:1px}
[data-vibeui-block="buttongroup-027"] [data-density="regular"] i + i{margin-top:3px}
[data-vibeui-block="buttongroup-027"] [data-density="roomy"] i + i{margin-top:5px}
[data-vibeui-block="buttongroup-027"] [data-part="segment"]:hover{color:var(--vibeui-buttongroup-027-fg)}
[data-vibeui-block="buttongroup-027"] [data-part="segment"]:has(input:checked){
z-index:1;
background:var(--vibeui-buttongroup-027-on);
border-color:var(--vibeui-buttongroup-027-accent);
color:var(--vibeui-buttongroup-027-accent);
}
[data-vibeui-block="buttongroup-027"] [data-part="segment"]:has(input:focus-visible){
z-index:2;outline:2px solid var(--vibeui-buttongroup-027-accent);outline-offset:1px;
}
/* Выбор меняет переменную на корне — образец перестраивается сам. */
[data-vibeui-block="buttongroup-027"]:has([data-part="segment"]:nth-of-type(1) input:checked){--vibeui-buttongroup-027-row:1.375rem}
[data-vibeui-block="buttongroup-027"]:has([data-part="segment"]:nth-of-type(2) input:checked){--vibeui-buttongroup-027-row:1.875rem}
[data-vibeui-block="buttongroup-027"]:has([data-part="segment"]:nth-of-type(3) input:checked){--vibeui-buttongroup-027-row:2.5rem}
[data-vibeui-block="buttongroup-027"] [data-part="sample"]{
margin-top:0.625rem;padding:0 0.75rem;
border:1px solid var(--vibeui-buttongroup-027-border);
border-radius:var(--vibeui-buttongroup-027-radius);
background:var(--vibeui-buttongroup-027-surface);
}
[data-vibeui-block="buttongroup-027"] [data-part="line"]{
display:flex;align-items:center;gap:0.5rem;
height:var(--vibeui-buttongroup-027-row);
color:var(--vibeui-buttongroup-027-muted);
font-size:0.75rem;line-height:1;
transition:height .2s ease;
}
[data-vibeui-block="buttongroup-027"] [data-part="line"] + [data-part="line"]{
border-top:1px solid oklch(0.94 0.005 265);
}
[data-vibeui-block="buttongroup-027"] [data-part="line"] span:first-child{
flex:1 1 auto;color:var(--vibeui-buttongroup-027-fg);font-weight:600;
}
[data-vibeui-block="buttongroup-027"] [data-part="line"] span:last-child{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="buttongroup-027"] *{animation:none!important;transition:none!important}}
`

const SAMPLE = [
  ["Договор № 118", "12.04"],
  ["Акт сверки", "09.04"],
  ["Счёт на оплату", "02.04"],
]

/**
 * Плотность таблицы с живым образцом строк под сцепкой, без JS.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Buttongroup027({
  compactLabel = "Плотно",
  regularLabel = "Обычно",
  roomyLabel = "Свободно",
  defaultValue = "regular",
  label = "Плотность таблицы",
  name = "buttongroup-027",
  accent,
  className,
  style,
  ...props
}: Buttongroup027Props) {
  const options = [
    { id: "compact", label: compactLabel },
    { id: "regular", label: regularLabel },
    { id: "roomy", label: roomyLabel },
  ]

  const palette = {
    ...(accent ? { "--vibeui-buttongroup-027-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-buttongroup-027" precedence="medium">
        {STYLES}
      </style>
      <fieldset
        {...props}
        data-vibeui-block="buttongroup-027"
        className={className}
        style={palette}
      >
        <legend>{label}</legend>
        <div data-part="track">
          {options.map((option) => (
            <label key={option.id} data-part="segment">
              <input
                type="radio"
                name={name}
                value={option.id}
                defaultChecked={option.id === defaultValue}
              />
              <span
                data-part="glyph"
                data-density={option.id}
                aria-hidden="true"
              >
                <i />
                <i />
                <i />
              </span>
              <span>{option.label}</span>
            </label>
          ))}
        </div>
        <div data-part="sample" aria-hidden="true">
          {SAMPLE.map(([title, date]) => (
            <div key={title} data-part="line">
              <span>{title}</span>
              <span>{date}</span>
            </div>
          ))}
        </div>
      </fieldset>
    </>
  )
}