@page-speed/forms 0.5.2 → 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 (53) hide show
  1. package/dist/chunk-232KNGJI.js +207 -0
  2. package/dist/chunk-232KNGJI.js.map +1 -0
  3. package/dist/chunk-24RPM43T.js +373 -0
  4. package/dist/chunk-24RPM43T.js.map +1 -0
  5. package/dist/chunk-27JUYRDE.cjs +173 -0
  6. package/dist/chunk-27JUYRDE.cjs.map +1 -0
  7. package/dist/chunk-5NT5T5XY.js +4136 -0
  8. package/dist/chunk-5NT5T5XY.js.map +1 -0
  9. package/dist/chunk-AVAKC6R7.cjs +236 -0
  10. package/dist/chunk-AVAKC6R7.cjs.map +1 -0
  11. package/dist/chunk-DKLLPKZN.cjs +238 -0
  12. package/dist/chunk-DKLLPKZN.cjs.map +1 -0
  13. package/dist/chunk-EX6CRLKG.cjs +397 -0
  14. package/dist/chunk-EX6CRLKG.cjs.map +1 -0
  15. package/dist/chunk-H6NNFV64.js +127 -0
  16. package/dist/chunk-H6NNFV64.js.map +1 -0
  17. package/dist/chunk-JBEWTBFH.js +217 -0
  18. package/dist/chunk-JBEWTBFH.js.map +1 -0
  19. package/dist/chunk-JBEZLX3H.cjs +138 -0
  20. package/dist/chunk-JBEZLX3H.cjs.map +1 -0
  21. package/dist/chunk-VLGZG2VP.js +150 -0
  22. package/dist/chunk-VLGZG2VP.js.map +1 -0
  23. package/dist/chunk-ZYFTT6DB.cjs +4169 -0
  24. package/dist/chunk-ZYFTT6DB.cjs.map +1 -0
  25. package/dist/core.cjs +23 -733
  26. package/dist/core.cjs.map +1 -1
  27. package/dist/core.js +3 -716
  28. package/dist/core.js.map +1 -1
  29. package/dist/index.cjs +43 -738
  30. package/dist/index.cjs.map +1 -1
  31. package/dist/index.js +3 -716
  32. package/dist/index.js.map +1 -1
  33. package/dist/inputs.cjs +44 -4359
  34. package/dist/inputs.cjs.map +1 -1
  35. package/dist/inputs.js +2 -4337
  36. package/dist/inputs.js.map +1 -1
  37. package/dist/integration.cjs +51 -4645
  38. package/dist/integration.cjs.map +1 -1
  39. package/dist/integration.js +37 -4631
  40. package/dist/integration.js.map +1 -1
  41. package/dist/validation-rules.cjs +75 -231
  42. package/dist/validation-rules.cjs.map +1 -1
  43. package/dist/validation-rules.js +1 -215
  44. package/dist/validation-rules.js.map +1 -1
  45. package/dist/validation-utils.cjs +43 -133
  46. package/dist/validation-utils.cjs.map +1 -1
  47. package/dist/validation-utils.js +1 -125
  48. package/dist/validation-utils.js.map +1 -1
  49. package/dist/validation.cjs +115 -364
  50. package/dist/validation.cjs.map +1 -1
  51. package/dist/validation.js +2 -339
  52. package/dist/validation.js.map +1 -1
  53. package/package.json +1 -1
package/dist/core.cjs CHANGED
@@ -1,744 +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,
454
- noValidate = true,
455
- submissionConfig,
456
- successMessage,
457
- submissionError,
458
- successMessageClassName,
459
- errorMessageClassName,
460
- onNewSubmission,
461
- notificationConfig,
462
- styleConfig,
463
- formConfig,
464
- ...props
465
- }) {
466
- const handleFormSubmit = React4__namespace.useCallback(
467
- async (e) => {
468
- try {
469
- await form.handleSubmit(e);
470
- } catch {
471
- }
472
- },
473
- [form]
474
- );
475
- const resolvedClassName = className ?? styleConfig?.formClassName;
476
- const resolvedAction = action ?? formConfig?.endpoint;
477
- const resolvedMethod = method ?? formConfig?.method ?? "post";
478
- const resolvedSubmissionConfig = submissionConfig ?? formConfig?.submissionConfig;
479
- const resolvedSuccessMessage = successMessage ?? notificationConfig?.successMessage;
480
- const resolvedSubmissionError = submissionError ?? notificationConfig?.submissionError;
481
- const resolvedSuccessMessageClassName = successMessageClassName ?? styleConfig?.successMessageClassName;
482
- const resolvedErrorMessageClassName = errorMessageClassName ?? styleConfig?.errorMessageClassName;
483
- const behavior = resolvedSubmissionConfig?.behavior || "showConfirmation";
484
- const shouldManageSubmissionUi = resolvedSubmissionConfig !== void 0 || resolvedSuccessMessage !== void 0 || resolvedSuccessMessageClassName !== void 0 || resolvedErrorMessageClassName !== void 0 || resolvedSubmissionError != null || onNewSubmission !== void 0;
485
- const hasSubmissionError = Boolean(resolvedSubmissionError);
486
- const isSubmissionSuccessful = shouldManageSubmissionUi && form.status === "success" && !hasSubmissionError;
487
- const defaultSuccessMessage = behavior === "redirect" ? "Form submitted successfully. Redirecting..." : "Thank you. Your form has been submitted successfully.";
488
- const finalSuccessMessage = resolvedSuccessMessage ?? defaultSuccessMessage;
489
- const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(resolvedSubmissionConfig?.customComponent);
490
- const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;
491
- const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
492
- const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
493
- const handleNewSubmission = React4__namespace.useCallback(() => {
494
- form.resetForm();
495
- onNewSubmission?.();
496
- }, [form, onNewSubmission]);
497
- return /* @__PURE__ */ React4__namespace.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React4__namespace.createElement(
498
- "form",
499
- {
500
- onSubmit: handleFormSubmit,
501
- action: resolvedAction,
502
- method: resolvedMethod,
503
- noValidate,
504
- className: resolvedClassName,
505
- ...props
506
- },
507
- isSubmissionSuccessful ? /* @__PURE__ */ React4__namespace.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? resolvedSubmissionConfig?.customComponent : /* @__PURE__ */ React4__namespace.createElement(
508
- FormFeedback,
509
- {
510
- successMessage: finalSuccessMessage,
511
- successMessageClassName: resolvedSuccessMessageClassName
512
- }
513
- ), showNewSubmissionAction ? /* @__PURE__ */ React4__namespace.createElement(
514
- Button,
515
- {
516
- type: "button",
517
- variant: "outline",
518
- onClick: handleNewSubmission
519
- },
520
- newSubmissionLabel
521
- ) : null) : /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, children, resolvedSubmissionError ? /* @__PURE__ */ React4__namespace.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React4__namespace.createElement(
522
- FormFeedback,
523
- {
524
- submissionError: resolvedSubmissionError,
525
- errorMessageClassName: resolvedErrorMessageClassName
526
- }
527
- )) : null)
528
- ));
529
- }
530
- Form.displayName = "Form";
531
- function Label({
532
- className,
533
- ...props
534
- }) {
535
- return /* @__PURE__ */ React4__namespace.createElement(
536
- radixUi.Label.Root,
537
- {
538
- "data-slot": "label",
539
- className: cn(
540
- "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",
541
- className
542
- ),
543
- ...props
544
- }
545
- );
546
- }
547
-
548
- // src/components/ui/field.tsx
549
- var Field = React4__namespace.forwardRef(
550
- ({ className, orientation = "vertical", invalid = false, ...props }, ref) => {
551
- return /* @__PURE__ */ React4__namespace.createElement(
552
- "div",
553
- {
554
- ref,
555
- "data-slot": "field",
556
- "data-orientation": orientation,
557
- "data-invalid": invalid || void 0,
558
- className: cn(
559
- "flex",
560
- orientation === "horizontal" ? "items-center gap-2" : "flex-col gap-1.5",
561
- className
562
- ),
563
- ...props
564
- }
565
- );
566
- }
567
- );
568
- Field.displayName = "Field";
569
- var FieldGroup = React4__namespace.forwardRef(({ className, ...props }, ref) => {
570
- return /* @__PURE__ */ React4__namespace.createElement(
571
- "div",
572
- {
573
- ref,
574
- "data-slot": "field-group",
575
- className: cn("flex flex-col gap-4", className),
576
- ...props
577
- }
578
- );
9
+ Object.defineProperty(exports, "Form", {
10
+ enumerable: true,
11
+ get: function () { return chunk27JUYRDE_cjs.Form; }
579
12
  });
580
- FieldGroup.displayName = "FieldGroup";
581
- var FieldLabel = React4__namespace.forwardRef(({ className, required, children, ...props }, ref) => {
582
- return /* @__PURE__ */ React4__namespace.createElement(
583
- Label,
584
- {
585
- ref,
586
- "data-slot": "field-label",
587
- className: cn(
588
- "text-sm font-medium leading-none select-none",
589
- "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
590
- className
591
- ),
592
- ...props
593
- },
594
- children,
595
- required && /* @__PURE__ */ React4__namespace.createElement("span", { className: "text-destructive ml-1" }, "*")
596
- );
13
+ Object.defineProperty(exports, "FormFeedback", {
14
+ enumerable: true,
15
+ get: function () { return chunk27JUYRDE_cjs.FormFeedback; }
597
16
  });
598
- FieldLabel.displayName = "FieldLabel";
599
- var FieldDescription = React4__namespace.forwardRef(({ className, ...props }, ref) => {
600
- return /* @__PURE__ */ React4__namespace.createElement(
601
- "p",
602
- {
603
- ref,
604
- "data-slot": "field-description",
605
- className: cn("text-sm opacity-70", className),
606
- ...props
607
- }
608
- );
17
+ Object.defineProperty(exports, "Field", {
18
+ enumerable: true,
19
+ get: function () { return chunkEX6CRLKG_cjs.Field; }
609
20
  });
610
- FieldDescription.displayName = "FieldDescription";
611
- var FieldError = React4__namespace.forwardRef(({ className, ...props }, ref) => {
612
- return /* @__PURE__ */ React4__namespace.createElement(
613
- "p",
614
- {
615
- ref,
616
- "data-slot": "field-error",
617
- role: "alert",
618
- "aria-live": "polite",
619
- className: cn("text-sm text-destructive", className),
620
- ...props
621
- }
622
- );
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; }
623
32
  });
624
- FieldError.displayName = "FieldError";
625
-
626
- // src/core/field-feedback.tsx
627
- var FieldFeedback = ({
628
- errorId,
629
- errorClassName,
630
- error,
631
- shouldRenderError
632
- }) => {
633
- const errorText = Array.isArray(error) ? error.join(", ") : error;
634
- if (!errorText || !shouldRenderError) return null;
635
- return /* @__PURE__ */ React4__namespace.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
636
- };
637
- var LabelGroup = ({
638
- labelHtmlFor,
639
- required = false,
640
- variant = "label",
641
- secondaryId,
642
- secondary,
643
- primary,
644
- primaryClassName,
645
- secondaryClassName
646
- }) => {
647
- const primaryClasses = cn(
648
- "text-sm font-medium leading-snug",
649
- variant === "legend" ? "mb-1.5" : "mb-1 block",
650
- primaryClassName
651
- );
652
- const requiredIndicator = required && variant !== "label" ? /* @__PURE__ */ React4__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
653
- let primaryElement = null;
654
- if (primary) {
655
- if (variant === "label") {
656
- primaryElement = /* @__PURE__ */ React4__namespace.createElement(
657
- FieldLabel,
658
- {
659
- htmlFor: labelHtmlFor,
660
- required,
661
- className: primaryClasses
662
- },
663
- primary
664
- );
665
- } else if (variant === "legend") {
666
- primaryElement = /* @__PURE__ */ React4__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
667
- } else {
668
- primaryElement = /* @__PURE__ */ React4__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
669
- }
670
- }
671
- const secondaryElement = secondary ? /* @__PURE__ */ React4__namespace.createElement(
672
- FieldDescription,
673
- {
674
- id: secondaryId,
675
- className: cn("leading-normal font-normal", secondaryClassName)
676
- },
677
- secondary
678
- ) : null;
679
- if (!primaryElement && !secondaryElement) return null;
680
- if (variant === "legend") {
681
- return /* @__PURE__ */ React4__namespace.createElement(React4__namespace.Fragment, null, primaryElement, secondaryElement);
682
- }
683
- return /* @__PURE__ */ React4__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
684
- };
685
-
686
- // src/core/Field.tsx
687
- function Field2({
688
- name,
689
- label,
690
- description,
691
- children,
692
- showError = true,
693
- className,
694
- errorClassName,
695
- required = false,
696
- validate
697
- }) {
698
- const fieldState = useField({ name, validate });
699
- const { meta } = fieldState;
700
- const hasError = React4__namespace.useMemo(() => {
701
- return showError && meta.touched && meta.error ? true : false;
702
- }, [meta?.touched, meta?.error, showError]);
703
- const errorId = `${name}-error`;
704
- const descriptionId = `${name}-description`;
705
- return /* @__PURE__ */ React4__namespace.createElement(
706
- Field,
707
- {
708
- className,
709
- "data-field": name,
710
- invalid: hasError
711
- },
712
- /* @__PURE__ */ React4__namespace.createElement(
713
- LabelGroup,
714
- {
715
- labelHtmlFor: name,
716
- required,
717
- variant: "label",
718
- secondaryId: descriptionId,
719
- secondary: description,
720
- primary: label
721
- }
722
- ),
723
- /* @__PURE__ */ React4__namespace.createElement("div", { "data-slot": "field-control" }, typeof children === "function" ? children(fieldState) : children),
724
- /* @__PURE__ */ React4__namespace.createElement(
725
- FieldFeedback,
726
- {
727
- errorId,
728
- errorClassName,
729
- shouldRenderError: hasError,
730
- error: meta.error
731
- }
732
- )
733
- );
734
- }
735
- Field2.displayName = "Field";
736
-
737
- exports.Field = Field2;
738
- exports.Form = Form;
739
- exports.FormContext = FormContext;
740
- exports.FormFeedback = FormFeedback;
741
- exports.useField = useField;
742
- exports.useForm = useForm;
743
33
  //# sourceMappingURL=core.cjs.map
744
34
  //# sourceMappingURL=core.cjs.map