@wix/headless-forms 0.0.11 → 0.0.13

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/dist/react/Form.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type FormError } from '@wix/form-public';
 import { type CheckboxGroupProps, type CheckboxProps, type PhoneInputProps, type DateInputProps, type DatePickerProps, type DateTimeInputProps, type DropdownProps, type FileUploadProps, type MultilineAddressProps, type NumberInputProps, type RadioGroupProps, type RatingInputProps, type RichTextProps, type SignatureProps, type SubmitButtonProps, type TagsProps, type TextAreaProps, type TextInputProps, type TimeInputProps, type ProductListProps, type FixedPaymentProps, type PaymentInputProps, type DonationProps, type AppointmentProps, type ImageChoiceProps } from './types.js';
 import { type FormServiceConfig } from '../services/form-service.js';
 /**
@@ -621,7 +622,9 @@ export interface FieldProps {
  */
 interface FieldComponent extends React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>> {
     Label: typeof FieldLabel;
+    InputWrapper: typeof FieldInputWrapper;
     Input: typeof FieldInput;
+    Error: typeof FieldError;
 }
 /**
  * Props for Field.Label component
@@ -634,6 +637,14 @@ export interface FieldLabelProps {
     /** CSS classes to apply to the label element */
     className?: string;
 }
+export interface FieldInputWrapperProps {
+    /** Child components (typically Field.Input and Field.Error) */
+    children: React.ReactNode;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the wrapper element */
+    className?: string;
+}
 /**
  * Props for Field.Input component
  */
@@ -648,9 +659,74 @@ export interface FieldInputProps {
     description?: React.ReactNode;
 }
 /**
- * Label component for a form field with automatic grid positioning.
+ * Render props for Field.Error component
+ */
+export interface FieldErrorRenderProps {
+    /** The error type */
+    type: FormError['errorType'];
+    /** The error message */
+    message: string;
+}
+/**
+ * Props for Field.Error component
+ */
+export interface FieldErrorProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** CSS classes to apply to the error element */
+    className?: string;
+    /** The error message */
+    errorMessage?: string;
+    /** Child components to render */
+    children?: React.ReactNode;
+}
+/**
+ * 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';
+ *
+ * // 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 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.
- * Renders in the label row of the field's grid layout.
+ * This wrapper applies the grid positioning styles to contain both the input and error.
  *
  * @component
  * @example
@@ -661,17 +737,22 @@ export interface FieldInputProps {
  *   <Form.Field.Label>
  *     <label className="text-foreground font-paragraph">Email Address</label>
  *   </Form.Field.Label>
- *   <Form.Field.Input>
- *     <input type="email" className="bg-background border-foreground" />
- *   </Form.Field.Input>
+ *   <Form.Field.InputWrapper>
+ *     <Form.Field.Input>
+ *       <input type="email" className="bg-background border-foreground text-foreground" />
+ *     </Form.Field.Input>
+ *     <Form.Field.Error>
+ *       <span className="text-destructive text-sm font-paragraph">Please enter a valid email</span>
+ *     </Form.Field.Error>
+ *   </Form.Field.InputWrapper>
  * </Form.Field>
  * ```
  */
-export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FieldInputWrapper: React.ForwardRefExoticComponent<FieldInputWrapperProps & React.RefAttributes<HTMLDivElement>>;
 /**
- * Input component for a form field with automatic grid positioning.
- * Must be used within a Form.Field component.
- * Renders in the input row of the field's grid layout with optional description.
+ * Input component for a form field.
+ * Must be used within a Form.Field.InputWrapper component.
+ * Renders the actual input element without grid positioning.
  *
  * @component
  * @example
@@ -682,12 +763,40 @@ export declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps
  *   <Form.Field.Label>
  *     <label className="text-foreground font-paragraph">Password</label>
  *   </Form.Field.Label>
- *   <Form.Field.Input description={<span className="text-secondary-foreground">Min 8 characters</span>}>
- *     <input type="password" className="bg-background border-foreground text-foreground" />
- *   </Form.Field.Input>
+ *   <Form.Field.InputWrapper>
+ *     <Form.Field.Input description={<span className="text-secondary-foreground">Min 8 characters</span>}>
+ *       <input type="password" className="bg-background border-foreground text-foreground" />
+ *     </Form.Field.Input>
+ *   </Form.Field.InputWrapper>
  * </Form.Field>
  * ```
  */
 export declare const FieldInput: React.ForwardRefExoticComponent<FieldInputProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Error component for displaying field-level validation errors.
+ * Must be used within a Form.Field.InputWrapper component.
+ * Only renders when there is an error for the current field.
+ *
+ * @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.Error path="email">
+ *       <span className="text-destructive text-sm font-paragraph">Please enter a valid email address</span>
+ *     </Form.Field.Error>
+ *   </Form.Field.InputWrapper>
+ * </Form.Field>
+ * ```
+ */
+export declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Field: FieldComponent;
 export {};

package/dist/react/Form.js

@@ -3,6 +3,8 @@ import React, { useState, useCallback } from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import { useForm, FormProvider, } from '@wix/form-public';
 import { Root as CoreRoot, Loading as CoreLoading, LoadingError as CoreLoadingError, Error as CoreError, Submitted as CoreSubmitted, Fields as CoreFields, Field as CoreField, } from './core/Form.js';
+import { FieldContext, useFieldContext, } from './context/FieldContext.js';
+import { FieldLayoutProvider, useFieldLayout, } from './context/FieldLayoutContext.js';
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -13,7 +15,9 @@ var TestIds;
     TestIds["formSubmitted"] = "form-submitted";
     TestIds["fieldRoot"] = "field-root";
     TestIds["fieldLabel"] = "field-label";
+    TestIds["fieldInputWrapper"] = "field-input-wrapper";
     TestIds["fieldInput"] = "field-input";
+    TestIds["fieldError"] = "field-error";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides all necessary service contexts for a complete form experience.
@@ -494,22 +498,21 @@ export const Fields = React.forwardRef((props, ref) => {
     return (_jsx(CoreFields, { children: ({ form, submitForm }) => {
             if (!form)
                 return null;
-            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
+            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { currency: 'USD', locale: 'en', children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
         } }));
 });
 const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate, fields: fieldMap, rowGapClassname, columnGapClassname, }) => {
     const formData = useForm({
         form,
         values,
-        onChange,
         errors,
+        onChange,
         onValidate,
         submitForm,
         fieldMap,
     });
     if (!formData)
         return null;
-    console.log('formData', formData);
     const { columnCount, fieldElements, fieldsLayout } = formData;
     return (
     // TODO: use readOnly, isDisabled
@@ -524,45 +527,9 @@ const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate
                         }, className: columnGapClassname, children: rowElements }, index));
                 }) }) }) }));
 };
-/**
- * Context for sharing field layout data across the form
- * @internal
- */
-const FieldLayoutContext = React.createContext(null);
-/**
- * Provider component that makes field layout data available to child components
- * @internal
- */
-const FieldLayoutProvider = ({ value, children, }) => {
-    return (_jsx(FieldLayoutContext.Provider, { value: value, children: children }));
-};
-/**
- * Hook to access layout configuration for a specific field
- * @internal
- * @param {string} fieldId - The unique identifier of the field
- * @returns {Layout | null} The layout configuration for the field, or null if not found
- */
-function useFieldLayout(fieldId) {
-    const layoutMap = React.useContext(FieldLayoutContext);
-    if (!layoutMap) {
-        return null;
-    }
-    return layoutMap[fieldId] || null;
-}
-const FieldContext = React.createContext(null);
-/**
- * Hook to access field context
- */
-function useFieldContext() {
-    const context = React.useContext(FieldContext);
-    if (!context) {
-        throw new globalThis.Error('Field components must be used within a Form.Field component');
-    }
-    return context;
-}
 /**
  * Container component for a form field with grid layout support.
- * Provides context to Field.Label and Field.Input child components.
+ * Provides context to Field.Label, Field.InputWrapper, Field.Input, and Field.Error child components.
  * Based on the default-field-layout functionality.
  *
  * @component
@@ -576,9 +543,14 @@ function useFieldContext() {
  *       <Form.Field.Label>
  *         <label className="text-foreground font-paragraph">Username</label>
  *       </Form.Field.Label>
- *       <Form.Field.Input description={<span className="text-secondary-foreground">Required</span>}>
- *         <input className="bg-background border-foreground text-foreground" />
- *       </Form.Field.Input>
+ *       <Form.Field.InputWrapper>
+ *         <Form.Field.Input description={<span className="text-secondary-foreground">Required</span>}>
+ *           <input className="bg-background border-foreground text-foreground" />
+ *         </Form.Field.Input>
+ *         <Form.Field.Error>
+ *           <span className="text-destructive text-sm font-paragraph">Username is required</span>
+ *         </Form.Field.Error>
+ *       </Form.Field.InputWrapper>
  *     </Form.Field>
  *   );
  * }
@@ -612,24 +584,100 @@ 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.Input>
- *     <input type="email" className="bg-background border-foreground" />
- *   </Form.Field.Input>
+ *   <Form.Field.InputWrapper>
+ *     <Form.Field.Input>
+ *       <input type="email" className="bg-background border-foreground text-foreground" />
+ *     </Form.Field.Input>
+ *   </Form.Field.InputWrapper>
  * </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;
 /**
- * Input component for a form field with automatic grid positioning.
+ * InputWrapper component that wraps input and error elements with grid positioning.
  * Must be used within a Form.Field component.
- * Renders in the input row of the field's grid layout with optional description.
+ * This wrapper applies the grid positioning styles to contain both the input and error.
+ *
+ * @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.Error>
+ *       <span className="text-destructive text-sm font-paragraph">Please enter a valid email</span>
+ *     </Form.Field.Error>
+ *   </Form.Field.InputWrapper>
+ * </Form.Field>
+ * ```
+ */
+export const FieldInputWrapper = React.forwardRef((props, ref) => {
+    const { children, asChild, className, ...otherProps } = props;
+    const { gridStyles } = useFieldContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, style: gridStyles.input, "data-testid": TestIds.fieldInputWrapper, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
+});
+FieldInputWrapper.displayName = 'Form.Field.InputWrapper';
+/**
+ * Input component for a form field.
+ * Must be used within a Form.Field.InputWrapper component.
+ * Renders the actual input element without grid positioning.
  *
  * @component
  * @example
@@ -640,18 +688,53 @@ FieldLabel.displayName = 'Form.Field.Label';
  *   <Form.Field.Label>
  *     <label className="text-foreground font-paragraph">Password</label>
  *   </Form.Field.Label>
- *   <Form.Field.Input description={<span className="text-secondary-foreground">Min 8 characters</span>}>
- *     <input type="password" className="bg-background border-foreground text-foreground" />
- *   </Form.Field.Input>
+ *   <Form.Field.InputWrapper>
+ *     <Form.Field.Input description={<span className="text-secondary-foreground">Min 8 characters</span>}>
+ *       <input type="password" className="bg-background border-foreground text-foreground" />
+ *     </Form.Field.Input>
+ *   </Form.Field.InputWrapper>
  * </Form.Field>
  * ```
  */
 export const FieldInput = React.forwardRef((props, ref) => {
     const { children, description, asChild, className, ...otherProps } = props;
-    const { gridStyles } = useFieldContext();
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, style: gridStyles.input, "data-testid": TestIds.fieldInput, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.fieldInput, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
 });
 FieldInput.displayName = 'Form.Field.Input';
+/**
+ * Error component for displaying field-level validation errors.
+ * Must be used within a Form.Field.InputWrapper component.
+ * Only renders when there is an error for the current field.
+ *
+ * @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.Error path="email">
+ *       <span className="text-destructive text-sm font-paragraph">Please enter a valid email address</span>
+ *     </Form.Field.Error>
+ *   </Form.Field.InputWrapper>
+ * </Form.Field>
+ * ```
+ */
+export const FieldError = React.forwardRef((props, ref) => {
+    const { errorMessage, asChild, className, children, ...otherProps } = props;
+    if (!errorMessage && !children)
+        return null;
+    return (_jsx(AsChildSlot, { "data-testid": TestIds.fieldError, ref: ref, asChild: asChild, className: className, ...otherProps, children: children || errorMessage }));
+});
+FieldError.displayName = 'Form.Field.Error';
 export const Field = FieldRoot;
 Field.Label = FieldLabel;
+Field.InputWrapper = FieldInputWrapper;
 Field.Input = FieldInput;
+Field.Error = FieldError;

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/context/FieldContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type Layout } from '../core/Form.js';
+export interface FieldContextValue {
+    id: string;
+    layout: Layout;
+    gridStyles: {
+        label: React.CSSProperties;
+        input: React.CSSProperties;
+    };
+}
+export declare const FieldContext: React.Context<FieldContextValue | null>;
+export declare function useFieldContext(): FieldContextValue;

package/dist/react/context/FieldContext.js

@@ -0,0 +1,9 @@
+import React from 'react';
+export const FieldContext = React.createContext(null);
+export function useFieldContext() {
+    const context = React.useContext(FieldContext);
+    if (!context) {
+        throw new Error('Field components must be used within a Form.Field component');
+    }
+    return context;
+}

package/dist/react/context/FieldLayoutContext.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { type Layout } from '../core/Form.js';
+export interface FieldLayoutMap {
+    [fieldId: string]: Layout;
+}
+export declare const FieldLayoutContext: React.Context<FieldLayoutMap | null>;
+export interface FieldLayoutProviderProps {
+    value: FieldLayoutMap;
+    children: React.ReactNode;
+}
+export declare const FieldLayoutProvider: React.FC<FieldLayoutProviderProps>;
+export declare function useFieldLayout(fieldId: string): Layout | null;

package/dist/react/context/FieldLayoutContext.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+export const FieldLayoutContext = React.createContext(null);
+export const FieldLayoutProvider = ({ value, children, }) => {
+    return (_jsx(FieldLayoutContext.Provider, { value: value, children: children }));
+};
+export function useFieldLayout(fieldId) {
+    const layoutMap = React.useContext(FieldLayoutContext);
+    if (!layoutMap) {
+        return null;
+    }
+    return layoutMap[fieldId] || null;
+}

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/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.11",
+  "version": "0.0.13",
+  "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.40.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": "168b61be66455144dea6e8f0990a615314a7fbd283fa1cd8e4c18b6c"
 }