@ttoss/forms 0.42.0 → 0.43.1

package/README.md

@@ -571,6 +571,46 @@ Input with custom format patterns.
 />
 ```
 
+### FormFieldPhone
+
+Generic phone number field with an optional country-code dropdown. By default it renders a dropdown populated with `COMMON_PHONE_COUNTRY_CODES` (15 common countries + a Manual entry). The component manages the selected country code internally — no external state is needed.
+
+```tsx
+import { FormFieldPhone, COMMON_PHONE_COUNTRY_CODES } from '@ttoss/forms';
+
+// Minimal — dropdown defaults to COMMON_PHONE_COUNTRY_CODES, starts in Manual mode
+<FormFieldPhone name="phone" label="Phone" />
+
+// Set an initial country code (US +1)
+<FormFieldPhone name="phone" label="Phone" defaultCountryCode="+1" />
+
+// React to country-code changes without managing state
+<FormFieldPhone
+  name="phone"
+  label="Phone"
+  defaultCountryCode="+1"
+  onCountryCodeChange={(code) => console.log('selected', code)}
+/>
+
+// No dropdown — plain masked input with a fixed country code
+<FormFieldPhone
+  name="phone"
+  label="Phone"
+  defaultCountryCode="+1"
+  format="(###) ###-####"
+  countryCodeOptions={[]}
+/>
+```
+
+The submitted value always includes the country code prefix (e.g. `{ phone: '+15555555555' }`). When the user selects the **Manual** entry, the mask is removed and the user can type any international number freely (the value is stored with a `+` prefix).
+
+**Key props:**
+
+- `defaultCountryCode`: Initial calling code (e.g. `'+1'`). Defaults to the first entry in `countryCodeOptions`.
+- `format`: Pattern string or function for the local number part (e.g. `'(###) ###-####'`).
+- `countryCodeOptions`: List of `CountryCodeOption` objects. Defaults to `COMMON_PHONE_COUNTRY_CODES`. Pass `[]` to hide the dropdown.
+- `onCountryCodeChange`: Optional callback fired when the user picks a different country code.
+
 ### FormFieldCreditCardNumber
 
 Credit card input with automatic formatting.
@@ -611,7 +651,7 @@ The package also exports `isCnpjValid(cnpj: string)` for standalone validation.
 
 #### FormFieldPhone
 
-Brazilian phone number input with formatting.
+Brazilian phone number input with automatic formatting and the `+55` country code pre-set.
 
 ```tsx
 <FormFieldPhone name="phone" label="Phone" />

package/dist/Brazil/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, FieldPath } from 'react-hook-form';
-import { a as FormFieldPatternFormatProps, F as FormFieldProps, d as FormFieldPhoneProps$1 } from '../FormFieldPhone-BKeOS0i6.js';
+import { a as FormFieldPatternFormatProps, F as FormFieldProps, d as FormFieldPhoneProps$1 } from '../FormFieldPhone--tC0Hlcf.js';
 import { PatternFormatProps, NumberFormatBaseProps } from 'react-number-format';
 import '@ttoss/ui';
 import 'react';
@@ -19,7 +19,7 @@ declare const FormFieldCPF: <TFieldValues extends FieldValues = FieldValues, TNa
 type FormFieldCPFOrCNPJProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<NumberFormatBaseProps, 'name' | 'format'>;
 declare const FormFieldCPFOrCNPJ: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldCPFOrCNPJProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
-type FormFieldPhoneProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldPhoneProps$1<TFieldValues, TName>, 'countryCode' | 'format'>;
+type FormFieldPhoneProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldPhoneProps$1<TFieldValues, TName>, 'defaultCountryCode' | 'format'>;
 /**
  * Brazilian phone number form field.
  *

package/dist/{FormFieldPhone-BKeOS0i6.d.ts → FormFieldPhone--tC0Hlcf.d.ts}

@@ -109,11 +109,12 @@ declare const COMMON_PHONE_COUNTRY_CODES: CountryCodeOption[];
 
 type FormFieldPhoneProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<PatternFormatProps, 'name' | 'format'> & {
     /**
-     * The country calling code to display as a literal prefix in the input.
+     * The initial country calling code to display as a literal prefix in the input.
      * For example, '+55' for Brazil or '+1' for the United States.
      * Defaults to the first entry in `countryCodeOptions` when not provided.
+     * The component manages the selected code internally — no external state needed.
      */
-    countryCode?: string;
+    defaultCountryCode?: string;
     /**
      * The pattern format for the local part of the phone number.
      * Accepts either a static string (e.g., '(##) #####-####') or a function
@@ -136,9 +137,10 @@ type FormFieldPhoneProps<TFieldValues extends FieldValues = FieldValues, TName e
      */
     countryCodeOptions?: CountryCodeOption[];
     /**
-     * Called with the newly selected country code value when the user changes
-     * the country code via the dropdown. Only relevant when
-     * countryCodeOptions is non-empty.
+     * Optional callback fired with the newly selected country code value when
+     * the user changes the country code via the dropdown. The component
+     * manages the selected code internally, so this is only needed when the
+     * caller wants to react to country-code changes.
      */
     onCountryCodeChange?: (countryCode: string) => void;
 };
@@ -168,26 +170,30 @@ type FormFieldPhoneProps<TFieldValues extends FieldValues = FieldValues, TName e
  *
  * @example
  * ```tsx
- * // Default: dropdown with COMMON_PHONE_COUNTRY_CODES, US (+1) pre-selected
- * <FormFieldPhone name="phone" label="Phone" countryCode="+1" />
+ * // Default: dropdown with COMMON_PHONE_COUNTRY_CODES, country code managed internally.
+ * // The submitted value includes the country code prefix (e.g. '+15555555555').
+ * <FormFieldPhone name="phone" label="Phone" />
  * ```
  *
  * @example
  * ```tsx
- * // Controlled country code — submitted value includes the prefix
- * // e.g. { phone: '+15555555555' }
- * const [countryCode, setCountryCode] = React.useState('+1');
+ * // Set a custom initial country code; the component manages further changes.
+ * <FormFieldPhone name="phone" label="Phone" defaultCountryCode="+55" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Listen for country-code changes without managing state externally.
  * <FormFieldPhone
  *   name="phone"
  *   label="Phone"
- *   countryCode={countryCode}
- *   onCountryCodeChange={setCountryCode}
+ *   onCountryCodeChange={(code) => console.log('selected', code)}
  * />
  * ```
  *
  * @example
  * ```tsx
- * // No dropdown — plain phone input; value includes the prefix
+ * // No dropdown — plain phone input; value includes the prefix.
  * // e.g. { phone: '+15555555555' }
  * <FormFieldPhone
  *   name="phone"
@@ -212,6 +218,6 @@ type FormFieldPhoneProps<TFieldValues extends FieldValues = FieldValues, TName e
  * />
  * ```
  */
-declare const FormFieldPhone: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, countryCode: countryCodeProp, format, countryCodeOptions, onCountryCodeChange, ...props }: FormFieldPhoneProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormFieldPhone: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, defaultCountryCode: countryCodeProp, format, countryCodeOptions, onCountryCodeChange, ...props }: FormFieldPhoneProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 export { type CountryCodeOption as C, type FormFieldProps as F, MANUAL_PHONE_COUNTRY_CODE as M, type FormFieldPatternFormatProps as a, FormField as b, FormFieldPatternFormat as c, type FormFieldPhoneProps as d, FormFieldPhone as e, COMMON_PHONE_COUNTRY_CODES as f };

package/dist/esm/Brazil/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormField, FormFieldCNPJ, FormFieldCPF, FormFieldPatternFormat, FormFieldPhone, __name, isCnpjValid, isCpfValid } from "../chunk-ZORKZWD7.js";
+import { FormField, FormFieldCNPJ, FormFieldCPF, FormFieldPatternFormat, FormFieldPhone, __name, isCnpjValid, isCpfValid } from "../chunk-U7QBQHMU.js";
 
 // src/Brazil/FormFieldCEP.tsx
 var FormFieldCEP = /* @__PURE__ */__name(({
@@ -84,7 +84,7 @@ var FormFieldPhone2 = /* @__PURE__ */__name(({
 }) => {
   return /* @__PURE__ */React.createElement(FormFieldPhone, {
     ...props,
-    countryCode: BRAZIL_COUNTRY_CODE,
+    defaultCountryCode: BRAZIL_COUNTRY_CODE,
     format: getBrazilPhoneFormat,
     placeholder,
     countryCodeOptions

package/dist/esm/MultistepForm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-YCW3GPTZ.js";
-import { __name } from "../chunk-ZORKZWD7.js";
+import { Form, useForm, yupResolver } from "../chunk-3M2OR5NH.js";
+import { __name } from "../chunk-U7QBQHMU.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-YCW3GPTZ.js → chunk-3M2OR5NH.js}

@@ -1,26 +1,139 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "./chunk-ZORKZWD7.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid, isCpfValid } from "./chunk-U7QBQHMU.js";
 
 // src/Form.tsx
-import { Box } from "@ttoss/ui";
-import * as React2 from "react";
+import { Box as Box2 } from "@ttoss/ui";
 import { FormProvider } from "react-hook-form";
-var Form = /* @__PURE__ */__name(({
+
+// src/FormActions.tsx
+import { Flex } from "@ttoss/ui";
+var alignMap = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var FormActions = /* @__PURE__ */__name(({
+  align = "right",
+  children,
+  sticky = false,
+  sx,
+  ...flexProps
+}) => {
+  return /* @__PURE__ */React.createElement(Flex, {
+    ...flexProps,
+    sx: {
+      flexDirection: "row",
+      gap: "2",
+      justifyContent: alignMap[align],
+      ...(sticky && {
+        position: "sticky",
+        bottom: 0,
+        backgroundColor: "background",
+        paddingY: "3",
+        zIndex: "sticky"
+      }),
+      ...sx
+    }
+  }, children);
+}, "FormActions");
+
+// src/FormGroup.tsx
+import { Box, Flex as Flex2, Text } from "@ttoss/ui";
+import * as React2 from "react";
+var FormGroupContext = /* @__PURE__ */React2.createContext({});
+var useFormGroup = /* @__PURE__ */__name(() => {
+  const {
+    parentLevel
+  } = React2.useContext(FormGroupContext);
+  return {
+    level: parentLevel,
+    /**
+    * @deprecated `levelsLength` has been removed from `FormGroup` internals.
+    * This field always returns `undefined`. Use `level` to determine nesting depth.
+    */
+    levelsLength: void 0
+  };
+}, "useFormGroup");
+var FormGroupWrapper = /* @__PURE__ */__name(({
+  title,
+  description,
+  direction,
+  children,
+  name,
+  ...boxProps
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "4",
+    width: "100%"
+  };
+  return /* @__PURE__ */React2.createElement(Box, {
+    "data-level": level,
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "4",
+      ...boxProps.sx
+    }
+  }, (title || description) && /* @__PURE__ */React2.createElement(Box, {
+    sx: {
+      marginBottom: "2"
+    }
+  }, title && /* @__PURE__ */React2.createElement(Text, {
+    sx: {
+      fontSize: "2xl",
+      fontWeight: "bold"
+    }
+  }, title), description && /* @__PURE__ */React2.createElement(Text, {
+    sx: {
+      color: "text.secondary"
+    }
+  }, description)), /* @__PURE__ */React2.createElement(Flex2, {
+    sx: childrenContainerSx
+  }, children), name && /* @__PURE__ */React2.createElement(FormErrorMessage, {
+    name
+  }));
+}, "FormGroupWrapper");
+var FormGroup = /* @__PURE__ */__name(props => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */React2.createElement(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    }
+  }, /* @__PURE__ */React2.createElement(FormGroupWrapper, props));
+}, "FormGroup");
+
+// src/Form.tsx
+var FormBase = /* @__PURE__ */__name(({
   children,
   onSubmit,
   sx,
   ...formMethods
 }) => {
-  return /* @__PURE__ */React2.createElement(FormProvider, formMethods, /* @__PURE__ */React2.createElement(Box, {
+  return /* @__PURE__ */React.createElement(FormProvider, formMethods, /* @__PURE__ */React.createElement(Box2, {
     as: "form",
     variant: "forms.form",
     onSubmit: formMethods.handleSubmit(data => {
       return onSubmit?.(data);
     }),
-    sx
+    sx: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4",
+      ...sx
+    }
   }, children));
-}, "Form");
+}, "FormBase");
+var Form = Object.assign(FormBase, {
+  Group: FormGroup,
+  Actions: FormActions
+});
 
 // src/FormFieldCheckbox.tsx
 import { Checkbox } from "@ttoss/ui";
@@ -363,7 +476,7 @@ var FormFieldPassword = /* @__PURE__ */__name(({
 }, "FormFieldPassword");
 
 // src/FormFieldRadio.tsx
-import { Flex, Label, Radio } from "@ttoss/ui";
+import { Flex as Flex3, Label, Radio } from "@ttoss/ui";
 var FormFieldRadio = /* @__PURE__ */__name(({
   disabled,
   options,
@@ -397,7 +510,7 @@ var FormFieldRadio = /* @__PURE__ */__name(({
     render: /* @__PURE__ */__name(({
       field
     }) => {
-      return /* @__PURE__ */React.createElement(Flex, {
+      return /* @__PURE__ */React.createElement(Flex3, {
         sx: {
           flexDirection: "column",
           gap: "1"
@@ -431,7 +544,7 @@ var FormFieldRadio = /* @__PURE__ */__name(({
 }, "FormFieldRadio");
 
 // src/FormFieldRadioCard.tsx
-import { Box as Box2, Flex as Flex2, Label as Label2, Radio as Radio2, Text } from "@ttoss/ui";
+import { Box as Box3, Flex as Flex4, Label as Label2, Radio as Radio2, Text as Text2 } from "@ttoss/ui";
 var FormFieldRadioCard = /* @__PURE__ */__name(({
   disabled,
   ...props
@@ -467,7 +580,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
     render: /* @__PURE__ */__name(({
       field
     }) => {
-      return /* @__PURE__ */React.createElement(Flex2, {
+      return /* @__PURE__ */React.createElement(Flex4, {
         sx: {
           flexDirection: direction,
           gap: "4"
@@ -475,7 +588,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
       }, options.map(option => {
         const key = `form-field-radio-${name}-${option.value}`;
         const isSelected = field.value === option.value;
-        return /* @__PURE__ */React.createElement(Box2, {
+        return /* @__PURE__ */React.createElement(Box3, {
           key,
           sx: {
             gap: "2",
@@ -506,12 +619,12 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
           checked: field.value === option.value,
           name,
           disabled: disabled ?? field.disabled
-        }), /* @__PURE__ */React.createElement(Flex2, {
+        }), /* @__PURE__ */React.createElement(Flex4, {
           sx: {
             flexDirection: "column",
             gap: "1"
           }
-        }, option.label && /* @__PURE__ */React.createElement(Text, null, option.label), option.description && /* @__PURE__ */React.createElement(Text, {
+        }, option.label && /* @__PURE__ */React.createElement(Text2, null, option.label), option.description && /* @__PURE__ */React.createElement(Text2, {
           sx: {
             fontSize: "sm"
           }
@@ -522,7 +635,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
 }, "FormFieldRadioCard");
 
 // src/FormFieldRadioCardIcony.tsx
-import { Box as Box3, Flex as Flex3, Tag, Text as Text2 } from "@ttoss/ui";
+import { Box as Box4, Flex as Flex5, Tag, Text as Text3 } from "@ttoss/ui";
 import * as React3 from "react";
 var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
   disabled,
@@ -563,7 +676,7 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
           field.onBlur();
         }
       }, "handleOptionClick");
-      return /* @__PURE__ */React3.createElement(Flex3, {
+      return /* @__PURE__ */React3.createElement(Flex5, {
         sx: {
           flexDirection: direction,
           gap: "4"
@@ -573,7 +686,7 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
         const isSelected = field.value === option.value;
         const IconComponent = option.icon;
         const tag = option.tag;
-        return /* @__PURE__ */React3.createElement(Box3, {
+        return /* @__PURE__ */React3.createElement(Box4, {
           key,
           onClick: /* @__PURE__ */__name(() => {
             return handleOptionClick(option.value);
@@ -594,25 +707,25 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
             opacity: isDisabled ? 0.5 : 1,
             transition: "all 0.2s ease-in-out"
           }
-        }, IconComponent && /* @__PURE__ */React3.createElement(Box3, {
+        }, IconComponent && /* @__PURE__ */React3.createElement(Box4, {
           sx: {
             marginBottom: "2",
             color: "text.primary"
           }
         }, /* @__PURE__ */React3.createElement(IconComponent, {
           size: 24
-        })), /* @__PURE__ */React3.createElement(Flex3, {
+        })), /* @__PURE__ */React3.createElement(Flex5, {
           sx: {
             flexDirection: "column",
             gap: "1"
           }
-        }, option.label && /* @__PURE__ */React3.createElement(Text2, {
+        }, option.label && /* @__PURE__ */React3.createElement(Text3, {
           sx: {
             fontSize: "lg",
             fontWeight: "semibold",
             color: "text.primary"
           }
-        }, option.label), option.description && /* @__PURE__ */React3.createElement(Text2, {
+        }, option.label), option.description && /* @__PURE__ */React3.createElement(Text3, {
           sx: {
             fontSize: "md",
             color: "text.secondary"
@@ -845,78 +958,6 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
   });
 }, "FormFieldTextarea");
 
-// src/FormGroup.tsx
-import { Box as Box4, Flex as Flex4, Text as Text3 } from "@ttoss/ui";
-import * as React4 from "react";
-var FormGroupContext = /* @__PURE__ */React4.createContext({});
-var useFormGroup = /* @__PURE__ */__name(() => {
-  const {
-    parentLevel
-  } = React4.useContext(FormGroupContext);
-  return {
-    level: parentLevel,
-    /**
-    * @deprecated `levelsLength` has been removed from `FormGroup` internals.
-    * This field always returns `undefined`. Use `level` to determine nesting depth.
-    */
-    levelsLength: void 0
-  };
-}, "useFormGroup");
-var FormGroupWrapper = /* @__PURE__ */__name(({
-  title,
-  description,
-  direction,
-  children,
-  name,
-  ...boxProps
-}) => {
-  const {
-    level
-  } = useFormGroup();
-  const childrenContainerSx = {
-    flexDirection: direction || "column",
-    gap: "1",
-    width: "100%"
-  };
-  return /* @__PURE__ */React4.createElement(Box4, {
-    "data-level": level,
-    ...boxProps,
-    sx: {
-      marginTop: level === 0 ? "none" : "4",
-      marginBottom: "4",
-      ...boxProps.sx
-    }
-  }, (title || description) && /* @__PURE__ */React4.createElement(Box4, {
-    sx: {
-      marginBottom: "2"
-    }
-  }, title && /* @__PURE__ */React4.createElement(Text3, {
-    sx: {
-      fontSize: "2xl",
-      fontWeight: "bold"
-    }
-  }, title), description && /* @__PURE__ */React4.createElement(Text3, {
-    sx: {
-      color: "text.secondary"
-    }
-  }, description)), /* @__PURE__ */React4.createElement(Flex4, {
-    sx: childrenContainerSx
-  }, children), name && /* @__PURE__ */React4.createElement(FormErrorMessage, {
-    name
-  }));
-}, "FormGroupWrapper");
-var FormGroup = /* @__PURE__ */__name(props => {
-  const {
-    level
-  } = useFormGroup();
-  const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */React4.createElement(FormGroupContext.Provider, {
-    value: {
-      parentLevel: currentLevel
-    }
-  }, /* @__PURE__ */React4.createElement(FormGroupWrapper, props));
-}, "FormGroup");
-
 // src/yup/i18n.ts
 import { defineMessage } from "@ttoss/react-i18n";
 import { setLocale } from "yup";
@@ -1083,4 +1124,4 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, FormProvider as FormProvider2, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, z3 as z, yupResolver, zodResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { FormActions, useFormGroup, FormGroup, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, yup2 as yup, z3 as z, yupResolver, zodResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };

package/dist/esm/{chunk-ZORKZWD7.js → chunk-U7QBQHMU.js}

@@ -377,7 +377,7 @@ var PhoneDropdownWrapper = /* @__PURE__ */__name(({
 }, "PhoneDropdownWrapper");
 var FormFieldPhone = /* @__PURE__ */__name(({
   disabled,
-  countryCode: countryCodeProp,
+  defaultCountryCode: countryCodeProp,
   format,
   countryCodeOptions = COMMON_PHONE_COUNTRY_CODES,
   onCountryCodeChange,
@@ -399,7 +399,11 @@ var FormFieldPhone = /* @__PURE__ */__name(({
     placeholder,
     ...patternFormatProps
   } = props;
-  const countryCode = countryCodeProp ?? countryCodeOptions[0]?.value ?? void 0;
+  const [countryCode, setCountryCode] = React4.useState(countryCodeProp ?? countryCodeOptions[0]?.value ?? void 0);
+  const handleCountryCodeChange = /* @__PURE__ */__name(code => {
+    setCountryCode(code);
+    onCountryCodeChange?.(code);
+  }, "handleCountryCodeChange");
   const isManual = countryCode === MANUAL_PHONE_COUNTRY_CODE;
   const getFormat = /* @__PURE__ */__name(value => {
     const selectedOption = countryCodeOptions.find(opt => {
@@ -472,7 +476,7 @@ var FormFieldPhone = /* @__PURE__ */__name(({
         countryCode,
         countryCodeOptions,
         disabled: disabled ?? field.disabled,
-        onCountryCodeChange,
+        onCountryCodeChange: handleCountryCodeChange,
         onPhoneReset: /* @__PURE__ */__name(() => {
           return field.onChange("");
         }, "onPhoneReset"),

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver } from "./chunk-YCW3GPTZ.js";
-import { COMMON_PHONE_COUNTRY_CODES, FormErrorMessage, FormField, FormFieldPatternFormat, FormFieldPhone, MANUAL_PHONE_COUNTRY_CODE } from "./chunk-ZORKZWD7.js";
-export { COMMON_PHONE_COUNTRY_CODES, Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldPhone, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, MANUAL_PHONE_COUNTRY_CODE, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver };
+import { Controller, Form, FormActions, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver } from "./chunk-3M2OR5NH.js";
+import { COMMON_PHONE_COUNTRY_CODES, FormErrorMessage, FormField, FormFieldPatternFormat, FormFieldPhone, MANUAL_PHONE_COUNTRY_CODE } from "./chunk-U7QBQHMU.js";
+export { COMMON_PHONE_COUNTRY_CODES, Controller, Form, FormActions, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldPhone, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, MANUAL_PHONE_COUNTRY_CODE, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SegmentedControlProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
+import { FlexProps, BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SegmentedControlProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
 import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPhone-BKeOS0i6.js';
-export { f as COMMON_PHONE_COUNTRY_CODES, C as CountryCodeOption, b as FormField, c as FormFieldPatternFormat, e as FormFieldPhone, d as FormFieldPhoneProps, M as MANUAL_PHONE_COUNTRY_CODE } from './FormFieldPhone-BKeOS0i6.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPhone--tC0Hlcf.js';
+export { f as COMMON_PHONE_COUNTRY_CODES, C as CountryCodeOption, b as FormField, c as FormFieldPatternFormat, e as FormFieldPhone, d as FormFieldPhoneProps, M as MANUAL_PHONE_COUNTRY_CODE } from './FormFieldPhone--tC0Hlcf.js';
 import { NumericFormatProps } from 'react-number-format';
 import { DateRange } from '@ttoss/components/DatePicker';
 import './typings.d-BzNUo1mD.js';
@@ -16,11 +16,141 @@ export { z };
 export { yupResolver } from '@hookform/resolvers/yup';
 export { zodResolver } from '@hookform/resolvers/zod';
 
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
+declare const alignMap: {
+    readonly left: "flex-start";
+    readonly center: "center";
+    readonly right: "flex-end";
+};
+/**
+ * Props for the FormActions component.
+ */
+type FormActionsProps = {
+    /** Action buttons (Submit, Cancel, Reset, etc.). */
+    children: React.ReactNode;
+    /**
+     * Horizontal alignment of the action buttons.
+     * @default 'right'
+     */
+    align?: keyof typeof alignMap;
+    /**
+     * When `true`, the action bar sticks to the bottom of the viewport so it
+     * remains visible while the user scrolls through a long form.
+     * @default false
+     */
+    sticky?: boolean;
+} & Omit<FlexProps, 'children'>;
+/**
+ * FormActions is a layout container for form action buttons such as Submit,
+ * Cancel, and Reset. It renders a flex row with consistent spacing.
+ *
+ * Use `align` to control horizontal button placement (`'left'`, `'center'`,
+ * or `'right'`). Use `sticky` to keep the action bar visible while the user
+ * scrolls through a long form.
+ *
+ * @example
+ * ```tsx
+ * <Form.Actions align="right" sticky>
+ *   <Button variant="secondary" onClick={onCancel}>Cancel</Button>
+ *   <Button type="submit">Save</Button>
+ * </Form.Actions>
+ * ```
+ */
+declare const FormActions: ({ align, children, sticky, sx, ...flexProps }: FormActionsProps) => react_jsx_runtime.JSX.Element;
+
+declare const useFormGroup: () => {
+    level: number | undefined;
+    /**
+     * @deprecated `levelsLength` has been removed from `FormGroup` internals.
+     * This field always returns `undefined`. Use `level` to determine nesting depth.
+     */
+    levelsLength: number | undefined;
+};
+/**
+ * Props for the FormGroup component.
+ */
+type FormGroupProps = {
+    /**
+     * The field name used to display a validation error message below the group.
+     * Useful when the group maps to an array or object field in the form schema.
+     */
+    name?: string;
+    /**
+     * Optional heading displayed above the group's children.
+     */
+    title?: string;
+    /**
+     * Optional description displayed below the title.
+     */
+    description?: string;
+    /**
+     * Layout direction for the group's children.
+     * @default 'column'
+     */
+    direction?: 'column' | 'row';
+} & BoxProps;
+/**
+ * FormGroup is a layout container that organises form fields into labelled,
+ * optionally nested sections. Each nested `FormGroup` increments an internal
+ * `level` counter exposed via `useFormGroup`, which drives a `data-level`
+ * attribute and top-margin spacing so deeper groups are visually indented.
+ *
+ * @example
+ * ```tsx
+ * <FormGroup title="Personal details">
+ *   <FormFieldInput name="firstName" label="First name" />
+ *   <FormFieldInput name="lastName" label="Last name" />
+ *
+ *   <FormGroup title="Address" direction="row">
+ *     <FormFieldInput name="city" label="City" />
+ *     <FormFieldInput name="zip" label="ZIP" />
+ *   </FormGroup>
+ * </FormGroup>
+ * ```
+ *
+ * @example
+ * // Show a group-level validation error (e.g. for an array field)
+ * ```tsx
+ * <FormGroup name="items" title="Items">
+ *   {fields.map((field, i) => (
+ *     <FormFieldInput key={field.id} name={`items[${i}].value`} label="Value" />
+ *   ))}
+ * </FormGroup>
+ * ```
+ */
+declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Form is the root component for all form compositions. It wraps
+ * `react-hook-form`'s `FormProvider` and an HTML `<form>` element,
+ * forwarding submission handling.
+ *
+ * Use the compound sub-components for structure:
+ * - `Form.Group` – groups related fields with optional title/description
+ * - `Form.Actions` – footer bar for Submit / Cancel / Reset buttons
+ *
+ * @example
+ * ```tsx
+ * const methods = useForm<FormValues>();
+ *
+ * <Form {...methods} onSubmit={handleSubmit}>
+ *   <Form.Group title="Personal details">
+ *     <FormFieldInput name="firstName" label="First name" />
+ *   </Form.Group>
+ *   <Form.Actions>
+ *     <Button variant="secondary" onClick={onCancel}>Cancel</Button>
+ *     <Button type="submit">Save</Button>
+ *   </Form.Actions>
+ * </Form>
+ * ```
+ */
+declare const Form: (<TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
     onSubmit?: (data: TTransformedValues) => Promise<void> | void;
     sx?: BoxProps["sx"];
-} & FormProviderProps<TFieldValues, TContext, TTransformedValues>) => react_jsx_runtime.JSX.Element;
+} & FormProviderProps<TFieldValues, TContext, TTransformedValues>) => react_jsx_runtime.JSX.Element) & {
+    Group: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+    Actions: ({ align, children, sticky, sx, ...flexProps }: FormActionsProps) => react_jsx_runtime.JSX.Element;
+};
 
 declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
     name: FieldName<TFieldValues>;
@@ -112,66 +242,4 @@ declare const FormFieldSwitch: <TFieldValues extends FieldValues = FieldValues,
 type FormFieldTextareaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<TextareaProps, 'name'>;
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldTextareaProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
-declare const useFormGroup: () => {
-    level: number | undefined;
-    /**
-     * @deprecated `levelsLength` has been removed from `FormGroup` internals.
-     * This field always returns `undefined`. Use `level` to determine nesting depth.
-     */
-    levelsLength: number | undefined;
-};
-/**
- * Props for the FormGroup component.
- */
-type FormGroupProps = {
-    /**
-     * The field name used to display a validation error message below the group.
-     * Useful when the group maps to an array or object field in the form schema.
-     */
-    name?: string;
-    /**
-     * Optional heading displayed above the group's children.
-     */
-    title?: string;
-    /**
-     * Optional description displayed below the title.
-     */
-    description?: string;
-    /**
-     * Layout direction for the group's children.
-     * @default 'column'
-     */
-    direction?: 'column' | 'row';
-} & BoxProps;
-/**
- * FormGroup is a layout container that organises form fields into labelled,
- * optionally nested sections. Each nested `FormGroup` increments an internal
- * `level` counter exposed via `useFormGroup`, which drives a `data-level`
- * attribute and top-margin spacing so deeper groups are visually indented.
- *
- * @example
- * ```tsx
- * <FormGroup title="Personal details">
- *   <FormFieldInput name="firstName" label="First name" />
- *   <FormFieldInput name="lastName" label="Last name" />
- *
- *   <FormGroup title="Address" direction="row">
- *     <FormFieldInput name="city" label="City" />
- *     <FormFieldInput name="zip" label="ZIP" />
- *   </FormGroup>
- * </FormGroup>
- * ```
- *
- * @example
- * // Show a group-level validation error (e.g. for an array field)
- * ```tsx
- * <FormGroup name="items" title="Items">
- *   {fields.map((field, i) => (
- *     <FormFieldInput key={field.id} name={`items[${i}].value`} label="Value" />
- *   ))}
- * </FormGroup>
- * ```
- */
-declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
-
-export { type DateRangePreset, Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };
+export { type DateRangePreset, Form, FormActions, type FormActionsProps, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.42.0",
+  "version": "0.43.1",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -52,13 +52,13 @@
     "react-error-boundary": "^6.1.0",
     "tsup": "^8.5.1",
     "yup": "^1.7.1",
+    "@ttoss/config": "^1.36.0",
     "@ttoss/components": "^2.13.2",
     "@ttoss/i18n-cli": "^0.7.39",
-    "@ttoss/react-i18n": "^2.1.0",
     "@ttoss/react-icons": "^0.6.0",
     "@ttoss/test-utils": "^4.1.0",
-    "@ttoss/ui": "^6.8.0",
-    "@ttoss/config": "^1.36.0"
+    "@ttoss/react-i18n": "^2.1.0",
+    "@ttoss/ui": "^6.8.0"
   },
   "publishConfig": {
     "access": "public",