prime-ui-kit 0.10.0 → 0.11.0

package/dist/skill/reference/components/select/examples/controlled.tsx

@@ -0,0 +1,34 @@
+/** The parent owns the value: the plan drives the price under the field and a button resets it — `value`, `onValueChange`. */
+import { Button, Select, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+const PRICES: Record<string, string> = {
+  free: "0 ₽ в месяц",
+  pro: "990 ₽ в месяц",
+  team: "4 900 ₽ в месяц",
+};
+
+export default function SelectControlledExample() {
+  const [plan, setPlan] = React.useState("pro");
+
+  return (
+    <>
+      <Select.Root label="Тариф" value={plan} onValueChange={setPlan} placeholder="Выберите тариф">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="free">Бесплатный</Select.Item>
+          <Select.Item value="pro">Профессиональный</Select.Item>
+          <Select.Item value="team">Командный</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Typography as="p" variant="body-s" tone="secondary">
+        {PRICES[plan] ?? "Тариф не выбран"}
+      </Typography>
+      <Button.Root variant="soft" tone="neutral" onClick={() => setPlan("free")}>
+        Вернуть бесплатный
+      </Button.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/select/examples/examples.module.css

@@ -0,0 +1,35 @@
+/* Layout of the Select scenarios: semantic tokens only. */
+
+/* in-form.tsx: field → field 20, group → actions 32 (foundation §1). */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-modal-width-m));
+}
+
+.formHeader {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-1);
+}
+
+.formFields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--prime-space-5) var(--prime-space-4);
+}
+
+.formActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--prime-space-2);
+}
+
+@media (max-width: 639px) {
+  .formFields {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/skill/reference/components/select/examples/in-form.tsx

@@ -0,0 +1,88 @@
+/** Regional settings form: the required country is checked on submit, the error shakes the field and leaves once a country is picked, a calm note confirms the save — `required`, `error`, `hint`. */
+import { Button, Select, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SelectInFormExample() {
+  const [country, setCountry] = React.useState("");
+  const [error, setError] = React.useState<string>();
+  const [saved, setSaved] = React.useState(false);
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(country ? undefined : "Выберите страну");
+    setSaved(Boolean(country));
+  };
+
+  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.formFields}>
+        <Select.Root
+          label="Страна"
+          required
+          error={error}
+          placeholder="Выберите страну"
+          value={country}
+          onValueChange={(value) => {
+            setCountry(value);
+            setError(undefined);
+            setSaved(false);
+          }}
+        >
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="ru">Россия</Select.Item>
+            <Select.Item value="kz">Казахстан</Select.Item>
+            <Select.Item value="am">Армения</Select.Item>
+          </Select.Content>
+        </Select.Root>
+        <Select.Root
+          label="Часовой пояс"
+          hint="Время в отчётах и уведомлениях"
+          defaultValue="msk"
+          onValueChange={() => setSaved(false)}
+        >
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="kal">Калининград, UTC+2</Select.Item>
+            <Select.Item value="msk">Москва, UTC+3</Select.Item>
+            <Select.Item value="ekb">Екатеринбург, UTC+5</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <div className={styles.formActions}>
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary">
+            Настройки сохранены
+          </Typography>
+        ) : null}
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => {
+            setCountry("");
+            setError(undefined);
+            setSaved(false);
+          }}
+        >
+          Отменить
+        </Button.Root>
+        <Button.Root type="submit">Сохранить</Button.Root>
+      </div>
+    </form>
+  );
+}

package/dist/skill/reference/components/select/examples/load-error.tsx

@@ -0,0 +1,45 @@
+/** The options failed to load: the list says so in place and a retry loads them again — `loadError`, `onRetry`, `loading`. */
+import { Select } from "prime-ui-kit";
+import * as React from "react";
+
+type LoadState = "error" | "loading" | "ready";
+
+const WAREHOUSES = [
+  { value: "msk-1", label: "Москва, Южный порт" },
+  { value: "spb-1", label: "Санкт-Петербург, Шушары" },
+  { value: "ekb-1", label: "Екатеринбург, Кольцово" },
+  { value: "kzn-1", label: "Казань, Зеленодольск" },
+];
+const LATENCY_MS = 800;
+
+export default function SelectLoadErrorExample() {
+  const [state, setState] = React.useState<LoadState>("error");
+
+  const retry = () => {
+    setState("loading");
+    window.setTimeout(() => setState("ready"), LATENCY_MS);
+  };
+
+  return (
+    <Select.Root
+      label="Склад отгрузки"
+      placeholder="Выберите склад"
+      loading={state === "loading"}
+      loadError={state === "error" ? "Не удалось загрузить склады" : undefined}
+      onRetry={retry}
+    >
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        {state === "ready"
+          ? WAREHOUSES.map((warehouse) => (
+              <Select.Item key={warehouse.value} value={warehouse.value}>
+                {warehouse.label}
+              </Select.Item>
+            ))
+          : null}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/multiple.tsx

@@ -0,0 +1,26 @@
+/** Several values: checkboxes in the list, the list stays open on a pick, labels joined in the trigger — `multiple`. */
+import { Select } from "prime-ui-kit";
+
+export default function SelectMultipleExample() {
+  return (
+    <Select.Root
+      label="Отделы"
+      multiple
+      defaultValue={["eng", "design"]}
+      placeholder="Выберите отделы"
+    >
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="eng">Разработка</Select.Item>
+        <Select.Item value="design">Дизайн</Select.Item>
+        <Select.Item value="sales">Продажи</Select.Item>
+        <Select.Item value="support">Поддержка</Select.Item>
+        <Select.Item value="hr" disabled>
+          HR — нет доступа
+        </Select.Item>
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/overview.tsx

@@ -0,0 +1,17 @@
+/** A labelled field with a placeholder; picking an option closes the list and shows its label — `label`, `placeholder`. */
+import { Select } from "prime-ui-kit";
+
+export default function SelectOverviewExample() {
+  return (
+    <Select.Root label="Роль в проекте" placeholder="Выберите роль">
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Item value="viewer">Наблюдатель</Select.Item>
+        <Select.Item value="editor">Редактор</Select.Item>
+        <Select.Item value="admin">Администратор</Select.Item>
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/people.tsx

@@ -0,0 +1,53 @@
+/** People in the rows and the trigger: an avatar sized to the tier before the name, a role badge after it — `Avatar.Root`, `Badge.Root`, `renderValue`. */
+import { Avatar, Badge, type PaletteColor, Select } from "prime-ui-kit";
+
+type Member = {
+  value: string;
+  name: string;
+  initials: string;
+  color: PaletteColor;
+  role?: string;
+};
+
+const TEAM: Member[] = [
+  { value: "smirnova", name: "Анна Смирнова", initials: "АС", color: "blue", role: "Владелец" },
+  { value: "kotov", name: "Борис Котов", initials: "БК", color: "green" },
+  { value: "lebedeva", name: "Вера Лебедева", initials: "ВЛ", color: "purple", role: "Админ" },
+  { value: "orlov", name: "Глеб Орлов", initials: "ГО", color: "orange" },
+];
+
+const BY_VALUE = new Map(TEAM.map((member) => [member.value, member]));
+
+export default function SelectPeopleExample() {
+  return (
+    <Select.Root label="Ответственный" defaultValue="lebedeva" placeholder="Назначьте человека">
+      <Select.Trigger>
+        <Select.Value
+          renderValue={({ value, label }) => {
+            const member = BY_VALUE.get(value);
+            return (
+              <>
+                <Avatar.Root color={member?.color}>
+                  <Avatar.Fallback>{member?.initials}</Avatar.Fallback>
+                </Avatar.Root>
+                <Select.ItemText>{label}</Select.ItemText>
+                {member?.role ? <Badge.Root color={member.color}>{member.role}</Badge.Root> : null}
+              </>
+            );
+          }}
+        />
+      </Select.Trigger>
+      <Select.Content>
+        {TEAM.map((member) => (
+          <Select.Item key={member.value} value={member.value}>
+            <Avatar.Root color={member.color}>
+              <Avatar.Fallback>{member.initials}</Avatar.Fallback>
+            </Avatar.Root>
+            <Select.ItemText>{member.name}</Select.ItemText>
+            {member.role ? <Badge.Root color={member.color}>{member.role}</Badge.Root> : null}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/rich-options.tsx

@@ -0,0 +1,72 @@
+/** Options with a picture, a second line and a price; the trigger draws the picked option with the same parts — `renderValue`, `Select.ItemText`, `Select.ItemDescription`, `Select.ItemMeta`. */
+import { Icon, type PaletteColor, Select, Thumbnail } from "prime-ui-kit";
+
+type Tariff = { value: string; title: string; terms: string; price: string; color: PaletteColor };
+
+const TARIFFS: Tariff[] = [
+  {
+    value: "courier",
+    title: "Курьер",
+    terms: "Завтра, 10:00–18:00",
+    price: "450 ₽",
+    color: "blue",
+  },
+  {
+    value: "express",
+    title: "Экспресс",
+    terms: "Сегодня за 2 часа",
+    price: "890 ₽",
+    color: "orange",
+  },
+  { value: "pickup", title: "Пункт выдачи", terms: "Через 2 дня", price: "190 ₽", color: "green" },
+  {
+    value: "freight",
+    title: "Грузовой",
+    terms: "От 3 дней, до 1 т",
+    price: "2 400 ₽",
+    color: "purple",
+  },
+];
+
+const BY_VALUE = new Map(TARIFFS.map((tariff) => [tariff.value, tariff]));
+
+export default function SelectRichOptionsExample() {
+  return (
+    <Select.Root label="Доставка" defaultValue="courier" placeholder="Выберите тариф">
+      <Select.Trigger>
+        <Select.Value
+          renderValue={({ value, label }) => {
+            const tariff = BY_VALUE.get(value);
+            return (
+              <>
+                <Thumbnail.Root color={tariff?.color}>
+                  <Thumbnail.Fallback>
+                    <Icon name="object.truck" />
+                  </Thumbnail.Fallback>
+                </Thumbnail.Root>
+                <Select.ItemText>{label}</Select.ItemText>
+                <Select.ItemDescription>
+                  {tariff?.terms} · {tariff?.price}
+                </Select.ItemDescription>
+              </>
+            );
+          }}
+        />
+      </Select.Trigger>
+      <Select.Content>
+        {TARIFFS.map((tariff) => (
+          <Select.Item key={tariff.value} value={tariff.value}>
+            <Thumbnail.Root color={tariff.color}>
+              <Thumbnail.Fallback>
+                <Icon name="object.truck" />
+              </Thumbnail.Fallback>
+            </Thumbnail.Root>
+            <Select.ItemText>{tariff.title}</Select.ItemText>
+            <Select.ItemDescription>{tariff.terms}</Select.ItemDescription>
+            <Select.ItemMeta>{tariff.price}</Select.ItemMeta>
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/searchable.tsx

@@ -0,0 +1,42 @@
+/** A long list with a search field: options match their label and keywords, groups and the separator hide while searching — `searchable`, `keywords`, `Select.Group`. */
+import { Select } from "prime-ui-kit";
+
+const RUSSIA = [
+  { value: "msk", label: "Москва", keywords: "moscow" },
+  { value: "spb", label: "Санкт-Петербург", keywords: "питер spb" },
+  { value: "nsk", label: "Новосибирск", keywords: "" },
+  { value: "ekb", label: "Екатеринбург", keywords: "екб" },
+  { value: "kzn", label: "Казань", keywords: "" },
+  { value: "nnv", label: "Нижний Новгород", keywords: "нн" },
+];
+
+export default function SelectSearchableExample() {
+  return (
+    <Select.Root
+      label="Город доставки"
+      placeholder="Выберите город"
+      labels={{ search: "Найти город" }}
+    >
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content searchable>
+        <Select.Group label="Россия">
+          {RUSSIA.map((city) => (
+            <Select.Item key={city.value} value={city.value} keywords={city.keywords}>
+              {city.label}
+            </Select.Item>
+          ))}
+        </Select.Group>
+        <Select.Separator />
+        <Select.Group label="Казахстан">
+          <Select.Item value="ala">Алматы</Select.Item>
+          <Select.Item value="ast">Астана</Select.Item>
+          <Select.Item value="shy" disabled>
+            Шымкент — скоро
+          </Select.Item>
+        </Select.Group>
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/server-search.tsx

@@ -0,0 +1,93 @@
+/** A client out of thousands: the parent searches on the server as the query changes and loads the next page at the end of the list — `search`, `onSearchChange`, `filter`, `loading`, `hasMore`, `loadingMore`, `onLoadMore`. */
+import { Select } from "prime-ui-kit";
+import * as React from "react";
+
+type Client = { id: string; name: string; inn: string };
+
+const NAMES = [
+  "Вектор",
+  "Северсталь-Сервис",
+  "Альфа-Логистик",
+  "Балтийский берег",
+  "Гранит",
+  "Деловые линии",
+  "Енисей-Агро",
+  "Звезда",
+  "Империя вкуса",
+  "Кедр",
+  "Ладога",
+  "Меридиан",
+];
+const FORMS = ["ООО", "АО", "ИП"];
+const REGIONS = ["Москва", "Казань", "Пермь", "Тула", "Омск"];
+const PAGE_SIZE = 15;
+const LATENCY_MS = 500;
+
+const CLIENTS: Client[] = Array.from({ length: NAMES.length * REGIONS.length }, (_, i) => ({
+  id: `client-${i + 1}`,
+  name: `${FORMS[i % FORMS.length]} «${NAMES[i % NAMES.length]}», ${REGIONS[Math.floor(i / NAMES.length)]}`,
+  inn: String(7701000000 + i * 7919),
+}));
+
+/** What the server answers: clients whose name or INN contain the query. */
+function findClients(query: string): Client[] {
+  const text = query.trim().toLocaleLowerCase();
+  return CLIENTS.filter(
+    (client) => client.name.toLocaleLowerCase().includes(text) || client.inn.includes(text),
+  );
+}
+
+export default function SelectServerSearchExample() {
+  const [search, setSearch] = React.useState("");
+  const [clients, setClients] = React.useState<Client[]>([]);
+  const [total, setTotal] = React.useState(0);
+  const [loading, setLoading] = React.useState(true);
+  const [loadingMore, setLoadingMore] = React.useState(false);
+
+  // A new query asks the server after a pause; the results on screen stay until the answer.
+  React.useEffect(() => {
+    setLoading(true);
+    const timer = window.setTimeout(() => {
+      const found = findClients(search);
+      setClients(found.slice(0, PAGE_SIZE));
+      setTotal(found.length);
+      setLoading(false);
+    }, LATENCY_MS);
+    return () => window.clearTimeout(timer);
+  }, [search]);
+
+  const loadMore = () => {
+    setLoadingMore(true);
+    window.setTimeout(() => {
+      setClients((shown) => findClients(search).slice(0, shown.length + PAGE_SIZE));
+      setLoadingMore(false);
+    }, LATENCY_MS);
+  };
+
+  return (
+    <Select.Root
+      label="Клиент"
+      placeholder="Выберите клиента"
+      search={search}
+      onSearchChange={setSearch}
+      filter={false}
+      loading={loading}
+      hasMore={clients.length < total}
+      loadingMore={loadingMore}
+      onLoadMore={loadMore}
+      labels={{ search: "Название или ИНН" }}
+    >
+      <Select.Trigger>
+        <Select.Value />
+      </Select.Trigger>
+      <Select.Content searchable>
+        {clients.map((client) => (
+          <Select.Item key={client.id} value={client.id} label={client.name}>
+            <Select.ItemText>{client.name}</Select.ItemText>
+            <Select.ItemDescription>ИНН {client.inn}</Select.ItemDescription>
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/dist/skill/reference/components/select/examples/sizes.tsx

@@ -0,0 +1,23 @@
+/** Every size tier; the label, the list rows and the hint take the tier of the field — `size`. */
+import { Select } from "prime-ui-kit";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function SelectSizesExample() {
+  return (
+    <>
+      {SIZES.map((size) => (
+        <Select.Root key={size} size={size} label={size} defaultValue="week">
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Item value="day">За день</Select.Item>
+            <Select.Item value="week">За неделю</Select.Item>
+            <Select.Item value="month">За месяц</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      ))}
+    </>
+  );
+}

package/dist/skill/reference/components/select/examples/states.tsx

@@ -0,0 +1,67 @@
+/** A default field next to a disabled, a loading, an invalid one and a list with nothing in it — `disabled`, `loading`, `invalid`, `labels`. */
+import { Select } from "prime-ui-kit";
+
+const ROLES = [
+  { value: "viewer", label: "Наблюдатель" },
+  { value: "editor", label: "Редактор" },
+  { value: "admin", label: "Администратор" },
+];
+
+export default function SelectStatesExample() {
+  return (
+    <>
+      <Select.Root label="default" defaultValue="editor">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+      <Select.Root label="disabled" defaultValue="viewer" disabled>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+      <Select.Root label="loading" placeholder="Загружаем роли…" loading>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{null}</Select.Content>
+      </Select.Root>
+      <Select.Root label="invalid" placeholder="Выберите роль" invalid>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+      <Select.Root
+        label="labels.empty"
+        placeholder="Нет доступных команд"
+        labels={{ empty: "Команд пока нет" }}
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{null}</Select.Content>
+      </Select.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/select/examples/validation.tsx

@@ -0,0 +1,46 @@
+/** Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. */
+import { Select } from "prime-ui-kit";
+import * as React from "react";
+
+export default function SelectValidationExample() {
+  const [owner, setOwner] = React.useState("anna");
+
+  return (
+    <>
+      <Select.Root label="Страна" required hint="Определяет валюту счетов" defaultValue="ru">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="ru">Россия</Select.Item>
+          <Select.Item value="kz">Казахстан</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root
+        label="Ответственный"
+        required
+        error={owner === "none" ? "Назначьте ответственного" : undefined}
+        value={owner}
+        onValueChange={setOwner}
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="none">Не назначен</Select.Item>
+          <Select.Item value="anna">Анна Петрова</Select.Item>
+          <Select.Item value="ivan">Иван Смирнов</Select.Item>
+        </Select.Content>
+      </Select.Root>
+      <Select.Root label="Отдел" optional placeholder="Не указан">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="sales">Продажи</Select.Item>
+          <Select.Item value="support">Поддержка</Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </>
+  );
+}