prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,64 +1,58 @@
-.column {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
+/* Layout of the FileUpload scenarios: semantic tokens only. */
 
-/* File rows inside a card: as wide as the drop zone above them. */
-.list {
-  display: grid;
-  gap: var(--prime-space-3);
-  width: 100%;
+/* A form column: zone and file rows, row → row 8. */
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
-.zones {
-  display: grid;
-  grid-template-columns: repeat(
-      auto-fit,
-      minmax(min(100%, calc(var(--prime-panel-min-width) * 1.5)), 1fr)
-    );
-  align-items: end;
-  gap: var(--prime-space-4);
-  width: 100%;
+/* in-form.tsx: header → field 32 → actions 32 (foundation §1). */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-modal-width-s));
 }
 
-.sizeZones {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--prime-panel-min-width)), 1fr));
-  align-items: end;
-  gap: var(--prime-space-3);
-  width: 100%;
+.formHeader {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-1);
 }
 
-.sizeCell {
-  display: grid;
+.formActions {
+  display: flex;
+  justify-content: flex-end;
   gap: var(--prime-space-2);
-  min-width: 0;
 }
 
-/* Title + hint inside a custom zone body. */
-.copy {
-  display: grid;
-  justify-items: center;
-  gap: var(--prime-space-1);
+/* sizes.tsx: a zone and its file row of one tier, then the next tier. */
+.sizeRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  margin-bottom: var(--prime-space-4);
 }
 
-.chipGlyph {
-  display: inline-flex;
-  align-items: center;
+/* custom-body.tsx: source buttons under the title. */
+.sources {
+  display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  width: var(--prime-control-xs-height);
-  height: var(--prime-control-xs-height);
-  border-radius: var(--prime-radius-full);
-  background: var(--prime-color-fill-muted);
+  gap: var(--prime-space-2);
 }
 
-.card {
-  width: 100%;
-  max-width: var(--prime-modal-width-m);
+/* narrow.tsx: a phone-width column. */
+.narrow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  width: min(100%, calc(var(--prime-space-16) * 4));
 }
 
+/* avatar-upload.tsx */
 .avatarRow {
   display: flex;
   align-items: center;
@@ -68,22 +62,24 @@
 }
 
 /* The whole avatar is the drop target: a round zone that hugs it. */
-.avatarRow .avatarZone {
-  width: auto;
+.avatarZone {
+  --file-upload-padding: var(--prime-space-1);
+  --file-upload-radius: var(--prime-radius-full);
   flex-shrink: 0;
-  padding: var(--prime-space-1);
-  border-radius: var(--prime-radius-full);
+  width: fit-content;
 }
 
 /* Text block → actions: 12; title → description: 4. */
 .avatarText {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--prime-space-3);
   min-width: 0;
 }
 
 .avatarCopy {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: var(--prime-space-1);
   min-width: 0;
 }
@@ -93,17 +89,3 @@
   flex-wrap: wrap;
   gap: var(--prime-space-2);
 }
-
-/* Zones above, file rows below. */
-.stack {
-  display: grid;
-  gap: var(--prime-space-4);
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-}
-
-.caption {
-  width: 100%;
-  text-align: center;
-}

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

@@ -0,0 +1,76 @@
+/** A contract upload form: the required scan is checked on submit and its error replaces the hint — `required`, `error`, `name`. */
+import { Button, FileUpload, Icon, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const HINT = "PDF до 20 МБ, все страницы";
+
+export default function FileUploadInFormExample() {
+  const [files, setFiles] = React.useState<File[]>([]);
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(files.length === 0 ? "Приложите скан договора" : undefined);
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <div className={styles.formHeader}>
+        <Typography as="h3" variant="title-m">
+          Договор поставки
+        </Typography>
+        <Typography as="p" variant="body-s" tone="secondary">
+          Подписанный скан нужен до первой отгрузки.
+        </Typography>
+      </div>
+      <div className={styles.column}>
+        <FileUpload.Root
+          label="Скан договора"
+          name="contract"
+          accept=".pdf"
+          required
+          hint={HINT}
+          error={error}
+          onFilesChange={(next) => {
+            setFiles(next);
+            setError(undefined);
+          }}
+        />
+        {files.map((file) => (
+          <FileUpload.Item key={file.name}>
+            <FileUpload.FormatBadge format="pdf" color="red" />
+            <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
+            <FileUpload.ItemActions>
+              <Button.Root
+                variant="ghost"
+                tone="neutral"
+                aria-label={`Удалить ${file.name}`}
+                onClick={() => setFiles([])}
+              >
+                <Button.Icon>
+                  <Icon name="action.close" />
+                </Button.Icon>
+              </Button.Root>
+            </FileUpload.ItemActions>
+          </FileUpload.Item>
+        ))}
+      </div>
+      <div className={styles.formActions}>
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => {
+            setFiles([]);
+            setError(undefined);
+          }}
+        >
+          Отменить
+        </Button.Root>
+        <Button.Root type="submit">Отправить</Button.Root>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,17 @@
+/** In a phone-width column the zone text wraps and a long file name truncates. */
+import { FileUpload } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function FileUploadNarrowExample() {
+  return (
+    <div className={styles.narrow}>
+      <FileUpload.Root label="Чек об оплате" size="s" />
+      <FileUpload.Item size="s">
+        <FileUpload.FormatBadge format="pdf" color="red" />
+        <FileUpload.ItemName>Кассовый чек от 12 марта, заказ 48210.pdf</FileUpload.ItemName>
+        <FileUpload.ItemDescription>180 КБ</FileUpload.ItemDescription>
+      </FileUpload.Item>
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+/** Attachments of a request: a labelled drop zone and the chosen files as rows with a remove button — `label`, `hint`, `multiple`, `onFilesChange`, `FileUpload.Item`. */
+import { Button, FileUpload, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const formatSize = (bytes: number) =>
+  bytes < 1024 * 1024
+    ? `${Math.max(1, Math.round(bytes / 1024))} КБ`
+    : `${(bytes / 1024 / 1024).toFixed(1)} МБ`;
+
+const fileKey = (file: File) => `${file.name}-${file.size}-${file.lastModified}`;
+
+export default function FileUploadOverviewExample() {
+  const [files, setFiles] = React.useState<File[]>([]);
+
+  return (
+    <div className={styles.column}>
+      <FileUpload.Root
+        label="Документы к заявке"
+        hint="PDF, PNG или JPG, можно несколько"
+        multiple
+        accept=".pdf,.png,.jpg,.jpeg"
+        onFilesChange={(next) =>
+          setFiles((current) => {
+            const known = new Set(current.map(fileKey));
+            return [...current, ...next.filter((file) => !known.has(fileKey(file)))];
+          })
+        }
+      />
+      {files.map((file) => (
+        <FileUpload.Item key={fileKey(file)}>
+          <FileUpload.FormatBadge format={file.name.split(".").pop() ?? "file"} />
+          <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
+          <FileUpload.ItemDescription>{formatSize(file.size)}</FileUpload.ItemDescription>
+          <FileUpload.ItemActions>
+            <Button.Root
+              variant="ghost"
+              tone="neutral"
+              aria-label={`Удалить ${file.name}`}
+              onClick={() => setFiles((current) => current.filter((item) => item !== file))}
+            >
+              <Button.Icon>
+                <Icon name="action.close" />
+              </Button.Icon>
+            </Button.Root>
+          </FileUpload.ItemActions>
+        </FileUpload.Item>
+      ))}
+    </div>
+  );
+}

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

@@ -1,5 +1,5 @@
-/** Drop zone and file row on every size: padding, icon circle, browse button and row typography follow the tier. Match the size of the surrounding form. */
-import { FileUpload, Icon, Typography } from "prime-ui-kit";
+/** Every size of the zone and of a file row: padding, icon, button and text follow the tier — `size`. */
+import { FileUpload } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -7,42 +7,21 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function FileUploadSizesExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.sizeZones}>
-        {SIZES.map((size) => (
-          <div key={size} className={styles.sizeCell}>
-            <FileUpload.Root size={size}>
-              <FileUpload.DropBody>
-                <FileUpload.Icon>
-                  <Icon name="action.upload" size={size} tone="secondary" />
-                </FileUpload.Icon>
-                <FileUpload.Title>Перетащите файл</FileUpload.Title>
-                <FileUpload.BrowseLabel>Выбрать</FileUpload.BrowseLabel>
-              </FileUpload.DropBody>
-            </FileUpload.Root>
-            <Typography.Root as="span" variant="caption" tone="muted" className={styles.caption}>
-              {size}
-            </Typography.Root>
-          </div>
-        ))}
-      </div>
-      <div className={styles.column}>
-        {SIZES.map((size) => (
-          <FileUpload.Item key={size} size={size}>
-            <FileUpload.ItemRow>
-              <FileUpload.FormatBadge format="pdf" color="red" />
-              <FileUpload.ItemMain>
-                <FileUpload.ItemName>Договор поставки.pdf</FileUpload.ItemName>
-                <FileUpload.ItemMeta>
-                  <span>240 КБ</span>
-                  <FileUpload.ItemMetaSep />
-                  <span>size=&quot;{size}&quot;</span>
-                </FileUpload.ItemMeta>
-              </FileUpload.ItemMain>
-            </FileUpload.ItemRow>
+    <div className={styles.column}>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.sizeRow}>
+          <FileUpload.Root
+            size={size}
+            label={size}
+            labels={{ title: "Перетащите файл", description: "" }}
+          />
+          <FileUpload.Item size={size}>
+            <FileUpload.FormatBadge format="pdf" color="red" />
+            <FileUpload.ItemName>Договор поставки.pdf</FileUpload.ItemName>
+            <FileUpload.ItemDescription>240 КБ</FileUpload.ItemDescription>
           </FileUpload.Item>
-        ))}
-      </div>
+        </div>
+      ))}
     </div>
   );
 }

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

@@ -1,106 +1,14 @@
-/** Zone states (default, disabled, invalid with custom labels) and file rows (uploading with progress, uploaded with a remove action, failed with retry). Use it as the reference for upload feedback. */
-import { Button, FileUpload, Icon, Typography } from "prime-ui-kit";
+/** A default zone, a disabled one and an invalid one without a message — `disabled`, `invalid`. */
+import { FileUpload } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-function ZoneBody() {
-  return (
-    <FileUpload.DropBody>
-      <FileUpload.Icon>
-        <Icon name="action.upload" size="m" tone="secondary" />
-      </FileUpload.Icon>
-      <div className={styles.copy}>
-        <FileUpload.Title>Перетащите файл сюда</FileUpload.Title>
-        <FileUpload.Hint>PDF или PNG до 20 МБ</FileUpload.Hint>
-      </div>
-      <FileUpload.BrowseLabel>Выбрать файл</FileUpload.BrowseLabel>
-    </FileUpload.DropBody>
-  );
-}
-
 export default function FileUploadStatesExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.zones}>
-        <div className={styles.sizeCell}>
-          <FileUpload.Root>
-            <ZoneBody />
-          </FileUpload.Root>
-          <Typography.Root as="span" variant="caption" tone="muted" className={styles.caption}>
-            По умолчанию
-          </Typography.Root>
-        </div>
-        <div className={styles.sizeCell}>
-          <FileUpload.Root disabled>
-            <ZoneBody />
-          </FileUpload.Root>
-          <Typography.Root as="span" variant="caption" tone="muted" className={styles.caption}>
-            disabled
-          </Typography.Root>
-        </div>
-        <div className={styles.sizeCell}>
-          <FileUpload.Root
-            invalid
-            labels={{ title: "Файл не подошёл", hint: "Нужен PDF или PNG до 20 МБ" }}
-          />
-          <Typography.Root as="span" variant="caption" tone="muted" className={styles.caption}>
-            invalid + labels
-          </Typography.Root>
-        </div>
-      </div>
-
-      <div className={styles.column}>
-        <FileUpload.Item>
-          <FileUpload.ItemRow>
-            <FileUpload.FormatBadge format="pdf" color="red" />
-            <FileUpload.ItemMain>
-              <FileUpload.ItemName>Отчёт за квартал.pdf</FileUpload.ItemName>
-              <FileUpload.ItemMeta>
-                <span>1,2 МБ из 3 МБ</span>
-                <FileUpload.ItemMetaSep />
-                <strong>Загрузка 40%</strong>
-              </FileUpload.ItemMeta>
-            </FileUpload.ItemMain>
-          </FileUpload.ItemRow>
-          <FileUpload.ItemProgress value={40} />
-        </FileUpload.Item>
-
-        <FileUpload.Item>
-          <FileUpload.ItemRow>
-            <FileUpload.FormatBadge format="png" color="blue" />
-            <FileUpload.ItemMain>
-              <FileUpload.ItemName>Схема проезда.png</FileUpload.ItemName>
-              <FileUpload.ItemMeta>
-                <span>820 КБ</span>
-                <FileUpload.ItemMetaSep />
-                <span>Загружено</span>
-              </FileUpload.ItemMeta>
-            </FileUpload.ItemMain>
-            <FileUpload.ItemActions>
-              <Button.Root variant="ghost" tone="neutral" aria-label="Удалить файл">
-                <Button.Icon>
-                  <Icon name="action.close" />
-                </Button.Icon>
-              </Button.Root>
-            </FileUpload.ItemActions>
-          </FileUpload.ItemRow>
-        </FileUpload.Item>
-
-        <FileUpload.Item invalid>
-          <FileUpload.ItemRow>
-            <FileUpload.FormatBadge format="mp4" color="purple" />
-            <FileUpload.ItemMain>
-              <FileUpload.ItemStack>
-                <FileUpload.ItemTextGroup>
-                  <FileUpload.ItemName>Презентация.mp4</FileUpload.ItemName>
-                  <FileUpload.ItemMeta>Файл больше 20 МБ</FileUpload.ItemMeta>
-                </FileUpload.ItemTextGroup>
-                <FileUpload.ItemTryAgain>Попробовать снова</FileUpload.ItemTryAgain>
-              </FileUpload.ItemStack>
-            </FileUpload.ItemMain>
-          </FileUpload.ItemRow>
-        </FileUpload.Item>
-      </div>
+    <div className={styles.column}>
+      <FileUpload.Root label="default" hint="PDF или PNG до 20 МБ" />
+      <FileUpload.Root label="disabled" disabled hint="Станет доступно после выбора заказа" />
+      <FileUpload.Root label="invalid" invalid hint="PDF или PNG до 20 МБ" />
     </div>
   );
 }

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

@@ -0,0 +1,39 @@
+/** File rows while uploading, uploaded and failed with a retry — `FileUpload.ItemProgress`, `invalid`, `FileUpload.ItemActions`. */
+import { Button, FileUpload, Icon } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function FileUploadUploadProgressExample() {
+  return (
+    <div className={styles.column}>
+      <FileUpload.Item>
+        <FileUpload.FormatBadge format="pdf" color="red" />
+        <FileUpload.ItemName>Отчёт за квартал.pdf</FileUpload.ItemName>
+        <FileUpload.ItemDescription>1,2 МБ из 3 МБ · загрузка 40%</FileUpload.ItemDescription>
+        <FileUpload.ItemProgress value={40} aria-label="Загрузка: Отчёт за квартал.pdf" />
+      </FileUpload.Item>
+      <FileUpload.Item>
+        <FileUpload.FormatBadge format="png" color="blue" />
+        <FileUpload.ItemName>Схема проезда.png</FileUpload.ItemName>
+        <FileUpload.ItemDescription>820 КБ · загружено</FileUpload.ItemDescription>
+        <FileUpload.ItemActions>
+          <Button.Root variant="ghost" tone="neutral" aria-label="Удалить Схема проезда.png">
+            <Button.Icon>
+              <Icon name="action.close" />
+            </Button.Icon>
+          </Button.Root>
+        </FileUpload.ItemActions>
+      </FileUpload.Item>
+      <FileUpload.Item invalid>
+        <FileUpload.FormatBadge format="mp4" color="purple" />
+        <FileUpload.ItemName>Презентация продукта.mp4</FileUpload.ItemName>
+        <FileUpload.ItemDescription>Файл больше 20 МБ</FileUpload.ItemDescription>
+        <FileUpload.ItemActions>
+          <Button.Root variant="soft" tone="danger" size="s">
+            Повторить
+          </Button.Root>
+        </FileUpload.ItemActions>
+      </FileUpload.Item>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+/** A required zone with a hint, a rejected file whose error replaces the hint and an optional zone — `required`, `hint`, `error`, `optional`. */
+import { FileUpload } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function FileUploadValidationExample() {
+  return (
+    <div className={styles.column}>
+      <FileUpload.Root label="Скан договора" required hint="PDF до 20 МБ, все страницы" />
+      <FileUpload.Root
+        label="Счёт на оплату"
+        required
+        error="Файл не подошёл: нужен PDF до 20 МБ"
+        labels={{ title: "Выберите другой файл" }}
+      />
+      <FileUpload.Root label="Доверенность" optional hint="Если подписывает не директор" />
+    </div>
+  );
+}

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

@@ -1,26 +1,13 @@
-/** `variant="dashed"` (default) vs `"solid"`; the fill follows the surface context. Use `solid` inside cards and modals where the dashed line is too loud. */
-import { FileUpload, Icon } from "prime-ui-kit";
+/** The dashed drop line next to a zone with only the fill, for cards and modals — `variant`. */
+import { FileUpload } from "prime-ui-kit";
+
 import styles from "./examples.module.css";
 
 export default function FileUploadVariantsExample() {
   return (
     <div className={styles.column}>
-      <FileUpload.Root variant="dashed" size="s">
-        <FileUpload.DropBody>
-          <FileUpload.Icon>
-            <Icon name="action.upload" size="s" tone="secondary" />
-          </FileUpload.Icon>
-          <FileUpload.Title>dashed — пунктир</FileUpload.Title>
-        </FileUpload.DropBody>
-      </FileUpload.Root>
-      <FileUpload.Root variant="solid" size="s">
-        <FileUpload.DropBody>
-          <FileUpload.Icon>
-            <Icon name="action.upload" size="s" tone="secondary" />
-          </FileUpload.Icon>
-          <FileUpload.Title>solid — только заливка</FileUpload.Title>
-        </FileUpload.DropBody>
-      </FileUpload.Root>
+      <FileUpload.Root label="dashed" variant="dashed" />
+      <FileUpload.Root label="solid" variant="solid" />
     </div>
   );
 }