@page-speed/forms 0.6.3 → 0.6.5
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-Db0L3Kwv.d.ts → FormContext-C6kWSQuv.d.ts} +1 -1
- package/dist/{FormContext-kKZxeb7G.d.cts → FormContext-DLG3GzgL.d.cts} +1 -1
- package/dist/chunk-A7MVZ757.js +701 -0
- package/dist/chunk-A7MVZ757.js.map +1 -0
- package/dist/chunk-DCGSRMZT.cjs +728 -0
- package/dist/chunk-DCGSRMZT.cjs.map +1 -0
- package/dist/chunk-UBDA7CS5.js +3 -0
- package/dist/chunk-UBDA7CS5.js.map +1 -0
- package/dist/chunk-V7JSGFCI.cjs +4 -0
- package/dist/chunk-V7JSGFCI.cjs.map +1 -0
- package/dist/core.cjs +13 -13
- package/dist/core.d.cts +10 -8
- package/dist/core.d.ts +10 -8
- package/dist/core.js +2 -2
- package/dist/index.cjs +12 -12
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/inputs.d.cts +1 -1
- package/dist/inputs.d.ts +1 -1
- package/dist/integration.cjs +137 -3
- package/dist/integration.cjs.map +1 -1
- package/dist/integration.d.cts +103 -18
- package/dist/integration.d.ts +103 -18
- package/dist/integration.js +136 -3
- package/dist/integration.js.map +1 -1
- package/dist/{types-BPxsUGm_.d.ts → types-BhcLAcZe.d.cts} +31 -22
- package/dist/{types-BPxsUGm_.d.cts → types-BhcLAcZe.d.ts} +31 -22
- 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-3ED2FKXF.cjs +0 -350
- package/dist/chunk-3ED2FKXF.cjs.map +0 -1
- package/dist/chunk-H3YJRLVO.js +0 -326
- package/dist/chunk-H3YJRLVO.js.map +0 -1
- package/dist/chunk-SNSK3TMG.js +0 -373
- package/dist/chunk-SNSK3TMG.js.map +0 -1
- package/dist/chunk-V545YJFP.cjs +0 -397
- package/dist/chunk-V545YJFP.cjs.map +0 -1
package/dist/chunk-H3YJRLVO.js
DELETED
|
@@ -1,326 +0,0 @@
|
|
|
1
|
-
import { FormContext } from './chunk-SNSK3TMG.js';
|
|
2
|
-
import { cn, FieldLabel, TextInput, Button, FieldDescription } from './chunk-J37BGNM6.js';
|
|
3
|
-
import * as React3 from 'react';
|
|
4
|
-
import { cva } from 'class-variance-authority';
|
|
5
|
-
import 'radix-ui';
|
|
6
|
-
import { Icon } from '@page-speed/icon';
|
|
7
|
-
|
|
8
|
-
function renderMessage(message, fallbackClassName, className) {
|
|
9
|
-
if (typeof message === "string") {
|
|
10
|
-
return /* @__PURE__ */ React3.createElement(
|
|
11
|
-
"p",
|
|
12
|
-
{
|
|
13
|
-
className: cn(
|
|
14
|
-
"text-sm font-medium text-center text-balance",
|
|
15
|
-
className
|
|
16
|
-
)
|
|
17
|
-
},
|
|
18
|
-
message
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
return /* @__PURE__ */ React3.createElement("div", { className: cn(fallbackClassName, className) }, message);
|
|
22
|
-
}
|
|
23
|
-
function FormFeedback({
|
|
24
|
-
successMessage,
|
|
25
|
-
submissionError,
|
|
26
|
-
successMessageClassName,
|
|
27
|
-
errorMessageClassName
|
|
28
|
-
}) {
|
|
29
|
-
if (!successMessage && !submissionError) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
return /* @__PURE__ */ React3.createElement(React3.Fragment, null, successMessage ? /* @__PURE__ */ React3.createElement(
|
|
33
|
-
"div",
|
|
34
|
-
{
|
|
35
|
-
className: cn(
|
|
36
|
-
"rounded-md border border-primary bg-primary px-4 py-3 shadow-sm",
|
|
37
|
-
successMessageClassName
|
|
38
|
-
),
|
|
39
|
-
role: "status",
|
|
40
|
-
"aria-live": "polite"
|
|
41
|
-
},
|
|
42
|
-
renderMessage(
|
|
43
|
-
successMessage,
|
|
44
|
-
"text-primary-foreground",
|
|
45
|
-
"text-primary-foreground"
|
|
46
|
-
)
|
|
47
|
-
) : null, submissionError ? /* @__PURE__ */ React3.createElement(
|
|
48
|
-
"div",
|
|
49
|
-
{
|
|
50
|
-
className: cn(
|
|
51
|
-
"rounded-md border border-destructive bg-destructive px-4 py-3 shadow-sm",
|
|
52
|
-
errorMessageClassName
|
|
53
|
-
),
|
|
54
|
-
role: "alert",
|
|
55
|
-
"aria-live": "assertive"
|
|
56
|
-
},
|
|
57
|
-
renderMessage(
|
|
58
|
-
submissionError,
|
|
59
|
-
"text-destructive-foreground",
|
|
60
|
-
"text-destructive-foreground"
|
|
61
|
-
)
|
|
62
|
-
) : null);
|
|
63
|
-
}
|
|
64
|
-
FormFeedback.displayName = "FormFeedback";
|
|
65
|
-
var buttonGroupVariants = cva(
|
|
66
|
-
"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",
|
|
67
|
-
{
|
|
68
|
-
variants: {
|
|
69
|
-
orientation: {
|
|
70
|
-
horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
|
|
71
|
-
vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
defaultVariants: {
|
|
75
|
-
orientation: "horizontal"
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
);
|
|
79
|
-
function ButtonGroup({
|
|
80
|
-
className,
|
|
81
|
-
orientation,
|
|
82
|
-
...props
|
|
83
|
-
}) {
|
|
84
|
-
return /* @__PURE__ */ React3.createElement(
|
|
85
|
-
"div",
|
|
86
|
-
{
|
|
87
|
-
role: "group",
|
|
88
|
-
"data-slot": "button-group",
|
|
89
|
-
"data-orientation": orientation,
|
|
90
|
-
className: cn(buttonGroupVariants({ orientation }), className),
|
|
91
|
-
...props
|
|
92
|
-
}
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
|
|
96
|
-
var INPUT_SIZE_CLASSES = {
|
|
97
|
-
xs: "h-6 text-xs px-3",
|
|
98
|
-
// button: h-6 → match
|
|
99
|
-
sm: "text-sm px-3",
|
|
100
|
-
// button: h-8 overridden to h-9 below → match
|
|
101
|
-
default: "text-base px-4",
|
|
102
|
-
// button: h-9 (no override needed)
|
|
103
|
-
lg: "h-10 text-md px-6"
|
|
104
|
-
// button: h-10 → match
|
|
105
|
-
};
|
|
106
|
-
function ButtonGroupForm({
|
|
107
|
-
name,
|
|
108
|
-
label,
|
|
109
|
-
description,
|
|
110
|
-
inputProps,
|
|
111
|
-
submitLabel = "Submit",
|
|
112
|
-
submitVariant = "default",
|
|
113
|
-
size = "default",
|
|
114
|
-
isSubmitting = false,
|
|
115
|
-
submitIconName,
|
|
116
|
-
submitIconComponent,
|
|
117
|
-
className,
|
|
118
|
-
labelClassName
|
|
119
|
-
}) {
|
|
120
|
-
const inputId = React3.useMemo(() => {
|
|
121
|
-
return `button-group-input-${name}`;
|
|
122
|
-
}, [name]);
|
|
123
|
-
const hasValue = React3.useMemo(() => {
|
|
124
|
-
return String(inputProps.value ?? "").trim().length > 0;
|
|
125
|
-
}, [inputProps.value]);
|
|
126
|
-
const hasError = React3.useMemo(() => {
|
|
127
|
-
return !!inputProps.error;
|
|
128
|
-
}, [inputProps.error]);
|
|
129
|
-
const buttonSize = React3.useMemo(() => {
|
|
130
|
-
if (submitIconName || submitIconComponent) {
|
|
131
|
-
return size === "default" || size === "sm" ? "icon" : `icon-${size}`;
|
|
132
|
-
}
|
|
133
|
-
return size;
|
|
134
|
-
}, [submitIconName, size, submitIconComponent]);
|
|
135
|
-
const labelElement = React3.useMemo(() => {
|
|
136
|
-
if (submitIconName) {
|
|
137
|
-
return /* @__PURE__ */ React3.createElement(Icon, { name: submitIconName, apiKey: DEFAULT_ICON_API_KEY });
|
|
138
|
-
} else if (submitIconComponent) {
|
|
139
|
-
return submitIconComponent;
|
|
140
|
-
} else if (submitLabel) {
|
|
141
|
-
return submitLabel;
|
|
142
|
-
} else {
|
|
143
|
-
return "Submit";
|
|
144
|
-
}
|
|
145
|
-
}, [submitIconComponent, submitIconName, submitLabel]);
|
|
146
|
-
return /* @__PURE__ */ React3.createElement("div", { className: cn("space-y-2", className) }, label && /* @__PURE__ */ React3.createElement(FieldLabel, { htmlFor: inputId, className: labelClassName }, label), /* @__PURE__ */ React3.createElement(
|
|
147
|
-
ButtonGroup,
|
|
148
|
-
{
|
|
149
|
-
className: cn(
|
|
150
|
-
"rounded-md",
|
|
151
|
-
!hasError && hasValue && "ring-2 ring-ring",
|
|
152
|
-
hasError && "ring-1 ring-destructive"
|
|
153
|
-
)
|
|
154
|
-
},
|
|
155
|
-
/* @__PURE__ */ React3.createElement(
|
|
156
|
-
TextInput,
|
|
157
|
-
{
|
|
158
|
-
...inputProps,
|
|
159
|
-
id: inputId,
|
|
160
|
-
suppressValueRing: true,
|
|
161
|
-
className: cn(
|
|
162
|
-
INPUT_SIZE_CLASSES[size],
|
|
163
|
-
"border-r-0 rounded-r-none focus-visible:z-10",
|
|
164
|
-
inputProps.className
|
|
165
|
-
)
|
|
166
|
-
}
|
|
167
|
-
),
|
|
168
|
-
/* @__PURE__ */ React3.createElement(
|
|
169
|
-
Button,
|
|
170
|
-
{
|
|
171
|
-
size: buttonSize,
|
|
172
|
-
type: "submit",
|
|
173
|
-
variant: submitVariant,
|
|
174
|
-
disabled: isSubmitting,
|
|
175
|
-
className: cn(
|
|
176
|
-
"relative rounded-l-none ring-0",
|
|
177
|
-
// 'sm' button variant is h-8; override to h-9 to align with input
|
|
178
|
-
size === "sm" && "h-9"
|
|
179
|
-
)
|
|
180
|
-
},
|
|
181
|
-
isSubmitting ? /* @__PURE__ */ React3.createElement("span", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" }, /* @__PURE__ */ React3.createElement(
|
|
182
|
-
Icon,
|
|
183
|
-
{
|
|
184
|
-
name: "line-md/loading-twotone-loop",
|
|
185
|
-
apiKey: DEFAULT_ICON_API_KEY
|
|
186
|
-
}
|
|
187
|
-
)) : null,
|
|
188
|
-
/* @__PURE__ */ React3.createElement(
|
|
189
|
-
"span",
|
|
190
|
-
{
|
|
191
|
-
className: cn(
|
|
192
|
-
"transition-opacity duration-200",
|
|
193
|
-
isSubmitting ? "opacity-0" : "opacity-100"
|
|
194
|
-
)
|
|
195
|
-
},
|
|
196
|
-
labelElement
|
|
197
|
-
)
|
|
198
|
-
)
|
|
199
|
-
), description && /* @__PURE__ */ React3.createElement(FieldDescription, null, description));
|
|
200
|
-
}
|
|
201
|
-
ButtonGroupForm.displayName = "ButtonGroupForm";
|
|
202
|
-
|
|
203
|
-
// src/core/Form.tsx
|
|
204
|
-
function Form({
|
|
205
|
-
form,
|
|
206
|
-
children,
|
|
207
|
-
fields,
|
|
208
|
-
className,
|
|
209
|
-
action,
|
|
210
|
-
method,
|
|
211
|
-
noValidate = true,
|
|
212
|
-
submissionConfig,
|
|
213
|
-
successMessage,
|
|
214
|
-
submissionError,
|
|
215
|
-
successMessageClassName,
|
|
216
|
-
errorMessageClassName,
|
|
217
|
-
onNewSubmission,
|
|
218
|
-
notificationConfig,
|
|
219
|
-
styleConfig,
|
|
220
|
-
formConfig,
|
|
221
|
-
...props
|
|
222
|
-
}) {
|
|
223
|
-
const handleFormSubmit = React3.useCallback(
|
|
224
|
-
async (e) => {
|
|
225
|
-
try {
|
|
226
|
-
await form.handleSubmit(e);
|
|
227
|
-
} catch {
|
|
228
|
-
}
|
|
229
|
-
},
|
|
230
|
-
[form]
|
|
231
|
-
);
|
|
232
|
-
const resolvedClassName = className ?? styleConfig?.formClassName;
|
|
233
|
-
const resolvedAction = action ?? formConfig?.endpoint;
|
|
234
|
-
const resolvedMethod = method ?? formConfig?.method ?? "post";
|
|
235
|
-
const resolvedSubmissionConfig = submissionConfig ?? formConfig?.submissionConfig;
|
|
236
|
-
const resolvedSuccessMessage = successMessage ?? notificationConfig?.successMessage;
|
|
237
|
-
const resolvedSubmissionError = submissionError ?? notificationConfig?.submissionError;
|
|
238
|
-
const resolvedSuccessMessageClassName = successMessageClassName ?? styleConfig?.successMessageClassName;
|
|
239
|
-
const resolvedErrorMessageClassName = errorMessageClassName ?? styleConfig?.errorMessageClassName;
|
|
240
|
-
const behavior = resolvedSubmissionConfig?.behavior || "showConfirmation";
|
|
241
|
-
const shouldManageSubmissionUi = resolvedSubmissionConfig !== void 0 || resolvedSuccessMessage !== void 0 || resolvedSuccessMessageClassName !== void 0 || resolvedErrorMessageClassName !== void 0 || resolvedSubmissionError != null || onNewSubmission !== void 0;
|
|
242
|
-
const hasSubmissionError = Boolean(resolvedSubmissionError);
|
|
243
|
-
const isSubmissionSuccessful = shouldManageSubmissionUi && form.status === "success" && !hasSubmissionError;
|
|
244
|
-
const defaultSuccessMessage = behavior === "redirect" ? "Form submitted successfully. Redirecting..." : "Thank you. Your form has been submitted successfully.";
|
|
245
|
-
const finalSuccessMessage = resolvedSuccessMessage ?? defaultSuccessMessage;
|
|
246
|
-
const shouldRenderCustomComponent = isSubmissionSuccessful && behavior === "renderCustomComponent" && Boolean(resolvedSubmissionConfig?.customComponent);
|
|
247
|
-
const newSubmissionAction = resolvedSubmissionConfig?.newFormSubmissionAction;
|
|
248
|
-
const showNewSubmissionAction = isSubmissionSuccessful && (typeof newSubmissionAction?.enable === "boolean" ? newSubmissionAction.enable : Boolean(newSubmissionAction?.label));
|
|
249
|
-
const newSubmissionLabel = newSubmissionAction?.label ?? "Submit another response";
|
|
250
|
-
const handleNewSubmission = React3.useCallback(() => {
|
|
251
|
-
form.resetForm();
|
|
252
|
-
onNewSubmission?.();
|
|
253
|
-
}, [form, onNewSubmission]);
|
|
254
|
-
const formLayout = formConfig?.formLayout ?? "standard";
|
|
255
|
-
const isButtonGroupLayout = formLayout === "button-group";
|
|
256
|
-
const hasTextField = fields && fields.length === 1 && fields[0] && ["text", "email", "password", "url", "tel", "search"].includes(
|
|
257
|
-
fields[0].type
|
|
258
|
-
);
|
|
259
|
-
const shouldUseButtonGroup = isButtonGroupLayout && hasTextField;
|
|
260
|
-
const buttonGroupContent = React3.useMemo(() => {
|
|
261
|
-
if (!shouldUseButtonGroup || !fields || fields.length === 0) return null;
|
|
262
|
-
const field = fields[0];
|
|
263
|
-
const fieldProps = form.getFieldProps(field.name);
|
|
264
|
-
return /* @__PURE__ */ React3.createElement(
|
|
265
|
-
ButtonGroupForm,
|
|
266
|
-
{
|
|
267
|
-
name: field.name,
|
|
268
|
-
label: field.label,
|
|
269
|
-
className: field.className,
|
|
270
|
-
inputProps: {
|
|
271
|
-
name: fieldProps.name,
|
|
272
|
-
value: fieldProps.value,
|
|
273
|
-
onChange: fieldProps.onChange,
|
|
274
|
-
onBlur: fieldProps.onBlur,
|
|
275
|
-
type: field.type,
|
|
276
|
-
placeholder: field.placeholder,
|
|
277
|
-
required: field.required,
|
|
278
|
-
disabled: field.disabled
|
|
279
|
-
},
|
|
280
|
-
submitLabel: formConfig?.submitLabel,
|
|
281
|
-
submitVariant: formConfig?.submitVariant,
|
|
282
|
-
submitIconName: formConfig?.submitIconName,
|
|
283
|
-
submitIconComponent: formConfig?.submitIconComponent,
|
|
284
|
-
size: formConfig?.buttonGroupSize,
|
|
285
|
-
isSubmitting: form.isSubmitting
|
|
286
|
-
}
|
|
287
|
-
);
|
|
288
|
-
}, [shouldUseButtonGroup, fields, form, formConfig]);
|
|
289
|
-
return /* @__PURE__ */ React3.createElement(FormContext.Provider, { value: form }, /* @__PURE__ */ React3.createElement(
|
|
290
|
-
"form",
|
|
291
|
-
{
|
|
292
|
-
onSubmit: handleFormSubmit,
|
|
293
|
-
action: resolvedAction,
|
|
294
|
-
method: resolvedMethod,
|
|
295
|
-
noValidate,
|
|
296
|
-
className: resolvedClassName,
|
|
297
|
-
...props
|
|
298
|
-
},
|
|
299
|
-
isSubmissionSuccessful ? /* @__PURE__ */ React3.createElement("div", { className: "space-y-4" }, shouldRenderCustomComponent ? resolvedSubmissionConfig?.customComponent : /* @__PURE__ */ React3.createElement(
|
|
300
|
-
FormFeedback,
|
|
301
|
-
{
|
|
302
|
-
successMessage: finalSuccessMessage,
|
|
303
|
-
successMessageClassName: resolvedSuccessMessageClassName
|
|
304
|
-
}
|
|
305
|
-
), showNewSubmissionAction ? /* @__PURE__ */ React3.createElement(
|
|
306
|
-
Button,
|
|
307
|
-
{
|
|
308
|
-
type: "button",
|
|
309
|
-
variant: "outline",
|
|
310
|
-
onClick: handleNewSubmission
|
|
311
|
-
},
|
|
312
|
-
newSubmissionLabel
|
|
313
|
-
) : null) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, shouldUseButtonGroup ? buttonGroupContent : children, resolvedSubmissionError ? /* @__PURE__ */ React3.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React3.createElement(
|
|
314
|
-
FormFeedback,
|
|
315
|
-
{
|
|
316
|
-
submissionError: resolvedSubmissionError,
|
|
317
|
-
errorMessageClassName: resolvedErrorMessageClassName
|
|
318
|
-
}
|
|
319
|
-
)) : null)
|
|
320
|
-
));
|
|
321
|
-
}
|
|
322
|
-
Form.displayName = "Form";
|
|
323
|
-
|
|
324
|
-
export { ButtonGroupForm, Form, FormFeedback };
|
|
325
|
-
//# sourceMappingURL=chunk-H3YJRLVO.js.map
|
|
326
|
-
//# sourceMappingURL=chunk-H3YJRLVO.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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","React2","React4"],"mappings":"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","file":"chunk-H3YJRLVO.js","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"]}
|