prime-ui-kit 0.10.0 → 0.11.1

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

@@ -0,0 +1,218 @@
+# Card
+
+**Category:** data-display
+**Kind:** composite
+
+> A filled surface block with structural templates for metrics, charts, lists, calls to action and covers.
+
+## When to use
+- KPI tiles on a dashboard (`mini`, `stat-trend`, `split`).
+- A chart or text widget with a header and controls (`panel`).
+- A settings or profile form grouped on its own surface (`panel` + `Body` + `Footer`).
+- An activity list (`list`), a call to action (`cta`), a tile with an image on top (`cover`).
+- A tile that is itself the way to its details — a KPI that opens its report, a project tile (`asChild` with a link or a button).
+
+## When not to use
+- A whole page region with a title and description → [PageContent](../page-content/COMPONENT.md) sections; do not wrap every section in a card.
+- Tabular data → use [DataTable](../data-table/COMPONENT.md) (it has its own fill).
+- A message about the page state → [Banner](../banner/COMPONENT.md); nothing to show yet → [EmptyPage](../empty-page/COMPONENT.md).
+- Content that floats over the page → [Popover](../popover/COMPONENT.md), [Modal](../modal/COMPONENT.md) or [Drawer](../drawer/COMPONENT.md).
+
+## Import
+```tsx
+import { Card } from "prime-ui-kit";
+```
+
+## Anatomy
+```
+Card.Root variant="panel"        Header(Title, Description?, …trailing) · Body · Media · Footer
+Card.Root variant="mini"         Icon · Label · Value · Meta? · Media?
+Card.Root variant="stat-trend"   Label · Value · Delta · Meta?
+                                 or Header(Badge or Icon, Value) · Description
+Card.Root variant="split"        Body(cell × 2: any element, e.g. <div> with Icon · Label · Value)
+Card.Root variant="cta"          Title · Description · Footer
+Card.Root variant="list"         Header(Title, …trailing) · List(ListItem …)
+Card.Root variant="cover"        Media · Body(Title, Description) · Footer
+Card.Root asChild                <a> or <button> (the only child) holding the parts of any template
+```
+
+## API
+
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+### Card.Root
+`ref` → `HTMLDivElement` (the `asChild` element). A surface one layer above the one around it, no border, and a size container; `variant` picks the template layout of its parts.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `"panel" \| "mini" \| "stat-trend" \| "split" \| "cta" \| "list" \| "cover"` | `"panel"` | Structural template: titled block with zones (`panel`), KPI tiles, a call to action, a list or a cover tile. |
+| `flat` | `boolean` | `false` | No raised shadow: a flat tile for dense grids. |
+| `asChild` | `boolean` | `false` | The whole card is one link or button: pass that element as the only child with the parts inside it; it gets hover, press and the focus ring. Nothing interactive may sit inside it. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `role` + `aria-labelledby` for a landmark block, and the other div attributes. |
+
+### Card.Header
+`ref` → `HTMLDivElement`. The top row: `Card.Title` first, anything after it (a control, a quiet caption) at the end. Wraps below 22rem.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Title
+`ref` → `HTMLHeadingElement`. The card heading (`<h3>`, title-s; title-m in `cta`).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `as` | `"h2" \| "h3" \| "h4"` | `"h3"` | Heading level that fits the page outline; the look does not change. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Description
+`ref` → `HTMLParagraphElement`. Secondary text (`<p>`, body-s): under the title of `cta` and `cover`, under the header of `stat-trend`; inside `Card.Header` it stacks under the title.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Body
+`ref` → `HTMLDivElement`. The padded content zone (gap 16). In `split` it is the two-cell grid: each child is a cell (stacked below 22rem); in `cover` it holds the title and the description 4 apart.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Media
+`ref` → `HTMLDivElement`. A chart, an image or a gauge: edge to edge under the header or the body in `panel`, the 128–192px cover on top in `cover`, the full-width bottom slot in `mini`. A chart SVG needs a CSS height.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Footer
+`ref` → `HTMLDivElement`. The bottom row of buttons, wrapping: right-aligned under a faint hairline in `panel` and `list`, under a full-width hairline in `cta`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Icon
+`ref` → `HTMLDivElement`. The 40px accent tile of a KPI holding one icon; it spans the label and the value rows in `mini` and a `split` cell.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Label · Card.Value · Card.Delta
+`ref` → `HTMLSpanElement`. Metric text: the label (body-s, truncates), the value (tabular, sized by the template and the card width) and the change.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Delta: color by meaning, not by sign (churn up is `danger`). |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.Meta
+`ref` → `HTMLSpanElement`. The reference line of a KPI («Лидов 120 · сделок 18»): caption, muted, tabular; under the value.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+### Card.List · Card.ListItem
+`ref` → `HTMLUListElement` / `HTMLLIElement`. The `list` template: a `<ul>` of `<li>` rows with faint hairlines between them; head it with `Card.Header`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | `children`, `className` and the other attributes of the element. |
+
+## Variants
+
+### variant (structural templates)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `panel` | no root padding; `Header` with a faint hairline, padded `Body`, edge-to-edge `Media`, right-aligned `Footer` | chart widgets, settings forms, any titled block | yes |
+| `mini` | 40px accent `Icon` tile beside the label and the title-l value; a `Media` child is a full-width bottom slot | a compact KPI tile, with a sparkline or a ProgressBar | |
+| `stat-trend` | label, large value (adapts to the card width), delta; or a `Header` (lead left, heading-m value right) + description | the main number of a dashboard row; a KPI with a qualifier badge | |
+| `split` | `Body` with two metric cells and a faint hairline; stacked below 22rem | two related metrics in one tile | |
+| `cta` | title, body-s text, `Footer` under a hairline | a call to action | |
+| `list` | `Header` with a hairline, items with faint hairlines | recent events, short lists | |
+| `cover` | 128–192px `Media` on top, title and description, `Footer` | campaign, project or product tiles | |
+
+### tone (Delta)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | `text-secondary` | a change with no good/bad meaning | yes |
+| `success` | `success-text` | the change is good | |
+| `warning` | `warning-text` | the change needs attention | |
+| `danger` | `danger-text` | the change is bad | |
+
+### Flags
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `flat` | same fill, no shadow | dense grids of tiles | `false` |
+| `asChild` | the card is the link or button it wraps: lifts on hover (raised → overlay shadow), presses, focus ring | the whole tile opens its details | `false` |
+
+## States
+| State | Driven by | DOM |
+|---|---|---|
+| template | `variant` | `data-variant` |
+| flat | `flat` | `data-flat` |
+| depth | nesting: one above the nearest surface (the page and the AppShell panel are 0) | `data-depth` (`1`–`4`, `floating-1`/`floating-2` inside a floating layer); the fill is `--prime-color-layer-current`, the shadow only at depth 1 |
+| card width | container queries | `split` stacks below 22rem, `Header` wraps below 22rem (a header control under its description), the `stat-trend` value changes at 20rem / 36rem |
+| hover | `asChild`, a fine pointer | the fill stays (a whole surface never changes its fill, foundation §8); the shadow lifts to `--prime-shadow-overlay` over `fast` |
+| press | `asChild`, `:active` | `scale(--prime-motion-press-scale)` over `fast`; reduced motion keeps it still |
+| focus | `asChild`, `:focus-visible` | the focus ring outside the card |
+
+Without `asChild` a card is static: no hover, focus or press of its own. With it: `data-interactive` on the element.
+
+## Layout & spacing
+- Grid of cards: `repeat(auto-fit, minmax(min(100%, 14rem), 1fr))`, gap `--prime-space-4`.
+- Radius `--prime-card-radius`, no border. In `panel` and `list` the `Header` is a padded zone with a faint inset hairline below; in `stat-trend` it can pair a leading Badge or icon with a compact `Card.Value`.
+- Padding `--prime-card-padding-m` (20); `Body` gap `--prime-card-gap` (16); fields inside `Body` 20 apart, one ladder step off the card.
+- Depth comes from nesting (foundation §4): on the page — the AppShell panel is the page — a card is layer 1 (white in light) with the raised whisper; inside another card it is the next layer, a flat tile. The ladder stops at layer 4.
+- Long values wrap, labels truncate; a chart SVG needs a CSS height.
+- In a `Header` the title takes the free width; a control or a caption after it sits at the end without a wrapper. A `Card.Description` in the header stacks under the title, 4 apart; the control stays at the end, centred on both lines.
+- `Card.Meta` in `stat-trend` takes the bottom of the tile (`margin-top: auto`), so tiles of one row line their meta up; in `mini` and a `split` cell it sits in the text column under the value.
+
+## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | A card with `asChild` is one stop: focus lands on the whole link or button. |
+| `Enter` | Opens the link or presses the button of a card with `asChild`. |
+
+### ARIA
+- With `asChild` the card is the link or button itself; its name is the text of its parts. Nothing interactive may sit inside it — put row actions next to the card instead.
+- `Card.Root` is a plain `<div>`; give it `role="region"` + `aria-labelledby` only when it is a landmark-worthy block.
+- `Card.Title` renders `<h3>`; directly under the page title pass `as="h2"`.
+- Decorative icons in `Card.Icon` and cover images in `Card.Media` get `aria-hidden`; controls in `Card.Header` need their own names.
+
+### 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 company settings panel: a header, fields on the surface fill and buttons in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. |
+| [variants.tsx](examples/variants.tsx) | KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change and a reference line — `variant`, `Card.Delta`, `Card.Meta`. |
+| [kpi-media.tsx](examples/kpi-media.tsx) | A KPI with a sparkline or a fill level in the bottom slot of `mini` — `Card.Media`. |
+| [panel-chart.tsx](examples/panel-chart.tsx) | A chart widget: a header with a short description and a period switch, a summary line and an edge-to-edge chart — `Card.Header`, `Card.Description`, `Card.Media`. |
+| [interactive.tsx](examples/interactive.tsx) | Whole cards as links to their reports: one tab stop each, a lift on hover, a press and the focus ring — `asChild`. |
+| [content-templates.tsx](examples/content-templates.tsx) | Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. |
+| [flat.tsx](examples/flat.tsx) | A flat tile without the raised shadow next to the default one, for dense grids — `flat`. |
+| [narrow.tsx](examples/narrow.tsx) | The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem. |
+
+## Mistakes
+- A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.
+- Wrapping every page section in a card → use PageContent sections.
+- `Card.Delta tone="success"` for every «+» → choose the tone by meaning.
+- Custom padding on a `panel` root → padding belongs to `Header` / `Body` / `Footer`.
+- A wrapper `<div>` around the label and the value of `mini` → put `Icon`, `Label`, `Value` straight into the root (or into a `split` cell); the template lays them out.
+- A chart SVG with only a `viewBox` → give it a CSS height.
+- A clickable `<div>` card with `onClick` → `asChild` with a real `<a href>` (Cmd-click, a new tab) or a `<button>`.
+- Buttons or links inside an `asChild` card → nested interactive elements; move them out of the card.
+- The reference figures written into `Card.Delta` or `Card.Label` → `Card.Meta`.
+
+## Related
+- **Built from:** —
+- **See also:** [PageContent](../page-content/COMPONENT.md), [DescriptionList](../description-list/COMPONENT.md) (record details inside a `Card.Body`), [Fieldset](../fieldset/COMPONENT.md) (groups of fields inside a settings card), [DataTable](../data-table/COMPONENT.md), [Badge](../badge/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/dist/skill/reference/components/card/examples/content-templates.tsx

@@ -0,0 +1,67 @@
+/** Content templates: a call to action, an events list and a campaign tile with a cover — `Card.Footer`, `Card.List`, `Card.Media`. */
+import { Button, Card, LinkButton, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const EVENTS = [
+  { text: "Оплачен заказ № 4821", time: "12:04" },
+  { text: "Новый отзыв на «Планшет Pro»", time: "11:47" },
+  { text: "Синхронизация складов завершена", time: "10:30" },
+];
+
+export default function CardContentTemplatesExample() {
+  return (
+    <div className={styles.grid}>
+      <Card.Root variant="cta">
+        <Card.Title>Экспорт отчёта</Card.Title>
+        <Card.Description>
+          Сводка по сегментам и метрикам за выбранный период в CSV или XLSX.
+        </Card.Description>
+        <Card.Footer>
+          <Button.Root size="s">Скачать CSV</Button.Root>
+          <Button.Root variant="ghost" tone="neutral" size="s">
+            Настроить
+          </Button.Root>
+        </Card.Footer>
+      </Card.Root>
+
+      <Card.Root variant="list">
+        <Card.Header>
+          <Card.Title>Последние события</Card.Title>
+          <LinkButton href="#" size="s">
+            Все
+          </LinkButton>
+        </Card.Header>
+        <Card.List>
+          {EVENTS.map((e) => (
+            <Card.ListItem key={e.text}>
+              <span className={styles.listRow}>
+                <Typography as="span" variant="body-m" truncate>
+                  {e.text}
+                </Typography>
+                <Typography as="span" variant="caption" tone="muted" className={styles.listMeta}>
+                  {e.time}
+                </Typography>
+              </span>
+            </Card.ListItem>
+          ))}
+        </Card.List>
+      </Card.Root>
+
+      <Card.Root variant="cover">
+        <Card.Media aria-hidden>
+          <div className={styles.cover} />
+        </Card.Media>
+        <Card.Body>
+          <Card.Title>Кампания «Осень»</Card.Title>
+          <Card.Description>Охват и клики за 7 дней</Card.Description>
+        </Card.Body>
+        <Card.Footer>
+          <Button.Root variant="outline" tone="neutral" size="s">
+            Открыть отчёт
+          </Button.Root>
+        </Card.Footer>
+      </Card.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,84 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-14) * 4)), 1fr));
+  gap: var(--prime-space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+/* Width probes for the container-query demo: 18rem and 40rem. */
+.w18 {
+  width: min(100%, calc(var(--prime-space-24) * 3));
+}
+
+.w40 {
+  width: min(100%, calc(var(--prime-space-20) * 8));
+}
+
+/* 36rem. */
+.panel {
+  width: min(100%, calc(var(--prime-space-24) * 6));
+}
+
+/* Sparkline: fixed height from tokens, stretches to the card width. */
+.spark {
+  display: block;
+  width: 100%;
+  height: var(--prime-space-10);
+  color: var(--prime-color-accent-default);
+  overflow: visible;
+}
+
+.chart {
+  display: block;
+  width: 100%;
+  /* Fixed height: a viewBox-only SVG would otherwise scale to a square of the card width. */
+  height: calc(var(--prime-space-24) * 2);
+  color: var(--prime-color-accent-default);
+}
+
+.chartFill {
+  fill: var(--prime-color-accent-soft);
+}
+
+.chartLine {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: calc(2 * var(--prime-border-width));
+  vector-effect: non-scaling-stroke;
+}
+
+.cover {
+  background: linear-gradient(
+    135deg,
+    var(--prime-color-accent-soft) 0%,
+    var(--prime-color-palette-sky-soft) 100%
+  );
+}
+
+.listRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
+.listMeta {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-5);
+}

package/dist/skill/reference/components/card/examples/flat.tsx

@@ -0,0 +1,25 @@
+/** A flat tile without the raised shadow next to the default one, for dense grids — `flat`. */
+import { Card, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function CardFlatExample() {
+  return (
+    <div className={styles.grid}>
+      <Card.Root variant="mini">
+        <Card.Icon>
+          <Icon name="field.email" strokeWidth={2} />
+        </Card.Icon>
+        <Card.Label>С тенью (по умолчанию)</Card.Label>
+        <Card.Value>42</Card.Value>
+      </Card.Root>
+      <Card.Root variant="mini" flat>
+        <Card.Icon>
+          <Icon name="field.email" strokeWidth={2} />
+        </Card.Icon>
+        <Card.Label>flat</Card.Label>
+        <Card.Value>42</Card.Value>
+      </Card.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/card/examples/interactive.tsx

@@ -0,0 +1,28 @@
+/** Whole cards as links to their reports: one tab stop each, a lift on hover, a press and the focus ring — `asChild`. */
+import { Card, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const REPORTS = [
+  { href: "#orders", icon: "object.package", label: "Заказы за неделю", value: "1 248" },
+  { href: "#invoices", icon: "object.receipt", label: "Счета к оплате", value: "37" },
+  { href: "#team", icon: "object.users", label: "Активные менеджеры", value: "18" },
+] as const;
+
+export default function CardInteractiveExample() {
+  return (
+    <div className={styles.grid}>
+      {REPORTS.map((report) => (
+        <Card.Root key={report.href} variant="mini" asChild>
+          <a href={report.href}>
+            <Card.Icon>
+              <Icon name={report.icon} />
+            </Card.Icon>
+            <Card.Label>{report.label}</Card.Label>
+            <Card.Value>{report.value}</Card.Value>
+          </a>
+        </Card.Root>
+      ))}
+    </div>
+  );
+}

package/dist/skill/reference/components/card/examples/kpi-media.tsx

@@ -0,0 +1,42 @@
+/** A KPI with a sparkline or a fill level in the bottom slot of `mini` — `Card.Media`. */
+import { Card, Icon, ProgressBar } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SPARKLINE = "M0 32 L15 28 L30 30 L45 18 L60 22 L75 12 L90 16 L105 8 L120 4";
+
+export default function CardKpiMediaExample() {
+  return (
+    <div className={styles.grid}>
+      <Card.Root variant="mini">
+        <Card.Icon>
+          <Icon name="object.activity" />
+        </Card.Icon>
+        <Card.Label>Запросы в минуту</Card.Label>
+        <Card.Value>12 840</Card.Value>
+        <Card.Media>
+          {/* The SVG stretches to the card width; CSS sets its height, not the viewBox. */}
+          <svg
+            className={styles.spark}
+            viewBox="0 0 120 40"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+          >
+            <path d={SPARKLINE} className={styles.chartLine} />
+          </svg>
+        </Card.Media>
+      </Card.Root>
+
+      <Card.Root variant="mini">
+        <Card.Icon>
+          <Icon name="object.storage" />
+        </Card.Icon>
+        <Card.Label>Хранилище</Card.Label>
+        <Card.Value>72 из 100 ГБ</Card.Value>
+        <Card.Media>
+          <ProgressBar value={72} size="s" label="Занято" showValue />
+        </Card.Media>
+      </Card.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/card/examples/narrow.tsx

@@ -0,0 +1,47 @@
+/** The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem. */
+import { Card, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const WIDTHS = [
+  { id: "narrow", className: styles.w18 },
+  { id: "wide", className: styles.w40 },
+];
+
+export default function CardNarrowExample() {
+  return (
+    <div className={styles.stack}>
+      {WIDTHS.map((width) => (
+        <div key={width.id} className={styles.stack}>
+          <div className={width.className}>
+            <Card.Root variant="split">
+              <Card.Body>
+                <div>
+                  <Card.Icon>
+                    <Icon name="object.cart" />
+                  </Card.Icon>
+                  <Card.Label>Конверсия</Card.Label>
+                  <Card.Value>3,8%</Card.Value>
+                </div>
+                <div>
+                  <Card.Icon>
+                    <Icon name="object.wallet" />
+                  </Card.Icon>
+                  <Card.Label>Средний чек</Card.Label>
+                  <Card.Value>2 450 ₽</Card.Value>
+                </div>
+              </Card.Body>
+            </Card.Root>
+          </div>
+          <div className={width.className}>
+            <Card.Root variant="stat-trend">
+              <Card.Label>Выручка</Card.Label>
+              <Card.Value>4,2 млн ₽</Card.Value>
+              <Card.Delta tone="success">+18% к прошлому месяцу</Card.Delta>
+            </Card.Root>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+/** A company settings panel: a header, fields on the surface fill and buttons in the footer — `Card.Header`, `Card.Body`, `Card.Footer`. */
+import { Button, Card, Input, Switch } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function CardOverviewExample() {
+  return (
+    <div className={styles.panel}>
+      <Card.Root variant="panel">
+        <Card.Header>
+          <Card.Title>Профиль компании</Card.Title>
+        </Card.Header>
+        <Card.Body>
+          <div className={styles.form}>
+            <Input.Root label="Название" required>
+              <Input.Wrapper>
+                <Input.Field defaultValue="ООО «Прайм»" />
+              </Input.Wrapper>
+            </Input.Root>
+            <Input.Root label="Сайт" optional hint="Покажем в счетах и письмах">
+              <Input.Wrapper>
+                <Input.Field placeholder="https://" />
+              </Input.Wrapper>
+            </Input.Root>
+            <Switch.Root defaultChecked>
+              <Switch.Label>Отправлять ежемесячный отчёт</Switch.Label>
+            </Switch.Root>
+          </div>
+        </Card.Body>
+        <Card.Footer>
+          <Button.Root variant="ghost" tone="neutral">
+            Отмена
+          </Button.Root>
+          <Button.Root>Сохранить</Button.Root>
+        </Card.Footer>
+      </Card.Root>
+    </div>
+  );
+}

package/dist/skill/reference/components/card/examples/panel-chart.tsx

@@ -0,0 +1,44 @@
+/** A chart widget: a header with a short description and a period switch, a summary line and an edge-to-edge chart — `Card.Header`, `Card.Description`, `Card.Media`. */
+import { Card, SegmentedControl, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const POINTS = [42, 48, 45, 60, 58, 72, 66, 80, 76, 88, 84, 96];
+
+/** An area chart path in a 100 × 100 box; the SVG stretches over the whole `Card.Media`. */
+const LINE = POINTS.map(
+  (value, i) => `${i === 0 ? "M" : "L"}${(i * 100) / (POINTS.length - 1)} ${100 - value}`,
+).join(" ");
+
+export default function CardPanelChartExample() {
+  return (
+    <div className={styles.panel}>
+      <Card.Root variant="panel">
+        <Card.Header>
+          <Card.Title>Выручка</Card.Title>
+          <Card.Description>Оплаченные счета, без возвратов</Card.Description>
+          <SegmentedControl.Root size="xs" defaultValue="month" aria-label="Период">
+            <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+            <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+          </SegmentedControl.Root>
+        </Card.Header>
+        <Card.Body>
+          <Typography variant="body-s" tone="secondary">
+            С начала квартала: 12,6 млн ₽, план выполнен на 84%.
+          </Typography>
+        </Card.Body>
+        <Card.Media>
+          <svg
+            className={styles.chart}
+            viewBox="0 0 100 100"
+            preserveAspectRatio="none"
+            aria-hidden="true"
+          >
+            <path className={styles.chartFill} d={`${LINE} L100 100 L0 100 Z`} />
+            <path className={styles.chartLine} d={LINE} />
+          </svg>
+        </Card.Media>
+      </Card.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+/** KPI templates: an icon tile with a value, a badge with a value in the header row, and a large value with its change and a reference line — `variant`, `Card.Delta`, `Card.Meta`. */
+import { Badge, Card, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function CardVariantsExample() {
+  return (
+    <div className={styles.grid}>
+      <Card.Root variant="mini">
+        <Card.Icon>
+          <Icon name="object.users" />
+        </Card.Icon>
+        <Card.Label>Активные сессии</Card.Label>
+        <Card.Value>1 248</Card.Value>
+      </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Header>
+          <Badge.Root color="green">SLA</Badge.Root>
+          <Card.Value>99,95%</Card.Value>
+        </Card.Header>
+        <Card.Description>Доступность API за 30 дней</Card.Description>
+      </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Label>Выручка за месяц</Card.Label>
+        <Card.Value>4,2 млн ₽</Card.Value>
+        <Card.Delta tone="success">+18% к сентябрю</Card.Delta>
+        <Card.Meta>Лидов 1 240 · сделок 186</Card.Meta>
+      </Card.Root>
+
+      <Card.Root variant="stat-trend">
+        <Card.Label>Отток</Card.Label>
+        <Card.Value>3,1%</Card.Value>
+        <Card.Delta tone="danger">+0,6 п. п. за неделю</Card.Delta>
+        <Card.Meta>Ушло 38 из 1 226 клиентов</Card.Meta>
+      </Card.Root>
+    </div>
+  );
+}