prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,54 +1,34 @@
-/* Example layout: semantic tokens only. */
+/* Layout of the Select scenarios: semantic tokens only. */
 
-.sizeRow {
+/* in-form.tsx: field → field 20, group → actions 32 (foundation §1). */
+.form {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--prime-space-3);
-  width: 100%;
-}
-
-.sizeCell {
-  flex: 0 1 calc(var(--prime-space-20) * 2);
-  min-width: 0;
-}
-
-.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%;
+  flex-direction: column;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-modal-width-m));
 }
 
-.narrow {
+.formHeader {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-space-3);
-  width: 100%;
-  max-width: calc(var(--prime-space-24) * 3);
+  gap: var(--prime-space-1);
 }
 
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
+.formFields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--prime-space-5) var(--prime-space-4);
 }
 
-.actions {
+.formActions {
   display: flex;
-  flex-wrap: wrap;
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }
 
-.card {
-  width: 100%;
-  max-width: calc(var(--prime-space-24) * 5);
-}
-
-/* Centred caption under the field (text styling comes from Typography). */
-.caption {
-  width: 100%;
-  text-align: center;
+@media (max-width: 639px) {
+  .formFields {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }

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

@@ -1,77 +1,66 @@
-/** 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";
+/** Regional settings form: the required country is checked on submit, the error replaces the hint — `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 submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(country ? undefined : "Выберите страну");
+  };
+
   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>
+    <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);
+          }}
+        >
+          <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">
+          <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}>
+        <Button.Root variant="ghost" tone="neutral" type="reset">
+          Отменить
+        </Button.Root>
+        <Button.Root type="submit">Сохранить</Button.Root>
+      </div>
+    </form>
   );
 }

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

@@ -1,38 +1,26 @@
-/** 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";
+/** 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() {
-  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>
+    <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/src/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/src/components/select/examples/rich-options.tsx

@@ -1,95 +1,69 @@
-/** 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";
+/** 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 Vehicle = {
-  value: string;
-  title: string;
-  kind: string;
-  price: string;
-  color: PaletteColor;
-};
+type Tariff = { value: string; title: string; terms: 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" },
+const TARIFFS: Tariff[] = [
   {
-    value: "adv160",
-    title: "Honda ADV 160",
-    kind: "Скутер",
-    price: "300 ฿ / день",
-    color: "green",
+    value: "courier",
+    title: "Курьер",
+    terms: "Завтра, 10:00–18:00",
+    price: "450 ₽",
+    color: "blue",
   },
   {
-    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 ฿ / день",
+    value: "express",
+    title: "Экспресс",
+    terms: "Сегодня за 2 часа",
+    price: "890 ₽",
     color: "orange",
   },
+  { value: "pickup", title: "Пункт выдачи", terms: "Через 2 дня", price: "190 ₽", color: "green" },
   {
-    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",
+    value: "freight",
+    title: "Грузовой",
+    terms: "От 3 дней, до 1 т",
+    price: "2 400 ₽",
+    color: "purple",
   },
 ];
 
-const byValue = new Map(vehicles.map((v) => [v.value, v]));
+const BY_VALUE = new Map(TARIFFS.map((tariff) => [tariff.value, tariff]));
 
 export default function SelectRichOptionsExample() {
   return (
-    <Select.Root label="Байк" defaultValue="adv160" placeholder="Выберите байк">
+    <Select.Root label="Доставка" defaultValue="courier" placeholder="Выберите тариф">
       <Select.Trigger>
-        <Select.Value>
-          {({ value }) => {
-            const v = byValue.get(value);
-            if (!v) return value;
+        <Select.Value
+          renderValue={({ value, label }) => {
+            const tariff = BY_VALUE.get(value);
             return (
               <>
-                <Select.ItemMedia color={v.color}>
-                  <Bike />
-                </Select.ItemMedia>
-                <Select.ItemText>{v.title}</Select.ItemText>
+                <Thumbnail.Root color={tariff?.color}>
+                  <Thumbnail.Fallback>
+                    <Icon name="object.truck" />
+                  </Thumbnail.Fallback>
+                </Thumbnail.Root>
+                <Select.ItemText>{label}</Select.ItemText>
                 <Select.ItemDescription>
-                  {v.kind} · {v.price}
+                  {tariff?.terms} · {tariff?.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.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>

package/src/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/src/components/select/examples/sizes.tsx

@@ -1,27 +1,23 @@
-/** 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. */
+/** Every size tier; the label, the list rows and the hint take the tier of the field — `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>
+        <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>
       ))}
-    </div>
+    </>
   );
 }

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

@@ -1,73 +1,59 @@
-/** Empty with placeholder, selected, clearable, loading, error, disabled and an empty list. Use it as a reference for every field state. */
+/** 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";
-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>
-  </>
-);
+const ROLES = [
+  { value: "viewer", label: "Наблюдатель" },
+  { value: "editor", label: "Редактор" },
+  { value: "admin", label: "Администратор" },
+];
 
 export default function SelectStatesExample() {
-  const [role, setRole] = React.useState("editor");
-
   return (
-    <div className={styles.grid}>
-      <Select.Root label="Пусто" hint="Плейсхолдер вместо значения" placeholder="Выберите роль">
+    <>
+      <Select.Root label="default" defaultValue="editor">
         <Select.Trigger>
           <Select.Value />
         </Select.Trigger>
-        <Select.Content>{ROLES}</Select.Content>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </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.Root label="disabled" defaultValue="viewer" disabled>
         <Select.Trigger>
           <Select.Value />
         </Select.Trigger>
-        <Select.Content>{ROLES}</Select.Content>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
       </Select.Root>
-      <Select.Root label="Загрузка" placeholder="Загружаем роли…" loading>
+      <Select.Root label="loading" 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.Root label="invalid" placeholder="Выберите роль" invalid>
         <Select.Trigger>
           <Select.Value />
         </Select.Trigger>
-        <Select.Content>{ROLES}</Select.Content>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
       </Select.Root>
       <Select.Root
-        label="Пустой список"
-        hint="Откройте: панель покажет пустое состояние"
+        label="labels.empty"
         placeholder="Нет доступных команд"
         labels={{ empty: "Команд пока нет" }}
       >
@@ -76,6 +62,6 @@ export default function SelectStatesExample() {
         </Select.Trigger>
         <Select.Content>{null}</Select.Content>
       </Select.Root>
-    </div>
+    </>
   );
 }