prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/reference/components/tooltip/examples/controlled-open.tsx

@@ -0,0 +1,23 @@
+/** The parent owns the open state: a switch shows the tooltip from code, hover and focus still work — `open`, `onOpenChange`. */
+import { Button, Switch, Tooltip } from "prime-ui-kit";
+import * as React from "react";
+
+export default function TooltipControlledOpenExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Switch.Root checked={open} onCheckedChange={setOpen}>
+        <Switch.Label>Показать подсказку</Switch.Label>
+      </Switch.Root>
+      <Tooltip.Root open={open} onOpenChange={setOpen}>
+        <Tooltip.Trigger>
+          <Button.Root variant="soft" tone="neutral">
+            Экспорт
+          </Button.Root>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="bottom">Выгрузка займёт около минуты</Tooltip.Content>
+      </Tooltip.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/delay.tsx

@@ -0,0 +1,25 @@
+/** The show delay of one tooltip: at once, the default 400 ms and one second — `delayDuration`. */
+import { Button, Tooltip } from "prime-ui-kit";
+
+const DELAYS = [
+  { label: "Сразу", delay: 0 },
+  { label: "400 мс", delay: 400 },
+  { label: "1 секунда", delay: 1000 },
+];
+
+export default function TooltipDelayExample() {
+  return (
+    <>
+      {DELAYS.map(({ label, delay }) => (
+        <Tooltip.Root key={label} delayDuration={delay}>
+          <Tooltip.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              {label}
+            </Button.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Черновик сохранится на сервере</Tooltip.Content>
+        </Tooltip.Root>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/disabled-trigger.tsx

@@ -0,0 +1,13 @@
+/** Why an action is unavailable: the disabled button still shows its tooltip on hover and Tab, no wrapper needed — `Tooltip.Trigger`. */
+import { Button, Tooltip } from "prime-ui-kit";
+
+export default function TooltipDisabledTriggerExample() {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <Button.Root disabled>Опубликовать</Button.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Заполните обязательные поля, чтобы опубликовать</Tooltip.Content>
+    </Tooltip.Root>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/examples.module.css

@@ -0,0 +1,20 @@
+/* Layout of the Tooltip scenarios: semantic tokens only. */
+
+/* toolbar.tsx: a raised strip of icon buttons. */
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-1);
+  padding: var(--prime-space-1);
+  border-radius: var(--prime-radius-l);
+  background: var(--prime-color-layer-nested);
+  box-shadow: var(--prime-shadow-raised);
+}
+
+/* non-interactive-trigger.tsx: the three triggers in one row. */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-4);
+}

package/dist/skill/reference/components/tooltip/examples/long-content.tsx

@@ -0,0 +1,18 @@
+/** A sentence of explanation wraps at the tooltip max width; anything with actions belongs in a Popover — `Tooltip.Content`. */
+import { Button, Tooltip } from "prime-ui-kit";
+
+export default function TooltipLongContentExample() {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Требования к паролю
+        </Button.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>
+        Не короче 12 символов, буквы разного регистра и цифры. Не используйте пароль от других
+        сервисов.
+      </Tooltip.Content>
+    </Tooltip.Root>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/non-interactive-trigger.tsx

@@ -0,0 +1,31 @@
+/** A status badge, an avatar and an information icon explain themselves: the kit makes each a tab stop, so the tooltip opens from the keyboard too — `Tooltip.Trigger`. */
+import { Avatar, Badge, Icon, Tooltip } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TooltipNonInteractiveTriggerExample() {
+  return (
+    <div className={styles.row}>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Badge.Root color="orange">Просрочен</Badge.Root>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Счёт не оплачен 12 дней, срок был 1 октября</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Avatar.Root color="blue" aria-label="Анна Соколова">
+            <Avatar.Fallback>АС</Avatar.Fallback>
+          </Avatar.Root>
+        </Tooltip.Trigger>
+        <Tooltip.Content>Анна Соколова, ответственная по заказу</Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          <Icon name="status.locked" tone="muted" label="Системный статус" />
+        </Tooltip.Trigger>
+        <Tooltip.Content>Системный статус нельзя удалить или переименовать</Tooltip.Content>
+      </Tooltip.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/overview.tsx

@@ -0,0 +1,17 @@
+/** An icon-only button with a tooltip that repeats its name on hover and keyboard focus — `Tooltip.Trigger`, `Tooltip.Content`. */
+import { Button, Icon, Tooltip } from "prime-ui-kit";
+
+export default function TooltipOverviewExample() {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        <Button.Root variant="ghost" tone="neutral" aria-label="Скопировать ссылку">
+          <Button.Icon>
+            <Icon name="action.copy" />
+          </Button.Icon>
+        </Button.Root>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Скопировать ссылку</Tooltip.Content>
+    </Tooltip.Root>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/placement.tsx

@@ -0,0 +1,30 @@
+/** Every side, and start / end alignment along the trigger; without room the chip flips and shifts, the arrow keeps pointing at the trigger — `side`, `align`. */
+import { Button, Tooltip } from "prime-ui-kit";
+
+const PLACEMENTS = [
+  { side: "top", align: "center" },
+  { side: "bottom", align: "center" },
+  { side: "left", align: "center" },
+  { side: "right", align: "center" },
+  { side: "bottom", align: "start" },
+  { side: "bottom", align: "end" },
+] as const;
+
+export default function TooltipPlacementExample() {
+  return (
+    <Tooltip.Provider>
+      {PLACEMENTS.map(({ side, align }) => (
+        <Tooltip.Root key={`${side}-${align}`}>
+          <Tooltip.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              {side} · {align}
+            </Button.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Content side={side} align={align}>
+            Выгрузка займёт около минуты
+          </Tooltip.Content>
+        </Tooltip.Root>
+      ))}
+    </Tooltip.Provider>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/sizes.tsx

@@ -0,0 +1,21 @@
+/** Every size tier next to buttons of the same tier; take the tier of the control it describes — `size`. */
+import { Button, Tooltip } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function TooltipSizesExample() {
+  return (
+    <Tooltip.Provider>
+      {SIZES.map((size) => (
+        <Tooltip.Root key={size}>
+          <Tooltip.Trigger>
+            <Button.Root variant="soft" tone="neutral" size={size}>
+              {size}
+            </Button.Root>
+          </Tooltip.Trigger>
+          <Tooltip.Content size={size}>Черновик сохранится на сервере</Tooltip.Content>
+        </Tooltip.Root>
+      ))}
+    </Tooltip.Provider>
+  );
+}

package/dist/skill/reference/components/tooltip/examples/toolbar.tsx

@@ -0,0 +1,35 @@
+/** A formatting toolbar in one group: after the first tooltip the neighbours open at once, each with its name and shortcut — `Tooltip.Provider`. */
+import { Button, Icon, Kbd, Tooltip } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const TOOLS = [
+  { icon: "format.bold", label: "Жирный", keys: "⌘B" },
+  { icon: "format.italic", label: "Курсив", keys: "⌘I" },
+  { icon: "format.underline", label: "Подчёркнутый", keys: "⌘U" },
+  { icon: "format.list", label: "Список", keys: "⌘⇧8" },
+  { icon: "format.link", label: "Ссылка", keys: "⌘K" },
+] as const;
+
+export default function TooltipToolbarExample() {
+  return (
+    <Tooltip.Provider>
+      <div className={styles.toolbar} role="toolbar" aria-label="Форматирование">
+        {TOOLS.map(({ icon, label, keys }) => (
+          <Tooltip.Root key={label}>
+            <Tooltip.Trigger>
+              <Button.Root variant="ghost" tone="neutral" size="s" aria-label={label}>
+                <Button.Icon>
+                  <Icon name={icon} />
+                </Button.Icon>
+              </Button.Root>
+            </Tooltip.Trigger>
+            <Tooltip.Content size="s" side="bottom">
+              {label} <Kbd>{keys}</Kbd>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        ))}
+      </div>
+    </Tooltip.Provider>
+  );
+}

package/dist/skill/reference/components/typography/COMPONENT.md

@@ -0,0 +1,126 @@
+# Typography
+
+**Category:** foundations
+**Kind:** primitive
+
+> Text roles of the Golos Text type scale applied to any text element, with reading-width guidance.
+
+## When to use
+- Page titles, section headings, card titles, body text, captions and inline code outside of components that style their own text.
+- Long-form reading content (articles, help pages) with semantic tags via `as`.
+- Emphasis inside running text: nested `as="span"` with another `weight`, `tracking` or `tone`.
+- Single-line names in fixed-width places (`truncate` + `title`).
+
+## When not to use
+- Field labels, hints and errors → the field's own `label` / `hint` / `error`, or [Label](../label/COMPONENT.md) and [Hint](../hint/COMPONENT.md).
+- Links → use [LinkButton](../link-button/COMPONENT.md).
+- Multi-line code → use [CodeBlock](../code-block/COMPONENT.md); keyboard keys → [Kbd](../kbd/COMPONENT.md).
+- Status labels → use [Badge](../badge/COMPONENT.md).
+- Text inside controls (Button, Tabs, Badge…) — they set their own type.
+
+## Import
+```tsx
+import { Typography } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+Typography       the element from `as` (default <p>); variant, tone, weight, tracking, italic, truncate
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Typography
+`ref` → the element. Any text element styled by one text role (`--prime-text-<role>-*`); state goes to `data-*`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `"caption" \| "body-s" \| "body-m" \| "body-l" \| "title-s" \| "title-m" \| "title-l" \| "heading-s" \| "heading-m" \| "heading-l" \| "display-s" \| "display-m" \| "display-l" \| "code"` | — (required) | Text role: size, line height, weight and tracking. |
+| `tone` | `"default" \| "secondary" \| "muted" \| "accent" \| "success" \| "warning" \| "danger"` | `"default"` | Text color by meaning; `default` is primary text. |
+| `as` | `"p" \| "span" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "small" \| "blockquote" \| "article" \| "section" \| "header" \| "footer" \| "aside" \| "nav" \| "main"` | `"p"` | The element, by the page outline; the role keeps the look. |
+| `weight` | `"regular" \| "medium" \| "semibold"` | — | Overrides the role's weight. |
+| `tracking` | `"normal" \| "tight" \| "tighter" \| "wide"` | — | Overrides the role's tracking with a `--prime-font-tracking-*` step. |
+| `italic` | `boolean` | `false` | Italic, for quotes and titles of works. |
+| `truncate` | `boolean` | `false` | One line with an ellipsis; set `title` when the full text matters. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className`, `id`, `title` and the other attributes of the element. |
+
+## Variants
+
+### variant (text role)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `display-l` · `display-m` · `display-s` | 60/68 · 48/56 · 36/44, 600 | hero numbers, promo | |
+| `heading-l` · `heading-m` · `heading-s` | 30/36 · 24/32 · 20/28, 600 | page titles and subtitles | |
+| `title-l` · `title-m` · `title-s` | 18/24 · 16/24 · 14/20, 600 | block, dialog and card titles | |
+| `body-l` · `body-m` · `body-s` | 16/24 · 14/20 · 13/20, 400 | reading text, interface text, dense secondary text | |
+| `caption` | 12/16, 400 | hints, meta, table heads | |
+| `code` | 13/20, mono | identifiers, inline code | |
+
+### tone
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `default` | primary text | most text | yes |
+| `secondary` · `muted` | the two quieter steps | descriptions, meta | |
+| `accent` · `success` · `warning` · `danger` | semantic `*-text` colors | a value with a meaning (with a word, not color alone) | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `italic` | italic | quotes, titles of works | `false` |
+| `truncate` | one line with an ellipsis | names in fixed-width cells | `false` |
+
+`weight` (`regular` · `medium` · `semibold`) and `tracking` (`normal` 0 · `tight` −0.01em · `tighter` −0.02em · `wide` +0.01em, from `--prime-font-tracking-*`) override the role.
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| role / overrides | `variant`, `weight`, `tracking`, `tone` | `data-variant`, `data-weight`, `data-tracking`, `data-tone` (not for `default`) |
+| italic / truncate | flags | `data-italic`, `data-truncate` |
+
+Text has no interactive states.
+
+## Layout & spacing
+- No outer margins: spacing comes from the parent's `gap`.
+- Title, heading and display roles balance their lines (`text-wrap-style: balance`); body and caption avoid a lone last word (`pretty`). Long words break (`overflow-wrap: break-word`).
+- `code` uses the mono family (JetBrains Mono); every other role the sans family (Golos Text).
+- Reading text: cap the column at `--prime-layout-reading-max-width` (60–75 characters).
+- `truncate` needs a block element and a shrinking parent (`min-width: 0` in flex rows).
+
+## Accessibility
+
+### Keyboard
+No keyboard interaction.
+
+### ARIA
+- The heading level comes from `as` by the page outline, the look from `variant`: never skip levels for size.
+- `tone` never carries meaning alone — name the status in words.
+- With `truncate` pass the full text in `title` when it matters.
+
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+No `labels`.
+
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A block heading, its text and a meta line, each set by a text role and a semantic tag — `variant`, `as`, `tone`. |
+| [variants.tsx](examples/variants.tsx) | Every text role from display to caption and code, then every text color on body text — `variant`, `tone`. |
+| [weights.tsx](examples/weights.tsx) | One role with its weight, tracking or italic overridden — `weight`, `tracking`, `italic`. |
+| [inline-emphasis.tsx](examples/inline-emphasis.tsx) | Values emphasized inside running text by nested spans with another weight — `as`, `weight`. |
+| [semantic-tag.tsx](examples/semantic-tag.tsx) | The tag follows the page outline and the role sets the look, so a section title can be an `h2` at title size — `as`. |
+| [truncate.tsx](examples/truncate.tsx) | A long product name clamped to one line with an ellipsis; the full text stays in the tooltip — `truncate`, `title`. |
+| [article.tsx](examples/article.tsx) | A help article from landmarks, headings and a quote at the reading width — `as`, `variant`. |
+
+## Mistakes
+- `variant="h1"` → `variant="heading-m"` (or another role) plus `as="h1"`.
+- Missing `variant` → it is required.
+- `tone="error"` → `tone="danger"`; `color="gray"` → `tone="muted"`.
+- `truncate` on an inline span in a flex row that does not shrink → use a block element and `min-width: 0`.
+- Raw `font-size` in `className` → pick a role.
+
+## Related
+- **Built from:** —
+- **See also:** [LinkButton](../link-button/COMPONENT.md), [CodeBlock](../code-block/COMPONENT.md), [Label](../label/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)

package/dist/skill/reference/components/typography/examples/article.tsx

@@ -0,0 +1,36 @@
+/** A help article from landmarks, headings and a quote at the reading width — `as`, `variant`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographyArticleExample() {
+  return (
+    <article className={styles.article}>
+      <header>
+        <Typography as="h1" variant="heading-m">
+          Как выставить счёт
+        </Typography>
+        <Typography as="p" variant="body-m" tone="secondary">
+          Счёт создаётся из заказа или вручную в разделе «Финансы».
+        </Typography>
+      </header>
+      <section aria-labelledby="article-steps">
+        <Typography id="article-steps" as="h2" variant="heading-s">
+          Из заказа
+        </Typography>
+        <Typography as="p" variant="body-m">
+          Откройте заказ, нажмите «Выставить счёт» и проверьте реквизиты покупателя. Счёт уйдёт на
+          почту из карточки клиента.
+        </Typography>
+      </section>
+      <blockquote>
+        <Typography as="p" variant="body-l">
+          Счёт без реквизитов покупателя бухгалтерия не примет.
+        </Typography>
+        <Typography as="footer" variant="caption" tone="secondary">
+          — Регламент финансового отдела
+        </Typography>
+      </blockquote>
+    </article>
+  );
+}

package/dist/skill/reference/components/typography/examples/examples.module.css

@@ -0,0 +1,41 @@
+/* Layout of the Typography scenarios: semantic tokens only. */
+
+/* A short text block at a form width. */
+.block {
+  display: grid;
+  gap: var(--prime-space-2);
+  max-width: var(--prime-modal-width-s);
+  margin: 0;
+  text-align: start;
+}
+
+/* inline-emphasis.tsx: a paragraph keeps inline flow, its spans must not become grid rows. */
+p.block {
+  display: block;
+}
+
+/* weights.tsx */
+.stack {
+  display: grid;
+  gap: var(--prime-space-3);
+  text-align: start;
+}
+
+/* article.tsx: long-form text at the reading width. */
+.article {
+  display: grid;
+  gap: var(--prime-space-4);
+  max-width: var(--prime-layout-reading-max-width);
+  text-align: start;
+}
+
+.article blockquote {
+  margin: 0;
+  padding-inline-start: var(--prime-space-3);
+  border-inline-start: var(--prime-space-1) solid var(--prime-color-fill-strong);
+}
+
+/* truncate.tsx: 240px, narrow enough to show the ellipsis. */
+.truncateBox {
+  width: min(100%, calc(var(--prime-space-24) * 2.5));
+}

package/dist/skill/reference/components/typography/examples/inline-emphasis.tsx

@@ -0,0 +1,20 @@
+/** Values emphasized inside running text by nested spans with another weight — `as`, `weight`. */
+import { LinkButton, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographyInlineEmphasisExample() {
+  return (
+    <Typography as="p" variant="body-m" className={styles.block}>
+      Заказ № 4821 —{" "}
+      <Typography as="span" variant="body-m" weight="semibold">
+        отправлен
+      </Typography>
+      , сумма{" "}
+      <Typography as="span" variant="body-m" weight="medium">
+        12 400 ₽
+      </Typography>
+      . Доставка: <LinkButton href="#address">уточнить адрес</LinkButton>.
+    </Typography>
+  );
+}

package/dist/skill/reference/components/typography/examples/overview.tsx

@@ -0,0 +1,20 @@
+/** A block heading, its text and a meta line, each set by a text role and a semantic tag — `variant`, `as`, `tone`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographyOverviewExample() {
+  return (
+    <div className={styles.block}>
+      <Typography as="h3" variant="title-m">
+        Счёт № 4821 оплачен
+      </Typography>
+      <Typography as="p" variant="body-m" tone="secondary">
+        Деньги поступили на расчётный счёт. Закрывающие документы придут на почту бухгалтерии.
+      </Typography>
+      <Typography as="span" variant="caption" tone="muted">
+        12 марта, 14:20
+      </Typography>
+    </div>
+  );
+}

package/dist/skill/reference/components/typography/examples/semantic-tag.tsx

@@ -0,0 +1,17 @@
+/** The tag follows the page outline and the role sets the look, so a section title can be an `h2` at title size — `as`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TypographySemanticTagExample() {
+  return (
+    <section className={styles.block} aria-labelledby="billing-title">
+      <Typography as="h2" id="billing-title" variant="title-s">
+        Реквизиты для оплаты
+      </Typography>
+      <Typography as="p" variant="body-m" tone="secondary">
+        ООО «Прайм», ИНН 7701234567, расчётный счёт в АО «Банк Север».
+      </Typography>
+    </section>
+  );
+}

package/dist/skill/reference/components/typography/examples/truncate.tsx

@@ -0,0 +1,19 @@
+/** A long product name clamped to one line with an ellipsis; the full text stays in the tooltip — `truncate`, `title`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const NAME = "Эргономичное кресло с подголовником и поддержкой поясницы";
+
+export default function TypographyTruncateExample() {
+  return (
+    <div className={styles.truncateBox}>
+      <Typography variant="title-s" truncate title={NAME}>
+        {NAME}
+      </Typography>
+      <Typography variant="body-s" tone="muted">
+        Артикул 48 213
+      </Typography>
+    </div>
+  );
+}

package/dist/skill/reference/components/typography/examples/variants.tsx

@@ -0,0 +1,50 @@
+/** Every text role from display to caption and code, then every text color on body text — `variant`, `tone`. */
+import { Typography, type TypographyRole } from "prime-ui-kit";
+
+const ROLES: TypographyRole[] = [
+  "display-l",
+  "display-m",
+  "display-s",
+  "heading-l",
+  "heading-m",
+  "heading-s",
+  "title-l",
+  "title-m",
+  "title-s",
+  "body-l",
+  "body-m",
+  "body-s",
+  "caption",
+  "code",
+];
+
+const TONES = ["default", "secondary", "muted", "accent", "success", "warning", "danger"] as const;
+
+export default function TypographyVariantsExample() {
+  return (
+    <>
+      {ROLES.map((variant) => (
+        <div key={variant}>
+          <div>
+            <Typography variant={variant}>Выручка за март</Typography>
+            <Typography as="span" variant="caption" tone="muted">
+              {variant}
+            </Typography>
+          </div>
+        </div>
+      ))}
+      {TONES.map((tone) => (
+        <div key={tone}>
+          <div>
+            <Typography variant="body-m" tone={tone}>
+              Оплата по счёту № 4821 получена
+            </Typography>
+            <Typography as="span" variant="caption" tone="muted">
+              body-m · {tone}
+            </Typography>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/typography/examples/weights.tsx

@@ -0,0 +1,31 @@
+/** One role with its weight, tracking or italic overridden — `weight`, `tracking`, `italic`. */
+import { Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const LINE = "Отчёт по выручке за первый квартал";
+
+export default function TypographyWeightsExample() {
+  return (
+    <div className={styles.stack}>
+      <Typography variant="body-m" weight="regular">
+        {LINE} · regular
+      </Typography>
+      <Typography variant="body-m" weight="medium">
+        {LINE} · medium
+      </Typography>
+      <Typography variant="body-m" weight="semibold">
+        {LINE} · semibold
+      </Typography>
+      <Typography variant="body-m" tracking="tighter">
+        {LINE} · tracking tighter
+      </Typography>
+      <Typography variant="body-m" tracking="wide">
+        {LINE} · tracking wide
+      </Typography>
+      <Typography variant="body-m" italic>
+        {LINE} · italic
+      </Typography>
+    </div>
+  );
+}