@reformer/ui-kit 7.0.0 → 9.0.0-beta.1

package/llms.txt

@@ -435,7 +435,6 @@ import { Textarea } from '@reformer/ui-kit';
 - [03-choice-fields.md](03-choice-fields.md) — Select, Checkbox, RadioGroup.
 - [05-form-field-integration.md](05-form-field-integration.md) — как все эти поля автоматически подключаются через `FormField`.
 - [06-troubleshooting.md](06-troubleshooting.md) — «number возвращает строку», «mask пропускает символы», «password toggle не появляется».
-- Эталон: `examples/registration-form/RegistrationForm.tsx`, `examples/complex-multy-step-form/schemas/schema.ts` (monorepo examples).
 
 ## 12. Checkbox
 
@@ -801,7 +800,6 @@ const form = createForm<{ city: string }>({ model, schema });
 - [02-text-fields.md](02-text-fields.md) — `Input`, `InputMask`, `InputPassword`, `Textarea`.
 - [05-form-field-integration.md](05-form-field-integration.md) — `FormField` распознаёт `Checkbox` и не дублирует label.
 - [06-troubleshooting.md](06-troubleshooting.md) — «Select не показывает options», «options vs resource», «onBlur не срабатывает на Select/RadioGroup».
-- Эталон: `examples/complex-multy-step-form/schemas/schema.ts` (monorepo example) — большой пример с `Select` и `Checkbox` в реальной форме.
 
 ## 16. Button
 
@@ -1205,8 +1203,6 @@ function CreditApplicationPage() {
 }
 ```
 
-Эталон: `examples/complex-multy-step-form-renderer/CreditApplicationFormRenderer.tsx` (monorepo example).
-
 `testId` рендерер берёт из `componentProps.testId` листа schema:
 
 ```tsx
@@ -1298,7 +1294,6 @@ const form = createForm<{ accept: boolean }>({ model, schema });
 - [04-layout-and-buttons.md](04-layout-and-buttons.md) — `Button` для submit/prev/next.
 - [06-troubleshooting.md](06-troubleshooting.md) — «label дублируется», «error не появляется», «FormField не подцепляет ошибки».
 - CDK-хуки: [@reformer/cdk/form-field](../../../reformer-cdk/docs/llms/) (`FormField.Root`, `useFormFieldContext`).
-- Эталон: `examples/complex-multy-step-form-renderer/CreditApplicationFormRenderer.tsx` (monorepo example) — `FormField` как `fieldWrapper` целой multi-step формы.
 
 ## 25. 1. `Input type="number"` возвращает строку, а не число (или `null`)
 
@@ -1680,14 +1675,7 @@ const handleSubmit = async () => {
 > **`config` не привязан к типу формы.** `FormWizardConfig` — это `{ validateStep?, validateAll? }`,
 > оба колбэка возвращают `boolean | Promise<boolean>`. Канон M1 — прогонять
 > `validateFormModel(model, schema)` (именно он исполняет `validators` листьев;
-> `form.validate()` по нодам схемные правила НЕ запустит). См. эталон
-> `examples/complex-multy-step-form/schemas/validation.ts`. Реальный эталон собирает конфиг фабрикой:
->
-> ```tsx
-> import { makeCreditValidationConfig } from './schemas/validation';
-> const config = useMemo(() => makeCreditValidationConfig(model), [model]);
-> // → { validateStep: (step) => Promise<boolean>, validateAll: () => Promise<boolean> }
-> ```
+> `form.validate()` по нодам схемные правила НЕ запустит).
 
 ### Альтернатива — imperative submit с values
 
@@ -1914,7 +1902,7 @@ const renderSchema = createRenderSchema<CreditApplication>(() => ({
 
 ui-kit FormArraySection маркирован `__selfManagedChildren = true` — родитель-renderer пробрасывает `form` без рекурсии.
 
-> Альтернатива — нативный array-узел движка `{ array: model.properties, initialValue, item: (im) => ({ children: [ { value: im.$.field, component } ] }) }` (см. эталон `examples/complex-multy-step-form-renderer/render-schema.ts`).
+> Альтернатива — нативный array-узел движка `{ array: model.properties, initialValue, item: (im) => ({ children: [ { value: im.$.field, component } ] }) }`.
 
 ## 45. JSON (renderer-json)
 
@@ -2118,7 +2106,7 @@ const onSubmit = async () => {
 
 Cross-field правила (например, «доп. телефон отличается от основного») — это
 именованные `ModelValidator<value, scope, root>` в том же массиве `validators`
-(читают корень формы через третий аргумент). Эталон: `examples/complex-multy-step-form/schemas/validation.ts`.
+(читают корень формы через третий аргумент).
 
 ## 51. Advanced — strict mask через FormField + children slot
 
@@ -2410,7 +2398,7 @@ Props компонента {@link Checkbox}.
 ```typescript
 export interface CheckboxProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  'value' | 'onChange' | 'type'
+  'value' | 'onChange' | 'type' | 'checked' | 'defaultChecked'
 > {
   /** Дополнительный CSS-класс для самого input. */
   className?: string;
@@ -2595,6 +2583,28 @@ return <ErrorState error={error} onRetry={() => window.location.reload()} />;
 
 _Source: src/components/state/error-state.tsx_
 
+### ErrorStateProps
+
+**Kind:** `interface`
+
+**Signature:**
+```typescript
+export interface ErrorStateProps {
+  /** Текст ошибки, показывается под заголовком. */
+  error: string;
+  /** Заголовок блока ошибки. По умолчанию `'Ошибка загрузки'`. */
+  title?: string;
+  /** Колбэк повторной попытки. Если задан — рендерится кнопка «Повторить». */
+  onRetry?: () => void;
+  /** Подпись кнопки повтора. По умолчанию `'Повторить'`. */
+  retryLabel?: string;
+  /** Внешний CSS-класс контейнера. По умолчанию `'w-full'`. */
+  className?: string;
+}
+```
+
+_Source: src/components/state/error-state.tsx_
+
 ### ExampleCard
 
 **Kind:** `function`
@@ -3199,7 +3209,7 @@ import { Input } from '@reformer/ui-kit';
 <Input
 type="number"
 value={age}
-onChange={(v) => setAge(v as number | null)}
+onChange={setAge}
 min={0}
 placeholder="Возраст"
 />
@@ -3217,7 +3227,7 @@ return (
 type="email"
 value={value}
 disabled={disabled}
-onChange={(v) => control.setValue((v ?? '') as string)}
+onChange={(v) => control.setValue(v ?? '')}
 onBlur={() => control.markAsTouched()}
 aria-invalid={shouldShowError}
 placeholder={shouldShowError ? errors[0]?.message : 'you@example.com'}
@@ -3278,7 +3288,7 @@ Props компонента {@link InputMask}.
 ```typescript
 export interface InputMaskProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  'value' | 'onChange'
+  'value' | 'onChange' | 'defaultValue'
 > {
   /** Дополнительный CSS-класс. */
   className?: string;
@@ -3353,7 +3363,7 @@ Props компонента {@link InputPassword}.
 ```typescript
 export interface InputPasswordProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  'value' | 'onChange' | 'type'
+  'value' | 'onChange' | 'type' | 'defaultValue'
 > {
   /** Дополнительный CSS-класс. */
   className?: string;
@@ -3379,39 +3389,14 @@ _Source: src/components/ui/input-password.tsx_
 
 ### InputProps
 
-**Kind:** `interface`
+**Kind:** `type`
 
-Props компонента {@link Input}.
+Props компонента {@link Input} — дискриминированный union по `type`:
+`type="number"` даёт `number | null` для `value`/`onChange`, любой другой `type` — `string | null`.
 
 **Signature:**
 ```typescript
-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;
-}
+export type InputProps = NumberInputProps | TextInputProps;
 ```
 
 _Source: src/components/ui/input.tsx_
@@ -3449,6 +3434,24 @@ return <LoadingState />;
 
 _Source: src/components/state/loading-state.tsx_
 
+### LoadingStateProps
+
+**Kind:** `interface`
+
+**Signature:**
+```typescript
+export interface LoadingStateProps {
+  /** Основной текст. По умолчанию `'Загрузка данных...'`. */
+  title?: string;
+  /** Вспомогательный текст под спиннером. По умолчанию `'Пожалуйста, подождите'`. */
+  subtitle?: string;
+  /** Внешний CSS-класс контейнера. По умолчанию центрирует спиннер с отступами. */
+  className?: string;
+}
+```
+
+_Source: src/components/state/loading-state.tsx_
+
 ### RadioGroup
 
 **Kind:** `const`
@@ -3515,6 +3518,12 @@ export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElemen
   options: RadioOption[];
   /** Блокирует все варианты. */
   disabled?: boolean;
+  /**
+   * Общий `name` для всех radio группы — обеспечивает нативный одиночный выбор и
+   * навигацию стрелками между вариантами. Если не задан, выводится из `id` /
+   * `data-testid`, а в крайнем случае генерируется автоматически.
+   */
+  name?: string;
   /** Test-id (используется как для контейнера, так и как префикс для каждого radio). */
   'data-testid'?: string;
 }
@@ -3899,7 +3908,7 @@ Props компонента {@link Select}.
 
 **Signature:**
 ```typescript
-export interface SelectProps<T> extends Omit<
+export interface SelectProps extends Omit<
   React.ComponentProps<typeof SelectPrimitive.Root>,
   'value' | 'onValueChange'
 > {
@@ -3912,7 +3921,7 @@ export interface SelectProps<T> extends Omit<
   /** Срабатывает при закрытии дропдауна (через `onOpenChange(false)`). */
   onBlur?: () => void;
   /** Асинхронный источник опций. Если задан вместе с `options`, приоритет у `options`. */
-  resource?: ResourceConfig<T>;
+  resource?: ResourceConfig<unknown>;
   /**
    * Inline-варианты. `value` приводится к строке. Опции с одинаковым `group`
    * объединяются в `SelectGroup` с `SelectLabel` (см. рецепт grouped options).
@@ -4016,6 +4025,7 @@ function SelectTrigger({
   size = 'default',
   children,
   'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
   size?: 'sm' | 'default';
@@ -4163,7 +4173,7 @@ Props компонента {@link Textarea}.
 ```typescript
 export interface TextareaProps extends Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  'value' | 'onChange'
+  'value' | 'onChange' | 'defaultValue'
 > {
   /** Дополнительный CSS-класс. */
   className?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reformer/ui-kit",
-  "version": "7.0.0",
+  "version": "9.0.0-beta.1",
   "description": "Styled form components with Tailwind CSS and Radix UI for @reformer ecosystem",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,8 +20,8 @@
       "import": "./dist/form-wizard.js"
     },
     "./form-field": {
-      "types": "./dist/form-field.d.ts",
-      "import": "./dist/form-field.js"
+      "types": "./dist/ui/form-field.d.ts",
+      "import": "./dist/ui/form-field.js"
     },
     "./input": {
       "types": "./dist/ui/input.d.ts",
@@ -121,23 +121,22 @@
     "llms.txt"
   ],
   "peerDependencies": {
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-slot": "^1.0.0",
     "@reformer/cdk": ">=1.0.0",
     "@reformer/core": ">=1.1.0",
     "@reformer/renderer-react": ">=1.0.0",
-    "lucide-react": ">=0.400.0 <1.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
-    "tailwind-merge": "^2.0.0 || ^3.0.0"
+    "lucide-react": "^0.553.0",
+    "tailwind-merge": "^2.0.0 || ^3.0.0",
+    "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
     "@reformer/cdk": "*",
     "@reformer/core": "*",
     "@reformer/renderer-react": "*",
@@ -148,7 +147,6 @@
     "@vitest/utils": "^4.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.553.0",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "tailwind-merge": "^3.4.0",

package/dist/loading-state-4VeOE6iN.js

@@ -1,38 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { Button as i } from "./ui/button.js";
-function o({
-  error: r,
-  title: d = "Ошибка загрузки",
-  onRetry: t,
-  retryLabel: l = "Повторить",
-  className: s
-}) {
-  return /* @__PURE__ */ e("div", { "data-testid": "error-state", className: s ?? "w-full", children: /* @__PURE__ */ a("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6 text-center space-y-4", children: [
-    /* @__PURE__ */ e("div", { className: "text-red-600 text-5xl", children: "!" }),
-    /* @__PURE__ */ e("div", { className: "text-xl font-semibold text-red-800", children: d }),
-    /* @__PURE__ */ e("div", { className: "text-red-700", children: r }),
-    t && /* @__PURE__ */ e(i, { onClick: t, children: l })
-  ] }) });
-}
-function m({
-  title: r = "Загрузка данных...",
-  subtitle: d = "Пожалуйста, подождите",
-  className: t
-}) {
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      "data-testid": "loading-state",
-      className: t ?? "w-full flex items-center justify-center p-12",
-      children: /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-        /* @__PURE__ */ e("div", { className: "inline-block h-12 w-12 animate-spin rounded-full border-4 border-solid border-blue-600 border-r-transparent" }),
-        /* @__PURE__ */ e("div", { className: "text-lg text-gray-600", children: r }),
-        /* @__PURE__ */ e("div", { className: "text-sm text-gray-500", children: d })
-      ] })
-    }
-  );
-}
-export {
-  o as E,
-  m as L
-};