prime-ui-kit 0.9.0 → 0.9.2

package/src/components/tag/examples/states.tsx

@@ -1,19 +0,0 @@
-/** Read-only, removable and `disabled` tags. Only the remove button takes hover and focus; use `disabled` when the value cannot be changed right now. */
-import { Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TagStatesExample() {
-  return (
-    <div className={styles.tags}>
-      <Tag.Root>Только чтение</Tag.Root>
-      <Tag.Root labels={{ remove: "Убрать «Удаляемый»" }} onRemove={() => undefined}>
-        Удаляемый
-      </Tag.Root>
-      <Tag.Root disabled>Отключён</Tag.Root>
-      <Tag.Root labels={{ remove: "Убрать «Заблокирован»" }} disabled onRemove={() => undefined}>
-        Заблокирован
-      </Tag.Root>
-    </div>
-  );
-}

package/src/components/tag/examples/surfaces.tsx

@@ -1,16 +0,0 @@
-/** Plain, removable and disabled tags that stay distinguishable on canvas, card and floating layers. Use as-is on any surface. */
-import { Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TagSurfacesExample() {
-  return (
-    <div className={styles.tags}>
-      <Tag.Root>Дизайн</Tag.Root>
-      <Tag.Root labels={{ remove: "Убрать «Маркетинг»" }} onRemove={() => undefined}>
-        Маркетинг
-      </Tag.Root>
-      <Tag.Root disabled>Архив</Tag.Root>
-    </div>
-  );
-}

package/src/components/tag/examples/with-icon.tsx

@@ -1,29 +0,0 @@
-/** `Tag.Icon` puts a leading icon in the tag text color, sized to the tag tier. Use when the icon tells the value type (email, privacy, page). */
-import { Icon, Tag } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TagWithIconExample() {
-  return (
-    <div className={styles.tags}>
-      <Tag.Root>
-        <Tag.Icon>
-          <Icon name="field.email" />
-        </Tag.Icon>
-        anna@example.ru
-      </Tag.Root>
-      <Tag.Root labels={{ remove: "Убрать «Приватные»" }} onRemove={() => undefined}>
-        <Tag.Icon>
-          <Icon name="status.locked" />
-        </Tag.Icon>
-        Приватные
-      </Tag.Root>
-      <Tag.Root size="s">
-        <Tag.Icon>
-          <Icon name="nav.home" />
-        </Tag.Icon>
-        Главная
-      </Tag.Root>
-    </div>
-  );
-}

package/src/components/textarea/examples/height-and-limits.tsx

@@ -1,45 +0,0 @@
-/** `autoResize` (default) vs fixed height with native resize; a soft limit (counter only) vs a hard limit (`maxLength`). Use it to choose height and limit behaviour. */
-import { Textarea } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const LONG_TEXT = "Текст длиннее лимита в 30 символов — счётчик краснеет.";
-
-export default function TextareaHeightAndLimitsExample() {
-  const [soft, setSoft] = React.useState(LONG_TEXT);
-  const [hard, setHard] = React.useState("");
-
-  return (
-    <div className={styles.pair}>
-      <Textarea.Root
-        label="autoResize"
-        placeholder="Пишите несколько строк — поле растёт"
-        hint="Высота следует за текстом, минимум три строки."
-      />
-      <Textarea.Root
-        label="autoResize={false}"
-        autoResize={false}
-        rows={4}
-        placeholder="Тяните угол"
-        hint="Фиксированная высота и нативный resize."
-      />
-      <Textarea.Root
-        label="Мягкий лимит"
-        value={soft}
-        onValueChange={setSoft}
-        hint="Ввод не блокируется, счётчик показывает переполнение."
-        counter={<Textarea.Counter current={soft.length} max={30} />}
-      />
-      <Textarea.Root
-        label="Жёсткий лимит"
-        value={hard}
-        maxLength={80}
-        onValueChange={setHard}
-        placeholder="Не больше 80 символов"
-        hint="maxLength не даёт ввести лишнее."
-        counter={<Textarea.Counter current={hard.length} max={80} />}
-      />
-    </div>
-  );
-}

package/src/components/textarea/examples/hint-and-error.tsx

@@ -1,21 +0,0 @@
-/** Hint under the field and an error that replaces it; a non-empty `error` implies `invalid`. Use it for validation messages. */
-import { Textarea } from "prime-ui-kit";
-import styles from "./examples.module.css";
-
-export default function TextareaHintAndErrorExample() {
-  return (
-    <div className={styles.pair}>
-      <Textarea.Root
-        label="Описание"
-        placeholder="Расскажите о товаре"
-        hint="Покупатели видят первые две строки."
-      />
-      <Textarea.Root
-        label="Описание"
-        defaultValue="Ок"
-        hint="Покупатели видят первые две строки."
-        error="Добавьте хотя бы 20 символов."
-      />
-    </div>
-  );
-}

package/src/components/textarea/examples/reserved-support-row.tsx

@@ -1,37 +0,0 @@
-/** `reserveSupportRow` keeps space for the error, so the block below does not jump. Use it for fields validated on the fly. */
-import { Switch, Textarea, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function TextareaReservedSupportRowExample() {
-  const [showError, setShowError] = React.useState(false);
-  const error = showError ? "Слишком коротко." : undefined;
-
-  return (
-    <div className={styles.column}>
-      <Switch.Root checked={showError} onCheckedChange={setShowError}>
-        <Switch.Label>Показать ошибку</Switch.Label>
-      </Switch.Root>
-      <div className={styles.pair}>
-        <div className={styles.cell}>
-          <Textarea.Root label="Без резерва" placeholder="Комментарий" error={error} />
-          <Typography.Root variant="caption" tone="secondary" className={styles.marker}>
-            Этот блок сдвигается
-          </Typography.Root>
-        </div>
-        <div className={styles.cell}>
-          <Textarea.Root
-            label="reserveSupportRow"
-            reserveSupportRow
-            placeholder="Комментарий"
-            error={error}
-          />
-          <Typography.Root variant="caption" tone="secondary" className={styles.marker}>
-            Этот блок на месте
-          </Typography.Root>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/textarea/examples/surfaces.tsx

@@ -1,11 +0,0 @@
-/** A field whose fill follows the surface: white on the canvas, gray inside Card, Modal or Popover. Drop it into any surface without overriding the background. */
-import { Textarea } from "prime-ui-kit";
-import styles from "./examples.module.css";
-
-export default function TextareaSurfacesExample() {
-  return (
-    <div className={styles.surfaceField}>
-      <Textarea.Root label="Заметка" placeholder="Текст заметки" hint="Видна всей команде." />
-    </div>
-  );
-}

package/src/components/textarea/examples/with-label.tsx

@@ -1,22 +0,0 @@
-/** Label row: `required` asterisk, `optional` marker with a custom `labels.optional`, and `aria-label` when there is no visible label. Use it to mark fields consistently. */
-import { Textarea } from "prime-ui-kit";
-import styles from "./examples.module.css";
-
-export default function TextareaWithLabelExample() {
-  return (
-    <div className={styles.column}>
-      <Textarea.Root label="Описание задачи" required placeholder="Что нужно сделать" />
-      <Textarea.Root label="Комментарий" optional placeholder="Пожелания к исполнителю" />
-      <Textarea.Root
-        label="Заметка"
-        optional
-        labels={{ optional: "видно только вам" }}
-        placeholder="Личная заметка к задаче"
-      />
-      <Textarea.Root
-        aria-label="Ответ в треде"
-        placeholder="Без видимой подписи — нужен aria-label"
-      />
-    </div>
-  );
-}

package/src/components/timeline/examples/hover-highlight.tsx

@@ -1,48 +0,0 @@
-/** `highlight="hover"`: no persistent selection, the row under the pointer or with keyboard focus gets the pill, accent title and dot; rows are links via `href`. Use for feeds where each row opens a page. */
-
-import { Timeline } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const events = [
-  {
-    id: "rent-ivan",
-    title: "Аренда закончилась · Иван К.",
-    date: "21.09.26",
-    ago: "15 д. назад",
-    value: "+6 300 ฿",
-  },
-  { id: "oil", title: "ТО: замена масла", date: "10.09.26", ago: "26 д. назад", value: "−689 ฿" },
-  {
-    id: "rent-sergey",
-    title: "Аренда закончилась · Сергей М.",
-    date: "04.09.26",
-    ago: "32 д. назад",
-    value: "+13 500 ฿",
-  },
-  {
-    id: "wash",
-    title: "Мойка и химчистка салона",
-    date: "01.09.26",
-    ago: "36 д. назад",
-    value: "−450 ฿",
-  },
-];
-
-export default function TimelineHoverHighlightExample() {
-  return (
-    <Timeline.Root highlight="hover" className={styles.feed}>
-      <Timeline.Group label="Операции">
-        {events.map((event) => (
-          <Timeline.Item key={event.id} href={`#${event.id}`}>
-            <Timeline.Title>{event.title}</Timeline.Title>
-            <Timeline.Meta>
-              <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary> · {event.ago}
-            </Timeline.Meta>
-            <Timeline.Value>{event.value}</Timeline.Value>
-          </Timeline.Item>
-        ))}
-      </Timeline.Group>
-    </Timeline.Root>
-  );
-}

package/src/components/timeline/examples/in-card.tsx

@@ -1,48 +0,0 @@
-/** A feed inside `Card.Body` (the card owns the padding) with two groups and dot hues via `color`. Use for activity widgets on dashboards. */
-
-import { Card, Timeline } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TimelineInCardExample() {
-  return (
-    <Card.Root className={styles.card}>
-      <Card.Body>
-        <Timeline.Root>
-          <Timeline.Group label="Сегодня">
-            <Timeline.Item color="green">
-              <Timeline.Title>Оплата получена · Иван К.</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>07.10.26</Timeline.MetaPrimary> · 2 ч. назад
-              </Timeline.Meta>
-              <Timeline.Value>+6 300 ฿</Timeline.Value>
-            </Timeline.Item>
-            <Timeline.Item color="orange" active>
-              <Timeline.Title>Штраф за парковку</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>07.10.26</Timeline.MetaPrimary> · 5 ч. назад
-              </Timeline.Meta>
-              <Timeline.Value>−1 000 ฿</Timeline.Value>
-            </Timeline.Item>
-          </Timeline.Group>
-          <Timeline.Group label="Ранее">
-            <Timeline.Item>
-              <Timeline.Title>Аренда закончилась · Сергей М.</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>04.09.26</Timeline.MetaPrimary> · 32 д. назад
-              </Timeline.Meta>
-              <Timeline.Value>+13 500 ฿</Timeline.Value>
-            </Timeline.Item>
-            <Timeline.Item color="purple">
-              <Timeline.Title>Мойка и химчистка салона</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>01.09.26</Timeline.MetaPrimary> · 36 д. назад
-              </Timeline.Meta>
-              <Timeline.Value>−450 ฿</Timeline.Value>
-            </Timeline.Item>
-          </Timeline.Group>
-        </Timeline.Root>
-      </Card.Body>
-    </Card.Root>
-  );
-}

package/src/components/timeline/examples/selectable.tsx

@@ -1,58 +0,0 @@
-/** Rows with `onClick` become buttons (one Tab stop each, `fill-subtle` hover, inset focus ring); the `active` row keeps the highlight; `tone` colors the dot and the amount. Use when a row selects a detail view. */
-
-import { Timeline } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const events = [
-  {
-    id: "rent-ivan",
-    title: "Аренда закончилась · Иван К.",
-    date: "21.09.26",
-    ago: "15 д. назад",
-    value: "+6 300 ฿",
-    tone: "success" as const,
-  },
-  {
-    id: "oil",
-    title: "ТО: замена масла",
-    date: "10.09.26",
-    ago: "26 д. назад",
-    value: "−689 ฿",
-    tone: "danger" as const,
-  },
-  {
-    id: "rent-sergey",
-    title: "Аренда закончилась · Сергей М.",
-    date: "04.09.26",
-    ago: "32 д. назад",
-    value: "+13 500 ฿",
-    tone: "success" as const,
-  },
-];
-
-export default function TimelineSelectableExample() {
-  const [selected, setSelected] = React.useState("oil");
-
-  return (
-    <Timeline.Root highlight="selected" className={styles.feed}>
-      <Timeline.Group label="Операции">
-        {events.map((event) => (
-          <Timeline.Item
-            key={event.id}
-            tone={event.tone}
-            active={selected === event.id}
-            onClick={() => setSelected(event.id)}
-          >
-            <Timeline.Title>{event.title}</Timeline.Title>
-            <Timeline.Meta>
-              <strong>{event.date}</strong> · {event.ago}
-            </Timeline.Meta>
-            <Timeline.Value tone={event.tone}>{event.value}</Timeline.Value>
-          </Timeline.Item>
-        ))}
-      </Timeline.Group>
-    </Timeline.Root>
-  );
-}

package/src/components/tooltip/examples/composition.tsx

@@ -1,37 +0,0 @@
-/** Editor toolbar of icon-only buttons: each has an `aria-label`, the tooltip repeats the name and shows the shortcut in Kbd. Use one Tooltip.Provider for a whole toolbar. */
-
-import { Bold, Italic, Link2, List, Underline } from "lucide-react";
-import { Button, Kbd, Tooltip } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const TOOLS = [
-  { icon: Bold, label: "Жирный", keys: "⌘B" },
-  { icon: Italic, label: "Курсив", keys: "⌘I" },
-  { icon: Underline, label: "Подчёркнутый", keys: "⌘U" },
-  { icon: List, label: "Список", keys: "⌘⇧8" },
-  { icon: Link2, label: "Ссылка", keys: "⌘K" },
-] as const;
-
-export default function TooltipCompositionExample() {
-  return (
-    <Tooltip.Provider delayDuration={300}>
-      <div className={styles.toolbar} role="toolbar" aria-label="Форматирование">
-        {TOOLS.map(({ icon: ToolIcon, label, keys }) => (
-          <Tooltip.Root key={label}>
-            <Tooltip.Trigger>
-              <Button.Root variant="ghost" tone="neutral" size="s" aria-label={label}>
-                <Button.Icon>
-                  <ToolIcon />
-                </Button.Icon>
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content size="s" side="bottom">
-              {label} <Kbd.Root size="xs">{keys}</Kbd.Root>
-            </Tooltip.Content>
-          </Tooltip.Root>
-        ))}
-      </div>
-    </Tooltip.Provider>
-  );
-}

package/src/components/tooltip/examples/side.tsx

@@ -1,29 +0,0 @@
-/** The four `side` values. `side` is a preference: without room the tooltip flips to the opposite side and shifts away from the viewport edge. */
-import { Button, Tooltip } from "prime-ui-kit";
-import styles from "./examples.module.css";
-
-const SIDES = [
-  { side: "top", label: "Сверху" },
-  { side: "bottom", label: "Снизу" },
-  { side: "left", label: "Слева" },
-  { side: "right", label: "Справа" },
-] as const;
-
-export default function TooltipSideExample() {
-  return (
-    <Tooltip.Provider delayDuration={200}>
-      <div className={styles.row}>
-        {SIDES.map(({ side, label }) => (
-          <Tooltip.Root key={side}>
-            <Tooltip.Trigger>
-              <Button.Root variant="soft" tone="neutral">
-                {label}
-              </Button.Root>
-            </Tooltip.Trigger>
-            <Tooltip.Content side={side}>side=&quot;{side}&quot;</Tooltip.Content>
-          </Tooltip.Root>
-        ))}
-      </div>
-    </Tooltip.Provider>
-  );
-}

package/src/components/tooltip/examples/states.tsx

@@ -1,45 +0,0 @@
-/** Hover / focus trigger, a disabled button wrapped in a focusable span, and an inline term in text. Use to explain why an action is unavailable or what a term means. */
-import { Button, Tooltip, Typography } from "prime-ui-kit";
-import styles from "./examples.module.css";
-
-export default function TooltipStatesExample() {
-  return (
-    <Tooltip.Provider delayDuration={200}>
-      <div className={styles.row}>
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            <Button.Root variant="soft" tone="neutral">
-              Наведите или Tab
-            </Button.Root>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Черновик сохранится на сервере</Tooltip.Content>
-        </Tooltip.Root>
-
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {/* biome-ignore lint/a11y/noNoninteractiveTabindex: the wrapper must be focusable to explain the disabled button */}
-            <span className={styles.disabledWrap} tabIndex={0}>
-              <Button.Root variant="soft" tone="neutral" disabled>
-                Опубликовать
-              </Button.Root>
-            </span>
-          </Tooltip.Trigger>
-          <Tooltip.Content>Заполните обязательные поля, чтобы опубликовать</Tooltip.Content>
-        </Tooltip.Root>
-
-        <Typography.Root variant="body-m" tone="secondary">
-          Конверсия{" "}
-          <Tooltip.Root>
-            <Tooltip.Trigger>
-              <button type="button" className={styles.inlineHelpTrigger}>
-                CR
-              </button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Доля посетителей, совершивших покупку</Tooltip.Content>
-          </Tooltip.Root>{" "}
-          выросла на 4%
-        </Typography.Root>
-      </div>
-    </Tooltip.Provider>
-  );
-}

package/src/components/typography/examples/as-prop.tsx

@@ -1,25 +0,0 @@
-/** The `as` prop: `p` and `div` as block wrappers, `span` as an inline fragment inside a paragraph. Use `as` to keep the right HTML element while the role sets the look. */
-import { Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TypographyAsPropExample() {
-  return (
-    <div className={styles.scaleList}>
-      <Typography.Root as="p" variant="body-m">
-        as=&quot;p&quot; — отдельный абзац с нулевыми внешними отступами по умолчанию у компонента.
-      </Typography.Root>
-      <Typography.Root as="div" variant="body-m">
-        as=&quot;div&quot; — блочный контейнер, если нужна обёртка без семантики абзаца (например
-        внутри карточки).
-      </Typography.Root>
-      <Typography.Root as="p" variant="body-m">
-        В одной строке можно вставить{" "}
-        <Typography.Root as="span" variant="body-m" weight="semibold">
-          span с акцентом
-        </Typography.Root>{" "}
-        без нового абзаца.
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/typography/examples/composition.tsx

@@ -1,23 +0,0 @@
-/** Nested `Typography.Root` spans with other `weight` / `tracking` and a LinkButton inside one paragraph. Use to emphasize values inside running text. */
-import { LinkButton, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TypographyCompositionExample() {
-  return (
-    <div className={styles.scaleList}>
-      <Typography.Root variant="body-m" as="div">
-        Сводка по заказу № 4821: статус{" "}
-        <Typography.Root as="span" variant="body-m" weight="semibold">
-          отправлен
-        </Typography.Root>
-        . Сумма{" "}
-        <Typography.Root as="span" variant="body-m" weight="medium" tracking="tight">
-          12 400 ₽
-        </Typography.Root>
-        , доставка до <LinkButton.Root href="#address">уточнить адрес</LinkButton.Root>. Подробности
-        — в разделе «История покупок».
-      </Typography.Root>
-    </div>
-  );
-}

package/src/components/typography/examples/full-width.tsx

@@ -1,29 +0,0 @@
-/** The same caption and body text in a narrow and a wide column: text takes the parent width and wraps naturally. Use to check text in multi-column layouts. */
-import { Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TypographyFullWidthExample() {
-  return (
-    <div className={styles.columns}>
-      <div className={styles.narrowColumn}>
-        <Typography.Root variant="body-s" tone="secondary">
-          Узкая колонка
-        </Typography.Root>
-        <Typography.Root variant="body-m">
-          Длинное предложение в узком контейнере демонстрирует переносы и выравнивание без
-          отдельного пропа ширины.
-        </Typography.Root>
-      </div>
-      <div className={styles.wideColumn}>
-        <Typography.Root variant="body-s" tone="secondary">
-          Широкая колонка
-        </Typography.Root>
-        <Typography.Root variant="body-m">
-          Тот же размер и стиль в более широком блоке: меньше переносов, читаемость остаётся за счёт
-          связки кегля и межстрочного интервала из токенов роли body-m.
-        </Typography.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/typography/examples/reading-and-form.tsx

@@ -1,35 +0,0 @@
-/** A page heading and intro text set with Typography above a form built from Input and Button. Use for form pages: text roles come from Typography, fields from form components. */
-import { Button, Input, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TypographyReadingAndFormExample() {
-  return (
-    <section className={styles.page} aria-labelledby="access-request-title">
-      <Typography.Root id="access-request-title" as="h1" variant="heading-m">
-        Заявка на доступ
-      </Typography.Root>
-      <Typography.Root as="p" variant="body-m" tone="secondary">
-        Заполните форму: роли текста задаются здесь, оформление полей — компонентами формы.
-      </Typography.Root>
-      <div className={styles.form}>
-        <Input.Root label="Email">
-          <Input.Wrapper>
-            <Input.Field type="email" placeholder="you@example.com" autoComplete="email" />
-          </Input.Wrapper>
-        </Input.Root>
-        <Input.Root label="Комментарий" optional>
-          <Input.Wrapper>
-            <Input.Field placeholder="Контекст" />
-          </Input.Wrapper>
-        </Input.Root>
-        <div className={styles.actions}>
-          <Button.Root type="button">Отправить</Button.Root>
-          <Button.Root variant="outline" tone="neutral" type="button">
-            Отмена
-          </Button.Root>
-        </div>
-      </div>
-    </section>
-  );
-}

package/src/components/typography/examples/states.tsx

@@ -1,23 +0,0 @@
-/** Text has no interactive states; this shows the one boolean style axis, `italic`, on the same variant and weight. Use italic for quotes and titles of works. */
-import { Divider, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function TypographyStatesExample() {
-  return (
-    <div className={styles.scaleList}>
-      <div className={styles.scaleRow}>
-        <Typography.Root variant="body-m" weight="medium">
-          Обычный текст без курсива.
-        </Typography.Root>
-        <Divider.Root align="start">italic не задан (false)</Divider.Root>
-      </div>
-      <div className={styles.scaleRow}>
-        <Typography.Root variant="body-m" weight="medium" italic>
-          Тот же размер и вес с курсивом — цитата или название научной работы.
-        </Typography.Root>
-        <Divider.Root align="start">italic — курсив через data-атрибут и токены</Divider.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/typography/examples/tones.tsx

@@ -1,34 +0,0 @@
-/** Every `tone` on the same `body-m` line: default, secondary, muted and the semantic accent / success / warning / danger text colors. Use to pick a text color by meaning. */
-import { Divider, type TextTone, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const TONES: { tone: TextTone; use: string }[] = [
-  { tone: "default", use: "основной текст" },
-  { tone: "secondary", use: "пояснения, вторичный текст" },
-  { tone: "muted", use: "мета, подписи" },
-  { tone: "accent", use: "выделенное значение" },
-  { tone: "success", use: "успешный результат" },
-  { tone: "warning", use: "предупреждение" },
-  { tone: "danger", use: "ошибка, опасное действие" },
-];
-
-export default function TypographyTonesExample() {
-  return (
-    <div className={styles.scaleList}>
-      {TONES.map(({ tone, use }) => (
-        <div key={tone} className={styles.scaleRow}>
-          <Typography.Root variant="body-m" tone={tone}>
-            Оплата по счёту № 4821 получена 12 марта.
-          </Typography.Root>
-          <Divider.Root align="start">
-            <Typography.Root as="span" variant="code" tone="muted">
-              tone="{tone}"
-            </Typography.Root>{" "}
-            — {use}
-          </Divider.Root>
-        </div>
-      ))}
-    </div>
-  );
-}