prime-ui-kit 0.14.0 → 0.15.0

package/src/components/example-frame/examples/initial-view.tsx

@@ -0,0 +1,44 @@
+/** A matrix frame that opens at phone width in the dark theme with no theme switch and counts code copies — `previewLayout`, `defaultViewport`, `defaultColorScheme`, `showThemeToggle`, `onCopy`. */
+import { Badge, ExampleFrame, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const STATUSES = [
+  { color: "gray", label: "Черновик" },
+  { color: "blue", label: "На ревью" },
+  { color: "green", label: "Опубликован" },
+] as const;
+
+const CODE = STATUSES.map(
+  ({ color, label }) => `<Badge.Root color="${color}">${label}</Badge.Root>`,
+).join("\n");
+
+export default function ExampleFrameInitialViewExample() {
+  const [copies, setCopies] = React.useState(0);
+
+  return (
+    <>
+      <ExampleFrame
+        code={CODE}
+        previewLayout="matrix"
+        defaultViewport="mobile"
+        defaultColorScheme="dark"
+        showThemeToggle={false}
+        onCopy={() => setCopies((count) => count + 1)}
+      >
+        <div>
+          {STATUSES.map(({ color, label }) => (
+            <div key={color}>
+              <Badge.Root color={color}>{label}</Badge.Root>
+              <Typography as="span" variant="caption" tone="muted">
+                {color}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </ExampleFrame>
+      <Typography variant="body-s" tone="secondary">
+        Код скопирован: {copies}
+      </Typography>
+    </>
+  );
+}

package/src/components/field-list/COMPONENT.md

@@ -144,10 +144,11 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | [locked.tsx](examples/locked.tsx) | Specs of a plan on one line each: an icon picker and a color swatch take compact columns, the first three specs are pinned with a lock and the rest reorder below them — `getLocked`, `width`, `reorderable`. |
 | [base-row.tsx](examples/base-row.tsx) | A plan price and its changes by month in one table: the base price is the first, pinned row, each change is a row with its month and its price, and the unit sits in the field, not in a heading — `getLocked`, `width`. |
 | [limits.tsx](examples/limits.tsx) | Recipients of invoice reminders, from one to three: the last row cannot be removed and the add button says why it is off once the list is full — `min`, `max`, `hint`. |
-| [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. |
+| [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. |
 | [states.tsx](examples/states.tsx) | The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the lines: it sums them under the list and puts the saved lines back on reset — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. |
+| [screen.tsx](examples/screen.tsx) | A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs and prices in one form; repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row — `getLocked`, `compact`. |
 
 ## Mistakes
 - A `label` above every field of every row («Иконка», «Параметр», «Значение» four times) → a FieldList: the headings stand once, the fields take them as hidden labels.

package/src/components/field-list/examples/errors.tsx

@@ -1,4 +1,4 @@
-/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field — `error`. */
+/** Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. */
 import { Button, FieldList, type FieldListColumn, Input } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,7 +6,10 @@ import styles from "./examples.module.css";
 
 type Contact = { id: string; role: string; phone: string };
 
-const COLUMNS: FieldListColumn[] = [{ label: "Должность" }, { label: "Телефон", width: "m" }];
+const COLUMNS: FieldListColumn[] = [
+  { label: "Должность", required: true },
+  { label: "Телефон", width: "m", required: true },
+];
 
 const CONTACTS: Contact[] = [
   { id: "buyer", role: "Закупщик", phone: "+7 912 404-18-20" },

package/src/components/field-list/examples/screen.module.css

@@ -0,0 +1,18 @@
+/* Record editor: the sections are PageContent.Section layout="aside"; here only the panels' insides. */
+
+/* Two groups in one panel, a group apart. */
+.groups {
+  display: grid;
+  gap: var(--prime-space-8);
+}
+
+/* One value in three currencies: one row while there is room, the unit inside each field. */
+.currencies {
+  display: grid;
+  grid-template-columns: repeat(
+      auto-fit,
+      minmax(min(100%, calc(var(--prime-space-24) + var(--prime-space-8))), 1fr)
+    );
+  align-items: start;
+  gap: var(--prime-space-3);
+}

package/src/components/field-list/examples/screen.tsx

@@ -0,0 +1,316 @@
+/** A record editor as a document page, a long form whose title, description and save stand in the content header: a plan's name, its specs and prices in one form; repeating records as FieldList rows with the headings once, a base price pinned above its changes, one value in three currencies in one row — `getLocked`, `compact`. */
+import {
+  Button,
+  Card,
+  ColorPresets,
+  FieldList,
+  type FieldListColumn,
+  Fieldset,
+  Icon,
+  type IconName,
+  Input,
+  PageContent,
+  Select,
+  Textarea,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./screen.module.css";
+
+type Spec = {
+  id: string;
+  icon: IconName;
+  name: string;
+  value: string;
+  color: string;
+  pinned?: boolean;
+};
+type Period = { id: string; from: string; price: string; base?: boolean };
+
+const SPEC_COLUMNS: FieldListColumn[] = [
+  { label: "Иконка", width: "compact" },
+  { label: "Параметр" },
+  { label: "Значение" },
+  { label: "Цвет", width: "compact" },
+];
+
+const SPEC_ICONS: { name: IconName; label: string }[] = [
+  { name: "object.users", label: "Сотрудники" },
+  { name: "object.storage", label: "Хранилище" },
+  { name: "object.headset", label: "Поддержка" },
+  { name: "object.chart", label: "Отчёты" },
+  { name: "object.key", label: "Доступ" },
+  { name: "object.globe", label: "Интеграции" },
+];
+
+const SPECS: Spec[] = [
+  {
+    id: "seats",
+    icon: "object.users",
+    name: "Сотрудники",
+    value: "до 50",
+    color: "#5068f5",
+    pinned: true,
+  },
+  {
+    id: "storage",
+    icon: "object.storage",
+    name: "Хранилище",
+    value: "200 ГБ",
+    color: "#22c55e",
+    pinned: true,
+  },
+  {
+    id: "support",
+    icon: "object.headset",
+    name: "Поддержка",
+    value: "8/5, ответ за 2 часа",
+    color: "#f97316",
+    pinned: true,
+  },
+  { id: "reports", icon: "object.chart", name: "Отчёты", value: "12 шаблонов", color: "#a855f7" },
+  { id: "sso", icon: "object.key", name: "Вход через SSO", value: "SAML, OIDC", color: "#14b8a6" },
+];
+
+const PRICE_COLUMNS: FieldListColumn[] = [{ label: "Действует" }, { label: "Цена", width: "m" }];
+
+const MONTHS = [
+  { value: "01", label: "С 1 января" },
+  { value: "04", label: "С 1 апреля" },
+  { value: "07", label: "С 1 июля" },
+  { value: "10", label: "С 1 октября" },
+];
+
+const PERIODS: Period[] = [
+  { id: "base", from: "", price: "4 900", base: true },
+  { id: "autumn", from: "10", price: "5 400" },
+];
+
+const SETUP_FEE = [
+  { currency: "₽", name: "setupRub", label: "Подключение в рублях", value: "15 000" },
+  { currency: "$", name: "setupUsd", label: "Подключение в долларах", value: "170" },
+  { currency: "€", name: "setupEur", label: "Подключение в евро", value: "" },
+];
+
+const SAVE_MS = 900;
+const SAVED_MS = 2000;
+
+export default function FieldListScreenExample() {
+  const formId = React.useId();
+  const [specs, setSpecs] = React.useState(SPECS);
+  const [periods, setPeriods] = React.useState(PERIODS);
+  const [nameError, setNameError] = React.useState<string>();
+  const [saving, setSaving] = React.useState(false);
+  const [saved, setSaved] = React.useState(false);
+
+  const save = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const name = String(new FormData(event.currentTarget).get("name") ?? "").trim();
+    if (name === "") {
+      setNameError("Назовите тариф: так его увидят клиенты");
+      event.currentTarget.querySelector<HTMLInputElement>("[name='name']")?.focus();
+      return;
+    }
+    setNameError(undefined);
+    setSaving(true);
+    window.setTimeout(() => {
+      setSaving(false);
+      setSaved(true);
+      window.setTimeout(() => setSaved(false), SAVED_MS);
+    }, SAVE_MS);
+  };
+
+  return (
+    <PageContent.Root maxWidth="wide" aria-labelledby="plan-title">
+      <PageContent.Header>
+        <PageContent.Title id="plan-title">Тариф «Команда»</PageContent.Title>
+        <PageContent.Description>
+          Так тариф выглядит на странице цен и в счетах.
+        </PageContent.Description>
+        <PageContent.Actions>
+          <Button.Root type="submit" form={formId} loading={saving}>
+            {saved ? "Сохранено" : "Сохранить тариф"}
+          </Button.Root>
+        </PageContent.Actions>
+      </PageContent.Header>
+      <PageContent.Body>
+        <PageContent.Section layout="aside" label="Основное">
+          <form id={formId} noValidate onSubmit={save}>
+            <Card.Root variant="panel">
+              <Card.Body>
+                <Fieldset disabled={saving} aria-label="Основное">
+                  <Input.Root label="Название" error={nameError}>
+                    <Input.Wrapper>
+                      <Input.Field name="name" defaultValue="Команда" />
+                    </Input.Wrapper>
+                  </Input.Root>
+                  <Textarea.Root
+                    name="summary"
+                    label="Описание"
+                    optional
+                    rows={2}
+                    defaultValue="Для отделов до 50 человек: задачи, документы и отчёты в одном месте."
+                  />
+                </Fieldset>
+              </Card.Body>
+            </Card.Root>
+          </form>
+        </PageContent.Section>
+
+        <PageContent.Section layout="aside" label="Характеристики">
+          <Card.Root variant="panel">
+            <Card.Body>
+              <FieldList
+                aria-label="Характеристики"
+                disabled={saving}
+                columns={SPEC_COLUMNS}
+                reorderable
+                value={specs}
+                onValueChange={setSpecs}
+                getId={(spec) => spec.id}
+                getLabel={(spec) => spec.name}
+                getLocked={(spec) => spec.pinned ?? false}
+                createItem={(): Spec => ({
+                  id: crypto.randomUUID(),
+                  icon: "object.globe",
+                  name: "",
+                  value: "",
+                  color: "#14b8a6",
+                })}
+                addLabel="Добавить характеристику"
+                renderItem={(spec, row) => (
+                  <>
+                    <Select.Root
+                      value={spec.icon}
+                      onValueChange={(icon) => row.update({ icon: icon as IconName })}
+                    >
+                      <Select.Trigger>
+                        <Select.TriggerIcon>
+                          <Icon name={spec.icon} />
+                        </Select.TriggerIcon>
+                      </Select.Trigger>
+                      <Select.Content>
+                        {SPEC_ICONS.map((icon) => (
+                          <Select.Item key={icon.name} value={icon.name}>
+                            <Select.ItemIcon>
+                              <Icon name={icon.name} />
+                            </Select.ItemIcon>
+                            {icon.label}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select.Root>
+                    <Input.Root>
+                      <Input.Wrapper>
+                        <Input.Field
+                          value={spec.name}
+                          onChange={(event) => row.update({ name: event.target.value })}
+                        />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Input.Root>
+                      <Input.Wrapper>
+                        <Input.Field
+                          value={spec.value}
+                          onChange={(event) => row.update({ value: event.target.value })}
+                        />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <ColorPresets.Root
+                      value={spec.color}
+                      onValueChange={(color) => row.update({ color: color ?? spec.color })}
+                    >
+                      <ColorPresets.Trigger>
+                        <ColorPresets.SwatchButton />
+                      </ColorPresets.Trigger>
+                      <ColorPresets.Content />
+                    </ColorPresets.Root>
+                  </>
+                )}
+              />
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+
+        <PageContent.Section layout="aside" label="Стоимость">
+          <Card.Root variant="panel">
+            <Card.Body className={styles.groups}>
+              <Fieldset label="За месяц" disabled={saving}>
+                <FieldList
+                  columns={PRICE_COLUMNS}
+                  value={periods}
+                  onValueChange={setPeriods}
+                  getId={(period) => period.id}
+                  getLocked={(period) => period.base ?? false}
+                  createItem={() => ({ id: crypto.randomUUID(), from: "", price: "" })}
+                  addLabel="Добавить изменение цены"
+                  renderItem={(period, row) => (
+                    <>
+                      {period.base ? (
+                        <Input.Root>
+                          <Input.Wrapper>
+                            <Input.Field value="Всегда, если нет изменений" readOnly />
+                          </Input.Wrapper>
+                        </Input.Root>
+                      ) : (
+                        <Select.Root
+                          value={period.from}
+                          onValueChange={(from) => row.update({ from })}
+                          placeholder="Выберите месяц"
+                        >
+                          <Select.Trigger>
+                            <Select.Value />
+                          </Select.Trigger>
+                          <Select.Content>
+                            {MONTHS.map((month) => (
+                              <Select.Item key={month.value} value={month.value}>
+                                {month.label}
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select.Root>
+                      )}
+                      <Input.Root>
+                        <Input.Wrapper>
+                          <Input.Field
+                            value={period.price}
+                            inputMode="decimal"
+                            placeholder="0"
+                            onChange={(event) => row.update({ price: event.target.value })}
+                          />
+                          <Input.InlineAffix side="end">₽</Input.InlineAffix>
+                        </Input.Wrapper>
+                      </Input.Root>
+                    </>
+                  )}
+                />
+              </Fieldset>
+              <Fieldset
+                label="Подключение"
+                description="Разовый платёж; пустая валюта не выставляется."
+                disabled={saving}
+              >
+                <div className={styles.currencies}>
+                  {SETUP_FEE.map((fee) => (
+                    <Input.Root key={fee.name}>
+                      <Input.Wrapper>
+                        <Input.Field
+                          name={fee.name}
+                          aria-label={fee.label}
+                          inputMode="decimal"
+                          placeholder="0"
+                          defaultValue={fee.value}
+                        />
+                        <Input.InlineAffix side="end">{fee.currency}</Input.InlineAffix>
+                      </Input.Wrapper>
+                    </Input.Root>
+                  ))}
+                </div>
+              </Fieldset>
+            </Card.Body>
+          </Card.Root>
+        </PageContent.Section>
+      </PageContent.Body>
+    </PageContent.Root>
+  );
+}

package/src/components/file-upload/COMPONENT.md

@@ -288,7 +288,7 @@ A rejection of `upload` fails the file with its message as the reason; retry que
 | disabled | `disabled` | `data-disabled="true"`, disabled input, disabled fill and text, drops ignored; no add tile, actions or drag; a disabled button with `trigger="button"` |
 | empty | no files, `trigger="tile"` | the add tile spans the row with «Нажмите или перетащите файлы» |
 | cover | `cover`, the first tile | «Обложка» in place of the format pill, `data-cover` on the tiles wrapper (the first tile takes a 2 × 2 cell in a grid) |
-| full | the set reaches `max` | `data-full` on the add tile: «Лимит файлов», faded, the file input disabled |
+| full | the set reaches `max` | `data-full` on the add tile: «Лимит файлов», faded; the file input is `aria-disabled` and opens no picker, so the field label stays undimmed |
 | queued | queue item `status: "queued"` | a row reads «size · В очереди» over an empty bar; a tile (`data-upload="queued"`) dims under a 40px disk on the `media` shade (Button `shape="circle"` `variant="shade"`) whose ring turns at its least arc, described by «В очереди» |
 | loading | `status: "loading"` | a row reads «size · Загрузка 40%» and its bar fills (`accent`); a tile's white arc grows clockwise from 12 o'clock with the share sent (the `progress` ring of a shade circle Button, one variable `--ring-value`, gliding `base` while it turns); the disk is the remove («Отменить загрузку: name», described by the state), the corner × is not drawn; the tile still reorders, its carried copy keeps the disk |
 | done | `status: "done"` | a row reads «size» over a full `success` bar; a tile's ring fills, then its disk fades and shrinks to 0.9 (`fast`, `inert`), the picture returns to full or the sheet comes back |
@@ -372,20 +372,21 @@ Also `data-size`, `data-variant` on the zone, `data-size` on Item, `data-status`
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Documents of a deal: a drop zone, the files already attached as rows whose names open them, and new files uploading through a queue with progress, a reason and a retry — `label`, `hint`, `multiple`, `defaultValue`, `href`, `queue`. |
-| [variants.tsx](examples/variants.tsx) | How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile after the files — `variant`, `trigger`. |
+| [variants.tsx](examples/variants.tsx) | How files are added: the dashed drop zone, the zone with only its fill for cards and modals, the compact picker button and the add tile that starts an empty set of tiles — `variant`, `trigger`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier of the zone and of its file rows: padding, icon, button, text and the format badge follow it — `size`. |
 | [states.tsx](examples/states.tsx) | A default zone, a disabled one whose files are read-only and an invalid one without a message — `disabled`, `invalid`. |
 | [validation.tsx](examples/validation.tsx) | A required scan checked as soon as it is picked: a wrong type or a large file shakes in an error that leaves when the file is removed; a hint and an optional zone — `required`, `hint`, `error`, `optional`. |
-| [gallery.tsx](examples/gallery.tsx) | 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`. |
-| [file-cards.tsx](examples/file-cards.tsx) | 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`. |
+| [gallery.tsx](examples/gallery.tsx) | 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`. |
+| [file-cards.tsx](examples/file-cards.tsx) | 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`. |
 | [attachment-tray.tsx](examples/attachment-tray.tsx) | A reply to a client with a paperclip instead of a drop zone: the icon-only picker button, and the attachments as one scrolling row of tiles above the message — `trigger`, `aria-label`, `FileUpload.Queue`, `layout`. |
 | [saving.tsx](examples/saving.tsx) | Published listing photos with no picker, every change saved on the server: a moved or removed photo waits busy, and a change the server refuses puts the set back — `FileUpload.Queue`, `onValueChange`, `value`, `cover`. |
-| [custom-body.tsx](examples/custom-body.tsx) | A custom body: a muted title with a browse link and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`. |
+| [custom-body.tsx](examples/custom-body.tsx) | A custom body: a muted title with a browse link and the formats line and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`, `FileUpload.Description`. |
 | [avatar-upload.tsx](examples/avatar-upload.tsx) | A round zone around an Avatar that takes images and shows a preview; buttons open the same input — `inputRef`, `accept`, `className`. |
-| [row-parts.tsx](examples/row-parts.tsx) | 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`. |
+| [row-parts.tsx](examples/row-parts.tsx) | 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`. |
 | [controlled.tsx](examples/controlled.tsx) | Documents of a deal in one list: the files already on the server and new uploads after them, saved on every change, and a button brings back the saved set — `value`, `onValueChange`, `queue`. |
 | [in-form.tsx](examples/in-form.tsx) | A contract upload form: submit checks the required scan, its error shakes in and leaves once a file is picked or removed — `required`, `error`, `name`, `value`. |
 | [narrow.tsx](examples/narrow.tsx) | 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. |
+| [screen.tsx](examples/screen.tsx) | A media library of a catalog object as a work screen: the title, the object and a PageToolbar with sections, search, order and upload in the app header; uploads in FileUpload tiles through a queue; a grid of Thumbnails that open MediaViewer out of the tile or are picked for bulk download and delete; a Skeleton first load and a filtered empty state in a Crossfade — `trigger`, `layout`. |
 
 ## Mistakes
 - A `Label` and a `Hint` placed around the zone by hand → pass `label`, `hint`, `error`.

package/src/components/file-upload/examples/custom-body.tsx

@@ -1,4 +1,4 @@
-/** A custom body: a muted title with a browse link and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`. */
+/** A custom body: a muted title with a browse link and the formats line and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`, `FileUpload.Description`. */
 import { Button, FileUpload, Icon, LinkButton } from "prime-ui-kit";
 import * as React from "react";
 
@@ -23,6 +23,7 @@ export default function FileUploadCustomBodyExample() {
               </button>
             </LinkButton>
           </FileUpload.Title>
+          <FileUpload.Description>PDF, JPG или PNG до 20 МБ</FileUpload.Description>
           <div className={styles.sources}>
             <Button.Root variant="soft" tone="neutral" size="s" onClick={openPicker}>
               <Button.Icon>

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

@@ -28,7 +28,7 @@
   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;
@@ -36,12 +36,6 @@
   width: min(100%, var(--prime-modal-width-s));
 }
 
-.formHeader {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
-}
-
 .formActions {
   display: flex;
   justify-content: flex-end;

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/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";
@@ -36,6 +36,29 @@ export default function FileUploadRowPartsExample() {
         <FileUpload.ItemDescription>Формируется · 60%</FileUpload.ItemDescription>
         <FileUpload.ItemProgress value={60} aria-label="Формируется: Отчёт по заказу.xlsx" />
       </FileUpload.Item>
+      <FileUpload.Item invalid>
+        <FileUpload.FormatBadge format="pdf" color="red" />
+        <FileUpload.ItemName>Акт сверки за март.pdf</FileUpload.ItemName>
+        <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>
   );
 }