@wix/headless-forms 0.0.12 → 0.0.14

package/cjs/dist/react/Form.d.ts

@@ -637,9 +637,6 @@ export interface FieldLabelProps {
     /** CSS classes to apply to the label element */
     className?: string;
 }
-/**
- * Props for Field.InputWrapper component
- */
 export interface FieldInputWrapperProps {
     /** Child components (typically Field.Input and Field.Error) */
     children: React.ReactNode;
@@ -684,28 +681,48 @@ export interface FieldErrorProps {
     children?: React.ReactNode;
 }
 /**
- * Label component for a form field with automatic grid positioning.
- * Must be used within a Form.Field component.
- * Renders in the label row of the field's grid layout.
+ * Props for Field.Label.Required component
+ */
+export interface FieldLabelRequiredProps {
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Custom content to display (defaults to red asterisk) */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the required indicator */
+    className?: string;
+}
+/**
+ * Required indicator component for form field labels.
+ * Must be used within a Form.Field.Label component.
  *
  * @component
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
  *
- * <Form.Field id="email">
- *   <Form.Field.Label>
- *     <label className="text-foreground font-paragraph">Email Address</label>
- *   </Form.Field.Label>
- *   <Form.Field.InputWrapper>
- *     <Form.Field.Input>
- *       <input type="email" className="bg-background border-foreground text-foreground" />
- *     </Form.Field.Input>
- *   </Form.Field.InputWrapper>
- * </Form.Field>
- * ```
+ * // Basic usage with required prop
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Email Address
+ *     <Form.Field.Label.Required  />
+ *   </label>
+ * </Form.Field.Label>
+ *
+ * // Custom styling
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Username
+ *     <Form.Field.Label.Required required={true} className="text-destructive ml-2" />
+ *   </label>
+ * </Form.Field.Label>
  */
-export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldLabelRequired: React.ForwardRefExoticComponent<FieldLabelRequiredProps & React.RefAttributes<HTMLSpanElement>>;
+interface FieldLabelComponent extends React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLDivElement>> {
+    Required: typeof FieldLabelRequired;
+}
+export declare const FieldLabel: FieldLabelComponent;
 /**
  * InputWrapper component that wraps input and error elements with grid positioning.
  * Must be used within a Form.Field component.

package/cjs/dist/react/Form.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Field = exports.FieldError = exports.FieldInput = exports.FieldInputWrapper = exports.FieldLabel = exports.Fields = exports.Submitted = exports.Error = exports.LoadingError = exports.Loading = exports.Root = void 0;
+exports.Field = exports.FieldError = exports.FieldInput = exports.FieldInputWrapper = exports.FieldLabel = exports.FieldLabelRequired = exports.Fields = exports.Submitted = exports.Error = exports.LoadingError = exports.Loading = exports.Root = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@wix/headless-utils/react");
@@ -620,7 +620,10 @@ FieldRoot.displayName = 'Form.Field';
  *
  * <Form.Field id="email">
  *   <Form.Field.Label>
- *     <label className="text-foreground font-paragraph">Email Address</label>
+ *     <label className="text-foreground font-paragraph">
+ *       Email Address
+ *       <Form.Field.Label.Required required={true} />
+ *     </label>
  *   </Form.Field.Label>
  *   <Form.Field.InputWrapper>
  *     <Form.Field.Input>
@@ -630,12 +633,52 @@ FieldRoot.displayName = 'Form.Field';
  * </Form.Field>
  * ```
  */
-exports.FieldLabel = react_1.default.forwardRef((props, ref) => {
+const FieldLabelRoot = react_1.default.forwardRef((props, ref) => {
     const { children, asChild, className, ...otherProps } = props;
     const { gridStyles } = (0, FieldContext_js_1.useFieldContext)();
     return ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, style: gridStyles.label, "data-testid": TestIds.fieldLabel, customElement: children, customElementProps: {}, ...otherProps, children: (0, jsx_runtime_1.jsx)("div", { children: children }) }));
 });
-exports.FieldLabel.displayName = 'Form.Field.Label';
+FieldLabelRoot.displayName = 'Form.Field.Label';
+/**
+ * Required indicator component for form field labels.
+ * Must be used within a Form.Field.Label component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * // Basic usage with required prop
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Email Address
+ *     <Form.Field.Label.Required  />
+ *   </label>
+ * </Form.Field.Label>
+ *
+ * // Custom styling
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Username
+ *     <Form.Field.Label.Required required={true} className="text-destructive ml-2" />
+ *   </label>
+ * </Form.Field.Label>
+ */
+exports.FieldLabelRequired = react_1.default.forwardRef((props, ref) => {
+    const { required = false, children, asChild, className, ...otherProps } = props;
+    const requiredIndicator = 'asterisk';
+    // @ts-expect-error
+    if (!required || requiredIndicator === 'none')
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...otherProps, children: (0, jsx_runtime_1.jsx)("span", { children: requiredIndicator === 'asterisk'
+                ? '*'
+                : requiredIndicator === 'text'
+                    ? '(Required)'
+                    : null }) }));
+});
+exports.FieldLabelRequired.displayName = 'Form.Field.Label.Required';
+exports.FieldLabel = FieldLabelRoot;
+exports.FieldLabel.Required = exports.FieldLabelRequired;
 /**
  * InputWrapper component that wraps input and error elements with grid positioning.
  * Must be used within a Form.Field component.

package/cjs/dist/react/Phone.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export interface PhoneFieldProps {
+    id: string;
+    children: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export interface PhoneLabelProps {
+    children: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export interface PhoneLabelRequiredProps {
+    required?: boolean;
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export declare const Required: React.ForwardRefExoticComponent<PhoneLabelRequiredProps & React.RefAttributes<HTMLSpanElement>>;
+interface PhoneLabelComponent extends React.ForwardRefExoticComponent<PhoneLabelProps & React.RefAttributes<HTMLDivElement>> {
+    Required: typeof Required;
+}
+export declare const Label: PhoneLabelComponent;
+export interface PhoneErrorProps {
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+declare const Error: React.ForwardRefExoticComponent<PhoneErrorProps & React.RefAttributes<HTMLDivElement>>;
+export interface CountryCodeProps {
+    asChild?: boolean;
+    className?: string;
+}
+declare const CountryCode: React.ForwardRefExoticComponent<CountryCodeProps & React.RefAttributes<HTMLDivElement>>;
+export interface PhoneFieldInputProps {
+    asChild?: boolean;
+    className?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<PhoneFieldInputProps & React.RefAttributes<HTMLDivElement>>;
+interface PhoneFieldComponent extends React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLDivElement>> {
+    Label: typeof Label;
+    Error: typeof Error;
+    Input: typeof Input;
+    CountryCode: typeof CountryCode;
+}
+export declare const PhoneField: PhoneFieldComponent;
+export {};

package/cjs/dist/react/Phone.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneField = exports.Label = exports.Required = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@wix/headless-forms/react");
+const form_public_1 = require("@wix/form-public");
+const Root = react_1.default.forwardRef((props, ref) => {
+    const { id, children, asChild, className } = props;
+    const { description } = (0, form_public_1.useFieldProps)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field, { ref: ref, id: id, asChild: asChild, className: className, children: (0, jsx_runtime_1.jsx)(react_2.Form.Field.InputWrapper, { children: (0, jsx_runtime_1.jsx)(react_2.Form.Field.Input, { description: description, children: children }) }) }));
+});
+Root.displayName = 'PhoneField';
+const LabelRoot = react_1.default.forwardRef((props, ref) => {
+    const { asChild, className, children } = props;
+    const { id, label, showLabel } = (0, form_public_1.useFieldProps)();
+    if (!showLabel) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Label, { ref: ref, asChild: asChild, className: className, children: (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, children: [label, children] }) }));
+});
+LabelRoot.displayName = 'PhoneField.Label';
+exports.Required = react_1.default.forwardRef((props, ref) => {
+    const { required } = (0, form_public_1.useFieldProps)();
+    return (0, jsx_runtime_1.jsx)(react_2.Form.Field.Label.Required, { ...props, ref: ref, required: required });
+});
+exports.Required.displayName = 'PhoneField.Label.Required';
+exports.Label = LabelRoot;
+exports.Label.Required = exports.Required;
+const Error = react_1.default.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { errorMessage } = (0, form_public_1.useFieldProps)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Error, { ref: ref, ...rest, children: errorMessage }));
+});
+Error.displayName = 'PhoneField.Error';
+const CountryCode = react_1.default.forwardRef((props, ref) => {
+    const { asChild, className, ...rest } = props;
+    const { id, countryCodes, defaultCountryCode, readOnly, onChange, onBlur, onFocus, } = (0, form_public_1.useFieldProps)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: (0, jsx_runtime_1.jsx)("select", { id: `${id}-country`, defaultValue: defaultCountryCode || '', disabled: readOnly, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), children: countryCodes?.map((code) => ((0, jsx_runtime_1.jsx)("option", { value: code, children: code }, code))) }) }));
+});
+CountryCode.displayName = 'PhoneField.CountryCode';
+const Input = react_1.default.forwardRef((props, ref) => {
+    const { asChild, className, ...rest } = props;
+    const { id, value, required, readOnly, placeholder, onChange, onBlur, onFocus, description, } = (0, form_public_1.useFieldProps)();
+    const descriptionId = description ? `${id}-description` : undefined;
+    return ((0, jsx_runtime_1.jsx)(react_2.Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: (0, jsx_runtime_1.jsx)("input", { id: id, type: "tel", value: value || '', required: required, readOnly: readOnly, placeholder: placeholder, "aria-describedby": descriptionId, "aria-invalid": !!(required && !value), "aria-required": required, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.() }) }));
+});
+Input.displayName = 'PhoneField.Input';
+exports.PhoneField = Root;
+exports.PhoneField.Label = exports.Label;
+exports.PhoneField.Error = Error;
+exports.PhoneField.Input = Input;
+exports.PhoneField.CountryCode = CountryCode;

package/cjs/dist/react/index.d.ts

@@ -1,2 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
+export * from './Phone.js';

package/cjs/dist/react/index.js

@@ -39,3 +39,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 exports.Form = __importStar(require("./Form.js"));
 __exportStar(require("./types.js"), exports);
+__exportStar(require("./Phone.js"), exports);

package/cjs/dist/services/form-service.d.ts

@@ -60,6 +60,8 @@ type OnSubmit = (formId: string, formValues: FormValues) => Promise<SubmitRespon
 export type FormServiceConfig = {
     formId: string;
     onSubmit?: OnSubmit;
+    namespace?: string;
+    additionalMetadata?: Record<string, string | string[]>;
 } | {
     form: forms.Form;
     onSubmit?: OnSubmit;
@@ -100,6 +102,8 @@ export declare const FormService: import("@wix/services-definitions").ServiceFac
  * a specific form by ID that will be used to configure the FormService.
  *
  * @param {string} formId - The unique identifier of the form to load
+ * @param {string} [namespace] - Optional namespace for the form
+ * @param {Record<string, string | string[]>} [additionalMetadata] - Optional additional metadata to pass to the API
  * @returns {Promise<FormServiceConfig>} Configuration object with pre-loaded form data
  * @throws {Error} When the form cannot be loaded
  *
@@ -110,5 +114,5 @@ export declare const FormService: import("@wix/services-definitions").ServiceFac
  * const formService = FormService.withConfig(formConfig);
  * ```
  */
-export declare function loadFormServiceConfig(formId: string): Promise<FormServiceConfig>;
+export declare function loadFormServiceConfig(formId: string, namespace?: string, additionalMetadata?: Record<string, string | string[]>): Promise<FormServiceConfig>;
 export {};

package/cjs/dist/services/form-service.js

@@ -5,6 +5,7 @@ exports.loadFormServiceConfig = loadFormServiceConfig;
 const forms_1 = require("@wix/forms");
 const services_definitions_1 = require("@wix/services-definitions");
 const signals_1 = require("@wix/services-definitions/core-services/signals");
+const essentials_1 = require("@wix/essentials");
 /**
  * Service definition for the Form service.
  * This defines the contract that the FormService must implement.
@@ -47,13 +48,13 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
     if (!hasSchema) {
-        loadForm(config.formId);
+        loadForm(config.formId, config.namespace, config.additionalMetadata);
     }
-    async function loadForm(id) {
+    async function loadForm(id, namespace, additionalMetadata) {
         isLoadingSignal.set(true);
         errorSignal.set(null);
         try {
-            const result = await fetchForm(id);
+            const result = await fetchForm({ id, namespace, additionalMetadata });
             if (result) {
                 formSignal.set(result);
             }
@@ -117,13 +118,41 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
         submitForm: submitForm,
     };
 });
-async function fetchForm(id) {
+function buildFormFetchQueryParams({ id, namespace, additionalMetadata, }) {
+    const params = new URLSearchParams();
+    params.append('formId', id);
+    if (namespace) {
+        params.append('namespace', namespace);
+    }
+    if (additionalMetadata) {
+        Object.entries(additionalMetadata).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                value.forEach((v) => params.append(key, v));
+            }
+            else {
+                params.append(key, value);
+            }
+        });
+    }
+    return params;
+}
+async function fetchForm({ id, namespace, additionalMetadata, }) {
     try {
-        const result = await forms_1.forms.getForm(id);
-        if (!result) {
-            throw new Error(`Form ${id} not found`);
+        const params = buildFormFetchQueryParams({
+            id,
+            namespace,
+            additionalMetadata,
+        });
+        const url = `https://edge.wixapis.com/form-schema-service/v4/forms/${id}?${params.toString()}`;
+        const response = await essentials_1.httpClient.fetchWithAuth(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch form: ${response.status} ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data && data.form) {
+            return data.form;
         }
-        return result;
+        throw new Error('Invalid response format from Forms API');
     }
     catch (err) {
         console.error('Failed to load form:', id, err);
@@ -136,6 +165,8 @@ async function fetchForm(id) {
  * a specific form by ID that will be used to configure the FormService.
  *
  * @param {string} formId - The unique identifier of the form to load
+ * @param {string} [namespace] - Optional namespace for the form
+ * @param {Record<string, string | string[]>} [additionalMetadata] - Optional additional metadata to pass to the API
  * @returns {Promise<FormServiceConfig>} Configuration object with pre-loaded form data
  * @throws {Error} When the form cannot be loaded
  *
@@ -146,7 +177,7 @@ async function fetchForm(id) {
  * const formService = FormService.withConfig(formConfig);
  * ```
  */
-async function loadFormServiceConfig(formId) {
-    const form = await fetchForm(formId);
+async function loadFormServiceConfig(formId, namespace, additionalMetadata) {
+    const form = await fetchForm({ id: formId, namespace, additionalMetadata });
     return { form };
 }

package/dist/react/Form.d.ts

@@ -637,9 +637,6 @@ export interface FieldLabelProps {
     /** CSS classes to apply to the label element */
     className?: string;
 }
-/**
- * Props for Field.InputWrapper component
- */
 export interface FieldInputWrapperProps {
     /** Child components (typically Field.Input and Field.Error) */
     children: React.ReactNode;
@@ -684,28 +681,48 @@ export interface FieldErrorProps {
     children?: React.ReactNode;
 }
 /**
- * Label component for a form field with automatic grid positioning.
- * Must be used within a Form.Field component.
- * Renders in the label row of the field's grid layout.
+ * Props for Field.Label.Required component
+ */
+export interface FieldLabelRequiredProps {
+    /** Whether to show the required indicator */
+    required?: boolean;
+    /** Custom content to display (defaults to red asterisk) */
+    children?: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the required indicator */
+    className?: string;
+}
+/**
+ * Required indicator component for form field labels.
+ * Must be used within a Form.Field.Label component.
  *
  * @component
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
  *
- * <Form.Field id="email">
- *   <Form.Field.Label>
- *     <label className="text-foreground font-paragraph">Email Address</label>
- *   </Form.Field.Label>
- *   <Form.Field.InputWrapper>
- *     <Form.Field.Input>
- *       <input type="email" className="bg-background border-foreground text-foreground" />
- *     </Form.Field.Input>
- *   </Form.Field.InputWrapper>
- * </Form.Field>
- * ```
+ * // Basic usage with required prop
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Email Address
+ *     <Form.Field.Label.Required  />
+ *   </label>
+ * </Form.Field.Label>
+ *
+ * // Custom styling
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Username
+ *     <Form.Field.Label.Required required={true} className="text-destructive ml-2" />
+ *   </label>
+ * </Form.Field.Label>
  */
-export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldLabelRequired: React.ForwardRefExoticComponent<FieldLabelRequiredProps & React.RefAttributes<HTMLSpanElement>>;
+interface FieldLabelComponent extends React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLDivElement>> {
+    Required: typeof FieldLabelRequired;
+}
+export declare const FieldLabel: FieldLabelComponent;
 /**
  * InputWrapper component that wraps input and error elements with grid positioning.
  * Must be used within a Form.Field component.

package/dist/react/Form.js

@@ -584,7 +584,10 @@ FieldRoot.displayName = 'Form.Field';
  *
  * <Form.Field id="email">
  *   <Form.Field.Label>
- *     <label className="text-foreground font-paragraph">Email Address</label>
+ *     <label className="text-foreground font-paragraph">
+ *       Email Address
+ *       <Form.Field.Label.Required required={true} />
+ *     </label>
  *   </Form.Field.Label>
  *   <Form.Field.InputWrapper>
  *     <Form.Field.Input>
@@ -594,12 +597,52 @@ FieldRoot.displayName = 'Form.Field';
  * </Form.Field>
  * ```
  */
-export const FieldLabel = React.forwardRef((props, ref) => {
+const FieldLabelRoot = React.forwardRef((props, ref) => {
     const { children, asChild, className, ...otherProps } = props;
     const { gridStyles } = useFieldContext();
     return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, style: gridStyles.label, "data-testid": TestIds.fieldLabel, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
 });
-FieldLabel.displayName = 'Form.Field.Label';
+FieldLabelRoot.displayName = 'Form.Field.Label';
+/**
+ * Required indicator component for form field labels.
+ * Must be used within a Form.Field.Label component.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * // Basic usage with required prop
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Email Address
+ *     <Form.Field.Label.Required  />
+ *   </label>
+ * </Form.Field.Label>
+ *
+ * // Custom styling
+ * <Form.Field.Label>
+ *   <label className="text-foreground font-paragraph">
+ *     Username
+ *     <Form.Field.Label.Required required={true} className="text-destructive ml-2" />
+ *   </label>
+ * </Form.Field.Label>
+ */
+export const FieldLabelRequired = React.forwardRef((props, ref) => {
+    const { required = false, children, asChild, className, ...otherProps } = props;
+    const requiredIndicator = 'asterisk';
+    // @ts-expect-error
+    if (!required || requiredIndicator === 'none')
+        return null;
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...otherProps, children: _jsx("span", { children: requiredIndicator === 'asterisk'
+                ? '*'
+                : requiredIndicator === 'text'
+                    ? '(Required)'
+                    : null }) }));
+});
+FieldLabelRequired.displayName = 'Form.Field.Label.Required';
+export const FieldLabel = FieldLabelRoot;
+FieldLabel.Required = FieldLabelRequired;
 /**
  * InputWrapper component that wraps input and error elements with grid positioning.
  * Must be used within a Form.Field component.

package/dist/react/Phone.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+export interface PhoneFieldProps {
+    id: string;
+    children: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export interface PhoneLabelProps {
+    children: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export interface PhoneLabelRequiredProps {
+    required?: boolean;
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+export declare const Required: React.ForwardRefExoticComponent<PhoneLabelRequiredProps & React.RefAttributes<HTMLSpanElement>>;
+interface PhoneLabelComponent extends React.ForwardRefExoticComponent<PhoneLabelProps & React.RefAttributes<HTMLDivElement>> {
+    Required: typeof Required;
+}
+export declare const Label: PhoneLabelComponent;
+export interface PhoneErrorProps {
+    children?: React.ReactNode;
+    asChild?: boolean;
+    className?: string;
+}
+declare const Error: React.ForwardRefExoticComponent<PhoneErrorProps & React.RefAttributes<HTMLDivElement>>;
+export interface CountryCodeProps {
+    asChild?: boolean;
+    className?: string;
+}
+declare const CountryCode: React.ForwardRefExoticComponent<CountryCodeProps & React.RefAttributes<HTMLDivElement>>;
+export interface PhoneFieldInputProps {
+    asChild?: boolean;
+    className?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<PhoneFieldInputProps & React.RefAttributes<HTMLDivElement>>;
+interface PhoneFieldComponent extends React.ForwardRefExoticComponent<PhoneFieldProps & React.RefAttributes<HTMLDivElement>> {
+    Label: typeof Label;
+    Error: typeof Error;
+    Input: typeof Input;
+    CountryCode: typeof CountryCode;
+}
+export declare const PhoneField: PhoneFieldComponent;
+export {};

package/dist/react/Phone.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Form } from '@wix/headless-forms/react';
+import { useFieldProps } from '@wix/form-public';
+const Root = React.forwardRef((props, ref) => {
+    const { id, children, asChild, className } = props;
+    const { description } = useFieldProps();
+    return (_jsx(Form.Field, { ref: ref, id: id, asChild: asChild, className: className, children: _jsx(Form.Field.InputWrapper, { children: _jsx(Form.Field.Input, { description: description, children: children }) }) }));
+});
+Root.displayName = 'PhoneField';
+const LabelRoot = React.forwardRef((props, ref) => {
+    const { asChild, className, children } = props;
+    const { id, label, showLabel } = useFieldProps();
+    if (!showLabel) {
+        return null;
+    }
+    return (_jsx(Form.Field.Label, { ref: ref, asChild: asChild, className: className, children: _jsxs("label", { htmlFor: id, children: [label, children] }) }));
+});
+LabelRoot.displayName = 'PhoneField.Label';
+export const Required = React.forwardRef((props, ref) => {
+    const { required } = useFieldProps();
+    return _jsx(Form.Field.Label.Required, { ...props, ref: ref, required: required });
+});
+Required.displayName = 'PhoneField.Label.Required';
+export const Label = LabelRoot;
+Label.Required = Required;
+const Error = React.forwardRef((props, ref) => {
+    const { children, ...rest } = props;
+    const { errorMessage } = useFieldProps();
+    return (_jsx(Form.Field.Error, { ref: ref, ...rest, children: errorMessage }));
+});
+Error.displayName = 'PhoneField.Error';
+const CountryCode = React.forwardRef((props, ref) => {
+    const { asChild, className, ...rest } = props;
+    const { id, countryCodes, defaultCountryCode, readOnly, onChange, onBlur, onFocus, } = useFieldProps();
+    return (_jsx(Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: _jsx("select", { id: `${id}-country`, defaultValue: defaultCountryCode || '', disabled: readOnly, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.(), children: countryCodes?.map((code) => (_jsx("option", { value: code, children: code }, code))) }) }));
+});
+CountryCode.displayName = 'PhoneField.CountryCode';
+const Input = React.forwardRef((props, ref) => {
+    const { asChild, className, ...rest } = props;
+    const { id, value, required, readOnly, placeholder, onChange, onBlur, onFocus, description, } = useFieldProps();
+    const descriptionId = description ? `${id}-description` : undefined;
+    return (_jsx(Form.Field.Input, { ref: ref, asChild: asChild, className: className, ...rest, children: _jsx("input", { id: id, type: "tel", value: value || '', required: required, readOnly: readOnly, placeholder: placeholder, "aria-describedby": descriptionId, "aria-invalid": !!(required && !value), "aria-required": required, onChange: (e) => onChange?.(e.target.value), onBlur: () => onBlur?.(), onFocus: () => onFocus?.() }) }));
+});
+Input.displayName = 'PhoneField.Input';
+export const PhoneField = Root;
+PhoneField.Label = Label;
+PhoneField.Error = Error;
+PhoneField.Input = Input;
+PhoneField.CountryCode = CountryCode;

package/dist/react/index.d.ts

@@ -1,2 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
+export * from './Phone.js';

package/dist/react/index.js

@@ -1,2 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
+export * from './Phone.js';

package/dist/services/form-service.d.ts

@@ -60,6 +60,8 @@ type OnSubmit = (formId: string, formValues: FormValues) => Promise<SubmitRespon
 export type FormServiceConfig = {
     formId: string;
     onSubmit?: OnSubmit;
+    namespace?: string;
+    additionalMetadata?: Record<string, string | string[]>;
 } | {
     form: forms.Form;
     onSubmit?: OnSubmit;
@@ -100,6 +102,8 @@ export declare const FormService: import("@wix/services-definitions").ServiceFac
  * a specific form by ID that will be used to configure the FormService.
  *
  * @param {string} formId - The unique identifier of the form to load
+ * @param {string} [namespace] - Optional namespace for the form
+ * @param {Record<string, string | string[]>} [additionalMetadata] - Optional additional metadata to pass to the API
  * @returns {Promise<FormServiceConfig>} Configuration object with pre-loaded form data
  * @throws {Error} When the form cannot be loaded
  *
@@ -110,5 +114,5 @@ export declare const FormService: import("@wix/services-definitions").ServiceFac
  * const formService = FormService.withConfig(formConfig);
  * ```
  */
-export declare function loadFormServiceConfig(formId: string): Promise<FormServiceConfig>;
+export declare function loadFormServiceConfig(formId: string, namespace?: string, additionalMetadata?: Record<string, string | string[]>): Promise<FormServiceConfig>;
 export {};

package/dist/services/form-service.js

@@ -1,6 +1,7 @@
-import { forms, submissions } from '@wix/forms';
+import { submissions } from '@wix/forms';
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+import { httpClient } from '@wix/essentials';
 /**
  * Service definition for the Form service.
  * This defines the contract that the FormService must implement.
@@ -43,13 +44,13 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
     if (!hasSchema) {
-        loadForm(config.formId);
+        loadForm(config.formId, config.namespace, config.additionalMetadata);
     }
-    async function loadForm(id) {
+    async function loadForm(id, namespace, additionalMetadata) {
         isLoadingSignal.set(true);
         errorSignal.set(null);
         try {
-            const result = await fetchForm(id);
+            const result = await fetchForm({ id, namespace, additionalMetadata });
             if (result) {
                 formSignal.set(result);
             }
@@ -113,13 +114,41 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
         submitForm: submitForm,
     };
 });
-async function fetchForm(id) {
+function buildFormFetchQueryParams({ id, namespace, additionalMetadata, }) {
+    const params = new URLSearchParams();
+    params.append('formId', id);
+    if (namespace) {
+        params.append('namespace', namespace);
+    }
+    if (additionalMetadata) {
+        Object.entries(additionalMetadata).forEach(([key, value]) => {
+            if (Array.isArray(value)) {
+                value.forEach((v) => params.append(key, v));
+            }
+            else {
+                params.append(key, value);
+            }
+        });
+    }
+    return params;
+}
+async function fetchForm({ id, namespace, additionalMetadata, }) {
     try {
-        const result = await forms.getForm(id);
-        if (!result) {
-            throw new Error(`Form ${id} not found`);
+        const params = buildFormFetchQueryParams({
+            id,
+            namespace,
+            additionalMetadata,
+        });
+        const url = `https://edge.wixapis.com/form-schema-service/v4/forms/${id}?${params.toString()}`;
+        const response = await httpClient.fetchWithAuth(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch form: ${response.status} ${response.statusText}`);
+        }
+        const data = await response.json();
+        if (data && data.form) {
+            return data.form;
         }
-        return result;
+        throw new Error('Invalid response format from Forms API');
     }
     catch (err) {
         console.error('Failed to load form:', id, err);
@@ -132,6 +161,8 @@ async function fetchForm(id) {
  * a specific form by ID that will be used to configure the FormService.
  *
  * @param {string} formId - The unique identifier of the form to load
+ * @param {string} [namespace] - Optional namespace for the form
+ * @param {Record<string, string | string[]>} [additionalMetadata] - Optional additional metadata to pass to the API
  * @returns {Promise<FormServiceConfig>} Configuration object with pre-loaded form data
  * @throws {Error} When the form cannot be loaded
  *
@@ -142,7 +173,7 @@ async function fetchForm(id) {
  * const formService = FormService.withConfig(formConfig);
  * ```
  */
-export async function loadFormServiceConfig(formId) {
-    const form = await fetchForm(formId);
+export async function loadFormServiceConfig(formId, namespace, additionalMetadata) {
+    const form = await fetchForm({ id: formId, namespace, additionalMetadata });
     return { form };
 }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.12",
+  "version": "0.0.14",
+  "license": "MIT",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -41,10 +42,21 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@wix/form-public": "^0.53.0",
+    "@wix/form-public": "^0.55.0",
     "@wix/forms": "^1.0.331",
-    "@wix/headless-utils": "0.0.4",
+    "@wix/headless-utils": "0.0.5",
     "@wix/services-definitions": "^0.1.4",
     "@wix/services-manager-react": "^0.1.26"
-  }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "wix": {
+    "artifact": {
+      "artifactId": "headless-forms",
+      "groupId": "com.wixpress.headless-components"
+    }
+  },
+  "falconPackageHash": "d647857993c0f94b27c514b7f73c6118a7ae3c6ee5ee21c998802545"
 }