prime-ui-kit 0.7.11 → 0.9.0

package/src/components/select/examples/examples.module.css

@@ -1,48 +1,54 @@
-.stack {
+/* Example layout: semantic tokens only. */
+
+.sizeRow {
   display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-s);
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prime-space-3);
+  width: 100%;
 }
 
-.stackNarrow {
-  width: 100%;
-  max-width: calc(var(--prime-sys-unit-1rem) * 22);
+.sizeCell {
+  flex: 0 1 calc(var(--prime-space-20) * 2);
+  min-width: 0;
 }
 
-.fullWidthShell {
-  box-sizing: border-box;
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc(var(--prime-space-24) * 2.5), 1fr));
+  gap: var(--prime-space-5) var(--prime-space-4);
   width: 100%;
-  max-width: calc(var(--prime-sys-unit-1rem) * 20);
 }
 
-.field {
+.narrow {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-sys-spacing-xs);
+  gap: var(--prime-space-3);
   width: 100%;
-  max-width: calc(var(--prime-sys-unit-1rem) * 22);
-  min-width: 0;
+  max-width: calc(var(--prime-space-24) * 3);
 }
 
-.fieldFullBleed {
+.form {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-sys-spacing-xs);
-  width: 100%;
-  min-width: 0;
-  max-width: none;
+  gap: var(--prime-space-5);
 }
 
-.form {
+.actions {
   display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-m);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--prime-space-2);
+}
+
+.card {
   width: 100%;
-  max-width: calc(var(--prime-sys-unit-1rem) * 28);
-  min-width: 0;
+  max-width: calc(var(--prime-space-24) * 5);
 }
 
+/* Centred caption under the field (text styling comes from Typography). */
 .caption {
-  margin: 0;
-  color: var(--prime-sys-color-content-secondary);
+  width: 100%;
+  text-align: center;
 }

package/src/components/select/examples/in-form.tsx

@@ -0,0 +1,77 @@
+/** A settings form in a card: required, hint and optional on Root, grouped options, a trigger icon and an option label that differs from its row text. Use it for selects inside forms. */
+import { Button, Card, Icon, Select } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SelectInFormExample() {
+  return (
+    <Card.Root variant="panel" className={styles.card}>
+      <Card.SectionHeader>
+        <Card.SectionTitle>Региональные настройки</Card.SectionTitle>
+      </Card.SectionHeader>
+      <Card.Body>
+        <form className={styles.form} onSubmit={(event) => event.preventDefault()}>
+          <Select.Root label="Страна" required defaultValue="ru" placeholder="Выберите страну">
+            <Select.Trigger>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content searchable>
+              <Select.Item value="ru">Россия</Select.Item>
+              <Select.Item value="kz">Казахстан</Select.Item>
+              <Select.Item value="by">Беларусь</Select.Item>
+              <Select.Item value="am">Армения</Select.Item>
+            </Select.Content>
+          </Select.Root>
+          <Select.Root
+            label="Часовой пояс"
+            hint="Время в отчётах и уведомлениях"
+            defaultValue="msk"
+          >
+            <Select.Trigger>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Group>
+                <Select.GroupLabel>Европа</Select.GroupLabel>
+                <Select.Item value="kal">Калининград, UTC+2</Select.Item>
+                <Select.Item value="msk">Москва, UTC+3</Select.Item>
+              </Select.Group>
+              <Select.Separator />
+              <Select.Group>
+                <Select.GroupLabel>Азия</Select.GroupLabel>
+                <Select.Item value="ekb">Екатеринбург, UTC+5</Select.Item>
+                <Select.Item value="nsk">Новосибирск, UTC+7</Select.Item>
+                <Select.Item value="vvo">Владивосток, UTC+10</Select.Item>
+              </Select.Group>
+            </Select.Content>
+          </Select.Root>
+          <Select.Root label="Валюта отчётов" optional defaultValue="rub">
+            <Select.Trigger>
+              <Select.TriggerIcon>
+                <Icon name="nav.layoutGrid" tone="secondary" />
+              </Select.TriggerIcon>
+              <Select.Value />
+            </Select.Trigger>
+            <Select.Content>
+              <Select.Item value="rub" label="Российский рубль, ₽">
+                ₽ RUB
+              </Select.Item>
+              <Select.Item value="kzt" label="Казахстанский тенге, ₸">
+                ₸ KZT
+              </Select.Item>
+              <Select.Item value="usd" label="Доллар США, $">
+                $ USD
+              </Select.Item>
+            </Select.Content>
+          </Select.Root>
+          <div className={styles.actions}>
+            <Button.Root variant="ghost" tone="neutral">
+              Отмена
+            </Button.Root>
+            <Button.Root type="submit">Сохранить</Button.Root>
+          </div>
+        </form>
+      </Card.Body>
+    </Card.Root>
+  );
+}

package/src/components/select/examples/multiple.tsx

@@ -0,0 +1,38 @@
+/** A controlled multi-select: string[] value, checkboxes in the list, the panel stays open, labels joined in the trigger. Use it for a few values from a short list when chips are not needed. */
+import { Select, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SelectMultipleExample() {
+  const [value, setValue] = React.useState<string[]>(["eng", "design"]);
+
+  return (
+    <div className={styles.narrow}>
+      <Select.Root
+        label="Отделы"
+        multiple
+        value={value}
+        onValueChange={setValue}
+        placeholder="Выберите отделы"
+        clearable
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content searchable>
+          <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>
+      <Typography.Root variant="caption" tone="muted" className={styles.caption}>
+        Выбрано: <code>{value.length ? value.join(", ") : "—"}</code>
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/select/examples/native.tsx

@@ -0,0 +1,21 @@
+/** The system select (native) built from the same Select.Item parts, with label and hint. Use it on mobile-first forms where the OS picker is preferable. */
+import { Select } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function SelectNativeExample() {
+  return (
+    <div className={styles.narrow}>
+      <Select.Root
+        native
+        label="Тема оформления"
+        hint="Системный список на мобильных"
+        defaultValue="auto"
+      >
+        <Select.Item value="auto">Как в системе</Select.Item>
+        <Select.Item value="light">Светлая</Select.Item>
+        <Select.Item value="dark">Тёмная</Select.Item>
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/select/examples/rich-options.tsx

@@ -0,0 +1,98 @@
+/** Rich options with ItemMedia, ItemText, ItemDescription and ItemMeta, and the trigger rendering the selected option via a Select.Value function. Use it when options need a thumbnail, a second line or a price. */
+import { Bike } from "lucide-react";
+import { type PaletteColor, Select } from "prime-ui-kit";
+
+type Vehicle = {
+  value: string;
+  title: string;
+  kind: string;
+  price: string;
+  color: PaletteColor;
+};
+
+const vehicles: Vehicle[] = [
+  { value: "nmax", title: "Yamaha NMAX 155", kind: "Скутер", price: "250 ฿ / день", color: "blue" },
+  { value: "pcx", title: "Honda PCX 160", kind: "Скутер", price: "250 ฿ / день", color: "sky" },
+  {
+    value: "adv160",
+    title: "Honda ADV 160",
+    kind: "Скутер",
+    price: "300 ฿ / день",
+    color: "green",
+  },
+  {
+    value: "adv350",
+    title: "Honda ADV 350",
+    kind: "Максискутер",
+    price: "450 ฿ / день",
+    color: "teal",
+  },
+  {
+    value: "forza",
+    title: "Honda Forza 350",
+    kind: "Максискутер",
+    price: "450 ฿ / день",
+    color: "purple",
+  },
+  {
+    value: "xmax",
+    title: "Yamaha XMAX 300",
+    kind: "Максискутер",
+    price: "450 ฿ / день",
+    color: "orange",
+  },
+  {
+    value: "xadv",
+    title: "Honda X-ADV 750",
+    kind: "Премиум",
+    price: "1 300 ฿ / день",
+    color: "red",
+  },
+  {
+    value: "tmax",
+    title: "Yamaha TMAX 560",
+    kind: "Премиум",
+    price: "1 200 ฿ / день",
+    color: "pink",
+  },
+];
+
+const byValue = new Map(vehicles.map((v) => [v.value, v]));
+
+export default function SelectRichOptionsExample() {
+  return (
+    <Select.Root label="Байк" defaultValue="adv160" placeholder="Выберите байк">
+      <Select.Trigger>
+        <Select.Value>
+          {({ value }) => {
+            const v = byValue.get(value);
+            if (!v) return value;
+            return (
+              <>
+                <Select.ItemMedia color={v.color}>
+                  <Bike />
+                </Select.ItemMedia>
+                <Select.ItemText>{v.title}</Select.ItemText>
+                <Select.ItemDescription>
+                  {v.kind} · {v.price}
+                </Select.ItemDescription>
+              </>
+            );
+          }}
+        </Select.Value>
+      </Select.Trigger>
+      <Select.Content searchable>
+        {vehicles.map((v) => (
+          <Select.Item key={v.value} value={v.value}>
+            <Select.ItemMedia color={v.color}>
+              <Bike />
+            </Select.ItemMedia>
+            <Select.ItemText>{v.title}</Select.ItemText>
+            <Select.ItemDescription>{v.kind}</Select.ItemDescription>
+            <Select.ItemMeta>{v.price}</Select.ItemMeta>
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

package/src/components/select/examples/search-groups.tsx

@@ -0,0 +1,61 @@
+/** A searchable list with keywords, groups, a separator and a disabled option. Use it for long lists (cities, countries) where typing is faster than scrolling. */
+import { Select, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const RUSSIA = [
+  ["msk", "Москва", "moscow"],
+  ["spb", "Санкт-Петербург", "питер spb"],
+  ["nsk", "Новосибирск", ""],
+  ["ekb", "Екатеринбург", "екб"],
+  ["kzn", "Казань", ""],
+  ["nnv", "Нижний Новгород", "нн"],
+  ["chl", "Челябинск", ""],
+  ["krs", "Красноярск", ""],
+  ["sam", "Самара", ""],
+  ["ufa", "Уфа", ""],
+] as const;
+
+export default function SelectSearchGroupsExample() {
+  const [city, setCity] = React.useState("");
+
+  return (
+    <div className={styles.narrow}>
+      <Select.Root
+        label="Город доставки"
+        value={city}
+        onValueChange={setCity}
+        placeholder="Выберите город"
+        clearable
+        labels={{ search: "Найти город" }}
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content searchable>
+          <Select.Group>
+            <Select.GroupLabel>Россия</Select.GroupLabel>
+            {RUSSIA.map(([value, label, keywords]) => (
+              <Select.Item key={value} value={value} keywords={keywords}>
+                {label}
+              </Select.Item>
+            ))}
+          </Select.Group>
+          <Select.Separator />
+          <Select.Group>
+            <Select.GroupLabel>Казахстан</Select.GroupLabel>
+            <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>
+      <Typography.Root variant="caption" tone="muted" className={styles.caption}>
+        Наберите «питер» — сработают <code>keywords</code>; «xyz» — покажет «Ничего не найдено».
+      </Typography.Root>
+    </div>
+  );
+}

package/src/components/select/examples/sizes.tsx

@@ -0,0 +1,27 @@
+/** All five size tiers of the trigger (28–48px); list items take the same tier. Use it to line a select up with buttons and inputs of the same size. */
+import { Select } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function SelectSizesExample() {
+  return (
+    <div className={styles.sizeRow}>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.sizeCell}>
+          <Select.Root size={size} defaultValue="week">
+            <Select.Trigger aria-label={`Период, размер ${size}`}>
+              <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>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/select/examples/states.tsx

@@ -0,0 +1,81 @@
+/** Empty with placeholder, selected, clearable, loading, error, disabled and an empty list. Use it as a reference for every field state. */
+import { Select } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ROLES = (
+  <>
+    <Select.Item value="viewer">Наблюдатель</Select.Item>
+    <Select.Item value="editor">Редактор</Select.Item>
+    <Select.Item value="admin">Администратор</Select.Item>
+  </>
+);
+
+export default function SelectStatesExample() {
+  const [role, setRole] = React.useState("editor");
+
+  return (
+    <div className={styles.grid}>
+      <Select.Root label="Пусто" hint="Плейсхолдер вместо значения" placeholder="Выберите роль">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{ROLES}</Select.Content>
+      </Select.Root>
+      <Select.Root label="Выбрано" defaultValue="admin">
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{ROLES}</Select.Content>
+      </Select.Root>
+      <Select.Root
+        label="С кнопкой сброса"
+        hint="× или Delete очищают значение"
+        value={role}
+        onValueChange={setRole}
+        placeholder="Выберите роль"
+        clearable
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{ROLES}</Select.Content>
+      </Select.Root>
+      <Select.Root label="Загрузка" placeholder="Загружаем роли…" loading>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{null}</Select.Content>
+      </Select.Root>
+      <Select.Root
+        label="Ошибка"
+        required
+        error="Выберите роль, чтобы продолжить"
+        placeholder="Выберите роль"
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{ROLES}</Select.Content>
+      </Select.Root>
+      <Select.Root label="Отключено" defaultValue="viewer" disabled>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{ROLES}</Select.Content>
+      </Select.Root>
+      <Select.Root
+        label="Пустой список"
+        hint="Откройте: панель покажет пустое состояние"
+        placeholder="Нет доступных команд"
+        labels={{ empty: "Команд пока нет" }}
+      >
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>{null}</Select.Content>
+      </Select.Root>
+    </div>
+  );
+}

package/src/components/select/examples/with-badge.tsx

@@ -0,0 +1,47 @@
+/** Options with Select.ItemIcon and a Select.Badge in the trigger whose color follows the picked value. Use it when the chosen option carries a status. */
+import { IconLock, IconMail, IconSearch, type PaletteColor, Select } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const STATUS: Record<string, { text: string; color: PaletteColor }> = {
+  public: { text: "Открыт", color: "green" },
+  link: { text: "По ссылке", color: "orange" },
+  private: { text: "Закрыт", color: "gray" },
+};
+
+export default function SelectWithBadgeExample() {
+  const [access, setAccess] = React.useState("public");
+  const status = STATUS[access];
+
+  return (
+    <div className={styles.narrow}>
+      <Select.Root label="Доступ к проекту" value={access} onValueChange={setAccess}>
+        <Select.Trigger>
+          <Select.Value />
+          {status ? <Select.Badge color={status.color}>{status.text}</Select.Badge> : null}
+        </Select.Trigger>
+        <Select.Content>
+          <Select.Item value="public">
+            <Select.ItemIcon>
+              <IconSearch />
+            </Select.ItemIcon>
+            Виден в поиске
+          </Select.Item>
+          <Select.Item value="link">
+            <Select.ItemIcon>
+              <IconMail />
+            </Select.ItemIcon>
+            Только по приглашению
+          </Select.Item>
+          <Select.Item value="private">
+            <Select.ItemIcon>
+              <IconLock />
+            </Select.ItemIcon>
+            Только участники
+          </Select.Item>
+        </Select.Content>
+      </Select.Root>
+    </div>
+  );
+}