@page-speed/forms 0.5.1 → 0.5.3

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.
Files changed (72) hide show
  1. package/README.md +29 -0
  2. package/dist/chunk-232KNGJI.js +207 -0
  3. package/dist/chunk-232KNGJI.js.map +1 -0
  4. package/dist/chunk-24RPM43T.js +373 -0
  5. package/dist/chunk-24RPM43T.js.map +1 -0
  6. package/dist/chunk-27JUYRDE.cjs +173 -0
  7. package/dist/chunk-27JUYRDE.cjs.map +1 -0
  8. package/dist/chunk-5NT5T5XY.js +4136 -0
  9. package/dist/chunk-5NT5T5XY.js.map +1 -0
  10. package/dist/chunk-AVAKC6R7.cjs +236 -0
  11. package/dist/chunk-AVAKC6R7.cjs.map +1 -0
  12. package/dist/chunk-DKLLPKZN.cjs +238 -0
  13. package/dist/chunk-DKLLPKZN.cjs.map +1 -0
  14. package/dist/chunk-EX6CRLKG.cjs +397 -0
  15. package/dist/chunk-EX6CRLKG.cjs.map +1 -0
  16. package/dist/chunk-H6NNFV64.js +127 -0
  17. package/dist/chunk-H6NNFV64.js.map +1 -0
  18. package/dist/chunk-JBEWTBFH.js +217 -0
  19. package/dist/chunk-JBEWTBFH.js.map +1 -0
  20. package/dist/chunk-JBEZLX3H.cjs +138 -0
  21. package/dist/chunk-JBEZLX3H.cjs.map +1 -0
  22. package/dist/chunk-VLGZG2VP.js +150 -0
  23. package/dist/chunk-VLGZG2VP.js.map +1 -0
  24. package/dist/chunk-ZYFTT6DB.cjs +4169 -0
  25. package/dist/chunk-ZYFTT6DB.cjs.map +1 -0
  26. package/dist/core.cjs +23 -722
  27. package/dist/core.cjs.map +1 -1
  28. package/dist/core.d.cts +3 -3
  29. package/dist/core.d.ts +3 -3
  30. package/dist/core.js +3 -705
  31. package/dist/core.js.map +1 -1
  32. package/dist/index.cjs +43 -727
  33. package/dist/index.cjs.map +1 -1
  34. package/dist/index.d.cts +1 -1
  35. package/dist/index.d.ts +1 -1
  36. package/dist/index.js +3 -705
  37. package/dist/index.js.map +1 -1
  38. package/dist/inputs.cjs +44 -4359
  39. package/dist/inputs.cjs.map +1 -1
  40. package/dist/inputs.d.cts +1 -1
  41. package/dist/inputs.d.ts +1 -1
  42. package/dist/inputs.js +2 -4337
  43. package/dist/inputs.js.map +1 -1
  44. package/dist/integration.cjs +574 -9
  45. package/dist/integration.cjs.map +1 -1
  46. package/dist/integration.d.cts +298 -1
  47. package/dist/integration.d.ts +298 -1
  48. package/dist/integration.js +566 -9
  49. package/dist/integration.js.map +1 -1
  50. package/dist/{types-DuX3q6A4.d.cts → types-CnOCn7b3.d.cts} +51 -1
  51. package/dist/{types-DuX3q6A4.d.ts → types-CnOCn7b3.d.ts} +51 -1
  52. package/dist/validation-rules.cjs +75 -231
  53. package/dist/validation-rules.cjs.map +1 -1
  54. package/dist/validation-rules.d.cts +1 -1
  55. package/dist/validation-rules.d.ts +1 -1
  56. package/dist/validation-rules.js +1 -215
  57. package/dist/validation-rules.js.map +1 -1
  58. package/dist/validation-utils.cjs +43 -133
  59. package/dist/validation-utils.cjs.map +1 -1
  60. package/dist/validation-utils.d.cts +1 -1
  61. package/dist/validation-utils.d.ts +1 -1
  62. package/dist/validation-utils.js +1 -125
  63. package/dist/validation-utils.js.map +1 -1
  64. package/dist/validation-valibot.d.cts +1 -1
  65. package/dist/validation-valibot.d.ts +1 -1
  66. package/dist/validation.cjs +115 -364
  67. package/dist/validation.cjs.map +1 -1
  68. package/dist/validation.d.cts +1 -1
  69. package/dist/validation.d.ts +1 -1
  70. package/dist/validation.js +2 -339
  71. package/dist/validation.js.map +1 -1
  72. package/package.json +1 -1
package/dist/core.cjs CHANGED
@@ -1,733 +1,34 @@
1
1
  'use strict';
2
2
 
3
- var React4 = require('react');
4
- var react = require('@legendapp/state/react');
5
- var useMap = require('@opensite/hooks/useMap');
6
- var clsx = require('clsx');
7
- var tailwindMerge = require('tailwind-merge');
8
- var classVarianceAuthority = require('class-variance-authority');
9
- var radixUi = require('radix-ui');
3
+ var chunk27JUYRDE_cjs = require('./chunk-27JUYRDE.cjs');
4
+ var chunkEX6CRLKG_cjs = require('./chunk-EX6CRLKG.cjs');
5
+ require('./chunk-DKLLPKZN.cjs');
10
6
 
11
- function _interopNamespace(e) {
12
- if (e && e.__esModule) return e;
13
- var n = Object.create(null);
14
- if (e) {
15
- Object.keys(e).forEach(function (k) {
16
- if (k !== 'default') {
17
- var d = Object.getOwnPropertyDescriptor(e, k);
18
- Object.defineProperty(n, k, d.get ? d : {
19
- enumerable: true,
20
- get: function () { return e[k]; }
21
- });
22
- }
23
- });
24
- }
25
- n.default = e;
26
- return Object.freeze(n);
27
- }
28
7
 
29
- var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
30
8
 
31
- // src/core/useForm.ts
32
- function useForm(options) {
33
- const {
34
- initialValues,
35
- validationSchema,
36
- validateOn = "onBlur",
37
- revalidateOn = "onChange",
38
- onSubmit,
39
- onError,
40
- debug = false
41
- } = options;
42
- const state$ = react.useObservable({
43
- values: initialValues,
44
- errors: {},
45
- touched: {},
46
- isSubmitting: false,
47
- status: "idle",
48
- initialValues: { ...initialValues },
49
- // Create a copy to prevent reference sharing
50
- hasValidated: {}
51
- });
52
- const validationInProgress = React4.useRef(/* @__PURE__ */ new Set());
53
- const [, fieldMetadataActions] = useMap.useMap();
54
- const validateField = React4.useCallback(
55
- async (field) => {
56
- const validators = validationSchema?.[field];
57
- if (!validators) return void 0;
58
- const fieldKey = String(field);
59
- validationInProgress.current.add(fieldKey);
60
- const currentMeta = fieldMetadataActions.get(fieldKey) || {
61
- validationCount: 0
62
- };
63
- fieldMetadataActions.set(fieldKey, {
64
- lastValidated: Date.now(),
65
- validationCount: currentMeta.validationCount + 1
66
- });
67
- try {
68
- const value = state$.values[field].get();
69
- const allValues = state$.values.get();
70
- const validatorArray = Array.isArray(validators) ? validators : [validators];
71
- for (const validator of validatorArray) {
72
- const error = await validator(value, allValues);
73
- if (error) {
74
- state$.errors[field].set(error);
75
- validationInProgress.current.delete(fieldKey);
76
- return error;
77
- }
78
- }
79
- state$.errors[field].set(void 0);
80
- validationInProgress.current.delete(fieldKey);
81
- return void 0;
82
- } catch (error) {
83
- validationInProgress.current.delete(fieldKey);
84
- const errorMessage = error instanceof Error ? error.message : "Validation error";
85
- state$.errors[field].set(errorMessage);
86
- return errorMessage;
87
- }
88
- },
89
- [validationSchema, state$, fieldMetadataActions]
90
- );
91
- const validateForm = React4.useCallback(async () => {
92
- if (!validationSchema) return {};
93
- const fields = Object.keys(validationSchema);
94
- const errors2 = {};
95
- await Promise.all(
96
- fields.map(async (field) => {
97
- const error = await validateField(field);
98
- if (error) {
99
- errors2[field] = error;
100
- }
101
- })
102
- );
103
- state$.errors.set(errors2);
104
- return errors2;
105
- }, [validationSchema, validateField, state$]);
106
- const setFieldValue = React4.useCallback(
107
- (field, value) => {
108
- state$.values[field].set(value);
109
- const shouldRevalidate = revalidateOn === "onChange" && state$.hasValidated[String(field)].get();
110
- if (shouldRevalidate && validationSchema?.[field]) {
111
- validateField(field);
112
- }
113
- if (debug) {
114
- console.log("[useForm] setFieldValue:", { field, value });
115
- }
116
- },
117
- [state$, revalidateOn, validationSchema, validateField, debug]
118
- );
119
- const setFieldTouched = React4.useCallback(
120
- (field, touched2) => {
121
- state$.touched[field].set(touched2);
122
- if (touched2 && validateOn === "onBlur" && validationSchema?.[field]) {
123
- state$.hasValidated[String(field)].set(true);
124
- validateField(field);
125
- }
126
- if (debug) {
127
- console.log("[useForm] setFieldTouched:", { field, touched: touched2 });
128
- }
129
- },
130
- [state$, validateOn, validationSchema, validateField, debug]
131
- );
132
- const resetForm = React4.useCallback(() => {
133
- state$.values.set(state$.initialValues.get());
134
- state$.errors.set({});
135
- state$.touched.set({});
136
- state$.isSubmitting.set(false);
137
- state$.status.set("idle");
138
- state$.hasValidated.set({});
139
- fieldMetadataActions.clear();
140
- if (debug) {
141
- console.log("[useForm] Form reset");
142
- }
143
- }, [state$, fieldMetadataActions, debug]);
144
- const handleSubmit = React4.useCallback(
145
- async (e) => {
146
- e?.preventDefault();
147
- if (debug) {
148
- console.log("[useForm] handleSubmit started");
149
- }
150
- state$.isSubmitting.set(true);
151
- state$.status.set("submitting");
152
- try {
153
- const errors2 = await validateForm();
154
- const hasErrors = Object.keys(errors2).length > 0;
155
- if (hasErrors) {
156
- state$.status.set("error");
157
- onError?.(errors2);
158
- if (debug) {
159
- console.log("[useForm] Validation errors:", errors2);
160
- }
161
- return;
162
- }
163
- const helpers = {
164
- setValues: (values2) => {
165
- if (typeof values2 === "function") {
166
- state$.values.set(values2(state$.values.get()));
167
- } else {
168
- state$.values.set(values2);
169
- }
170
- },
171
- setFieldValue,
172
- setErrors: (errors3) => state$.errors.set(errors3),
173
- setFieldError: (field, error) => state$.errors[field].set(error),
174
- setTouched: (touched2) => state$.touched.set(touched2),
175
- setFieldTouched,
176
- setSubmitting: (submitting) => state$.isSubmitting.set(submitting),
177
- resetForm
178
- };
179
- await onSubmit(state$.values.get(), helpers);
180
- state$.status.set("success");
181
- if (debug) {
182
- console.log("[useForm] Submit successful");
183
- }
184
- } catch (error) {
185
- state$.status.set("error");
186
- if (debug) {
187
- console.error("[useForm] Submit error:", error);
188
- }
189
- throw error;
190
- } finally {
191
- state$.isSubmitting.set(false);
192
- }
193
- },
194
- [
195
- state$,
196
- validateForm,
197
- onSubmit,
198
- onError,
199
- setFieldValue,
200
- setFieldTouched,
201
- resetForm,
202
- debug
203
- ]
204
- );
205
- const getFieldProps = React4.useCallback(
206
- (field) => {
207
- return {
208
- name: String(field),
209
- value: state$.values[field].get(),
210
- onChange: (value) => setFieldValue(field, value),
211
- onBlur: () => setFieldTouched(field, true)
212
- };
213
- },
214
- [state$, setFieldValue, setFieldTouched]
215
- );
216
- const getFieldMeta = React4.useCallback(
217
- (field) => {
218
- const fieldKey = String(field);
219
- const metadata = fieldMetadataActions.get(fieldKey);
220
- return {
221
- error: state$.errors[field].get(),
222
- touched: state$.touched[field].get() ?? false,
223
- isDirty: state$.values[field].get() !== state$.initialValues[field].get(),
224
- isValidating: validationInProgress.current.has(fieldKey),
225
- // Additional metadata from @opensite/hooks
226
- validationCount: metadata?.validationCount,
227
- lastValidated: metadata?.lastValidated
228
- };
229
- },
230
- [state$, fieldMetadataActions]
231
- );
232
- const values = react.useSelector(() => state$.values.get());
233
- const errors = react.useSelector(() => state$.errors.get());
234
- const touched = react.useSelector(() => state$.touched.get());
235
- const isSubmitting = react.useSelector(() => state$.isSubmitting.get());
236
- const status = react.useSelector(() => state$.status.get());
237
- const isValid = react.useSelector(() => Object.keys(state$.errors.get()).length === 0);
238
- const isDirty = react.useSelector(() => {
239
- const currentValues = state$.values.get();
240
- const initialValues2 = state$.initialValues.get();
241
- return Object.keys(currentValues).some(
242
- (key) => currentValues[key] !== initialValues2[key]
243
- );
244
- });
245
- return {
246
- // State
247
- values,
248
- errors,
249
- touched,
250
- isSubmitting,
251
- isValid,
252
- isDirty,
253
- status,
254
- // Actions
255
- handleSubmit,
256
- setValues: (values2) => {
257
- if (typeof values2 === "function") {
258
- state$.values.set(values2(state$.values.get()));
259
- } else {
260
- state$.values.set(values2);
261
- }
262
- },
263
- setFieldValue,
264
- setErrors: (errors2) => state$.errors.set(errors2),
265
- setFieldError: (field, error) => state$.errors[field].set(error),
266
- setTouched: (touched2) => state$.touched.set(touched2),
267
- setFieldTouched,
268
- validateForm,
269
- validateField,
270
- resetForm,
271
- getFieldProps,
272
- getFieldMeta
273
- };
274
- }
275
- var FormContext = React4__namespace.createContext(null);
276
- FormContext.displayName = "FormContext";
277
-
278
- // src/core/useField.ts
279
- function useField(options) {
280
- const { name, validate, transform } = options;
281
- const form = React4.useContext(FormContext);
282
- if (!form) {
283
- throw new Error(
284
- "useField must be used within a FormContext. Wrap your component with <Form> or use useForm's getFieldProps instead."
285
- );
286
- }
287
- const baseFieldProps = form.getFieldProps(name);
288
- const field = {
289
- ...baseFieldProps,
290
- value: baseFieldProps.value,
291
- onChange: (value) => {
292
- const transformedValue = transform ? transform(value) : value;
293
- baseFieldProps.onChange(transformedValue);
294
- if (validate) {
295
- const result = validate(transformedValue, form.values);
296
- if (result instanceof Promise) {
297
- result.then((error) => {
298
- if (error !== void 0) {
299
- form.setFieldError(name, error);
300
- }
301
- });
302
- } else if (result !== void 0) {
303
- form.setFieldError(name, result);
304
- }
305
- }
306
- }
307
- };
308
- const meta = form.getFieldMeta(name);
309
- const helpers = {
310
- setValue: React4.useCallback(
311
- (value) => {
312
- const transformedValue = transform ? transform(value) : value;
313
- form.setFieldValue(name, transformedValue);
314
- },
315
- [name, transform, form]
316
- ),
317
- setTouched: React4.useCallback(
318
- (touched) => {
319
- form.setFieldTouched(name, touched);
320
- },
321
- [name, form]
322
- ),
323
- setError: React4.useCallback(
324
- (error) => {
325
- form.setFieldError(name, error);
326
- },
327
- [name, form]
328
- )
329
- };
330
- return {
331
- field,
332
- meta,
333
- helpers
334
- };
335
- }
336
- function cn(...inputs) {
337
- return tailwindMerge.twMerge(clsx.clsx(inputs));
338
- }
339
-
340
- // src/core/form-feedback.tsx
341
- function renderMessage(message, fallbackClassName, className) {
342
- if (typeof message === "string") {
343
- return /* @__PURE__ */ React4__namespace.createElement(
344
- "p",
345
- {
346
- className: cn(
347
- "text-sm font-medium text-center text-balance",
348
- className
349
- )
350
- },
351
- message
352
- );
353
- }
354
- return /* @__PURE__ */ React4__namespace.createElement("div", { className: cn(fallbackClassName, className) }, message);
355
- }
356
- function FormFeedback({
357
- successMessage,
358
- submissionError,
359
- successMessageClassName,
360
- errorMessageClassName
361
- }) {
362
- if (!successMessage && !submissionError) {
363
- return null;
364
- }
365
- return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, successMessage ? /* @__PURE__ */ React4__namespace.createElement(
366
- "div",
367
- {
368
- className: cn(
369
- "rounded-md border border-primary bg-primary px-4 py-3 shadow-sm",
370
- successMessageClassName
371
- ),
372
- role: "status",
373
- "aria-live": "polite"
374
- },
375
- renderMessage(
376
- successMessage,
377
- "text-primary-foreground",
378
- "text-primary-foreground"
379
- )
380
- ) : null, submissionError ? /* @__PURE__ */ React4__namespace.createElement(
381
- "div",
382
- {
383
- className: cn(
384
- "rounded-md border border-destructive bg-destructive px-4 py-3 shadow-sm",
385
- errorMessageClassName
386
- ),
387
- role: "alert",
388
- "aria-live": "assertive"
389
- },
390
- renderMessage(
391
- submissionError,
392
- "text-destructive-foreground",
393
- "text-destructive-foreground"
394
- )
395
- ) : null);
396
- }
397
- FormFeedback.displayName = "FormFeedback";
398
- var buttonVariants = classVarianceAuthority.cva(
399
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
400
- {
401
- variants: {
402
- variant: {
403
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
404
- destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20",
405
- outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
406
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
407
- ghost: "hover:bg-accent hover:text-accent-foreground",
408
- link: "text-primary underline-offset-4 hover:underline"
409
- },
410
- size: {
411
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
412
- xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
413
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
414
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
415
- icon: "size-9",
416
- "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
417
- "icon-sm": "size-8",
418
- "icon-lg": "size-10"
419
- }
420
- },
421
- defaultVariants: {
422
- variant: "default",
423
- size: "default"
424
- }
425
- }
426
- );
427
- function Button({
428
- className,
429
- variant = "default",
430
- size = "default",
431
- asChild = false,
432
- ...props
433
- }) {
434
- const Comp = asChild ? radixUi.Slot.Root : "button";
435
- return /* @__PURE__ */ React4__namespace.createElement(
436
- Comp,
437
- {
438
- "data-slot": "button",
439
- "data-variant": variant,
440
- "data-size": size,
441
- className: cn(buttonVariants({ variant, size, className })),
442
- ...props
443
- }
444
- );
445
- }
446
-
447
- // src/core/Form.tsx
448
- function Form({
449
- form,
450
- children,
451
- className,
452
- action,
453
- method = "post",
454
- noValidate = true,
455
- submissionConfig,
456
- successMessage,
457
- submissionError,
458
- successMessageClassName,
459
- errorMessageClassName,
460
- onNewSubmission,
461
- ...props
462
- }) {
463
- const handleFormSubmit = React4__namespace.useCallback(
464
- async (e) => {
465
- try {
466
- await form.handleSubmit(e);
467
- } catch {
468
- }
469
- },
470
- [form]
471
- );
472
- const behavior = submissionConfig?.behavior || "showConfirmation";
473
- const shouldManageSubmissionUi = submissionConfig !== void 0 || successMessage !== void 0 || successMessageClassName !== void 0 || errorMessageClassName !== void 0 || submissionError != null || onNewSubmission !== void 0;
474
- const hasSubmissionError = Boolean(submissionError);
475
- const isSubmissionSuccessful = shouldManageSubmissionUi && form.status === "success" && !hasSubmissionError;
476
- const defaultSuccessMessage = behavior === "redirect" ? "Form submitted successfully. Redirecting..." : "Thank you. Your form has been submitted successfully.";
477
- const resolvedSuccessMessage = successMessage ?? defaultSuccessMessage;
478
- const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(submissionConfig?.customComponent);
479
- const newSubmissionAction = submissionConfig?.newFormSubmissionAction;
480
- const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
481
- const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
482
- const handleNewSubmission = React4__namespace.useCallback(() => {
483
- form.resetForm();
484
- onNewSubmission?.();
485
- }, [form, onNewSubmission]);
486
- return /* @__PURE__ */ React4__namespace.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React4__namespace.createElement(
487
- "form",
488
- {
489
- onSubmit: handleFormSubmit,
490
- action,
491
- method,
492
- noValidate,
493
- className,
494
- ...props
495
- },
496
- isSubmissionSuccessful ? /* @__PURE__ */ React4__namespace.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? submissionConfig?.customComponent : /* @__PURE__ */ React4__namespace.createElement(
497
- FormFeedback,
498
- {
499
- successMessage: resolvedSuccessMessage,
500
- successMessageClassName
501
- }
502
- ), showNewSubmissionAction ? /* @__PURE__ */ React4__namespace.createElement(
503
- Button,
504
- {
505
- type: "button",
506
- variant: "outline",
507
- onClick: handleNewSubmission
508
- },
509
- newSubmissionLabel
510
- ) : null) : /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, children, submissionError ? /* @__PURE__ */ React4__namespace.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React4__namespace.createElement(
511
- FormFeedback,
512
- {
513
- submissionError,
514
- errorMessageClassName
515
- }
516
- )) : null)
517
- ));
518
- }
519
- Form.displayName = "Form";
520
- function Label({
521
- className,
522
- ...props
523
- }) {
524
- return /* @__PURE__ */ React4__namespace.createElement(
525
- radixUi.Label.Root,
526
- {
527
- "data-slot": "label",
528
- className: cn(
529
- "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
530
- className
531
- ),
532
- ...props
533
- }
534
- );
535
- }
536
-
537
- // src/components/ui/field.tsx
538
- var Field = React4__namespace.forwardRef(
539
- ({ className, orientation = "vertical", invalid = false, ...props }, ref) => {
540
- return /* @__PURE__ */ React4__namespace.createElement(
541
- "div",
542
- {
543
- ref,
544
- "data-slot": "field",
545
- "data-orientation": orientation,
546
- "data-invalid": invalid || void 0,
547
- className: cn(
548
- "flex",
549
- orientation === "horizontal" ? "items-center gap-2" : "flex-col gap-1.5",
550
- className
551
- ),
552
- ...props
553
- }
554
- );
555
- }
556
- );
557
- Field.displayName = "Field";
558
- var FieldGroup = React4__namespace.forwardRef(({ className, ...props }, ref) => {
559
- return /* @__PURE__ */ React4__namespace.createElement(
560
- "div",
561
- {
562
- ref,
563
- "data-slot": "field-group",
564
- className: cn("flex flex-col gap-4", className),
565
- ...props
566
- }
567
- );
9
+ Object.defineProperty(exports, "Form", {
10
+ enumerable: true,
11
+ get: function () { return chunk27JUYRDE_cjs.Form; }
568
12
  });
569
- FieldGroup.displayName = "FieldGroup";
570
- var FieldLabel = React4__namespace.forwardRef(({ className, required, children, ...props }, ref) => {
571
- return /* @__PURE__ */ React4__namespace.createElement(
572
- Label,
573
- {
574
- ref,
575
- "data-slot": "field-label",
576
- className: cn(
577
- "text-sm font-medium leading-none select-none",
578
- "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
579
- className
580
- ),
581
- ...props
582
- },
583
- children,
584
- required && /* @__PURE__ */ React4__namespace.createElement("span", { className: "text-destructive ml-1" }, "*")
585
- );
13
+ Object.defineProperty(exports, "FormFeedback", {
14
+ enumerable: true,
15
+ get: function () { return chunk27JUYRDE_cjs.FormFeedback; }
586
16
  });
587
- FieldLabel.displayName = "FieldLabel";
588
- var FieldDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => {
589
- return /* @__PURE__ */ React4__namespace.createElement(
590
- "p",
591
- {
592
- ref,
593
- "data-slot": "field-description",
594
- className: cn("text-sm opacity-70", className),
595
- ...props
596
- }
597
- );
17
+ Object.defineProperty(exports, "Field", {
18
+ enumerable: true,
19
+ get: function () { return chunkEX6CRLKG_cjs.Field; }
598
20
  });
599
- FieldDescription.displayName = "FieldDescription";
600
- var FieldError = React4__namespace.forwardRef(({ className, ...props }, ref) => {
601
- return /* @__PURE__ */ React4__namespace.createElement(
602
- "p",
603
- {
604
- ref,
605
- "data-slot": "field-error",
606
- role: "alert",
607
- "aria-live": "polite",
608
- className: cn("text-sm text-destructive", className),
609
- ...props
610
- }
611
- );
21
+ Object.defineProperty(exports, "FormContext", {
22
+ enumerable: true,
23
+ get: function () { return chunkEX6CRLKG_cjs.FormContext; }
24
+ });
25
+ Object.defineProperty(exports, "useField", {
26
+ enumerable: true,
27
+ get: function () { return chunkEX6CRLKG_cjs.useField; }
28
+ });
29
+ Object.defineProperty(exports, "useForm", {
30
+ enumerable: true,
31
+ get: function () { return chunkEX6CRLKG_cjs.useForm; }
612
32
  });
613
- FieldError.displayName = "FieldError";
614
-
615
- // src/core/field-feedback.tsx
616
- var FieldFeedback = ({
617
- errorId,
618
- errorClassName,
619
- error,
620
- shouldRenderError
621
- }) => {
622
- const errorText = Array.isArray(error) ? error.join(", ") : error;
623
- if (!errorText || !shouldRenderError) return null;
624
- return /* @__PURE__ */ React4__namespace.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
625
- };
626
- var LabelGroup = ({
627
- labelHtmlFor,
628
- required = false,
629
- variant = "label",
630
- secondaryId,
631
- secondary,
632
- primary,
633
- primaryClassName,
634
- secondaryClassName
635
- }) => {
636
- const primaryClasses = cn(
637
- "text-sm font-medium leading-snug",
638
- variant === "legend" ? "mb-1.5" : "mb-1 block",
639
- primaryClassName
640
- );
641
- const requiredIndicator = required && variant !== "label" ? /* @__PURE__ */ React4__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
642
- let primaryElement = null;
643
- if (primary) {
644
- if (variant === "label") {
645
- primaryElement = /* @__PURE__ */ React4__namespace.createElement(
646
- FieldLabel,
647
- {
648
- htmlFor: labelHtmlFor,
649
- required,
650
- className: primaryClasses
651
- },
652
- primary
653
- );
654
- } else if (variant === "legend") {
655
- primaryElement = /* @__PURE__ */ React4__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
656
- } else {
657
- primaryElement = /* @__PURE__ */ React4__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
658
- }
659
- }
660
- const secondaryElement = secondary ? /* @__PURE__ */ React4__namespace.createElement(
661
- FieldDescription,
662
- {
663
- id: secondaryId,
664
- className: cn("leading-normal font-normal", secondaryClassName)
665
- },
666
- secondary
667
- ) : null;
668
- if (!primaryElement && !secondaryElement) return null;
669
- if (variant === "legend") {
670
- return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, primaryElement, secondaryElement);
671
- }
672
- return /* @__PURE__ */ React4__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
673
- };
674
-
675
- // src/core/Field.tsx
676
- function Field2({
677
- name,
678
- label,
679
- description,
680
- children,
681
- showError = true,
682
- className,
683
- errorClassName,
684
- required = false,
685
- validate
686
- }) {
687
- const fieldState = useField({ name, validate });
688
- const { meta } = fieldState;
689
- const hasError = React4__namespace.useMemo(() => {
690
- return showError && meta.touched && meta.error ? true : false;
691
- }, [meta?.touched, meta?.error, showError]);
692
- const errorId = `${name}-error`;
693
- const descriptionId = `${name}-description`;
694
- return /* @__PURE__ */ React4__namespace.createElement(
695
- Field,
696
- {
697
- className,
698
- "data-field": name,
699
- invalid: hasError
700
- },
701
- /* @__PURE__ */ React4__namespace.createElement(
702
- LabelGroup,
703
- {
704
- labelHtmlFor: name,
705
- required,
706
- variant: "label",
707
- secondaryId: descriptionId,
708
- secondary: description,
709
- primary: label
710
- }
711
- ),
712
- /* @__PURE__ */ React4__namespace.createElement("div", { "data-slot": "field-control" }, typeof children === "function" ? children(fieldState) : children),
713
- /* @__PURE__ */ React4__namespace.createElement(
714
- FieldFeedback,
715
- {
716
- errorId,
717
- errorClassName,
718
- shouldRenderError: hasError,
719
- error: meta.error
720
- }
721
- )
722
- );
723
- }
724
- Field2.displayName = "Field";
725
-
726
- exports.Field = Field2;
727
- exports.Form = Form;
728
- exports.FormContext = FormContext;
729
- exports.FormFeedback = FormFeedback;
730
- exports.useField = useField;
731
- exports.useForm = useForm;
732
33
  //# sourceMappingURL=core.cjs.map
733
34
  //# sourceMappingURL=core.cjs.map