prime-ui-kit 0.3.2 → 0.4.0

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

@@ -0,0 +1,69 @@
+import { Button, Label, Tooltip } from "prime-ui-kit";
+import type * as React from "react";
+
+import styles from "./examples.module.css";
+
+function TooltipDemoItem({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className={styles.demoItem}>
+      <Label.Root size="s">{label}</Label.Root>
+      {children}
+    </div>
+  );
+}
+
+/** All four `Tooltip.Content` sizes on the same trigger button (mirrors `playground/snippets/tooltip/sizes.tsx`). */
+export default function TooltipSizesExample() {
+  return (
+    <>
+      <TooltipDemoItem label="Size s">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Hover
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content size="s">Tooltip s</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </TooltipDemoItem>
+      <TooltipDemoItem label="Size m">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Hover
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content size="m">Tooltip m</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </TooltipDemoItem>
+      <TooltipDemoItem label="Size l">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Hover
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content size="l">Tooltip l</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </TooltipDemoItem>
+      <TooltipDemoItem label="Size xl">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Hover
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content size="xl">Tooltip xl</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </TooltipDemoItem>
+    </>
+  );
+}

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

@@ -0,0 +1,57 @@
+import { Button, Label, Tooltip } from "prime-ui-kit";
+import type * as React from "react";
+
+import styles from "./examples.module.css";
+
+function Block({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className={styles.demoItem}>
+      <Label.Root size="s">{label}</Label.Root>
+      {children}
+    </div>
+  );
+}
+
+/** Default trigger, native disabled (tooltip does not open), glossary-style focus trigger (mirrors `playground/snippets/tooltip/states.tsx`). */
+export default function TooltipStatesExample() {
+  return (
+    <div className={styles.rowWrapXlJustifyCenter}>
+      <Block label="Default — hover and focus">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Save
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Send the draft to the server</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </Block>
+      <Block label="Native disabled — hover does not open">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m" disabled>
+                Unavailable
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content>This copy does not appear on native disabled hover</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </Block>
+      <Block label="Keyboard focus — unstyled term button">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <button type="button" className={styles.inlineHelpTrigger}>
+                KPI
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Key performance indicator</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </Block>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Button, Label, Tooltip } from "prime-ui-kit";
+import type { ReactNode } from "react";
+
+import styles from "./examples.module.css";
+
+function Panel({
+  label,
+  variant,
+  children,
+}: {
+  label: string;
+  variant: "default" | "raised";
+  children: ReactNode;
+}) {
+  const surfaceClass = variant === "default" ? styles.surfaceDefault : styles.surfaceRaised;
+  return (
+    <div className={`${styles.surfacePanel} ${surfaceClass}`}>
+      <Label.Root size="s">{label}</Label.Root>
+      {children}
+    </div>
+  );
+}
+
+/** Same tooltip chrome on `surface-default` vs `surface-raised` (mirrors `playground/snippets/tooltip/surfaces.tsx`). */
+export default function TooltipSurfacesExample() {
+  return (
+    <div className={styles.rowWrapMStretch}>
+      <Panel label="Surface default" variant="default">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Hover
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Tooltip on neutral page background</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </Panel>
+      <Panel label="Surface raised" variant="raised">
+        <Tooltip.Provider delayDuration={200}>
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <Button.Root type="button" variant="neutral" mode="stroke" size="m">
+                Hover
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Tooltip on a raised card surface</Tooltip.Content>
+          </Tooltip.Root>
+        </Tooltip.Provider>
+      </Panel>
+    </div>
+  );
+}

package/src/components/typography/COMPONENT.md

@@ -10,7 +10,7 @@ Styled text with **semantic reading roles** (`variant`) wired to `typography.rol
 
 - Body copy, headings, captions, and metrics where you want kit tokens instead of ad-hoc `font-size`.
 - `tone="muted"` for secondary explanations, hints, and legal lines.
-- Nested **`Typography.Root`** nodes with different `as` / `weight` inside one block (see `./examples/05-inline-emphasis.tsx`).
+- Nested **`Typography.Root`** nodes with different `as` / `weight` inside one block (see `./examples/composition.tsx`, `./examples/05-inline-emphasis.tsx`).
 - `as="h1"`–`as="h6"` for heading levels that match the theme; keep a sensible outline order on the page.
 - `as` values that are landmarks (`main`, `article`, `section`, `header`, `footer`, …) when you need both semantics and typography on the same node — otherwise wrap landmarks in normal elements and put **`Typography.Root`** inside.
 
@@ -68,15 +68,29 @@ export function Example() {
 }
 ```
 
-### Extended examples
+### Playground-aligned examples
 
-- [`./examples/01-article.tsx`](./examples/01-article.tsx) — Article sections, block quote, and footer attribution.
-- [`./examples/02-form-labels-contrast.tsx`](./examples/02-form-labels-contrast.tsx) — **`Input`** slots with **`Typography.Root`** for label, optional tag, and hint contrast.
-- [`./examples/03-marketing-hero.tsx`](./examples/03-marketing-hero.tsx) — Hero eyebrow, display title, and supporting lines.
-- [`./examples/04-reading-scale.tsx`](./examples/04-reading-scale.tsx) — Full **`variant`** ladder with English sample strings.
-- [`./examples/05-inline-emphasis.tsx`](./examples/05-inline-emphasis.tsx) — Nested spans: **`weight`**, **`tracking`**, **`tone`** on **`body-default`**.
+Order matches **`playground/sections/TypographySection.tsx`** and the runnable snippets in **`playground/snippets/typography/`**; the same scenarios ship under **`./examples/`** for `prime-ui-kit` consumers (import from **`prime-ui-kit`**).
 
-**LLM note:** Prefer the runnable files under **`./examples/*.tsx`** for full scenarios and prop combinations; this page keeps the contract (rules + API tables) authoritative.
+| Playground snippet | Package example |
+| --- | --- |
+| [`variant-catalog.tsx`](../../../playground/snippets/typography/variant-catalog.tsx) | [`./examples/variant-catalog.tsx`](./examples/variant-catalog.tsx) |
+| [`article-landmarks.tsx`](../../../playground/snippets/typography/article-landmarks.tsx) | [`./examples/01-article.tsx`](./examples/01-article.tsx) (same structure; English copy) |
+| [`reading-and-form.tsx`](../../../playground/snippets/typography/reading-and-form.tsx) | [`./examples/reading-and-form.tsx`](./examples/reading-and-form.tsx) |
+| [`variants.tsx`](../../../playground/snippets/typography/variants.tsx) | [`./examples/variants.tsx`](./examples/variants.tsx) |
+| [`states.tsx`](../../../playground/snippets/typography/states.tsx) | [`./examples/states.tsx`](./examples/states.tsx) |
+| [`composition.tsx`](../../../playground/snippets/typography/composition.tsx) | [`./examples/composition.tsx`](./examples/composition.tsx) |
+| [`full-width.tsx`](../../../playground/snippets/typography/full-width.tsx) | [`./examples/full-width.tsx`](./examples/full-width.tsx) |
+| [`as-prop.tsx`](../../../playground/snippets/typography/as-prop.tsx) | [`./examples/as-prop.tsx`](./examples/as-prop.tsx) |
+
+### Additional examples
+
+- [`./examples/02-form-labels-contrast.tsx`](./examples/02-form-labels-contrast.tsx) — **`Input`** label / optional / hint slots built with **`Typography.Root`** (richer than the playground form frame).
+- [`./examples/03-marketing-hero.tsx`](./examples/03-marketing-hero.tsx) — Hero stack: caption, display, headline, muted body.
+- [`./examples/04-reading-scale.tsx`](./examples/04-reading-scale.tsx) — Compact English ladder of every **`variant`** (no **`Divider`** captions; use **`variant-catalog`** for the full labeled catalog).
+- [`./examples/05-inline-emphasis.tsx`](./examples/05-inline-emphasis.tsx) — Nested spans on **`body-default`** (English; playground **`composition`** adds a link and `as="div"` wrapper).
+
+**LLM note:** Use **`./examples/*.tsx`** for copy-paste scenarios; **`playground/snippets/typography/*.tsx`** stay the source shown in the dev playground (`?raw`). This page keeps the contract (rules + API tables) authoritative.
 
 ## Rules
 

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

@@ -0,0 +1,25 @@
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Проп `as`: `p`, `div`, вложенный `span`. Зеркало `playground/snippets/typography/as-prop.tsx`. */
+export default function TypographyExampleAsProp() {
+  return (
+    <div className={styles.typographyScaleList}>
+      <Typography.Root as="p" variant="body-default">
+        as=&quot;p&quot; — отдельный абзац с нулевыми внешними отступами по умолчанию у компонента.
+      </Typography.Root>
+      <Typography.Root as="div" variant="body-default">
+        as=&quot;div&quot; — блочный контейнер, если нужна обёртка без семантики абзаца (например
+        внутри карточки).
+      </Typography.Root>
+      <Typography.Root as="p" variant="body-default">
+        В одной строке можно вставить{" "}
+        <Typography.Root as="span" variant="body-default" weight="semibold">
+          span с акцентом
+        </Typography.Root>{" "}
+        без нового абзаца.
+      </Typography.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/**
+ * Вложенные `Typography.Root` и ссылка внутри блока.
+ * Зеркало `playground/snippets/typography/composition.tsx`.
+ */
+export default function TypographyExampleComposition() {
+  return (
+    <div className={styles.typographyScaleList}>
+      <Typography.Root variant="body-default" as="div">
+        Сводка по заказу № 4821: статус{" "}
+        <Typography.Root as="span" variant="body-default" weight="semibold">
+          отправлен
+        </Typography.Root>
+        . Сумма{" "}
+        <Typography.Root as="span" variant="body-default" weight="medium" tracking="tight">
+          12 400 ₽
+        </Typography.Root>
+        , доставка до{" "}
+        <a href="#typography-example-composition" className={styles.inlineLinkInherit}>
+          уточнить адрес
+        </a>
+        . Подробности — в разделе «История покупок».
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/typography/examples/examples.module.css

@@ -28,3 +28,68 @@
   flex-direction: column;
   gap: var(--prime-sys-spacing-m);
 }
+
+/* Layout parity with playground/snippets/typography (PlaygroundExampleFrame preview). */
+.typographyScaleList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x4);
+}
+
+.typographyScaleRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x2);
+}
+
+.articleLandmarks {
+  display: grid;
+  gap: var(--prime-sys-spacing-x4);
+  max-width: 40rem;
+  text-align: start;
+}
+
+.articleLandmarks blockquote {
+  margin: 0;
+  padding-inline-start: var(--prime-sys-spacing-x3);
+  border-inline-start: 3px solid var(--prime-sys-color-border-subtle);
+}
+
+.readingAndForm {
+  display: grid;
+  gap: var(--prime-sys-spacing-x3);
+  max-width: 22rem;
+  text-align: start;
+}
+
+.readingAndFormFields {
+  display: grid;
+  gap: var(--prime-sys-spacing-x3);
+}
+
+.readingAndFormActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-x2);
+}
+
+.fullWidthColumns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-l);
+}
+
+.fullWidthNarrow {
+  flex: 1 1 12.5rem;
+  min-width: 0;
+  max-width: 17.5rem;
+}
+
+.fullWidthWide {
+  flex: 2 1 20rem;
+  min-width: 0;
+}
+
+.inlineLinkInherit {
+  color: inherit;
+}

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

@@ -0,0 +1,32 @@
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/**
+ * Две колонки разной ширины, одинаковые `variant` и `tone`.
+ * Зеркало `playground/snippets/typography/full-width.tsx`.
+ */
+export default function TypographyExampleFullWidth() {
+  return (
+    <div className={styles.fullWidthColumns}>
+      <div className={styles.fullWidthNarrow}>
+        <Typography.Root variant="body-small" tone="muted">
+          Узкая колонка
+        </Typography.Root>
+        <Typography.Root variant="body-default">
+          Длинное предложение в узком контейнере демонстрирует переносы и выравнивание без
+          отдельного пропа ширины.
+        </Typography.Root>
+      </div>
+      <div className={styles.fullWidthWide}>
+        <Typography.Root variant="body-small" tone="muted">
+          Широкая колонка
+        </Typography.Root>
+        <Typography.Root variant="body-default">
+          Тот же размер и стиль в более широком блоке: меньше переносов, читаемость остаётся за счёт
+          связки кегля и межстрочного интервала из токенов для `size="m"`.
+        </Typography.Root>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { Button, Input, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/**
+ * Заголовок и вводный текст — `Typography`; поля и кнопки — `Input` / `Button`.
+ * Зеркало `playground/snippets/typography/reading-and-form.tsx`.
+ */
+export default function TypographyExampleReadingAndForm() {
+  return (
+    <main className={styles.readingAndForm}>
+      <Typography.Root as="h1" variant="heading-page">
+        Заявка на доступ
+      </Typography.Root>
+      <Typography.Root as="p" variant="body-default" tone="muted">
+        Заполните форму: роли текста задаются здесь, оформление полей — компонентами формы.
+      </Typography.Root>
+      <div className={styles.readingAndFormFields}>
+        <Input.Root label="Email">
+          <Input.Wrapper>
+            <Input.Field type="email" placeholder="you@example.com" autoComplete="email" />
+          </Input.Wrapper>
+        </Input.Root>
+        <Input.Root label="Комментарий" hint="Необязательно">
+          <Input.Wrapper>
+            <Input.Field placeholder="Контекст" />
+          </Input.Wrapper>
+        </Input.Root>
+        <div className={styles.readingAndFormActions}>
+          <Button.Root type="button" variant="primary">
+            Отправить
+          </Button.Root>
+          <Button.Root type="button" variant="neutral" mode="stroke">
+            Отмена
+          </Button.Root>
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { Divider, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Курсив `italic` при том же `variant` и `weight`. Зеркало `playground/snippets/typography/states.tsx`. */
+export default function TypographyExampleStates() {
+  return (
+    <div className={styles.typographyScaleList}>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" weight="medium">
+          Заголовок карточки без курсива — обычный акцент.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          italic не задан (false)
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" weight="medium" italic>
+          Тот же размер и вес с курсивом — цитата или название научной работы.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          italic — курсив через data-атрибут и токены
+        </Divider.Root>
+      </div>
+    </div>
+  );
+}

package/src/components/typography/examples/variant-catalog.tsx

@@ -0,0 +1,107 @@
+import { Divider, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/** Каталог всех ролей `variant` из `typography.role` — зеркало `playground/snippets/typography/variant-catalog.tsx`. */
+export default function TypographyExampleVariantCatalog() {
+  return (
+    <div className={styles.typographyScaleList}>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="display" weight="medium" tracking="tight">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>display</code> · medium · tight — MD3 Display Large, герой экрана
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="headline" weight="medium" tracking="tight">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>headline</code> · medium · tight — MD3 Headline Large, промо/лид
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="heading-page" weight="medium" tracking="tight">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>heading-page</code> · medium · tight — MD3 Headline Medium, заголовок страницы
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="heading-section" weight="medium" tracking="tight">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>heading-section</code> · medium · tight — MD3 Headline Small, секция
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="heading-subsection" weight="medium">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>heading-subsection</code> · medium — MD3 Title Large, подсекция
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="heading-group" weight="medium">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>heading-group</code> · medium — MD3 Title Small, подпись группы
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-large" weight="medium" tracking="tight">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>body-large</code> · medium · tight — MD3 Body Large
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>body-default</code> · regular — MD3 Body Medium, основной текст
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-small">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>body-small</code> · regular — MD3 Body Small
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-compact" weight="medium" tracking="wide">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>body-compact</code> · medium · wide — MD3 Label Large, плотная строка (14px)
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="caption">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>caption</code> · regular — MD3 Label Medium
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="caption-micro">
+          The quick brown fox jumps over the lazy dog.
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          <code>caption-micro</code> · regular — MD3 Label Small (~11px)
+        </Divider.Root>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Divider, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const line = "Один размер `m`, разные оси оформления: `weight`, `tracking` и `tone`.";
+
+/** `weight`, крайние `tracking` и `tone` на `variant="body-default"`. Зеркало `playground/snippets/typography/variants.tsx`. */
+export default function TypographyExampleVariants() {
+  return (
+    <div className={styles.typographyScaleList}>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" weight="regular">
+          {line} (regular)
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          weight regular
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" weight="medium">
+          {line} (medium)
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          weight medium
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" weight="semibold">
+          {line} (semibold)
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          weight semibold
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" tracking="tighter">
+          {line} (tracking tighter)
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          tracking tighter
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" tracking="wide">
+          {line} (tracking wide)
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          tracking wide
+        </Divider.Root>
+      </div>
+      <div className={styles.typographyScaleRow}>
+        <Typography.Root variant="body-default" tone="muted">
+          {line} (tone muted)
+        </Typography.Root>
+        <Divider.Root variant="text" align="start">
+          tone muted — вторичный цвет текста
+        </Divider.Root>
+      </div>
+    </div>
+  );
+}