prime-ui-kit 0.9.0 → 0.9.2

package/src/components/scroll-container/examples/list.tsx

@@ -1,44 +0,0 @@
-/** A vertical list that scrolls inside a fixed-height flex card and a horizontal strip of badges (`axis="horizontal"`). Use when a region inside a card or panel must scroll on its own. */
-import { Badge, ScrollContainer, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const EVENTS = Array.from({ length: 16 }, (_, i) => `Заказ № ${1040 + i} оплачен`);
-const TAGS = ["Новые", "В работе", "Ждут оплаты", "Отгружены", "Возвраты", "Архив", "Черновики"];
-
-export default function ScrollContainerListExample() {
-  return (
-    <div className={styles.layout}>
-      <section className={styles.card} aria-label="Лента событий">
-        <Typography.Root as="h3" variant="title-s" className={styles.cardTitle}>
-          Лента событий
-        </Typography.Root>
-        <ScrollContainer>
-          <ul className={styles.list}>
-            {EVENTS.map((event) => (
-              <li key={event}>
-                <Typography.Root as="span" variant="body-m" tone="secondary">
-                  {event}
-                </Typography.Root>
-              </li>
-            ))}
-          </ul>
-        </ScrollContainer>
-      </section>
-      <section className={styles.card} aria-label="Фильтры">
-        <Typography.Root as="h3" variant="title-s" className={styles.cardTitle}>
-          Фильтры
-        </Typography.Root>
-        <ScrollContainer axis="horizontal">
-          <div className={styles.strip}>
-            {TAGS.map((tag) => (
-              <Badge.Root key={tag} size="m">
-                {tag}
-              </Badge.Root>
-            ))}
-          </div>
-        </ScrollContainer>
-      </section>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/item-content.tsx

@@ -1,78 +0,0 @@
-/** Segment content: icon with text, icon-only square segments with aria-label and Tooltip, and a SegmentedControl.Count badge. Use it to pick what goes inside a segment. */
-import { CalendarDays, Columns3, LayoutGrid, List } from "lucide-react";
-import { IconMoon, IconSun, SegmentedControl, Tooltip, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const VIEWS = [
-  { value: "list", label: "Списком", icon: List },
-  { value: "grid", label: "Плиткой", icon: LayoutGrid },
-  { value: "board", label: "Доской", icon: Columns3 },
-  { value: "calendar", label: "Календарём", icon: CalendarDays },
-] as const;
-
-export default function SegmentedControlItemContentExample() {
-  return (
-    <div className={styles.stack}>
-      <div className={styles.cell}>
-        <SegmentedControl.Root defaultValue="light" aria-label="Тема">
-          <SegmentedControl.Item value="light">
-            <SegmentedControl.Icon>
-              <IconSun />
-            </SegmentedControl.Icon>
-            Светлая
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="dark">
-            <SegmentedControl.Icon>
-              <IconMoon />
-            </SegmentedControl.Icon>
-            Тёмная
-          </SegmentedControl.Item>
-        </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
-          Иконка + текст
-        </Typography.Root>
-      </div>
-
-      <div className={styles.cell}>
-        <SegmentedControl.Root defaultValue="grid" aria-label="Вид списка">
-          {VIEWS.map(({ value, label, icon: ViewIcon }) => (
-            <Tooltip.Root key={value}>
-              <Tooltip.Trigger>
-                <SegmentedControl.Item value={value} aria-label={label}>
-                  <SegmentedControl.Icon>
-                    <ViewIcon />
-                  </SegmentedControl.Icon>
-                </SegmentedControl.Item>
-              </Tooltip.Trigger>
-              <Tooltip.Content>{label}</Tooltip.Content>
-            </Tooltip.Root>
-          ))}
-        </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
-          Только иконки: квадратные сегменты
-        </Typography.Root>
-      </div>
-
-      <div className={styles.cell}>
-        <SegmentedControl.Root defaultValue="open" aria-label="Статус задач">
-          <SegmentedControl.Item value="open">
-            Открытые
-            <SegmentedControl.Count color="blue">12</SegmentedControl.Count>
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="review">
-            На проверке
-            <SegmentedControl.Count>3</SegmentedControl.Count>
-          </SegmentedControl.Item>
-          <SegmentedControl.Item value="done">
-            Готово
-            <SegmentedControl.Count>148</SegmentedControl.Count>
-          </SegmentedControl.Item>
-        </SegmentedControl.Root>
-        <Typography.Root variant="caption" tone="muted">
-          Со счётчиком
-        </Typography.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/surfaces.tsx

@@ -1,82 +0,0 @@
-/** The same group on the canvas, in a card, in a nested card and in a modal. Use it to check the track and thumb contrast on every host. */
-import { Button, Card, Modal, SegmentedControl, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-function Period({ label }: { label: string }) {
-  return (
-    <SegmentedControl.Root defaultValue="week" aria-label={label}>
-      <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-      <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-      <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-    </SegmentedControl.Root>
-  );
-}
-
-export default function SegmentedControlSurfacesExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div className={styles.hosts}>
-      <div className={styles.host}>
-        <Typography.Root variant="caption" tone="muted">
-          Холст
-        </Typography.Root>
-        <Period label="Период, холст" />
-      </div>
-      <div className={styles.host}>
-        <Typography.Root variant="caption" tone="muted">
-          Карточка
-        </Typography.Root>
-        <Card.Root>
-          <Period label="Период, карточка" />
-        </Card.Root>
-      </div>
-      <div className={styles.host}>
-        <Typography.Root variant="caption" tone="muted">
-          Карточка в карточке
-        </Typography.Root>
-        <Card.Root>
-          <Card.Root>
-            <Period label="Период, вложенная карточка" />
-          </Card.Root>
-        </Card.Root>
-      </div>
-      <div className={styles.host}>
-        <Typography.Root variant="caption" tone="muted">
-          Модальное окно
-        </Typography.Root>
-        <Button.Root variant="outline" tone="neutral" onClick={() => setOpen(true)}>
-          Открыть
-        </Button.Root>
-        <Modal.Root open={open} onOpenChange={setOpen}>
-          <Modal.Content size="s">
-            <Modal.Header>
-              <Modal.Title>Экспорт отчёта</Modal.Title>
-              <Modal.Description>Выберите период выгрузки.</Modal.Description>
-            </Modal.Header>
-            <Modal.Body>
-              <SegmentedControl.Root fullWidth defaultValue="month" aria-label="Период выгрузки">
-                <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-                <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-                <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
-                <SegmentedControl.Item value="year">Год</SegmentedControl.Item>
-              </SegmentedControl.Root>
-            </Modal.Body>
-            <Modal.Footer>
-              <Modal.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Отмена
-                </Button.Root>
-              </Modal.Close>
-              <Modal.Confirm>
-                <Button.Root onClick={() => setOpen(false)}>Выгрузить</Button.Root>
-              </Modal.Confirm>
-            </Modal.Footer>
-          </Modal.Content>
-        </Modal.Root>
-      </div>
-    </div>
-  );
-}

package/src/components/segmented-control/examples/toolbar.tsx

@@ -1,56 +0,0 @@
-/** A task toolbar with search, a view switch, a period switch and an export button, all size m. Use it to compose segmented controls into a toolbar. */
-import { CalendarDays, Columns3, List } from "lucide-react";
-import { Button, IconDownload, IconSearch, Input, SegmentedControl } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function SegmentedControlToolbarExample() {
-  return (
-    <div className={styles.toolbar}>
-      <Input.Root className={styles.toolbarSearch}>
-        <Input.Wrapper>
-          <Input.Icon side="start">
-            <IconSearch />
-          </Input.Icon>
-          <Input.Field
-            type="search"
-            placeholder="Задача или исполнитель"
-            aria-label="Поиск задач"
-          />
-        </Input.Wrapper>
-      </Input.Root>
-      <SegmentedControl.Root defaultValue="board" aria-label="Вид">
-        <SegmentedControl.Item value="list">
-          <SegmentedControl.Icon>
-            <List />
-          </SegmentedControl.Icon>
-          Список
-        </SegmentedControl.Item>
-        <SegmentedControl.Item value="board">
-          <SegmentedControl.Icon>
-            <Columns3 />
-          </SegmentedControl.Icon>
-          Доска
-        </SegmentedControl.Item>
-        <SegmentedControl.Item value="calendar">
-          <SegmentedControl.Icon>
-            <CalendarDays />
-          </SegmentedControl.Icon>
-          Календарь
-        </SegmentedControl.Item>
-      </SegmentedControl.Root>
-      <SegmentedControl.Root defaultValue="week" aria-label="Период">
-        <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-        <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-        <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-        <SegmentedControl.Item value="year">Год</SegmentedControl.Item>
-      </SegmentedControl.Root>
-      <Button.Root variant="outline" tone="neutral">
-        <Button.Icon>
-          <IconDownload />
-        </Button.Icon>
-        Экспорт
-      </Button.Root>
-    </div>
-  );
-}

package/src/components/segmented-progress-bar/COMPONENT.md

@@ -1,128 +0,0 @@
-# SegmentedProgressBar
-
-**Category:** feedback
-
-> One bar made of proportional segments: storage by type, task statuses, a funnel or quotas.
-
-## When to use
-- Showing how a whole splits into parts: used space by file type, tasks by status, budget by category.
-- Several progress parts in one line (done / in progress / overdue).
-
-## When not to use
-- A single value toward a goal → use [ProgressBar](../progress-bar/COMPONENT.md) or [ProgressCircle](../progress-circle/COMPONENT.md).
-- Navigating discrete wizard steps → use [Stepper](../stepper/COMPONENT.md).
-- Choosing one of several options → use [SegmentedControl](../segmented-control/COMPONENT.md).
-- Detailed data with axes → use a chart.
-
-## Import
-```tsx
-import { SegmentedProgressBar } from "prime-ui-kit";
-```
-Types: `SegmentedProgressSegment`, `SegmentedProgressBarRootProps`, `SegmentedProgressBarLabels`.
-
-## API
-
-### SegmentedProgressBar.Root
-Leaf component. `forwardRef` to the track `HTMLDivElement` (`role="group"`). No native props passthrough.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `segments` | `SegmentedProgressSegment[]` | — (required) | Segments in order; each one's width is its share of the sum of all values. |
-| `label` | `string` | — | Visible label above the track; the track is labelled by it and described by the distribution text. Without `label` the distribution text is the track's `aria-label`. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Track height and label typography (same scale as ProgressBar). |
-| `segmentGap` | `"none" \| "hairline"` | `"none"` | Gap between segments, see Variants. |
-| `labels` | `Partial<SegmentedProgressBarLabels>` | see Accessibility | Accessible texts for empty states. |
-| `className` | `string` | — | Class on the root `<div>`. |
-
-### SegmentedProgressSegment
-| Field | Type | Default | Description |
-|---|---|---|---|
-| `value` | `number` | — (required) | Non-negative weight; negative or non-finite values count as 0. |
-| `label` | `string` | — | Name used in the accessible distribution text and as the segment `title`. |
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger"` | `"accent"` | Segment fill. |
-
-## Variants
-
-### tone (segment)
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `accent` | Accent fill | The main or "in progress" share | yes |
-| `success` | Success fill | Done / accepted | |
-| `warning` | Warning fill | Pending / at risk | |
-| `danger` | Danger fill | Overdue / rejected | |
-| `neutral` | `fill-strong-hover` fill, slightly darker than the track | Free space, "other" | |
-
-### segmentGap
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `none` | One continuous pill on a `fill-strong` track | Parts of a single process | yes |
-| `hairline` | Segments as separate pills with a 4px gap, track background transparent | Distinct categories (file types, statuses) | |
-
-### size
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `xs` | Track 4px, label 12/16, gap 4 | Table cells | |
-| `s` | Track 4px, label 12/16, gap 4 | Compact lists | |
-| `m` | Track 4px, label 13/20, gap 8 | Default | yes |
-| `l` | Track 8px, label 14/20, gap 8 | Prominent summaries | |
-| `xl` | Track 8px, label 14/20, gap 8 | Dashboards hero | |
-
-**Combinations**
-- Recommended: `hairline` + a legend for categories; `neutral` for the "free" remainder.
-- Pointless: one segment only — use ProgressBar.
-- Avoid: more than 5–6 segments; color as the only carrier of meaning — add a legend.
-
-## States
-| State | Driven by | DOM |
-|---|---|---|
-| size / gap | props | `data-size`, `data-segment-gap` on the root |
-| segment tone | `segment.tone` | `data-tone` on each segment |
-| empty | `segments` empty or all values 0 | only the `fill-strong` track with `segmentGap="none"`; with `"hairline"` the track is transparent, so an empty bar is invisible (show a text or use `none` when data can be empty). The accessible text is `labels.empty` / `labels.allEmpty` |
-
-Segment widths animate (flex-grow transition; none under `prefers-reduced-motion`).
-
-## Layout & spacing
-- `width: 100%` of the parent. Label → track: `--prime-space-1` (xs/s) or `--prime-space-2` (m–xl).
-- Put a legend under the bar with `--prime-space-4` from it.
-
-## Accessibility
-- The track is `role="group"`; its accessible text lists the shares: "Видео: 38%, Документы: 21%, …" (segments without `label` are read as "NN%").
-- With `label`: `aria-labelledby` the label and `aria-describedby` the visually hidden distribution; without `label`: `aria-label` = distribution.
-
-| `labels` key | Default | Used for |
-|---|---|---|
-| `empty` | `"Нет сегментов"` | Accessible text when `segments` is empty |
-| `allEmpty` | `"Все сегменты пусты"` | Accessible text when every segment is 0 |
-
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [storage-distribution.tsx](examples/storage-distribution.tsx) | Storage by type in a card with a legend, `hairline`, `neutral` free space | "Used by type" breakdowns |
-| [sizes.tsx](examples/sizes.tsx) | `xs`…`xl` with labels | Picking a size |
-| [segment-gap.tsx](examples/segment-gap.tsx) | `none` vs `hairline`, empty `segments` | Gap choice and the empty state |
-
-```tsx
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-export function TaskStatus() {
-  return (
-    <SegmentedProgressBar.Root
-      label="Задачи"
-      segments={[
-        { value: 55, label: "Выполнено", tone: "success" },
-        { value: 25, label: "В работе" },
-        { value: 20, label: "Просрочено", tone: "danger" },
-      ]}
-    />
-  );
-}
-```
-
-## Mistakes
-- Passing percentages that do not sum to 100 and expecting fixed widths → widths are always shares of the sum.
-- Segments without `label` → screen readers hear only percentages; give each segment a label.
-- `tone="info"` → not supported for segments.
-
-## Related
-- [ProgressBar](../progress-bar/COMPONENT.md), [ProgressCircle](../progress-circle/COMPONENT.md).
-- [Stepper](../stepper/COMPONENT.md) — step navigation.

package/src/components/segmented-progress-bar/examples/examples.module.css

@@ -1,68 +0,0 @@
-/* Layout helpers for the SegmentedProgressBar examples. Semantic tokens only. */
-
-/* 28rem column of bars. */
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
-  width: min(100%, calc(var(--prime-space-24) * 4 + var(--prime-space-16)));
-  min-width: 0;
-}
-
-.card {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-4);
-  width: min(100%, calc(var(--prime-space-24) * 4 + var(--prime-space-16)));
-  padding: var(--prime-card-padding-m);
-  border-radius: var(--prime-card-radius);
-  background: var(--prime-color-card-bg);
-  box-shadow: var(--prime-card-shadow);
-}
-
-.legend {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-space-2) var(--prime-space-4);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.legendItem {
-  display: flex;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-.legendValue {
-  font-variant-numeric: tabular-nums;
-}
-
-/* Legend dots repeat the segment fills. */
-.dot {
-  width: var(--prime-space-2);
-  height: var(--prime-space-2);
-  border-radius: var(--prime-radius-full);
-}
-
-.dot[data-tone="accent"] {
-  background: var(--prime-color-accent-default);
-}
-
-.dot[data-tone="success"] {
-  background: var(--prime-color-success-default);
-}
-
-.dot[data-tone="warning"] {
-  background: var(--prime-color-warning-default);
-}
-
-.dot[data-tone="danger"] {
-  background: var(--prime-color-danger-default);
-}
-
-.dot[data-tone="neutral"] {
-  background: var(--prime-color-fill-strong-hover);
-}

package/src/components/segmented-progress-bar/examples/segment-gap.tsx

@@ -1,24 +0,0 @@
-/** `segmentGap="none"` is one solid bar, `"hairline"` separates segments with a 4px gap; an empty `segments` array shows only the track. Use `hairline` when segments are distinct categories. */
-import { SegmentedProgressBar } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const segments = [
-  { value: 40, label: "Принято", tone: "success" },
-  { value: 35, label: "На проверке", tone: "warning" },
-  { value: 25, label: "Отклонено", tone: "danger" },
-] as const;
-
-export default function SegmentedProgressBarSegmentGapExample() {
-  return (
-    <div className={styles.stack}>
-      <SegmentedProgressBar.Root segments={[...segments]} label='segmentGap="none"' />
-      <SegmentedProgressBar.Root
-        segments={[...segments]}
-        segmentGap="hairline"
-        label='segmentGap="hairline"'
-      />
-      <SegmentedProgressBar.Root segments={[]} label="Нет данных" />
-    </div>
-  );
-}

package/src/components/segmented-progress-bar/examples/sizes.tsx

@@ -1,31 +0,0 @@
-/** The same scale as ProgressBar: track 4px for xs–m and 8px for l–xl, label by control tier. Match the size to the surrounding text. */
-import {
-  type ControlSize,
-  SegmentedProgressBar,
-  type SegmentedProgressSegment,
-} from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const sizes: ControlSize[] = ["xs", "s", "m", "l", "xl"];
-
-const segments: SegmentedProgressSegment[] = [
-  { value: 55, label: "Выполнено", tone: "success" },
-  { value: 25, label: "В работе", tone: "accent" },
-  { value: 20, label: "Просрочено", tone: "danger" },
-];
-
-export default function SegmentedProgressBarSizesExample() {
-  return (
-    <div className={styles.stack}>
-      {sizes.map((size) => (
-        <SegmentedProgressBar.Root
-          key={size}
-          size={size}
-          segments={segments}
-          label={`Задачи · ${size}`}
-        />
-      ))}
-    </div>
-  );
-}

package/src/components/segmented-progress-bar/examples/storage-distribution.tsx

@@ -1,41 +0,0 @@
-/** Storage usage in a card: segment weights are shares of the total, a legend repeats the colors in text and screen readers get the distribution as text. Use it for "used by type" breakdowns. */
-import { SegmentedProgressBar, type SegmentedProgressSegment, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const segments: SegmentedProgressSegment[] = [
-  { value: 38, label: "Видео", tone: "accent" },
-  { value: 21, label: "Документы", tone: "success" },
-  { value: 12, label: "Архивы", tone: "warning" },
-  { value: 29, label: "Свободно", tone: "neutral" },
-];
-
-export default function SegmentedProgressBarStorageDistributionExample() {
-  return (
-    <div className={styles.card}>
-      <Typography.Root as="h3" variant="title-s">
-        Хранилище: 71 из 100 ГБ
-      </Typography.Root>
-      <SegmentedProgressBar.Root
-        segments={segments}
-        label="Занято по типам файлов"
-        segmentGap="hairline"
-      />
-      <ul className={styles.legend}>
-        {segments.map((s) => (
-          <li key={s.label} className={styles.legendItem}>
-            <span className={styles.dot} data-tone={s.tone} aria-hidden />
-            <Typography.Root
-              as="span"
-              variant="caption"
-              tone="secondary"
-              className={styles.legendValue}
-            >
-              {s.label} · {s.value} ГБ
-            </Typography.Root>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}

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

@@ -1,21 +0,0 @@
-/** 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/search-groups.tsx

@@ -1,61 +0,0 @@
-/** 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>
-  );
-}