@vantageos/mosaic 0.2.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +145 -0
- package/README.md +193 -0
- package/dist/Alert.schema-LPJE5gFP.d.cts +71 -0
- package/dist/Alert.schema-LPJE5gFP.d.ts +71 -0
- package/dist/ConfirmDialog-B3CQQGmJ.d.cts +34 -0
- package/dist/ConfirmDialog-B3CQQGmJ.d.ts +34 -0
- package/dist/MarkdownRenderer.schema-Rx7kIeVA.d.cts +22 -0
- package/dist/MarkdownRenderer.schema-Rx7kIeVA.d.ts +22 -0
- package/dist/ProgressBar.schema-CdVYx0Wq.d.cts +22 -0
- package/dist/ProgressBar.schema-CdVYx0Wq.d.ts +22 -0
- package/dist/StatusBadge.schema-1tOjB4Ir.d.cts +22 -0
- package/dist/StatusBadge.schema-1tOjB4Ir.d.ts +22 -0
- package/dist/Tabs.schema-BzcEyeq8.d.cts +79 -0
- package/dist/Tabs.schema-BzcEyeq8.d.ts +79 -0
- package/dist/artifacts.cjs +144 -2
- package/dist/artifacts.cjs.map +1 -1
- package/dist/artifacts.d.cts +3 -21
- package/dist/artifacts.d.ts +3 -21
- package/dist/artifacts.js +144 -2
- package/dist/artifacts.js.map +1 -1
- package/dist/confirmation.cjs +168 -2
- package/dist/confirmation.cjs.map +1 -1
- package/dist/confirmation.d.cts +24 -20
- package/dist/confirmation.d.ts +24 -20
- package/dist/confirmation.js +165 -3
- package/dist/confirmation.js.map +1 -1
- package/dist/display.cjs +272 -2
- package/dist/display.cjs.map +1 -1
- package/dist/display.d.cts +132 -1
- package/dist/display.d.ts +132 -1
- package/dist/display.js +267 -3
- package/dist/display.js.map +1 -1
- package/dist/forms.cjs +1415 -0
- package/dist/forms.cjs.map +1 -0
- package/dist/forms.d.cts +159 -0
- package/dist/forms.d.ts +159 -0
- package/dist/forms.js +1334 -0
- package/dist/forms.js.map +1 -0
- package/dist/index-CwXVgtGb.d.cts +917 -0
- package/dist/index-CwXVgtGb.d.ts +917 -0
- package/dist/index.cjs +315 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -6
- package/dist/index.d.ts +11 -6
- package/dist/index.js +304 -3
- package/dist/index.js.map +1 -1
- package/dist/input.cjs +19 -0
- package/dist/input.cjs.map +1 -1
- package/dist/input.d.cts +4 -34
- package/dist/input.d.ts +4 -34
- package/dist/input.js +18 -1
- package/dist/input.js.map +1 -1
- package/dist/media.cjs +144 -2
- package/dist/media.cjs.map +1 -1
- package/dist/media.d.cts +3 -21
- package/dist/media.d.ts +3 -21
- package/dist/media.js +144 -2
- package/dist/media.js.map +1 -1
- package/dist/preact/artifacts.d.ts +39 -1
- package/dist/preact/artifacts.js +234 -0
- package/dist/preact/artifacts.js.map +1 -1
- package/dist/preact/confirmation.d.ts +115 -1
- package/dist/preact/confirmation.js +503 -0
- package/dist/preact/confirmation.js.map +1 -1
- package/dist/preact/display.d.ts +366 -1
- package/dist/preact/display.js +774 -0
- package/dist/preact/display.js.map +1 -1
- package/dist/preact/forms.d.ts +875 -0
- package/dist/preact/forms.js +1326 -0
- package/dist/preact/forms.js.map +1 -0
- package/dist/preact/input.d.ts +88 -1
- package/dist/preact/input.js +194 -0
- package/dist/preact/input.js.map +1 -1
- package/dist/preact/progress.d.ts +35 -1
- package/dist/preact/progress.js +263 -0
- package/dist/preact/progress.js.map +1 -1
- package/dist/progress.cjs +144 -2
- package/dist/progress.cjs.map +1 -1
- package/dist/progress.d.cts +3 -21
- package/dist/progress.d.ts +3 -21
- package/dist/progress.js +144 -2
- package/dist/progress.js.map +1 -1
- package/dist/react/artifacts.cjs +241 -0
- package/dist/react/artifacts.cjs.map +1 -1
- package/dist/react/artifacts.d.cts +20 -1
- package/dist/react/artifacts.d.ts +20 -1
- package/dist/react/artifacts.js +234 -0
- package/dist/react/artifacts.js.map +1 -1
- package/dist/react/confirmation.cjs +513 -0
- package/dist/react/confirmation.cjs.map +1 -1
- package/dist/react/confirmation.d.cts +21 -1
- package/dist/react/confirmation.d.ts +21 -1
- package/dist/react/confirmation.js +503 -0
- package/dist/react/confirmation.js.map +1 -1
- package/dist/react/display.cjs +788 -0
- package/dist/react/display.cjs.map +1 -1
- package/dist/react/display.d.cts +129 -1
- package/dist/react/display.d.ts +129 -1
- package/dist/react/display.js +771 -0
- package/dist/react/display.js.map +1 -1
- package/dist/react/forms.cjs +1387 -0
- package/dist/react/forms.cjs.map +1 -0
- package/dist/react/forms.d.cts +5 -0
- package/dist/react/forms.d.ts +5 -0
- package/dist/react/forms.js +1326 -0
- package/dist/react/forms.js.map +1 -0
- package/dist/react/input.cjs +197 -0
- package/dist/react/input.cjs.map +1 -1
- package/dist/react/input.d.cts +13 -1
- package/dist/react/input.d.ts +13 -1
- package/dist/react/input.js +194 -0
- package/dist/react/input.js.map +1 -1
- package/dist/react/progress.cjs +266 -0
- package/dist/react/progress.cjs.map +1 -1
- package/dist/react/progress.d.cts +17 -1
- package/dist/react/progress.d.ts +17 -1
- package/dist/react/progress.js +263 -0
- package/dist/react/progress.js.map +1 -1
- package/package.json +87 -61
- package/registry.yaml +167 -1
|
@@ -0,0 +1,917 @@
|
|
|
1
|
+
import * as react_hook_form from 'react-hook-form';
|
|
2
|
+
import { FieldValues, UseFormReturn, Path, ControllerRenderProps, ControllerFieldState, UseFormStateReturn, ArrayPath, FieldArrayWithId, FieldArray as FieldArray$1, useFieldArray as useFieldArray$1 } from 'react-hook-form';
|
|
3
|
+
import { z, ZodSchema, ZodType } from 'zod';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import { ReactNode, ReactElement } from 'react';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Validation timing modes. Mosaic default is "onBlur" — Chi co-validated decision
|
|
9
|
+
* (Day 102 DM). RHF's full Mode union supports more values; we narrow to the three
|
|
10
|
+
* timings that are safe and predictable for cross-runtime consumers.
|
|
11
|
+
*/
|
|
12
|
+
declare const MosaicFormModeSchema: z.ZodEnum<["onBlur", "onChange", "onSubmit"]>;
|
|
13
|
+
type MosaicFormMode = z.infer<typeof MosaicFormModeSchema>;
|
|
14
|
+
/**
|
|
15
|
+
* Options accepted by `useMosaicForm`. The Zod schema for the form payload is
|
|
16
|
+
* passed separately (not parsed inside this schema) because it carries runtime
|
|
17
|
+
* type information that the consumer's TSchema generic propagates through.
|
|
18
|
+
*/
|
|
19
|
+
declare const UseMosaicFormOptionsSchema: z.ZodObject<{
|
|
20
|
+
mode: z.ZodDefault<z.ZodEnum<["onBlur", "onChange", "onSubmit"]>>;
|
|
21
|
+
}, "strip", z.ZodTypeAny, {
|
|
22
|
+
mode: "onBlur" | "onChange" | "onSubmit";
|
|
23
|
+
}, {
|
|
24
|
+
mode?: "onBlur" | "onChange" | "onSubmit" | undefined;
|
|
25
|
+
}>;
|
|
26
|
+
type UseMosaicFormOptions$1 = z.infer<typeof UseMosaicFormOptionsSchema>;
|
|
27
|
+
declare function validateOptions(raw: unknown): UseMosaicFormOptions$1;
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Public options to {@link useMosaicForm}. The Zod `schema` is the runtime
|
|
31
|
+
* validator (and the source of truth for the form payload type). `mode`
|
|
32
|
+
* defaults to `"onBlur"` per Chi co-validated decision (Day 102).
|
|
33
|
+
*/
|
|
34
|
+
interface UseMosaicFormOptions<TSchema extends ZodType> {
|
|
35
|
+
schema: TSchema;
|
|
36
|
+
defaultValues: Partial<ReturnType<TSchema["parse"]>> | ReturnType<TSchema["parse"]>;
|
|
37
|
+
mode?: MosaicFormMode;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Return type — the standard RHF `UseFormReturn` extended with two Mosaic
|
|
41
|
+
* metadata fields so consumers (FormField, SubmitButton, FormProvider) can
|
|
42
|
+
* inspect the active schema + timing without re-deriving them.
|
|
43
|
+
*/
|
|
44
|
+
type UseMosaicFormReturn<TFieldValues extends FieldValues = FieldValues> = UseFormReturn<TFieldValues> & {
|
|
45
|
+
mosaicSchema: ZodSchema;
|
|
46
|
+
mosaicMode: MosaicFormMode;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* Cross-runtime wrapper around `react-hook-form` + `@hookform/resolvers/zod`.
|
|
50
|
+
*
|
|
51
|
+
* - Validates options through Zod (`UseMosaicFormOptionsSchema`) so an invalid
|
|
52
|
+
* `mode` fails loudly at hook-call time rather than silently degrading.
|
|
53
|
+
* - Attaches the schema + mode to the return object as `mosaicSchema` and
|
|
54
|
+
* `mosaicMode` for downstream Mosaic consumers (FieldArray will read these).
|
|
55
|
+
*
|
|
56
|
+
* Compatible with FieldArray (T16) — the return shape extends RHF's, so
|
|
57
|
+
* `useFieldArray({ control: form.control, name: ... })` works verbatim.
|
|
58
|
+
*/
|
|
59
|
+
declare function useMosaicForm<TSchema extends ZodType>(options: UseMosaicFormOptions<TSchema>): UseMosaicFormReturn<ReturnType<TSchema["parse"]> & FieldValues>;
|
|
60
|
+
|
|
61
|
+
interface FormProviderProps<TValues extends FieldValues = FieldValues> {
|
|
62
|
+
form: UseMosaicFormReturn<TValues>;
|
|
63
|
+
children: ReactNode;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Wraps `react-hook-form`'s native `<FormProvider>` AND a Mosaic-specific
|
|
67
|
+
* context that carries the extended metadata (`mosaicSchema`, `mosaicMode`).
|
|
68
|
+
* Consumer components read either context — Mosaic's own for metadata,
|
|
69
|
+
* RHF's for register/control/handleSubmit access.
|
|
70
|
+
*/
|
|
71
|
+
declare function FormProvider<TValues extends FieldValues = FieldValues>({ form, children, }: FormProviderProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
72
|
+
/**
|
|
73
|
+
* Read the Mosaic-extended form context. Throws if called outside a
|
|
74
|
+
* `<FormProvider>` so consumer bugs surface immediately.
|
|
75
|
+
*
|
|
76
|
+
* Generic `TValues` lets callers narrow back to their original form shape.
|
|
77
|
+
*/
|
|
78
|
+
declare function useMosaicFormContext<TValues extends FieldValues = FieldValues>(): UseMosaicFormReturn<TValues>;
|
|
79
|
+
|
|
80
|
+
interface FormFieldRenderArgs<TValues extends FieldValues = FieldValues> {
|
|
81
|
+
field: ControllerRenderProps<TValues>;
|
|
82
|
+
fieldState: ControllerFieldState;
|
|
83
|
+
formState: UseFormStateReturn<TValues>;
|
|
84
|
+
}
|
|
85
|
+
interface FormFieldProps<TValues extends FieldValues = FieldValues> {
|
|
86
|
+
name: Path<TValues>;
|
|
87
|
+
children: (args: FormFieldRenderArgs<TValues>) => ReactElement;
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* Render-prop wrapper around RHF's `Controller`. Pulls `control` from the
|
|
91
|
+
* surrounding `<FormProvider>` so consumers never thread it manually.
|
|
92
|
+
*/
|
|
93
|
+
declare function FormField<TValues extends FieldValues = FieldValues>({ name, children, }: FormFieldProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* ErrorDisplay accepts an RHF-shaped field error plus an optional consumer
|
|
97
|
+
* message map for i18n. The structure mirrors RHF `FieldError`:
|
|
98
|
+
* `{ type: string, message?: string }`.
|
|
99
|
+
*/
|
|
100
|
+
declare const FieldErrorShapeSchema: z.ZodObject<{
|
|
101
|
+
type: z.ZodString;
|
|
102
|
+
message: z.ZodOptional<z.ZodString>;
|
|
103
|
+
}, "strip", z.ZodTypeAny, {
|
|
104
|
+
type: string;
|
|
105
|
+
message?: string | undefined;
|
|
106
|
+
}, {
|
|
107
|
+
type: string;
|
|
108
|
+
message?: string | undefined;
|
|
109
|
+
}>;
|
|
110
|
+
declare const ErrorDisplayPropsSchema: z.ZodObject<{
|
|
111
|
+
error: z.ZodOptional<z.ZodObject<{
|
|
112
|
+
type: z.ZodString;
|
|
113
|
+
message: z.ZodOptional<z.ZodString>;
|
|
114
|
+
}, "strip", z.ZodTypeAny, {
|
|
115
|
+
type: string;
|
|
116
|
+
message?: string | undefined;
|
|
117
|
+
}, {
|
|
118
|
+
type: string;
|
|
119
|
+
message?: string | undefined;
|
|
120
|
+
}>>;
|
|
121
|
+
messageMap: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
|
|
122
|
+
}, "strip", z.ZodTypeAny, {
|
|
123
|
+
error?: {
|
|
124
|
+
type: string;
|
|
125
|
+
message?: string | undefined;
|
|
126
|
+
} | undefined;
|
|
127
|
+
messageMap?: Record<string, string> | undefined;
|
|
128
|
+
}, {
|
|
129
|
+
error?: {
|
|
130
|
+
type: string;
|
|
131
|
+
message?: string | undefined;
|
|
132
|
+
} | undefined;
|
|
133
|
+
messageMap?: Record<string, string> | undefined;
|
|
134
|
+
}>;
|
|
135
|
+
type FieldErrorShape = z.infer<typeof FieldErrorShapeSchema>;
|
|
136
|
+
|
|
137
|
+
interface ErrorDisplayProps {
|
|
138
|
+
error?: FieldErrorShape;
|
|
139
|
+
messageMap?: Record<string, string>;
|
|
140
|
+
className?: string;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Single-field error formatter. Renders nothing when `error` is undefined
|
|
144
|
+
* (no error to show), otherwise emits a `role="alert"` element with the
|
|
145
|
+
* resolved message. Message resolution is delegated to the pure
|
|
146
|
+
* `formatErrorMessage` helper so React and Preact runtimes share behavior.
|
|
147
|
+
*/
|
|
148
|
+
declare function ErrorDisplay({ error, messageMap, className }: ErrorDisplayProps): react_jsx_runtime.JSX.Element | null;
|
|
149
|
+
|
|
150
|
+
interface SubmitButtonProps {
|
|
151
|
+
label?: string;
|
|
152
|
+
loadingLabel?: string;
|
|
153
|
+
className?: string;
|
|
154
|
+
}
|
|
155
|
+
/**
|
|
156
|
+
* Form submit button bound to the surrounding `<FormProvider>` form state.
|
|
157
|
+
* Disabled while `formState.isValid` is false OR `formState.isSubmitting`
|
|
158
|
+
* is true. While submitting, the loading label replaces the default label.
|
|
159
|
+
*/
|
|
160
|
+
declare function SubmitButton(props: SubmitButtonProps): react_jsx_runtime.JSX.Element;
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Input primitive props — bound to the surrounding `FormProvider` by `name`.
|
|
164
|
+
*
|
|
165
|
+
* - `name` selects a property on the form values (RHF path).
|
|
166
|
+
* - `type` covers the 5 baseline text-like HTML input types (T11 scope).
|
|
167
|
+
* - `placeholder` / `disabled` / `autoComplete` are passthrough DOM props.
|
|
168
|
+
* - `label` is consumer-driven i18n: the caller supplies the localized string,
|
|
169
|
+
* the component never renders raw alphabetic text as JSXText children.
|
|
170
|
+
*
|
|
171
|
+
* Field primitives outside this 5-type baseline (checkbox/radio/file/etc.)
|
|
172
|
+
* land in dedicated T12-T20 components per `docs/v0.3.0-plan.md` §7.
|
|
173
|
+
*/
|
|
174
|
+
declare const InputTypeSchema: z.ZodEnum<["text", "email", "password", "number", "url"]>;
|
|
175
|
+
declare const InputPropsSchema: z.ZodObject<{
|
|
176
|
+
name: z.ZodString;
|
|
177
|
+
type: z.ZodOptional<z.ZodDefault<z.ZodEnum<["text", "email", "password", "number", "url"]>>>;
|
|
178
|
+
placeholder: z.ZodOptional<z.ZodString>;
|
|
179
|
+
disabled: z.ZodOptional<z.ZodBoolean>;
|
|
180
|
+
autoComplete: z.ZodOptional<z.ZodString>;
|
|
181
|
+
label: z.ZodString;
|
|
182
|
+
}, "strip", z.ZodTypeAny, {
|
|
183
|
+
name: string;
|
|
184
|
+
label: string;
|
|
185
|
+
type?: "number" | "text" | "email" | "url" | "password" | undefined;
|
|
186
|
+
disabled?: boolean | undefined;
|
|
187
|
+
placeholder?: string | undefined;
|
|
188
|
+
autoComplete?: string | undefined;
|
|
189
|
+
}, {
|
|
190
|
+
name: string;
|
|
191
|
+
label: string;
|
|
192
|
+
type?: "number" | "text" | "email" | "url" | "password" | undefined;
|
|
193
|
+
disabled?: boolean | undefined;
|
|
194
|
+
placeholder?: string | undefined;
|
|
195
|
+
autoComplete?: string | undefined;
|
|
196
|
+
}>;
|
|
197
|
+
type InputType = z.infer<typeof InputTypeSchema>;
|
|
198
|
+
type InputPropsValidated = z.infer<typeof InputPropsSchema>;
|
|
199
|
+
|
|
200
|
+
interface InputProps<TValues extends FieldValues = FieldValues> {
|
|
201
|
+
name: Path<TValues>;
|
|
202
|
+
/** HTML input type. Defaults to `"text"`. */
|
|
203
|
+
type?: InputType;
|
|
204
|
+
/** Consumer-driven i18n label. Wired via `<label htmlFor>` to the input. */
|
|
205
|
+
label: string;
|
|
206
|
+
placeholder?: string;
|
|
207
|
+
disabled?: boolean;
|
|
208
|
+
autoComplete?: string;
|
|
209
|
+
/** Optional consumer override for the wrapping element id. */
|
|
210
|
+
id?: string;
|
|
211
|
+
/** Optional error code → message map for i18n. */
|
|
212
|
+
messageMap?: Record<string, string>;
|
|
213
|
+
className?: string;
|
|
214
|
+
inputClassName?: string;
|
|
215
|
+
errorClassName?: string;
|
|
216
|
+
}
|
|
217
|
+
/**
|
|
218
|
+
* Cross-runtime Input primitive (forms category, T11). Binds an `<input>` to
|
|
219
|
+
* the surrounding `<FormProvider>` via `react-hook-form`'s `Controller`.
|
|
220
|
+
*
|
|
221
|
+
* - Consumer-driven i18n: every user-visible string flows in as a prop.
|
|
222
|
+
* - a11y: `<label htmlFor>` pair, `aria-invalid` toggled by validation state,
|
|
223
|
+
* `aria-describedby` linking the error element when present.
|
|
224
|
+
* - Validation timing inherits the form's `mode` (default `"onBlur"`, Day 102 DM).
|
|
225
|
+
*/
|
|
226
|
+
declare function Input<TValues extends FieldValues = FieldValues>({ name, type, label, placeholder, disabled, autoComplete, id, messageMap, className, inputClassName, errorClassName, }: InputProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Pure helpers for Textarea, shared by React + Preact runtimes.
|
|
230
|
+
*
|
|
231
|
+
* No DOM, no framework imports. Keeps the runtime surface a thin shell so
|
|
232
|
+
* Standard §18 cross-runtime parity holds by reference.
|
|
233
|
+
*/
|
|
234
|
+
declare const DEFAULT_TEXTAREA_ROWS = 3;
|
|
235
|
+
/**
|
|
236
|
+
* Clamp an input value to `maxLength` characters. When `maxLength` is undefined
|
|
237
|
+
* (no cap), returns the value unchanged. When the input already fits, returns
|
|
238
|
+
* the value unchanged (identity — avoids needless state churn in RHF).
|
|
239
|
+
*/
|
|
240
|
+
declare function clampToMaxLength(value: string, maxLength: number | undefined): string;
|
|
241
|
+
/**
|
|
242
|
+
* Resolve the effective `rows` attribute for the rendered <textarea>.
|
|
243
|
+
* Returns `DEFAULT_TEXTAREA_ROWS` when undefined or invalid (≤ 0).
|
|
244
|
+
*/
|
|
245
|
+
declare function resolveRows(rows: number | undefined): number;
|
|
246
|
+
/**
|
|
247
|
+
* Compute the next height (in pixels) for an autoResize textarea given the
|
|
248
|
+
* `scrollHeight` reported by the DOM. Returned as a number; runtime applies it
|
|
249
|
+
* via `style.height = `${n}px``. Keeps the math testable without a DOM.
|
|
250
|
+
*
|
|
251
|
+
* Min height honored when scrollHeight is implausible (≤ 0 in jsdom).
|
|
252
|
+
*/
|
|
253
|
+
declare function computeAutoResizeHeight(scrollHeight: number, minHeightPx: number): number;
|
|
254
|
+
|
|
255
|
+
interface TextareaProps<TValues extends FieldValues = FieldValues> {
|
|
256
|
+
name: Path<TValues>;
|
|
257
|
+
rows?: number;
|
|
258
|
+
maxLength?: number;
|
|
259
|
+
autoResize?: boolean;
|
|
260
|
+
placeholder?: string;
|
|
261
|
+
disabled?: boolean;
|
|
262
|
+
label?: string;
|
|
263
|
+
className?: string;
|
|
264
|
+
/** Optional i18n map passed through to `ErrorDisplay` for error type → message. */
|
|
265
|
+
errorMessageMap?: Record<string, string>;
|
|
266
|
+
}
|
|
267
|
+
/**
|
|
268
|
+
* Multi-line text input form primitive.
|
|
269
|
+
*
|
|
270
|
+
* Wraps `FormField` (RHF Controller) and renders a native `<textarea>` with:
|
|
271
|
+
* - `rows` default 3 (see `resolveRows`).
|
|
272
|
+
* - `maxLength` enforcement at the onChange boundary via `clampToMaxLength`.
|
|
273
|
+
* - Optional `autoResize` — grows the element to fit content on each input event.
|
|
274
|
+
* - `aria-invalid` toggled when the field has a validation error.
|
|
275
|
+
* - `aria-describedby` wired to the `ErrorDisplay` element when an error exists.
|
|
276
|
+
* - Bilingual-ready: `label`, `placeholder`, and `errorMessageMap` are caller-supplied
|
|
277
|
+
* strings — Mosaic does not bake locale-specific copy into the component.
|
|
278
|
+
*/
|
|
279
|
+
declare function Textarea<TValues extends FieldValues = FieldValues>(props: TextareaProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* Pure helpers for FieldArray. Runtime-agnostic — covers ARIA id generation
|
|
283
|
+
* and aria-label conventions used by the React + Preact runtimes.
|
|
284
|
+
*
|
|
285
|
+
* `useFieldArray` itself is a thin wrapper around RHF's hook (live in the
|
|
286
|
+
* runtime layer) — these helpers are the cross-runtime contract that the
|
|
287
|
+
* wrapper and Storybook stories share.
|
|
288
|
+
*/
|
|
289
|
+
/** Default aria-label for the wrapping list element. */
|
|
290
|
+
declare function buildListAriaLabel(name: string): string;
|
|
291
|
+
/** Default aria-label for the per-item Remove button. */
|
|
292
|
+
declare function buildRemoveAriaLabel(name: string, index: number): string;
|
|
293
|
+
/** Default aria-label for the Add button (consumer-rendered). */
|
|
294
|
+
declare function buildAddAriaLabel(name: string): string;
|
|
295
|
+
/**
|
|
296
|
+
* After removing item at `removedIndex` from an array of `previousLength`
|
|
297
|
+
* items, return the index that should receive focus. Clamps to the last
|
|
298
|
+
* remaining index, or `-1` if the list became empty.
|
|
299
|
+
*/
|
|
300
|
+
declare function nextFocusIndexAfterRemove(previousLength: number, removedIndex: number): number;
|
|
301
|
+
|
|
302
|
+
interface UseFieldArrayOptions<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>> {
|
|
303
|
+
name: TName;
|
|
304
|
+
/**
|
|
305
|
+
* Optional control override. When omitted, `useFieldArray` reads control
|
|
306
|
+
* from the surrounding `<FormProvider>`, mirroring `FormField`'s contract.
|
|
307
|
+
*/
|
|
308
|
+
control?: any;
|
|
309
|
+
}
|
|
310
|
+
/**
|
|
311
|
+
* Public return type for `useFieldArray` — mirrors RHF's native return
|
|
312
|
+
* (`fields`, `append`, `remove`, `move`, `swap`, plus `insert`, `prepend`,
|
|
313
|
+
* `replace`, `update` for advanced cases).
|
|
314
|
+
*/
|
|
315
|
+
type UseFieldArrayReturn<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>> = ReturnType<typeof useFieldArray$1<TValues, TName, "id">>;
|
|
316
|
+
/**
|
|
317
|
+
* Thin wrapper around RHF's `useFieldArray`. Reads `control` from the
|
|
318
|
+
* surrounding `<FormProvider>` when not provided, mirroring `FormField`.
|
|
319
|
+
* Exposes `{ fields, append, remove, move, swap }` and the rest of RHF's
|
|
320
|
+
* native return for advanced cases (insert, prepend, replace, update).
|
|
321
|
+
*/
|
|
322
|
+
declare function useFieldArray<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>>({ name, control }: UseFieldArrayOptions<TValues, TName>): react_hook_form.UseFieldArrayReturn<TValues, TName, "id">;
|
|
323
|
+
interface FieldArrayRenderItemArgs<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>> {
|
|
324
|
+
field: FieldArrayWithId<TValues, TName, "id">;
|
|
325
|
+
index: number;
|
|
326
|
+
}
|
|
327
|
+
interface FieldArrayControls<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>> {
|
|
328
|
+
fields: ReadonlyArray<FieldArrayWithId<TValues, TName, "id">>;
|
|
329
|
+
append: (value: FieldArray$1<TValues, TName> | FieldArray$1<TValues, TName>[]) => void;
|
|
330
|
+
remove: (index?: number | number[]) => void;
|
|
331
|
+
move: (from: number, to: number) => void;
|
|
332
|
+
swap: (a: number, b: number) => void;
|
|
333
|
+
}
|
|
334
|
+
interface FieldArrayProps<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>> {
|
|
335
|
+
name: TName;
|
|
336
|
+
/**
|
|
337
|
+
* Render-prop called for each item. Receives the RHF field (with stable
|
|
338
|
+
* `.id`), the current index, and the controls bag for inline buttons.
|
|
339
|
+
*/
|
|
340
|
+
children: (args: FieldArrayRenderItemArgs<TValues, TName>, controls: FieldArrayControls<TValues, TName>) => ReactElement;
|
|
341
|
+
/** Override the default `aria-label` on the list root. */
|
|
342
|
+
ariaLabel?: string;
|
|
343
|
+
}
|
|
344
|
+
/**
|
|
345
|
+
* Render-prop wrapper around RHF's `useFieldArray`. Reads control from the
|
|
346
|
+
* surrounding `<FormProvider>`. Emits an a11y-compliant `role="list"` shell
|
|
347
|
+
* with `role="listitem"` rows keyed by RHF's stable `field.id` (NOT array
|
|
348
|
+
* index — required for stable React reconciliation across move/remove).
|
|
349
|
+
*/
|
|
350
|
+
declare function FieldArray<TValues extends FieldValues = FieldValues, TName extends ArrayPath<TValues> = ArrayPath<TValues>>({ name, children, ariaLabel }: FieldArrayProps<TValues, TName>): react_jsx_runtime.JSX.Element;
|
|
351
|
+
|
|
352
|
+
interface CheckboxProps<TValues extends FieldValues = FieldValues> {
|
|
353
|
+
name: Path<TValues>;
|
|
354
|
+
label: string;
|
|
355
|
+
disabled?: boolean;
|
|
356
|
+
indeterminate?: boolean;
|
|
357
|
+
description?: string;
|
|
358
|
+
className?: string;
|
|
359
|
+
/** Optional i18n map passed through to `ErrorDisplay` for error type → message. */
|
|
360
|
+
errorMessageMap?: Record<string, string>;
|
|
361
|
+
}
|
|
362
|
+
/**
|
|
363
|
+
* Boolean checkbox form primitive with indeterminate state support.
|
|
364
|
+
*
|
|
365
|
+
* Wraps `FormField` (RHF Controller) and renders a native `<input type="checkbox">` with:
|
|
366
|
+
* - `indeterminate` prop — sets DOM `.indeterminate = true` via ref + `aria-checked="mixed"`.
|
|
367
|
+
* - `description` — rendered in a `<span>` and wired via `aria-describedby`.
|
|
368
|
+
* - `aria-invalid` toggled when the field has a validation error.
|
|
369
|
+
* - `aria-describedby` includes the error ID when an error exists.
|
|
370
|
+
* - Bilingual-ready: `label`, `description`, and `errorMessageMap` are caller-supplied.
|
|
371
|
+
*/
|
|
372
|
+
declare function Checkbox<TValues extends FieldValues = FieldValues>(props: CheckboxProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
373
|
+
|
|
374
|
+
/**
|
|
375
|
+
* MultiSelect props — multi-value dropdown with removable chip rendering for
|
|
376
|
+
* the currently selected items. The schema validates static, serializable
|
|
377
|
+
* props only. Runtime callbacks (RHF `field.onChange`, `field.onBlur`) are
|
|
378
|
+
* threaded by `FormField` and live on the React/Preact interface.
|
|
379
|
+
*/
|
|
380
|
+
declare const MultiSelectOptionSchema: z.ZodObject<{
|
|
381
|
+
value: z.ZodString;
|
|
382
|
+
label: z.ZodString;
|
|
383
|
+
}, "strip", z.ZodTypeAny, {
|
|
384
|
+
value: string;
|
|
385
|
+
label: string;
|
|
386
|
+
}, {
|
|
387
|
+
value: string;
|
|
388
|
+
label: string;
|
|
389
|
+
}>;
|
|
390
|
+
declare const MultiSelectPropsSchema: z.ZodObject<{
|
|
391
|
+
name: z.ZodString;
|
|
392
|
+
label: z.ZodString;
|
|
393
|
+
options: z.ZodArray<z.ZodObject<{
|
|
394
|
+
value: z.ZodString;
|
|
395
|
+
label: z.ZodString;
|
|
396
|
+
}, "strip", z.ZodTypeAny, {
|
|
397
|
+
value: string;
|
|
398
|
+
label: string;
|
|
399
|
+
}, {
|
|
400
|
+
value: string;
|
|
401
|
+
label: string;
|
|
402
|
+
}>, "many">;
|
|
403
|
+
placeholder: z.ZodOptional<z.ZodString>;
|
|
404
|
+
disabled: z.ZodOptional<z.ZodBoolean>;
|
|
405
|
+
searchable: z.ZodOptional<z.ZodBoolean>;
|
|
406
|
+
maxItems: z.ZodOptional<z.ZodNumber>;
|
|
407
|
+
}, "strip", z.ZodTypeAny, {
|
|
408
|
+
options: {
|
|
409
|
+
value: string;
|
|
410
|
+
label: string;
|
|
411
|
+
}[];
|
|
412
|
+
name: string;
|
|
413
|
+
label: string;
|
|
414
|
+
disabled?: boolean | undefined;
|
|
415
|
+
placeholder?: string | undefined;
|
|
416
|
+
searchable?: boolean | undefined;
|
|
417
|
+
maxItems?: number | undefined;
|
|
418
|
+
}, {
|
|
419
|
+
options: {
|
|
420
|
+
value: string;
|
|
421
|
+
label: string;
|
|
422
|
+
}[];
|
|
423
|
+
name: string;
|
|
424
|
+
label: string;
|
|
425
|
+
disabled?: boolean | undefined;
|
|
426
|
+
placeholder?: string | undefined;
|
|
427
|
+
searchable?: boolean | undefined;
|
|
428
|
+
maxItems?: number | undefined;
|
|
429
|
+
}>;
|
|
430
|
+
type MultiSelectOption = z.infer<typeof MultiSelectOptionSchema>;
|
|
431
|
+
|
|
432
|
+
interface MultiSelectProps {
|
|
433
|
+
name: string;
|
|
434
|
+
label: string;
|
|
435
|
+
options: MultiSelectOption[];
|
|
436
|
+
placeholder?: string;
|
|
437
|
+
disabled?: boolean;
|
|
438
|
+
searchable?: boolean;
|
|
439
|
+
maxItems?: number;
|
|
440
|
+
className?: string;
|
|
441
|
+
}
|
|
442
|
+
/**
|
|
443
|
+
* Multi-value dropdown. Bound to RHF via `FormField` — value lives at
|
|
444
|
+
* `form.values[name]` as `string[]`. Selected values render as removable
|
|
445
|
+
* chips; the dropdown lists only unselected options. WCAG-AA combobox
|
|
446
|
+
* pattern: `role=combobox aria-multiselectable=true`, chip removal via
|
|
447
|
+
* Backspace / Delete / per-chip close icon, Tab + Arrow nav.
|
|
448
|
+
*/
|
|
449
|
+
declare function MultiSelect(props: MultiSelectProps): react_jsx_runtime.JSX.Element;
|
|
450
|
+
|
|
451
|
+
interface RadioGroupProps {
|
|
452
|
+
name: string;
|
|
453
|
+
label: string;
|
|
454
|
+
options: Array<{
|
|
455
|
+
value: string;
|
|
456
|
+
label: string;
|
|
457
|
+
description?: string;
|
|
458
|
+
disabled?: boolean;
|
|
459
|
+
}>;
|
|
460
|
+
orientation?: "vertical" | "horizontal";
|
|
461
|
+
disabled?: boolean;
|
|
462
|
+
className?: string;
|
|
463
|
+
}
|
|
464
|
+
/**
|
|
465
|
+
* RadioGroup — mutually exclusive single-choice primitive, WCAG-AA compliant.
|
|
466
|
+
*
|
|
467
|
+
* Uses native `<input type="radio">` elements for browser-native semantics
|
|
468
|
+
* while implementing roving tabIndex + Arrow key selection sync per the
|
|
469
|
+
* WAI-ARIA radiogroup pattern (§3.10).
|
|
470
|
+
*
|
|
471
|
+
* ARIA contract:
|
|
472
|
+
* - `role="radiogroup"` + `aria-labelledby` on the container (fieldset equivalent)
|
|
473
|
+
* - Native `<input type="radio">` per option — browser provides role + aria-checked
|
|
474
|
+
* - `aria-labelledby` per input → its `<label>` span id
|
|
475
|
+
* - `aria-describedby` per input → its description span id (when present)
|
|
476
|
+
* - Roving tabIndex — selected radio has tabIndex 0, all others -1
|
|
477
|
+
* - Arrow keys move focus AND selection (WAI-ARIA §3.10)
|
|
478
|
+
* - Home/End jump to first/last enabled option
|
|
479
|
+
* - Space/Enter activate the focused radio
|
|
480
|
+
* - Disabled radios are skipped during arrow navigation
|
|
481
|
+
*/
|
|
482
|
+
declare function RadioGroup(props: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
483
|
+
|
|
484
|
+
/**
|
|
485
|
+
* Select primitive — single-select dropdown with optional search.
|
|
486
|
+
*
|
|
487
|
+
* Combobox-pattern (APG): a trigger button (role=combobox) opens a listbox
|
|
488
|
+
* popup containing option rows. Optional in-popup search filters the visible
|
|
489
|
+
* options client-side. Cross-runtime (React 19 + Preact 10).
|
|
490
|
+
*
|
|
491
|
+
* The `name` is the react-hook-form field name used by the surrounding
|
|
492
|
+
* `<FormProvider>`. The render-prop wiring lives in FormField/Controller; this
|
|
493
|
+
* component is rendered INSIDE a FormField render prop and consumes the
|
|
494
|
+
* `field` callbacks directly (see Select.stories.tsx).
|
|
495
|
+
*/
|
|
496
|
+
declare const SelectOptionSchema: z.ZodObject<{
|
|
497
|
+
value: z.ZodString;
|
|
498
|
+
label: z.ZodString;
|
|
499
|
+
disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
500
|
+
}, "strip", z.ZodTypeAny, {
|
|
501
|
+
value: string;
|
|
502
|
+
disabled: boolean;
|
|
503
|
+
label: string;
|
|
504
|
+
}, {
|
|
505
|
+
value: string;
|
|
506
|
+
label: string;
|
|
507
|
+
disabled?: boolean | undefined;
|
|
508
|
+
}>;
|
|
509
|
+
type SelectOption = z.infer<typeof SelectOptionSchema>;
|
|
510
|
+
declare const SelectPropsSchema: z.ZodObject<{
|
|
511
|
+
name: z.ZodString;
|
|
512
|
+
label: z.ZodString;
|
|
513
|
+
options: z.ZodArray<z.ZodObject<{
|
|
514
|
+
value: z.ZodString;
|
|
515
|
+
label: z.ZodString;
|
|
516
|
+
disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
517
|
+
}, "strip", z.ZodTypeAny, {
|
|
518
|
+
value: string;
|
|
519
|
+
disabled: boolean;
|
|
520
|
+
label: string;
|
|
521
|
+
}, {
|
|
522
|
+
value: string;
|
|
523
|
+
label: string;
|
|
524
|
+
disabled?: boolean | undefined;
|
|
525
|
+
}>, "many">;
|
|
526
|
+
placeholder: z.ZodOptional<z.ZodString>;
|
|
527
|
+
disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
528
|
+
searchable: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
529
|
+
locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
|
|
530
|
+
}, "strip", z.ZodTypeAny, {
|
|
531
|
+
options: {
|
|
532
|
+
value: string;
|
|
533
|
+
disabled: boolean;
|
|
534
|
+
label: string;
|
|
535
|
+
}[];
|
|
536
|
+
disabled: boolean;
|
|
537
|
+
name: string;
|
|
538
|
+
label: string;
|
|
539
|
+
searchable: boolean;
|
|
540
|
+
locale: "en" | "fr";
|
|
541
|
+
placeholder?: string | undefined;
|
|
542
|
+
}, {
|
|
543
|
+
options: {
|
|
544
|
+
value: string;
|
|
545
|
+
label: string;
|
|
546
|
+
disabled?: boolean | undefined;
|
|
547
|
+
}[];
|
|
548
|
+
name: string;
|
|
549
|
+
label: string;
|
|
550
|
+
disabled?: boolean | undefined;
|
|
551
|
+
placeholder?: string | undefined;
|
|
552
|
+
searchable?: boolean | undefined;
|
|
553
|
+
locale?: "en" | "fr" | undefined;
|
|
554
|
+
}>;
|
|
555
|
+
type SelectPropsValidated = z.infer<typeof SelectPropsSchema>;
|
|
556
|
+
declare function validateSelectProps(raw: unknown): SelectPropsValidated;
|
|
557
|
+
|
|
558
|
+
interface SelectProps<TValues extends FieldValues = FieldValues> {
|
|
559
|
+
name: Path<TValues>;
|
|
560
|
+
label: string;
|
|
561
|
+
options: SelectOption[];
|
|
562
|
+
placeholder?: string;
|
|
563
|
+
disabled?: boolean;
|
|
564
|
+
searchable?: boolean;
|
|
565
|
+
className?: string;
|
|
566
|
+
/** Optional i18n map passed through to `ErrorDisplay` for error type → message. */
|
|
567
|
+
errorMessageMap?: Record<string, string>;
|
|
568
|
+
}
|
|
569
|
+
/**
|
|
570
|
+
* Single-select dropdown primitive — combobox+listbox APG pattern.
|
|
571
|
+
* Wraps `FormField` (RHF Controller) and exposes error state via `ErrorDisplay`.
|
|
572
|
+
* WCAG-AA strict.
|
|
573
|
+
*
|
|
574
|
+
* The visible value-label is shown in the trigger button; the listbox popup
|
|
575
|
+
* uses `aria-activedescendant` to track keyboard focus without moving DOM focus
|
|
576
|
+
* (focus stays on the trigger or the search input).
|
|
577
|
+
*/
|
|
578
|
+
declare function Select<TValues extends FieldValues = FieldValues>({ name, label, options, placeholder, disabled, searchable, className, errorMessageMap, }: SelectProps<TValues>): react_jsx_runtime.JSX.Element;
|
|
579
|
+
|
|
580
|
+
/**
|
|
581
|
+
* FormProvider props that need runtime validation are minimal — the `form`
|
|
582
|
+
* object comes from `useMosaicForm()` and carries its own typed contract,
|
|
583
|
+
* while `children` are framework JSX. This schema exists for future-proofing
|
|
584
|
+
* (e.g. optional `name` for nested form contexts).
|
|
585
|
+
*/
|
|
586
|
+
declare const FormProviderPropsSchema: z.ZodObject<{
|
|
587
|
+
name: z.ZodOptional<z.ZodString>;
|
|
588
|
+
}, "strip", z.ZodTypeAny, {
|
|
589
|
+
name?: string | undefined;
|
|
590
|
+
}, {
|
|
591
|
+
name?: string | undefined;
|
|
592
|
+
}>;
|
|
593
|
+
|
|
594
|
+
/**
|
|
595
|
+
* FormField props — the field `name` selects a property on the form values.
|
|
596
|
+
* Children are a render-prop receiving `field`, `fieldState`, `formState`
|
|
597
|
+
* from RHF Controller; that contract is enforced at the TypeScript layer.
|
|
598
|
+
*/
|
|
599
|
+
declare const FormFieldPropsSchema: z.ZodObject<{
|
|
600
|
+
name: z.ZodString;
|
|
601
|
+
}, "strip", z.ZodTypeAny, {
|
|
602
|
+
name: string;
|
|
603
|
+
}, {
|
|
604
|
+
name: string;
|
|
605
|
+
}>;
|
|
606
|
+
|
|
607
|
+
declare const SubmitButtonPropsSchema: z.ZodObject<{
|
|
608
|
+
label: z.ZodDefault<z.ZodString>;
|
|
609
|
+
loadingLabel: z.ZodDefault<z.ZodString>;
|
|
610
|
+
}, "strip", z.ZodTypeAny, {
|
|
611
|
+
label: string;
|
|
612
|
+
loadingLabel: string;
|
|
613
|
+
}, {
|
|
614
|
+
label?: string | undefined;
|
|
615
|
+
loadingLabel?: string | undefined;
|
|
616
|
+
}>;
|
|
617
|
+
type SubmitButtonPropsValidated = z.infer<typeof SubmitButtonPropsSchema>;
|
|
618
|
+
declare function validateSubmitButtonProps(raw: unknown): SubmitButtonPropsValidated;
|
|
619
|
+
|
|
620
|
+
/**
|
|
621
|
+
* Textarea — multi-line text input form primitive.
|
|
622
|
+
*
|
|
623
|
+
* Props contract (Zod-validated at boundary, mirrors React/Preact runtime types).
|
|
624
|
+
*
|
|
625
|
+
* - `name` — required, non-empty. Selects a property on the surrounding form values.
|
|
626
|
+
* - `rows` — default 3, integer ≥ 1. Maps to native textarea `rows` attribute.
|
|
627
|
+
* - `maxLength` — optional, integer ≥ 1. Caller-controlled length cap. Enforced by
|
|
628
|
+
* pure logic helpers so React and Preact runtimes share gating semantics.
|
|
629
|
+
* - `autoResize` — default false. When true, runtime grows the textarea to fit
|
|
630
|
+
* content (capped by CSS `max-height` if set by consumer).
|
|
631
|
+
* - `placeholder` — optional string.
|
|
632
|
+
* - `disabled` — optional boolean.
|
|
633
|
+
* - `label` — optional string (rendered above the textarea, bilingual-ready).
|
|
634
|
+
*/
|
|
635
|
+
declare const TextareaPropsSchema: z.ZodObject<{
|
|
636
|
+
name: z.ZodString;
|
|
637
|
+
rows: z.ZodDefault<z.ZodNumber>;
|
|
638
|
+
maxLength: z.ZodOptional<z.ZodNumber>;
|
|
639
|
+
autoResize: z.ZodDefault<z.ZodBoolean>;
|
|
640
|
+
placeholder: z.ZodOptional<z.ZodString>;
|
|
641
|
+
disabled: z.ZodOptional<z.ZodBoolean>;
|
|
642
|
+
label: z.ZodOptional<z.ZodString>;
|
|
643
|
+
}, "strip", z.ZodTypeAny, {
|
|
644
|
+
name: string;
|
|
645
|
+
rows: number;
|
|
646
|
+
autoResize: boolean;
|
|
647
|
+
disabled?: boolean | undefined;
|
|
648
|
+
maxLength?: number | undefined;
|
|
649
|
+
label?: string | undefined;
|
|
650
|
+
placeholder?: string | undefined;
|
|
651
|
+
}, {
|
|
652
|
+
name: string;
|
|
653
|
+
disabled?: boolean | undefined;
|
|
654
|
+
maxLength?: number | undefined;
|
|
655
|
+
label?: string | undefined;
|
|
656
|
+
placeholder?: string | undefined;
|
|
657
|
+
rows?: number | undefined;
|
|
658
|
+
autoResize?: boolean | undefined;
|
|
659
|
+
}>;
|
|
660
|
+
type TextareaPropsValidated = z.infer<typeof TextareaPropsSchema>;
|
|
661
|
+
declare function validateTextareaProps(raw: unknown): TextareaPropsValidated;
|
|
662
|
+
|
|
663
|
+
/**
|
|
664
|
+
* FieldArray props — `name` selects the array path on the form values.
|
|
665
|
+
* `children` is a render-prop receiving `(field, index)` for each entry
|
|
666
|
+
* AND a third arg with the controls `{ append, remove, move, swap, fields }`.
|
|
667
|
+
* That contract is enforced at the TypeScript layer.
|
|
668
|
+
*/
|
|
669
|
+
declare const FieldArrayPropsSchema: z.ZodObject<{
|
|
670
|
+
name: z.ZodString;
|
|
671
|
+
}, "strip", z.ZodTypeAny, {
|
|
672
|
+
name: string;
|
|
673
|
+
}, {
|
|
674
|
+
name: string;
|
|
675
|
+
}>;
|
|
676
|
+
/**
|
|
677
|
+
* Options accepted by `useFieldArray` — thin re-export of the underlying
|
|
678
|
+
* RHF shape. We validate `name` here for parity with FieldArray.
|
|
679
|
+
*/
|
|
680
|
+
declare const UseFieldArrayOptionsSchema: z.ZodObject<{
|
|
681
|
+
name: z.ZodString;
|
|
682
|
+
}, "strip", z.ZodTypeAny, {
|
|
683
|
+
name: string;
|
|
684
|
+
}, {
|
|
685
|
+
name: string;
|
|
686
|
+
}>;
|
|
687
|
+
|
|
688
|
+
/**
|
|
689
|
+
* Checkbox — boolean form primitive with indeterminate state support.
|
|
690
|
+
*
|
|
691
|
+
* Props contract (Zod-validated at boundary, mirrors React/Preact runtime types).
|
|
692
|
+
*
|
|
693
|
+
* - `name` — required, non-empty. Selects a property on the surrounding form values.
|
|
694
|
+
* - `label` — required, non-empty. Rendered adjacent to the checkbox (bilingual-ready).
|
|
695
|
+
* - `disabled` — optional boolean. Maps to native `disabled` attribute.
|
|
696
|
+
* - `indeterminate` — optional boolean. When true, sets DOM `.indeterminate = true`
|
|
697
|
+
* via ref and aria-checked="mixed". Controlled externally — the component does not
|
|
698
|
+
* manage this state internally.
|
|
699
|
+
* - `description` — optional string. Wired via `aria-describedby` for screen readers.
|
|
700
|
+
*/
|
|
701
|
+
declare const CheckboxPropsSchema: z.ZodObject<{
|
|
702
|
+
name: z.ZodString;
|
|
703
|
+
label: z.ZodString;
|
|
704
|
+
disabled: z.ZodOptional<z.ZodBoolean>;
|
|
705
|
+
indeterminate: z.ZodOptional<z.ZodBoolean>;
|
|
706
|
+
description: z.ZodOptional<z.ZodString>;
|
|
707
|
+
}, "strip", z.ZodTypeAny, {
|
|
708
|
+
name: string;
|
|
709
|
+
label: string;
|
|
710
|
+
description?: string | undefined;
|
|
711
|
+
disabled?: boolean | undefined;
|
|
712
|
+
indeterminate?: boolean | undefined;
|
|
713
|
+
}, {
|
|
714
|
+
name: string;
|
|
715
|
+
label: string;
|
|
716
|
+
description?: string | undefined;
|
|
717
|
+
disabled?: boolean | undefined;
|
|
718
|
+
indeterminate?: boolean | undefined;
|
|
719
|
+
}>;
|
|
720
|
+
type CheckboxPropsValidated = z.infer<typeof CheckboxPropsSchema>;
|
|
721
|
+
declare function validateCheckboxProps(raw: unknown): CheckboxPropsValidated;
|
|
722
|
+
|
|
723
|
+
/**
|
|
724
|
+
* Pure helpers for Checkbox, shared by React + Preact runtimes.
|
|
725
|
+
*
|
|
726
|
+
* No DOM, no framework imports. Keeps the runtime surface a thin shell so
|
|
727
|
+
* Standard §18 cross-runtime parity holds by reference.
|
|
728
|
+
*/
|
|
729
|
+
/**
|
|
730
|
+
* Resolve the effective `aria-checked` attribute value for the rendered
|
|
731
|
+
* `<input type="checkbox">`.
|
|
732
|
+
*
|
|
733
|
+
* - `indeterminate=true` → `"mixed"` (ARIA tri-state semantics).
|
|
734
|
+
* - `checked=true` → `true`.
|
|
735
|
+
* - otherwise → `false`.
|
|
736
|
+
*
|
|
737
|
+
* The DOM `.indeterminate` property must be set via a ref — it is not an HTML
|
|
738
|
+
* attribute and cannot be set declaratively. This helper only computes the
|
|
739
|
+
* ARIA value; the runtime is responsible for the DOM side-effect.
|
|
740
|
+
*/
|
|
741
|
+
declare function resolveAriaChecked(checked: boolean, indeterminate: boolean | undefined): boolean | "mixed";
|
|
742
|
+
/**
|
|
743
|
+
* Compute the accessible description ID to wire into `aria-describedby`.
|
|
744
|
+
*
|
|
745
|
+
* Returns the `descriptionId` when a `description` string is provided,
|
|
746
|
+
* or `undefined` when no description is present so the attribute is omitted.
|
|
747
|
+
* A falsy description short-circuits to prevent empty `aria-describedby=""`.
|
|
748
|
+
*/
|
|
749
|
+
declare function resolveDescribedBy(descriptionId: string, description: string | undefined, hasError: boolean, errorId: string): string | undefined;
|
|
750
|
+
|
|
751
|
+
/**
|
|
752
|
+
* RadioGroup — mutually exclusive single-choice form primitive.
|
|
753
|
+
*
|
|
754
|
+
* - `name` RHF field name (must match `<FormField name="…">` parent).
|
|
755
|
+
* - `options` Ordered list of radio descriptors. Each carries a stable
|
|
756
|
+
* `value` (the form value when selected), a visible `label`,
|
|
757
|
+
* and an optional `description` exposed via aria-describedby.
|
|
758
|
+
* - `orientation` Visual layout — vertical (default) or horizontal. Controls
|
|
759
|
+
* Arrow key mapping (Up/Down vs Left/Right per WAI-ARIA).
|
|
760
|
+
* - `disabled` Disables the whole group; individual options can also be
|
|
761
|
+
* disabled via `options[i].disabled`.
|
|
762
|
+
* - `label` Visible group label rendered above the radios; wired to
|
|
763
|
+
* `role="radiogroup"` via `aria-labelledby`.
|
|
764
|
+
*
|
|
765
|
+
* WCAG-AA contract is asserted by the runtime layer:
|
|
766
|
+
* - container has `role="radiogroup"` + `aria-labelledby` + `aria-orientation`.
|
|
767
|
+
* - each radio has `role="radio"` + `aria-checked` + `tabIndex` roving.
|
|
768
|
+
* - Arrow keys move focus AND selection (WAI-ARIA radiogroup pattern §3.10).
|
|
769
|
+
* - Space/Enter activates the currently focused radio.
|
|
770
|
+
* - Disabled radios are skipped during keyboard navigation.
|
|
771
|
+
*/
|
|
772
|
+
declare const RadioGroupOptionSchema: z.ZodObject<{
|
|
773
|
+
value: z.ZodString;
|
|
774
|
+
label: z.ZodString;
|
|
775
|
+
description: z.ZodOptional<z.ZodString>;
|
|
776
|
+
disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
777
|
+
}, "strip", z.ZodTypeAny, {
|
|
778
|
+
value: string;
|
|
779
|
+
disabled: boolean;
|
|
780
|
+
label: string;
|
|
781
|
+
description?: string | undefined;
|
|
782
|
+
}, {
|
|
783
|
+
value: string;
|
|
784
|
+
label: string;
|
|
785
|
+
description?: string | undefined;
|
|
786
|
+
disabled?: boolean | undefined;
|
|
787
|
+
}>;
|
|
788
|
+
type RadioGroupOption = z.infer<typeof RadioGroupOptionSchema>;
|
|
789
|
+
declare const RadioGroupPropsSchema: z.ZodObject<{
|
|
790
|
+
name: z.ZodString;
|
|
791
|
+
label: z.ZodString;
|
|
792
|
+
options: z.ZodArray<z.ZodObject<{
|
|
793
|
+
value: z.ZodString;
|
|
794
|
+
label: z.ZodString;
|
|
795
|
+
description: z.ZodOptional<z.ZodString>;
|
|
796
|
+
disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
797
|
+
}, "strip", z.ZodTypeAny, {
|
|
798
|
+
value: string;
|
|
799
|
+
disabled: boolean;
|
|
800
|
+
label: string;
|
|
801
|
+
description?: string | undefined;
|
|
802
|
+
}, {
|
|
803
|
+
value: string;
|
|
804
|
+
label: string;
|
|
805
|
+
description?: string | undefined;
|
|
806
|
+
disabled?: boolean | undefined;
|
|
807
|
+
}>, "many">;
|
|
808
|
+
orientation: z.ZodDefault<z.ZodEnum<["vertical", "horizontal"]>>;
|
|
809
|
+
disabled: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
|
|
810
|
+
locale: z.ZodDefault<z.ZodEnum<["en", "fr"]>>;
|
|
811
|
+
}, "strip", z.ZodTypeAny, {
|
|
812
|
+
options: {
|
|
813
|
+
value: string;
|
|
814
|
+
disabled: boolean;
|
|
815
|
+
label: string;
|
|
816
|
+
description?: string | undefined;
|
|
817
|
+
}[];
|
|
818
|
+
disabled: boolean;
|
|
819
|
+
name: string;
|
|
820
|
+
label: string;
|
|
821
|
+
orientation: "vertical" | "horizontal";
|
|
822
|
+
locale: "en" | "fr";
|
|
823
|
+
}, {
|
|
824
|
+
options: {
|
|
825
|
+
value: string;
|
|
826
|
+
label: string;
|
|
827
|
+
description?: string | undefined;
|
|
828
|
+
disabled?: boolean | undefined;
|
|
829
|
+
}[];
|
|
830
|
+
name: string;
|
|
831
|
+
label: string;
|
|
832
|
+
disabled?: boolean | undefined;
|
|
833
|
+
orientation?: "vertical" | "horizontal" | undefined;
|
|
834
|
+
locale?: "en" | "fr" | undefined;
|
|
835
|
+
}>;
|
|
836
|
+
type RadioGroupPropsValidated = z.infer<typeof RadioGroupPropsSchema>;
|
|
837
|
+
declare function validateRadioGroupProps(raw: unknown): RadioGroupPropsValidated;
|
|
838
|
+
|
|
839
|
+
/**
|
|
840
|
+
* RadioGroup.logic.ts — pure, framework-agnostic logic.
|
|
841
|
+
* No JSX here — shared between React 19 and Preact 10 runtimes.
|
|
842
|
+
*
|
|
843
|
+
* WCAG-AA ARIA + roving tabindex spec (WAI-ARIA Authoring Practices §3.10):
|
|
844
|
+
*
|
|
845
|
+
* - role="radiogroup" on container
|
|
846
|
+
* - role="radio" + aria-checked on each radio
|
|
847
|
+
* - aria-labelledby on container points to the visible group label id
|
|
848
|
+
* - aria-labelledby on each radio points to its own option label span id
|
|
849
|
+
* - aria-describedby on a radio points to its description span id (if present)
|
|
850
|
+
* - Roving tabindex:
|
|
851
|
+
* * If a value is selected → the SELECTED radio has tabIndex 0, all
|
|
852
|
+
* others tabIndex -1.
|
|
853
|
+
* * If nothing is selected → the FIRST enabled radio has tabIndex 0,
|
|
854
|
+
* all others tabIndex -1 (so Tab can enter the group).
|
|
855
|
+
* - Arrow keys (Up/Down vertical, Left/Right horizontal) MOVE focus to the
|
|
856
|
+
* next/previous enabled radio AND select it (focus + selection sync — this
|
|
857
|
+
* is the radiogroup pattern, distinct from tabs).
|
|
858
|
+
* - Home / End jump to first / last enabled radio AND select it.
|
|
859
|
+
* - Space / Enter on a non-selected focused radio selects it (no-op when
|
|
860
|
+
* already selected).
|
|
861
|
+
* - Disabled radios are skipped during arrow nav (findNextEnabledIndex).
|
|
862
|
+
*/
|
|
863
|
+
|
|
864
|
+
type RadioOrientation = "vertical" | "horizontal";
|
|
865
|
+
/**
|
|
866
|
+
* Returns the prev/next key pair for the given orientation.
|
|
867
|
+
*
|
|
868
|
+
* Vertical group → ArrowUp/ArrowDown.
|
|
869
|
+
* Horizontal group → ArrowLeft/ArrowRight.
|
|
870
|
+
*
|
|
871
|
+
* (Per WAI-ARIA radiogroup pattern, only one axis is used; the perpendicular
|
|
872
|
+
* arrow keys are NOT intercepted — they let the user move out of the group.)
|
|
873
|
+
*/
|
|
874
|
+
declare function getNavKeys(orientation: RadioOrientation): {
|
|
875
|
+
prev: string;
|
|
876
|
+
next: string;
|
|
877
|
+
};
|
|
878
|
+
/**
|
|
879
|
+
* Finds the next enabled (non-disabled) option index in `direction`,
|
|
880
|
+
* wrapping around at boundaries. Returns `currentIndex` if every option
|
|
881
|
+
* is disabled (defensive — Zod schema requires options.length ≥ 1 but does
|
|
882
|
+
* not forbid all-disabled).
|
|
883
|
+
*/
|
|
884
|
+
declare function findNextEnabledIndex(options: Array<Pick<RadioGroupOption, "disabled">>, currentIndex: number, direction: 1 | -1): number;
|
|
885
|
+
/** First enabled option index, or 0 if all are disabled. */
|
|
886
|
+
declare function findFirstEnabledIndex(options: Array<Pick<RadioGroupOption, "disabled">>): number;
|
|
887
|
+
/** Last enabled option index, or `options.length - 1` if all are disabled. */
|
|
888
|
+
declare function findLastEnabledIndex(options: Array<Pick<RadioGroupOption, "disabled">>): number;
|
|
889
|
+
/**
|
|
890
|
+
* Returns the index of the option whose `value` matches `selectedValue`,
|
|
891
|
+
* or -1 if no option is selected (or the selected value points to a disabled
|
|
892
|
+
* option — selected-but-disabled is a valid state, so we DON'T filter here).
|
|
893
|
+
*/
|
|
894
|
+
declare function findSelectedIndex(options: Array<Pick<RadioGroupOption, "value">>, selectedValue: string | undefined): number;
|
|
895
|
+
/**
|
|
896
|
+
* Roving tabindex resolver — returns the index that should carry tabIndex=0.
|
|
897
|
+
*
|
|
898
|
+
* - If something is selected → the selected index (focus follows selection).
|
|
899
|
+
* - Otherwise → the first enabled option (so Tab can enter the group).
|
|
900
|
+
*/
|
|
901
|
+
declare function getRovingTabIndex(options: Array<Pick<RadioGroupOption, "value" | "disabled">>, selectedValue: string | undefined): number;
|
|
902
|
+
/** Stable DOM id for the group label (linked by container aria-labelledby). */
|
|
903
|
+
declare function getGroupLabelId(instanceId: string, name: string): string;
|
|
904
|
+
/** Stable DOM id for an option label span (linked by radio aria-labelledby). */
|
|
905
|
+
declare function getOptionLabelId(instanceId: string, name: string, optionValue: string): string;
|
|
906
|
+
/** Stable DOM id for an option description span (linked by radio aria-describedby). */
|
|
907
|
+
declare function getOptionDescriptionId(instanceId: string, name: string, optionValue: string): string;
|
|
908
|
+
/** Tailwind classes for the root radiogroup container. */
|
|
909
|
+
declare function getGroupClasses(orientation: RadioOrientation): string;
|
|
910
|
+
/** Tailwind classes for a single radio row (label + control + description). */
|
|
911
|
+
declare function getOptionRowClasses(isDisabled: boolean, orientation: RadioOrientation): string;
|
|
912
|
+
/** Tailwind classes for the visible radio control (the round dot). */
|
|
913
|
+
declare function getRadioControlClasses(isSelected: boolean, isDisabled: boolean): string;
|
|
914
|
+
/** Whether a keyboard event should activate the focused radio (Space / Enter). */
|
|
915
|
+
declare function isActivationKey(key: string): boolean;
|
|
916
|
+
|
|
917
|
+
export { findSelectedIndex as $, SelectPropsSchema as A, type SelectPropsValidated as B, Checkbox as C, DEFAULT_TEXTAREA_ROWS as D, ErrorDisplay as E, type FieldErrorShape as F, SubmitButton as G, SubmitButtonPropsSchema as H, type InputType as I, TextareaPropsSchema as J, type TextareaPropsValidated as K, type UseMosaicFormOptions$1 as L, type MosaicFormMode as M, UseMosaicFormOptionsSchema as N, type UseMosaicFormReturn as O, buildAddAriaLabel as P, buildListAriaLabel as Q, RadioGroup as R, type SelectOption as S, Textarea as T, UseFieldArrayOptionsSchema as U, buildRemoveAriaLabel as V, clampToMaxLength as W, computeAutoResizeHeight as X, findFirstEnabledIndex as Y, findLastEnabledIndex as Z, findNextEnabledIndex as _, type MultiSelectOption as a, getGroupClasses as a0, getGroupLabelId as a1, getNavKeys as a2, getOptionDescriptionId as a3, getOptionLabelId as a4, getOptionRowClasses as a5, getRadioControlClasses as a6, getRovingTabIndex as a7, isActivationKey as a8, nextFocusIndexAfterRemove as a9, type UseFieldArrayOptions as aA, type UseFieldArrayReturn as aB, type UseMosaicFormOptions as aC, resolveAriaChecked as aa, resolveDescribedBy as ab, resolveRows as ac, useFieldArray as ad, useMosaicForm as ae, useMosaicFormContext as af, validateCheckboxProps as ag, validateOptions as ah, validateRadioGroupProps as ai, validateSelectProps as aj, validateSubmitButtonProps as ak, validateTextareaProps as al, type CheckboxProps as am, type ErrorDisplayProps as an, type FieldArrayControls as ao, type FieldArrayProps as ap, type FieldArrayRenderItemArgs as aq, type FormFieldProps as ar, type FormFieldRenderArgs as as, type FormProviderProps as at, type InputProps as au, type MultiSelectProps as av, type RadioGroupProps as aw, type SelectProps as ax, type SubmitButtonProps as ay, type TextareaProps as az, CheckboxPropsSchema as b, type CheckboxPropsValidated as c, ErrorDisplayPropsSchema as d, FieldArray as e, FieldArrayPropsSchema as f, FieldErrorShapeSchema as g, FormField as h, FormFieldPropsSchema as i, FormProvider as j, FormProviderPropsSchema as k, Input as l, InputPropsSchema as m, type InputPropsValidated as n, InputTypeSchema as o, MosaicFormModeSchema as p, MultiSelect as q, MultiSelectOptionSchema as r, MultiSelectPropsSchema as s, type RadioGroupOption as t, RadioGroupOptionSchema as u, RadioGroupPropsSchema as v, type RadioGroupPropsValidated as w, type RadioOrientation as x, Select as y, SelectOptionSchema as z };
|