prime-ui-kit 0.10.0 → 0.11.0

package/dist/skill/patterns/dashboard.module.css

@@ -0,0 +1,44 @@
+/* Dashboard: blocks 40 apart come from PageContent.Body; tiles inside a block 16 apart. */
+
+/* KPI row: as many ~14rem tiles as fit, one column on a phone. */
+.kpis {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-14) * 4)), 1fr));
+  gap: var(--prime-space-4);
+}
+
+/* Panels: two columns from ~40rem of width; neighbours share one height. */
+.panels {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-20) * 4)), 1fr));
+  align-items: stretch;
+  gap: var(--prime-space-4);
+}
+
+/* Bars inside a panel: 20 apart, like fields. */
+.bars {
+  display: grid;
+  gap: var(--prime-space-5);
+}
+
+/* A section without a card: heading row 16 above the table. */
+.recent {
+  display: grid;
+  gap: var(--prime-space-4);
+  min-width: 0;
+}
+
+.recentHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--prime-space-2) var(--prime-space-4);
+}
+
+.client {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-2);
+}

package/dist/skill/patterns/dashboard.tsx

@@ -0,0 +1,326 @@
+/** A dashboard: the period switch in the header, a KPI row that cross-fades to the new period, a revenue trend to scrub, invoiced against paid in a ChartFrame with a legend, panels with plan progress and the receivables split, and a short table with a link to the full list. */
+import {
+  Badge,
+  Button,
+  Card,
+  ChartFrame,
+  type ChartFrameSeries,
+  Crossfade,
+  chartColors,
+  DataTable,
+  type DataTableColumn,
+  Icon,
+  LinkButton,
+  PageContent,
+  ProgressBar,
+  type ProgressSegment,
+  SegmentedControl,
+  Sparkline,
+  type SparklinePoint,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./dashboard.module.css";
+
+type Period = "week" | "month" | "quarter";
+type Payment = { id: string; client: string; date: string; amount: number; late: boolean };
+
+const KPIS: Record<
+  Period,
+  { label: string; value: string; delta: string; tone: "success" | "danger" | "neutral" }[]
+> = {
+  week: [
+    { label: "Выручка", value: "2,1 млн ₽", delta: "+6% к прошлой неделе", tone: "success" },
+    { label: "Оплачено счетов", value: "54", delta: "+4", tone: "success" },
+    { label: "Средний чек", value: "38 900 ₽", delta: "без изменений", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "+180 тыс. ₽", tone: "danger" },
+  ],
+  month: [
+    { label: "Выручка", value: "8,4 млн ₽", delta: "+12% к сентябрю", tone: "success" },
+    { label: "Оплачено счетов", value: "214", delta: "+17", tone: "success" },
+    { label: "Средний чек", value: "39 300 ₽", delta: "−3% к сентябрю", tone: "danger" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−340 тыс. ₽", tone: "success" },
+  ],
+  quarter: [
+    { label: "Выручка", value: "24,6 млн ₽", delta: "+21% ко II кварталу", tone: "success" },
+    { label: "Оплачено счетов", value: "631", delta: "+88", tone: "success" },
+    { label: "Средний чек", value: "39 000 ₽", delta: "+1%", tone: "neutral" },
+    { label: "Просрочено", value: "1,2 млн ₽", delta: "−1,1 млн ₽", tone: "success" },
+  ],
+};
+
+const MONTHS = ["янв", "фев", "мар", "апр", "мая", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"];
+
+/** Daily revenue up to 8 October 2026: `days` points ending that day, a deterministic wave. */
+function dailyRevenue(days: number, base: number): SparklinePoint[] {
+  return Array.from({ length: days }, (_, i) => {
+    const day = new Date(2026, 9, 8 - (days - 1 - i));
+    const wave = Math.sin(i / 2.3) * 0.12 + Math.sin(i / 0.9) * 0.05 + i / days / 6;
+    return {
+      label: `${day.getDate()} ${MONTHS[day.getMonth()]}`,
+      value: Math.round((base * (1 + wave)) / 1000) * 1000,
+    };
+  });
+}
+
+const REVENUE: Record<Period, SparklinePoint[]> = {
+  week: dailyRevenue(7, 300_000),
+  month: dailyRevenue(30, 280_000),
+  quarter: dailyRevenue(90, 270_000),
+};
+
+const formatRubles = (value: number) => `${value.toLocaleString("ru-RU")} ₽`;
+
+const BILLING_SERIES: ChartFrameSeries[] = [
+  { id: "invoiced", label: "Выставлено" },
+  { id: "paid", label: "Оплачено" },
+];
+
+/** Invoiced and paid, in millions of rubles, by the buckets of each period. */
+const BILLING: Record<Period, { label: string; invoiced: number; paid: number }[]> = {
+  week: [
+    { label: "пн", invoiced: 0.42, paid: 0.31 },
+    { label: "вт", invoiced: 0.38, paid: 0.4 },
+    { label: "ср", invoiced: 0.51, paid: 0.36 },
+    { label: "чт", invoiced: 0.47, paid: 0.44 },
+    { label: "пт", invoiced: 0.56, paid: 0.52 },
+  ],
+  month: [
+    { label: "нед 37", invoiced: 2.1, paid: 1.8 },
+    { label: "нед 38", invoiced: 2.4, paid: 2.0 },
+    { label: "нед 39", invoiced: 1.9, paid: 2.2 },
+    { label: "нед 40", invoiced: 2.6, paid: 2.1 },
+  ],
+  quarter: [
+    { label: "авг", invoiced: 7.8, paid: 6.9 },
+    { label: "сен", invoiced: 8.1, paid: 7.6 },
+    { label: "окт", invoiced: 8.9, paid: 8.4 },
+  ],
+};
+
+const BILLING_MARGIN = { top: 8, bottom: 24, left: 36 };
+
+const formatMillionsShort = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
+const PLAN = [
+  { manager: "Анна Климова", value: 92 },
+  { manager: "Илья Петров", value: 74 },
+  { manager: "Марат Хасанов", value: 48 },
+];
+
+/** Display of an amount in millions: «5,1 млн ₽». */
+const formatMillions = (value: number) => `${String(value).replace(".", ",")} млн ₽`;
+
+const RECEIVABLES: ProgressSegment[] = [
+  { value: 5.1, label: "В срок", tone: "success" },
+  { value: 1.9, label: "До 30 дней", tone: "warning" },
+  { value: 1.2, label: "Больше 30 дней", tone: "danger" },
+];
+
+const PAYMENTS: Payment[] = [
+  { id: "p1", client: "ООО «Мостострой»", date: "7 окт.", amount: 2_480_000, late: false },
+  { id: "p2", client: "АО «Волга-Энерго»", date: "6 окт.", amount: 1_095_000, late: false },
+  { id: "p3", client: "ООО «Логистик Плюс»", date: "5 окт.", amount: 312_000, late: true },
+  { id: "p4", client: "ООО «Гранит»", date: "3 окт.", amount: 94_750, late: false },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Payment>[] = [
+  {
+    id: "client",
+    header: "Клиент",
+    cell: (row) => (
+      <span className={styles.client}>
+        {row.client}
+        {row.late ? <Badge.Root color="orange">С опозданием</Badge.Root> : null}
+      </span>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true, headerAlign: "end" },
+  {
+    id: "amount",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.amount),
+  },
+];
+
+export default function DashboardPattern() {
+  const [period, setPeriod] = React.useState<Period>("month");
+
+  return (
+    <PageContent.Section aria-labelledby="dashboard-title">
+      <PageContent.Header>
+        <PageContent.Title id="dashboard-title">Обзор</PageContent.Title>
+        <PageContent.Description>Продажи и оплаты по всем менеджерам.</PageContent.Description>
+        <PageContent.Actions>
+          <SegmentedControl.Root
+            aria-label="Период"
+            value={period}
+            onValueChange={(next) => setPeriod(next as Period)}
+          >
+            <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+            <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+            <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
+          </SegmentedControl.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Отчёт
+          </Button.Root>
+        </PageContent.Actions>
+      </PageContent.Header>
+      <PageContent.Body>
+        {/* Another period is another set of values: the row cross-fades instead of flipping. */}
+        <Crossfade state={period}>
+          <div className={styles.kpis}>
+            {KPIS[period].map((kpi) => (
+              <Card.Root key={kpi.label} variant="stat-trend">
+                <Card.Label>{kpi.label}</Card.Label>
+                <Card.Value>{kpi.value}</Card.Value>
+                <Card.Delta tone={kpi.tone}>{kpi.delta}</Card.Delta>
+              </Card.Root>
+            ))}
+          </div>
+        </Crossfade>
+
+        <Card.Root variant="panel">
+          <Card.Body>
+            <Sparkline data={REVENUE[period]} label="Выручка по дням" formatValue={formatRubles} />
+          </Card.Body>
+        </Card.Root>
+
+        <ChartFrame.Root series={BILLING_SERIES} formatValue={formatMillionsShort}>
+          <ChartFrame.Header>
+            <ChartFrame.Title as="h2">Выставлено и оплачено</ChartFrame.Title>
+            <ChartFrame.Description>Счета за период, млн ₽</ChartFrame.Description>
+          </ChartFrame.Header>
+          <ChartFrame.Plot
+            renderPlot={({ width, height, series }) => {
+              const rows = BILLING[period];
+              const top = Math.ceil(Math.max(...rows.map((row) => row.invoiced)));
+              const innerH = height - BILLING_MARGIN.top - BILLING_MARGIN.bottom;
+              const band = (width - BILLING_MARGIN.left) / rows.length;
+              const bar = Math.min(28, (band - 16) / series.length);
+              const y = (value: number) => BILLING_MARGIN.top + innerH * (1 - value / top);
+              return (
+                <svg width={width} height={height} aria-hidden="true">
+                  {[0, top / 2, top].map((tick) => (
+                    <g key={tick}>
+                      <line
+                        x1={BILLING_MARGIN.left}
+                        x2={width}
+                        y1={y(tick)}
+                        y2={y(tick)}
+                        stroke={tick === 0 ? chartColors.axis : chartColors.grid}
+                      />
+                      <text
+                        x={BILLING_MARGIN.left - 8}
+                        y={y(tick)}
+                        textAnchor="end"
+                        dominantBaseline="middle"
+                      >
+                        {tick.toLocaleString("ru-RU")}
+                      </text>
+                    </g>
+                  ))}
+                  {rows.map((row, i) => {
+                    const center = BILLING_MARGIN.left + band * i + band / 2;
+                    return (
+                      <g key={row.label}>
+                        {series.map((s, j) => {
+                          const value = s.id === "paid" ? row.paid : row.invoiced;
+                          return (
+                            <rect
+                              key={s.id}
+                              data-hidden={s.hidden}
+                              x={center - (bar * series.length) / 2 + bar * j}
+                              y={y(value)}
+                              width={bar - 2}
+                              height={y(0) - y(value)}
+                              rx={2}
+                              fill={s.color}
+                            />
+                          );
+                        })}
+                        <text x={center} y={height - 4} textAnchor="middle">
+                          {row.label}
+                        </text>
+                      </g>
+                    );
+                  })}
+                </svg>
+              );
+            }}
+          />
+          <ChartFrame.Legend />
+          <ChartFrame.Table
+            rows={BILLING[period].map((row) => ({
+              label: row.label,
+              values: { invoiced: row.invoiced, paid: row.paid },
+            }))}
+          />
+        </ChartFrame.Root>
+
+        <div className={styles.panels}>
+          <Card.Root variant="panel">
+            <Card.Header>
+              <Card.Title as="h2">План продаж</Card.Title>
+              <Typography as="span" variant="caption" tone="muted">
+                Октябрь
+              </Typography>
+            </Card.Header>
+            <Card.Body>
+              <div className={styles.bars}>
+                {PLAN.map((row) => (
+                  <ProgressBar
+                    key={row.manager}
+                    value={row.value}
+                    label={row.manager}
+                    tone={row.value < 50 ? "warning" : "accent"}
+                    showValue
+                  />
+                ))}
+              </div>
+            </Card.Body>
+          </Card.Root>
+
+          <Card.Root variant="panel">
+            <Card.Header>
+              <Card.Title as="h2">Дебиторка</Card.Title>
+              <Typography as="span" variant="caption" tone="muted">
+                8,2 млн ₽
+              </Typography>
+            </Card.Header>
+            <Card.Body>
+              <ProgressBar
+                segments={RECEIVABLES}
+                label="По сроку оплаты"
+                legend
+                formatValue={formatMillions}
+              />
+            </Card.Body>
+          </Card.Root>
+        </div>
+
+        <section className={styles.recent} aria-labelledby="payments-title">
+          <div className={styles.recentHeader}>
+            <Typography as="h2" variant="title-m" id="payments-title">
+              Последние оплаты
+            </Typography>
+            <LinkButton href="#invoices">Все счета</LinkButton>
+          </div>
+          <DataTable columns={COLUMNS} rows={PAYMENTS} getRowKey={(row) => row.id} paging="none" />
+        </section>
+      </PageContent.Body>
+    </PageContent.Section>
+  );
+}

package/dist/skill/patterns/detail-page.module.css

@@ -0,0 +1,74 @@
+/* Detail page: two columns that wrap into one on narrow screens, no breakpoints. */
+
+/* Status badge and due date in the header description, one line. */
+.status {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-2);
+}
+
+/* Main column grows; the side column keeps ~18rem and drops below once main would get < 30rem. */
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--prime-space-8) var(--prime-space-6);
+}
+
+.main {
+  display: grid;
+  flex: 999 1 calc(var(--prime-space-24) * 5);
+  gap: var(--prime-space-4);
+  min-width: 0;
+}
+
+.aside {
+  display: grid;
+  flex: 1 1 calc(var(--prime-space-24) * 3);
+  gap: var(--prime-space-4);
+  min-width: 0;
+}
+
+/* Totals under the table: the amounts end where the «Сумма» column ends (the table's cell padding). */
+.totals {
+  display: grid;
+  gap: var(--prime-space-2);
+  justify-self: end;
+  width: min(100%, calc(var(--prime-space-24) * 3));
+  margin: 0;
+  padding-inline: var(--prime-table-cell-padding-x);
+}
+
+.totalRow {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--prime-space-4);
+}
+
+.totalRow dd {
+  margin: 0;
+}
+
+.amount {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* Client card: who it is, then the facts as label → value pairs. */
+.client {
+  display: grid;
+  gap: var(--prime-space-5);
+}
+
+.person {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
+.personText {
+  display: grid;
+  min-width: 0;
+}

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

@@ -0,0 +1,209 @@
+/** A detail page: breadcrumb and status in the header, actions by weight, a main column with the line items and a side column with the client and the history. */
+import {
+  Avatar,
+  Badge,
+  Breadcrumb,
+  Button,
+  Card,
+  DataTable,
+  type DataTableColumn,
+  DescriptionList,
+  Dropdown,
+  Icon,
+  LinkButton,
+  PageContent,
+  Timeline,
+  Typography,
+} from "prime-ui-kit";
+
+import styles from "./detail-page.module.css";
+
+type Line = { id: string; name: string; quantity: number; unit: string; price: number };
+
+const LINES: Line[] = [
+  { id: "l1", name: "Лицензия CRM, тариф «Бизнес»", quantity: 25, unit: "мест", price: 12_000 },
+  { id: "l2", name: "Внедрение и настройка", quantity: 40, unit: "ч", price: 3_500 },
+  { id: "l3", name: "Обучение менеджеров", quantity: 2, unit: "дня", price: 18_000 },
+];
+
+const HISTORY = [
+  { id: "h1", title: "Счёт открыт клиентом", date: "2 окт., 11:40" },
+  { id: "h2", title: "Отправлен на billing@veter.ru", date: "30 сент., 16:05" },
+  { id: "h3", title: "Создан · Анна Климова", date: "30 сент., 15:52" },
+];
+
+const MONEY = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+const COUNT = new Intl.NumberFormat("ru-RU");
+
+const NET = LINES.reduce((sum, line) => sum + line.quantity * line.price, 0);
+const VAT = Math.round(NET * 0.2);
+
+const TOTALS = [
+  { label: "Без НДС", value: MONEY.format(NET) },
+  { label: "НДС 20%", value: MONEY.format(VAT) },
+];
+
+const COLUMNS: DataTableColumn<Line>[] = [
+  { id: "name", header: "Позиция", accessor: "name" },
+  {
+    id: "quantity",
+    header: "Кол-во",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => `${COUNT.format(row.quantity)} ${row.unit}`,
+  },
+  {
+    id: "price",
+    header: "Цена",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.price),
+  },
+  {
+    id: "sum",
+    header: "Сумма",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => MONEY.format(row.quantity * row.price),
+  },
+];
+
+export default function DetailPagePattern() {
+  return (
+    <PageContent.Section aria-labelledby="invoice-title">
+      <PageContent.Header>
+        <Breadcrumb.Root>
+          <Breadcrumb.Item href="#invoices">Счета</Breadcrumb.Item>
+          <Breadcrumb.Item current>№ 2026-0418</Breadcrumb.Item>
+        </Breadcrumb.Root>
+        <PageContent.Title id="invoice-title">Счёт № 2026-0418</PageContent.Title>
+        <PageContent.Description>
+          <span className={styles.status}>
+            <Badge.Root color="blue">Отправлен</Badge.Root>
+            Оплатить до 14 октября
+          </span>
+        </PageContent.Description>
+        <PageContent.Actions>
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Button.Root variant="soft" tone="neutral" aria-label="Другие действия">
+                <Button.Icon>
+                  <Icon name="action.more" />
+                </Button.Icon>
+              </Button.Root>
+            </Dropdown.Trigger>
+            <Dropdown.Content>
+              <Dropdown.Item>Дублировать</Dropdown.Item>
+              <Dropdown.Item>Скачать PDF</Dropdown.Item>
+              <Dropdown.Separator />
+              <Dropdown.Item tone="danger">Аннулировать счёт</Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.send" />
+            </Button.Icon>
+            Напомнить
+          </Button.Root>
+          <Button.Root>Отметить оплату</Button.Root>
+        </PageContent.Actions>
+      </PageContent.Header>
+      <PageContent.Body>
+        <div className={styles.columns}>
+          <section className={styles.main} aria-labelledby="invoice-lines">
+            <Typography as="h2" variant="title-m" id="invoice-lines">
+              Позиции
+            </Typography>
+            <DataTable
+              columns={COLUMNS}
+              rows={LINES}
+              getRowKey={(row) => row.id}
+              paging="none"
+              highlightRowOnHover={false}
+            />
+            {/* Totals line up with the «Сумма» column of the table above: a layout of its own. */}
+            <dl className={styles.totals}>
+              {TOTALS.map((row) => (
+                <div key={row.label} className={styles.totalRow}>
+                  <dt>
+                    <Typography variant="body-m" tone="secondary">
+                      {row.label}
+                    </Typography>
+                  </dt>
+                  <dd>
+                    <Typography variant="body-m" className={styles.amount}>
+                      {row.value}
+                    </Typography>
+                  </dd>
+                </div>
+              ))}
+              <div className={styles.totalRow}>
+                <dt>
+                  <Typography variant="title-m">К оплате</Typography>
+                </dt>
+                <dd>
+                  <Typography variant="title-m" className={styles.amount}>
+                    {MONEY.format(NET + VAT)}
+                  </Typography>
+                </dd>
+              </div>
+            </dl>
+          </section>
+          <aside className={styles.aside} aria-label="Клиент и история">
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">Клиент</Card.Title>
+              </Card.Header>
+              <Card.Body>
+                <div className={styles.client}>
+                  <span className={styles.person}>
+                    <Avatar.Root color="teal">
+                      <Avatar.Fallback>СВ</Avatar.Fallback>
+                    </Avatar.Root>
+                    <span className={styles.personText}>
+                      <Typography as="span" variant="title-s">
+                        ООО «Северный ветер»
+                      </Typography>
+                      <Typography as="span" variant="caption" tone="muted">
+                        ИНН 7704 512 908
+                      </Typography>
+                    </span>
+                  </span>
+                  <DescriptionList.Root orientation="vertical">
+                    <DescriptionList.Item label="Контакт">
+                      Ольга Мартынова, финансовый директор
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Почта для счетов">
+                      <LinkButton href="mailto:billing@veter.ru">billing@veter.ru</LinkButton>
+                    </DescriptionList.Item>
+                  </DescriptionList.Root>
+                </div>
+              </Card.Body>
+            </Card.Root>
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">История</Card.Title>
+              </Card.Header>
+              <Card.Body>
+                <Timeline.Root>
+                  <Timeline.Group>
+                    {HISTORY.map((event) => (
+                      <Timeline.Item key={event.id}>
+                        <Timeline.Title>{event.title}</Timeline.Title>
+                        <Timeline.Meta>{event.date}</Timeline.Meta>
+                      </Timeline.Item>
+                    ))}
+                  </Timeline.Group>
+                </Timeline.Root>
+              </Card.Body>
+            </Card.Root>
+          </aside>
+        </div>
+      </PageContent.Body>
+    </PageContent.Section>
+  );
+}

package/dist/skill/patterns/form-drawer.module.css

@@ -0,0 +1,14 @@
+/* Form in a Drawer: group → group 32; a Fieldset sets heading → fields 16 and field → field 20. */
+
+.form {
+  display: grid;
+  gap: var(--prime-space-8);
+}
+
+/* Two short fields side by side when the panel is wide enough; tops aligned. */
+.pair {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 3)), 1fr));
+  align-items: start;
+  gap: var(--prime-space-5);
+}