@wix/headless-forms 0.0.1

package/dist/react/Form.js

@@ -0,0 +1,613 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import * as CoreForm from './core/Form.js';
+var TestIds;
+(function (TestIds) {
+    TestIds["formRoot"] = "form-root";
+    TestIds["formLoadingError"] = "form-loading-error";
+    TestIds["formError"] = "form-error";
+    TestIds["formSubmitted"] = "form-submitted";
+})(TestIds || (TestIds = {}));
+/**
+ * Root component that provides all necessary service contexts for a complete form experience.
+ * This component sets up the Form service and provides context to child components.
+ * Must be used as the top-level component for all form functionality.
+ *
+ * @component
+ * @param {RootProps} props - The component props
+ * @param {React.ReactNode} props.children - Child components that will have access to form context
+ * @param {FormServiceConfig} props.formServiceConfig - Form service configuration object
+ * @param {string} [props.className] - CSS classes to apply to the root element
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ * import { loadFormServiceConfig } from '@wix/headless-forms/services';
+ *
+ * const FIELD_MAP = {
+ *   TEXT_INPUT: TextInput,
+ *   TEXT_AREA: TextArea,
+ *   CHECKBOX: Checkbox,
+ *   // ... other field components
+ * };
+ *
+ * // Pattern 1: Pre-loaded form data (SSR/SSG)
+ * function FormPage({ formServiceConfig }) {
+ *   return (
+ *     <Form.Root formServiceConfig={formServiceConfig}>
+ *       <Form.Loading className="flex justify-center p-4" />
+ *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ *     </Form.Root>
+ *   );
+ * }
+ *
+ * // Pattern 2: Lazy loading with formId (Client-side)
+ * function DynamicFormPage({ formId }) {
+ *   return (
+ *     <Form.Root formServiceConfig={{ formId }}>
+ *       <Form.Loading className="flex justify-center p-4" />
+ *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ *     </Form.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, formServiceConfig, asChild, ...otherProps } = props;
+    return (_jsx(CoreForm.Root, { formServiceConfig: formServiceConfig, children: _jsx(RootContent, { asChild: asChild, ref: ref, ...otherProps, children: children }) }));
+});
+/**
+ * Internal component to handle the Root content with service access.
+ * This component wraps the children with the necessary div container and applies styling.
+ *
+ * @internal
+ * @param {RootContentProps} props - Component props
+ * @param {React.ReactNode} props.children - Child components to render
+ * @param {string} [props.className] - CSS classes to apply to the container
+ * @param {boolean} [props.asChild] - Whether to render as a child component
+ * @returns {JSX.Element} The wrapped content
+ */
+const RootContent = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formRoot, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }));
+});
+/**
+ * Component that renders content during loading state.
+ * Only displays its children when the form is currently loading.
+ *
+ * @component
+ * @param {LoadingProps} props - The component props
+ * @param {boolean} [props.asChild] - Whether to render as a child component
+ * @param {React.ReactNode} [props.children] - Content to display during loading state
+ * @param {string} [props.className] - CSS classes to apply to the default element
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * // Default usage with className
+ * function FormLoading() {
+ *   return (
+ *     <Form.Loading className="flex justify-center p-4" />
+ *   );
+ * }
+ *
+ * // Custom content
+ * function CustomFormLoading() {
+ *   return (
+ *     <Form.Loading>
+ *       <div className="flex justify-center items-center p-4">
+ *         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+ *         <span className="ml-2 text-foreground font-paragraph">Loading form...</span>
+ *       </div>
+ *     </Form.Loading>
+ *   );
+ * }
+ *
+ * // With asChild for custom components
+ * function CustomFormLoadingAsChild() {
+ *   return (
+ *     <Form.Loading asChild>
+ *       <div className="custom-loading-container">
+ *         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+ *         <span className="ml-2 text-foreground font-paragraph">Loading form...</span>
+ *       </div>
+ *     </Form.Loading>
+ *   );
+ * }
+ * ```
+ */
+export const Loading = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreForm.Loading, { children: ({ isLoading }) => {
+            if (!isLoading)
+                return null;
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": "form-loading", customElement: children, content: "Loading form...", ...otherProps, children: _jsx("div", { children: "Loading form..." }) }));
+        } }));
+});
+/**
+ * Component that renders content when there's an error loading the form.
+ * Only displays its children when an error has occurred.
+ *
+ * @component
+ * @param {LoadingErrorProps} props - The component props
+ * @param {boolean} [props.asChild] - Whether to render as a child component
+ * @param {React.ReactNode} [props.children] - Content to display during error state
+ * @param {string} [props.className] - CSS classes to apply to the default element
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * // Default usage with className
+ * function FormLoadingError() {
+ *   return (
+ *     <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *   );
+ * }
+ *
+ * // Custom content
+ * function CustomLoadingError() {
+ *   return (
+ *     <Form.LoadingError>
+ *       <div className="bg-destructive/10 border border-destructive text-destructive px-4 py-3 rounded mb-4">
+ *         <h3 className="font-heading text-lg">Error loading form</h3>
+ *         <p className="font-paragraph">Something went wrong. Please try again.</p>
+ *       </div>
+ *     </Form.LoadingError>
+ *   );
+ * }
+ *
+ * // With asChild for custom components
+ * function CustomLoadingErrorAsChild() {
+ *   return (
+ *     <Form.LoadingError asChild>
+ *       {React.forwardRef<HTMLDivElement, { error: string | null; hasError: boolean }>(
+ *         ({ error }, ref) => (
+ *           <div ref={ref} className="custom-error-container">
+ *             <h3 className="font-heading">Error Loading Form</h3>
+ *             <p className="font-paragraph">{error}</p>
+ *           </div>
+ *         )
+ *       )}
+ *     </Form.LoadingError>
+ *   );
+ * }
+ * ```
+ */
+export const LoadingError = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreForm.LoadingError, { children: ({ error, hasError }) => {
+            if (!hasError)
+                return null;
+            const errorData = { error, hasError };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formLoadingError, customElement: children, customElementProps: errorData, content: error, ...otherProps, children: _jsx("div", { children: error }) }));
+        } }));
+});
+/**
+ * Component that renders content when there's an error during form submission.
+ * Only displays its children when a submission error has occurred.
+ *
+ * @component
+ * @param {ErrorProps} props - The component props
+ * @param {boolean} [props.asChild] - Whether to render as a child component
+ * @param {React.ReactNode} [props.children] - Content to display during submit error state
+ * @param {string} [props.className] - CSS classes to apply to the default element
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * // Default usage with className
+ * function FormError() {
+ *   return <Form.Error className="text-destructive p-4 rounded-lg mb-4" />;
+ * }
+ *
+ * // Custom content
+ * function CustomFormError() {
+ *   return (
+ *     <Form.Error>
+ *       <div className="bg-destructive/10 border border-destructive text-destructive p-4 rounded-lg mb-4">
+ *         <h3 className="font-heading text-lg">Submission Failed</h3>
+ *         <p className="font-paragraph">Please check your input and try again.</p>
+ *       </div>
+ *     </Form.Error>
+ *   );
+ * }
+ *
+ * // With asChild for custom components
+ * function CustomFormErrorAsChild() {
+ *   return (
+ *     <Form.Error asChild>
+ *       {React.forwardRef<HTMLDivElement, { error: string | null; hasError: boolean }>(
+ *         ({ error }, ref) => (
+ *           <div ref={ref} className="custom-error-container">
+ *             <h3 className="font-heading">Submission Failed</h3>
+ *             <p className="font-paragraph">{error}</p>
+ *           </div>
+ *         )
+ *       )}
+ *     </Form.Error>
+ *   );
+ * }
+ * ```
+ */
+export const Error = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreForm.Error, { children: ({ error, hasError }) => {
+            if (!hasError)
+                return null;
+            const errorData = { error, hasError };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formError, customElement: children, customElementProps: errorData, content: error, ...otherProps, children: _jsx("div", { className: "text-destructive text-sm sm:text-base", children: error }) }));
+        } }));
+});
+/**
+ * Component that renders content after successful form submission.
+ * Only displays its children when the form has been successfully submitted.
+ *
+ * @component
+ * @param {SubmittedProps} props - The component props
+ * @param {boolean} [props.asChild] - Whether to render as a child component
+ * @param {React.ReactNode} [props.children] - Content to display after successful submission
+ * @param {string} [props.className] - CSS classes to apply to the default element
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * // Default usage with className
+ * function FormSubmitted() {
+ *   return <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />;
+ * }
+ *
+ * // Custom content
+ * function CustomFormSubmitted() {
+ *   return (
+ *     <Form.Submitted>
+ *       <div className="bg-green-50 border border-green-200 text-green-800 p-6 rounded-lg mb-4">
+ *         <h2 className="font-heading text-xl mb-2">Thank You!</h2>
+ *         <p className="font-paragraph">Your form has been submitted successfully.</p>
+ *       </div>
+ *     </Form.Submitted>
+ *   );
+ * }
+ *
+ * // With asChild for custom components
+ * function CustomFormSubmittedAsChild() {
+ *   return (
+ *     <Form.Submitted asChild>
+ *       {React.forwardRef<HTMLDivElement, { isSubmitted: boolean; message: string }>(
+ *         ({ message }, ref) => (
+ *           <div ref={ref} className="custom-success-container">
+ *             <h2 className="font-heading">Thank You!</h2>
+ *             <p className="font-paragraph">{message}</p>
+ *           </div>
+ *         )
+ *       )}
+ *     </Form.Submitted>
+ *   );
+ * }
+ * ```
+ */
+export const Submitted = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...otherProps } = props;
+    return (_jsx(CoreForm.Submitted, { children: ({ isSubmitted, message }) => {
+            if (!isSubmitted)
+                return null;
+            const submittedData = { isSubmitted, message };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formSubmitted, customElement: children, customElementProps: submittedData, content: message, ...otherProps, children: _jsx("div", { className: "text-green-500 text-sm sm:text-base", children: message }) }));
+        } }));
+});
+/**
+ * Fields component for rendering a form with custom field renderers.
+ * This component handles the rendering of form fields based on the provided fieldMap.
+ * Must be used within Form.Root to access form context.
+ *
+ * @component
+ * @param {FieldsProps} props - Component props
+ * @param {FieldMap} props.fieldMap - A mapping of field types to their corresponding React components
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ * import { TextInput, TextArea, Checkbox } from './field-components';
+ *
+ * const FIELD_MAP = {
+ *   TEXT_INPUT: TextInput,
+ *   TEXT_AREA: TextArea,
+ *   CHECKBOX: Checkbox,
+ *   NUMBER_INPUT: NumberInput,
+ *   // ... remaining field components
+ * };
+ *
+ * function ContactForm({ formServiceConfig }) {
+ *   return (
+ *     <Form.Root formServiceConfig={formServiceConfig}>
+ *       <Form.Loading className="flex justify-center p-4" />
+ *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *     </Form.Root>
+ *   );
+ * }
+ * ```
+ */
+/**
+ * Fields component for rendering a form with custom field renderers.
+ * It maps each field type from the form configuration to its corresponding React component
+ * and renders them in the order and layout defined by the form structure.
+ *
+ * The component automatically handles:
+ * - Field validation and error display
+ * - Form state management
+ * - Field value updates
+ *
+ * Must be used within Form.Root to access form context.
+ *
+ * @component
+ * @param {FieldsProps} props - The component props
+ * @param {FieldMap} props.fieldMap - A mapping of field types to their corresponding React components. Each key represents a field type (e.g., 'TEXT_INPUT', 'CHECKBOX') and the value is the React component that should render that field type.
+ *
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ * import { loadFormServiceConfig } from '@wix/headless-forms/services';
+ * import {
+ *   TextInput,
+ *   TextArea,
+ *   PhoneInput,
+ *   MultilineAddress,
+ *   DateInput,
+ *   DatePicker,
+ *   DateTimeInput,
+ *   FileUpload,
+ *   NumberInput,
+ *   Checkbox,
+ *   Signature,
+ *   RatingInput,
+ *   RadioGroup,
+ *   CheckboxGroup,
+ *   Dropdown,
+ *   Tags,
+ *   TimeInput,
+ *   RichText,
+ *   SubmitButton,
+ *   ProductList,
+ *   FixedPayment,
+ *   PaymentInput,
+ *   Donation,
+ *   Appointment,
+ *   ImageChoice
+ * } from './components';
+ *
+ * // Define your field mapping - this tells the Fields component which React component to use for each field type
+ * const FIELD_MAP = {
+ *   TEXT_INPUT: TextInput,
+ *   TEXT_AREA: TextArea,
+ *   PHONE_INPUT: PhoneInput,
+ *   MULTILINE_ADDRESS: MultilineAddress,
+ *   DATE_INPUT: DateInput,
+ *   DATE_PICKER: DatePicker,
+ *   DATE_TIME_INPUT: DateTimeInput,
+ *   FILE_UPLOAD: FileUpload,
+ *   NUMBER_INPUT: NumberInput,
+ *   CHECKBOX: Checkbox,
+ *   SIGNATURE: Signature,
+ *   RATING_INPUT: RatingInput,
+ *   RADIO_GROUP: RadioGroup,
+ *   CHECKBOX_GROUP: CheckboxGroup,
+ *   DROPDOWN: Dropdown,
+ *   TAGS: Tags,
+ *   TIME_INPUT: TimeInput,
+ *   TEXT: RichText,
+ *   SUBMIT_BUTTON: SubmitButton,
+ *   PRODUCT_LIST: ProductList,
+ *   FIXED_PAYMENT: FixedPayment,
+ *   PAYMENT_INPUT: PaymentInput,
+ *   DONATION: Donation,
+ *   APPOINTMENT: Appointment,
+ *   IMAGE_CHOICE: ImageChoice,
+ * };
+ *
+ * function ContactForm({ formServiceConfig }) {
+ *   return (
+ *     <Form.Root formServiceConfig={formServiceConfig}>
+ *       <Form.Loading className="flex justify-center p-4" />
+ *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ *     </Form.Root>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Advanced usage with custom field components
+ * const CustomTextField = ({ value, onChange, label, error, ...props }) => (
+ *   <div className="form-field">
+ *     <label className="text-foreground font-paragraph">{label}</label>
+ *     <input
+ *       value={value || ''}
+ *       onChange={(e) => onChange(e.target.value)}
+ *       className="bg-background border-foreground text-foreground"
+ *       {...props}
+ *     />
+ *     {error && <span className="text-destructive">{error}</span>}
+ *   </div>
+ * );
+ *
+ * const FIELD_MAP = {
+ *   TEXT_INPUT: CustomTextField,
+ *   // ... other field components
+ * };
+ * ```
+ */
+export const Fields = React.forwardRef(({ fieldMap }) => {
+    // TODO: render real viewer
+    return _jsx(MockViewer, { fieldMap: fieldMap });
+});
+const MockViewer = ({ fieldMap }) => {
+    // This is how fieldMap is expected to be used in the viewer
+    const schemaFields = {
+        // CONTACTS_FIELD_TYPES
+        CONTACTS_COMPANY: fieldMap.TEXT_INPUT,
+        CONTACTS_POSITION: fieldMap.TEXT_INPUT,
+        CONTACTS_TAX_ID: fieldMap.TEXT_INPUT,
+        CONTACTS_FIRST_NAME: fieldMap.TEXT_INPUT,
+        CONTACTS_LAST_NAME: fieldMap.TEXT_INPUT,
+        CONTACTS_EMAIL: fieldMap.TEXT_INPUT,
+        CONTACTS_BIRTHDATE: fieldMap.DATE_INPUT,
+        CONTACTS_PHONE: fieldMap.PHONE_INPUT,
+        CONTACTS_ADDRESS: fieldMap.TEXT_INPUT,
+        CONTACTS_SUBSCRIBE: fieldMap.CHECKBOX,
+        // QUIZ_FIELD_TYPES
+        QUIZ_MULTI_CHOICE: fieldMap.CHECKBOX_GROUP,
+        QUIZ_SINGLE_CHOICE: fieldMap.RADIO_GROUP,
+        QUIZ_SHORT_TEXT: fieldMap.TEXT_INPUT,
+        QUIZ_LONG_TEXT: fieldMap.TEXT_AREA,
+        QUIZ_NUMBER: fieldMap.NUMBER_INPUT,
+        QUIZ_FILE_UPLOAD: fieldMap.FILE_UPLOAD,
+        QUIZ_IMAGE_CHOICE: fieldMap.IMAGE_CHOICE, // TODO: add
+        // DEXT_FIELD_TYPES
+        DEXT_TEXT_INPUT: fieldMap.TEXT_INPUT,
+        DEXT_TEXT_AREA: fieldMap.TEXT_AREA,
+        DEXT_DROPDOWN: fieldMap.DROPDOWN,
+        DEXT_URL_INPUT: fieldMap.TEXT_INPUT,
+        DEXT_RADIO_GROUP: fieldMap.RADIO_GROUP,
+        DEXT_NUMBER_INPUT: fieldMap.NUMBER_INPUT,
+        DEXT_CHECKBOX: fieldMap.CHECKBOX,
+        DEXT_CHECKBOX_GROUP: fieldMap.CHECKBOX_GROUP,
+        DEXT_EMAIL: fieldMap.TEXT_INPUT,
+        DEXT_PHONE: fieldMap.PHONE_INPUT,
+        DEXT_RATING_INPUT: fieldMap.RATING_INPUT,
+        DEXT_DATE_PICKER: fieldMap.DATE_PICKER,
+        DEXT_TAGS: fieldMap.TAGS,
+        // SCHEDULING_FIELD_TYPES
+        APPOINTMENT: fieldMap.APPOINTMENT,
+        SERVICES_DROPDOWN: fieldMap.DROPDOWN,
+        // ECOM_FIELD_TYPES
+        ECOM_ADDITIONAL_INFO: fieldMap.TEXT_AREA,
+        ECOM_ADDRESS: fieldMap.TEXT_INPUT,
+        ECOM_FULL_NAME: fieldMap.TEXT_INPUT,
+        ECOM_PHONE: fieldMap.PHONE_INPUT,
+        ECOM_COMPANY_NAME: fieldMap.TEXT_INPUT,
+        ECOM_EMAIL: fieldMap.TEXT_INPUT,
+        ECOM_SUBSCRIPTION: fieldMap.CHECKBOX,
+        // BOOKINGS_FIELD_TYPES
+        BOOKINGS_FIRST_NAME: fieldMap.TEXT_INPUT,
+        BOOKINGS_LAST_NAME: fieldMap.TEXT_INPUT,
+        BOOKINGS_EMAIL: fieldMap.TEXT_INPUT,
+        BOOKINGS_PHONE: fieldMap.PHONE_INPUT,
+        BOOKINGS_ADDRESS: fieldMap.TEXT_INPUT,
+        // PAYMENTS_FIELD_TYPES
+        PRODUCT_LIST: fieldMap.PRODUCT_LIST,
+        DONATION: fieldMap.DONATION,
+        PAYMENT_INPUT: fieldMap.PAYMENT_INPUT, // could be TEXT_INPUT?
+        FIXED_PAYMENT: fieldMap.FIXED_PAYMENT, // could be TAGS?
+        // COMMON_FIELD_TYPES
+        TEXT_INPUT: fieldMap.TEXT_INPUT,
+        NUMBER_INPUT: fieldMap.NUMBER_INPUT,
+        URL_INPUT: fieldMap.TEXT_INPUT,
+        TEXT_AREA: fieldMap.TEXT_AREA,
+        DATE_INPUT: fieldMap.DATE_INPUT,
+        DATE_TIME_INPUT: fieldMap.DATE_TIME_INPUT,
+        TIME_INPUT: fieldMap.TIME_INPUT,
+        RADIO_GROUP: fieldMap.RADIO_GROUP,
+        CHECKBOX_GROUP: fieldMap.CHECKBOX_GROUP,
+        FILE_UPLOAD: fieldMap.FILE_UPLOAD,
+        CHECKBOX: fieldMap.CHECKBOX,
+        DROPDOWN: fieldMap.DROPDOWN,
+        // NESTED_FORM: 'NESTED_FORM',
+        MULTILINE_ADDRESS: fieldMap.MULTILINE_ADDRESS,
+        // are these relevant for headless?
+        MLA_COUNTRY: fieldMap.DROPDOWN,
+        MLA_CITY: fieldMap.TEXT_INPUT,
+        MLA_ADDRESS_LINE: fieldMap.TEXT_INPUT, // dropdown if autocomplete disabled?
+        MLA_ADDRESS_LINE_2: fieldMap.TEXT_INPUT,
+        MLA_POSTAL_CODE: fieldMap.TEXT_INPUT,
+        MLA_SUBDIVISION: fieldMap.DROPDOWN,
+        MLA_STREET_NAME: fieldMap.TEXT_INPUT,
+        MLA_STREET_NUMBER: fieldMap.TEXT_INPUT,
+        MLA_APARTMENT: fieldMap.TEXT_INPUT,
+        FULL_NAME_FIRST_NAME: fieldMap.TEXT_INPUT,
+        FULL_NAME_LAST_NAME: fieldMap.TEXT_INPUT,
+        FULL_NAME: fieldMap.TEXT_INPUT,
+        VAT_ID: fieldMap.TEXT_INPUT,
+        SIGNATURE: fieldMap.SIGNATURE,
+        RATING_INPUT: fieldMap.RATING_INPUT,
+        TAGS: fieldMap.TAGS,
+        DATE_PICKER: fieldMap.DATE_PICKER,
+        // READONLY_FIELD_TYPES
+        HEADER: fieldMap.TEXT,
+        RICH_TEXT: fieldMap.TEXT,
+        SUBMIT_BUTTON: fieldMap.SUBMIT_BUTTON,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: "Form Fields" }), _jsx("div", { children: JSON.stringify(schemaFields) })] }));
+};
+/**
+ * Main Form namespace containing all form components following the compound component pattern.
+ * Provides a headless, flexible way to render and manage forms with custom field components.
+ *
+ * @namespace Form
+ * @property {typeof Root} Root - Form root component that provides service context to all child components
+ * @property {typeof Loading} Loading - Form loading state component that displays content during form loading
+ * @property {typeof LoadingError} LoadingError - Form loading error state component for handling form loading errors
+ * @property {typeof Error} Error - Form submit error state component for handling form submission errors
+ * @property {typeof Submitted} Submitted - Form submitted state component for displaying success messages
+ * @property {typeof Fields} Fields - Form fields component for rendering form fields with custom field renderers
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ * import { loadFormServiceConfig } from '@wix/headless-forms/services';
+ * import { TextInput, TextArea, Checkbox } from './field-components';
+ *
+ * const FIELD_MAP = {
+ *   TEXT_INPUT: TextInput,
+ *   TEXT_AREA: TextArea,
+ *   CHECKBOX: Checkbox,
+ *   // ... other field components
+ * };
+ *
+ * // Pattern 1: Pre-loaded form data (SSR/SSG)
+ * function MyForm({ formServiceConfig }) {
+ *   return (
+ *     <Form.Root formServiceConfig={formServiceConfig}>
+ *       <Form.Loading className="flex justify-center p-4" />
+ *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ *     </Form.Root>
+ *   );
+ * }
+ *
+ * // Pattern 2: Lazy loading with formId (Client-side)
+ * function DynamicForm({ formId }) {
+ *   return (
+ *     <Form.Root formServiceConfig={{ formId }}>
+ *       <Form.Loading className="flex justify-center p-4" />
+ *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
+ *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
+ *     </Form.Root>
+ *   );
+ * }
+ * ```
+ */
+export const Form = {
+    /** Form root component that provides service context */
+    Root,
+    /** Form loading state component */
+    Loading,
+    /** Form loading error state component */
+    LoadingError,
+    /** Form error state component */
+    Error,
+    /** Form submitted state component */
+    Submitted,
+    /** Form fields component for rendering form fields */
+    Fields,
+};