@page-speed/forms 0.6.1 → 0.6.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.
- package/dist/{FormContext-DaRyEYnF.d.ts → FormContext-Db0L3Kwv.d.ts} +1 -1
- package/dist/{FormContext-KsjKSot3.d.cts → FormContext-kKZxeb7G.d.cts} +1 -1
- package/dist/{chunk-F5ZJCJOD.cjs → chunk-3ED2FKXF.cjs} +112 -58
- package/dist/chunk-3ED2FKXF.cjs.map +1 -0
- package/dist/{chunk-7ZX2EUOG.js → chunk-H3YJRLVO.js} +105 -51
- package/dist/chunk-H3YJRLVO.js.map +1 -0
- package/dist/{chunk-455PI4LV.js → chunk-J37BGNM6.js} +5 -4
- package/dist/chunk-J37BGNM6.js.map +1 -0
- package/dist/{chunk-4ROWNTY6.js → chunk-ML6FGUYS.js} +3 -3
- package/dist/{chunk-4ROWNTY6.js.map → chunk-ML6FGUYS.js.map} +1 -1
- package/dist/{chunk-QRI5TMES.cjs → chunk-QMWZLGON.cjs} +5 -4
- package/dist/chunk-QMWZLGON.cjs.map +1 -0
- package/dist/{chunk-MJYEXJ3U.js → chunk-SNSK3TMG.js} +3 -3
- package/dist/{chunk-MJYEXJ3U.js.map → chunk-SNSK3TMG.js.map} +1 -1
- package/dist/{chunk-ED4UK63G.cjs → chunk-UQ6JPOBF.cjs} +114 -114
- package/dist/{chunk-ED4UK63G.cjs.map → chunk-UQ6JPOBF.cjs.map} +1 -1
- package/dist/{chunk-MUBEMXI7.cjs → chunk-V545YJFP.cjs} +6 -6
- package/dist/{chunk-MUBEMXI7.cjs.map → chunk-V545YJFP.cjs.map} +1 -1
- package/dist/core.cjs +10 -10
- package/dist/core.d.cts +17 -9
- package/dist/core.d.ts +17 -9
- package/dist/core.js +3 -3
- package/dist/index.cjs +14 -14
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +3 -3
- package/dist/inputs.cjs +14 -14
- package/dist/inputs.d.cts +8 -2
- package/dist/inputs.d.ts +8 -2
- package/dist/inputs.js +2 -2
- package/dist/integration.cjs +17 -17
- package/dist/integration.cjs.map +1 -1
- package/dist/integration.d.cts +3 -112
- package/dist/integration.d.ts +3 -112
- package/dist/integration.js +3 -3
- package/dist/integration.js.map +1 -1
- package/dist/{types-RnnhRtD2.d.ts → types-BPxsUGm_.d.cts} +124 -2
- package/dist/{types-RnnhRtD2.d.cts → types-BPxsUGm_.d.ts} +124 -2
- package/dist/validation-rules.d.cts +1 -1
- package/dist/validation-rules.d.ts +1 -1
- package/dist/validation-utils.d.cts +1 -1
- package/dist/validation-utils.d.ts +1 -1
- package/dist/validation-valibot.d.cts +1 -1
- package/dist/validation-valibot.d.ts +1 -1
- package/dist/validation.d.cts +1 -1
- package/dist/validation.d.ts +1 -1
- package/package.json +1 -1
- package/dist/chunk-455PI4LV.js.map +0 -1
- package/dist/chunk-7ZX2EUOG.js.map +0 -1
- package/dist/chunk-F5ZJCJOD.cjs.map +0 -1
- package/dist/chunk-QRI5TMES.cjs.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-
|
|
1
|
+
import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-BPxsUGm_.js';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-
|
|
1
|
+
import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-BPxsUGm_.cjs';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
3
|
+
var chunkV545YJFP_cjs = require('./chunk-V545YJFP.cjs');
|
|
4
|
+
var chunkQMWZLGON_cjs = require('./chunk-QMWZLGON.cjs');
|
|
5
|
+
var React3 = require('react');
|
|
6
6
|
var classVarianceAuthority = require('class-variance-authority');
|
|
7
7
|
require('radix-ui');
|
|
8
8
|
var icon = require('@page-speed/icon');
|
|
@@ -25,14 +25,14 @@ function _interopNamespace(e) {
|
|
|
25
25
|
return Object.freeze(n);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
|
|
29
29
|
|
|
30
30
|
function renderMessage(message, fallbackClassName, className) {
|
|
31
31
|
if (typeof message === "string") {
|
|
32
|
-
return /* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ React3__namespace.createElement(
|
|
33
33
|
"p",
|
|
34
34
|
{
|
|
35
|
-
className:
|
|
35
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
36
36
|
"text-sm font-medium text-center text-balance",
|
|
37
37
|
className
|
|
38
38
|
)
|
|
@@ -40,7 +40,7 @@ function renderMessage(message, fallbackClassName, className) {
|
|
|
40
40
|
message
|
|
41
41
|
);
|
|
42
42
|
}
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ React3__namespace.createElement("div", { className: chunkQMWZLGON_cjs.cn(fallbackClassName, className) }, message);
|
|
44
44
|
}
|
|
45
45
|
function FormFeedback({
|
|
46
46
|
successMessage,
|
|
@@ -51,10 +51,10 @@ function FormFeedback({
|
|
|
51
51
|
if (!successMessage && !submissionError) {
|
|
52
52
|
return null;
|
|
53
53
|
}
|
|
54
|
-
return /* @__PURE__ */
|
|
54
|
+
return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, successMessage ? /* @__PURE__ */ React3__namespace.createElement(
|
|
55
55
|
"div",
|
|
56
56
|
{
|
|
57
|
-
className:
|
|
57
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
58
58
|
"rounded-md border border-primary bg-primary px-4 py-3 shadow-sm",
|
|
59
59
|
successMessageClassName
|
|
60
60
|
),
|
|
@@ -66,10 +66,10 @@ function FormFeedback({
|
|
|
66
66
|
"text-primary-foreground",
|
|
67
67
|
"text-primary-foreground"
|
|
68
68
|
)
|
|
69
|
-
) : null, submissionError ? /* @__PURE__ */
|
|
69
|
+
) : null, submissionError ? /* @__PURE__ */ React3__namespace.createElement(
|
|
70
70
|
"div",
|
|
71
71
|
{
|
|
72
|
-
className:
|
|
72
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
73
73
|
"rounded-md border border-destructive bg-destructive px-4 py-3 shadow-sm",
|
|
74
74
|
errorMessageClassName
|
|
75
75
|
),
|
|
@@ -103,70 +103,122 @@ function ButtonGroup({
|
|
|
103
103
|
orientation,
|
|
104
104
|
...props
|
|
105
105
|
}) {
|
|
106
|
-
return /* @__PURE__ */
|
|
106
|
+
return /* @__PURE__ */ React3__namespace.createElement(
|
|
107
107
|
"div",
|
|
108
108
|
{
|
|
109
109
|
role: "group",
|
|
110
110
|
"data-slot": "button-group",
|
|
111
111
|
"data-orientation": orientation,
|
|
112
|
-
className:
|
|
112
|
+
className: chunkQMWZLGON_cjs.cn(buttonGroupVariants({ orientation }), className),
|
|
113
113
|
...props
|
|
114
114
|
}
|
|
115
115
|
);
|
|
116
116
|
}
|
|
117
117
|
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
|
|
118
|
+
var INPUT_SIZE_CLASSES = {
|
|
119
|
+
xs: "h-6 text-xs px-3",
|
|
120
|
+
// button: h-6 → match
|
|
121
|
+
sm: "text-sm px-3",
|
|
122
|
+
// button: h-8 overridden to h-9 below → match
|
|
123
|
+
default: "text-base px-4",
|
|
124
|
+
// button: h-9 (no override needed)
|
|
125
|
+
lg: "h-10 text-md px-6"
|
|
126
|
+
// button: h-10 → match
|
|
127
|
+
};
|
|
118
128
|
function ButtonGroupForm({
|
|
119
129
|
name,
|
|
120
130
|
label,
|
|
131
|
+
description,
|
|
121
132
|
inputProps,
|
|
122
133
|
submitLabel = "Submit",
|
|
123
134
|
submitVariant = "default",
|
|
124
135
|
size = "default",
|
|
125
136
|
isSubmitting = false,
|
|
126
137
|
submitIconName,
|
|
138
|
+
submitIconComponent,
|
|
127
139
|
className,
|
|
128
140
|
labelClassName
|
|
129
141
|
}) {
|
|
130
|
-
const inputId =
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
const
|
|
134
|
-
|
|
135
|
-
|
|
142
|
+
const inputId = React3__namespace.useMemo(() => {
|
|
143
|
+
return `button-group-input-${name}`;
|
|
144
|
+
}, [name]);
|
|
145
|
+
const hasValue = React3__namespace.useMemo(() => {
|
|
146
|
+
return String(inputProps.value ?? "").trim().length > 0;
|
|
147
|
+
}, [inputProps.value]);
|
|
148
|
+
const hasError = React3__namespace.useMemo(() => {
|
|
149
|
+
return !!inputProps.error;
|
|
150
|
+
}, [inputProps.error]);
|
|
151
|
+
const buttonSize = React3__namespace.useMemo(() => {
|
|
152
|
+
if (submitIconName || submitIconComponent) {
|
|
153
|
+
return size === "default" || size === "sm" ? "icon" : `icon-${size}`;
|
|
136
154
|
}
|
|
137
155
|
return size;
|
|
138
|
-
}, [submitIconName, size]);
|
|
139
|
-
const
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
...inputProps,
|
|
149
|
-
id: inputId,
|
|
150
|
-
className: chunkQRI5TMES_cjs.cn(
|
|
151
|
-
inputSizeClasses[size],
|
|
152
|
-
"border-r-0 rounded-r-none focus-visible:z-10",
|
|
153
|
-
inputProps.className
|
|
154
|
-
)
|
|
156
|
+
}, [submitIconName, size, submitIconComponent]);
|
|
157
|
+
const labelElement = React3__namespace.useMemo(() => {
|
|
158
|
+
if (submitIconName) {
|
|
159
|
+
return /* @__PURE__ */ React3__namespace.createElement(icon.Icon, { name: submitIconName, apiKey: DEFAULT_ICON_API_KEY });
|
|
160
|
+
} else if (submitIconComponent) {
|
|
161
|
+
return submitIconComponent;
|
|
162
|
+
} else if (submitLabel) {
|
|
163
|
+
return submitLabel;
|
|
164
|
+
} else {
|
|
165
|
+
return "Submit";
|
|
155
166
|
}
|
|
156
|
-
|
|
157
|
-
|
|
167
|
+
}, [submitIconComponent, submitIconName, submitLabel]);
|
|
168
|
+
return /* @__PURE__ */ React3__namespace.createElement("div", { className: chunkQMWZLGON_cjs.cn("space-y-2", className) }, label && /* @__PURE__ */ React3__namespace.createElement(chunkQMWZLGON_cjs.FieldLabel, { htmlFor: inputId, className: labelClassName }, label), /* @__PURE__ */ React3__namespace.createElement(
|
|
169
|
+
ButtonGroup,
|
|
158
170
|
{
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
className: chunkQRI5TMES_cjs.cn(
|
|
164
|
-
"rounded-l-none",
|
|
165
|
-
!hasError && hasValue && "ring-2 ring-ring"
|
|
171
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
172
|
+
"rounded-md",
|
|
173
|
+
!hasError && hasValue && "ring-2 ring-ring",
|
|
174
|
+
hasError && "ring-1 ring-destructive"
|
|
166
175
|
)
|
|
167
176
|
},
|
|
168
|
-
|
|
169
|
-
|
|
177
|
+
/* @__PURE__ */ React3__namespace.createElement(
|
|
178
|
+
chunkQMWZLGON_cjs.TextInput,
|
|
179
|
+
{
|
|
180
|
+
...inputProps,
|
|
181
|
+
id: inputId,
|
|
182
|
+
suppressValueRing: true,
|
|
183
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
184
|
+
INPUT_SIZE_CLASSES[size],
|
|
185
|
+
"border-r-0 rounded-r-none focus-visible:z-10",
|
|
186
|
+
inputProps.className
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
),
|
|
190
|
+
/* @__PURE__ */ React3__namespace.createElement(
|
|
191
|
+
chunkQMWZLGON_cjs.Button,
|
|
192
|
+
{
|
|
193
|
+
size: buttonSize,
|
|
194
|
+
type: "submit",
|
|
195
|
+
variant: submitVariant,
|
|
196
|
+
disabled: isSubmitting,
|
|
197
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
198
|
+
"relative rounded-l-none ring-0",
|
|
199
|
+
// 'sm' button variant is h-8; override to h-9 to align with input
|
|
200
|
+
size === "sm" && "h-9"
|
|
201
|
+
)
|
|
202
|
+
},
|
|
203
|
+
isSubmitting ? /* @__PURE__ */ React3__namespace.createElement("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React3__namespace.createElement(
|
|
204
|
+
icon.Icon,
|
|
205
|
+
{
|
|
206
|
+
name: "line-md/loading-twotone-loop",
|
|
207
|
+
apiKey: DEFAULT_ICON_API_KEY
|
|
208
|
+
}
|
|
209
|
+
)) : null,
|
|
210
|
+
/* @__PURE__ */ React3__namespace.createElement(
|
|
211
|
+
"span",
|
|
212
|
+
{
|
|
213
|
+
className: chunkQMWZLGON_cjs.cn(
|
|
214
|
+
"transition-opacity duration-200",
|
|
215
|
+
isSubmitting ? "opacity-0" : "opacity-100"
|
|
216
|
+
)
|
|
217
|
+
},
|
|
218
|
+
labelElement
|
|
219
|
+
)
|
|
220
|
+
)
|
|
221
|
+
), description && /* @__PURE__ */ React3__namespace.createElement(chunkQMWZLGON_cjs.FieldDescription, null, description));
|
|
170
222
|
}
|
|
171
223
|
ButtonGroupForm.displayName = "ButtonGroupForm";
|
|
172
224
|
|
|
@@ -190,7 +242,7 @@ function Form({
|
|
|
190
242
|
formConfig,
|
|
191
243
|
...props
|
|
192
244
|
}) {
|
|
193
|
-
const handleFormSubmit =
|
|
245
|
+
const handleFormSubmit = React3__namespace.useCallback(
|
|
194
246
|
async (e) => {
|
|
195
247
|
try {
|
|
196
248
|
await form.handleSubmit(e);
|
|
@@ -217,7 +269,7 @@ function Form({
|
|
|
217
269
|
const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;
|
|
218
270
|
const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
|
|
219
271
|
const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
|
|
220
|
-
const handleNewSubmission =
|
|
272
|
+
const handleNewSubmission = React3__namespace.useCallback(() => {
|
|
221
273
|
form.resetForm();
|
|
222
274
|
onNewSubmission?.();
|
|
223
275
|
}, [form, onNewSubmission]);
|
|
@@ -227,15 +279,16 @@ function Form({
|
|
|
227
279
|
fields[0].type
|
|
228
280
|
);
|
|
229
281
|
const shouldUseButtonGroup = isButtonGroupLayout && hasTextField;
|
|
230
|
-
const buttonGroupContent =
|
|
282
|
+
const buttonGroupContent = React3__namespace.useMemo(() => {
|
|
231
283
|
if (!shouldUseButtonGroup || !fields || fields.length === 0) return null;
|
|
232
284
|
const field = fields[0];
|
|
233
285
|
const fieldProps = form.getFieldProps(field.name);
|
|
234
|
-
return /* @__PURE__ */
|
|
286
|
+
return /* @__PURE__ */ React3__namespace.createElement(
|
|
235
287
|
ButtonGroupForm,
|
|
236
288
|
{
|
|
237
289
|
name: field.name,
|
|
238
290
|
label: field.label,
|
|
291
|
+
className: field.className,
|
|
239
292
|
inputProps: {
|
|
240
293
|
name: fieldProps.name,
|
|
241
294
|
value: fieldProps.value,
|
|
@@ -249,12 +302,13 @@ function Form({
|
|
|
249
302
|
submitLabel: formConfig?.submitLabel,
|
|
250
303
|
submitVariant: formConfig?.submitVariant,
|
|
251
304
|
submitIconName: formConfig?.submitIconName,
|
|
305
|
+
submitIconComponent: formConfig?.submitIconComponent,
|
|
252
306
|
size: formConfig?.buttonGroupSize,
|
|
253
307
|
isSubmitting: form.isSubmitting
|
|
254
308
|
}
|
|
255
309
|
);
|
|
256
310
|
}, [shouldUseButtonGroup, fields, form, formConfig]);
|
|
257
|
-
return /* @__PURE__ */
|
|
311
|
+
return /* @__PURE__ */ React3__namespace.createElement(chunkV545YJFP_cjs.FormContext.Provider, { value: form }, /* @__PURE__ */ React3__namespace.createElement(
|
|
258
312
|
"form",
|
|
259
313
|
{
|
|
260
314
|
onSubmit: handleFormSubmit,
|
|
@@ -264,21 +318,21 @@ function Form({
|
|
|
264
318
|
className: resolvedClassName,
|
|
265
319
|
...props
|
|
266
320
|
},
|
|
267
|
-
isSubmissionSuccessful ? /* @__PURE__ */
|
|
321
|
+
isSubmissionSuccessful ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? resolvedSubmissionConfig?.customComponent : /* @__PURE__ */ React3__namespace.createElement(
|
|
268
322
|
FormFeedback,
|
|
269
323
|
{
|
|
270
324
|
successMessage: finalSuccessMessage,
|
|
271
325
|
successMessageClassName: resolvedSuccessMessageClassName
|
|
272
326
|
}
|
|
273
|
-
), showNewSubmissionAction ? /* @__PURE__ */
|
|
274
|
-
|
|
327
|
+
), showNewSubmissionAction ? /* @__PURE__ */ React3__namespace.createElement(
|
|
328
|
+
chunkQMWZLGON_cjs.Button,
|
|
275
329
|
{
|
|
276
330
|
type: "button",
|
|
277
331
|
variant: "outline",
|
|
278
332
|
onClick: handleNewSubmission
|
|
279
333
|
},
|
|
280
334
|
newSubmissionLabel
|
|
281
|
-
) : null) : /* @__PURE__ */
|
|
335
|
+
) : null) : /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Fragment, null, shouldUseButtonGroup ? buttonGroupContent : children, resolvedSubmissionError ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React3__namespace.createElement(
|
|
282
336
|
FormFeedback,
|
|
283
337
|
{
|
|
284
338
|
submissionError: resolvedSubmissionError,
|
|
@@ -292,5 +346,5 @@ Form.displayName = "Form";
|
|
|
292
346
|
exports.ButtonGroupForm = ButtonGroupForm;
|
|
293
347
|
exports.Form = Form;
|
|
294
348
|
exports.FormFeedback = FormFeedback;
|
|
295
|
-
//# sourceMappingURL=chunk-
|
|
296
|
-
//# sourceMappingURL=chunk-
|
|
349
|
+
//# sourceMappingURL=chunk-3ED2FKXF.cjs.map
|
|
350
|
+
//# sourceMappingURL=chunk-3ED2FKXF.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/core/form-feedback.tsx","../src/components/ui/button-group.tsx","../src/core/button-group-form.tsx","../src/core/Form.tsx"],"names":["React","cn","cva","React2","React3","Icon","FieldLabel","TextInput","Button","FieldDescription","React4","FormContext"],"mappings":"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","file":"chunk-3ED2FKXF.cjs","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport interface FormFeedbackProps {\n successMessage?: React.ReactNode;\n submissionError?: React.ReactNode;\n successMessageClassName?: string;\n errorMessageClassName?: string;\n}\n\nfunction renderMessage(\n message: React.ReactNode,\n fallbackClassName: string,\n className?: string,\n) {\n if (typeof message === \"string\") {\n return (\n <p\n className={cn(\n \"text-sm font-medium text-center text-balance\",\n className,\n )}\n >\n {message}\n </p>\n );\n }\n\n return <div className={cn(fallbackClassName, className)}>{message}</div>;\n}\n\nexport function FormFeedback({\n successMessage,\n submissionError,\n successMessageClassName,\n errorMessageClassName,\n}: FormFeedbackProps) {\n if (!successMessage && !submissionError) {\n return null;\n }\n\n return (\n <>\n {successMessage ? (\n <div\n className={cn(\n \"rounded-md border border-primary bg-primary px-4 py-3 shadow-sm\",\n successMessageClassName,\n )}\n role=\"status\"\n aria-live=\"polite\"\n >\n {renderMessage(\n successMessage,\n \"text-primary-foreground\",\n \"text-primary-foreground\",\n )}\n </div>\n ) : null}\n\n {submissionError ? (\n <div\n className={cn(\n \"rounded-md border border-destructive bg-destructive px-4 py-3 shadow-sm\",\n errorMessageClassName,\n )}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {renderMessage(\n submissionError,\n \"text-destructive-foreground\",\n \"text-destructive-foreground\",\n )}\n </div>\n ) : null}\n </>\n );\n}\n\nFormFeedback.displayName = \"FormFeedback\";\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst buttonGroupVariants = cva(\n \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n vertical:\n \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n }\n)\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation}\n className={cn(buttonGroupVariants({ orientation }), className)}\n {...props}\n />\n )\n}\n\nfunction ButtonGroupText({\n className,\n asChild = false,\n ...props\n}: React.ComponentProps<\"div\"> & {\n asChild?: boolean\n}) {\n const Comp = asChild ? Slot.Root : \"div\"\n\n return (\n <Comp\n className={cn(\n \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps<typeof Separator>) {\n return (\n <Separator\n data-slot=\"button-group-separator\"\n orientation={orientation}\n className={cn(\n \"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n ButtonGroup,\n ButtonGroupSeparator,\n ButtonGroupText,\n buttonGroupVariants,\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/ui/button\";\nimport { ButtonGroup } from \"../components/ui/button-group\";\nimport { FieldLabel, FieldDescription } from \"../components/ui/field\";\nimport { TextInput } from \"../inputs/TextInput\";\nimport type { InputProps } from \"./types\";\nimport { Icon } from \"@page-speed/icon\";\n\nconst DEFAULT_ICON_API_KEY = \"au382bi7fsh96w9h9xlrnat2jglx\";\n\nexport type ButtonGroupFormSize = \"xs\" | \"sm\" | \"default\" | \"lg\";\n\n// Size-specific classes for input — height overrides ensure the input matches\n// the button height for every size variant.\nconst INPUT_SIZE_CLASSES: Record<ButtonGroupFormSize, string> = {\n xs: \"h-6 text-xs px-3\", // button: h-6 → match\n sm: \"text-sm px-3\", // button: h-8 overridden to h-9 below → match\n default: \"text-base px-4\", // button: h-9 (no override needed)\n lg: \"h-10 text-md px-6\", // button: h-10 → match\n};\n\nexport type ButtonGroupFormProps = {\n /**\n * Field name\n */\n name: string;\n /**\n * Optional label above the input\n */\n label?: React.ReactNode;\n /**\n * Optional description below the input\n */\n description?: React.ReactNode;\n /**\n * Placeholder text for the input\n */\n placeholder?: string;\n /**\n * Input props from form field\n */\n inputProps: InputProps<string> & {\n type?: \"text\" | \"email\" | \"password\" | \"url\" | \"tel\" | \"search\";\n };\n /**\n * Submit button label\n */\n submitLabel?: React.ReactNode;\n /**\n * Submit button size\n */\n size?: ButtonGroupFormSize;\n /**\n * Submit button variant\n */\n submitVariant?:\n | \"link\"\n | \"default\"\n | \"destructive\"\n | \"outline\"\n | \"secondary\"\n | \"ghost\"\n | null\n | undefined;\n /**\n * Whether form is submitting\n */\n isSubmitting?: boolean;\n /**\n * Additional className for the container\n */\n className?: string;\n /**\n * Icon name for icon based submit buttons\n */\n submitIconName?: string;\n /**\n * Icon component for icon based submit buttons\n */\n submitIconComponent?: React.ReactNode;\n /**\n * Additional className for the label\n */\n labelClassName?: string;\n};\n\n/**\n * ButtonGroupForm - Inline form layout with input and submit button grouped together\n *\n * Commonly used for newsletter signups and other simple single-field forms.\n * The input and button automatically adjust sizing together.\n *\n * Size mappings (input height / button height — always equal):\n * - xs: h-6 / h-6\n * - sm: h-9 / h-9\n * - default: h-9 / h-9\n * - lg: h-10 / h-10\n *\n * @example\n * ```tsx\n * <ButtonGroupForm\n * name=\"email\"\n * placeholder=\"Enter your email\"\n * inputProps={form.getFieldProps('email')}\n * submitLabel=\"Subscribe\"\n * size=\"default\"\n * />\n * ```\n */\nexport function ButtonGroupForm({\n name,\n label,\n description,\n inputProps,\n submitLabel = \"Submit\",\n submitVariant = \"default\",\n size = \"default\",\n isSubmitting = false,\n submitIconName,\n submitIconComponent,\n className,\n labelClassName,\n}: ButtonGroupFormProps) {\n const inputId = React.useMemo(() => {\n return `button-group-input-${name}`;\n }, [name]);\n\n const hasValue = React.useMemo(() => {\n return String(inputProps.value ?? \"\").trim().length > 0;\n }, [inputProps.value]);\n\n const hasError = React.useMemo(() => {\n return !!inputProps.error;\n }, [inputProps.error]);\n\n const buttonSize:\n | \"xs\"\n | \"sm\"\n | \"default\"\n | \"lg\"\n | \"icon\"\n | \"icon-xs\"\n | \"icon-sm\"\n | \"icon-lg\" = React.useMemo(() => {\n if (submitIconName || submitIconComponent) {\n // 'sm' maps to 'icon' (size-9) rather than 'icon-sm' (size-8) so the\n // icon button stays the same height as the h-9 input.\n return size === \"default\" || size === \"sm\"\n ? \"icon\"\n : (`icon-${size}` as const);\n }\n return size;\n }, [submitIconName, size, submitIconComponent]);\n\n const labelElement = React.useMemo(() => {\n if (submitIconName) {\n return <Icon name={submitIconName} apiKey={DEFAULT_ICON_API_KEY} />;\n } else if (submitIconComponent) {\n return submitIconComponent;\n } else if (submitLabel) {\n return submitLabel;\n } else {\n return \"Submit\";\n }\n }, [submitIconComponent, submitIconName, submitLabel]);\n\n return (\n <div className={cn(\"space-y-2\", className)}>\n {label && (\n <FieldLabel htmlFor={inputId} className={labelClassName}>\n {label}\n </FieldLabel>\n )}\n <ButtonGroup\n className={cn(\n \"rounded-md\",\n !hasError && hasValue && \"ring-2 ring-ring\",\n hasError && \"ring-1 ring-destructive\",\n )}\n >\n <TextInput\n {...inputProps}\n id={inputId}\n suppressValueRing\n className={cn(\n INPUT_SIZE_CLASSES[size],\n \"border-r-0 rounded-r-none focus-visible:z-10\",\n inputProps.className,\n )}\n />\n <Button\n size={buttonSize}\n type=\"submit\"\n variant={submitVariant}\n disabled={isSubmitting}\n className={cn(\n \"relative rounded-l-none ring-0\",\n // 'sm' button variant is h-8; override to h-9 to align with input\n size === \"sm\" && \"h-9\",\n )}\n >\n {isSubmitting ? (\n <span className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n <Icon\n name=\"line-md/loading-twotone-loop\"\n apiKey={DEFAULT_ICON_API_KEY}\n />\n </span>\n ) : null}\n <span\n className={cn(\n \"transition-opacity duration-200\",\n isSubmitting ? \"opacity-0\" : \"opacity-100\",\n )}\n >\n {labelElement}\n </span>\n </Button>\n </ButtonGroup>\n {description && <FieldDescription>{description}</FieldDescription>}\n </div>\n );\n}\n\nButtonGroupForm.displayName = \"ButtonGroupForm\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport { FormContext } from \"./FormContext\";\nimport type { FormProps, FormValues } from \"./types\";\nimport { FormFeedback } from \"./form-feedback\";\nimport { Button } from \"../components/ui/button\";\nimport { ButtonGroupForm } from \"./button-group-form\";\nimport type { ButtonGroupFormFieldConfig } from \"../integration/form-field-types\";\n\n/**\n * Form - Progressive enhancement form component\n *\n * Provides form context to child components and handles form submission.\n * Supports progressive enhancement with server-side fallback.\n *\n * Features:\n * - Provides FormContext for useField hook\n * - Handles form submission with validation\n * - Progressive enhancement support (works without JavaScript)\n * - Accessible form semantics\n *\n * @example\n * ```tsx\n * const form = useForm({\n * initialValues: { email: '' },\n * onSubmit: async (values) => {\n * await submitForm(values);\n * },\n * });\n *\n * return (\n * <Form form={form} action=\"/api/submit\" method=\"post\">\n * <input {...form.getFieldProps('email')} />\n * <button type=\"submit\">Submit</button>\n * </Form>\n * );\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/form\n */\nexport function Form<T extends FormValues = FormValues>({\n form,\n children,\n fields,\n className,\n action,\n method,\n noValidate = true,\n submissionConfig,\n successMessage,\n submissionError,\n successMessageClassName,\n errorMessageClassName,\n onNewSubmission,\n notificationConfig,\n styleConfig,\n formConfig,\n ...props\n}: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>) {\n // Wrap handleSubmit to catch any unhandled rejections\n const handleFormSubmit = React.useCallback(\n async (e: React.FormEvent) => {\n try {\n await form.handleSubmit(e);\n } catch {\n // Error is already handled by useForm, just prevent unhandled rejection\n // The form status and errors are already set by useForm's error handling\n }\n },\n [form],\n );\n\n const resolvedClassName = className ?? styleConfig?.formClassName;\n const resolvedAction = action ?? formConfig?.endpoint;\n const resolvedMethod = method ?? formConfig?.method ?? \"post\";\n const resolvedSubmissionConfig =\n submissionConfig ?? formConfig?.submissionConfig;\n const resolvedSuccessMessage =\n successMessage ?? notificationConfig?.successMessage;\n const resolvedSubmissionError =\n submissionError ?? notificationConfig?.submissionError;\n const resolvedSuccessMessageClassName =\n successMessageClassName ?? styleConfig?.successMessageClassName;\n const resolvedErrorMessageClassName =\n errorMessageClassName ?? styleConfig?.errorMessageClassName;\n\n const behavior = resolvedSubmissionConfig?.behavior || \"showConfirmation\";\n\n const shouldManageSubmissionUi =\n resolvedSubmissionConfig !== undefined ||\n resolvedSuccessMessage !== undefined ||\n resolvedSuccessMessageClassName !== undefined ||\n resolvedErrorMessageClassName !== undefined ||\n resolvedSubmissionError != null ||\n onNewSubmission !== undefined;\n\n const hasSubmissionError = Boolean(resolvedSubmissionError);\n\n const isSubmissionSuccessful =\n shouldManageSubmissionUi &&\n form.status === \"success\" &&\n !hasSubmissionError;\n\n const defaultSuccessMessage =\n behavior === \"redirect\"\n ? \"Form submitted successfully. Redirecting...\"\n : \"Thank you. Your form has been submitted successfully.\";\n\n const finalSuccessMessage = resolvedSuccessMessage ?? defaultSuccessMessage;\n\n const shouldRenderCustomComponent =\n isSubmissionSuccessful &&\n behavior === \"renderCustomComponent\" &&\n Boolean(resolvedSubmissionConfig?.customComponent);\n\n const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;\n\n const showNewSubmissionAction =\n isSubmissionSuccessful &&\n (typeof newSubmissionAction?.enable === \"boolean\"\n ? newSubmissionAction.enable\n : Boolean(newSubmissionAction?.label));\n\n const newSubmissionLabel =\n newSubmissionAction?.label ?? \"Submit another response\";\n\n const handleNewSubmission = React.useCallback(() => {\n form.resetForm();\n onNewSubmission?.();\n }, [form, onNewSubmission]);\n\n // Check if we should use button-group layout\n const formLayout = formConfig?.formLayout ?? \"standard\";\n const isButtonGroupLayout = formLayout === \"button-group\";\n const hasTextField =\n fields &&\n fields.length === 1 &&\n fields[0] &&\n [\"text\", \"email\", \"password\", \"url\", \"tel\", \"search\"].includes(\n fields[0].type,\n );\n const shouldUseButtonGroup = isButtonGroupLayout && hasTextField;\n\n // Render button-group layout if conditions are met\n const buttonGroupContent = React.useMemo(() => {\n if (!shouldUseButtonGroup || !fields || fields.length === 0) return null;\n\n const field = fields[0] as ButtonGroupFormFieldConfig;\n const fieldProps = form.getFieldProps(field.name);\n\n return (\n <ButtonGroupForm\n name={field.name}\n label={field.label}\n className={field.className}\n inputProps={{\n name: fieldProps.name,\n value: fieldProps.value as string,\n onChange: fieldProps.onChange as (value: string) => void,\n onBlur: fieldProps.onBlur,\n type: field.type as\n | \"text\"\n | \"email\"\n | \"password\"\n | \"url\"\n | \"tel\"\n | \"search\",\n placeholder: field.placeholder,\n required: field.required,\n disabled: field.disabled,\n }}\n submitLabel={formConfig?.submitLabel}\n submitVariant={formConfig?.submitVariant}\n submitIconName={formConfig?.submitIconName}\n submitIconComponent={formConfig?.submitIconComponent}\n size={formConfig?.buttonGroupSize}\n isSubmitting={form.isSubmitting}\n />\n );\n }, [shouldUseButtonGroup, fields, form, formConfig]);\n\n return (\n <FormContext.Provider value={form}>\n <form\n onSubmit={handleFormSubmit}\n action={resolvedAction}\n method={resolvedMethod}\n noValidate={noValidate}\n className={resolvedClassName}\n {...props}\n >\n {isSubmissionSuccessful ? (\n <div className=\"space-y-4\">\n {shouldRenderCustomComponent ? (\n resolvedSubmissionConfig?.customComponent\n ) : (\n <FormFeedback\n successMessage={finalSuccessMessage}\n successMessageClassName={resolvedSuccessMessageClassName}\n />\n )}\n\n {showNewSubmissionAction ? (\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={handleNewSubmission}\n >\n {newSubmissionLabel}\n </Button>\n ) : null}\n </div>\n ) : (\n <>\n {shouldUseButtonGroup ? buttonGroupContent : children}\n {resolvedSubmissionError ? (\n <div className=\"mt-4\">\n <FormFeedback\n submissionError={resolvedSubmissionError}\n errorMessageClassName={resolvedErrorMessageClassName}\n />\n </div>\n ) : null}\n </>\n )}\n </form>\n </FormContext.Provider>\n );\n}\n\nForm.displayName = \"Form\";\n"]}
|