prime-ui-kit 0.15.0 → 0.17.0

package/src/components/crossfade/examples/examples.module.css

@@ -16,7 +16,7 @@
   max-width: 100%;
 }
 
-/* Placeholder rows share the data rows' geometry: the swap to data does not change the height. */
+/* Placeholder bars share the data's geometry: the swap to data does not change the height. */
 .payerBar {
   width: 55%;
 }
@@ -25,38 +25,6 @@
   width: 20%;
 }
 
-.list {
-  display: grid;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.listRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-4);
-  padding-block: var(--prime-space-3);
-  border-bottom: var(--prime-border-width) solid var(--prime-color-border-subtle);
-}
-
-.listRow:last-child {
-  border-bottom: 0;
-}
-
-.amount {
-  font-variant-numeric: tabular-nums;
-}
-
-.facts {
-  display: grid;
-  gap: var(--prime-space-3);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 /* fill.tsx: a page panel of a fixed height; the board region takes what the rows above leave. */
 .fillPage {
   display: flex;
@@ -84,10 +52,3 @@
 .column {
   align-self: stretch;
 }
-
-.fact {
-  display: grid;
-  grid-template-columns: calc(var(--prime-space-24) + var(--prime-space-4)) minmax(0, 1fr);
-  align-items: baseline;
-  gap: var(--prime-space-4);
-}

package/src/components/crossfade/examples/fill.tsx

@@ -1,13 +1,5 @@
 /** A deal board that fills its panel's height while it swaps between loading and data, and a notice slot above it that takes no room while empty — `fill`, `state`. */
-import {
-  Banner,
-  Button,
-  Card,
-  Crossfade,
-  ScrollContainer,
-  Skeleton,
-  Typography,
-} from "prime-ui-kit";
+import { Banner, Button, Card, Crossfade, List, ScrollContainer, Skeleton } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -21,6 +13,7 @@ const STAGES = [
 export default function CrossfadeFillExample() {
   const [status, setStatus] = React.useState<"loading" | "ready">("ready");
   const [notice, setNotice] = React.useState<string | null>(null);
+  const [dealId, setDealId] = React.useState<string | null>(null);
 
   const refresh = () => {
     setNotice(null);
@@ -55,19 +48,23 @@ export default function CrossfadeFillExample() {
           <ScrollContainer className={styles.board}>
             {STAGES.map((stage) => (
               <Card.Root key={stage.id} className={styles.column}>
-                <Card.Body>
-                  <Typography as="h3" variant="title-s">
+                <Card.Header>
+                  <Card.Title as="h3">
                     {stage.title} · {stage.deals.length}
-                  </Typography>
-                  <ul className={styles.facts}>
+                  </Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <List.Root aria-label={stage.title}>
                     {stage.deals.map((deal) => (
-                      <li key={deal}>
-                        <Typography as="span" variant="body-m">
-                          {deal}
-                        </Typography>
-                      </li>
+                      <List.Item
+                        key={deal}
+                        current={deal === dealId}
+                        onClick={() => setDealId(deal)}
+                      >
+                        <List.ItemText>{deal}</List.ItemText>
+                      </List.Item>
                     ))}
-                  </ul>
+                  </List.Root>
                 </Card.Body>
               </Card.Root>
             ))}

package/src/components/crossfade/examples/overview.tsx

@@ -3,11 +3,11 @@ import {
   Button,
   Card,
   Crossfade,
+  DescriptionList,
   EmptyPage,
   Icon,
   SegmentedControl,
   Skeleton,
-  Typography,
 } from "prime-ui-kit";
 import * as React from "react";
 
@@ -43,29 +43,27 @@ export default function CrossfadeOverviewExample() {
         </Card.Header>
         <Card.Body>
           <Crossfade state={status} aria-busy={status === "loading"}>
+            {/* The placeholder is the same list with bars for the text: the swap keeps the height. */}
             {status === "loading" ? (
-              <ul className={styles.list}>
+              <DescriptionList.Root>
                 {PAYMENTS.map((payment) => (
-                  <li key={payment.id} className={styles.listRow}>
-                    <Skeleton className={styles.payerBar} />
+                  <DescriptionList.Item
+                    key={payment.id}
+                    label={<Skeleton className={styles.payerBar} />}
+                  >
                     <Skeleton className={styles.amountBar} />
-                  </li>
+                  </DescriptionList.Item>
                 ))}
-              </ul>
+              </DescriptionList.Root>
             ) : null}
             {status === "ready" ? (
-              <ul className={styles.list}>
+              <DescriptionList.Root>
                 {PAYMENTS.map((payment) => (
-                  <li key={payment.id} className={styles.listRow}>
-                    <Typography as="span" variant="body-m">
-                      {payment.payer}
-                    </Typography>
-                    <Typography as="span" variant="body-m" className={styles.amount}>
-                      {payment.amount}
-                    </Typography>
-                  </li>
+                  <DescriptionList.Item key={payment.id} label={payment.payer}>
+                    {payment.amount}
+                  </DescriptionList.Item>
                 ))}
-              </ul>
+              </DescriptionList.Root>
             ) : null}
             {status === "empty" ? (
               <EmptyPage.Root size="s" aria-labelledby="payments-empty">

package/src/components/crossfade/examples/record-switch.tsx

@@ -1,5 +1,5 @@
 /** A detail panel keyed by the record id: picking another client cross-fades the details of a different height — `state`. */
-import { Card, Crossfade, SegmentedControl, Typography } from "prime-ui-kit";
+import { Card, Crossfade, DescriptionList, SegmentedControl } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -47,18 +47,13 @@ export default function CrossfadeRecordSwitchExample() {
       <Card.Root variant="panel">
         <Card.Body>
           <Crossfade state={client.id}>
-            <ul className={styles.facts} aria-label={client.name}>
+            <DescriptionList.Root aria-label={client.name}>
               {client.facts.map(([term, value]) => (
-                <li key={term} className={styles.fact}>
-                  <Typography as="span" variant="body-s" tone="secondary">
-                    {term}
-                  </Typography>
-                  <Typography as="span" variant="body-m">
-                    {value}
-                  </Typography>
-                </li>
+                <DescriptionList.Item key={term} label={term}>
+                  {value}
+                </DescriptionList.Item>
               ))}
-            </ul>
+            </DescriptionList.Root>
           </Crossfade>
         </Card.Body>
       </Card.Root>

package/src/components/crossfade/examples/screen.module.css

@@ -11,30 +11,7 @@
   padding-block-end: var(--prime-space-6);
 }
 
-/* Skeleton rows mirror the account rows, so the card keeps its height when data arrives. */
-.nameBar {
-  width: 50%;
-}
-
+/* A balance placeholder as wide as a balance, so the value column keeps its shape. */
 .balanceBar {
   width: 35%;
 }
-
-/* The card stretches to its neighbour's height: rows stay at the top. */
-.accounts {
-  display: grid;
-  align-content: start;
-  gap: var(--prime-space-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.account {
-  display: grid;
-  gap: var(--prime-space-1);
-}
-
-.amount {
-  font-variant-numeric: tabular-nums;
-}

package/src/components/crossfade/examples/screen.tsx

@@ -1,15 +1,15 @@
-/** Screen states: the title and the date of the statement in the app header, a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states — `state`. */
+/** Screen states: the title and the date of the statement in its top bar, a page-level error in a Banner with a retry, a region loading with a Skeleton of its rows and a table skeleton, the table error in place and a first-run EmptyPage; regions cross-fade between states — `state`. */
 import {
-  AppHeader,
   Banner,
   Button,
   Card,
   Crossfade,
   DataTable,
   type DataTableColumn,
+  DescriptionList,
   EmptyPage,
   Icon,
-  PageContent,
+  Page,
   Skeleton,
   Typography,
   useNotifications,
@@ -67,131 +67,115 @@ export default function CrossfadeScreenExample() {
   };
 
   return (
-    <>
-      {/* The header carries the page: the only h1 and a line of data, here the date of the last
-          statement — it moves on once the statement arrives. Main has no PageContent.Header. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
-          <AppHeader.Title>
-            Сверка с банком
-            <AppHeader.Description>
-              2 счёта · выписка на {status === "ready" ? "7" : "6"} октября
-            </AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-      </AppHeader.Root>
+    <Page.Root>
+      {/* A work screen titles itself in its top bar: the only h1 and a line of data, here the date of
+          the last statement — it moves on once the statement arrives. */}
 
-      <PageContent.Root>
-        <PageContent.Body>
-          {/* The page banner and the panels are one block: the banner, with the 40 below it, comes and
+      <Page.TopBar>
+        <Page.Heading>
+          <Page.Title>Сверка с банком</Page.Title>
+          <Page.Description>
+            2 счёта · выписка на {status === "ready" ? "7" : "6"} октября
+          </Page.Description>
+        </Page.Heading>
+      </Page.TopBar>
+      <Page.Body>
+        {/* The page banner and the panels are one block: the banner, with the 40 below it, comes and
             goes inside a Crossfade, so the panels glide instead of jumping. */}
-          <div className={styles.lead}>
-            <Crossfade state={status === "error" ? "error" : "ok"}>
-              {status === "error" ? (
-                <div className={styles.bannerSlot}>
-                  <Banner.Root tone="danger">
-                    <Banner.Content>
-                      <Banner.Icon>
-                        <Icon name="status.danger" />
-                      </Banner.Icon>
-                      <Banner.Title>Выписка за 7 октября не получена</Banner.Title>
-                      <Banner.Description>
-                        Т-Банк не ответил на запрос. Остатки показаны на 6 октября.
-                      </Banner.Description>
-                      <Banner.Actions>
-                        <Button.Root tone="danger" onClick={retry}>
-                          Повторить
-                        </Button.Root>
-                      </Banner.Actions>
-                    </Banner.Content>
-                  </Banner.Root>
-                </div>
-              ) : null}
-            </Crossfade>
+        <div className={styles.lead}>
+          <Crossfade state={status === "error" ? "error" : "ok"}>
+            {status === "error" ? (
+              <div className={styles.bannerSlot}>
+                <Banner.Root tone="danger">
+                  <Banner.Content>
+                    <Banner.Icon>
+                      <Icon name="status.danger" />
+                    </Banner.Icon>
+                    <Banner.Title>Выписка за 7 октября не получена</Banner.Title>
+                    <Banner.Description>
+                      Т-Банк не ответил на запрос. Остатки показаны на 6 октября.
+                    </Banner.Description>
+                    <Banner.Actions>
+                      <Button.Root tone="danger" onClick={retry}>
+                        Повторить
+                      </Button.Root>
+                    </Banner.Actions>
+                  </Banner.Content>
+                </Banner.Root>
+              </div>
+            ) : null}
+          </Crossfade>
 
-            <PageContent.Grid>
-              <PageContent.Cell span={6}>
-                <Card.Root variant="panel" aria-busy={status === "loading"}>
-                  <Card.Header>
-                    <Card.Title as="h2">Остатки</Card.Title>
-                    <Typography as="span" variant="caption" tone="muted">
-                      {status === "ready" ? "на 7 октября" : "на 6 октября"}
-                    </Typography>
-                  </Card.Header>
-                  <Card.Body>
-                    {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
-                    <Crossfade state={status === "loading" ? "loading" : "ready"}>
-                      {status === "loading" ? (
-                        <ul className={styles.accounts}>
-                          {ACCOUNTS.map((account) => (
-                            <li key={account.name} className={styles.account}>
-                              <Skeleton className={styles.nameBar} />
-                              {/* title-m is the l text tier: 16 / 24. */}
-                              <Skeleton size="l" className={styles.balanceBar} />
-                            </li>
-                          ))}
-                        </ul>
-                      ) : (
-                        <ul className={styles.accounts}>
-                          {ACCOUNTS.map((account) => (
-                            <li key={account.name} className={styles.account}>
-                              <Typography as="span" variant="body-m" tone="secondary">
-                                {account.name}
-                              </Typography>
-                              <Typography as="span" variant="title-m" className={styles.amount}>
-                                {account.balance}
-                              </Typography>
-                            </li>
-                          ))}
-                        </ul>
-                      )}
-                    </Crossfade>
-                  </Card.Body>
-                </Card.Root>
-              </PageContent.Cell>
+          <Page.Grid>
+            <Page.Cell span={6}>
+              <Card.Root variant="panel" aria-busy={status === "loading"}>
+                <Card.Header>
+                  <Card.Title as="h2">Остатки</Card.Title>
+                  <Typography as="span" variant="caption" tone="muted">
+                    {status === "ready" ? "на 7 октября" : "на 6 октября"}
+                  </Typography>
+                </Card.Header>
+                <Card.Body>
+                  {/* Loading ↔ data cross-fade in place; the table below swaps its body the same way. */}
+                  <Crossfade state={status === "loading" ? "loading" : "ready"}>
+                    {/* The accounts are known: only their balances wait, as bars of the value. */}
+                    <DescriptionList.Root>
+                      {ACCOUNTS.map((account) => (
+                        <DescriptionList.Item key={account.name} label={account.name}>
+                          {status === "loading" ? (
+                            <Skeleton className={styles.balanceBar} />
+                          ) : (
+                            account.balance
+                          )}
+                        </DescriptionList.Item>
+                      ))}
+                    </DescriptionList.Root>
+                  </Crossfade>
+                </Card.Body>
+              </Card.Root>
+            </Page.Cell>
 
-              <PageContent.Cell span={6}>
-                <Card.Root variant="panel">
-                  <Card.Header>
-                    <Card.Title as="h2">Правила разнесения</Card.Title>
-                  </Card.Header>
-                  <Card.Body>
-                    <EmptyPage.Root size="s" aria-labelledby="rules-empty">
-                      <EmptyPage.Icon tone="accent">
-                        <Icon name="action.filter" />
-                      </EmptyPage.Icon>
-                      <EmptyPage.Title as="h3" id="rules-empty">
-                        Правил пока нет
-                      </EmptyPage.Title>
-                      <EmptyPage.Description>
-                        Правило свяжет платёж со счётом по ИНН или назначению.
-                      </EmptyPage.Description>
-                      <EmptyPage.Actions>
-                        <Button.Root variant="soft" tone="neutral">
-                          Создать правило
-                        </Button.Root>
-                      </EmptyPage.Actions>
-                    </EmptyPage.Root>
-                  </Card.Body>
-                </Card.Root>
-              </PageContent.Cell>
-            </PageContent.Grid>
-          </div>
+            <Page.Cell span={6}>
+              <Card.Root variant="panel">
+                <Card.Header>
+                  <Card.Title as="h2">Правила разнесения</Card.Title>
+                </Card.Header>
+                <Card.Body>
+                  <EmptyPage.Root size="s" aria-labelledby="rules-empty">
+                    <EmptyPage.Icon tone="accent">
+                      <Icon name="action.filter" />
+                    </EmptyPage.Icon>
+                    <EmptyPage.Title as="h3" id="rules-empty">
+                      Правил пока нет
+                    </EmptyPage.Title>
+                    <EmptyPage.Description>
+                      Правило свяжет платёж со счётом по ИНН или назначению.
+                    </EmptyPage.Description>
+                    <EmptyPage.Actions>
+                      <Button.Root variant="soft" tone="neutral">
+                        Создать правило
+                      </Button.Root>
+                    </EmptyPage.Actions>
+                  </EmptyPage.Root>
+                </Card.Body>
+              </Card.Root>
+            </Page.Cell>
+          </Page.Grid>
+        </div>
 
-          <PageContent.Section label="Неразнесённые платежи">
-            <DataTable
-              columns={COLUMNS}
-              rows={status === "ready" ? PAYMENTS : []}
-              getRowKey={(row) => row.id}
-              paging="none"
-              loading={status === "loading"}
-              loadingRows={3}
-              error={status === "error" ? "Платежи появятся после загрузки выписки" : undefined}
-              empty="Все платежи разнесены"
-            />
-          </PageContent.Section>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+        <Page.Section label="Неразнесённые платежи">
+          <DataTable
+            columns={COLUMNS}
+            rows={status === "ready" ? PAYMENTS : []}
+            getRowKey={(row) => row.id}
+            paging="none"
+            loading={status === "loading"}
+            loadingRows={3}
+            loadError={status === "error" ? "Платежи появятся после загрузки выписки" : undefined}
+            empty="Все платежи разнесены"
+          />
+        </Page.Section>
+      </Page.Body>
+    </Page.Root>
   );
 }