prime-ui-kit 0.15.0 → 0.17.0

package/dist/skill/reference/components/page-toolbar/COMPONENT.md

@@ -1,143 +0,0 @@
-# PageToolbar
-
-**Category:** page
-**Kind:** layout
-
-> The panel at the top of a page — sections, filter and search, view options and the primary action — laid out from its own width: one row when wide, stacked rows when narrow, search and filter always first with the active filters under the top row.
-
-## When to use
-- A list, registry or dashboard page whose top holds several of: sections with counts, a filter and search, a period or view switch, the primary action.
-- A settings page with sections and a «Сохранить N изменений» action that must stay reachable on a phone.
-- Any page that has to work from 320px with the same controls as on desktop — nothing is hidden, the slots only move.
-
-## When not to use
-- One or two buttons of the page and nothing else → `AppHeader.Actions` in the [AppHeader](../../layout/app-header/COMPONENT.md) title row.
-- Tools that belong to one table → the DataTable `toolbar` slot.
-- Switching panels inside a card or a section → [Tabs](../tabs/COMPONENT.md).
-- App-level navigation → [Sidebar](../../layout/sidebar/COMPONENT.md).
-
-## Import
-```tsx
-import { PageToolbar } from "prime-ui-kit";
-```
-
-## Anatomy
-```
-PageToolbar.Root                 container: its own width picks the layout
-├─ PageToolbar.Tools             search + filter button: SmartFilter.Toolbar — always first
-├─ PageToolbar.Sections          sections of the page: a fullWidth SegmentedControl with counts
-├─ PageToolbar.View              period, table / cards, columns
-├─ PageToolbar.Actions           the primary action (and its secondary twin, e.g. «Отменить»)
-└─ PageToolbar.Chips             active filters: SmartFilter.Chips, a row under the top row
-```
-
-## API
-
-<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
-
-### PageToolbar.Root
-`ref` → `HTMLDivElement`. The page panel: one row from 56rem of its own width, stacked rows below. Any slot may be left out; JSX order is the Tab order — write Tools, Sections, View, Actions, Chips.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### PageToolbar.Sections
-`ref` → `HTMLDivElement`. Sections of the page — a `fullWidth` SegmentedControl with counts; scrolls inside when it does not fit.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### PageToolbar.Tools
-`ref` → `HTMLDivElement`. Search and filter button (`SmartFilter.Toolbar`): always the first slot and the stretchy one; it gives way first when the row runs short.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### PageToolbar.View
-`ref` → `HTMLDivElement`. How the data is shown: period, table / cards, columns. Sized by content when wide; its own full row when narrow, its controls sharing it equally.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### PageToolbar.Actions
-`ref` → `HTMLDivElement`. The primary action of the page: at the end of the top row; on a phone, when the search would get less than 18rem beside it, its own full row right under the search.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-### PageToolbar.Chips
-`ref` → `HTMLDivElement`. Active filters (`SmartFilter.Chips`) in their own row under the top row; the row takes no space while it is empty.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `children`, `className` and the other div attributes. |
-
-## Variants
-PageToolbar has no variants: the layout follows the toolbar's width.
-
-### Layout by width
-| Toolbar width | Looks like | Default |
-|---|---|---|
-| `≥ 56rem` | one row that never wraps: Tools (stretch) · Sections (content width) · View (content width) · Actions; Chips under it; short of room the Tools give way first, down to 12rem, so the Sections keep their items and counts whole; only then the Sections shrink and scroll inside | |
-| `< 56rem` | rows: Tools (stretch) + Actions; Chips; Sections (full row); View (full row) | yes (mobile first) |
-| phone (Tools would get < 18rem beside the Actions) | rows: Tools (full row); Actions (full row, its buttons share it); Chips; Sections; View — the search is never squeezed; an icon-only action still fits beside the Tools | |
-| any | Chips under the top row, only while there are chips | |
-
-## States
-| State | Driven by | DOM |
-|---|---|---|
-| wide | container ≥ 56rem | one flex row, no wrapping; Chips rendered under the bar |
-| narrow | container < 56rem | one wrapping flex line of real rows only (`order` + full-row slots): a missing slot makes no row, every row is 12 from the next |
-| action on its own row | narrow, and the Tools (or the Sections in their place) would get less than 18rem beside the Actions | the Actions wrap under them and stretch across the row; an Actions slot alone in the toolbar keeps its buttons at the end |
-| no Tools | Sections without Tools; View without Tools and Sections | that slot takes the Tools' place: first and stretchy, beside the action, so the action stays at the top row's end |
-| alone in a row | Tools or Sections without Actions; View when narrow | that slot stretches to the full row; the View's controls share it equally |
-| no chips | `PageToolbar.Chips` empty (`SmartFilter.Chips` renders nothing) | the chips row takes no space |
-
-## Layout & spacing
-- 8 inside a slot. No padding or fill of its own: on an app page it is the page's tools row in `AppHeader.Tools`, under the page title; tools of one table go into that table's `toolbar`.
-- The order is fixed: search and filter first, then the sections, the view and the primary action; the active filters sit under the top row, never under the sections. The primary action is at the end of the top row; on a phone, where the search would get less than 18rem beside it, it takes its own row right under the search — still above the sections and the view.
-- Every gap is one step: 12 between slots and between every pair of rows, at any width — no row is ever further from the next.
-- Sections take a `fullWidth` SegmentedControl: the toolbar decides when it stretches (content width when wide, the full row when narrow), its items tend to equal width and it scrolls inside itself when they do not fit.
-- All controls share one tier, so they share one height and wrapped rows stay level: leave `size` off the controls (default `m`); for a denser page wrap the toolbar in `<ControlSizeProvider value="s">`.
-- On a phone the primary action takes its own row by itself; an icon-only action with `aria-label` stays beside the search instead. Never remove it.
-- The toolbar breaks by its own width, so it behaves the same with the sidebar open or closed.
-
-## Accessibility
-
-### Keyboard
-No keyboard interaction.
-
-### ARIA
-- A plain `<div>`: when a page has more than one panel, give each `role="group"` and an `aria-label` (a name on a `<div>` without a role is ignored by assistive tech).
-- Slots move only visually (`order`); the Tab order is the JSX order. Write the slots in the reading order of the wide layout — Tools, Sections, View, Actions, Chips. In the narrow layout the action is shown beside the tools but reached after the view.
-- An icon-only primary action carries `aria-label`.
-
-### 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) | The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters right under the search — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. |
-| [without-search.tsx](examples/without-search.tsx) | A dashboard panel without search on a tablet-width column: the sections fill the top row, the period selector alone in the bottom row stretches to the full width — `PageToolbar.Sections`, `PageToolbar.View`. |
-| [save-changes.tsx](examples/save-changes.tsx) | A settings page: sections of the form on the left, the save action with the number of changes at the end of the top row — never a sticky bar at the bottom of a phone screen — `PageToolbar.Actions`. |
-| [narrow.tsx](examples/narrow.tsx) | A phone-width column: search and filter on top, the primary action on its own row under them, then the active filters, the sections and the period, every row 12 apart — `PageToolbar.Root`. |
-
-## Mistakes
-- A hand-built flex row of tabs, search and buttons with `flex-wrap` → rows wrap «as they come», the action drifts down; use `PageToolbar`.
-- `size="s"` on one control inside → a step in the row; one tier for all, through `ControlSizeProvider` around the toolbar.
-- A SegmentedControl without `fullWidth` in Sections → it never stretches on narrow widths.
-- Stat cards above a table for the section totals → counts inside the sections (`SegmentedControl.Count`).
-- Hiding the search or the action on phones → they move, they never disappear.
-- A sticky «Сохранить» bar at the bottom of a phone → the save action with its count in `PageToolbar.Actions`.
-
-## Related
-- **Built from:** —
-- **See also:** [SegmentedControl](../segmented-control/COMPONENT.md), [SmartFilter](../smart-filter/COMPONENT.md), [PageContent](../page-content/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [Select](../select/COMPONENT.md)

package/dist/skill/reference/components/page-toolbar/examples/examples.module.css

@@ -1,16 +0,0 @@
-/* Layout of the PageToolbar scenarios: page columns of a capped width, so the toolbar shows its
-   two-row form. A cap (`max-width`), not a width: the column is as wide as the stage allows. */
-
-/* A phone-width page column (360px). */
-.phone {
-  width: 100%;
-  max-width: calc(var(--prime-space-24) * 3.75);
-  margin-inline: auto;
-}
-
-/* A tablet-width page column (600px). */
-.tablet {
-  width: 100%;
-  max-width: calc(var(--prime-space-24) * 6.25);
-  margin-inline: auto;
-}

package/dist/skill/reference/components/page-toolbar/examples/overview.tsx

@@ -1,113 +0,0 @@
-/** The panel of an orders page: search and filter, sections with counts, the period and the primary action in one row; active filters right under the search — `PageToolbar.Tools`, `PageToolbar.Sections`, `PageToolbar.View`, `PageToolbar.Actions`, `PageToolbar.Chips`. */
-import {
-  Button,
-  Icon,
-  PageToolbar,
-  SegmentedControl,
-  Select,
-  SmartFilter,
-  type SmartFilterField,
-  type SmartFilterValue,
-} from "prime-ui-kit";
-import * as React from "react";
-
-const SECTIONS = [
-  { value: "all", label: "Все", count: 128 },
-  { value: "active", label: "В работе", count: 12 },
-  { value: "done", label: "Доставлены", count: 96 },
-  { value: "cancelled", label: "Отменены", count: 20 },
-];
-
-const PERIODS = [
-  { value: "7d", label: "7 дней" },
-  { value: "30d", label: "30 дней" },
-  { value: "quarter", label: "Квартал" },
-];
-
-const FIELDS: SmartFilterField[] = [
-  {
-    key: "city",
-    label: "Город",
-    options: [
-      { value: "msk", label: "Москва" },
-      { value: "spb", label: "Санкт-Петербург" },
-      { value: "kzn", label: "Казань" },
-    ],
-  },
-  {
-    key: "payment",
-    label: "Оплата",
-    options: [
-      { value: "card", label: "Картой" },
-      { value: "invoice", label: "По счёту" },
-    ],
-  },
-];
-
-export default function PageToolbarOverviewExample() {
-  const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("30d");
-  const [filter, setFilter] = React.useState<SmartFilterValue>({
-    city: { include: ["msk"], exclude: [] },
-  });
-  const [search, setSearch] = React.useState("");
-
-  return (
-    <SmartFilter.Root
-      fields={FIELDS}
-      value={filter}
-      onValueChange={setFilter}
-      search={search}
-      onSearchChange={setSearch}
-    >
-      <PageToolbar.Root aria-label="Заказы">
-        <PageToolbar.Tools>
-          <SmartFilter.Toolbar />
-        </PageToolbar.Tools>
-        <PageToolbar.Sections>
-          <SegmentedControl.Root
-            fullWidth
-            value={section}
-            onValueChange={setSection}
-            aria-label="Раздел"
-          >
-            {SECTIONS.map((item) => (
-              <SegmentedControl.Item key={item.value} value={item.value}>
-                {item.label}
-                <SegmentedControl.Count>{item.count}</SegmentedControl.Count>
-              </SegmentedControl.Item>
-            ))}
-          </SegmentedControl.Root>
-        </PageToolbar.Sections>
-        <PageToolbar.View>
-          <Select.Root value={period} onValueChange={setPeriod}>
-            <Select.Trigger aria-label="Период">
-              <Select.TriggerIcon>
-                <Icon name="field.calendar" />
-              </Select.TriggerIcon>
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              {PERIODS.map((item) => (
-                <Select.Item key={item.value} value={item.value}>
-                  {item.label}
-                </Select.Item>
-              ))}
-            </Select.Content>
-          </Select.Root>
-        </PageToolbar.View>
-        <PageToolbar.Actions>
-          <Button.Root>
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-            Новый заказ
-          </Button.Root>
-        </PageToolbar.Actions>
-        <PageToolbar.Chips>
-          <SmartFilter.Chips />
-        </PageToolbar.Chips>
-      </PageToolbar.Root>
-    </SmartFilter.Root>
-  );
-}

package/dist/skill/reference/components/page-toolbar/examples/save-changes.tsx

@@ -1,40 +0,0 @@
-/** A settings page: sections of the form on the left, the save action with the number of changes at the end of the top row — never a sticky bar at the bottom of a phone screen — `PageToolbar.Actions`. */
-import { Button, PageToolbar, SegmentedControl } from "prime-ui-kit";
-import * as React from "react";
-
-const SECTIONS = [
-  { value: "profile", label: "Профиль" },
-  { value: "billing", label: "Оплата" },
-  { value: "team", label: "Команда" },
-];
-
-const CHANGES = 3;
-
-export default function PageToolbarSaveChangesExample() {
-  const [section, setSection] = React.useState("profile");
-
-  return (
-    <PageToolbar.Root aria-label="Настройки">
-      <PageToolbar.Sections>
-        <SegmentedControl.Root
-          fullWidth
-          value={section}
-          onValueChange={setSection}
-          aria-label="Раздел настроек"
-        >
-          {SECTIONS.map((item) => (
-            <SegmentedControl.Item key={item.value} value={item.value}>
-              {item.label}
-            </SegmentedControl.Item>
-          ))}
-        </SegmentedControl.Root>
-      </PageToolbar.Sections>
-      <PageToolbar.Actions>
-        <Button.Root variant="ghost" tone="neutral">
-          Отменить
-        </Button.Root>
-        <Button.Root>Сохранить {CHANGES} изменения</Button.Root>
-      </PageToolbar.Actions>
-    </PageToolbar.Root>
-  );
-}

package/dist/skill/reference/components/page-toolbar/examples/without-search.tsx

@@ -1,60 +0,0 @@
-/** A dashboard panel without search on a tablet-width column: the sections fill the top row, the period selector alone in the bottom row stretches to the full width — `PageToolbar.Sections`, `PageToolbar.View`. */
-import { Icon, PageToolbar, SegmentedControl, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const SECTIONS = [
-  { value: "overview", label: "Обзор" },
-  { value: "activity", label: "Активность" },
-  { value: "resources", label: "Ресурсы" },
-];
-
-const PERIODS = [
-  { value: "1h", label: "1 час" },
-  { value: "24h", label: "24 часа" },
-  { value: "7d", label: "7 дней" },
-];
-
-export default function PageToolbarWithoutSearchExample() {
-  const [section, setSection] = React.useState("overview");
-  const [period, setPeriod] = React.useState("24h");
-
-  return (
-    <div className={styles.tablet}>
-      <PageToolbar.Root aria-label="Панель мониторинга">
-        <PageToolbar.Sections>
-          <SegmentedControl.Root
-            fullWidth
-            value={section}
-            onValueChange={setSection}
-            aria-label="Раздел"
-          >
-            {SECTIONS.map((item) => (
-              <SegmentedControl.Item key={item.value} value={item.value}>
-                {item.label}
-              </SegmentedControl.Item>
-            ))}
-          </SegmentedControl.Root>
-        </PageToolbar.Sections>
-        <PageToolbar.View>
-          <Select.Root value={period} onValueChange={setPeriod}>
-            <Select.Trigger aria-label="Период">
-              <Select.TriggerIcon>
-                <Icon name="field.calendar" />
-              </Select.TriggerIcon>
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              {PERIODS.map((item) => (
-                <Select.Item key={item.value} value={item.value}>
-                  {item.label}
-                </Select.Item>
-              ))}
-            </Select.Content>
-          </Select.Root>
-        </PageToolbar.View>
-      </PageToolbar.Root>
-    </div>
-  );
-}

package/dist/skill/reference/components/popover/examples/match-trigger-width.tsx

@@ -1,23 +0,0 @@
-/** In a narrow column the panel takes the exact width of a full-width trigger and its text wraps — `matchTriggerWidth`. */
-import { Button, Popover, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function PopoverMatchTriggerWidthExample() {
-  return (
-    <div className={styles.narrowColumn}>
-      <Popover.Root>
-        <Popover.Trigger>
-          <Button.Root variant="soft" tone="neutral" fullWidth>
-            Условия тарифа
-          </Button.Root>
-        </Popover.Trigger>
-        <Popover.Content matchTriggerWidth>
-          <Typography variant="body-s" tone="secondary">
-            До 10 пользователей, 50 ГБ хранилища и приоритетная поддержка.
-          </Typography>
-        </Popover.Content>
-      </Popover.Root>
-    </div>
-  );
-}

package/dist/skill/reference/components/scroll-container/examples/chat.tsx

@@ -1,101 +0,0 @@
-/** A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. */
-import { Button, Card, Icon, Input, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-type Message = { id: number; author: string; text: string };
-
-const HISTORY: Message[] = [
-  "Добрый день! Счёт № 4821 пришёл без НДС.",
-  "Здравствуйте, проверю реквизиты и вернусь.",
-  "Спасибо, ждём — нужно провести до пятницы.",
-  "Нашла: в карточке клиента стояла ставка 0 %.",
-  "Исправили ставку, выставляю счёт заново.",
-  "Новый счёт № 4830 отправлен на почту бухгалтерии.",
-  "Получили, всё верно. Оплатим сегодня.",
-  "Отлично! Закрывающие документы пришлём после оплаты.",
-  "Оплата прошла, платёжка во вложении.",
-  "Вижу поступление, спасибо. Акт отправим завтра.",
-  "Подскажите, можно ли подключить ЭДО?",
-  "Да, пришлите идентификатор в Диадоке.",
-].map((text, index) => ({ id: index + 1, author: index % 2 === 0 ? "Клиент" : "Поддержка", text }));
-
-const PAGE = 4;
-
-export default function ScrollContainerChatExample() {
-  // The newest messages first; older pages arrive when the reader scrolls up.
-  const [shown, setShown] = React.useState(PAGE);
-  const [loading, setLoading] = React.useState(false);
-  const [sent, setSent] = React.useState<Message[]>([]);
-  const [draft, setDraft] = React.useState("");
-  const messages = [...HISTORY.slice(-shown), ...sent];
-
-  const loadOlder = () => {
-    if (shown >= HISTORY.length) return;
-    setLoading(true);
-    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
-    return new Promise<void>((resolve) => {
-      window.setTimeout(() => {
-        setShown((count) => Math.min(count + PAGE, HISTORY.length));
-        setLoading(false);
-        resolve();
-      }, 800);
-    });
-  };
-
-  const send = (event: React.FormEvent) => {
-    event.preventDefault();
-    const text = draft.trim();
-    if (!text) return;
-    setSent((list) => [
-      ...list,
-      { id: HISTORY.length + list.length + 1, author: "Поддержка", text },
-    ]);
-    setDraft("");
-  };
-
-  return (
-    <Card.Root className={styles.chat}>
-      <Card.Header>
-        <Card.Title>ООО «Гранит» · счёт № 4821</Card.Title>
-      </Card.Header>
-      <ScrollContainer
-        anchor="end"
-        onReachStart={loadOlder}
-        tabIndex={0}
-        aria-label="Сообщения"
-        className={styles.messages}
-      >
-        {loading ? <Skeleton lines={2} className={styles.older} /> : null}
-        <ul className={styles.list}>
-          {messages.map((message) => (
-            <li key={message.id}>
-              <Typography as="span" variant="caption" tone="muted">
-                {message.author}
-              </Typography>
-              <Typography variant="body-m">{message.text}</Typography>
-            </li>
-          ))}
-        </ul>
-      </ScrollContainer>
-      <form className={styles.composer} onSubmit={send}>
-        <Input.Root className={styles.composerField}>
-          <Input.Wrapper>
-            <Input.Field
-              aria-label="Сообщение"
-              placeholder="Ответить клиенту"
-              value={draft}
-              onValueChange={setDraft}
-            />
-          </Input.Wrapper>
-        </Input.Root>
-        <Button.Root type="submit" aria-label="Отправить">
-          <Button.Icon>
-            <Icon name="action.send" />
-          </Button.Icon>
-        </Button.Root>
-      </form>
-    </Card.Root>
-  );
-}

package/dist/skill/reference/components/spinner/examples/loading-region.tsx

@@ -1,22 +0,0 @@
-/** A card that loads its content: the region says it is busy and the spinner stays hidden from screen readers — `aria-hidden`. */
-import { Card, Spinner, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function SpinnerLoadingRegionExample() {
-  return (
-    <Card.Root
-      role="region"
-      aria-busy="true"
-      aria-label="Выручка за неделю"
-      className={styles.region}
-    >
-      <Card.Body className={styles.loading}>
-        <Spinner size="l" tone="muted" aria-hidden="true" />
-        <Typography as="p" variant="body-s" tone="secondary">
-          Считаем выручку за неделю
-        </Typography>
-      </Card.Body>
-    </Card.Root>
-  );
-}