@reformer/ui-kit 1.0.0-beta.1

package/dist/components/ui/form-field.d.ts

@@ -0,0 +1,72 @@
+import { FieldNode } from '@reformer/core';
+import * as React from 'react';
+/** Props компонента {@link FormField}. */
+export interface FormFieldProps {
+    /**
+     * Поле формы. Из него берутся `component` (тип контрола), `componentProps`,
+     * `value`, `error`, `pending`, `setValue`, `blur`. Контрол инстанцируется
+     * автоматически через `CdkFormField.Control`.
+     */
+    control: FieldNode<any>;
+    /** Дополнительный CSS-класс для корневой `<div>`-обёртки. */
+    className?: string;
+    /**
+     * Префикс для `data-testid` (`field-<id>`, `label-<id>`, `input-<id>`,
+     * `error-<id>`). Если опущен — пытается взять `componentProps.testId`,
+     * иначе подставляет `'unknown'`.
+     */
+    testId?: string;
+    /**
+     * Кастомный input — оборачивается в `CdkFormField.Control asChild`. Используется,
+     * когда нужен нестандартный контрол (например, сторонняя маска), не
+     * зарегистрированный в `control.component`.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Готовый wrapper поля: автоматически рендерит `Label` → `Control` → `Error`
+ * из `@reformer/cdk/form-field`. Подключается напрямую `<FormField control=... />`
+ * или как `fieldWrapper` для `FormRenderer`.
+ *
+ * Особенности:
+ * - Для `Checkbox` верхний `Label` не рендерится (label идёт справа от контрола).
+ * - При `pending = true` (async-валидация) под полем показывается «Проверка...».
+ * - Обёрнут в `React.memo` со сравнением по ссылке `control` — критично для
+ *   производительности больших форм.
+ *
+ * @example Standalone в обычной форме
+ * ```tsx
+ * import { useMemo } from 'react';
+ * import { createForm, type FormSchema } from '@reformer/core';
+ * import { Button, FormField, Input } from '@reformer/ui-kit';
+ *
+ * function RegistrationPage() {
+ *   const form = useMemo(
+ *     () => createForm<FormSchema<{ email: string }>>({
+ *       email: { component: Input, componentProps: { label: 'Email' } },
+ *     }),
+ *     []
+ *   );
+ *   return (
+ *     <form>
+ *       <FormField control={form.email} testId="email" />
+ *       <Button type="submit">OK</Button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ *
+ * @example В качестве `fieldWrapper` для FormRenderer
+ * ```tsx
+ * import { FormRenderer, createRenderSchema } from '@reformer/renderer-react';
+ * import { FormField } from '@reformer/ui-kit';
+ *
+ * const schema = createRenderSchema<MyForm>((path) => ({
+ *   component: 'Box',
+ *   children: [{ component: path.email }, { component: path.phone }],
+ * }));
+ *
+ * <FormRenderer render={schema} settings={{ fieldWrapper: FormField }} />
+ * ```
+ */
+export declare const FormField: React.NamedExoticComponent<FormFieldProps>;

package/dist/components/ui/input-mask.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+/** Props компонента {@link InputMask}. */
+export interface InputMaskProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    /** Дополнительный CSS-класс. */
+    className?: string;
+    /** Текущее значение поля. `null`/`undefined` рендерится как пустое поле. */
+    value?: string | null;
+    /** Обработчик изменений. Пустая строка приводится к `null`. */
+    onChange?: (value: string | null) => void;
+    /** Срабатывает при потере фокуса. */
+    onBlur?: () => void;
+    /**
+     * Шаблон маски: символ `'9'` означает «цифра», все остальные символы (`+`,
+     * `-`, `(`, `)`, пробел, точка) — литералы и используются в `placeholder`.
+     * Пример: `'+7 (999) 999-99-99'`.
+     */
+    mask?: string;
+    /** Подсказка внутри поля. По умолчанию равна `mask` для подсветки формата. */
+    placeholder?: string;
+    /** Блокирует ввод и редактирование. */
+    disabled?: boolean;
+}
+/**
+ * Текстовое поле с поддержкой простой маски-подсказки (через шаблон вида
+ * `'9'` для цифр). Маска показывается в `placeholder`, но автоматическая
+ * вставка литералов **не** выполняется — компонент просто помечает формат.
+ *
+ * @example Маска для телефона
+ * ```tsx
+ * import { InputMask } from '@reformer/ui-kit';
+ *
+ * <InputMask
+ *   value={phone}
+ *   onChange={setPhone}
+ *   mask="+7 (999) 999-99-99"
+ * />
+ * ```
+ *
+ * @example Маска для даты `DD.MM.YYYY`
+ * ```tsx
+ * import { InputMask } from '@reformer/ui-kit';
+ *
+ * <InputMask
+ *   value={birthDate}
+ *   onChange={setBirthDate}
+ *   mask="99.99.9999"
+ *   placeholder="Дата рождения"
+ * />
+ * ```
+ */
+declare const InputMask: React.ForwardRefExoticComponent<InputMaskProps & React.RefAttributes<HTMLInputElement>>;
+export { InputMask };

package/dist/components/ui/input-password.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+/** Props компонента {@link InputPassword}. */
+export interface InputPasswordProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    /** Дополнительный CSS-класс. */
+    className?: string;
+    /** Текущее значение пароля. `null`/`undefined` рендерится как пустое поле. */
+    value?: string | null;
+    /** Обработчик изменений. Пустая строка приводится к `null`. */
+    onChange?: (value: string | null) => void;
+    /** Срабатывает при потере фокуса. */
+    onBlur?: () => void;
+    /** Подсказка внутри поля. По умолчанию `'Password'`. */
+    placeholder?: string;
+    /** Блокирует ввод. */
+    disabled?: boolean;
+    /**
+     * Показывать ли иконку переключения видимости (eye/eye-off). По умолчанию
+     * `true`. Иконка появляется только когда `value` непустой.
+     */
+    showToggle?: boolean;
+}
+/**
+ * Поле ввода пароля с переключателем видимости (иконка eye/eye-off).
+ * Кнопка переключения показывается, когда `showToggle = true` (по умолчанию)
+ * и `value` непустой.
+ *
+ * @example С переключателем видимости
+ * ```tsx
+ * import { InputPassword } from '@reformer/ui-kit';
+ *
+ * <InputPassword
+ *   value={password}
+ *   onChange={setPassword}
+ *   placeholder="Пароль"
+ * />
+ * ```
+ *
+ * @example Без переключателя (например, для подтверждения пароля)
+ * ```tsx
+ * import { InputPassword } from '@reformer/ui-kit';
+ *
+ * <InputPassword
+ *   value={confirmPassword}
+ *   onChange={setConfirmPassword}
+ *   placeholder="Повторите пароль"
+ *   showToggle={false}
+ * />
+ * ```
+ */
+declare const InputPassword: React.ForwardRefExoticComponent<InputPasswordProps & React.RefAttributes<HTMLInputElement>>;
+export { InputPassword };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+/** Props компонента {@link Input}. */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    /** Дополнительный CSS-класс (мерджится с дефолтными Tailwind-классами через `tailwind-merge`). */
+    className?: string;
+    /**
+     * Текущее значение поля. Для `type='number'` ожидается `number | null`,
+     * для остальных — `string | null`. `null`/`undefined` рендерится как пустое поле.
+     */
+    value?: string | number | null;
+    /**
+     * Обработчик изменений. Получает уже распарсенное значение:
+     * - для `type='number'` — `number` или `null` (для пустой строки),
+     * - иначе — `string` или `null`.
+     * `NaN` не прокидывается. При `min >= 0` отрицательные значения превращаются в `0`.
+     */
+    onChange?: (value: string | number | null) => void;
+    /** Срабатывает при потере фокуса. Используется `FormField` для пометки `touched`. */
+    onBlur?: () => void;
+    /** HTML-тип input. Для `'number'` включается специальный парсинг значения. */
+    type?: 'text' | 'email' | 'number' | 'tel' | 'url' | 'password';
+    /** Подсказка внутри поля. */
+    placeholder?: string;
+    /** Блокирует ввод и редактирование. */
+    disabled?: boolean;
+}
+/**
+ * Текстовое поле ввода. Контролируемый компонент с тривиальным API: `value`/`onChange`
+ * получает строку (или число для `type="number"`). Все нативные `<input>`-атрибуты
+ * (кроме `value`/`onChange`) прокидываются как есть.
+ *
+ * @example Базовое строковое поле
+ * ```tsx
+ * import { Input } from '@reformer/ui-kit';
+ *
+ * <Input value={email} onChange={setEmail} type="email" placeholder="you@example.com" />
+ * ```
+ *
+ * @example Числовое поле с лимитом снизу
+ * ```tsx
+ * import { Input } from '@reformer/ui-kit';
+ *
+ * // Пустой ввод даёт null. Отрицательные значения зажимаются к 0 из-за min={0}.
+ * <Input
+ *   type="number"
+ *   value={age}
+ *   onChange={(v) => setAge(v as number | null)}
+ *   min={0}
+ *   placeholder="Возраст"
+ * />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+/** Один вариант для {@link RadioGroup}. */
+export interface RadioOption {
+    /** Значение, попадающее в `onChange`. Должно быть строкой (DOM `value` всегда string). */
+    value: string;
+    /** Подпись варианта, отображаемая справа от radio. */
+    label: string;
+}
+/** Props компонента {@link RadioGroup}. */
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Дополнительный CSS-класс контейнера. По умолчанию вертикальная раскладка `flex flex-col gap-2`. */
+    className?: string;
+    /** Текущее значение. Должно совпадать с одним из `options[i].value`. `null` — ничего не выбрано. */
+    value?: string | null;
+    /** Обработчик выбора. Получает `event.target.value`. */
+    onChange?: (value: string) => void;
+    /** Срабатывает при потере фокуса любым из radio. */
+    onBlur?: () => void;
+    /** Список вариантов выбора. */
+    options: RadioOption[];
+    /** Блокирует все варианты. */
+    disabled?: boolean;
+    /** Test-id (используется как для контейнера, так и как префикс для каждого radio). */
+    'data-testid'?: string;
+}
+/**
+ * Группа радио-кнопок из массива `options`. По умолчанию раскладывается
+ * вертикально; для горизонтальной — `className="!flex-row gap-6"`.
+ *
+ * @example Вертикальная раскладка
+ * ```tsx
+ * import { RadioGroup } from '@reformer/ui-kit';
+ *
+ * const LOAN_TYPES = [
+ *   { value: 'consumer', label: 'Потребительский' },
+ *   { value: 'mortgage', label: 'Ипотека' },
+ *   { value: 'auto', label: 'Авто' },
+ * ];
+ *
+ * <RadioGroup value={loanType} onChange={setLoanType} options={LOAN_TYPES} />
+ * ```
+ *
+ * @example Горизонтальная раскладка размеров одежды
+ * ```tsx
+ * import { RadioGroup } from '@reformer/ui-kit';
+ *
+ * <RadioGroup
+ *   value={size}
+ *   onChange={setSize}
+ *   className="!flex-row gap-6"
+ *   options={[
+ *     { value: 's', label: 'S' },
+ *     { value: 'm', label: 'M' },
+ *     { value: 'l', label: 'L' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { RadioGroup };

package/dist/components/ui/section.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+/**
+ * Props компонента Section
+ */
+export interface SectionProps {
+    /** Заголовок секции */
+    title?: string;
+    /** HTML элемент для заголовка (h1-h6). По умолчанию h3 */
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** CSS класс для контейнера */
+    className?: string;
+    /** CSS класс для заголовка */
+    titleClassName?: string;
+    /** Дочерние элементы */
+    children?: ReactNode;
+}
+/**
+ * Section - секция формы с заголовком.
+ *
+ * Семантический `<section>`-контейнер для группировки связанных полей
+ * с опциональным заголовком (`titleAs` управляет уровнем `h1`-`h6`).
+ *
+ * @example Заголовок h2 + сетка из двух колонок
+ * ```typescript
+ * {
+ *   component: Section,
+ *   componentProps: {
+ *     title: 'Личные данные',
+ *     titleAs: 'h2',
+ *     titleClassName: 'text-xl font-bold',
+ *     className: 'grid grid-cols-2 gap-4',
+ *   },
+ *   children: [
+ *     { component: path.firstName },
+ *     { component: path.lastName },
+ *   ],
+ * }
+ * ```
+ *
+ * @example Section без заголовка (только обёртка)
+ * ```typescript
+ * {
+ *   component: Section,
+ *   componentProps: { className: 'space-y-4 mt-4' },
+ *   children: [
+ *     { component: path.address },
+ *     { component: path.city },
+ *   ],
+ * }
+ * ```
+ */
+export declare function Section({ title, titleAs: TitleTag, className, titleClassName, children, }: SectionProps): ReactNode;

package/dist/components/ui/select.d.ts

@@ -0,0 +1,316 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+/** Параметры запроса к {@link ResourceConfig.load}. */
+interface ResourceLoadParams {
+    /** Поисковый запрос (для async-фильтрации). */
+    search?: string;
+    /** Номер страницы (1-based) для пагинации. */
+    page?: number;
+    /** Размер страницы. */
+    pageSize?: number;
+    /** Дополнительные пользовательские параметры. */
+    [key: string]: unknown;
+}
+/** Один элемент, возвращаемый {@link ResourceConfig.load}. */
+interface ResourceItem<T> {
+    /** Уникальный ключ элемента (для React `key`). */
+    id: string | number;
+    /** Видимая подпись опции. */
+    label: string;
+    /** Значение, которое попадает в `onChange` (всегда приводится к строке). */
+    value: T;
+    /** Опциональное имя группы — варианты с одинаковым `group` объединяются в `SelectGroup`. */
+    group?: string;
+    /** Дополнительные поля бек-данных. */
+    [key: string]: unknown;
+}
+/** Ответ {@link ResourceConfig.load}. */
+interface ResourceResult<T> {
+    /** Список вариантов. */
+    items: ResourceItem<T>[];
+    /** Общее число доступных вариантов (для пагинации). */
+    totalCount: number;
+}
+/** Конфигурация асинхронного источника опций для {@link Select}. */
+export interface ResourceConfig<T> {
+    /**
+     * Стратегия загрузки:
+     * - `'static'` — варианты загружаются один раз и больше не меняются;
+     * - `'preload'` — загрузка на маунт компонента (используется по умолчанию в {@link Select});
+     * - `'partial'` — порционная загрузка (нужен будет внешний механизм пагинации).
+     */
+    type: 'static' | 'preload' | 'partial';
+    /** Функция загрузки опций. Должна вернуть `{ items, totalCount }`. */
+    load: (params?: ResourceLoadParams) => Promise<ResourceResult<T>>;
+}
+/** Props компонента {@link Select}. */
+export interface SelectProps<T> extends Omit<React.ComponentProps<typeof SelectPrimitive.Root>, 'value' | 'onValueChange'> {
+    /** Дополнительный CSS-класс для триггера. */
+    className?: string;
+    /** Выбранное значение. Всегда строка из `option.value`. `null` — ничего не выбрано. */
+    value?: string | null;
+    /** Обработчик выбора. При нажатии на крестик (`clearable`) приходит `null`. */
+    onChange?: (value: string | null) => void;
+    /** Срабатывает при закрытии дропдауна (через `onOpenChange(false)`). */
+    onBlur?: () => void;
+    /** Асинхронный источник опций. Если задан вместе с `options`, приоритет у `options`. */
+    resource?: ResourceConfig<T>;
+    /**
+     * Inline-варианты. `value` приводится к строке. Опции с одинаковым `group`
+     * объединяются в `SelectGroup` с `SelectLabel` (см. рецепт grouped options).
+     */
+    options?: Array<{
+        value: string | number;
+        label: string;
+        group?: string;
+    }>;
+    /** Подсказка в триггере. По умолчанию `'Select an option...'`. */
+    placeholder?: string;
+    /** Блокирует выбор. */
+    disabled?: boolean;
+    /** Показывать ли кнопку очистки (X) справа от значения. По умолчанию `false`. */
+    clearable?: boolean;
+}
+/**
+ * Выпадающий список на `@radix-ui/react-select`. Поддерживает два режима
+ * источника данных: inline `options` и async `resource`. При `clearable=true`
+ * показывает крестик для сброса значения в `null`.
+ *
+ * @example Inline-options
+ * ```tsx
+ * import { Select } from '@reformer/ui-kit';
+ *
+ * <Select
+ *   value={loanType}
+ *   onChange={setLoanType}
+ *   placeholder="Тип кредита"
+ *   options={[
+ *     { value: 'consumer', label: 'Потребительский' },
+ *     { value: 'mortgage', label: 'Ипотека' },
+ *     { value: 'auto', label: 'Авто' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Grouped options
+ * ```tsx
+ * import { Select } from '@reformer/ui-kit';
+ *
+ * <Select
+ *   value={city}
+ *   onChange={setCity}
+ *   options={[
+ *     { value: 'msk', label: 'Москва', group: 'Россия' },
+ *     { value: 'spb', label: 'Санкт-Петербург', group: 'Россия' },
+ *     { value: 'minsk', label: 'Минск', group: 'Беларусь' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const Select: React.ForwardRefExoticComponent<SelectProps<any> & {
+    'data-testid'?: string;
+    'aria-invalid'?: boolean | "true" | "false";
+} & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Группа `<SelectItem>` с заголовком {@link SelectLabel}. Тонкая обёртка над
+ * `Radix.Select.Group`. Используется при ручной сборке кастомного дропдауна
+ * вместо `options`-проп `Select`.
+ *
+ * @example Группа с заголовком
+ * ```tsx
+ * import { SelectGroup, SelectLabel, SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectGroup>
+ *   <SelectLabel>Фрукты</SelectLabel>
+ *   <SelectItem value="apple">Яблоко</SelectItem>
+ *   <SelectItem value="pear">Груша</SelectItem>
+ * </SelectGroup>
+ * ```
+ *
+ * @example Несколько групп подряд внутри SelectContent
+ * ```tsx
+ * import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '@reformer/ui-kit/select';
+ *
+ * <Select value={city} onChange={setCity}>
+ *   <SelectTrigger><SelectValue placeholder="Город" /></SelectTrigger>
+ *   <SelectContent>
+ *     <SelectGroup>
+ *       <SelectLabel>Россия</SelectLabel>
+ *       <SelectItem value="msk">Москва</SelectItem>
+ *     </SelectGroup>
+ *     <SelectGroup>
+ *       <SelectLabel>Беларусь</SelectLabel>
+ *       <SelectItem value="minsk">Минск</SelectItem>
+ *     </SelectGroup>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Отображает выбранное значение внутри {@link SelectTrigger}. Обёртка над
+ * `Radix.Select.Value`. Поддерживает `placeholder` для пустого состояния.
+ *
+ * @example Стандартный placeholder
+ * ```tsx
+ * import { SelectTrigger, SelectValue } from '@reformer/ui-kit/select';
+ *
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Выберите вариант" />
+ * </SelectTrigger>
+ * ```
+ *
+ * @example Кастомное представление выбранного значения через children
+ * ```tsx
+ * import { SelectTrigger, SelectValue } from '@reformer/ui-kit/select';
+ *
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Не выбрано">
+ *     {value && <span className="font-bold">{value}</span>}
+ *   </SelectValue>
+ * </SelectTrigger>
+ * ```
+ */
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Кнопка-открывалка списка для {@link Select}. Обёртка над
+ * `Radix.Select.Trigger` с дефолтными стилями (h-9, rounded, border) и
+ * `ChevronDown` справа.
+ *
+ * @example Дефолтный размер
+ * ```tsx
+ * import { SelectTrigger, SelectValue } from '@reformer/ui-kit/select';
+ *
+ * <SelectTrigger>
+ *   <SelectValue placeholder="Выберите страну" />
+ * </SelectTrigger>
+ * ```
+ *
+ * @example Компактный (size='sm')
+ * ```tsx
+ * import { SelectTrigger, SelectValue } from '@reformer/ui-kit/select';
+ *
+ * <SelectTrigger size="sm" className="w-32">
+ *   <SelectValue placeholder="Сорт." />
+ * </SelectTrigger>
+ * ```
+ */
+declare function SelectTrigger({ className, size, children, 'aria-label': ariaLabel, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Дропдаун-контент {@link Select} (попап со списком). Обёртка над
+ * `Radix.Select.Content` с порталом, скролл-кнопками сверху/снизу и
+ * `position='popper'` по умолчанию (растягивается под ширину триггера).
+ *
+ * @example Popper-режим (default — ширина равна триггеру)
+ * ```tsx
+ * import { SelectContent, SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectContent>
+ *   <SelectItem value="a">A</SelectItem>
+ *   <SelectItem value="b">B</SelectItem>
+ * </SelectContent>
+ * ```
+ *
+ * @example Item-aligned (контент центрируется по выбранному элементу)
+ * ```tsx
+ * import { SelectContent, SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectContent position="item-aligned">
+ *   {LONG_LIST.map((x) => <SelectItem key={x.id} value={x.id}>{x.label}</SelectItem>)}
+ * </SelectContent>
+ * ```
+ */
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Заголовок секции внутри {@link SelectGroup}. Обёртка над
+ * `Radix.Select.Label`. Не выбирается; используется для визуального разделения
+ * групп.
+ *
+ * @example Простая подпись группы
+ * ```tsx
+ * import { SelectGroup, SelectLabel, SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectGroup>
+ *   <SelectLabel>Овощи</SelectLabel>
+ *   <SelectItem value="potato">Картошка</SelectItem>
+ * </SelectGroup>
+ * ```
+ *
+ * @example Кастомный класс заголовка
+ * ```tsx
+ * import { SelectGroup, SelectLabel } from '@reformer/ui-kit/select';
+ *
+ * <SelectGroup>
+ *   <SelectLabel className="text-blue-600 font-bold">Премиум</SelectLabel>
+ * </SelectGroup>
+ * ```
+ */
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Один пункт списка {@link Select}. Обёртка над `Radix.Select.Item` с
+ * чекмарком-индикатором (`CheckIcon`) для выбранного варианта.
+ *
+ * @example Простой пункт
+ * ```tsx
+ * import { SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectItem value="apple">Яблоко</SelectItem>
+ * ```
+ *
+ * @example Заблокированный пункт
+ * ```tsx
+ * import { SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectItem value="premium" disabled>
+ *   Premium (требуется подписка)
+ * </SelectItem>
+ * ```
+ */
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Кнопка-стрелка для скролла вверх в дропдауне {@link SelectContent}.
+ * `SelectContent` добавляет её автоматически, экспорт нужен для случаев
+ * полностью кастомной сборки.
+ *
+ * @example Автоматическое добавление SelectContent
+ * ```tsx
+ * import { SelectContent, SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectContent>
+ *   <SelectItem value="a">A</SelectItem>
+ * </SelectContent>
+ * ```
+ *
+ * @example Ручное использование (кастомная сборка дропдауна)
+ * ```tsx
+ * import { SelectScrollUpButton } from '@reformer/ui-kit/select';
+ *
+ * <SelectScrollUpButton className="bg-gray-50 text-gray-600" />
+ * ```
+ */
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Кнопка-стрелка для скролла вниз в дропдауне {@link SelectContent}.
+ * `SelectContent` добавляет её автоматически, экспорт нужен для случаев
+ * полностью кастомной сборки.
+ *
+ * @example Автоматическое добавление SelectContent
+ * ```tsx
+ * import { SelectContent, SelectItem } from '@reformer/ui-kit/select';
+ *
+ * <SelectContent>
+ *   <SelectItem value="a">A</SelectItem>
+ * </SelectContent>
+ * ```
+ *
+ * @example Ручное использование (кастомная сборка дропдауна)
+ * ```tsx
+ * import { SelectScrollDownButton } from '@reformer/ui-kit/select';
+ *
+ * <SelectScrollDownButton className="bg-gray-50 text-gray-600" />
+ * ```
+ */
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, };