prime-ui-kit 0.14.0 → 0.16.0

package/src/components/file-upload/examples/examples.module.css

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-2);
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 /* Tile scenarios (gallery, file-cards, saving): a wider form column, caption → field 8. */
@@ -28,18 +28,12 @@
   flex: 1;
 }
 
-/* in-form.tsx: header → field 32 → actions 32 (foundation §1). */
+/* in-form.tsx: field → actions 32 (foundation §1). */
 .form {
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-8);
-  width: min(100%, var(--prime-modal-width-s));
-}
-
-.formHeader {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 .formActions {
@@ -61,7 +55,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-2);
-  width: min(100%, var(--prime-modal-width-m));
+  width: min(100%, var(--prime-layout-form-width-m));
 }
 
 .composerRow {
@@ -89,7 +83,7 @@
   align-items: center;
   gap: var(--prime-space-4);
   width: 100%;
-  max-width: var(--prime-modal-width-s);
+  max-width: var(--prime-layout-form-width-s);
 }
 
 /* The whole avatar is the drop target: a round zone that hugs it. */

package/src/components/file-upload/examples/file-cards.tsx

@@ -1,4 +1,4 @@
-/** Materials of a warehouse inspection as cards: photos and documents in one grid, each with its picture or format and the name with the size; new files upload in their cards and the order is set by drag or Alt + arrows — `trigger`, `layout`, `defaultValue`, `queue`. */
+/** Materials of a warehouse inspection as cards: photos and documents in one grid, each with its picture or format and the name with the size in megabytes as the report gives it; new files upload in their cards and the order is set by drag or Alt + arrows — `trigger`, `layout`, `defaultValue`, `queue`, `formatSize`. */
 import { FileUpload, type FileUploadFile, type UploadContext, useUploadQueue } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -27,6 +27,14 @@ const MATERIALS: readonly FileUploadFile[] = [
   { id: "insp-stock", name: "Остатки на 12 марта.xlsx", size: 96_000 },
 ];
 
+/** Sizes as the inspection report gives them: megabytes with two decimals. */
+const MEGABYTES = new Intl.NumberFormat("ru-RU", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const formatMegabytes = (bytes: number) => `${MEGABYTES.format(bytes / 1024 / 1024)} МБ`;
+
 /** A stand-in for the server: sends a file in a few steps and answers with its address. */
 function sendFile(file: File, { signal, onProgress }: UploadContext): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -58,6 +66,7 @@ export default function FileUploadFileCardsExample() {
         multiple
         defaultValue={MATERIALS}
         queue={queue}
+        formatSize={formatMegabytes}
       />
     </div>
   );

package/src/components/file-upload/examples/gallery.tsx

@@ -1,4 +1,4 @@
-/** An image gallery of an office listing: the first photo is the cover on two tiles and a photo dragged first takes its place, new photos upload in their tiles, and the add tile counts up to the limit — `trigger`, `layout`, `cover`, `max`, `value`, `queue`. */
+/** An image gallery of an office listing: the first photo is the cover on two tiles and a photo dragged first takes its place, new photos upload in their tiles, one fails and retries, and the add tile counts up to the limit and then says so — `trigger`, `layout`, `cover`, `max`, `value`, `queue`. */
 import { FileUpload, type FileUploadFile, type UploadContext, useUploadQueue } from "prime-ui-kit";
 import * as React from "react";
 
@@ -94,7 +94,7 @@ export default function FileUploadGalleryExample() {
         cover
         accept="image/*"
         multiple
-        max={12}
+        max={6}
         value={photos}
         onValueChange={setPhotos}
         queue={queue}

package/src/components/file-upload/examples/in-form.tsx

@@ -4,7 +4,9 @@ import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const HINT = "PDF до 20 МБ, все страницы";
+const HINT = "Все страницы, с подписями обеих сторон";
+/** The zone names the formats the check takes. */
+const ZONE_LABELS = { description: "PDF до 20 МБ" };
 const MAX_SIZE = 20 * 1024 * 1024;
 
 /** A picked file as a file of the set. */
@@ -44,20 +46,13 @@ export default function FileUploadInFormExample() {
 
   return (
     <form className={styles.form} noValidate onSubmit={submit} onReset={() => change([])}>
-      <div className={styles.formHeader}>
-        <Typography as="h3" variant="title-m">
-          Договор поставки
-        </Typography>
-        <Typography as="p" variant="body-s" tone="secondary">
-          Подписанный скан нужен до первой отгрузки.
-        </Typography>
-      </div>
       <FileUpload.Root
         label="Скан договора"
         name="contract"
         accept=".pdf"
         required
         hint={HINT}
+        labels={ZONE_LABELS}
         error={error}
         value={scan}
         onValueChange={change}

package/src/components/file-upload/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** In a phone-width column the zone text wraps, a long file name truncates, and a gallery goes three across and then two, the cover keeping two columns and the remove buttons shown without hover. */
+/** In a phone-width column the zone text wraps, a long file name truncates, and a gallery goes three across and then two, the cover keeping two columns and the remove buttons shown without hover — `layout`, `cover`. */
 import { FileUpload, type FileUploadFile } from "prime-ui-kit";
 import * as React from "react";
 

package/src/components/file-upload/examples/overview.tsx

@@ -5,6 +5,9 @@ import styles from "./examples.module.css";
 
 const MAX_SIZE = 10 * 1024 * 1024;
 
+/** The zone names the limit the stand-in server holds. */
+const ZONE_LABELS = { description: "Любые файлы до 10 МБ" };
+
 const ATTACHED: readonly FileUploadFile[] = [
   {
     id: "deal-contract",
@@ -50,7 +53,8 @@ export default function FileUploadOverviewExample() {
     <div className={styles.column}>
       <FileUpload.Root
         label="Документы сделки"
-        hint="Любые файлы до 10 МБ, можно несколько"
+        hint="Договор, смета и акты по сделке; можно несколько сразу"
+        labels={ZONE_LABELS}
         multiple
         defaultValue={ATTACHED}
         queue={queue}

package/src/components/file-upload/examples/row-parts.tsx

@@ -1,4 +1,4 @@
-/** Rows the set does not draw, built from parts: order documents with a download button, a photo with its preview and a report still being prepared — `FileUpload.Item`, `FileUpload.FormatBadge`, `FileUpload.ItemPreview`, `FileUpload.ItemActions`, `FileUpload.ItemProgress`. */
+/** Rows the set does not draw, built from parts: order documents with a download button, a photo with its preview, a report still being prepared and one that failed with a retry — `FileUpload.Item`, `FileUpload.FormatBadge`, `FileUpload.ItemPreview`, `FileUpload.ItemActions`, `FileUpload.ItemProgress`, `invalid`, `tone`. */
 import { Button, FileUpload, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -8,7 +8,7 @@ export default function FileUploadRowPartsExample() {
     <div className={styles.column}>
       <FileUpload.Item>
         <FileUpload.FormatBadge format="pdf" color="red" />
-        <FileUpload.ItemName>Счёт № 318.pdf</FileUpload.ItemName>
+        <FileUpload.ItemText>Счёт № 318.pdf</FileUpload.ItemText>
         <FileUpload.ItemDescription>1,2 МБ · выставлен 12 марта</FileUpload.ItemDescription>
         <FileUpload.ItemActions>
           <Button.Root variant="ghost" tone="neutral" aria-label="Скачать Счёт № 318.pdf">
@@ -20,7 +20,7 @@ export default function FileUploadRowPartsExample() {
       </FileUpload.Item>
       <FileUpload.Item>
         <FileUpload.ItemPreview src="https://picsum.photos/seed/warehouse-gate/160/160" />
-        <FileUpload.ItemName>Отгрузка, паллет 4.jpg</FileUpload.ItemName>
+        <FileUpload.ItemText>Отгрузка, паллет 4.jpg</FileUpload.ItemText>
         <FileUpload.ItemDescription>820 КБ · снято при отгрузке</FileUpload.ItemDescription>
         <FileUpload.ItemActions>
           <Button.Root variant="ghost" tone="neutral" aria-label="Скачать Отгрузка, паллет 4.jpg">
@@ -32,10 +32,33 @@ export default function FileUploadRowPartsExample() {
       </FileUpload.Item>
       <FileUpload.Item>
         <FileUpload.FormatBadge format="xlsx" color="green" />
-        <FileUpload.ItemName>Отчёт по заказу.xlsx</FileUpload.ItemName>
+        <FileUpload.ItemText>Отчёт по заказу.xlsx</FileUpload.ItemText>
         <FileUpload.ItemDescription>Формируется · 60%</FileUpload.ItemDescription>
         <FileUpload.ItemProgress value={60} aria-label="Формируется: Отчёт по заказу.xlsx" />
       </FileUpload.Item>
+      <FileUpload.Item invalid>
+        <FileUpload.FormatBadge format="pdf" color="red" />
+        <FileUpload.ItemText>Акт сверки за март.pdf</FileUpload.ItemText>
+        <FileUpload.ItemDescription>
+          Не удалось сформировать: нет данных за 31 марта
+        </FileUpload.ItemDescription>
+        <FileUpload.ItemActions>
+          <Button.Root
+            variant="ghost"
+            tone="neutral"
+            aria-label="Сформировать заново: Акт сверки за март.pdf"
+          >
+            <Button.Icon>
+              <Icon name="action.refresh" />
+            </Button.Icon>
+          </Button.Root>
+        </FileUpload.ItemActions>
+        <FileUpload.ItemProgress
+          value={35}
+          tone="danger"
+          aria-label="Остановлено: Акт сверки за март.pdf"
+        />
+      </FileUpload.Item>
     </div>
   );
 }

package/src/components/file-upload/examples/screen.module.css

@@ -0,0 +1,45 @@
+/* Media library: a work screen — the app header carries the title and the tools; this module lays
+   out the library block only, the page rhythm comes from PageContent. */
+
+.bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-space-2);
+}
+
+/* As many ~8rem tiles as fit: two across from 320px, more as the panel grows. A tile is a grid,
+   not a list item, so it draws no marker. */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--prime-space-16) * 2)), 1fr));
+  gap: var(--prime-space-5) var(--prime-space-4);
+  margin: 0;
+  padding: 0;
+}
+
+/* A tile: the picture, then the name over the size and date. */
+.tile {
+  display: grid;
+  align-content: start;
+  gap: var(--prime-space-2);
+  min-width: 0;
+}
+
+.tileText {
+  display: grid;
+  min-width: 0;
+}
+
+/* The skeleton tile keeps the picture's 4 : 3 and the two text lines, so nothing moves on load. */
+.picture {
+  height: auto;
+  aspect-ratio: 4 / 3;
+}
+
+.nameBar {
+  width: 75%;
+}
+
+.metaBar {
+  width: 45%;
+}