@me1a/ui 2.1.7 → 2.2.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/dist/atoms.cjs.js +1 -1
- package/dist/atoms.d.mts +546 -16
- package/dist/atoms.d.ts +546 -16
- package/dist/atoms.esm.js +1 -1
- package/dist/checkbox-DxgDKaHx.d.mts +108 -0
- package/dist/checkbox-DxgDKaHx.d.ts +108 -0
- package/dist/chunk-23T2PH5G.esm.js +2 -0
- package/dist/chunk-23T2PH5G.esm.js.map +1 -0
- package/dist/chunk-2QG3QTSW.cjs.js +2 -0
- package/dist/chunk-2QG3QTSW.cjs.js.map +1 -0
- package/dist/chunk-DTM5LZHM.cjs.js +2 -0
- package/dist/chunk-DTM5LZHM.cjs.js.map +1 -0
- package/dist/chunk-HW32JE75.cjs.js +2 -0
- package/dist/chunk-HW32JE75.cjs.js.map +1 -0
- package/dist/chunk-J5A6PILI.cjs.js +2 -0
- package/dist/chunk-J5A6PILI.cjs.js.map +1 -0
- package/dist/chunk-JIRS6MWF.cjs.js +2 -0
- package/dist/chunk-JIRS6MWF.cjs.js.map +1 -0
- package/dist/chunk-JUZG25DH.esm.js +2 -0
- package/dist/chunk-JUZG25DH.esm.js.map +1 -0
- package/dist/chunk-MOYOCJW6.esm.js +2 -0
- package/dist/chunk-MOYOCJW6.esm.js.map +1 -0
- package/dist/chunk-Q76IMLQ3.esm.js +2 -0
- package/dist/chunk-Q76IMLQ3.esm.js.map +1 -0
- package/dist/chunk-STRDPP3B.esm.js +2 -0
- package/dist/chunk-STRDPP3B.esm.js.map +1 -0
- package/dist/chunk-UK47BFA3.cjs.js +2 -0
- package/dist/chunk-UK47BFA3.cjs.js.map +1 -0
- package/dist/chunk-YEZB7AOJ.esm.js +2 -0
- package/dist/chunk-YEZB7AOJ.esm.js.map +1 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.d.mts +11 -3
- package/dist/index.d.ts +11 -3
- package/dist/index.esm.js +1 -1
- package/dist/molecules.cjs.js +1 -1
- package/dist/molecules.d.mts +30 -1
- package/dist/molecules.d.ts +30 -1
- package/dist/molecules.esm.js +1 -1
- package/dist/organisms.cjs.js +1 -1
- package/dist/organisms.esm.js +1 -1
- package/dist/rhf.cjs.js +1 -1
- package/dist/rhf.cjs.js.map +1 -1
- package/dist/rhf.d.mts +211 -2
- package/dist/rhf.d.ts +211 -2
- package/dist/rhf.esm.js +1 -1
- package/dist/rhf.esm.js.map +1 -1
- package/package.json +24 -12
- package/dist/chunk-3HTFCAYW.esm.js +0 -2
- package/dist/chunk-3HTFCAYW.esm.js.map +0 -1
- package/dist/chunk-7NN2L46N.esm.js +0 -2
- package/dist/chunk-7NN2L46N.esm.js.map +0 -1
- package/dist/chunk-BR7Z6MCL.cjs.js +0 -2
- package/dist/chunk-BR7Z6MCL.cjs.js.map +0 -1
- package/dist/chunk-C4ZAMI2P.cjs.js +0 -2
- package/dist/chunk-C4ZAMI2P.cjs.js.map +0 -1
- package/dist/chunk-EBPUGBUT.esm.js +0 -2
- package/dist/chunk-EBPUGBUT.esm.js.map +0 -1
- package/dist/chunk-ELZV2CGE.cjs.js +0 -2
- package/dist/chunk-ELZV2CGE.cjs.js.map +0 -1
- package/dist/chunk-LCAU4YZI.esm.js +0 -2
- package/dist/chunk-LCAU4YZI.esm.js.map +0 -1
- package/dist/chunk-OZY26HWB.cjs.js +0 -2
- package/dist/chunk-OZY26HWB.cjs.js.map +0 -1
- package/dist/chunk-PEQ3VT44.esm.js +0 -2
- package/dist/chunk-PEQ3VT44.esm.js.map +0 -1
- package/dist/chunk-UAZIJGWR.cjs.js +0 -2
- package/dist/chunk-UAZIJGWR.cjs.js.map +0 -1
- package/dist/chunk-UOSQSIWO.cjs.js +0 -2
- package/dist/chunk-UOSQSIWO.cjs.js.map +0 -1
- package/dist/chunk-XJKHGY2A.esm.js +0 -2
- package/dist/chunk-XJKHGY2A.esm.js.map +0 -1
- package/dist/input-Ruz0ZoY6.d.mts +0 -12
- package/dist/input-Ruz0ZoY6.d.ts +0 -12
package/dist/rhf.d.mts
CHANGED
|
@@ -3,10 +3,15 @@ import * as react_hook_form from 'react-hook-form';
|
|
|
3
3
|
import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { TextareaHTMLAttributes } from 'react';
|
|
6
|
-
import { I as Input } from './
|
|
6
|
+
import { I as Input, C as Checkbox, S as Switch, R as RadioGroup } from './checkbox-DxgDKaHx.mjs';
|
|
7
7
|
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
8
8
|
import { Slot } from '@radix-ui/react-slot';
|
|
9
9
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
10
|
+
import '@radix-ui/react-switch';
|
|
11
|
+
import 'class-variance-authority/types';
|
|
12
|
+
import 'class-variance-authority';
|
|
13
|
+
import '@radix-ui/react-radio-group';
|
|
14
|
+
import '@radix-ui/react-checkbox';
|
|
10
15
|
|
|
11
16
|
interface RHFTextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Input>, "name"> {
|
|
12
17
|
/** The name of the field in the form */
|
|
@@ -109,6 +114,210 @@ interface RHFTextareaProps<TFieldValues extends FieldValues = FieldValues, TName
|
|
|
109
114
|
*/
|
|
110
115
|
declare function RHFTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, autoResize, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextareaProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
111
116
|
|
|
117
|
+
interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Checkbox>, "name"> {
|
|
118
|
+
/** The name of the field in the form */
|
|
119
|
+
name: TName;
|
|
120
|
+
/** Optional label for the field */
|
|
121
|
+
label?: string;
|
|
122
|
+
/** Optional description text below the field */
|
|
123
|
+
description?: string;
|
|
124
|
+
/** Optional warning text to display */
|
|
125
|
+
warningText?: string;
|
|
126
|
+
/** Whether the field is required */
|
|
127
|
+
required?: boolean;
|
|
128
|
+
/** Whether the field is disabled */
|
|
129
|
+
disabled?: boolean;
|
|
130
|
+
/** Whether the field is read-only */
|
|
131
|
+
readOnly?: boolean;
|
|
132
|
+
/** Optional aria-label for accessibility */
|
|
133
|
+
"aria-label"?: string;
|
|
134
|
+
/** Optional aria-describedby for accessibility */
|
|
135
|
+
"aria-describedby"?: string;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* A checkbox component that integrates with React Hook Form.
|
|
140
|
+
* Provides form validation, error handling, and accessibility features.
|
|
141
|
+
*
|
|
142
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfcheckbox--docs
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* ```tsx
|
|
146
|
+
* <Form>
|
|
147
|
+
* <RHFCheckbox name="terms" label="Accept terms and conditions" />
|
|
148
|
+
* </Form>
|
|
149
|
+
* ```
|
|
150
|
+
*/
|
|
151
|
+
declare function RHFCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFCheckboxProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
152
|
+
|
|
153
|
+
interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Switch>, "name"> {
|
|
154
|
+
/** The name of the field in the form */
|
|
155
|
+
name: TName;
|
|
156
|
+
/** Optional label for the field */
|
|
157
|
+
label?: string;
|
|
158
|
+
/** Optional description text below the field */
|
|
159
|
+
description?: string;
|
|
160
|
+
/** Optional warning text to display */
|
|
161
|
+
warningText?: string;
|
|
162
|
+
/** Whether the field is required */
|
|
163
|
+
required?: boolean;
|
|
164
|
+
/** Whether the field is disabled */
|
|
165
|
+
disabled?: boolean;
|
|
166
|
+
/** Whether the field is read-only */
|
|
167
|
+
readOnly?: boolean;
|
|
168
|
+
/** Optional aria-label for accessibility */
|
|
169
|
+
"aria-label"?: string;
|
|
170
|
+
/** Optional aria-describedby for accessibility */
|
|
171
|
+
"aria-describedby"?: string;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* A switch component that integrates with React Hook Form.
|
|
176
|
+
* Provides form validation, error handling, and accessibility features.
|
|
177
|
+
*
|
|
178
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfswitch--docs
|
|
179
|
+
*
|
|
180
|
+
* @example
|
|
181
|
+
* ```tsx
|
|
182
|
+
* <Form>
|
|
183
|
+
* <RHFSwitch name="notifications" label="Enable notifications" />
|
|
184
|
+
* </Form>
|
|
185
|
+
* ```
|
|
186
|
+
*/
|
|
187
|
+
declare function RHFSwitch<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFSwitchProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
188
|
+
|
|
189
|
+
interface RHFRadioGroupOption {
|
|
190
|
+
label: string;
|
|
191
|
+
id: string;
|
|
192
|
+
}
|
|
193
|
+
interface RHFRadioGroupWithChildrenProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof RadioGroup>, "name"> {
|
|
194
|
+
/** The name of the field in the form */
|
|
195
|
+
name: TName;
|
|
196
|
+
/** Optional label for the field */
|
|
197
|
+
label?: string;
|
|
198
|
+
/** Optional description text below the field */
|
|
199
|
+
description?: string;
|
|
200
|
+
/** Optional warning text to display */
|
|
201
|
+
warningText?: string;
|
|
202
|
+
/** Whether the field is required */
|
|
203
|
+
required?: boolean;
|
|
204
|
+
/** Whether the field is disabled */
|
|
205
|
+
disabled?: boolean;
|
|
206
|
+
/** Whether the field is read-only */
|
|
207
|
+
readOnly?: boolean;
|
|
208
|
+
/** Optional aria-label for accessibility */
|
|
209
|
+
"aria-label"?: string;
|
|
210
|
+
/** Optional aria-describedby for accessibility */
|
|
211
|
+
"aria-describedby"?: string;
|
|
212
|
+
/** Children must be RadioGroupItem components */
|
|
213
|
+
children: React.ReactNode;
|
|
214
|
+
}
|
|
215
|
+
interface RHFRadioGroupWithOptionsProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof RadioGroup>, "name"> {
|
|
216
|
+
/** The name of the field in the form */
|
|
217
|
+
name: TName;
|
|
218
|
+
/** Optional label for the field */
|
|
219
|
+
label?: string;
|
|
220
|
+
/** radio group options */
|
|
221
|
+
options: RHFRadioGroupOption[];
|
|
222
|
+
/** Optional description text below the field */
|
|
223
|
+
description?: string;
|
|
224
|
+
/** Optional warning text to display */
|
|
225
|
+
warningText?: string;
|
|
226
|
+
/** Whether the field is required */
|
|
227
|
+
required?: boolean;
|
|
228
|
+
/** Whether the field is disabled */
|
|
229
|
+
disabled?: boolean;
|
|
230
|
+
/** Whether the field is read-only */
|
|
231
|
+
readOnly?: boolean;
|
|
232
|
+
/** Optional aria-label for accessibility */
|
|
233
|
+
"aria-label"?: string;
|
|
234
|
+
/** Optional aria-describedby for accessibility */
|
|
235
|
+
"aria-describedby"?: string;
|
|
236
|
+
}
|
|
237
|
+
type RHFRadioGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = RHFRadioGroupWithChildrenProps<TFieldValues, TName> | RHFRadioGroupWithOptionsProps<TFieldValues, TName>;
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* A radio group component that integrates with React Hook Form.
|
|
241
|
+
* Provides form validation, error handling, and accessibility features.
|
|
242
|
+
*
|
|
243
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfradiogroup--docs
|
|
244
|
+
*
|
|
245
|
+
* @example
|
|
246
|
+
* ```tsx
|
|
247
|
+
* // Using children
|
|
248
|
+
* <Form>
|
|
249
|
+
* <RHFRadioGroup name="preference" label="Select your preference">
|
|
250
|
+
* <RadioGroupItem value="option1" label="Option 1" />
|
|
251
|
+
* <RadioGroupItem value="option2" label="Option 2" />
|
|
252
|
+
* </RHFRadioGroup>
|
|
253
|
+
* </Form>
|
|
254
|
+
*
|
|
255
|
+
* // Using options prop
|
|
256
|
+
* <Form>
|
|
257
|
+
* <RHFRadioGroup
|
|
258
|
+
* name="preference"
|
|
259
|
+
* label="Select your preference"
|
|
260
|
+
* options={[
|
|
261
|
+
* { id: "option1", label: "Option 1" },
|
|
262
|
+
* { id: "option2", label: "Option 2" }
|
|
263
|
+
* ]}
|
|
264
|
+
* />
|
|
265
|
+
* </Form>
|
|
266
|
+
* ```
|
|
267
|
+
*/
|
|
268
|
+
declare function RHFRadioGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, children, ...other }: RHFRadioGroupProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
269
|
+
|
|
270
|
+
interface RHFRadioButtonGroupOption {
|
|
271
|
+
label: string;
|
|
272
|
+
id: string;
|
|
273
|
+
size?: "default" | "sm" | "lg";
|
|
274
|
+
}
|
|
275
|
+
interface RHFRadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof RadioGroup>, "name"> {
|
|
276
|
+
/** The name of the field in the form */
|
|
277
|
+
name: TName;
|
|
278
|
+
/** Optional label for the field */
|
|
279
|
+
label?: string;
|
|
280
|
+
/** Optional description text below the field */
|
|
281
|
+
description?: string;
|
|
282
|
+
/** Optional warning text to display */
|
|
283
|
+
warningText?: string;
|
|
284
|
+
/** Whether the field is required */
|
|
285
|
+
required?: boolean;
|
|
286
|
+
/** Whether the field is disabled */
|
|
287
|
+
disabled?: boolean;
|
|
288
|
+
/** Whether the field is read-only */
|
|
289
|
+
readOnly?: boolean;
|
|
290
|
+
/** Optional aria-label for accessibility */
|
|
291
|
+
"aria-label"?: string;
|
|
292
|
+
/** Optional aria-describedby for accessibility */
|
|
293
|
+
"aria-describedby"?: string;
|
|
294
|
+
/** Radio button group options */
|
|
295
|
+
options: RHFRadioButtonGroupOption[];
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/**
|
|
299
|
+
* A radio button group component that integrates with React Hook Form.
|
|
300
|
+
* Uses buttons instead of traditional radio inputs for a more modern look.
|
|
301
|
+
*
|
|
302
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfradiobuttongroup--docs
|
|
303
|
+
*
|
|
304
|
+
* @example
|
|
305
|
+
* ```tsx
|
|
306
|
+
* <Form>
|
|
307
|
+
* <RHFRadioButtonGroup
|
|
308
|
+
* name="preference"
|
|
309
|
+
* label="Select your preference"
|
|
310
|
+
* options={[
|
|
311
|
+
* { value: "option1", label: "Option 1" },
|
|
312
|
+
* { value: "option2", label: "Option 2" },
|
|
313
|
+
* { value: "option3", label: "Option 3" }
|
|
314
|
+
* ]}
|
|
315
|
+
* />
|
|
316
|
+
* </Form>
|
|
317
|
+
* ```
|
|
318
|
+
*/
|
|
319
|
+
declare function RHFRadioButtonGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFRadioButtonGroupProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
320
|
+
|
|
112
321
|
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
|
113
322
|
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
|
|
114
323
|
declare const useFormField: () => {
|
|
@@ -196,4 +405,4 @@ type FormItemContextValue = {
|
|
|
196
405
|
id: string;
|
|
197
406
|
};
|
|
198
407
|
|
|
199
|
-
export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFTextField, RHFTextarea, useFormField };
|
|
408
|
+
export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFCheckbox, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSwitch, RHFTextField, RHFTextarea, useFormField };
|
package/dist/rhf.d.ts
CHANGED
|
@@ -3,10 +3,15 @@ import * as react_hook_form from 'react-hook-form';
|
|
|
3
3
|
import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { TextareaHTMLAttributes } from 'react';
|
|
6
|
-
import { I as Input } from './
|
|
6
|
+
import { I as Input, C as Checkbox, S as Switch, R as RadioGroup } from './checkbox-DxgDKaHx.js';
|
|
7
7
|
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
8
8
|
import { Slot } from '@radix-ui/react-slot';
|
|
9
9
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
10
|
+
import '@radix-ui/react-switch';
|
|
11
|
+
import 'class-variance-authority/types';
|
|
12
|
+
import 'class-variance-authority';
|
|
13
|
+
import '@radix-ui/react-radio-group';
|
|
14
|
+
import '@radix-ui/react-checkbox';
|
|
10
15
|
|
|
11
16
|
interface RHFTextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Input>, "name"> {
|
|
12
17
|
/** The name of the field in the form */
|
|
@@ -109,6 +114,210 @@ interface RHFTextareaProps<TFieldValues extends FieldValues = FieldValues, TName
|
|
|
109
114
|
*/
|
|
110
115
|
declare function RHFTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, autoResize, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextareaProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
111
116
|
|
|
117
|
+
interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Checkbox>, "name"> {
|
|
118
|
+
/** The name of the field in the form */
|
|
119
|
+
name: TName;
|
|
120
|
+
/** Optional label for the field */
|
|
121
|
+
label?: string;
|
|
122
|
+
/** Optional description text below the field */
|
|
123
|
+
description?: string;
|
|
124
|
+
/** Optional warning text to display */
|
|
125
|
+
warningText?: string;
|
|
126
|
+
/** Whether the field is required */
|
|
127
|
+
required?: boolean;
|
|
128
|
+
/** Whether the field is disabled */
|
|
129
|
+
disabled?: boolean;
|
|
130
|
+
/** Whether the field is read-only */
|
|
131
|
+
readOnly?: boolean;
|
|
132
|
+
/** Optional aria-label for accessibility */
|
|
133
|
+
"aria-label"?: string;
|
|
134
|
+
/** Optional aria-describedby for accessibility */
|
|
135
|
+
"aria-describedby"?: string;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/**
|
|
139
|
+
* A checkbox component that integrates with React Hook Form.
|
|
140
|
+
* Provides form validation, error handling, and accessibility features.
|
|
141
|
+
*
|
|
142
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfcheckbox--docs
|
|
143
|
+
*
|
|
144
|
+
* @example
|
|
145
|
+
* ```tsx
|
|
146
|
+
* <Form>
|
|
147
|
+
* <RHFCheckbox name="terms" label="Accept terms and conditions" />
|
|
148
|
+
* </Form>
|
|
149
|
+
* ```
|
|
150
|
+
*/
|
|
151
|
+
declare function RHFCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFCheckboxProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
152
|
+
|
|
153
|
+
interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof Switch>, "name"> {
|
|
154
|
+
/** The name of the field in the form */
|
|
155
|
+
name: TName;
|
|
156
|
+
/** Optional label for the field */
|
|
157
|
+
label?: string;
|
|
158
|
+
/** Optional description text below the field */
|
|
159
|
+
description?: string;
|
|
160
|
+
/** Optional warning text to display */
|
|
161
|
+
warningText?: string;
|
|
162
|
+
/** Whether the field is required */
|
|
163
|
+
required?: boolean;
|
|
164
|
+
/** Whether the field is disabled */
|
|
165
|
+
disabled?: boolean;
|
|
166
|
+
/** Whether the field is read-only */
|
|
167
|
+
readOnly?: boolean;
|
|
168
|
+
/** Optional aria-label for accessibility */
|
|
169
|
+
"aria-label"?: string;
|
|
170
|
+
/** Optional aria-describedby for accessibility */
|
|
171
|
+
"aria-describedby"?: string;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* A switch component that integrates with React Hook Form.
|
|
176
|
+
* Provides form validation, error handling, and accessibility features.
|
|
177
|
+
*
|
|
178
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfswitch--docs
|
|
179
|
+
*
|
|
180
|
+
* @example
|
|
181
|
+
* ```tsx
|
|
182
|
+
* <Form>
|
|
183
|
+
* <RHFSwitch name="notifications" label="Enable notifications" />
|
|
184
|
+
* </Form>
|
|
185
|
+
* ```
|
|
186
|
+
*/
|
|
187
|
+
declare function RHFSwitch<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFSwitchProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
188
|
+
|
|
189
|
+
interface RHFRadioGroupOption {
|
|
190
|
+
label: string;
|
|
191
|
+
id: string;
|
|
192
|
+
}
|
|
193
|
+
interface RHFRadioGroupWithChildrenProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof RadioGroup>, "name"> {
|
|
194
|
+
/** The name of the field in the form */
|
|
195
|
+
name: TName;
|
|
196
|
+
/** Optional label for the field */
|
|
197
|
+
label?: string;
|
|
198
|
+
/** Optional description text below the field */
|
|
199
|
+
description?: string;
|
|
200
|
+
/** Optional warning text to display */
|
|
201
|
+
warningText?: string;
|
|
202
|
+
/** Whether the field is required */
|
|
203
|
+
required?: boolean;
|
|
204
|
+
/** Whether the field is disabled */
|
|
205
|
+
disabled?: boolean;
|
|
206
|
+
/** Whether the field is read-only */
|
|
207
|
+
readOnly?: boolean;
|
|
208
|
+
/** Optional aria-label for accessibility */
|
|
209
|
+
"aria-label"?: string;
|
|
210
|
+
/** Optional aria-describedby for accessibility */
|
|
211
|
+
"aria-describedby"?: string;
|
|
212
|
+
/** Children must be RadioGroupItem components */
|
|
213
|
+
children: React.ReactNode;
|
|
214
|
+
}
|
|
215
|
+
interface RHFRadioGroupWithOptionsProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof RadioGroup>, "name"> {
|
|
216
|
+
/** The name of the field in the form */
|
|
217
|
+
name: TName;
|
|
218
|
+
/** Optional label for the field */
|
|
219
|
+
label?: string;
|
|
220
|
+
/** radio group options */
|
|
221
|
+
options: RHFRadioGroupOption[];
|
|
222
|
+
/** Optional description text below the field */
|
|
223
|
+
description?: string;
|
|
224
|
+
/** Optional warning text to display */
|
|
225
|
+
warningText?: string;
|
|
226
|
+
/** Whether the field is required */
|
|
227
|
+
required?: boolean;
|
|
228
|
+
/** Whether the field is disabled */
|
|
229
|
+
disabled?: boolean;
|
|
230
|
+
/** Whether the field is read-only */
|
|
231
|
+
readOnly?: boolean;
|
|
232
|
+
/** Optional aria-label for accessibility */
|
|
233
|
+
"aria-label"?: string;
|
|
234
|
+
/** Optional aria-describedby for accessibility */
|
|
235
|
+
"aria-describedby"?: string;
|
|
236
|
+
}
|
|
237
|
+
type RHFRadioGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = RHFRadioGroupWithChildrenProps<TFieldValues, TName> | RHFRadioGroupWithOptionsProps<TFieldValues, TName>;
|
|
238
|
+
|
|
239
|
+
/**
|
|
240
|
+
* A radio group component that integrates with React Hook Form.
|
|
241
|
+
* Provides form validation, error handling, and accessibility features.
|
|
242
|
+
*
|
|
243
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfradiogroup--docs
|
|
244
|
+
*
|
|
245
|
+
* @example
|
|
246
|
+
* ```tsx
|
|
247
|
+
* // Using children
|
|
248
|
+
* <Form>
|
|
249
|
+
* <RHFRadioGroup name="preference" label="Select your preference">
|
|
250
|
+
* <RadioGroupItem value="option1" label="Option 1" />
|
|
251
|
+
* <RadioGroupItem value="option2" label="Option 2" />
|
|
252
|
+
* </RHFRadioGroup>
|
|
253
|
+
* </Form>
|
|
254
|
+
*
|
|
255
|
+
* // Using options prop
|
|
256
|
+
* <Form>
|
|
257
|
+
* <RHFRadioGroup
|
|
258
|
+
* name="preference"
|
|
259
|
+
* label="Select your preference"
|
|
260
|
+
* options={[
|
|
261
|
+
* { id: "option1", label: "Option 1" },
|
|
262
|
+
* { id: "option2", label: "Option 2" }
|
|
263
|
+
* ]}
|
|
264
|
+
* />
|
|
265
|
+
* </Form>
|
|
266
|
+
* ```
|
|
267
|
+
*/
|
|
268
|
+
declare function RHFRadioGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, children, ...other }: RHFRadioGroupProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
269
|
+
|
|
270
|
+
interface RHFRadioButtonGroupOption {
|
|
271
|
+
label: string;
|
|
272
|
+
id: string;
|
|
273
|
+
size?: "default" | "sm" | "lg";
|
|
274
|
+
}
|
|
275
|
+
interface RHFRadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React.ComponentProps<typeof RadioGroup>, "name"> {
|
|
276
|
+
/** The name of the field in the form */
|
|
277
|
+
name: TName;
|
|
278
|
+
/** Optional label for the field */
|
|
279
|
+
label?: string;
|
|
280
|
+
/** Optional description text below the field */
|
|
281
|
+
description?: string;
|
|
282
|
+
/** Optional warning text to display */
|
|
283
|
+
warningText?: string;
|
|
284
|
+
/** Whether the field is required */
|
|
285
|
+
required?: boolean;
|
|
286
|
+
/** Whether the field is disabled */
|
|
287
|
+
disabled?: boolean;
|
|
288
|
+
/** Whether the field is read-only */
|
|
289
|
+
readOnly?: boolean;
|
|
290
|
+
/** Optional aria-label for accessibility */
|
|
291
|
+
"aria-label"?: string;
|
|
292
|
+
/** Optional aria-describedby for accessibility */
|
|
293
|
+
"aria-describedby"?: string;
|
|
294
|
+
/** Radio button group options */
|
|
295
|
+
options: RHFRadioButtonGroupOption[];
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
/**
|
|
299
|
+
* A radio button group component that integrates with React Hook Form.
|
|
300
|
+
* Uses buttons instead of traditional radio inputs for a more modern look.
|
|
301
|
+
*
|
|
302
|
+
* @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfradiobuttongroup--docs
|
|
303
|
+
*
|
|
304
|
+
* @example
|
|
305
|
+
* ```tsx
|
|
306
|
+
* <Form>
|
|
307
|
+
* <RHFRadioButtonGroup
|
|
308
|
+
* name="preference"
|
|
309
|
+
* label="Select your preference"
|
|
310
|
+
* options={[
|
|
311
|
+
* { value: "option1", label: "Option 1" },
|
|
312
|
+
* { value: "option2", label: "Option 2" },
|
|
313
|
+
* { value: "option3", label: "Option 3" }
|
|
314
|
+
* ]}
|
|
315
|
+
* />
|
|
316
|
+
* </Form>
|
|
317
|
+
* ```
|
|
318
|
+
*/
|
|
319
|
+
declare function RHFRadioButtonGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFRadioButtonGroupProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
|
|
320
|
+
|
|
112
321
|
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
|
113
322
|
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
|
|
114
323
|
declare const useFormField: () => {
|
|
@@ -196,4 +405,4 @@ type FormItemContextValue = {
|
|
|
196
405
|
id: string;
|
|
197
406
|
};
|
|
198
407
|
|
|
199
|
-
export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFTextField, RHFTextarea, useFormField };
|
|
408
|
+
export { Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, RHFCheckbox, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSwitch, RHFTextField, RHFTextarea, useFormField };
|
package/dist/rhf.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {a as a$1}from'./chunk-
|
|
1
|
+
import {a as a$1,g,b,c as c$2,e,d,f as f$1}from'./chunk-MOYOCJW6.esm.js';import {c as c$1,b as b$1}from'./chunk-JUZG25DH.esm.js';import {a}from'./chunk-C26U3FL4.esm.js';import {useFormContext,FormProvider,Controller}from'react-hook-form';import*as F from'react';import {Slot}from'@radix-ui/react-slot';import {jsx,jsxs}from'react/jsx-runtime';var oe=FormProvider,U=F.createContext({}),R=({...r})=>jsx(U.Provider,{value:{name:r.name},children:jsx(Controller,{...r})}),k=()=>{let r=F.useContext(U),a=F.useContext(X),{getFieldState:t,formState:i}=useFormContext(),o=t(r.name,i);if(!r)throw new Error("useFormField should be used within <FormField>");let{id:e}=a;return {id:e,name:r.name,formItemId:`${e}-form-item`,formDescriptionId:`${e}-form-item-description`,formMessageId:`${e}-form-item-message`,...o}},X=F.createContext({}),p=F.forwardRef(({className:r,...a$1},t)=>{let i=F.useId();return jsx(X.Provider,{value:{id:i},children:jsx("div",{ref:t,className:a("space-y-2",r),...a$1})})});p.displayName="FormItem";var u=F.forwardRef(({className:r,...a$2},t)=>{let{error:i,formItemId:o}=k();return jsx(a$1,{ref:t,className:a(i&&"text-destructive",r),htmlFor:o,...a$2})});u.displayName="FormLabel";var c=F.forwardRef(({...r},a)=>{let{error:t,formItemId:i,formDescriptionId:o,formMessageId:e}=k();return jsx(Slot,{ref:a,id:i,"aria-describedby":t?`${o} ${e}`:`${o}`,"aria-invalid":!!t,...r})});c.displayName="FormControl";var n=F.forwardRef(({className:r,...a$1},t)=>{let{formDescriptionId:i}=k();return jsx("p",{ref:t,id:i,className:a("text-sm text-muted-foreground",r),...a$1})});n.displayName="FormDescription";var f=F.forwardRef(({className:r,children:a$1,...t},i)=>{let{error:o,formMessageId:e}=k(),m=o?String(o?.message??""):a$1;return m?jsx("p",{ref:i,id:e,className:a("text-sm font-medium text-destructive",r),...t,children:m}):null});f.displayName="FormMessage";function Ce({name:r,label:a$1,description:t,className:i,type:o="text",warningText:e,required:m,disabled:I,readOnly:y,placeholder:h,"aria-label":T,"aria-describedby":x,onBlur:b,...s}){let{control:C}=useFormContext();return jsx(R,{name:r,control:C,render:({field:l,fieldState:{error:d}})=>jsxs(p,{children:[a$1&&jsxs(u,{children:[a$1,m&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),jsx(c,{children:jsx(c$1,{...l,type:o,value:o==="number"&&l.value===0?"":l.value,onChange:g=>{o==="number"?l.onChange(Number(g.target.value)):l.onChange(g.target.value);},onBlur:g=>{o!=="number"&&typeof l.value=="string"&&l.onChange(l.value.trim()),l.onBlur(),b?.(g);},className:a(d&&"border-destructive focus-visible:ring-destructive",i),disabled:I,readOnly:y,required:m,placeholder:h,"aria-label":T,"aria-describedby":x,"aria-invalid":!!d,"aria-required":m,...s})}),t&&jsx(n,{children:t}),d&&jsx(f,{children:d.message}),!d&&e&&jsx("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:e})]})})}var E=F.forwardRef(({className:r,autoResize:a$1=false,...t},i)=>{let o=F.useRef(null);return F.useEffect(()=>{if(!a$1||!o.current)return;let e=o.current,m=()=>{e.style.height="auto",e.style.height=`${e.scrollHeight}px`;};return e.addEventListener("input",m),m(),()=>e.removeEventListener("input",m)},[a$1]),jsx("textarea",{className:a("flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",r),ref:i,...t})});E.displayName="Textarea";function De({name:r,label:a$1,description:t,className:i,warningText:o,required:e,disabled:m,readOnly:I,placeholder:y,autoResize:h,"aria-label":T,"aria-describedby":x,onBlur:b,...s}){let{control:C}=useFormContext();return jsx(R,{name:r,control:C,render:({field:l,fieldState:{error:d}})=>jsxs(p,{children:[a$1&&jsxs(u,{children:[a$1,e&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),jsx(c,{children:jsx(E,{...l,value:l.value,onChange:g=>{l.onChange(g.target.value);},onBlur:g=>{typeof l.value=="string"&&l.onChange(l.value.trim()),l.onBlur(),b?.(g);},className:a(d&&"border-destructive focus-visible:ring-destructive",i),disabled:m,readOnly:I,required:e,placeholder:y,"aria-label":T,"aria-describedby":x,"aria-invalid":!!d,"aria-required":e,autoResize:h,...s})}),t&&jsx(n,{children:t}),d&&jsx(f,{children:d.message}),!d&&o&&jsx("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:o})]})})}function Be({name:r,label:a,description:t,className:i,warningText:o,required:e,disabled:m,readOnly:I,"aria-label":y,"aria-describedby":h,...T}){let{control:x}=useFormContext();return jsx(R,{name:r,control:x,render:({field:b,fieldState:{error:s}})=>jsxs(p,{className:"flex flex-row items-start space-x-3 space-y-0",children:[jsx(c,{children:jsx(g,{checked:b.value,onCheckedChange:b.onChange,disabled:m,"aria-label":y,"aria-describedby":h,"aria-invalid":!!s,"aria-required":e,...T})}),jsxs("div",{className:"space-y-1 leading-none",children:[a&&jsxs(u,{children:[a,e&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),t&&jsx(n,{children:t}),s&&jsx(f,{children:s.message}),!s&&o&&jsx("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:o})]})]})})}function Je({name:r,label:a,description:t,className:i,warningText:o,required:e,disabled:m,readOnly:I,"aria-label":y,"aria-describedby":h,...T}){let{control:x}=useFormContext();return jsx(R,{name:r,control:x,render:({field:b$1,fieldState:{error:s}})=>jsxs(p,{className:"flex flex-row items-start space-x-3 space-y-0",children:[jsx(c,{children:jsx(b,{checked:b$1.value,onCheckedChange:b$1.onChange,disabled:m,"aria-label":y,"aria-describedby":h,"aria-invalid":!!s,"aria-required":e,...T})}),jsxs("div",{className:"space-y-1 leading-none",children:[a&&jsxs(u,{children:[a,e&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),t&&jsx(n,{children:t}),s&&jsx(f,{children:s.message}),!s&&o&&jsx("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:o})]})]})})}function Ze({name:r,label:a,description:t,className:i,warningText:o,required:e$1,disabled:m,readOnly:I,"aria-label":y,"aria-describedby":h,children:T,...x}){let{control:b}=useFormContext(),s="options"in x;return jsx(R,{name:r,control:b,render:({field:C,fieldState:{error:l}})=>jsxs(p,{className:"space-y-3",children:[a&&jsxs(u,{children:[a,e$1&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),jsx(c,{children:jsxs(c$2,{onValueChange:C.onChange,defaultValue:C.value,disabled:m,"aria-label":y,"aria-describedby":h,"aria-invalid":!!l,"aria-required":e$1,...x,children:[s&&x.options.map(d$1=>jsxs(e,{children:[jsx(d,{value:d$1.id,id:d$1.id}),jsx(f$1,{htmlFor:d$1.id,children:d$1.label})]},d$1.id)),!s&&T]})}),t&&jsx(n,{children:t}),l&&jsx(f,{children:l.message}),!l&&o&&jsx("p",{className:"text-sm text-yellow-600 dark:text-yellow-500",role:"alert",children:o})]})})}function ra({name:r,label:a,description:t,className:i,warningText:o,required:e,disabled:m,readOnly:I,"aria-label":y,"aria-describedby":h,options:T,...x}){let{control:b}=useFormContext();return jsx(R,{name:r,control:b,render:({field:s,fieldState:{error:C}})=>jsxs(p,{className:"space-y-3",children:[a&&jsxs(u,{children:[a,e&&jsx("span",{className:"text-destructive ml-1",children:"*"})]}),jsx(c,{children:jsx(c$2,{onValueChange:s.onChange,defaultValue:s.value,disabled:m,"aria-label":y,"aria-describedby":h,"aria-invalid":!!C,"aria-required":e,className:"flex gap-2 p-2 border border-gray-200 rounded-md w-fit",...x,children:T.map(l=>jsx(b$1,{size:l.size??"sm",variant:s.value===l.id?"default":"secondary",onClick:()=>s.onChange(l.id),role:"radio","aria-checked":s.value===l.id,disabled:m,children:l.label},l.id))})}),t&&jsx(n,{children:t}),o&&jsx(n,{className:"text-warning",children:o}),C&&jsx(f,{children:C.message})]})})}export{oe as Form,c as FormControl,n as FormDescription,R as FormField,p as FormItem,u as FormLabel,f as FormMessage,Be as RHFCheckbox,ra as RHFRadioButtonGroup,Ze as RHFRadioGroup,Je as RHFSwitch,Ce as RHFTextField,De as RHFTextarea,k as useFormField};//# sourceMappingURL=rhf.esm.js.map
|
|
2
2
|
//# sourceMappingURL=rhf.esm.js.map
|