prime-ui-kit 0.17.0 → 0.19.0

package/src/layout/page/examples/screen.tsx

@@ -1,4 +1,4 @@
-/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, sections with a heading column and a panel, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `layout`, `maxWidth`. */
+/** A settings page as a document: the path in the top bar that repeats the title once it scrolls away, the large title in the flow, each section a card with its own heading, a form saved by its own button, switches that apply at once and a danger zone with a confirm — `collapse`, `maxWidth`, `Card.Header`. */
 import {
   Breadcrumb,
   Button,
@@ -88,118 +88,107 @@ export default function PageScreenExample() {
         </Page.Heading>
       </Page.Header>
       <Page.Body>
-        <Page.Section
-          layout="aside"
-          label="Компания"
-          description="Попадают в счета, акты и письма клиентам."
-        >
-          <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
-            <Card.Root variant="panel">
-              <Card.Body>
-                <Fieldset disabled={saving}>
-                  <Input.Root label="Название">
+        <form noValidate onSubmit={save} onReset={() => setInnError(undefined)}>
+          <Card.Root variant="panel">
+            <Card.Header>
+              <Card.Title as="h2">Компания</Card.Title>
+              <Card.Description>Попадают в счета, акты и письма клиентам.</Card.Description>
+            </Card.Header>
+            <Card.Body>
+              <Fieldset disabled={saving}>
+                <Input.Root label="Название">
+                  <Input.Wrapper>
+                    <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                  </Input.Wrapper>
+                </Input.Root>
+                <div className={styles.pair}>
+                  <Input.Root label="ИНН" error={innError} hint="10 или 12 цифр" reserveSupportRow>
                     <Input.Wrapper>
-                      <Input.Field name="name" defaultValue="ООО «Прайм Софт»" />
+                      <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
                     </Input.Wrapper>
                   </Input.Root>
-                  <div className={styles.pair}>
-                    <Input.Root
-                      label="ИНН"
-                      error={innError}
-                      hint="10 или 12 цифр"
-                      reserveSupportRow
-                    >
-                      <Input.Wrapper>
-                        <Input.Field name="inn" inputMode="numeric" defaultValue="7704512908" />
-                      </Input.Wrapper>
-                    </Input.Root>
-                    <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
-                      <Select.Trigger>
-                        <Select.Value />
-                      </Select.Trigger>
-                      <Select.Content searchable>
-                        {TIMEZONES.map((zone) => (
-                          <Select.Item key={zone.value} value={zone.value}>
-                            {zone.label}
-                          </Select.Item>
-                        ))}
-                      </Select.Content>
-                    </Select.Root>
-                  </div>
-                  <Textarea.Root
-                    name="address"
-                    label="Юридический адрес"
-                    optional
-                    rows={2}
-                    defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
-                  />
-                </Fieldset>
-              </Card.Body>
-              <Card.Footer>
-                <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
-                  Отменить изменения
-                </Button.Root>
-                <Button.Root type="submit" loading={saving}>
-                  {saved ? "Сохранено" : "Сохранить"}
-                </Button.Root>
-              </Card.Footer>
-            </Card.Root>
-          </form>
-        </Page.Section>
-
-        <Page.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}
-                  >
-                    <Switch.Label>{alert.label}</Switch.Label>
-                  </Switch.Root>
-                ))}
+                  <Select.Root label="Часовой пояс" defaultValue="Europe/Moscow">
+                    <Select.Trigger>
+                      <Select.Value />
+                    </Select.Trigger>
+                    <Select.Content searchable>
+                      {TIMEZONES.map((zone) => (
+                        <Select.Item key={zone.value} value={zone.value}>
+                          {zone.label}
+                        </Select.Item>
+                      ))}
+                    </Select.Content>
+                  </Select.Root>
+                </div>
+                <Textarea.Root
+                  name="address"
+                  label="Юридический адрес"
+                  optional
+                  rows={2}
+                  defaultValue="125009, Москва, ул. Тверская, д. 7, офис 412"
+                />
               </Fieldset>
             </Card.Body>
+            <Card.Footer>
+              <Button.Root type="reset" variant="ghost" tone="neutral" disabled={saving}>
+                Отменить изменения
+              </Button.Root>
+              <Button.Root type="submit" loading={saving}>
+                {saved ? "Сохранено" : "Сохранить"}
+              </Button.Root>
+            </Card.Footer>
           </Card.Root>
-        </Page.Section>
+        </form>
 
-        <Page.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>
-                <ConfirmDialog.Root
-                  title="Удалить «Прайм Софт»?"
-                  description="312 счетов, 48 клиентов и вся история удалятся без возможности восстановления."
-                  confirmLabel="Удалить пространство"
-                  onConfirm={removeWorkspace}
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title as="h2">Уведомления</Card.Title>
+            <Card.Description>Включаются сразу, без сохранения.</Card.Description>
+          </Card.Header>
+          <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>
+
+        <Card.Root variant="panel">
+          <Card.Header>
+            <Card.Title as="h2">Рабочее пространство</Card.Title>
+            <Card.Description>Действия, которые нельзя отменить.</Card.Description>
+          </Card.Header>
+          <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>
-        </Page.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>
       </Page.Body>
     </Page.Root>
   );

package/src/layout/page/examples/sections.tsx

@@ -1,5 +1,5 @@
-/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading, a heading column beside a panel — `Page.Section`, `label`, `description`, `Page.Actions`, `layout`. */
-import { Card, DataTable, type DataTableColumn, LinkButton, Page, Typography } from "prime-ui-kit";
+/** A page with titled sections: tiles of one screen close together, a new topic set off by air, a link at the end of the heading — `Page.Section`, `label`, `description`, `Page.Actions`. */
+import { Card, DataTable, type DataTableColumn, LinkButton, Page } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -55,19 +55,6 @@ export default function PageSectionsExample() {
           </Page.Actions>
           <DataTable columns={COLUMNS} rows={INVOICES} getRowKey={(row) => row.id} paging="none" />
         </Page.Section>
-        <Page.Section
-          layout="aside"
-          label="Реквизиты в счетах"
-          description="Попадают в каждый новый счёт."
-        >
-          <Card.Root variant="panel">
-            <Card.Body>
-              <Typography variant="body-m" tone="secondary">
-                ООО «Прайм Софт», ИНН 7701234567, р/с в Т-Банке.
-              </Typography>
-            </Card.Body>
-          </Card.Root>
-        </Page.Section>
       </Page.Body>
     </div>
   );

package/src/layout/sidebar/COMPONENT.md

@@ -299,6 +299,7 @@ Put `<Sidebar.Toggle variant="header" />` next to `Sidebar.Brand` in the header,
 ## States
 | State | Driven by | DOM |
 |---|---|---|
+| held | a `Page.Guard` that is `busy` or `dirty` on the page | a press on `Sidebar.Item` or `Sidebar.Brand` stops before it navigates (a router link included) and the panel stays; `dirty` asks first, then repeats it |
 | mode | `mode` / `defaultMode` | Root `data-mode`, `data-panel-mode` (the last visible mode while hidden); `<nav inert>` while hidden |
 | off-canvas | `offCanvas="always"`, or `"auto"` + viewport < 768px | Root `data-off-canvas`, `data-state="open" \| "closed"`; `<nav inert>` while closed; the kit scrim (`role="presentation"`) while open; in an `AppShell` the shell Root `data-off-canvas` |
 | placing | the viewport crossed the off-canvas breakpoint (not a person's choice) | Root `data-placing` for one painted frame: the rail lands at its new width with no motion (no growing from 0, no folding rows, no sliding panel) |

package/src/styles/theme-dark.css

@@ -6,7 +6,7 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-950);
   --prime-color-accent-soft-hover: color-mix(in srgb, var(--prime-ref-color-cobalt-500) 28%, transparent);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-400);
-  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-black) 50%, transparent);
+  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-black) 28%, transparent);
   --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-gray-875) 76%, transparent);
   --prime-color-bg-glass-edge: color-mix(in srgb, var(--prime-ref-color-white) 28%, transparent);
   --prime-color-bg-inverse: var(--prime-ref-color-gray-100);

package/src/styles/theme-light.css

@@ -69,7 +69,7 @@
   --prime-color-accent-soft: var(--prime-ref-color-cobalt-100);
   --prime-color-accent-soft-hover: var(--prime-ref-color-cobalt-200);
   --prime-color-accent-text: var(--prime-ref-color-cobalt-700);
-  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-gray-925) 14%, transparent);
+  --prime-color-bg-edge-shadow: color-mix(in srgb, var(--prime-ref-color-gray-925) 8%, transparent);
   --prime-color-bg-glass: color-mix(in srgb, var(--prime-ref-color-white) 72%, transparent);
   --prime-color-bg-glass-edge: color-mix(in srgb, var(--prime-ref-color-white) 85%, transparent);
   --prime-color-bg-glass-solid: var(--prime-color-layer-floating-bg);
@@ -367,6 +367,7 @@
   --prime-message-padding-x: var(--prime-ref-space-3);
   --prime-message-padding-y: var(--prime-ref-space-2);
   --prime-message-radius: var(--prime-ref-radius-14);
+  --prime-message-sticker: 10rem;
   --prime-message-tail-height: var(--prime-ref-space-4);
   --prime-message-tail-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16' preserveAspectRatio='none'%3E%3Cpath d='M8 0C8 7 6.5 12.5 0.6 15.3C0.2 15.5 0.3 16 0.8 16H8Z'/%3E%3C/svg%3E");
   --prime-message-tail-width: var(--prime-ref-space-2);

package/dist/components/data-table/context.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-import type { ControlSize } from "../../internal/states";
-import type { DataTableLabels } from "./DataTable";
-import type { DataTableColumn } from "./types";
-/** What `DataTable.ColumnsMenu` reads from the table it sits in (through `toolbar`). */
-export type DataTableColumnsContextValue = {
-    /** Every column, hidden ones included, in table order. */
-    columns: DataTableColumn<never>[];
-    hidden: ReadonlySet<string>;
-    setHidden: (hidden: string[]) => void;
-    labels: DataTableLabels;
-    size: ControlSize;
-};
-export declare const DataTableColumnsContext: React.Context<DataTableColumnsContextValue | null>;

package/dist/components/scroll-container/useWheelToInline.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-/**
- * A vertical wheel over a strip that scrolls only sideways (`axis="horizontal"`) scrolls the strip:
- * a mouse has no other way to reach what is hidden to the side. The browser's own sideways wheel
- * (a trackpad swipe, Shift + wheel) stays native, and so does a page scroll that passes over the
- * strip (a wheel gesture that began outside it keeps scrolling the page) or a strip already at the
- * edge in that direction (the wheel chains to the page). The steps glide to an accumulated target
- * (instant under reduced motion), so fast wheeling loses no distance.
- */
-export declare function useWheelToInline(ref: React.RefObject<HTMLElement | null>, enabled: boolean): void;