@page-speed/forms 0.7.8 → 0.8.0

package/README.md

@@ -1,8 +1,8 @@
-![Page Speed React Forms](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/286339/nwqgw37pigfluhcmmjmpql3yj9y4/github.png&q=90)
+# ⌨️ `@page-speed/forms`
 
-# `@page-speed/forms`
+![Page Speed React Forms](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/286339/nwqgw37pigfluhcmmjmpql3yj9y4/github.png&f=webp&q=90)
 
-Type-safe, high-performance React form state and input components for OpenSite/DashTrack workloads.
+> Type-safe, high-performance React form state and input components for OpenSite/DashTrack workloads.
 
 [![npm version](https://img.shields.io/npm/v/@page-speed/forms?style=flat-square)](https://www.npmjs.com/package/@page-speed/forms)
 [![npm downloads](https://img.shields.io/npm/dm/@page-speed/forms?style=flat-square)](https://www.npmjs.com/package/@page-speed/forms)
@@ -10,8 +10,8 @@ Type-safe, high-performance React form state and input components for OpenSite/D
 
 ## Highlights
 
+- **`FormEngine`** — declarative form component with built-in API integration
 - Field-level reactivity via `@legendapp/state/react`
-- Typed `useForm` and `useField` APIs
 - Built-in input library (text, select, date, time, upload, rich text)
 - Tree-shakable subpath exports (`/core`, `/inputs`, `/validation`, `/upload`, `/integration`)
 - Validation rules and utilities (sync + async)
@@ -30,112 +30,151 @@ Peer dependencies:
 - `react >= 16.8.0`
 - `react-dom >= 16.8.0`
 
-## Quick Start
+## Quick Start with FormEngine
+
+`FormEngine` is the recommended entry point for most use cases. It provides a declarative API for rendering forms with built-in API integration, validation, file uploads, and styling.
 
 ```tsx
 import * as React from "react";
-import { Form, Field, useForm } from "@page-speed/forms";
-import { TextInput, Select } from "@page-speed/forms/inputs";
-import { required, email } from "@page-speed/forms/validation/rules";
+import {
+  FormEngine,
+  type FormFieldConfig,
+} from "@page-speed/forms/integration";
 
-export function ContactForm() {
-  const form = useForm({
-    initialValues: {
-      fullName: "",
-      email: "",
-      inquiryType: "",
-    },
-    validationSchema: {
-      fullName: required(),
-      email: [required(), email()],
-      inquiryType: required(),
-    },
-    onSubmit: async (values) => {
-      console.log(values);
-    },
-  });
+const fields: FormFieldConfig[] = [
+  {
+    name: "fullName",
+    type: "text",
+    label: "Full Name",
+    required: true,
+    placeholder: "Your name",
+    columnSpan: 12,
+  },
+  {
+    name: "email",
+    type: "email",
+    label: "Email",
+    required: true,
+    placeholder: "you@example.com",
+    columnSpan: 6,
+  },
+  {
+    name: "phone",
+    type: "tel",
+    label: "Phone",
+    columnSpan: 6,
+  },
+  {
+    name: "message",
+    type: "textarea",
+    label: "Message",
+    required: true,
+    columnSpan: 12,
+  },
+];
 
+export function ContactForm() {
   return (
-    <Form form={form}>
-      <Field name="fullName" label="Full Name" required>
-        {({ field, meta }) => (
-          <TextInput
-            {...field}
-            placeholder="Your name"
-            error={Boolean(meta.touched && meta.error)}
-          />
-        )}
-      </Field>
+    <FormEngine
+      api={{
+        endpoint: "/api/contact",
+        method: "post",
+        submissionConfig: { behavior: "showConfirmation" },
+      }}
+      fields={fields}
+      successMessage="Thanks for reaching out!"
+      formLayoutSettings={{
+        submitButtonSetup: {
+          submitLabel: "Send Message",
+        },
+      }}
+    />
+  );
+}
+```
 
-      <Field name="email" label="Email" required>
-        {({ field, meta }) => (
-          <TextInput
-            {...field}
-            type="email"
-            placeholder="you@example.com"
-            error={Boolean(meta.touched && meta.error)}
-          />
-        )}
-      </Field>
+### FormEngine Props
 
-      <Field name="inquiryType" label="Inquiry Type" required>
-        {({ field, meta }) => (
-          <Select
-            {...field}
-            options={[
-              { label: "General", value: "general" },
-              { label: "Sales", value: "sales" },
-              { label: "Support", value: "support" },
-            ]}
-            error={Boolean(meta.touched && meta.error)}
-          />
-        )}
-      </Field>
+| Prop | Type | Description |
+|------|------|-------------|
+| `api` | `PageSpeedFormConfig` | API endpoint and submission configuration |
+| `fields` | `FormFieldConfig[]` | Array of field definitions |
+| `formLayoutSettings` | `FormEngineLayoutSettings` | Layout, style, and submit button settings |
+| `successMessage` | `ReactNode` | Message shown after successful submission |
+| `onSubmit` | `(values) => void \| Promise<void>` | Custom submit handler |
+| `onSuccess` | `(data) => void` | Called after successful submission |
+| `onError` | `(error) => void` | Called when submission fails |
+| `resetOnSuccess` | `boolean` | Reset form after success (default: `true`) |
 
-      <button type="submit" disabled={form.isSubmitting}>
-        Submit
-      </button>
-    </Form>
-  );
+### Field Configuration
+
+Each field in the `fields` array supports:
+
+```tsx
+interface FormFieldConfig {
+  name: string;
+  type: "text" | "email" | "tel" | "textarea" | "select" | "multiselect" | 
+        "date" | "daterange" | "time" | "file" | "checkbox" | "radio";
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  columnSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+  className?: string;
+  options?: { label: string; value: string }[]; // For select/multiselect/radio
+  // File-specific props
+  accept?: string;
+  maxFiles?: number;
+  maxFileSize?: number;
 }
 ```
 
-### Grouped Form Configuration
+### Layout Options
 
-`Form` supports both classic props and grouped config objects for cleaner callsites.
+#### Standard Layout (default)
 
-```tsx
-import * as React from "react";
-import { Form } from "@page-speed/forms";
+Multi-column grid with a submit button below the fields:
 
-<Form
-  form={form}
-  notificationConfig={{
-    successMessage: "Thanks, submission received.",
-    submissionError,
-  }}
-  styleConfig={{
-    formClassName: "space-y-6",
-    successMessageClassName: "bg-emerald-600 text-white",
-    errorMessageClassName: "bg-red-600 text-white",
+```tsx
+<FormEngine
+  fields={fields}
+  formLayoutSettings={{
+    formLayout: "standard",
+    submitButtonSetup: {
+      submitLabel: "Submit",
+      submitVariant: "default", // | "destructive" | "outline" | "secondary" | "ghost" | "link"
+    },
+    styleRules: {
+      formContainer: "max-w-2xl mx-auto",
+      fieldsContainer: "gap-6",
+      formClassName: "space-y-4",
+    },
   }}
-  formConfig={{
-    endpoint: "/api/contact",
-    method: "post",
-    submissionConfig: {
-      behavior: "showConfirmation",
+/>
+```
+
+#### Button-Group Layout
+
+Inline input with submit button (e.g., newsletter signup):
+
+```tsx
+<FormEngine
+  fields={[{ name: "email", type: "email", label: "Email", required: true }]}
+  formLayoutSettings={{
+    formLayout: "button-group",
+    buttonGroupSetup: {
+      size: "lg", // | "xs" | "sm" | "default"
+      submitLabel: "Subscribe",
+      submitVariant: "default",
     },
   }}
-/>;
+/>
 ```
 
-### `FormEngine` Defaults + Wrapper Setup
+### Using formEngineSetup Wrapper
 
-`FormEngine` supports both direct props and a wrapper setup object. This is useful
-for block/component libraries that want to provide local default fields and styles.
+For block/component libraries that provide default configurations:
 
 ```tsx
-import * as React from "react";
 import {
   FormEngine,
   type FormEngineSetup,
@@ -151,16 +190,16 @@ const defaultStyleRules: FormEngineStyleRules = {
   formClassName: "space-y-6",
 };
 
-const setup: FormEngineSetup = {
-  api: { endpoint: "/api/contact", method: "post" },
-  formLayoutSettings: { formLayout: "standard" },
-};
-
-<FormEngine
-  formEngineSetup={setup}
-  defaultFields={defaultFields}
-  defaultStyleRules={defaultStyleRules}
-/>;
+// Consumer passes setup, component provides defaults
+function ContactBlock({ formEngineSetup }: { formEngineSetup?: FormEngineSetup }) {
+  return (
+    <FormEngine
+      formEngineSetup={formEngineSetup}
+      defaultFields={defaultFields}
+      defaultStyleRules={defaultStyleRules}
+    />
+  );
+}
 ```
 
 ## Package Entry Points
@@ -170,22 +209,22 @@ const setup: FormEngineSetup = {
 
 Exports:
 - `useForm`, `useField`, `Form`, `Field`, `FormContext`
-- core form/types interfaces
+- Core form/types interfaces
+
+### Integration (Recommended)
+- `@page-speed/forms/integration`
+
+Exports:
+- `FormEngine`, `FormEngineSetup`, `FormEngineProps`
+- `FormFieldConfig`, `FormEngineStyleRules`, `FormEngineLayoutSettings`
+- `DynamicFormField`, `useContactForm`, `useFileUpload`
 
 ### Inputs
 - `@page-speed/forms/inputs`
 
 Exports:
-- `TextInput`
-- `TextArea`
-- `Checkbox`
-- `CheckboxGroup`
-- `Radio`
-- `Select`
-- `MultiSelect`
-- `DatePicker`
-- `DateRangePicker`
-- `TimePicker`
+- `TextInput`, `TextArea`, `Checkbox`, `CheckboxGroup`, `Radio`
+- `Select`, `MultiSelect`, `DatePicker`, `DateRangePicker`, `TimePicker`
 - `FileInput`
 
 ### Validation
@@ -194,14 +233,13 @@ Exports:
 - `@page-speed/forms/validation/utils`
 - `@page-speed/forms/validation/valibot`
 
-### Upload and Integration
+### Upload
 - `@page-speed/forms/upload`
-- `@page-speed/forms/integration`
 
 ## Input Notes
 
 ### `TimePicker`
-`TimePicker` now uses a native `input[type="time"]` UX internally.
+`TimePicker` uses a native `input[type="time"]` UX internally.
 
 - Accepts controlled values in `HH:mm` (24-hour) or `h:mm AM/PM` (12-hour)
 - Emits `HH:mm` when `use24Hour` is `true`
@@ -222,8 +260,6 @@ Exports:
 
 This library ships with Tailwind utility classes and semantic token class names.
 
-It is **not** a BEM-only unstyled package anymore.
-
 ### Base conventions
 
 - Inputs/triggers are transparent shells with semantic borders/rings
@@ -231,6 +267,19 @@ It is **not** a BEM-only unstyled package anymore.
 - Error states use destructive border/ring
 - Dropdown selected rows use muted backgrounds
 
+### FormEngine Style Rules
+
+```tsx
+interface FormEngineStyleRules {
+  formContainer?: string;       // Wrapper around <form>
+  fieldsContainer?: string;     // Grid wrapper for fields
+  fieldClassName?: string;      // Fallback className for fields
+  formClassName?: string;       // Applied to <form> element
+  successMessageClassName?: string;
+  errorMessageClassName?: string;
+}
+```
+
 ### Autofill normalization
 
 Text-like controls apply autofill reset classes to avoid browser-injected background/text colors breaking your theme contrast.
@@ -249,6 +298,41 @@ Ensure your app defines semantic tokens used in classes such as:
 
 For complete styling guidance, see [`docs/STYLES.md`](./docs/STYLES.md).
 
+## Advanced: Low-Level APIs
+
+For custom form implementations, the lower-level `useForm`, `Form`, and `Field` APIs are available:
+
+```tsx
+import { Form, Field, useForm } from "@page-speed/forms";
+import { TextInput } from "@page-speed/forms/inputs";
+
+function CustomForm() {
+  const form = useForm({
+    initialValues: { email: "" },
+    validationSchema: {
+      email: (value) => (!value ? "Required" : undefined),
+    },
+    onSubmit: async (values) => {
+      console.log(values);
+    },
+  });
+
+  return (
+    <Form form={form}>
+      <Field name="email" label="Email">
+        {({ field, meta }) => (
+          <TextInput
+            {...field}
+            error={Boolean(meta.touched && meta.error)}
+          />
+        )}
+      </Field>
+      <button type="submit">Submit</button>
+    </Form>
+  );
+}
+```
+
 ## Validation Utilities
 
 Use built-in rules:
@@ -264,7 +348,7 @@ Use utilities from `/validation/utils`:
 
 ## File Uploads
 
-`FileInput` supports validation, drag/drop, preview, and crop workflows.
+`FileInput` and `FormEngine` support validation, drag/drop, preview, and crop workflows.
 
 For full two-phase upload patterns and serializer usage, see:
 - [`docs/FILE_UPLOADS.md`](./docs/FILE_UPLOADS.md)

package/dist/{chunk-MRGJTFGD.js → chunk-CZYQWVD5.js}

@@ -1,4 +1,4 @@
-import { cn, FieldLabel, TextInput, Button, FieldDescription, Field, LabelGroup, FieldError } from './chunk-EQKN2OPX.js';
+import { cn, FieldLabel, TextInput, Button, FieldDescription, Field, LabelGroup, FieldError } from './chunk-ZBRU7R6C.js';
 import * as React5 from 'react';
 import { useRef, useCallback, useContext } from 'react';
 import { useObservable, useSelector } from '@legendapp/state/react';
@@ -403,8 +403,16 @@ var FieldFeedback = ({
   shouldRenderError
 }) => {
   const errorText = Array.isArray(error) ? error.join(", ") : error;
-  if (!errorText || !shouldRenderError) return null;
-  return /* @__PURE__ */ React5.createElement(FieldError, { id: errorId, className: errorClassName }, errorText);
+  const showError = Boolean(errorText && shouldRenderError);
+  return /* @__PURE__ */ React5.createElement(
+    FieldError,
+    {
+      id: errorId,
+      className: cn(errorClassName, !showError && "invisible"),
+      "aria-hidden": !showError || void 0
+    },
+    showError ? errorText : "\xA0"
+  );
 };
 var DEFAULT_ICON_API_KEY = "au382bi7fsh96w9h9xlrnat2jglx";
 var INPUT_SIZE_CLASSES = {
@@ -707,5 +715,5 @@ function Field2({
 Field2.displayName = "Field";
 
 export { ButtonGroupForm, Field2 as Field, Form, FormContext, FormFeedback, useField, useForm };
-//# sourceMappingURL=chunk-MRGJTFGD.js.map
-//# sourceMappingURL=chunk-MRGJTFGD.js.map
+//# sourceMappingURL=chunk-CZYQWVD5.js.map
+//# sourceMappingURL=chunk-CZYQWVD5.js.map

package/dist/chunk-CZYQWVD5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/useForm.ts","../src/core/FormContext.tsx","../src/core/useField.ts","../src/core/form-feedback.tsx","../src/components/ui/button-group.tsx","../src/core/field-feedback.tsx","../src/core/button-group-form.tsx","../src/core/Form.tsx","../src/core/Field.tsx"],"names":["errors","touched","values","initialValues","React","useCallback","React2","React3","React4","React6","Field","React7"],"mappings":"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","file":"chunk-CZYQWVD5.js","sourcesContent":["\"use client\";\n\nimport { useCallback, useRef } from \"react\";\nimport { useObservable, useSelector } from \"@legendapp/state/react\";\n// Tree-shakable imports from @opensite/hooks following ECOSYSTEM_GUIDELINES\nimport { useMap } from \"@opensite/hooks/useMap\";\nimport type {\n  FormValues,\n  FormErrors,\n  TouchedFields,\n  UseFormOptions,\n  UseFormReturn,\n  SubmissionStatus,\n  FieldInputProps,\n  FieldMeta,\n  FormHelpers,\n} from \"./types\";\n\n/**\n * useForm - High-performance form state management with field-level reactivity\n *\n * Built on @legendapp/state for optimal performance:\n * - Field-level reactivity: Only re-render the specific field that changed\n * - Observable-based state: ~1 re-render per change vs ~10 for traditional hooks\n * - Tree-shakable: Only bundle what you use\n *\n * @example\n * ```tsx\n * const form = useForm({\n *   initialValues: { email: '', password: '' },\n *   onSubmit: async (values) => {\n *     await login(values);\n *   },\n *   validationSchema: {\n *     email: (value) => !value ? 'Required' : undefined,\n *     password: (value) => value.length < 8 ? 'Too short' : undefined,\n *   },\n * });\n *\n * return (\n *   <form onSubmit={form.handleSubmit}>\n *     <input {...form.getFieldProps('email')} />\n *     {form.errors.email && <span>{form.errors.email}</span>}\n *   </form>\n * );\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/use-form\n */\nexport function useForm<T extends FormValues = FormValues>(\n  options: UseFormOptions<T>\n): UseFormReturn<T> {\n  const {\n    initialValues,\n    validationSchema,\n    validateOn = \"onBlur\",\n    revalidateOn = \"onChange\",\n    onSubmit,\n    onError,\n    debug = false,\n  } = options;\n\n  // Create observable form state for field-level reactivity\n  // Note: Type assertion needed for @legendapp/state beta compatibility\n  // The beta version's TypeScript types don't properly expose nested Observable properties\n  // This will be removed once stable v3.0.0 is released with proper type definitions\n  const state$ = useObservable({\n    values: initialValues,\n    errors: {} as FormErrors<T>,\n    touched: {} as TouchedFields<T>,\n    isSubmitting: false,\n    status: \"idle\" as SubmissionStatus,\n    initialValues: { ...initialValues }, // Create a copy to prevent reference sharing\n    hasValidated: {} as Record<string, boolean>,\n  }) as any;\n\n  // Track validation in progress to prevent race conditions\n  const validationInProgress = useRef<Set<string>>(new Set());\n\n  // Enhanced state management with @opensite/hooks\n  // useMap: Manage complex nested field metadata immutably\n  const [, fieldMetadataActions] = useMap<\n    string,\n    { lastValidated?: number; validationCount: number }\n  >();\n\n  /**\n   * Validate a single field\n   * Enhanced with @opensite/hooks useMap for metadata tracking\n   */\n  const validateField = useCallback(\n    async <K extends keyof T>(field: K): Promise<string | undefined> => {\n      const validators = validationSchema?.[field];\n      if (!validators) return undefined;\n\n      const fieldKey = String(field);\n      validationInProgress.current.add(fieldKey);\n\n      // Track validation metadata using useMap\n      const currentMeta = fieldMetadataActions.get(fieldKey) || {\n        validationCount: 0,\n      };\n      fieldMetadataActions.set(fieldKey, {\n        lastValidated: Date.now(),\n        validationCount: currentMeta.validationCount + 1,\n      });\n\n      try {\n        const value = state$.values[field].get();\n        const allValues = state$.values.get();\n\n        const validatorArray = Array.isArray(validators)\n          ? validators\n          : [validators];\n\n        for (const validator of validatorArray) {\n          const error = await validator(value, allValues);\n          if (error) {\n            state$.errors[field].set(error);\n            validationInProgress.current.delete(fieldKey);\n            return error;\n          }\n        }\n\n        // Clear error if validation passed\n        state$.errors[field].set(undefined);\n        validationInProgress.current.delete(fieldKey);\n        return undefined;\n      } catch (error) {\n        validationInProgress.current.delete(fieldKey);\n        const errorMessage =\n          error instanceof Error ? error.message : \"Validation error\";\n        state$.errors[field].set(errorMessage);\n        return errorMessage;\n      }\n    },\n    [validationSchema, state$, fieldMetadataActions]\n  );\n\n  /**\n   * Validate entire form\n   */\n  const validateForm = useCallback(async (): Promise<FormErrors<T>> => {\n    if (!validationSchema) return {};\n\n    const fields = Object.keys(validationSchema) as Array<keyof T>;\n    const errors: FormErrors<T> = {};\n\n    await Promise.all(\n      fields.map(async (field) => {\n        const error = await validateField(field);\n        if (error) {\n          errors[field] = error;\n        }\n      })\n    );\n\n    state$.errors.set(errors);\n    return errors;\n  }, [validationSchema, validateField, state$]);\n\n  /**\n   * Set field value with optional validation\n   */\n  const setFieldValue = useCallback(\n    <K extends keyof T>(field: K, value: T[K]) => {\n      state$.values[field].set(value);\n\n      // Revalidate if field has been validated before\n      const shouldRevalidate =\n        revalidateOn === \"onChange\" &&\n        state$.hasValidated[String(field)].get();\n\n      if (shouldRevalidate && validationSchema?.[field]) {\n        validateField(field);\n      }\n\n      if (debug) {\n        console.log(\"[useForm] setFieldValue:\", { field, value });\n      }\n    },\n    [state$, revalidateOn, validationSchema, validateField, debug]\n  );\n\n  /**\n   * Set field as touched with optional validation\n   */\n  const setFieldTouched = useCallback(\n    <K extends keyof T>(field: K, touched: boolean) => {\n      state$.touched[field].set(touched);\n\n      // Validate on blur if configured\n      if (touched && validateOn === \"onBlur\" && validationSchema?.[field]) {\n        state$.hasValidated[String(field)].set(true);\n        validateField(field);\n      }\n\n      if (debug) {\n        console.log(\"[useForm] setFieldTouched:\", { field, touched });\n      }\n    },\n    [state$, validateOn, validationSchema, validateField, debug]\n  );\n\n  /**\n   * Reset form to initial values\n   * Enhanced with @opensite/hooks useMap to clear field metadata\n   */\n  const resetForm = useCallback(() => {\n    state$.values.set(state$.initialValues.get());\n    state$.errors.set({});\n    state$.touched.set({});\n    state$.isSubmitting.set(false);\n    state$.status.set(\"idle\");\n    state$.hasValidated.set({});\n\n    // Clear field metadata tracked by useMap\n    fieldMetadataActions.clear();\n\n    if (debug) {\n      console.log(\"[useForm] Form reset\");\n    }\n  }, [state$, fieldMetadataActions, debug]);\n\n  /**\n   * Handle form submission\n   */\n  const handleSubmit = useCallback(\n    async (e?: React.FormEvent) => {\n      e?.preventDefault();\n\n      if (debug) {\n        console.log(\"[useForm] handleSubmit started\");\n      }\n\n      state$.isSubmitting.set(true);\n      state$.status.set(\"submitting\");\n\n      try {\n        // Validate form\n        const errors = await validateForm();\n        const hasErrors = Object.keys(errors).length > 0;\n\n        if (hasErrors) {\n          state$.status.set(\"error\");\n          onError?.(errors);\n\n          if (debug) {\n            console.log(\"[useForm] Validation errors:\", errors);\n          }\n\n          return;\n        }\n\n        // Create form helpers\n        const helpers: FormHelpers<T> = {\n          setValues: (values) => {\n            if (typeof values === \"function\") {\n              state$.values.set(values(state$.values.get()));\n            } else {\n              state$.values.set(values);\n            }\n          },\n          setFieldValue,\n          setErrors: (errors) => state$.errors.set(errors),\n          setFieldError: (field, error) => state$.errors[field].set(error),\n          setTouched: (touched) => state$.touched.set(touched),\n          setFieldTouched,\n          setSubmitting: (submitting) => state$.isSubmitting.set(submitting),\n          resetForm,\n        };\n\n        // Call submission handler\n        await onSubmit(state$.values.get(), helpers);\n\n        state$.status.set(\"success\");\n\n        if (debug) {\n          console.log(\"[useForm] Submit successful\");\n        }\n      } catch (error) {\n        state$.status.set(\"error\");\n\n        if (debug) {\n          console.error(\"[useForm] Submit error:\", error);\n        }\n\n        throw error;\n      } finally {\n        state$.isSubmitting.set(false);\n      }\n    },\n    [\n      state$,\n      validateForm,\n      onSubmit,\n      onError,\n      setFieldValue,\n      setFieldTouched,\n      resetForm,\n      debug,\n    ]\n  );\n\n  /**\n   * Get field props for binding to inputs\n   */\n  const getFieldProps = useCallback(\n    <K extends keyof T>(field: K): FieldInputProps<T[K]> => {\n      return {\n        name: String(field),\n        value: state$.values[field].get(),\n        onChange: (value: T[K]) => setFieldValue(field, value),\n        onBlur: () => setFieldTouched(field, true),\n      };\n    },\n    [state$, setFieldValue, setFieldTouched]\n  );\n\n  /**\n   * Get field meta information\n   * Enhanced with @opensite/hooks useMap for validation metadata\n   * and usePrevious for change detection\n   */\n  const getFieldMeta = useCallback(\n    <K extends keyof T>(field: K): FieldMeta => {\n      const fieldKey = String(field);\n      const metadata = fieldMetadataActions.get(fieldKey);\n\n      return {\n        error: state$.errors[field].get(),\n        touched: state$.touched[field].get() ?? false,\n        isDirty:\n          state$.values[field].get() !== state$.initialValues[field].get(),\n        isValidating: validationInProgress.current.has(fieldKey),\n        // Additional metadata from @opensite/hooks\n        validationCount: metadata?.validationCount,\n        lastValidated: metadata?.lastValidated,\n      };\n    },\n    [state$, fieldMetadataActions]\n  );\n\n  // Use selectors for reactive properties\n  const values = useSelector(() => state$.values.get());\n  const errors = useSelector(() => state$.errors.get());\n  const touched = useSelector(() => state$.touched.get());\n  const isSubmitting = useSelector(() => state$.isSubmitting.get());\n  const status = useSelector(() => state$.status.get());\n\n  // Use selectors for derived state to ensure reactivity\n  const isValid = useSelector(() => Object.keys(state$.errors.get()).length === 0);\n  const isDirty = useSelector(() => {\n    const currentValues = state$.values.get();\n    const initialValues = state$.initialValues.get();\n    return Object.keys(currentValues).some(\n      (key) => currentValues[key] !== initialValues[key]\n    );\n  });\n\n  return {\n    // State\n    values,\n    errors,\n    touched,\n    isSubmitting,\n    isValid,\n    isDirty,\n    status,\n\n    // Actions\n    handleSubmit,\n    setValues: (values) => {\n      if (typeof values === \"function\") {\n        state$.values.set(values(state$.values.get()));\n      } else {\n        state$.values.set(values);\n      }\n    },\n    setFieldValue,\n    setErrors: (errors) => state$.errors.set(errors),\n    setFieldError: (field, error) => state$.errors[field].set(error),\n    setTouched: (touched) => state$.touched.set(touched),\n    setFieldTouched,\n    validateForm,\n    validateField,\n    resetForm,\n    getFieldProps,\n    getFieldMeta,\n  };\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport type { UseFormReturn } from \"./types\";\n\n/**\n * FormContext - React context for providing form state to child components\n *\n * Allows useField hook to access form state without prop drilling.\n * Automatically provided by the <Form> component.\n *\n * @internal\n */\nexport const FormContext = React.createContext<UseFormReturn<any> | null>(null);\n\nFormContext.displayName = \"FormContext\";\n","\"use client\";\n\nimport { useCallback, useContext } from \"react\";\nimport { FormContext } from \"./FormContext\";\nimport type { UseFieldOptions, UseFieldReturn, FieldInputProps, FieldMeta } from \"./types\";\n\n/**\n * useField - Field-level reactive hook for form inputs\n *\n * Provides isolated reactivity for individual form fields.\n * Only re-renders when the specific field changes, not when other fields update.\n *\n * Must be used within a FormContext (inside <Form> component).\n *\n * @example\n * ```tsx\n * function EmailInput() {\n *   const { field, meta, helpers } = useField({ name: 'email' });\n *\n *   return (\n *     <div>\n *       <input {...field} type=\"email\" />\n *       {meta.touched && meta.error && <span>{meta.error}</span>}\n *     </div>\n *   );\n * }\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/use-field\n */\nexport function useField<T = any>(\n  options: UseFieldOptions<T>\n): UseFieldReturn<T> {\n  const { name, validate, transform } = options;\n\n  const form = useContext(FormContext);\n\n  if (!form) {\n    throw new Error(\n      \"useField must be used within a FormContext. \" +\n        \"Wrap your component with <Form> or use useForm's getFieldProps instead.\"\n    );\n  }\n\n  // Get field props with automatic change/blur handling\n  const baseFieldProps = form.getFieldProps(name);\n\n  // Apply transform if provided\n  const field: FieldInputProps<T> = {\n    ...baseFieldProps,\n    value: baseFieldProps.value as T,\n    onChange: (value: T) => {\n      const transformedValue = transform ? transform(value) : value;\n      baseFieldProps.onChange(transformedValue);\n\n      // Run field-level validation if provided\n      if (validate) {\n        const result = validate(transformedValue, form.values);\n        if (result instanceof Promise) {\n          result.then((error) => {\n            if (error !== undefined) {\n              form.setFieldError(name, error);\n            }\n          });\n        } else if (result !== undefined) {\n          form.setFieldError(name, result);\n        }\n      }\n    },\n  };\n\n  // Get field meta information\n  const meta: FieldMeta = form.getFieldMeta(name);\n\n  // Field helpers\n  const helpers = {\n    setValue: useCallback(\n      (value: T) => {\n        const transformedValue = transform ? transform(value) : value;\n        form.setFieldValue(name, transformedValue);\n      },\n      [name, transform, form]\n    ),\n    setTouched: useCallback(\n      (touched: boolean) => {\n        form.setFieldTouched(name, touched);\n      },\n      [name, form]\n    ),\n    setError: useCallback(\n      (error: string | undefined) => {\n        form.setFieldError(name, error);\n      },\n      [name, form]\n    ),\n  };\n\n  return {\n    field,\n    meta,\n    helpers,\n  };\n}\n","\"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-md 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 { FieldMeta } from \"./types\";\nimport { FieldError } from \"../components/ui/field\";\nimport { cn } from \"../lib/utils\";\n\ntype Props = {\n  errorId?: string;\n  errorClassName?: string;\n  shouldRenderError?: boolean;\n  error?: FieldMeta[\"error\"];\n};\nconst FieldFeedback = ({\n  errorId,\n  errorClassName,\n  error,\n  shouldRenderError,\n}: Props) => {\n  const errorText = Array.isArray(error) ? error.join(\", \") : error;\n  const showError = Boolean(errorText && shouldRenderError);\n\n  return (\n    <FieldError\n      id={errorId}\n      className={cn(errorClassName, !showError && \"invisible\")}\n      aria-hidden={!showError || undefined}\n    >\n      {showError ? errorText : \"\\u00A0\"}\n    </FieldError>\n  );\n};\n\nexport { FieldFeedback };\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 { FieldFeedback } from \"./field-feedback\";\nimport { TextInput } from \"../inputs/TextInput\";\nimport type { InputProps } from \"./types\";\nimport { Icon } from \"@page-speed/icon\";\n\nconst DEFAULT_ICON_API_KEY = \"au382bi7fsh96w9h9xlrnat2jglx\";\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   * 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   * Error message text to display below the input group.\n   * Should be the raw error string(s) from the form field meta.\n   * The ring styling is driven by `inputProps.error` (boolean); this controls the visible message.\n   */\n  errorText?: string | string[];\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  errorText,\n  className,\n  labelClassName,\n}: ButtonGroupFormProps) {\n  const inputId = React.useMemo(() => {\n    return `button-group-input-${name}`;\n  }, [name]);\n\n  const errorId = `${inputId}-error`;\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-primary\",\n          hasError && \"ring-2 ring-destructive\",\n        )}\n      >\n        <TextInput\n          {...inputProps}\n          id={inputId}\n          suppressValueRing\n          aria-describedby={hasError ? errorId : undefined}\n          style={{\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n            boxShadow: \"none\",\n          }}\n          className={cn(\n            INPUT_SIZE_CLASSES[size],\n            \"focus-visible:z-10\",\n            inputProps.className,\n          )}\n        />\n        <Button\n          size={buttonSize}\n          type=\"submit\"\n          variant={submitVariant}\n          disabled={isSubmitting}\n          style={{\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            boxShadow: \"none\",\n          }}\n          className={cn(\n            \"relative 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 flex items-center justify-center\",\n              isSubmitting ? \"opacity-0\" : \"opacity-100\",\n            )}\n          >\n            {labelElement}\n          </span>\n        </Button>\n      </ButtonGroup>\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldFeedback\n        error={errorText}\n        shouldRenderError={hasError}\n        errorId={errorId}\n      />\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 { FormFieldConfig } 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 FormFieldConfig;\n    const fieldProps = form.getFieldProps(field.name);\n    const fieldMeta = form.getFieldMeta(field.name);\n\n    return (\n      <ButtonGroupForm\n        name={field.name}\n        label={field.label}\n        description={field.description}\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          error: fieldMeta.touched && !!fieldMeta.error,\n        }}\n        errorText={fieldMeta.touched ? fieldMeta.error : undefined}\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","\"use client\";\n\nimport * as React from \"react\";\nimport { useField } from \"./useField\";\nimport type { FieldProps } from \"./types\";\nimport { FieldFeedback } from \"./field-feedback\";\nimport { LabelGroup } from \"./label-group\";\nimport { Field as FieldWrapper } from \"../components/ui/field\";\n\n/**\n * Field - Field wrapper component with label, description, and error display\n *\n * Provides a complete field UI with automatic error handling and accessibility.\n * Uses useField hook internally for field-level reactivity.\n *\n * Features:\n * - Automatic label association\n * - Error display with accessibility\n * - Optional description text\n * - Render prop pattern for flexibility\n * - Full accessibility support\n *\n * @example\n * ```tsx\n * <Field name=\"email\" label=\"Email Address\" description=\"We'll never share your email\">\n *   {({ field, meta }) => (\n *     <input\n *       {...field}\n *       type=\"email\"\n *       className={meta.error && meta.touched ? 'error' : ''}\n *     />\n *   )}\n * </Field>\n * ```\n *\n * @see https://opensite.ai/developers/page-speed/forms/field\n */\nexport function Field({\n  name,\n  label,\n  description,\n  children,\n  showError = true,\n  className,\n  errorClassName,\n  required = false,\n  validate,\n}: FieldProps) {\n  const fieldState = useField({ name, validate });\n  const { meta } = fieldState;\n\n  const hasError = React.useMemo(() => {\n    return showError && meta.touched && meta.error ? true : false;\n  }, [meta?.touched, meta?.error, showError]);\n\n  const errorId = `${name}-error`;\n  const descriptionId = `${name}-description`;\n\n  return (\n    <FieldWrapper\n      className={className}\n      data-field={name}\n      invalid={hasError}\n    >\n      <LabelGroup\n        labelHtmlFor={name}\n        required={required}\n        variant=\"label\"\n        secondaryId={descriptionId}\n        secondary={description}\n        primary={label}\n      />\n\n      {/* Field control slot keeps legacy DOM shape for compatibility */}\n      <div data-slot=\"field-control\">\n        {typeof children === \"function\" ? children(fieldState) : children}\n      </div>\n\n      {/* Error message */}\n      <FieldFeedback\n        errorId={errorId}\n        errorClassName={errorClassName}\n        shouldRenderError={hasError}\n        error={meta.error}\n      />\n    </FieldWrapper>\n  );\n}\n\nField.displayName = \"Field\";\n"]}