prime-ui-kit 0.11.1 → 0.13.0

package/src/components/chat-list/examples/narrow.tsx

@@ -0,0 +1,88 @@
+/** At phone width long names and previews truncate while the time and counts stay whole; a pane squeezed under 240px keeps only the names and the counts — `ChatList.Root`, `search`. */
+import { Avatar, Card, ChatList, hueOf } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+const at = (day: number, hour: number, minute: number) => new Date(2026, 9, day, hour, minute);
+
+const DIALOGS = [
+  {
+    id: "sever",
+    name: "АО «Северсталь-Сервис», отдел закупок",
+    initials: "СС",
+    preview: "Пришлите, пожалуйста, обновлённую спецификацию с учётом новых цен",
+    at: at(14, 14, 32),
+    unread: 128,
+  },
+  {
+    id: "vector",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Не можем выгрузить счёт INV-2048 в 1С, ошибка после экспорта",
+    at: at(14, 9, 5),
+    unread: 0,
+  },
+  {
+    id: "kozlov",
+    name: "ИП Козлов Андрей Викторович",
+    initials: "ИК",
+    preview: "Подключите, пожалуйста, ЭДО",
+    at: at(11, 11, 40),
+    unread: 1,
+  },
+  {
+    id: "leto",
+    name: "ООО «Лето»",
+    initials: "ЛТ",
+    preview: "Можно перенести доставку на среду?",
+    at: at(2, 9, 15),
+    unread: 0,
+  },
+];
+
+type Dialog = (typeof DIALOGS)[number];
+
+const renderDialog = (item: Dialog) => (
+  <ChatList.Item time={item.at} unread={item.unread}>
+    <ChatList.ItemIcon>
+      <Avatar.Root color={hueOf(item.id)}>
+        <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+      </Avatar.Root>
+    </ChatList.ItemIcon>
+    <ChatList.ItemText>{item.name}</ChatList.ItemText>
+    <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+  </ChatList.Item>
+);
+
+export default function ChatListNarrowExample() {
+  const [query, setQuery] = React.useState("");
+  const needle = query.trim().toLowerCase();
+  const found = DIALOGS.filter((item) => item.name.toLowerCase().includes(needle));
+
+  return (
+    <>
+      <Card.Root className={styles.phone}>
+        <ChatList.Root
+          items={found}
+          getKey={(item) => item.id}
+          defaultValue="vector"
+          search={query}
+          onSearchChange={setQuery}
+          now={NOW}
+          renderItem={renderDialog}
+        />
+      </Card.Root>
+      <Card.Root className={styles.rail}>
+        <ChatList.Root
+          items={DIALOGS}
+          getKey={(item) => item.id}
+          defaultValue="vector"
+          now={NOW}
+          renderItem={renderDialog}
+        />
+      </Card.Root>
+    </>
+  );
+}

package/src/components/chat-list/examples/overview.tsx

@@ -0,0 +1,194 @@
+/** A support inbox: pinned dialogs first, the search, unread and muted counts, the typing line, a draft, delivery ticks and a row menu that pins, mutes, marks read and deletes after a confirm — `ChatList.Root`, `items`, `renderItem`, `value`, `onSearchChange`, `ChatList.Item`, `ChatList.ItemMenu`. */
+import { Avatar, Card, ChatList, ConfirmDialog, Dropdown, hueOf, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Dialog = {
+  id: string;
+  name: string;
+  initials: string;
+  preview: string;
+  author?: string;
+  at: Date;
+  unread: number;
+  online?: boolean;
+  pinned?: boolean;
+  muted?: boolean;
+  mention?: boolean;
+  typing?: boolean;
+  draft?: string;
+  status?: "sent" | "read";
+};
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+const at = (day: number, hour: number, minute: number) => new Date(2026, 9, day, hour, minute);
+
+const DIALOGS: Dialog[] = [
+  {
+    id: "vector",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Не можем выгрузить счёт INV-2048 в 1С",
+    at: at(14, 14, 32),
+    unread: 2,
+    online: true,
+    pinned: true,
+  },
+  {
+    id: "granit",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Акт сверки за сентябрь подписан",
+    author: "Вы",
+    at: at(14, 12, 5),
+    unread: 0,
+    pinned: true,
+    status: "read",
+  },
+  {
+    id: "kozlov",
+    name: "ИП Козлов",
+    initials: "ИК",
+    preview: "Подключите, пожалуйста, ЭДО",
+    at: at(14, 11, 40),
+    unread: 1,
+    typing: true,
+  },
+  {
+    id: "sever",
+    name: "Отдел продаж «Север»",
+    initials: "ОС",
+    preview: "@Анна, проверь скидку для «Лето»",
+    author: "Дмитрий",
+    at: at(13, 18, 20),
+    unread: 14,
+    muted: true,
+    mention: true,
+  },
+  {
+    id: "leto",
+    name: "ООО «Лето»",
+    initials: "ЛТ",
+    preview: "Можно перенести доставку на среду?",
+    at: at(12, 9, 15),
+    unread: 0,
+    draft: "Да, среда подходит, водитель",
+  },
+  {
+    id: "tehnosnab",
+    name: "ТехноСнаб",
+    initials: "ТС",
+    preview: "Отправили договор на подпись",
+    author: "Вы",
+    at: at(3, 16, 0),
+    unread: 0,
+    status: "sent",
+  },
+];
+
+/** Pinned first, then by the last message. */
+const ordered = (dialogs: Dialog[]) =>
+  [...dialogs].sort(
+    (a, b) => Number(b.pinned ?? false) - Number(a.pinned ?? false) || +b.at - +a.at,
+  );
+
+export default function ChatListOverviewExample() {
+  const [dialogs, setDialogs] = React.useState(DIALOGS);
+  const [dialogId, setDialogId] = React.useState<string | null>("vector");
+  const [query, setQuery] = React.useState("");
+  const [deleting, setDeleting] = React.useState<Dialog | null>(null);
+
+  const patch = (id: string, next: Partial<Dialog>) =>
+    setDialogs((current) => current.map((item) => (item.id === id ? { ...item, ...next } : item)));
+
+  const needle = query.trim().toLowerCase();
+  const shown = ordered(dialogs).filter(
+    (item) =>
+      !needle ||
+      item.name.toLowerCase().includes(needle) ||
+      item.preview.toLowerCase().includes(needle),
+  );
+
+  return (
+    <Card.Root className={styles.pane}>
+      <ChatList.Root
+        items={shown}
+        getKey={(item) => item.id}
+        value={dialogId}
+        onValueChange={(id) => {
+          setDialogId(id);
+          patch(id, { unread: 0, mention: false });
+        }}
+        search={query}
+        onSearchChange={setQuery}
+        now={NOW}
+        renderItem={(item) => (
+          <ChatList.Item
+            time={item.at}
+            status={item.status}
+            unread={item.unread}
+            mention={item.mention}
+            muted={item.muted}
+            pinned={item.pinned}
+            typing={item.typing}
+            draft={item.draft}
+          >
+            <ChatList.ItemIcon>
+              <Avatar.Root color={hueOf(item.id)}>
+                <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                {item.online ? <Avatar.Status status="online" /> : null}
+              </Avatar.Root>
+            </ChatList.ItemIcon>
+            <ChatList.ItemText>{item.name}</ChatList.ItemText>
+            <ChatList.ItemDescription author={item.author}>{item.preview}</ChatList.ItemDescription>
+            <ChatList.ItemMenu>
+              <Dropdown.Item onSelect={() => patch(item.id, { pinned: !item.pinned })}>
+                <Dropdown.ItemIcon>
+                  <Icon name="action.pin" />
+                </Dropdown.ItemIcon>
+                {item.pinned ? "Открепить" : "Закрепить"}
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => patch(item.id, { muted: !item.muted })}>
+                <Dropdown.ItemIcon>
+                  <Icon name={item.muted ? "status.sound" : "status.muted"} />
+                </Dropdown.ItemIcon>
+                {item.muted ? "Включить звук" : "Без звука"}
+              </Dropdown.Item>
+              <Dropdown.Item
+                disabled={item.unread === 0}
+                onSelect={() => patch(item.id, { unread: 0, mention: false })}
+              >
+                <Dropdown.ItemIcon>
+                  <Icon name="status.read" />
+                </Dropdown.ItemIcon>
+                Отметить прочитанным
+              </Dropdown.Item>
+              <Dropdown.Separator />
+              <Dropdown.Item tone="danger" onSelect={() => setDeleting(item)}>
+                <Dropdown.ItemIcon>
+                  <Icon name="action.delete" />
+                </Dropdown.ItemIcon>
+                Удалить
+              </Dropdown.Item>
+            </ChatList.ItemMenu>
+          </ChatList.Item>
+        )}
+      />
+      <ConfirmDialog.Root
+        open={deleting !== null}
+        onOpenChange={(open) => {
+          if (!open) setDeleting(null);
+        }}
+        title={`Удалить диалог с ${deleting?.name ?? ""}?`}
+        description="История переписки удалится у вас; клиент свою копию сохранит."
+        confirmLabel="Удалить диалог"
+        onConfirm={() => {
+          const id = deleting?.id;
+          setDialogs((current) => current.filter((item) => item.id !== id));
+          if (id === dialogId) setDialogId(null);
+        }}
+      />
+    </Card.Root>
+  );
+}

package/src/components/chat-list/examples/search.tsx

@@ -0,0 +1,71 @@
+/** The search field filters dialogs by name and by the last message, marks the match in both, says how many were found and shows a quiet state when none match — `defaultSearch`, `onSearchChange`. */
+import { Avatar, Card, ChatList, hueOf } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+const at = (day: number, hour: number, minute: number) => new Date(2026, 9, day, hour, minute);
+
+const DIALOGS = [
+  {
+    id: "vector",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Счёт INV-2048 не выгружается в 1С",
+    at: at(14, 14, 32),
+  },
+  {
+    id: "granit",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Пришлите счёт на предоплату",
+    at: at(14, 12, 5),
+  },
+  {
+    id: "kozlov",
+    name: "ИП Козлов",
+    initials: "ИК",
+    preview: "Подключите, пожалуйста, ЭДО",
+    at: at(13, 11, 40),
+  },
+  {
+    id: "schetovod",
+    name: "Счетовод — интеграция",
+    initials: "СИ",
+    preview: "Токен обновлён",
+    at: at(10, 9, 0),
+  },
+];
+
+export default function ChatListSearchExample() {
+  const [query, setQuery] = React.useState("счёт");
+  const needle = query.trim().toLowerCase();
+  const found = DIALOGS.filter(
+    (item) =>
+      item.name.toLowerCase().includes(needle) || item.preview.toLowerCase().includes(needle),
+  );
+
+  return (
+    <Card.Root className={styles.short}>
+      <ChatList.Root
+        items={found}
+        getKey={(item) => item.id}
+        defaultSearch="счёт"
+        onSearchChange={setQuery}
+        now={NOW}
+        renderItem={(item) => (
+          <ChatList.Item time={item.at}>
+            <ChatList.ItemIcon>
+              <Avatar.Root color={hueOf(item.id)}>
+                <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+              </Avatar.Root>
+            </ChatList.ItemIcon>
+            <ChatList.ItemText>{item.name}</ChatList.ItemText>
+            <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+          </ChatList.Item>
+        )}
+      />
+    </Card.Root>
+  );
+}

package/src/components/chat-list/examples/sizes.tsx

@@ -0,0 +1,61 @@
+/** Every size tier: row height, text, avatar, glyphs and the search field follow the tier — `size`. */
+import { Avatar, Card, ChatList, hueOf, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+
+const DIALOGS = [
+  {
+    id: "vector",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Не можем выгрузить счёт в 1С",
+    at: new Date(2026, 9, 14, 14, 32),
+    unread: 2,
+  },
+  {
+    id: "granit",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Акт сверки подписан",
+    at: new Date(2026, 9, 13, 12, 5),
+    unread: 0,
+  },
+];
+
+export default function ChatListSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.tier}>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+          <Card.Root>
+            <ChatList.Root
+              size={size}
+              items={DIALOGS}
+              getKey={(item) => item.id}
+              defaultValue="vector"
+              now={NOW}
+              renderItem={(item) => (
+                <ChatList.Item time={item.at} unread={item.unread}>
+                  <ChatList.ItemIcon>
+                    <Avatar.Root color={hueOf(item.id)}>
+                      <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                    </Avatar.Root>
+                  </ChatList.ItemIcon>
+                  <ChatList.ItemText>{item.name}</ChatList.ItemText>
+                  <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+                </ChatList.Item>
+              )}
+            />
+          </Card.Root>
+        </div>
+      ))}
+    </>
+  );
+}

package/src/components/chat-list/examples/states.tsx

@@ -0,0 +1,107 @@
+/** Loading and empty: placeholder rows in the rows' geometry cross-fade into the dialogs; a new workspace without dialogs shows its own empty state with an action — `loading`, `empty`. */
+import { Avatar, Button, Card, ChatList, EmptyPage, hueOf, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+
+const DIALOGS = [
+  {
+    id: "vector",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Не можем выгрузить счёт в 1С",
+    at: new Date(2026, 9, 14, 14, 32),
+    unread: 2,
+  },
+  {
+    id: "granit",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Акт сверки подписан",
+    at: new Date(2026, 9, 14, 12, 5),
+    unread: 0,
+  },
+  {
+    id: "kozlov",
+    name: "ИП Козлов",
+    initials: "ИК",
+    preview: "Подключите, пожалуйста, ЭДО",
+    at: new Date(2026, 9, 13, 11, 40),
+    unread: 1,
+  },
+];
+
+const LOAD_MS = 1400;
+
+type Dialog = (typeof DIALOGS)[number];
+
+const renderDialog = (item: Dialog) => (
+  <ChatList.Item time={item.at} unread={item.unread}>
+    <ChatList.ItemIcon>
+      <Avatar.Root color={hueOf(item.id)}>
+        <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+      </Avatar.Root>
+    </ChatList.ItemIcon>
+    <ChatList.ItemText>{item.name}</ChatList.ItemText>
+    <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+  </ChatList.Item>
+);
+
+export default function ChatListStatesExample() {
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!loading) return;
+    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+
+  return (
+    <>
+      <div className={styles.stage}>
+        <div className={styles.bar}>
+          <Button.Root
+            variant="soft"
+            tone="neutral"
+            loading={loading}
+            onClick={() => setLoading(true)}
+          >
+            Обновить
+          </Button.Root>
+        </div>
+        <Card.Root className={styles.short}>
+          <ChatList.Root
+            items={loading ? [] : DIALOGS}
+            getKey={(item) => item.id}
+            loading={loading}
+            now={NOW}
+            renderItem={renderDialog}
+          />
+        </Card.Root>
+      </div>
+      <Card.Root className={styles.short}>
+        <ChatList.Root
+          items={[] as Dialog[]}
+          getKey={(item) => item.id}
+          renderItem={renderDialog}
+          empty={
+            <EmptyPage.Root layout="compact">
+              <EmptyPage.Icon>
+                <Icon name="object.message" />
+              </EmptyPage.Icon>
+              <EmptyPage.Title>Диалогов пока нет</EmptyPage.Title>
+              <EmptyPage.Description>
+                Клиенты появятся здесь, когда напишут в чат на сайте.
+              </EmptyPage.Description>
+              <EmptyPage.Actions>
+                <Button.Root variant="soft">Настроить виджет</Button.Root>
+              </EmptyPage.Actions>
+            </EmptyPage.Root>
+          }
+        />
+      </Card.Root>
+    </>
+  );
+}

package/src/components/chat-list/examples/structure.tsx

@@ -0,0 +1,135 @@
+/** Every piece of a row: a photo or initials with presence, a glyph beside the name, the author of the last message, media words with a length, a member typing in a group, ticks from sending to failed — `ChatList.ItemIcon`, `ChatList.ItemDescription`, `author`, `kind`, `duration`, `typing`, `status`. */
+import { Avatar, Card, ChatList, hueOf, Icon, type MessageStatus } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Dialog = {
+  id: string;
+  name: string;
+  initials: string;
+  photo?: string;
+  online?: boolean;
+  verified?: boolean;
+  group?: boolean;
+  at: Date;
+  author?: string;
+  kind?: "photo" | "voice" | "videoNote" | "file" | "location";
+  duration?: number;
+  text?: string;
+  status?: MessageStatus;
+  typing?: string;
+  unread?: number;
+};
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+const at = (day: number, hour: number, minute: number) => new Date(2026, 9, day, hour, minute);
+
+const DIALOGS: Dialog[] = [
+  {
+    id: "irina",
+    name: "Ирина Белова",
+    initials: "ИБ",
+    photo: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=128&h=128&fit=crop",
+    online: true,
+    at: at(14, 14, 40),
+    kind: "photo",
+    text: "Вот так выглядит ошибка",
+    unread: 1,
+  },
+  {
+    id: "prime-bot",
+    name: "Prime Бот",
+    initials: "ПБ",
+    verified: true,
+    at: at(14, 13, 10),
+    kind: "file",
+    text: "Счёт INV-2051.pdf",
+  },
+  {
+    id: "orlov",
+    name: "Дмитрий Орлов",
+    initials: "ДО",
+    at: at(14, 11, 2),
+    author: "Вы",
+    kind: "voice",
+    duration: 42,
+    status: "sending",
+  },
+  {
+    id: "warehouse",
+    name: "Склад «Центральный»",
+    initials: "СЦ",
+    group: true,
+    at: at(13, 18, 30),
+    author: "Олег",
+    kind: "location",
+    text: "Рампа 2",
+    typing: "Анна",
+  },
+  {
+    id: "lena",
+    name: "Елена Смирнова",
+    initials: "ЕС",
+    at: at(12, 9, 0),
+    author: "Вы",
+    kind: "videoNote",
+    duration: 6,
+    status: "read",
+  },
+  {
+    id: "leto",
+    name: "ООО «Лето»",
+    initials: "ЛТ",
+    at: at(1, 16, 45),
+    author: "Вы",
+    text: "Отправил акт повторно",
+    status: "failed",
+  },
+];
+
+export default function ChatListStructureExample() {
+  return (
+    <Card.Root className={styles.pane}>
+      <ChatList.Root
+        items={DIALOGS}
+        getKey={(item) => item.id}
+        defaultValue="irina"
+        now={NOW}
+        renderItem={(item) => (
+          <ChatList.Item
+            time={item.at}
+            status={item.status}
+            unread={item.unread}
+            typing={item.typing}
+          >
+            <ChatList.ItemIcon>
+              <Avatar.Root color={hueOf(item.id)}>
+                {item.photo ? <Avatar.Image src={item.photo} alt="" /> : null}
+                <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                {item.online ? <Avatar.Status status="online" /> : null}
+              </Avatar.Root>
+            </ChatList.ItemIcon>
+            <ChatList.ItemText>{item.name}</ChatList.ItemText>
+            {item.verified ? (
+              <ChatList.ItemIcon>
+                <Icon name="status.success" tone="accent" label="Официальный аккаунт" />
+              </ChatList.ItemIcon>
+            ) : null}
+            {item.group ? (
+              <ChatList.ItemIcon>
+                <Icon name="object.users" label="Группа" />
+              </ChatList.ItemIcon>
+            ) : null}
+            <ChatList.ItemDescription
+              author={item.author}
+              kind={item.kind}
+              duration={item.duration}
+            >
+              {item.text}
+            </ChatList.ItemDescription>
+          </ChatList.Item>
+        )}
+      />
+    </Card.Root>
+  );
+}