@reformer/ui-kit 8.0.0 → 9.0.0-beta.2

package/README.md

@@ -1,94 +1,82 @@
 # @reformer/ui-kit
 
-Headless UI components for `@reformer/core` - build accessible, fully customizable form interfaces.
+Styled, ready-to-use form components for `@reformer/core`, built with Tailwind CSS and Radix UI.
+
+Where [`@reformer/cdk`](https://www.npmjs.com/package/@reformer/cdk) gives you headless primitives,
+`@reformer/ui-kit` gives you drop-in, accessible, pre-styled controls (inputs, selects, checkboxes,
+buttons, layout) that bind straight to a ReFormer `FieldNode`.
 
 ## Features
 
-- **Headless** - No default styles, complete design freedom
-- **Compound Components** - Declarative, composable API
-- **Render Props** - Full control over rendering
-- **TypeScript** - Fully typed with generics support
-- **Tree-shakable** - Import only what you need
+- **Styled out of the box** — Tailwind CSS design tokens, sensible defaults
+- **Accessible** — built on Radix UI primitives (Select, Slot, …)
+- **Form-aware** — controlled `value` / `onChange` that plug into `useFormControl`
+- **TypeScript** — fully typed, discriminated props (e.g. `Input` narrows by `type`)
+- **Tree-shakable** — import the whole kit or individual components via subpaths
 
 ## Installation
 
 ```bash
-npm install @reformer/cdk @reformer/core
+npm install @reformer/ui-kit @reformer/core
 ```
 
-## Components
+`@reformer/ui-kit` renders with Tailwind CSS — make sure Tailwind is configured in your app so the
+component classes are generated. `@reformer/cdk` and `@reformer/renderer-react` are optional peers
+(needed only if you use the re-exported `FormArray` / `FormWizard`).
 
-### FormArray
+## Components
 
-Manage dynamic form arrays with add/remove functionality.
+| Component                     | Purpose                                                   |
+| ----------------------------- | --------------------------------------------------------- |
+| `Input`                       | Text / email / number input (discriminated by `type`)     |
+| `InputMask`                   | Masked text input                                         |
+| `InputPassword`               | Password input with show/hide toggle                      |
+| `Textarea`                    | Multi-line text input                                     |
+| `Select`                      | Radix-based dropdown (`+ SelectItem`, `SelectTrigger`, …) |
+| `Checkbox`                    | Boolean checkbox                                          |
+| `RadioGroup`                  | Single-choice radio group                                 |
+| `Button`                      | Styled button                                             |
+| `Box` / `Section`             | Layout containers                                         |
+| `Collapsible`                 | Expand/collapse container                                 |
+| `AsyncBoundary`               | Loading / error boundary for async UI                     |
+| `FormField`                   | Label + control + error wrapper                           |
+| `ErrorState` / `LoadingState` | State display components (`@reformer/ui-kit/state`)       |
+
+## Imports
 
 ```tsx
-import { FormArray } from '@reformer/cdk/form-array';
-
-<FormArray.Root control={form.items}>
-  <FormArray.Empty>
-    <p>No items yet</p>
-  </FormArray.Empty>
-
-  <FormArray.List>
-    {({ control, index, remove }) => (
-      <div>
-        <span>Item #{index + 1}</span>
-        <ItemForm control={control} />
-        <button onClick={remove}>Remove</button>
-      </div>
-    )}
-  </FormArray.List>
-
-  <FormArray.AddButton>Add Item</FormArray.AddButton>
-</FormArray.Root>;
-```
+// The whole kit
+import { Input, Select, Checkbox, Button, FormField } from '@reformer/ui-kit';
 
-### FormWizard
-
-Build multi-step form wizards with validation.
-
-```tsx
-import { FormWizard } from '@reformer/cdk/form-wizard';
-
-<FormWizard form={form} config={config}>
-  <FormWizard.Indicator steps={STEPS}>
-    {({ steps, goToStep }) => (
-      <nav>
-        {steps.map((step) => (
-          <button
-            key={step.number}
-            onClick={() => goToStep(step.number)}
-            disabled={!step.canNavigate}
-          >
-            {step.title}
-          </button>
-        ))}
-      </nav>
-    )}
-  </FormWizard.Indicator>
-
-  <FormWizard.Step component={Step1} control={form} />
-  <FormWizard.Step component={Step2} control={form} />
-
-  <FormWizard.Actions onSubmit={handleSubmit}>
-    {({ prev, next, submit, isFirstStep, isLastStep }) => (
-      <div>
-        {!isFirstStep && <button {...prev}>Back</button>}
-        {!isLastStep ? <button {...next}>Next</button> : <button {...submit}>Submit</button>}
-      </div>
-    )}
-  </FormWizard.Actions>
-</FormWizard>;
+// Or individual components via subpaths (tree-shaking)
+import { Input } from '@reformer/ui-kit/input';
+import { Select } from '@reformer/ui-kit/select';
+import { Checkbox } from '@reformer/ui-kit/checkbox';
 ```
 
-## Hooks
+## Quick example
 
-For full customization, use the hooks directly:
+Bind a component to a ReFormer field via `useFormControl`:
 
 ```tsx
-import { useFormArray } from '@reformer/cdk/form-array';
-import { useFormWizard } from '@reformer/cdk/form-wizard';
+import { useFormControl, type FieldNode } from '@reformer/core';
+import { Input } from '@reformer/ui-kit';
+
+function EmailField({ control }: { control: FieldNode<string> }) {
+  const { value, disabled, errors, shouldShowError } = useFormControl(control);
+
+  return (
+    <Input
+      type="email"
+      value={value}
+      disabled={disabled}
+      onChange={(v) => control.setValue(v ?? '')}
+      onBlur={() => control.markAsTouched()}
+      aria-invalid={shouldShowError}
+      placeholder={shouldShowError ? errors[0]?.message : 'you@example.com'}
+    />
+  );
+}
 ```
 
 ## License

package/dist/components/state/error-state.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface ErrorStateProps {
+export interface ErrorStateProps {
     /** Текст ошибки, показывается под заголовком. */
     error: string;
     /** Заголовок блока ошибки. По умолчанию `'Ошибка загрузки'`. */
@@ -28,4 +28,3 @@ interface ErrorStateProps {
  * ```
  */
 export declare function ErrorState({ error, title, onRetry, retryLabel, className, }: ErrorStateProps): ReactNode;
-export {};

package/dist/components/state/index.d.ts

@@ -1,2 +1,4 @@
 export { ErrorState } from './error-state';
 export { LoadingState } from './loading-state';
+export type { ErrorStateProps } from './error-state';
+export type { LoadingStateProps } from './loading-state';

package/dist/components/state/loading-state.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface LoadingStateProps {
+export interface LoadingStateProps {
     /** Основной текст. По умолчанию `'Загрузка данных...'`. */
     title?: string;
     /** Вспомогательный текст под спиннером. По умолчанию `'Пожалуйста, подождите'`. */
@@ -23,4 +23,3 @@ interface LoadingStateProps {
  * ```
  */
 export declare function LoadingState({ title, subtitle, className, }: LoadingStateProps): ReactNode;
-export {};

package/dist/components/state/state-a11y.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 /** Props компонента {@link Checkbox}. */
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'checked' | 'defaultChecked'> {
     /** Дополнительный CSS-класс для самого input. */
     className?: string;
     /** Состояние чекбокса. `undefined` рендерится как `false`. */

package/dist/components/ui/checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 /** Props компонента {@link InputMask}. */
-export interface InputMaskProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+export interface InputMaskProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> {
     /** Дополнительный CSS-класс. */
     className?: string;
     /** Текущее значение поля. `null`/`undefined` рендерится как пустое поле. */

package/dist/components/ui/input-number-buffer.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Чистая логика буферизации ввода для числового `<input>` ({@link Input} c `type="number"`).
+ *
+ * Проблема, которую решает буфер: контролируемый числовой input, чьё
+ * отображение выводится напрямую из `number.toString()`, теряет промежуточные
+ * и неканонические состояния ввода. Пока пользователь набирает, `Number(...)`
+ * канонизирует строку, а `toString()` схлопывает хвостовые нули и точку:
+ *
+ * - `"1.50"` → `Number` `1.5` → `toString()` `"1.5"` (хвостовой ноль пропал);
+ * - `"1."`  → `Number` `1`   → `toString()` `"1"`   (точку не удержать);
+ * - `"0.05"`→ промежуточные `"0."`, `"0.0"` схлопываются в `"0"`;
+ * - `"-"`   → `Number` `NaN` → эмита нет, поле «прыгает» назад.
+ *
+ * Модуль хранит сырую строку и отдаёт её на отображение, пока она согласована
+ * с текущим `props.value`, а во `onChange` эмитит только распарсенное число.
+ * Логика вынесена отдельно от React-компонента, чтобы её можно было покрыть
+ * unit-тестами без DOM.
+ */
+/** Результат разбора сырой строки числового поля. */
+export type NumberParse = 
+/** Пустая строка — во `onChange` уходит `null`. */
+{
+    kind: 'empty';
+}
+/** Незавершённый ввод (`"-"`, `"."`, `"1e"`) — `NaN`, эмитить нельзя. */
+ | {
+    kind: 'partial';
+}
+/** Валидное число. */
+ | {
+    kind: 'number';
+    value: number;
+};
+/**
+ * Разбирает сырую строку из числового `<input>` так же, как её увидел бы
+ * `onChange`: пустая строка → `empty`, `NaN` (частичный ввод) → `partial`,
+ * иначе → `number`.
+ */
+export declare function parseNumberInput(raw: string): NumberParse;
+/** Результат {@link resolveEmittedNumber}: эмитить ли значение и какое. */
+export type NumberEmit = {
+    emit: true;
+    value: number | null;
+} | {
+    emit: false;
+};
+/**
+ * Вычисляет, что нужно передать во `onChange` для сырой строки, с учётом
+ * зажима отрицательных к `0` при `min >= 0`. Частичный ввод не эмитится
+ * (`emit: false`), так что поле не откатывается на каждой промежуточной клавише.
+ *
+ * @param raw Текущее строковое значение `<input>`.
+ * @param min Значение атрибута `min` (число) или `undefined`, если не задан.
+ */
+export declare function resolveEmittedNumber(raw: string, min: number | undefined): NumberEmit;
+/**
+ * Вычисляет строку для отображения в контролируемом числовом `<input>`.
+ *
+ * Если локальный сырой буфер согласован с текущим `value` — возвращает буфер,
+ * сохраняя неканоническое форматирование (`"1.50"`, `"1."`, ведущие нули) и
+ * промежуточный частичный ввод (`"-"`, `"."`, `"1e"`). Иначе возвращает
+ * каноническое `value.toString()`, чтобы внешнее изменение `value` (reset,
+ * пересчёт другого поля) всегда выигрывало у устаревшего буфера.
+ *
+ * @param rawBuffer Последняя сырая строка из `onChange`, или `null`, если поле
+ *   ещё не редактировалось локально.
+ * @param value Текущее контролируемое значение (уже зажатое к `0`, если был `min`).
+ */
+export declare function deriveNumberDisplay(rawBuffer: string | null, value: number | null | undefined): string;

package/dist/components/ui/input-number-buffer.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 /** Props компонента {@link InputPassword}. */
-export interface InputPasswordProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+export interface InputPasswordProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type' | 'defaultValue'> {
     /** Дополнительный CSS-класс. */
     className?: string;
     /** Текущее значение пароля. `null`/`undefined` рендерится как пустое поле. */

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

@@ -1,29 +1,41 @@
 import * as React from 'react';
-/** Props компонента {@link Input}. */
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+/** Общие props компонента {@link Input}, не зависящие от `type`. */
+interface InputBaseProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue' | 'type'> {
     /** Дополнительный 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;
 }
+/** Props числового поля (`type="number"`): `value`/`onChange` работают с `number`. */
+export interface NumberInputProps extends InputBaseProps {
+    /** HTML-тип input. Включает специальный парсинг значения. */
+    type: 'number';
+    /** Текущее значение. `null`/`undefined` рендерится как пустое поле. */
+    value?: number | null;
+    /**
+     * Обработчик изменений. Получает уже распарсенное `number` или `null` (для пустой строки).
+     * `NaN` не прокидывается. При `min >= 0` отрицательные значения превращаются в `0`.
+     */
+    onChange?: (value: number | null) => void;
+}
+/** Props строкового поля (любой `type`, кроме `number`): `value`/`onChange` — строковые. */
+export interface TextInputProps extends InputBaseProps {
+    /** HTML-тип input. По умолчанию `'text'`. */
+    type?: 'text' | 'email' | 'tel' | 'url' | 'password';
+    /** Текущее значение. `null`/`undefined` рендерится как пустое поле. */
+    value?: string | null;
+    /** Обработчик изменений. Получает строку или `null` (для пустой строки). */
+    onChange?: (value: string | null) => void;
+}
+/**
+ * Props компонента {@link Input} — дискриминированный union по `type`:
+ * `type="number"` даёт `number | null` для `value`/`onChange`, любой другой `type` — `string | null`.
+ */
+export type InputProps = NumberInputProps | TextInputProps;
 /**
  * Текстовое поле ввода. Контролируемый компонент с тривиальным API: `value`/`onChange`
  * получает строку (или число для `type="number"`). Все нативные `<input>`-атрибуты
@@ -44,7 +56,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
  * <Input
  *   type="number"
  *   value={age}
- *   onChange={(v) => setAge(v as number | null)}
+ *   onChange={setAge}
  *   min={0}
  *   placeholder="Возраст"
  * />
@@ -62,7 +74,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
  *       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'}

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

@@ -20,6 +20,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;
 }

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

@@ -0,0 +1 @@
+export {};

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 export type { ResourceConfig, ResourceLoadParams, ResourceItem, ResourceResult, ResourceStrategy, NormalizedOption, } from './select-resource';
 /** Props компонента {@link Select}. */
-export interface SelectProps<T> extends Omit<React.ComponentProps<typeof SelectPrimitive.Root>, 'value' | 'onValueChange'> {
+export interface SelectProps extends Omit<React.ComponentProps<typeof SelectPrimitive.Root>, 'value' | 'onValueChange'> {
     /** Дополнительный CSS-класс для триггера. */
     className?: string;
     /** Выбранное значение. Всегда строка из `option.value`. `null` — ничего не выбрано. */
@@ -13,7 +13,7 @@ export interface SelectProps<T> extends Omit<React.ComponentProps<typeof SelectP
     /** Срабатывает при закрытии дропдауна (через `onOpenChange(false)`). */
     onBlur?: () => void;
     /** Асинхронный источник опций. Если задан вместе с `options`, приоритет у `options`. */
-    resource?: ResourceConfig<T>;
+    resource?: ResourceConfig<unknown>;
     /**
      * Inline-варианты. `value` приводится к строке. Опции с одинаковым `group`
      * объединяются в `SelectGroup` с `SelectLabel` (см. рецепт grouped options).
@@ -97,9 +97,14 @@ export interface SelectProps<T> extends Omit<React.ComponentProps<typeof SelectP
  * <Select value={country} onChange={setCountry} resource={countries} />
  * ```
  */
-declare const Select: React.ForwardRefExoticComponent<SelectProps<any> & {
+declare const Select: React.ForwardRefExoticComponent<SelectProps & {
+    id?: string;
     'data-testid'?: string;
     'aria-invalid'?: boolean | "true" | "false";
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-required'?: boolean | "true" | "false";
 } & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Группа `<SelectItem>` с заголовком {@link SelectLabel}. Тонкая обёртка над
@@ -185,7 +190,7 @@ declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPri
  * </SelectTrigger>
  * ```
  */
-declare function SelectTrigger({ className, size, children, 'aria-label': ariaLabel, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+declare function SelectTrigger({ className, size, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
     size?: 'sm' | 'default';
 }): import("react/jsx-runtime").JSX.Element;
 /**

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 /** Props компонента {@link Textarea}. */
-export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange'> {
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'defaultValue'> {
     /** Дополнительный CSS-класс. */
     className?: string;
     /** Текущее значение. `null`/`undefined` рендерится как пустое поле. */

package/dist/index.d.ts

@@ -27,6 +27,8 @@ export { Textarea } from './components/ui/textarea';
 export type { TextareaProps } from './components/ui/textarea';
 export { ErrorState } from './components/state/error-state';
 export { LoadingState } from './components/state/loading-state';
+export type { ErrorStateProps } from './components/state/error-state';
+export type { LoadingStateProps } from './components/state/loading-state';
 export { FormArraySection } from './components/form-array/form-array-section';
 export type { FormArraySectionProps } from './components/form-array/form-array-section';
 export { FormWizard } from './components/form-wizard/form-wizard';

package/dist/index.js

@@ -14,7 +14,7 @@ import { RadioGroup as J } from "./ui/radio-group.js";
 import { Section as O } from "./ui/section.js";
 import { Select as X, SelectContent as Y, SelectGroup as _, SelectItem as $, SelectLabel as ee, SelectScrollDownButton as oe, SelectScrollUpButton as te, SelectTrigger as re, SelectValue as ne } from "./ui/select.js";
 import { Textarea as ie } from "./ui/textarea.js";
-import { E as ae, L as ce } from "./loading-state-4VeOE6iN.js";
+import { E as ae, L as ce } from "./loading-state-BOBeK9tp.js";
 import { F as pe } from "./form-array-section-D1c2AQzE.js";
 import { F as me, a as xe, b as ge, S as ue } from "./form-wizard-C-yRYqTI.js";
 const f = () => /* @__PURE__ */ o(

package/dist/loading-state-BOBeK9tp.js

@@ -0,0 +1,49 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { Button as s } from "./ui/button.js";
+function o({
+  error: r,
+  title: a = "Ошибка загрузки",
+  onRetry: t,
+  retryLabel: d = "Повторить",
+  className: i
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-testid": "error-state",
+      role: "alert",
+      "aria-live": "assertive",
+      className: i ?? "w-full",
+      children: /* @__PURE__ */ l("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: a }),
+        /* @__PURE__ */ e("div", { className: "text-red-700", children: r }),
+        t && /* @__PURE__ */ e(s, { onClick: t, children: d })
+      ] })
+    }
+  );
+}
+function m({
+  title: r = "Загрузка данных...",
+  subtitle: a = "Пожалуйста, подождите",
+  className: t
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-testid": "loading-state",
+      role: "status",
+      "aria-live": "polite",
+      className: t ?? "w-full flex items-center justify-center p-12",
+      children: /* @__PURE__ */ l("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: a })
+      ] })
+    }
+  );
+}
+export {
+  o as E,
+  m as L
+};

package/dist/package-exports.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/state.js

@@ -1,4 +1,4 @@
-import { E as t, L as o } from "./loading-state-4VeOE6iN.js";
+import { E as t, L as o } from "./loading-state-BOBeK9tp.js";
 export {
   t as ErrorState,
   o as LoadingState

package/dist/ui/checkbox.js

@@ -1,35 +1,56 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import * as h from "react";
-import { c as f } from "../utils-DtaLkIY8.js";
-const x = h.forwardRef(
-  ({ className: r, value: o, onChange: t, onBlur: d, label: e, disabled: s, "data-testid": c, ...i }, n) => {
-    const l = (m) => {
-      t?.(m.target.checked);
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import * as d from "react";
+import { c as g } from "../utils-DtaLkIY8.js";
+const v = d.forwardRef(
+  ({
+    className: t,
+    value: i,
+    onChange: o,
+    onBlur: s,
+    label: e,
+    disabled: c,
+    "data-testid": n,
+    id: l,
+    "aria-labelledby": m,
+    ...p
+  }, b) => {
+    const h = d.useId(), a = l ?? h, u = e ? void 0 : m, f = (x) => {
+      o?.(x.target.checked);
     };
-    return /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ a(
+    return /* @__PURE__ */ y("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ r(
         "input",
         {
-          ref: n,
+          ref: b,
           type: "checkbox",
-          checked: o || !1,
-          disabled: s,
-          className: f(
+          id: a,
+          checked: i || !1,
+          disabled: c,
+          className: g(
             "h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary",
             "disabled:cursor-not-allowed disabled:opacity-50",
-            r
+            "aria-invalid:border-destructive aria-invalid:ring-destructive",
+            t
           ),
-          onChange: l,
-          onBlur: d,
-          "data-testid": c,
-          ...i
+          onChange: f,
+          onBlur: s,
+          "data-testid": n,
+          "aria-labelledby": u,
+          ...p
         }
       ),
-      e && /* @__PURE__ */ a("label", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: e })
+      e && /* @__PURE__ */ r(
+        "label",
+        {
+          htmlFor: a,
+          className: "text-sm font-medium leading-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          children: e
+        }
+      )
     ] });
   }
 );
-x.displayName = "Checkbox";
+v.displayName = "Checkbox";
 export {
-  x as Checkbox
+  v as Checkbox
 };