@page-speed/forms 0.5.7 → 0.5.9

package/dist/core.d.ts

@@ -1,154 +1,79 @@
-import { b as FormValues, U as UseFormOptions, m as UseFormReturn, p as UseFieldOptions, q as UseFieldReturn, r as FormProps, s as FieldProps } from './types-CnOCn7b3.js';
-export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.js';
+export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-089h0j0Q.js';
 import * as React from 'react';
+import { I as InputProps } from './types-BemGfSPA.js';
+export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.js';
 
+type ButtonGroupFormSize = "xs" | "sm" | "default" | "lg";
+type ButtonGroupFormProps = {
+    /**
+     * Field name
+     */
+    name: string;
+    /**
+     * Optional label above the input
+     */
+    label?: React.ReactNode;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Input props from form field
+     */
+    inputProps: InputProps<string> & {
+        type?: "text" | "email" | "password" | "url" | "tel" | "search";
+    };
+    /**
+     * Submit button label
+     */
+    submitLabel?: React.ReactNode;
+    /**
+     * Submit button size
+     */
+    size?: ButtonGroupFormSize;
+    /**
+     * Submit button variant
+     */
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    /**
+     * Whether form is submitting
+     */
+    isSubmitting?: boolean;
+    /**
+     * Additional className for the container
+     */
+    className?: string;
+    /**
+     * Additional className for the label
+     */
+    labelClassName?: string;
+};
 /**
- * useForm - High-performance form state management with field-level reactivity
+ * ButtonGroupForm - Inline form layout with input and submit button grouped together
  *
- * Built on @legendapp/state for optimal performance:
- * - Field-level reactivity: Only re-render the specific field that changed
- * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks
- * - Tree-shakable: Only bundle what you use
+ * Commonly used for newsletter signups and other simple single-field forms.
+ * The input and button automatically adjust sizing together.
  *
- * @example
- * ```tsx
- * const form = useForm({
- *   initialValues: { email: '', password: '' },
- *   onSubmit: async (values) => {
- *     await login(values);
- *   },
- *   validationSchema: {
- *     email: (value) => !value ? 'Required' : undefined,
- *     password: (value) => value.length < 8 ? 'Too short' : undefined,
- *   },
- * });
- *
- * return (
- *   <form onSubmit={form.handleSubmit}>
- *     <input {...form.getFieldProps('email')} />
- *     {form.errors.email && <span>{form.errors.email}</span>}
- *   </form>
- * );
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/use-form
- */
-declare function useForm<T extends FormValues = FormValues>(options: UseFormOptions<T>): UseFormReturn<T>;
-
-/**
- * useField - Field-level reactive hook for form inputs
- *
- * Provides isolated reactivity for individual form fields.
- * Only re-renders when the specific field changes, not when other fields update.
- *
- * Must be used within a FormContext (inside <Form> component).
- *
- * @example
- * ```tsx
- * function EmailInput() {
- *   const { field, meta, helpers } = useField({ name: 'email' });
- *
- *   return (
- *     <div>
- *       <input {...field} type="email" />
- *       {meta.touched && meta.error && <span>{meta.error}</span>}
- *     </div>
- *   );
- * }
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/use-field
- */
-declare function useField<T = any>(options: UseFieldOptions<T>): UseFieldReturn<T>;
-
-/**
- * Form - Progressive enhancement form component
- *
- * Provides form context to child components and handles form submission.
- * Supports progressive enhancement with server-side fallback.
- *
- * Features:
- * - Provides FormContext for useField hook
- * - Handles form submission with validation
- * - Progressive enhancement support (works without JavaScript)
- * - Accessible form semantics
- *
- * @example
- * ```tsx
- * const form = useForm({
- *   initialValues: { email: '' },
- *   onSubmit: async (values) => {
- *     await submitForm(values);
- *   },
- * });
- *
- * return (
- *   <Form form={form} action="/api/submit" method="post">
- *     <input {...form.getFieldProps('email')} />
- *     <button type="submit">Submit</button>
- *   </Form>
- * );
- * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/form
- */
-declare function Form<T extends FormValues = FormValues>({ form, children, className, action, method, noValidate, submissionConfig, successMessage, submissionError, successMessageClassName, errorMessageClassName, onNewSubmission, notificationConfig, styleConfig, formConfig, ...props }: FormProps<T> & React.FormHTMLAttributes<HTMLFormElement>): React.JSX.Element;
-declare namespace Form {
-    var displayName: string;
-}
-
-/**
- * Field - Field wrapper component with label, description, and error display
- *
- * Provides a complete field UI with automatic error handling and accessibility.
- * Uses useField hook internally for field-level reactivity.
- *
- * Features:
- * - Automatic label association
- * - Error display with accessibility
- * - Optional description text
- * - Render prop pattern for flexibility
- * - Full accessibility support
+ * Size mappings:
+ * - xs: h-8 text-xs
+ * - sm: h-9 text-sm
+ * - default: h-10 text-sm
+ * - lg: h-12 text-base
  *
  * @example
  * ```tsx
- * <Field name="email" label="Email Address" description="We'll never share your email">
- *   {({ field, meta }) => (
- *     <input
- *       {...field}
- *       type="email"
- *       className={meta.error && meta.touched ? 'error' : ''}
- *     />
- *   )}
- * </Field>
+ * <ButtonGroupForm
+ *   name="email"
+ *   placeholder="Enter your email"
+ *   inputProps={form.getFieldProps('email')}
+ *   submitLabel="Subscribe"
+ *   size="default"
+ * />
  * ```
- *
- * @see https://opensite.ai/developers/page-speed/forms/field
  */
-declare function Field({ name, label, description, children, showError, className, errorClassName, required, validate, }: FieldProps): React.JSX.Element;
-declare namespace Field {
-    var displayName: string;
-}
-
-interface FormFeedbackProps {
-    successMessage?: React.ReactNode;
-    submissionError?: React.ReactNode;
-    successMessageClassName?: string;
-    errorMessageClassName?: string;
-}
-declare function FormFeedback({ successMessage, submissionError, successMessageClassName, errorMessageClassName, }: FormFeedbackProps): React.JSX.Element | null;
-declare namespace FormFeedback {
+declare function ButtonGroupForm({ name, label, inputProps, submitLabel, submitVariant, size, isSubmitting, className, labelClassName, }: ButtonGroupFormProps): React.JSX.Element;
+declare namespace ButtonGroupForm {
     var displayName: string;
 }
 
-/**
- * FormContext - React context for providing form state to child components
- *
- * Allows useField hook to access form state without prop drilling.
- * Automatically provided by the <Form> component.
- *
- * @internal
- */
-declare const FormContext: React.Context<UseFormReturn<any> | null>;
-
-export { Field, FieldProps, Form, FormContext, FormFeedback, type FormFeedbackProps, FormProps, FormValues, UseFieldOptions, UseFieldReturn, UseFormOptions, UseFormReturn, useField, useForm };
+export { ButtonGroupForm, type ButtonGroupFormProps, type ButtonGroupFormSize, InputProps };

package/dist/core.js

@@ -1,5 +1,5 @@
-export { Form, FormFeedback } from './chunk-N2HOVRRN.js';
-export { Field, FormContext, useField, useForm } from './chunk-Q7VR374Y.js';
-import './chunk-A7R6GEMA.js';
+export { ButtonGroupForm, Form, FormFeedback } from './chunk-TOPOO33Z.js';
+export { Field, FormContext, useField, useForm } from './chunk-MJYEXJ3U.js';
+import './chunk-455PI4LV.js';
 //# sourceMappingURL=core.js.map
 //# sourceMappingURL=core.js.map

package/dist/index.cjs

@@ -1,54 +1,54 @@
 'use strict';
 
-var chunkO4ZLR7AN_cjs = require('./chunk-O4ZLR7AN.cjs');
-var chunkKPHMVGTU_cjs = require('./chunk-KPHMVGTU.cjs');
-var chunkQQSBW6N3_cjs = require('./chunk-QQSBW6N3.cjs');
+var chunkOF6ZYT7A_cjs = require('./chunk-OF6ZYT7A.cjs');
+var chunkMUBEMXI7_cjs = require('./chunk-MUBEMXI7.cjs');
+var chunkQRI5TMES_cjs = require('./chunk-QRI5TMES.cjs');
 
 
 
 Object.defineProperty(exports, "Form", {
   enumerable: true,
-  get: function () { return chunkO4ZLR7AN_cjs.Form; }
+  get: function () { return chunkOF6ZYT7A_cjs.Form; }
 });
 Object.defineProperty(exports, "FormFeedback", {
   enumerable: true,
-  get: function () { return chunkO4ZLR7AN_cjs.FormFeedback; }
+  get: function () { return chunkOF6ZYT7A_cjs.FormFeedback; }
 });
 Object.defineProperty(exports, "Field", {
   enumerable: true,
-  get: function () { return chunkKPHMVGTU_cjs.Field; }
+  get: function () { return chunkMUBEMXI7_cjs.Field; }
 });
 Object.defineProperty(exports, "FormContext", {
   enumerable: true,
-  get: function () { return chunkKPHMVGTU_cjs.FormContext; }
+  get: function () { return chunkMUBEMXI7_cjs.FormContext; }
 });
 Object.defineProperty(exports, "useField", {
   enumerable: true,
-  get: function () { return chunkKPHMVGTU_cjs.useField; }
+  get: function () { return chunkMUBEMXI7_cjs.useField; }
 });
 Object.defineProperty(exports, "useForm", {
   enumerable: true,
-  get: function () { return chunkKPHMVGTU_cjs.useForm; }
+  get: function () { return chunkMUBEMXI7_cjs.useForm; }
 });
 Object.defineProperty(exports, "FieldDescription", {
   enumerable: true,
-  get: function () { return chunkQQSBW6N3_cjs.FieldDescription; }
+  get: function () { return chunkQRI5TMES_cjs.FieldDescription; }
 });
 Object.defineProperty(exports, "FieldError", {
   enumerable: true,
-  get: function () { return chunkQQSBW6N3_cjs.FieldError; }
+  get: function () { return chunkQRI5TMES_cjs.FieldError; }
 });
 Object.defineProperty(exports, "FieldGroup", {
   enumerable: true,
-  get: function () { return chunkQQSBW6N3_cjs.FieldGroup; }
+  get: function () { return chunkQRI5TMES_cjs.FieldGroup; }
 });
 Object.defineProperty(exports, "FieldWrapper", {
   enumerable: true,
-  get: function () { return chunkQQSBW6N3_cjs.Field; }
+  get: function () { return chunkQRI5TMES_cjs.Field; }
 });
 Object.defineProperty(exports, "FormFieldLabel", {
   enumerable: true,
-  get: function () { return chunkQQSBW6N3_cjs.FieldLabel; }
+  get: function () { return chunkQRI5TMES_cjs.FieldLabel; }
 });
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-export { Field, Form, FormContext, FormFeedback, FormFeedbackProps, useField, useForm } from './core.cjs';
-export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.cjs';
+export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-iHzBALZa.cjs';
+export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.cjs';
 import * as React from 'react';
 
 type FieldOrientation = "vertical" | "horizontal";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { Field, Form, FormContext, FormFeedback, FormFeedbackProps, useField, useForm } from './core.js';
-export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-CnOCn7b3.js';
+export { b as Field, F as Form, d as FormContext, c as FormFeedback, e as FormFeedbackProps, a as useField, u as useForm } from './FormContext-089h0j0Q.js';
+export { E as ErrorHandler, n as FieldInputProps, o as FieldMeta, s as FieldProps, F as FieldValidator, l as FormActions, c as FormErrors, i as FormHelpers, f as FormNotificationConfig, r as FormProps, h as FormRenderConfig, k as FormState, g as FormStyleConfig, d as FormSubmissionBehavior, e as FormSubmissionConfig, b as FormValues, I as InputProps, N as NewFormSubmissionActionConfig, S as SubmissionStatus, j as SubmitHandler, T as TouchedFields, p as UseFieldOptions, q as UseFieldReturn, U as UseFormOptions, m as UseFormReturn, a as ValidationMode, V as ValidationSchema } from './types-BemGfSPA.js';
 import * as React from 'react';
 
 type FieldOrientation = "vertical" | "horizontal";

package/dist/index.js

@@ -1,5 +1,5 @@
-export { Form, FormFeedback } from './chunk-N2HOVRRN.js';
-export { Field, FormContext, useField, useForm } from './chunk-Q7VR374Y.js';
-export { FieldDescription, FieldError, FieldGroup, Field as FieldWrapper, FieldLabel as FormFieldLabel } from './chunk-A7R6GEMA.js';
+export { Form, FormFeedback } from './chunk-TOPOO33Z.js';
+export { Field, FormContext, useField, useForm } from './chunk-MJYEXJ3U.js';
+export { FieldDescription, FieldError, FieldGroup, Field as FieldWrapper, FieldLabel as FormFieldLabel } from './chunk-455PI4LV.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/inputs.cjs

@@ -1,57 +1,57 @@
 'use strict';
 
-var chunkFIDKDYT7_cjs = require('./chunk-FIDKDYT7.cjs');
-require('./chunk-QQSBW6N3.cjs');
+var chunkED4UK63G_cjs = require('./chunk-ED4UK63G.cjs');
+var chunkQRI5TMES_cjs = require('./chunk-QRI5TMES.cjs');
 
 
 
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.Checkbox; }
+  get: function () { return chunkED4UK63G_cjs.Checkbox; }
 });
 Object.defineProperty(exports, "CheckboxGroup", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.CheckboxGroup; }
+  get: function () { return chunkED4UK63G_cjs.CheckboxGroup; }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.DatePicker; }
+  get: function () { return chunkED4UK63G_cjs.DatePicker; }
 });
 Object.defineProperty(exports, "DateRangePicker", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.DateRangePicker; }
+  get: function () { return chunkED4UK63G_cjs.DateRangePicker; }
 });
 Object.defineProperty(exports, "FileInput", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.FileInput; }
+  get: function () { return chunkED4UK63G_cjs.FileInput; }
 });
 Object.defineProperty(exports, "MultiSelect", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.MultiSelect; }
+  get: function () { return chunkED4UK63G_cjs.MultiSelect; }
 });
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.Radio; }
+  get: function () { return chunkED4UK63G_cjs.Radio; }
 });
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.Select; }
+  get: function () { return chunkED4UK63G_cjs.Select; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.Switch; }
+  get: function () { return chunkED4UK63G_cjs.Switch; }
 });
 Object.defineProperty(exports, "TextArea", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.TextArea; }
+  get: function () { return chunkED4UK63G_cjs.TextArea; }
 });
-Object.defineProperty(exports, "TextInput", {
+Object.defineProperty(exports, "TimePicker", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.TextInput; }
+  get: function () { return chunkED4UK63G_cjs.TimePicker; }
 });
-Object.defineProperty(exports, "TimePicker", {
+Object.defineProperty(exports, "TextInput", {
   enumerable: true,
-  get: function () { return chunkFIDKDYT7_cjs.TimePicker; }
+  get: function () { return chunkQRI5TMES_cjs.TextInput; }
 });
 //# sourceMappingURL=inputs.cjs.map
 //# sourceMappingURL=inputs.cjs.map

package/dist/inputs.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { I as InputProps } from './types-CnOCn7b3.cjs';
+import { I as InputProps } from './types-BemGfSPA.cjs';
 
 /**
  * TextInput - High-performance text input component (ShadCN-based)

package/dist/inputs.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { I as InputProps } from './types-CnOCn7b3.js';
+import { I as InputProps } from './types-BemGfSPA.js';
 
 /**
  * TextInput - High-performance text input component (ShadCN-based)

package/dist/inputs.js

@@ -1,4 +1,4 @@
-export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TextInput, TimePicker } from './chunk-5WWMVS2I.js';
-import './chunk-A7R6GEMA.js';
+export { Checkbox, CheckboxGroup, DatePicker, DateRangePicker, FileInput, MultiSelect, Radio, Select, Switch, TextArea, TimePicker } from './chunk-4ROWNTY6.js';
+export { TextInput } from './chunk-455PI4LV.js';
 //# sourceMappingURL=inputs.js.map
 //# sourceMappingURL=inputs.js.map

package/dist/integration.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkKPHMVGTU_cjs = require('./chunk-KPHMVGTU.cjs');
-var chunkFIDKDYT7_cjs = require('./chunk-FIDKDYT7.cjs');
-require('./chunk-QQSBW6N3.cjs');
+var chunkMUBEMXI7_cjs = require('./chunk-MUBEMXI7.cjs');
+var chunkED4UK63G_cjs = require('./chunk-ED4UK63G.cjs');
+var chunkQRI5TMES_cjs = require('./chunk-QRI5TMES.cjs');
 var React2 = require('react');
 
 function _interopNamespace(e) {
@@ -565,7 +565,7 @@ function useContactForm(options) {
       window.location.assign(destination);
     }, 150);
   }, [navigate, redirectUrl]);
-  const form = chunkKPHMVGTU_cjs.useForm({
+  const form = chunkMUBEMXI7_cjs.useForm({
     initialValues: React2.useMemo(
       () => generateInitialValues(formFields),
       [formFields]
@@ -643,7 +643,7 @@ function DynamicFormField({
   const usesInlineCheckboxLabel = field.type === "checkbox";
   const shouldRenderFieldLabel = renderLabel && !usesGroupLegend && !usesInlineCheckboxLabel;
   return /* @__PURE__ */ React2__namespace.createElement(
-    chunkKPHMVGTU_cjs.Field,
+    chunkMUBEMXI7_cjs.Field,
     {
       name: field.name,
       label: shouldRenderFieldLabel ? field.label : void 0,
@@ -652,7 +652,7 @@ function DynamicFormField({
       className
     },
     ({ field: formField, meta }) => /* @__PURE__ */ React2__namespace.createElement("div", null, (field.type === "text" || field.type === "email" || field.type === "tel" || field.type === "search" || field.type === "password" || field.type === "url") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.TextInput,
+      chunkQRI5TMES_cjs.TextInput,
       {
         ...formField,
         id: fieldId,
@@ -663,7 +663,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "number" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.TextInput,
+      chunkQRI5TMES_cjs.TextInput,
       {
         ...formField,
         id: fieldId,
@@ -674,7 +674,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "textarea" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.TextArea,
+      chunkED4UK63G_cjs.TextArea,
       {
         ...formField,
         id: fieldId,
@@ -685,7 +685,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.Select,
+      chunkED4UK63G_cjs.Select,
       {
         ...formField,
         id: fieldId,
@@ -696,7 +696,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "multi-select" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.MultiSelect,
+      chunkED4UK63G_cjs.MultiSelect,
       {
         ...formField,
         id: fieldId,
@@ -707,7 +707,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "radio" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.Radio,
+      chunkED4UK63G_cjs.Radio,
       {
         ...formField,
         id: fieldId,
@@ -721,7 +721,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.Checkbox,
+      chunkED4UK63G_cjs.Checkbox,
       {
         ...formField,
         id: fieldId,
@@ -735,7 +735,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "checkbox-group" && field.options && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.CheckboxGroup,
+      chunkED4UK63G_cjs.CheckboxGroup,
       {
         ...formField,
         id: fieldId,
@@ -749,7 +749,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), (field.type === "date-picker" || field.type === "date") && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.DatePicker,
+      chunkED4UK63G_cjs.DatePicker,
       {
         ...formField,
         id: fieldId,
@@ -759,7 +759,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "date-range" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.DateRangePicker,
+      chunkED4UK63G_cjs.DateRangePicker,
       {
         ...formField,
         id: fieldId,
@@ -769,7 +769,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "time" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.TimePicker,
+      chunkED4UK63G_cjs.TimePicker,
       {
         ...formField,
         id: fieldId,
@@ -779,7 +779,7 @@ function DynamicFormField({
         "aria-label": field.label
       }
     ), field.type === "file" && /* @__PURE__ */ React2__namespace.createElement(
-      chunkFIDKDYT7_cjs.FileInput,
+      chunkED4UK63G_cjs.FileInput,
       {
         ...formField,
         id: fieldId,

package/dist/integration.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, m as UseFormReturn } from './types-CnOCn7b3.cjs';
+import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, m as UseFormReturn } from './types-BemGfSPA.cjs';
 
 /**
  * @page-speed/forms - Rails API Serializer

package/dist/integration.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, m as UseFormReturn } from './types-CnOCn7b3.js';
+import { d as FormSubmissionBehavior, N as NewFormSubmissionActionConfig, m as UseFormReturn } from './types-BemGfSPA.js';
 
 /**
  * @page-speed/forms - Rails API Serializer

package/dist/integration.js

@@ -1,6 +1,6 @@
-import { useForm, Field } from './chunk-Q7VR374Y.js';
-import { TextInput, TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput } from './chunk-5WWMVS2I.js';
-import './chunk-A7R6GEMA.js';
+import { useForm, Field } from './chunk-MJYEXJ3U.js';
+import { TextArea, Select, MultiSelect, Radio, Checkbox, CheckboxGroup, DatePicker, DateRangePicker, TimePicker, FileInput } from './chunk-4ROWNTY6.js';
+import { TextInput } from './chunk-455PI4LV.js';
 import * as React2 from 'react';
 import { useState, useCallback, useMemo } from 'react';
 

package/dist/{types-CnOCn7b3.d.ts → types-BemGfSPA.d.cts}

@@ -340,6 +340,27 @@ interface FormRenderConfig {
      * Optional submission behavior configuration.
      */
     submissionConfig?: FormSubmissionConfig;
+    /**
+     * Optional layout configuration. If button-group, the form will be rendered with an input field and submit button.
+     * "button-group" is most commonly used for newsletter type forms.
+     * @default "standard"
+     */
+    formLayout?: "standard" | "button-group";
+    /**
+     * Size for button-group layout (only applies when formLayout is "button-group")
+     * @default "default"
+     */
+    buttonGroupSize?: "xs" | "sm" | "default" | "lg";
+    /**
+     * Submit button label for button-group layout
+     * @default "Submit"
+     */
+    submitLabel?: React.ReactNode;
+    /**
+     * Submit button variant for button-group layout
+     * @default "default"
+     */
+    submitVariant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
 }
 /**
  * Form component props
@@ -352,7 +373,12 @@ interface FormProps<T extends FormValues = FormValues> {
     /**
      * Form children
      */
-    children: ReactNode;
+    children?: ReactNode;
+    /**
+     * Optional form fields for button-group layout rendering
+     * Required when using formLayout="button-group"
+     */
+    fields?: any[];
     /**
      * Additional className
      */