@arkyn/components 3.0.1-beta.121 → 3.0.1-beta.123

package/dist/components/phoneInput/index.d.ts

@@ -14,114 +14,9 @@ type PhoneInputProps = {
     notFoundCountryText?: string;
     name: string;
     searchCountryPlaceholder?: string;
-    defaultCountry?: (typeof countries)[number]["iso"];
+    defaultCountryIso?: (typeof countries)[number]["iso"];
     onChange?: (e: string) => void;
 };
-/**
- * PhoneInput component - used for international phone number input with country selection and automatic formatting
- *
- * @param props - PhoneInput component properties
- * @param props.name - Required field name for form handling and phone input identification
- * @param props.label - Optional label text to display above the phone input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the phone input
- * @param props.size - Size variant of the phone input. Default: "md"
- * @param props.variant - Visual variant of the phone input. Default: "solid"
- * @param props.defaultValue - Default phone number value for the input
- * @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
- * @param props.disabled - Whether the phone input is disabled. Default: false
- * @param props.readOnly - Whether the phone input is read-only. Default: false
- * @param props.isLoading - Whether the phone input is in loading state. Default: false
- * @param props.className - Additional CSS classes for styling
- * @param props.id - Optional unique identifier for the input
- * @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
- * @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
- * @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
- *
- * @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
- *
- * @example
- * ```tsx
- * // Basic phone input
- * <PhoneInput name="phone" />
- *
- * // Phone input with label and default country
- * <PhoneInput
- *   name="contactPhone"
- *   label="Contact Phone"
- *   defaultCountry="US"
- *   showAsterisk
- * />
- *
- * // Phone input with validation and custom text
- * <PhoneInput
- *   name="businessPhone"
- *   label="Business Phone"
- *   errorMessage="Please enter a valid phone number"
- *   searchCountryPlaceholder="Search country..."
- *   notFoundCountryText="Country not found"
- * />
- *
- * // Large phone input with default value
- * <PhoneInput
- *   name="emergencyContact"
- *   label="Emergency Contact"
- *   size="lg"
- *   variant="outline"
- *   defaultValue="+1 (555) 123-4567"
- *   defaultCountry="US"
- * />
- *
- * // Controlled phone input with callback
- * <PhoneInput
- *   name="userPhone"
- *   label="Your Phone Number"
- *   onChange={(formattedPhone) => {
- *     console.log('Phone number:', formattedPhone);
- *     setPhoneNumber(formattedPhone);
- *   }}
- *   defaultCountry="BR"
- *   showAsterisk
- * />
- *
- * // Read-only phone input for display
- * <PhoneInput
- *   name="displayPhone"
- *   label="Registered Phone"
- *   defaultValue="+55 11 99999-9999"
- *   readOnly
- *   variant="outline"
- * />
- *
- * // Disabled phone input
- * <PhoneInput
- *   name="lockedPhone"
- *   label="Phone (Locked)"
- *   defaultValue="+1 (555) 987-6543"
- *   disabled
- *   className="locked-field"
- * />
- *
- * // Phone input with loading state
- * <PhoneInput
- *   name="loadingPhone"
- *   label="Phone Number"
- *   isLoading
- *   defaultCountry="CA"
- * />
- * ```
- *
- * @remarks
- * This component provides:
- * - Automatic phone number formatting based on selected country
- * - Searchable country dropdown with flags and country codes
- * - Support for international phone number formats
- * - Integration with form validation systems
- * - Accessibility features with proper labeling
- *
- * The component uses country data from @arkyn/templates and automatically formats
- * phone numbers according to each country's specific format and mask patterns.
- */
 declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
 export { PhoneInput };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/phoneInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA0B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AAEH,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CA0LzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/phoneInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA6B7C,KAAK,eAAe,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iBAAiB,CAAC,EAAE,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAmKzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/phoneInput/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { countries } from "@arkyn/templates";
 import { useId, useRef, useState } from "react";
+import { findCountryMask, formatToPhone, removeNonNumeric, } from "@arkyn/shared";
 import { useForm } from "../../hooks/useForm";
-import { getDefaultFormatPhoneNumber } from "../../utils/phoneInputUtilities";
 import { FieldError } from "../fieldError";
 import { FieldLabel } from "../fieldLabel";
 import { FieldWrapper } from "../fieldWrapper";
@@ -12,126 +12,18 @@ import { PhoneInputCountryOption } from "./phoneInputCountryOption";
 import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
 import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
 import { PhoneInputMask } from "./phoneInputMask";
-/**
- * PhoneInput component - used for international phone number input with country selection and automatic formatting
- *
- * @param props - PhoneInput component properties
- * @param props.name - Required field name for form handling and phone input identification
- * @param props.label - Optional label text to display above the phone input
- * @param props.showAsterisk - Whether to show asterisk on label for required fields
- * @param props.errorMessage - Error message to display below the phone input
- * @param props.size - Size variant of the phone input. Default: "md"
- * @param props.variant - Visual variant of the phone input. Default: "solid"
- * @param props.defaultValue - Default phone number value for the input
- * @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
- * @param props.disabled - Whether the phone input is disabled. Default: false
- * @param props.readOnly - Whether the phone input is read-only. Default: false
- * @param props.isLoading - Whether the phone input is in loading state. Default: false
- * @param props.className - Additional CSS classes for styling
- * @param props.id - Optional unique identifier for the input
- * @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
- * @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
- * @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
- *
- * @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
- *
- * @example
- * ```tsx
- * // Basic phone input
- * <PhoneInput name="phone" />
- *
- * // Phone input with label and default country
- * <PhoneInput
- *   name="contactPhone"
- *   label="Contact Phone"
- *   defaultCountry="US"
- *   showAsterisk
- * />
- *
- * // Phone input with validation and custom text
- * <PhoneInput
- *   name="businessPhone"
- *   label="Business Phone"
- *   errorMessage="Please enter a valid phone number"
- *   searchCountryPlaceholder="Search country..."
- *   notFoundCountryText="Country not found"
- * />
- *
- * // Large phone input with default value
- * <PhoneInput
- *   name="emergencyContact"
- *   label="Emergency Contact"
- *   size="lg"
- *   variant="outline"
- *   defaultValue="+1 (555) 123-4567"
- *   defaultCountry="US"
- * />
- *
- * // Controlled phone input with callback
- * <PhoneInput
- *   name="userPhone"
- *   label="Your Phone Number"
- *   onChange={(formattedPhone) => {
- *     console.log('Phone number:', formattedPhone);
- *     setPhoneNumber(formattedPhone);
- *   }}
- *   defaultCountry="BR"
- *   showAsterisk
- * />
- *
- * // Read-only phone input for display
- * <PhoneInput
- *   name="displayPhone"
- *   label="Registered Phone"
- *   defaultValue="+55 11 99999-9999"
- *   readOnly
- *   variant="outline"
- * />
- *
- * // Disabled phone input
- * <PhoneInput
- *   name="lockedPhone"
- *   label="Phone (Locked)"
- *   defaultValue="+1 (555) 987-6543"
- *   disabled
- *   className="locked-field"
- * />
- *
- * // Phone input with loading state
- * <PhoneInput
- *   name="loadingPhone"
- *   label="Phone Number"
- *   isLoading
- *   defaultCountry="CA"
- * />
- * ```
- *
- * @remarks
- * This component provides:
- * - Automatic phone number formatting based on selected country
- * - Searchable country dropdown with flags and country codes
- * - Support for international phone number formats
- * - Integration with form validation systems
- * - Accessibility features with proper labeling
- *
- * The component uses country data from @arkyn/templates and automatically formats
- * phone numbers according to each country's specific format and mask patterns.
- */
 function PhoneInput(props) {
-    const { defaultCountry, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, } = props;
-    const defaultData = getDefaultFormatPhoneNumber(defaultValue);
+    const { defaultCountryIso, label, className: wrapperClassName = "", disabled = false, errorMessage: baseErrorMessage, isLoading = false, readOnly = false, size = "md", defaultValue = "", variant = "solid", showAsterisk, name, onChange, searchCountryPlaceholder = "Pesquisar país", notFoundCountryText = "Nenhum país encontrado", id, } = props;
+    const brasilCountry = countries.find((country) => country.iso === "BR");
+    const defaultData = defaultValue ? formatToPhone(defaultValue) : "";
+    const defaultCountry = defaultValue
+        ? findCountryMask(defaultValue)[1]
+        : brasilCountry;
     const [isFocused, setIsFocused] = useState(false);
     const [search, setSearch] = useState("");
     const [showCountryOptions, setShowCountryOptions] = useState(false);
-    const [value, setValue] = useState(defaultData.formattedNumber || "");
-    const [currentCountry, setCurrentCountry] = useState(() => {
-        if (defaultData.country)
-            return defaultData.country;
-        const country = countries.find((country) => country.iso === defaultCountry);
-        if (country)
-            return country;
-        return countries[30];
-    });
+    const [value, setValue] = useState(defaultData);
+    const [currentCountry, setCurrentCountry] = useState(defaultCountry);
     const { fieldErrors } = useForm();
     const phoneInputRef = useRef(null);
     const phoneInputId = id || useId();
@@ -165,29 +57,9 @@ function PhoneInput(props) {
     function filterCountryFunction(country) {
         return country.name.toLowerCase().includes(search.toLowerCase());
     }
-    function removeNumberMasks(number) {
-        if (currentCountry.prefix) {
-            return number
-                .replace(currentCountry.prefix, "")
-                .replaceAll(" ", "")
-                .replaceAll("-", "")
-                .replaceAll("(", "")
-                .replaceAll(")", "")
-                .trim();
-        }
-        return number
-            .replaceAll(" ", "")
-            .replaceAll("-", "")
-            .replaceAll("(", "")
-            .replaceAll(")", "")
-            .trim();
-    }
     function inputValue(props) {
         let returnValue = currentCountry.code;
-        if (currentCountry.prefix)
-            returnValue += `-${currentCountry.prefix}`;
-        returnValue += " ";
-        returnValue += removeNumberMasks(props || value);
+        returnValue += removeNonNumeric(props || value);
         return returnValue;
     }
     return (_jsxs(FieldWrapper, { className: wrapperClassName, children: [label && (_jsx(FieldLabel, { htmlFor: phoneInputId, showAsterisk: showAsterisk, children: label })), _jsxs(PhoneInputContainer, { disabled: isDisabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
@@ -195,7 +67,7 @@ function PhoneInput(props) {
                                 .map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
                                     setCurrentCountry(country);
                                     setShowCountryOptions(false);
-                                    setValue(country.mask);
+                                    setValue("");
                                 }, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
                                 .length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: isDisabled ? false : readOnly ? false : showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { id: phoneInputId, ref: inputPhoneMaskRef, readonly: readOnly, currentCountry: currentCountry, value: value, disabled: isDisabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size, onChange: (e) => {
                             setValue(e);

package/dist/components/phoneInput/phoneInputCountryOption/index.d.ts

@@ -3,9 +3,8 @@ type CountryType = {
     name: string;
     code: string;
     iso: string;
-    prefix: null | string;
     flag: string;
-    mask: string;
+    mask: string | string[];
 };
 type PhoneInputCountryOptionProps = {
     country: CountryType;

package/dist/components/phoneInput/phoneInputCountryOption/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountryOption/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,iBAAiB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACnD,CAAC;AAEF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,2CAanE;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputCountrySelector/index.d.ts

@@ -3,9 +3,8 @@ type CountryType = {
     name: string;
     code: string;
     iso: string;
-    prefix: null | string;
     flag: string;
-    mask: string;
+    mask: string | string[];
 };
 type PhoneInputCountrySelectorProps = {
     size: "md" | "lg";

package/dist/components/phoneInput/phoneInputCountrySelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputCountrySelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,8BAA8B,GAAG;IACpC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,yBAAyB,CAAC,KAAK,EAAE,8BAA8B,2CAcvE;AAED,OAAO,EAAE,yBAAyB,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputMask/index.d.ts

@@ -3,9 +3,8 @@ type CountryType = {
     name: string;
     code: string;
     iso: string;
-    prefix: null | string;
     flag: string;
-    mask: string;
+    mask: string | string[];
 };
 type PhoneInputMaskProps = {
     onFocus: () => void;

package/dist/components/phoneInput/phoneInputMask/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AASF,QAAA,MAAM,cAAc,kHAqEnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/phoneInput/phoneInputMask/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,aAAa,CAAC;AAErB,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,cAAc,EAAE,WAAW,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AASF,QAAA,MAAM,cAAc,kHA0EnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/phoneInput/phoneInputMask/index.js

@@ -9,9 +9,12 @@ const BaseInput = forwardRef((props, ref) => {
 const PhoneInputMask = forwardRef((props, ref) => {
     const { onFocus, readonly, onBlur, size, onChange, value, currentCountry, disabled, id, } = props;
     const [isMounted, setIsMounted] = useState(false);
+    const mask = typeof currentCountry.mask === "string"
+        ? currentCountry.mask
+        : currentCountry.mask[0];
     useEffect(() => {
         if (isMounted)
-            onChange(currentCountry.mask);
+            onChange(mask);
         else
             setIsMounted(true);
     }, [currentCountry]);
@@ -29,6 +32,6 @@ const PhoneInputMask = forwardRef((props, ref) => {
     if (currentCountry.code === "+55") {
         return (_jsx("input", { id: id, value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
     }
-    return (_jsx(InputMask, { id: id, value: value, readOnly: readonly, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: currentCountry.mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
+    return (_jsx(InputMask, { id: id, value: value, readOnly: readonly, onChange: (e) => onChange(e.target.value), className: className, component: BaseInput, onFocus: onFocus, onBlur: onBlur, disabled: disabled, mask: mask, showMask: true, replacement: { _: /\d/ }, ref: ref }));
 });
 export { PhoneInputMask };