prime-ui-kit 0.15.0 → 0.17.0

package/src/layout/app-header/examples/in-app-shell.tsx

@@ -1,69 +0,0 @@
-/** The header in the app frame: one row with the Sidebar brand across the two planes, sticky over main — `AppShell`, `Sidebar.Brand`. */
-import { AppHeader, AppShell, Icon, PageContent, Sidebar, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const ORDERS = [
-  "№ 4821 · ООО «Север» · 84 000 ₽",
-  "№ 4820 · ИП Котов · 12 500 ₽",
-  "№ 4819 · ООО «Вектор» · 230 000 ₽",
-  "№ 4818 · АО «Меридиан» · 47 900 ₽",
-  "№ 4817 · ООО «Полюс» · 9 800 ₽",
-  "№ 4816 · ИП Белова · 156 000 ₽",
-];
-
-export default function AppHeaderInAppShellExample() {
-  return (
-    <div className={styles.stage}>
-      <AppShell.Root fillViewport className={styles.shell}>
-        <AppShell.Nav>
-          <Sidebar.Root offCanvas="never">
-            <Sidebar.Header>
-              <Sidebar.Brand href="#home" description="Отдел продаж">
-                <Sidebar.BrandLogo>
-                  <span className={styles.logo}>
-                    <Icon name="nav.layoutGrid" />
-                  </span>
-                </Sidebar.BrandLogo>
-                Acme CRM
-              </Sidebar.Brand>
-            </Sidebar.Header>
-            <Sidebar.Content>
-              <Sidebar.Item>
-                <Sidebar.ItemIcon>
-                  <Icon name="nav.home" />
-                </Sidebar.ItemIcon>
-                Обзор
-              </Sidebar.Item>
-              <Sidebar.Item current>
-                <Sidebar.ItemIcon>
-                  <Icon name="object.package" />
-                </Sidebar.ItemIcon>
-                Заказы
-              </Sidebar.Item>
-            </Sidebar.Content>
-          </Sidebar.Root>
-        </AppShell.Nav>
-        <AppHeader.Root>
-          <AppHeader.Start>
-            <AppHeader.Title>
-              Заказы
-              <AppHeader.Description>128 в работе</AppHeader.Description>
-            </AppHeader.Title>
-          </AppHeader.Start>
-        </AppHeader.Root>
-        <AppShell.Main>
-          <PageContent.Page>
-            <PageContent.Body>
-              {ORDERS.map((order) => (
-                <Typography key={order} variant="body-m">
-                  {order}
-                </Typography>
-              ))}
-            </PageContent.Body>
-          </PageContent.Page>
-        </AppShell.Main>
-      </AppShell.Root>
-    </div>
-  );
-}

package/src/layout/app-header/examples/narrow.tsx

@@ -1,28 +0,0 @@
-/** On a phone: the menu button opens the navigation, the title and its line of data truncate and the page's action keeps its icon — `AppHeader.MenuButton`, `show`. */
-import { AppHeader, Button, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function AppHeaderNarrowExample() {
-  return (
-    <div className={`${styles.window} ${styles.phone}`}>
-      <AppHeader.Root>
-        <AppHeader.Start>
-          {/* `always`: this frame is phone-wide on any screen; in an app keep the default `narrow`. */}
-          <AppHeader.MenuButton show="always" aria-expanded={false} />
-          <AppHeader.Title>
-            Заказы покупателей
-            <AppHeader.Description>128 в работе · 6 ждут оплаты · 2 возврата</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Actions>
-          <Button.Root aria-label="Новый заказ">
-            <Button.Icon>
-              <Icon name="action.add" />
-            </Button.Icon>
-          </Button.Root>
-        </AppHeader.Actions>
-      </AppHeader.Root>
-    </div>
-  );
-}

package/src/layout/app-header/examples/overview.tsx

@@ -1,34 +0,0 @@
-/** The page's header: the page title with its icon and a line of data under it, the page's own buttons at the end — `AppHeader.Title`, `AppHeader.Description`, `AppHeader.Actions`. */
-import { AppHeader, Button, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function AppHeaderOverviewExample() {
-  return (
-    <div className={styles.window}>
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            <AppHeader.Icon>
-              <Icon name="object.package" />
-            </AppHeader.Icon>
-            Заказы
-            <AppHeader.Description>128 в работе · 6 ждут оплаты</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Actions>
-          <Button.Root variant="soft" tone="neutral" aria-label="Экспорт в CSV">
-            <Button.Icon>
-              <Icon name="action.download" />
-            </Button.Icon>
-          </Button.Root>
-          <Button.Root variant="soft" tone="neutral" aria-label="Ещё действия">
-            <Button.Icon>
-              <Icon name="action.more" />
-            </Button.Icon>
-          </Button.Root>
-        </AppHeader.Actions>
-      </AppHeader.Root>
-    </div>
-  );
-}

package/src/layout/app-header/examples/page-title.tsx

@@ -1,78 +0,0 @@
-/** The header carries the page: the title is the page heading with a line of data, the page tools (sections, the period, the primary action) are its second row and lay themselves out from its width — `AppHeader.Title`, `AppHeader.Tools`. */
-import { AppHeader, Button, Icon, PageToolbar, SegmentedControl, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const SECTIONS = [
-  { value: "all", label: "Все" },
-  { value: "mine", label: "Мои" },
-  { value: "overdue", label: "Просроченные" },
-];
-
-const PERIODS = [
-  { value: "month", label: "Октябрь" },
-  { value: "quarter", label: "IV квартал" },
-  { value: "year", label: "2026 год" },
-];
-
-export default function AppHeaderPageTitleExample() {
-  const [section, setSection] = React.useState("all");
-  const [period, setPeriod] = React.useState("month");
-
-  return (
-    <div className={styles.window}>
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Сделки
-            <AppHeader.Description>24 сделки в работе · 8,2 млн ₽</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <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.Actions>
-              <Button.Root>
-                <Button.Icon>
-                  <Icon name="action.add" />
-                </Button.Icon>
-                Новая сделка
-              </Button.Root>
-            </PageToolbar.Actions>
-          </PageToolbar.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-    </div>
-  );
-}

package/src/layout/app-shell/examples/contained.tsx

@@ -1,30 +0,0 @@
-/** A shell without navigation whose main column is centred and capped for long reads — `contentWidth`. */
-import { AppShell, PageContent, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function AppShellContainedExample() {
-  return (
-    <div className={styles.stage}>
-      <AppShell.Root fillViewport className={styles.shell}>
-        <AppShell.Main contentWidth="contained">
-          <PageContent.Root maxWidth="readable">
-            <PageContent.Header>
-              {/* In a real app this is PageContent.Title (the page h1). */}
-              <Typography as="h2" variant="heading-m">
-                Как подключить оплату
-              </Typography>
-              <PageContent.Description>Обновлено 1 октября 2026 года.</PageContent.Description>
-            </PageContent.Header>
-            <PageContent.Body>
-              <Typography as="p" variant="body-l">
-                Откройте раздел «Настройки», выберите «Оплата» и укажите реквизиты. После проверки
-                банк пришлёт подтверждение, и приём платежей включится автоматически.
-              </Typography>
-            </PageContent.Body>
-          </PageContent.Root>
-        </AppShell.Main>
-      </AppShell.Root>
-    </div>
-  );
-}