@ttoss/forms 0.43.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-4YLT3VPV.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-4YLT3VPV.js → chunk-3M2OR5NH.js}

@@ -1,6 +1,6 @@
 /** 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 as Box2 } from "@ttoss/ui";

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, 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-4YLT3VPV.js";
-import { COMMON_PHONE_COUNTRY_CODES, FormErrorMessage, FormField, FormFieldPatternFormat, FormFieldPhone, MANUAL_PHONE_COUNTRY_CODE } from "./chunk-ZORKZWD7.js";
+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

@@ -4,8 +4,8 @@ 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.43.0",
+  "version": "0.43.1",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -40,9 +40,9 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
+    "@ttoss/components": "^2.13.2",
     "@ttoss/react-i18n": "^2.1.0",
-    "@ttoss/ui": "^6.8.0",
-    "@ttoss/components": "^2.13.2"
+    "@ttoss/ui": "^6.8.0"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -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",