prime-ui-kit 0.10.0 → 0.11.1

package/dist/skill/reference/components/media-viewer/examples/actions.tsx

@@ -0,0 +1,86 @@
+/** Photos of a listing with actions for the one on screen: download it or make it the cover — `renderActions`. */
+import {
+  Button,
+  Icon,
+  MediaViewer,
+  type MediaViewerItem,
+  Thumbnail,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const photo = (id: string, width: number, height: number) =>
+  `https://picsum.photos/seed/listing-${id}/${width}/${height}`;
+
+const PHOTOS: MediaViewerItem[] = [
+  { src: photo("hall", 1600, 1067), width: 1600, height: 1067, alt: "Склад, общий вид" },
+  { src: photo("office", 1600, 1067), width: 1600, height: 1067, alt: "Офис на втором этаже" },
+  { src: photo("gates", 1600, 1067), width: 1600, height: 1067, alt: "Ворота с докшелтерами" },
+];
+
+export default function MediaViewerActionsExample() {
+  const [open, setOpen] = React.useState(false);
+  const [index, setIndex] = React.useState(0);
+  const [cover, setCover] = React.useState(PHOTOS[0]?.src);
+
+  return (
+    <>
+      <Typography variant="body-s" tone="secondary">
+        Обложка объявления: {PHOTOS.find((item) => item.src === cover)?.alt}
+      </Typography>
+      <div className={styles.grid}>
+        {PHOTOS.map((item, at) => (
+          <Thumbnail.Root key={item.src} asChild ratio="3:2" fullWidth>
+            <button
+              type="button"
+              aria-label={`Открыть фото: ${item.alt}`}
+              onClick={() => {
+                setIndex(at);
+                setOpen(true);
+              }}
+            >
+              <Thumbnail.Image src={item.src} />
+              <Thumbnail.Fallback>
+                <Icon name="object.image" />
+              </Thumbnail.Fallback>
+            </button>
+          </Thumbnail.Root>
+        ))}
+      </div>
+      <MediaViewer
+        items={PHOTOS}
+        open={open}
+        onOpenChange={setOpen}
+        index={index}
+        onIndexChange={setIndex}
+        renderActions={(item) => (
+          <>
+            <Button.Root
+              shape="circle"
+              variant="shade"
+              aria-label="Сделать обложкой"
+              aria-pressed={item.src === cover}
+              onClick={() => setCover(item.src)}
+            >
+              <Button.Icon>
+                <Icon
+                  name="status.favorite"
+                  fill={item.src === cover ? "currentColor" : undefined}
+                />
+              </Button.Icon>
+            </Button.Root>
+            <Button.Root shape="circle" variant="shade" aria-label="Скачать фото" asChild>
+              <a href={item.src} download>
+                <Button.Icon>
+                  <Icon name="action.download" />
+                </Button.Icon>
+              </a>
+            </Button.Root>
+          </>
+        )}
+      />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/controlled-open.tsx

@@ -0,0 +1,30 @@
+/** The parent opens a single scan from a link in the text: no counter and no arrows for one item — `open`, `onOpenChange`. */
+import { LinkButton, MediaViewer, type MediaViewerItem, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const SCAN: MediaViewerItem[] = [
+  {
+    src: "https://picsum.photos/seed/invoice-1042/1240/1754",
+    width: 1240,
+    height: 1754,
+    alt: "Счёт № 1042 от 3 октября",
+  },
+];
+
+export default function MediaViewerControlledOpenExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Typography variant="body-m" tone="secondary">
+        Счёт № 1042 оплачен 4 октября.{" "}
+        <LinkButton asChild>
+          <button type="button" onClick={() => setOpen(true)}>
+            Посмотреть скан
+          </button>
+        </LinkButton>
+      </Typography>
+      <MediaViewer items={SCAN} open={open} onOpenChange={setOpen} />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/controlled.tsx

@@ -0,0 +1,54 @@
+/** The parent owns the page: a finding opens its photo, and paging in the viewer moves the mark along the list — `index`, `onIndexChange`. */
+import { Button, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const FINDINGS = [
+  ["crack", "Трещина в отбойнике рампы 2"],
+  ["floor", "Скол покрытия у ворот 4"],
+  ["light", "Не горят две лампы в зоне отгрузки"],
+  ["boxes", "Возвраты не разобраны с прошлой недели"],
+] as const;
+
+const PHOTOS: MediaViewerItem[] = FINDINGS.map(([id, alt]) => ({
+  src: `https://picsum.photos/seed/finding-${id}/1600/1200`,
+  width: 1600,
+  height: 1200,
+  alt,
+  caption: alt,
+}));
+
+export default function MediaViewerControlledExample() {
+  const [open, setOpen] = React.useState(false);
+  const [index, setIndex] = React.useState(0);
+
+  return (
+    <>
+      <div className={styles.findings}>
+        {FINDINGS.map(([id, title], at) => (
+          <Button.Root
+            key={id}
+            variant={at === index ? "soft" : "ghost"}
+            tone="neutral"
+            fullWidth
+            aria-current={at === index ? "true" : undefined}
+            onClick={() => {
+              setIndex(at);
+              setOpen(true);
+            }}
+          >
+            {title}
+          </Button.Root>
+        ))}
+      </div>
+      <MediaViewer
+        items={PHOTOS}
+        open={open}
+        onOpenChange={setOpen}
+        index={index}
+        onIndexChange={setIndex}
+      />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/dismiss.tsx

@@ -0,0 +1,34 @@
+/** Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button — `closeOnOutsideClick`. */
+import { Button, Icon, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
+import * as React from "react";
+
+const page = (n: number) => `https://picsum.photos/seed/contract-page-${n}/1240/1754`;
+
+const PAGES: MediaViewerItem[] = [1, 2, 3].map((n) => ({
+  src: page(n),
+  width: 1240,
+  height: 1754,
+  alt: `Договор поставки № 52/24, страница ${n}`,
+}));
+
+export default function MediaViewerDismissExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root variant="soft" tone="neutral" onClick={() => setOpen(true)}>
+        <Button.Icon>
+          <Icon name="object.document" />
+        </Button.Icon>
+        Проверить сканы договора
+      </Button.Root>
+      <MediaViewer
+        items={PAGES}
+        open={open}
+        onOpenChange={setOpen}
+        closeOnOutsideClick={false}
+        aria-label="Сканы договора № 52/24"
+      />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/examples.module.css

@@ -0,0 +1,16 @@
+/* Layout of the MediaViewer scenarios: semantic tokens only. */
+
+/* Thumbnails that open the viewer: a wrapping grid of equal tiles. */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--prime-space-24), 1fr));
+  gap: var(--prime-space-2);
+  inline-size: min(100%, var(--prime-modal-width-m));
+}
+
+/* controlled.tsx: the list of findings beside the photos. */
+.findings {
+  display: grid;
+  gap: var(--prime-space-2);
+  inline-size: min(100%, var(--prime-modal-width-s));
+}

package/dist/skill/reference/components/media-viewer/examples/origin.tsx

@@ -0,0 +1,60 @@
+/** Every photo flies back into its own thumbnail, also after paging, and the last one leads to the first — `getOrigin`, `loop`. */
+import { Icon, MediaViewer, type MediaViewerItem, Thumbnail } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const photo = (id: string, width: number, height: number) =>
+  `https://picsum.photos/seed/fleet-${id}/${width}/${height}`;
+
+const PHOTOS: MediaViewerItem[] = ["front", "side", "cargo", "cabin", "wheels", "plate"].map(
+  (id, at) => ({
+    src: photo(id, 1600, 1200),
+    thumbnail: photo(id, 200, 150),
+    width: 1600,
+    height: 1200,
+    alt: `Газель А 123 ВС, фото ${at + 1}`,
+  }),
+);
+
+export default function MediaViewerOriginExample() {
+  const [open, setOpen] = React.useState(false);
+  const [index, setIndex] = React.useState(0);
+  const tiles = React.useRef<(HTMLButtonElement | null)[]>([]);
+
+  return (
+    <>
+      <div className={styles.grid}>
+        {PHOTOS.map((item, at) => (
+          <Thumbnail.Root key={item.src} asChild ratio="1:1" fullWidth>
+            <button
+              ref={(node) => {
+                tiles.current[at] = node;
+              }}
+              type="button"
+              aria-label={`Открыть: ${item.alt}`}
+              onClick={() => {
+                setIndex(at);
+                setOpen(true);
+              }}
+            >
+              <Thumbnail.Image src={item.thumbnail ?? item.src} />
+              <Thumbnail.Fallback>
+                <Icon name="object.image" />
+              </Thumbnail.Fallback>
+            </button>
+          </Thumbnail.Root>
+        ))}
+      </div>
+      <MediaViewer
+        items={PHOTOS}
+        open={open}
+        onOpenChange={setOpen}
+        index={index}
+        onIndexChange={setIndex}
+        getOrigin={(at) => tiles.current[at] ?? null}
+        loop
+      />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/overview.tsx

@@ -0,0 +1,75 @@
+/** Photos of an acceptance open full-screen from their thumbnails, at the one that was pressed — `items`, `open`, `index`. */
+import { Icon, MediaViewer, type MediaViewerItem, Thumbnail } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const photo = (id: string, width: number, height: number) =>
+  `https://picsum.photos/seed/acceptance-${id}/${width}/${height}`;
+
+const PHOTOS: MediaViewerItem[] = [
+  {
+    src: photo("gate", 1600, 1200),
+    thumbnail: photo("gate", 200, 150),
+    width: 1600,
+    height: 1200,
+    alt: "Разгрузка у ворот 3",
+  },
+  {
+    src: photo("pallets", 1600, 1200),
+    thumbnail: photo("pallets", 200, 150),
+    width: 1600,
+    height: 1200,
+    alt: "Паллеты после приёмки",
+  },
+  {
+    src: photo("label", 1200, 1600),
+    thumbnail: photo("label", 150, 200),
+    width: 1200,
+    height: 1600,
+    alt: "Маркировка коробки",
+  },
+  {
+    src: photo("seal", 1600, 1200),
+    thumbnail: photo("seal", 200, 150),
+    width: 1600,
+    height: 1200,
+    alt: "Пломба на кузове",
+  },
+];
+
+export default function MediaViewerOverviewExample() {
+  const [open, setOpen] = React.useState(false);
+  const [index, setIndex] = React.useState(0);
+
+  return (
+    <>
+      <div className={styles.grid}>
+        {PHOTOS.map((item, at) => (
+          <Thumbnail.Root key={item.src} asChild ratio="4:3" fullWidth>
+            <button
+              type="button"
+              aria-label={`Открыть фото: ${item.alt}`}
+              onClick={() => {
+                setIndex(at);
+                setOpen(true);
+              }}
+            >
+              <Thumbnail.Image src={item.thumbnail ?? item.src} />
+              <Thumbnail.Fallback>
+                <Icon name="object.image" />
+              </Thumbnail.Fallback>
+            </button>
+          </Thumbnail.Root>
+        ))}
+      </div>
+      <MediaViewer
+        items={PHOTOS}
+        open={open}
+        onOpenChange={setOpen}
+        index={index}
+        onIndexChange={setIndex}
+      />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/thumbnails.tsx

@@ -0,0 +1,49 @@
+/** A warehouse inspection of 120 photos with a filmstrip and captions: only the thumbnails in view are mounted — `thumbnails`, `caption`. */
+import { Button, Icon, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
+import * as React from "react";
+
+const SPOTS = [
+  ["racks", "Стеллажи ряда A", "Ряд A: нагрузка в норме, маркировка читается."],
+  ["aisle", "Проход между рядами B и C", "Проход свободен, разметка обновлена в сентябре."],
+  ["dock", "Рампа 2", "Отбойник рампы треснул — заявка на замену № 418."],
+  ["fire", "Пожарный щит", "Огнетушители проверены, следующая проверка в марте."],
+  ["light", "Освещение зоны отгрузки", "Две лампы не горят, заявка № 421."],
+  ["floor", "Покрытие пола у ворот 4", "Скол покрытия 30 × 40 см, нужен ремонт."],
+  ["cold", "Холодильная камера", "Температура +3 °C, журнал заполнен."],
+  ["boxes", "Зона возвратов", "14 коробок ждут разбора с прошлой недели."],
+  ["office", "Пост кладовщика", "Сканеры заряжены, принтер этикеток работает."],
+  ["yard", "Площадка перед складом", "Разметка парковки стёрлась у въезда."],
+] as const;
+
+const photo = (id: string, width: number, height: number) =>
+  `https://picsum.photos/seed/inspection-${id}/${width}/${height}`;
+
+/** Twelve rounds of the ten spots: 120 photos of one inspection. */
+const PHOTOS: MediaViewerItem[] = Array.from({ length: 120 }, (_, at) => {
+  const [id, alt, caption] = SPOTS[at % SPOTS.length] as (typeof SPOTS)[number];
+  const round = Math.floor(at / SPOTS.length) + 1;
+  return {
+    src: photo(`${id}-${round}`, 1600, 1067),
+    thumbnail: photo(`${id}-${round}`, 150, 100),
+    width: 1600,
+    height: 1067,
+    alt: `${alt}, обход ${round}`,
+    caption,
+  };
+});
+
+export default function MediaViewerThumbnailsExample() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root variant="soft" tone="neutral" onClick={() => setOpen(true)}>
+        <Button.Icon>
+          <Icon name="object.image" />
+        </Button.Icon>
+        Фотоотчёт осмотра · 120 фото
+      </Button.Root>
+      <MediaViewer items={PHOTOS} open={open} onOpenChange={setOpen} thumbnails />
+    </>
+  );
+}

package/dist/skill/reference/components/media-viewer/examples/video.tsx

@@ -0,0 +1,55 @@
+/** A video among the photos of a site visit starts once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`, `autoPlay`. */
+import { Icon, MediaViewer, type MediaViewerItem, Thumbnail } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const CLIP = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+
+const photo = (id: string) => `https://picsum.photos/seed/site-${id}/1600/1200`;
+
+const ITEMS: MediaViewerItem[] = [
+  { src: photo("entrance"), width: 1600, height: 1200, alt: "Въезд на площадку" },
+  { type: "video", src: CLIP, width: 1280, height: 720, alt: "Обход зоны погрузки" },
+  { src: photo("ramp"), width: 1600, height: 1200, alt: "Рампа после ремонта" },
+];
+
+export default function MediaViewerVideoExample() {
+  const [open, setOpen] = React.useState(false);
+  const [index, setIndex] = React.useState(0);
+
+  return (
+    <>
+      <div className={styles.grid}>
+        {ITEMS.map((item, at) => (
+          <Thumbnail.Root key={item.src} asChild ratio="4:3" fullWidth>
+            <button
+              type="button"
+              aria-label={`Открыть: ${item.alt}`}
+              onClick={() => {
+                setIndex(at);
+                setOpen(true);
+              }}
+            >
+              {item.type === "video" ? (
+                <Thumbnail.Video src={item.src} />
+              ) : (
+                <Thumbnail.Image src={item.src} />
+              )}
+              <Thumbnail.Fallback>
+                <Icon name={item.type === "video" ? "action.video" : "object.image"} />
+              </Thumbnail.Fallback>
+            </button>
+          </Thumbnail.Root>
+        ))}
+      </div>
+      <MediaViewer
+        items={ITEMS}
+        open={open}
+        onOpenChange={setOpen}
+        index={index}
+        onIndexChange={setIndex}
+      />
+    </>
+  );
+}