prime-ui-kit 0.13.0 → 0.14.0

package/dist/skill/patterns/settings-page.tsx

@@ -78,21 +78,12 @@ export default function SettingsPagePattern() {
         </PageContent.Description>
       </PageContent.Header>
       <PageContent.Body>
-        <section className={styles.section} aria-labelledby="company-title">
-          <div className={styles.lead}>
-            <Typography as="h2" variant="title-m" id="company-title">
-              Компания
-            </Typography>
-            <Typography variant="body-m" tone="secondary">
-              Попадают в счета, акты и письма клиентам.
-            </Typography>
-          </div>
-          <form
-            className={styles.panel}
-            noValidate
-            onSubmit={save}
-            onReset={() => setInnError(undefined)}
-          >
+        <PageContent.Section
+          layout="aside"
+          label="Компания"
+          description="Попадают в счета, акты и письма клиентам."
+        >
+          <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
             <Card.Root variant="panel">
               <Card.Body>
                 <Fieldset disabled={saving}>
@@ -144,73 +135,61 @@ export default function SettingsPagePattern() {
               </Card.Footer>
             </Card.Root>
           </form>
-        </section>
+        </PageContent.Section>
 
-        <section className={styles.section} aria-labelledby="alerts-title">
-          <div className={styles.lead}>
-            <Typography as="h2" variant="title-m" id="alerts-title">
-              Уведомления
-            </Typography>
-            <Typography variant="body-m" tone="secondary">
-              Включаются сразу, без сохранения.
-            </Typography>
-          </div>
-          <div className={styles.panel}>
-            <Card.Root variant="panel">
-              <Card.Body>
-                <Fieldset aria-labelledby="alerts-title">
-                  {ALERTS.map((alert) => (
-                    <Switch.Root
-                      key={alert.name}
-                      name={alert.name}
-                      defaultChecked={alert.defaultChecked}
-                      hint={alert.hint}
-                    >
-                      <Switch.Label>{alert.label}</Switch.Label>
-                    </Switch.Root>
-                  ))}
-                </Fieldset>
-              </Card.Body>
-            </Card.Root>
-          </div>
-        </section>
-
-        <section className={styles.section} aria-labelledby="danger-title">
-          <div className={styles.lead}>
-            <Typography as="h2" variant="title-m" id="danger-title">
-              Рабочее пространство
-            </Typography>
-            <Typography variant="body-m" tone="secondary">
-              Действия, которые нельзя отменить.
-            </Typography>
-          </div>
-          <div className={styles.panel}>
-            <Card.Root variant="panel">
-              <Card.Body>
-                <div className={styles.danger}>
-                  <div className={styles.dangerText}>
-                    <Typography variant="title-s">Удалить пространство</Typography>
-                    <Typography variant="body-s" tone="secondary">
-                      Счета, клиенты и история будут удалены для всех участников.
-                    </Typography>
-                  </div>
-                  <ConfirmDialog.Root
-                    title="Удалить «Прайм Софт»?"
-                    description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
-                    confirmLabel="Удалить пространство"
-                    onConfirm={removeWorkspace}
+        <PageContent.Section
+          layout="aside"
+          label="Уведомления"
+          description="Включаются сразу, без сохранения."
+        >
+          <Card.Root variant="panel">
+            <Card.Body>
+              <Fieldset aria-label="Уведомления">
+                {ALERTS.map((alert) => (
+                  <Switch.Root
+                    key={alert.name}
+                    name={alert.name}
+                    defaultChecked={alert.defaultChecked}
+                    hint={alert.hint}
                   >
-                    <ConfirmDialog.Trigger>
-                      <Button.Root variant="outline" tone="danger">
-                        Удалить
-                      </Button.Root>
-                    </ConfirmDialog.Trigger>
-                  </ConfirmDialog.Root>
+                    <Switch.Label>{alert.label}</Switch.Label>
+                  </Switch.Root>
+                ))}
+              </Fieldset>
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+
+        <PageContent.Section
+          layout="aside"
+          label="Рабочее пространство"
+          description="Действия, которые нельзя отменить."
+        >
+          <Card.Root variant="panel">
+            <Card.Body>
+              <div className={styles.danger}>
+                <div className={styles.dangerText}>
+                  <Typography variant="title-s">Удалить пространство</Typography>
+                  <Typography variant="body-s" tone="secondary">
+                    Счета, клиенты и история будут удалены для всех участников.
+                  </Typography>
                 </div>
-              </Card.Body>
-            </Card.Root>
-          </div>
-        </section>
+                <ConfirmDialog.Root
+                  title="Удалить «Прайм Софт»?"
+                  description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
+                  confirmLabel="Удалить пространство"
+                  onConfirm={removeWorkspace}
+                >
+                  <ConfirmDialog.Trigger>
+                    <Button.Root variant="outline" tone="danger">
+                      Удалить
+                    </Button.Root>
+                  </ConfirmDialog.Trigger>
+                </ConfirmDialog.Root>
+              </div>
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
       </PageContent.Body>
     </PageContent.Root>
   );

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

@@ -67,7 +67,7 @@ Avatar.Group           overlapping row, gives its size to members
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `status` | `"online" \| "offline" \| "away" \| "busy"` | — (required) | Presence state: green, gray, warning or danger dot. |
+| `status` | `"online" \| "offline" \| "away" \| "busy"` | — (required) | Presence state, told by shape and color: `online` a full green dot, `away` a warning crescent, `busy` a danger dot with a bar, `offline` a hollow gray ring. |
 | `labels` | `Partial<AvatarStatusLabels>` | — | Accessible names of the states, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
@@ -129,7 +129,7 @@ No keyboard interaction.
 
 ### ARIA
 - `Avatar.Image` `alt`: empty when the name is written next to it, otherwise the name. Without a photo and without a name nearby, put `aria-label` on `Avatar.Root`.
-- `Avatar.Status` is `role="img"` with `aria-label` from `labels`.
+- `Avatar.Status` is `role="img"` with `aria-label` from `labels`. Every state has its own shape (full dot, crescent, dot with a bar, hollow ring), so presence never rests on color alone.
 - `Avatar.Group` is `role="group"`; give it `aria-label`. Give `Avatar.Overflow` an `aria-label` («Ещё 3 участника»).
 
 ### Labels
@@ -148,8 +148,8 @@ No keyboard interaction.
 | [overview.tsx](examples/overview.tsx) | A photo with initials underneath while it loads, and initials alone — `Avatar.Image`, `Avatar.Fallback`. |
 | [variants.tsx](examples/variants.tsx) | Every palette hue of the fallback; derive it from a stable user id — `color`. |
 | [sizes.tsx](examples/sizes.tsx) | Every diameter, 20 to 64 px; initials take 40% of it — `size`. |
-| [states.tsx](examples/states.tsx) | A loaded photo, a broken URL that falls back to initials, and an icon fallback for a guest. |
-| [presence.tsx](examples/presence.tsx) | A presence dot on the avatar edge, announced by its state name — `Avatar.Status`, `labels`. |
+| [states.tsx](examples/states.tsx) | A loaded photo, a broken URL that falls back to initials, and an icon fallback for a guest — `Avatar.Image`, `Avatar.Fallback`. |
+| [presence.tsx](examples/presence.tsx) | A presence dot on the avatar edge: each state has its own shape and color and is announced by its name — `Avatar.Status`, `labels`. |
 | [team-group.tsx](examples/team-group.tsx) | Project members as an overlapping row with a «+N» cell; the group size goes to every member — `Avatar.Group`, `Avatar.Overflow`, `size`. |
 | [src-from-state.tsx](examples/src-from-state.tsx) | A new photo source restarts loading; initials show until the new photo arrives — `src`. |
 

package/dist/skill/reference/components/avatar/examples/presence.tsx

@@ -1,4 +1,4 @@
-/** A presence dot on the avatar edge, announced by its state name — `Avatar.Status`, `labels`. */
+/** A presence dot on the avatar edge: each state has its own shape and color and is announced by its name — `Avatar.Status`, `labels`. */
 import { Avatar, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/avatar/examples/states.tsx

@@ -1,4 +1,4 @@
-/** A loaded photo, a broken URL that falls back to initials, and an icon fallback for a guest. */
+/** A loaded photo, a broken URL that falls back to initials, and an icon fallback for a guest — `Avatar.Image`, `Avatar.Fallback`. */
 import { Avatar, Icon, Typography } from "prime-ui-kit";
 
 const PHOTO = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=128&h=128&fit=crop";

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

@@ -46,7 +46,7 @@ Banner.Root                 <div>; variant, tone, size, placement
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"info"` | Semantic color of the message. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Spacing, icon and title follow the control tier; the description is one step smaller. |
 | `placement` | `"inset" \| "page"` | `"inset"` | `inset` — rounded block in the flow or in a card; `page` — edge-to-edge strip above a page, content aligned to the page column. |
-| `onDismiss` | `() => void` | — | Renders a close button (top-right, or last in `Banner.Actions`) and calls this on click; the parent unmounts the banner. |
+| `onDismiss` | `() => void` | — | Renders a close button (top-right, or last in `Banner.Actions`) and calls this on click; the parent unmounts the banner, which closes up in place, and moves focus to a sensible place. |
 | `labels` | `Partial<BannerLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `role` (`alert`, `status`, `region`), `aria-label` and the other div attributes. |
 
@@ -117,7 +117,7 @@ Banner.Root                 <div>; variant, tone, size, placement
 | dismissible | `onDismiss` | corner ghost Button (`xs`, `s` on `l` / `xl`), or the last outline Button in `Banner.Actions` |
 | narrow | own width < 36rem (a banner with `Banner.Actions` is a size container) | actions move under the text |
 
-No `open` prop: the parent mounts and unmounts the banner.
+No `open` prop: the parent mounts and unmounts the banner. A mounted banner enters (a short fade and rise); an unmounted one closes up in place, so the content below glides up instead of jumping. To swap the banner for another block in the same spot (a «restore» button), wrap both in [Crossfade](../crossfade/COMPONENT.md).
 
 ## Layout & spacing
 - `width: 100%`; text column capped at `--prime-layout-reading-max-width`.
@@ -134,7 +134,7 @@ No `open` prop: the parent mounts and unmounts the banner.
 ### ARIA
 - The banner has no role of its own: give an error after an action `role="alert"`, a calm status `role="status"`, a page strip `role="region"` with `aria-label`.
 - The icon is `aria-hidden`: the title carries the meaning, not the color.
-- The close button is named by `labels.dismiss`; after dismissing, move focus somewhere sensible.
+- The close button is named by `labels.dismiss`. It leaves with the banner, so after dismissing the parent moves focus to a sensible place: the control that takes the banner's spot, or the next heading or action of the section (see `dismissible.tsx`).
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -150,9 +150,9 @@ No `open` prop: the parent mounts and unmounts the banner.
 | [variants.tsx](examples/variants.tsx) | Every treatment on every tone: soft by default, solid for urgent, outline for calm — `variant`, `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier: padding, icon and title follow the control tier, the description is one step smaller — `size`. |
 | [structure.tsx](examples/structure.tsx) | Optional parts: a one-line title, a title with a description, and actions where the close button joins the row — `Banner.Description`, `Banner.Actions`, `onDismiss`. |
-| [dismissible.tsx](examples/dismissible.tsx) | The parent owns visibility: the close button calls back and the parent unmounts the banner; the button name comes from labels — `onDismiss`, `labels`. |
+| [dismissible.tsx](examples/dismissible.tsx) | The parent owns visibility: the close button calls back, the banner closes up and focus moves to the restore button; the button name comes from labels — `onDismiss`, `labels`. |
 | [page-strip.tsx](examples/page-strip.tsx) | An edge-to-edge strip above a page and a rounded block inside a card — `placement`. |
-| [narrow.tsx](examples/narrow.tsx) | Below 36rem of its own width the banner moves the actions under the text. |
+| [narrow.tsx](examples/narrow.tsx) | Below 36rem of its own width the banner moves the actions under the text — `Banner.Actions`. |
 
 ## Mistakes
 - A hand-made × next to the banner → pass `onDismiss`.
@@ -162,4 +162,4 @@ No `open` prop: the parent mounts and unmounts the banner.
 
 ## Related
 - **Built from:** [Button](../button/COMPONENT.md) (close button), Icon (`action.close`)
-- **See also:** [Notification](../notification/COMPONENT.md), [Hint](../hint/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Badge](../badge/COMPONENT.md)
+- **See also:** [Crossfade](../crossfade/COMPONENT.md), [Notification](../notification/COMPONENT.md), [Hint](../hint/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [Badge](../badge/COMPONENT.md)

package/dist/skill/reference/components/banner/examples/dismissible.tsx

@@ -1,18 +1,34 @@
-/** The parent owns visibility: the close button calls back and the parent unmounts the banner; the button name comes from labels — `onDismiss`, `labels`. */
-import { Banner, Button, Icon } from "prime-ui-kit";
+/** The parent owns visibility: the close button calls back, the banner closes up and focus moves to the restore button; the button name comes from labels — `onDismiss`, `labels`. */
+import { Banner, Button, Crossfade, Icon } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function BannerDismissibleExample() {
   const [visible, setVisible] = React.useState(true);
+  const bannerRef = React.useRef<HTMLDivElement>(null);
+  const restoreRef = React.useRef<HTMLButtonElement>(null);
+  const toggled = React.useRef(false);
+
+  // The pressed button leaves with its block: focus goes to the control that takes its place.
+  React.useEffect(() => {
+    if (!toggled.current) return;
+    if (visible) bannerRef.current?.querySelector("button")?.focus();
+    else restoreRef.current?.focus();
+  }, [visible]);
+
+  const toggle = (next: boolean) => {
+    toggled.current = true;
+    setVisible(next);
+  };
 
   return (
-    <div className={styles.stack}>
+    <Crossfade state={visible ? "banner" : "restore"} className={styles.region}>
       {visible ? (
         <Banner.Root
+          ref={bannerRef}
           tone="accent"
-          onDismiss={() => setVisible(false)}
+          onDismiss={() => toggle(false)}
           labels={{ dismiss: "Скрыть объявление" }}
         >
           <Banner.Content>
@@ -24,15 +40,10 @@ export default function BannerDismissibleExample() {
           </Banner.Content>
         </Banner.Root>
       ) : (
-        <Button.Root
-          variant="outline"
-          tone="neutral"
-          className={styles.restore}
-          onClick={() => setVisible(true)}
-        >
+        <Button.Root ref={restoreRef} variant="outline" tone="neutral" onClick={() => toggle(true)}>
           Вернуть баннер
         </Button.Root>
       )}
-    </div>
+    </Crossfade>
   );
 }

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

@@ -26,7 +26,7 @@
   width: min(100%, calc(var(--prime-space-20) * 4));
 }
 
-/* dismiss.tsx */
-.restore {
-  align-self: flex-start;
+/* dismissible.tsx: the swapped region takes the row's width. */
+.region {
+  width: 100%;
 }

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

@@ -1,4 +1,4 @@
-/** Below 36rem of its own width the banner moves the actions under the text. */
+/** Below 36rem of its own width the banner moves the actions under the text — `Banner.Actions`. */
 import { Banner, Button, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

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

@@ -123,7 +123,7 @@ Root attributes: `data-size`, `data-collapsible` (`"true"` / `"false"`).
 | [overview.tsx](examples/overview.tsx) | The path to this page: links to the levels above and the current page last — `href`, `current`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; text and chevrons follow the control tier — `size`. |
 | [with-icon.tsx](examples/with-icon.tsx) | The root level as a home icon; a link without text is named for screen readers — `aria-label`. |
-| [overflow.tsx](examples/overflow.tsx) | A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels. |
+| [overflow.tsx](examples/overflow.tsx) | A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels — `Breadcrumb.Item`, `current`. |
 | [ellipsis.tsx](examples/ellipsis.tsx) | Levels skipped on purpose shown as «…» with hidden text for screen readers — `Breadcrumb.Ellipsis`. |
 
 ## Mistakes

package/dist/skill/reference/components/breadcrumb/examples/overflow.tsx

@@ -1,4 +1,4 @@
-/** A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels. */
+/** A long path: levels truncate, and in a 320px container the middle ones collapse into «…», which screen readers announce as hidden levels — `Breadcrumb.Item`, `current`. */
 import { Breadcrumb } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

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

@@ -163,7 +163,7 @@ Card.Root asChild                <a> or <button> (the only child) holding the pa
 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`.
+- Cards on a page: one `PageContent.Grid` with a `PageContent.Cell span` per card (16 on both axes, the cards of a row share one height); a grid inside one block is the block's own `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.
@@ -196,11 +196,11 @@ No `labels`.
 | [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`. |
+| [panel-chart.tsx](examples/panel-chart.tsx) | A chart widget: a header with a short description and a period switch, and a Sparkline with the period total over its chart — `Card.Header`, `Card.Description`, `Card.Body`. |
 | [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. |
+| [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 — `variant`. |
 
 ## Mistakes
 - A `<div>` with a border styled as a card → use `Card.Root`; depth comes from fill, not lines.
@@ -209,10 +209,11 @@ No `labels`.
 - 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 hand-drawn trend SVG in a chart widget → `Sparkline` in the `Body` (or `Media`); a chart with a legend and states → `ChartFrame`.
 - 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)
+- **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), [Sparkline](../sparkline/COMPONENT.md) (a trend with its total inside a `panel`), [ChartFrame](../chart-frame/COMPONENT.md) (a full chart with legend and states)

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

@@ -28,34 +28,6 @@
   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,

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

@@ -1,9 +1,19 @@
 /** 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 { Card, Icon, ProgressBar, Sparkline, type SparklinePoint } 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";
+const REQUESTS: SparklinePoint[] = [
+  { label: "12:00", value: 9_120 },
+  { label: "12:10", value: 9_640 },
+  { label: "12:20", value: 9_380 },
+  { label: "12:30", value: 10_910 },
+  { label: "12:40", value: 10_470 },
+  { label: "12:50", value: 11_760 },
+  { label: "13:00", value: 11_290 },
+  { label: "13:10", value: 12_310 },
+  { label: "13:20", value: 12_840 },
+];
 
 export default function CardKpiMediaExample() {
   return (
@@ -15,15 +25,7 @@ export default function CardKpiMediaExample() {
         <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>
+          <Sparkline layout="compact" data={REQUESTS} label="Запросы в минуту за час" />
         </Card.Media>
       </Card.Root>
 

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

@@ -1,4 +1,4 @@
-/** The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem. */
+/** The card is a size container: the split template stacks its cells below 22rem and the trend value shrinks below 20rem — `variant`. */
 import { Card, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

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

@@ -1,43 +1,66 @@
-/** 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";
+/** A chart widget: a header with a short description and a period switch, and a Sparkline with the period total over its chart — `Card.Header`, `Card.Description`, `Card.Body`. */
+import { Card, SegmentedControl, Sparkline, type SparklinePoint } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const POINTS = [42, 48, 45, 60, 58, 72, 66, 80, 76, 88, 84, 96];
+type Period = "week" | "month";
 
-/** 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(" ");
+const REVENUE: Record<Period, SparklinePoint[]> = {
+  week: [
+    { label: "6 окт", value: 412_000 },
+    { label: "7 окт", value: 468_000 },
+    { label: "8 окт", value: 445_000 },
+    { label: "9 окт", value: 603_000 },
+    { label: "10 окт", value: 581_000 },
+    { label: "11 окт", value: 214_000 },
+    { label: "12 окт", value: 187_000 },
+  ],
+  month: [
+    { label: "сен, 1 нед.", value: 2_480_000 },
+    { label: "сен, 2 нед.", value: 2_760_000 },
+    { label: "сен, 3 нед.", value: 2_610_000 },
+    { label: "сен, 4 нед.", value: 3_140_000 },
+    { label: "окт, 1 нед.", value: 2_910_000 },
+  ],
+};
+
+/** The same total for the period before: the badge at rest compares the headline with it. */
+const PREVIOUS: Record<Period, number> = {
+  week: 2_640_000,
+  month: 12_900_000,
+};
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
 
 export default function CardPanelChartExample() {
+  const [period, setPeriod] = React.useState<Period>("month");
+
   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.Root
+            size="xs"
+            value={period}
+            onValueChange={(value) => setPeriod(value as Period)}
+            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>
+          <Sparkline
+            data={REVENUE[period]}
+            label="Оплачено за период"
+            summary="sum"
+            compareTo={PREVIOUS[period]}
+            formatValue={formatRubles}
+          />
         </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>
   );