@codebit-programando-solucoes/codebit-web-antd 1.1.35 → 1.1.39

package/dist/components/PhoneInput.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'react';
+
+/** Props for the PhoneInput component */
+export interface PhoneInputProps {
+    /**
+     * Full phone number as raw digits including the dial code prefix.
+     *
+     * @example "5516991234567" // Brazilian number
+     * @example "15551234567"   // US number
+     */
+    value?: string;
+
+    /** Called with raw digits (dial code + local) whenever the value changes */
+    onChange?: (value: string) => void;
+
+    /** Whether the input is disabled */
+    disabled?: boolean;
+
+    /** Size variant, forwarded to the underlying Ant Design components */
+    size?: 'large' | 'middle' | 'small';
+
+    /** Placeholder text shown inside the phone number input */
+    placeholder?: string;
+}
+
+/**
+ * International phone input with a country selector.
+ *
+ * Integrates with antd Form: `value` and `onChange` deal in raw digits that include the
+ * dial code prefix — e.g. `"5516991234567"` for a Brazilian number or `"15551234567"` for
+ * a US number. The visible input applies a per-country mask for readability; `onChange`
+ * always fires with clean digits.
+ */
+export function PhoneInput(props: PhoneInputProps): JSX.Element;
+
+export namespace PhoneInput {
+    /**
+     * Formats a raw international phone number (digits only, with dial code prefix) into a
+     * human-readable string that includes the country flag, dial code, and local mask.
+     *
+     * Returns an empty string when `fullDigits` is falsy.
+     *
+     * @example
+     * PhoneInput.format("5516991234567") // "🇧🇷 +55 (16) 99123-4567"
+     * PhoneInput.format("15551234567")   // "🇺🇸 +1 (555) 123-4567"
+     * PhoneInput.format("351912345678")  // "🇵🇹 +351 (91) 234-567"
+     */
+    function format(fullDigits?: string): string;
+}

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './CssTokenBridge';
 export * from './TableContainer';
 export * from './FilterContainer';
 export * from './AudioPlayer';
+export * from './PhoneInput';

package/dist/index.cjs

@@ -316,113 +316,10 @@ var __webpack_exports__ = {};
         CodebitConfigProvider: ()=>CodebitConfigProvider,
         ElectronicBrainOutlinedIcon: ()=>ElectronicBrainOutlinedIcon,
         OllamaOutlinedIcon: ()=>OllamaOutlinedIcon,
+        PhoneInput: ()=>PhoneInput,
         ThemeToggle: ()=>ThemeToggle
     });
-    var jsx_runtime = __webpack_require__("../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-runtime.js");
-    const icons_namespaceObject = require("@ant-design/icons");
-    var icons_default = /*#__PURE__*/ __webpack_require__.n(icons_namespaceObject);
-    const external_antd_namespaceObject = require("antd");
-    const external_prop_types_namespaceObject = require("prop-types");
-    var external_prop_types_default = /*#__PURE__*/ __webpack_require__.n(external_prop_types_namespaceObject);
-    var external_react_ = __webpack_require__("react");
-    const external_react_router_namespaceObject = require("react-router");
-    const react_namespaceObject = require("@sentry/react");
-    const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
-    const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
-    const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, doLogout, checkLogin, onMenuClick }) {
-        const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
-        const [user, setUser] = (0, external_react_.useState)(null);
-        const logout = async ()=>{
-            await doLogout();
-            setIsLogged(false);
-            setUser(null);
-            react_namespaceObject.setUser(null);
-        };
-        (0, external_react_.useEffect)(()=>{
-            if (null === isLogged) checkLogin().then((loggedUser)=>{
-                if (loggedUser) {
-                    logger.trace('User data.', loggedUser);
-                    setIsLogged(true);
-                    setUser(loggedUser);
-                    react_namespaceObject.setUser({
-                        id: loggedUser.id,
-                        email: loggedUser.email,
-                        name: loggedUser.name
-                    });
-                } else {
-                    logger.trace('User not logged in.');
-                    setIsLogged(false);
-                    setUser(null);
-                    react_namespaceObject.setUser(null);
-                }
-            }).catch((e)=>{
-                logger.error('Error fetching session state.', e);
-                setIsLogged(false);
-                setUser(null);
-            });
-        }, [
-            isLogged
-        ]);
-        const contextValue = (0, external_react_.useMemo)(()=>({
-                menuItems,
-                isLogged,
-                setIsLogged,
-                user,
-                logout,
-                version,
-                showVersion,
-                secondarySidebar,
-                secondarySidebarWidth,
-                bottomMenuItems,
-                onMenuClick
-            }), [
-            menuItems,
-            isLogged,
-            user,
-            version,
-            showVersion,
-            secondarySidebar,
-            secondarySidebarWidth,
-            bottomMenuItems,
-            onMenuClick
-        ]);
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitConfigContext.Provider, {
-            value: contextValue,
-            children: children
-        });
-    }
-    CodebitConfigProvider.propTypes = {
-        children: external_prop_types_default().node.isRequired,
-        menuItems: external_prop_types_default().func.isRequired,
-        version: external_prop_types_default().string,
-        showVersion: external_prop_types_default().func,
-        secondarySidebar: external_prop_types_default().func,
-        secondarySidebarWidth: external_prop_types_default().number,
-        bottomMenuItems: external_prop_types_default().func,
-        doLogout: external_prop_types_default().func.isRequired,
-        checkLogin: external_prop_types_default().func.isRequired,
-        onMenuClick: external_prop_types_default().func
-    };
-    const ThemeToggle = ()=>{
-        const config = (0, external_react_.useContext)(CodebitThemeContext);
-        if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
-        (0, external_react_.useEffect)(()=>{
-            document.documentElement.style.colorScheme = config.isDarkMode ? 'dark' : 'light';
-        }, [
-            config.isDarkMode
-        ]);
-        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Switch, {
-            theme: config.isDarkMode ? 'dark' : 'light',
-            checked: config.isDarkMode,
-            onChange: (value)=>config.setIsDarkMode(value),
-            checkedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MoonOutlined, {}),
-            unCheckedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SunOutlined, {})
-        });
-    };
-    const external_react_i18next_namespaceObject = require("react-i18next");
-    const external_i18next_namespaceObject = require("i18next");
-    const pt = {
+    const locales_pt = {
         codebitWebAntd: {
             LoggedMainContainer: {
                 theme: 'Tema',
@@ -525,6 +422,35 @@ var __webpack_exports__ = {};
                 muteAudio: 'Ativar som',
                 unmuteAudio: 'Desativar som'
             },
+            PhoneInput: {
+                countries: {
+                    BR: 'Brasil',
+                    US: 'EUA',
+                    CA: 'Canadá',
+                    MX: 'México',
+                    AR: 'Argentina',
+                    CL: 'Chile',
+                    CO: 'Colômbia',
+                    PE: 'Peru',
+                    VE: 'Venezuela',
+                    UY: 'Uruguai',
+                    PY: 'Paraguai',
+                    BO: 'Bolívia',
+                    PT: 'Portugal',
+                    ES: 'Espanha',
+                    IT: 'Itália',
+                    FR: 'França',
+                    DE: 'Alemanha',
+                    GB: 'Reino Unido',
+                    AO: 'Angola',
+                    MZ: 'Moçambique',
+                    ZA: 'África do Sul',
+                    CN: 'China',
+                    JP: 'Japão',
+                    IN: 'Índia',
+                    AU: 'Austrália'
+                }
+            },
             Common: {
                 ok: 'Ok',
                 close: 'Fechar',
@@ -534,7 +460,7 @@ var __webpack_exports__ = {};
             }
         }
     };
-    const en = {
+    const locales_en = {
         codebitWebAntd: {
             LoggedMainContainer: {
                 theme: 'Theme',
@@ -637,6 +563,35 @@ var __webpack_exports__ = {};
                 muteAudio: 'Mute audio',
                 unmuteAudio: 'Unmute audio'
             },
+            PhoneInput: {
+                countries: {
+                    BR: 'Brazil',
+                    US: 'USA',
+                    CA: 'Canada',
+                    MX: 'Mexico',
+                    AR: 'Argentina',
+                    CL: 'Chile',
+                    CO: 'Colombia',
+                    PE: 'Peru',
+                    VE: 'Venezuela',
+                    UY: 'Uruguay',
+                    PY: 'Paraguay',
+                    BO: 'Bolivia',
+                    PT: 'Portugal',
+                    ES: 'Spain',
+                    IT: 'Italy',
+                    FR: 'France',
+                    DE: 'Germany',
+                    GB: 'United Kingdom',
+                    AO: 'Angola',
+                    MZ: 'Mozambique',
+                    ZA: 'South Africa',
+                    CN: 'China',
+                    JP: 'Japan',
+                    IN: 'India',
+                    AU: 'Australia'
+                }
+            },
             Common: {
                 ok: 'Ok',
                 close: 'Close',
@@ -646,11 +601,115 @@ var __webpack_exports__ = {};
             }
         }
     };
+    var jsx_runtime = __webpack_require__("../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-runtime.js");
+    const icons_namespaceObject = require("@ant-design/icons");
+    var icons_default = /*#__PURE__*/ __webpack_require__.n(icons_namespaceObject);
+    const external_antd_namespaceObject = require("antd");
+    const external_prop_types_namespaceObject = require("prop-types");
+    var external_prop_types_default = /*#__PURE__*/ __webpack_require__.n(external_prop_types_namespaceObject);
+    var external_react_ = __webpack_require__("react");
+    const external_react_router_namespaceObject = require("react-router");
+    const react_namespaceObject = require("@sentry/react");
+    const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
+    const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
+    const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
+    function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, doLogout, checkLogin, onMenuClick }) {
+        const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
+        const [user, setUser] = (0, external_react_.useState)(null);
+        const logout = async ()=>{
+            await doLogout();
+            setIsLogged(false);
+            setUser(null);
+            react_namespaceObject.setUser(null);
+        };
+        (0, external_react_.useEffect)(()=>{
+            if (null === isLogged) checkLogin().then((loggedUser)=>{
+                if (loggedUser) {
+                    logger.trace('User data.', loggedUser);
+                    setIsLogged(true);
+                    setUser(loggedUser);
+                    react_namespaceObject.setUser({
+                        id: loggedUser.id,
+                        email: loggedUser.email,
+                        name: loggedUser.name
+                    });
+                } else {
+                    logger.trace('User not logged in.');
+                    setIsLogged(false);
+                    setUser(null);
+                    react_namespaceObject.setUser(null);
+                }
+            }).catch((e)=>{
+                logger.error('Error fetching session state.', e);
+                setIsLogged(false);
+                setUser(null);
+            });
+        }, [
+            isLogged
+        ]);
+        const contextValue = (0, external_react_.useMemo)(()=>({
+                menuItems,
+                isLogged,
+                setIsLogged,
+                user,
+                logout,
+                version,
+                showVersion,
+                secondarySidebar,
+                secondarySidebarWidth,
+                bottomMenuItems,
+                onMenuClick
+            }), [
+            menuItems,
+            isLogged,
+            user,
+            version,
+            showVersion,
+            secondarySidebar,
+            secondarySidebarWidth,
+            bottomMenuItems,
+            onMenuClick
+        ]);
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitConfigContext.Provider, {
+            value: contextValue,
+            children: children
+        });
+    }
+    CodebitConfigProvider.propTypes = {
+        children: external_prop_types_default().node.isRequired,
+        menuItems: external_prop_types_default().func.isRequired,
+        version: external_prop_types_default().string,
+        showVersion: external_prop_types_default().func,
+        secondarySidebar: external_prop_types_default().func,
+        secondarySidebarWidth: external_prop_types_default().number,
+        bottomMenuItems: external_prop_types_default().func,
+        doLogout: external_prop_types_default().func.isRequired,
+        checkLogin: external_prop_types_default().func.isRequired,
+        onMenuClick: external_prop_types_default().func
+    };
+    const ThemeToggle = ()=>{
+        const config = (0, external_react_.useContext)(CodebitThemeContext);
+        if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
+        (0, external_react_.useEffect)(()=>{
+            document.documentElement.style.colorScheme = config.isDarkMode ? 'dark' : 'light';
+        }, [
+            config.isDarkMode
+        ]);
+        return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Switch, {
+            theme: config.isDarkMode ? 'dark' : 'light',
+            checked: config.isDarkMode,
+            onChange: (value)=>config.setIsDarkMode(value),
+            checkedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MoonOutlined, {}),
+            unCheckedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SunOutlined, {})
+        });
+    };
+    const external_react_i18next_namespaceObject = require("react-i18next");
+    const external_i18next_namespaceObject = require("i18next");
     const i18nLib = external_i18next_namespaceObject.createInstance();
     i18nLib.use(external_react_i18next_namespaceObject.initReactI18next).init({
         resources: {
-            pt: pt,
-            en: en
+            pt: locales_pt,
+            en: locales_en
         },
         lng: 'pt',
         fallbackLng: 'pt',
@@ -1114,10 +1173,9 @@ var __webpack_exports__ = {};
                                 })
                             ]
                         }),
-                        /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Space, {
+                        /*#__PURE__*/ (0, jsx_runtime.jsx)("div", {
                             className: AudioPlayer_module.durationTimeContainer,
                             children: /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Typography.Text, {
-                                strong: true,
                                 children: `${formatTime(currentTime)} / ${formatTime(duration)}`
                             })
                         })
@@ -1148,6 +1206,322 @@ var __webpack_exports__ = {};
     AudioPlayer.propTypes = {
         audioUrl: external_prop_types_default().string.isRequired
     };
+    const PhoneInput_module = {
+        container: "container-IJ_oCC",
+        countrySelect: "countrySelect-hsVqWh",
+        phoneInput: "phoneInput-Pz8eaz"
+    };
+    const COUNTRIES = [
+        {
+            code: 'BR',
+            dialCode: '55',
+            flag: '🇧🇷',
+            maxLocalDigits: 11
+        },
+        {
+            code: 'US',
+            dialCode: '1',
+            flag: '🇺🇸',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'CA',
+            dialCode: '1',
+            flag: '🇨🇦',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'MX',
+            dialCode: '52',
+            flag: '🇲🇽',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'AR',
+            dialCode: '54',
+            flag: '🇦🇷',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'CL',
+            dialCode: '56',
+            flag: '🇨🇱',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'CO',
+            dialCode: '57',
+            flag: '🇨🇴',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'PE',
+            dialCode: '51',
+            flag: '🇵🇪',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'VE',
+            dialCode: '58',
+            flag: '🇻🇪',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'UY',
+            dialCode: '598',
+            flag: '🇺🇾',
+            maxLocalDigits: 8
+        },
+        {
+            code: 'PY',
+            dialCode: '595',
+            flag: '🇵🇾',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'BO',
+            dialCode: '591',
+            flag: '🇧🇴',
+            maxLocalDigits: 8
+        },
+        {
+            code: 'PT',
+            dialCode: '351',
+            flag: '🇵🇹',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'ES',
+            dialCode: '34',
+            flag: '🇪🇸',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'IT',
+            dialCode: '39',
+            flag: '🇮🇹',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'FR',
+            dialCode: '33',
+            flag: '🇫🇷',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'DE',
+            dialCode: '49',
+            flag: '🇩🇪',
+            maxLocalDigits: 11
+        },
+        {
+            code: 'GB',
+            dialCode: '44',
+            flag: '🇬🇧',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'AO',
+            dialCode: '244',
+            flag: '🇦🇴',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'MZ',
+            dialCode: '258',
+            flag: '🇲🇿',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'ZA',
+            dialCode: '27',
+            flag: '🇿🇦',
+            maxLocalDigits: 9
+        },
+        {
+            code: 'CN',
+            dialCode: '86',
+            flag: '🇨🇳',
+            maxLocalDigits: 11
+        },
+        {
+            code: 'JP',
+            dialCode: '81',
+            flag: '🇯🇵',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'IN',
+            dialCode: '91',
+            flag: '🇮🇳',
+            maxLocalDigits: 10
+        },
+        {
+            code: 'AU',
+            dialCode: '61',
+            flag: '🇦🇺',
+            maxLocalDigits: 9
+        }
+    ];
+    function applyBrMask(digits) {
+        if (digits.length <= 2) return `(${digits}`;
+        if (digits.length <= 7) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+        if (digits.length <= 10) return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
+        return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
+    }
+    function applyUsMask(digits) {
+        if (digits.length <= 3) return `(${digits}`;
+        if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
+        return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+    }
+    function applyArMask(digits) {
+        if (digits.length <= 2) return `(${digits}`;
+        if (digits.length <= 6) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
+        return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
+    }
+    function applyGenericMask(digits, areaLen, totalLen) {
+        if (digits.length <= areaLen) return `(${digits}`;
+        const area = digits.slice(0, areaLen);
+        const rest = digits.slice(areaLen, totalLen);
+        const mid = Math.floor(rest.length / 2 + rest.length % 2);
+        if (rest.length <= mid) return `(${area}) ${rest}`;
+        return `(${area}) ${rest.slice(0, mid)}-${rest.slice(mid)}`;
+    }
+    function applyMask(digits, countryCode) {
+        switch(countryCode){
+            case 'BR':
+                return applyBrMask(digits);
+            case 'US':
+            case 'CA':
+                return applyUsMask(digits);
+            case 'MX':
+            case 'CO':
+            case 'VE':
+                return applyGenericMask(digits, 2, 10);
+            case 'AR':
+                return applyArMask(digits);
+            case 'CL':
+            case 'PE':
+            case 'PT':
+            case 'ES':
+            case 'AU':
+            case 'ZA':
+            case 'AO':
+            case 'MZ':
+                return applyGenericMask(digits, 2, 9);
+            case 'UY':
+            case 'BO':
+                return applyGenericMask(digits, 1, 8);
+            case 'PY':
+                return applyGenericMask(digits, 3, 9);
+            case 'FR':
+                return applyGenericMask(digits, 2, 9);
+            case 'IT':
+                return applyGenericMask(digits, 3, 10);
+            case 'DE':
+                return applyGenericMask(digits, 3, 11);
+            case 'GB':
+                return applyGenericMask(digits, 4, 10);
+            case 'CN':
+                return applyGenericMask(digits, 3, 11);
+            case 'JP':
+                return applyGenericMask(digits, 3, 10);
+            case 'IN':
+                return applyGenericMask(digits, 5, 10);
+            default:
+                return digits;
+        }
+    }
+    function detectCountry(fullDigits) {
+        if (!fullDigits) return COUNTRIES[0];
+        const sorted = [
+            ...COUNTRIES
+        ].sort((a, b)=>b.dialCode.length - a.dialCode.length);
+        for (const c of sorted)if (fullDigits.startsWith(c.dialCode)) return c;
+        return COUNTRIES[0];
+    }
+    const PhoneInput = ({ value, onChange, disabled, size, placeholder })=>{
+        const { t } = useCodebitWebAntdTranslation();
+        const countrySearchLabel = (c)=>{
+            const name = t(`PhoneInput.countries.${c.code}`);
+            return `${c.flag} ${name} +${c.dialCode}`;
+        };
+        const [selectedCountry, setSelectedCountry] = (0, external_react_.useState)(()=>detectCountry(value));
+        const [displayValue, setDisplayValue] = (0, external_react_.useState)(()=>{
+            if (!value) return '';
+            const country = detectCountry(value);
+            const localDigits = value.slice(country.dialCode.length);
+            return applyMask(localDigits, country.code);
+        });
+        (0, external_react_.useEffect)(()=>{
+            if (!value) return void setDisplayValue('');
+            const country = detectCountry(value);
+            setSelectedCountry(country);
+            const localDigits = value.slice(country.dialCode.length);
+            setDisplayValue(applyMask(localDigits, country.code));
+        }, [
+            value
+        ]);
+        const handleCountryChange = (countryCode)=>{
+            const country = COUNTRIES.find((c)=>c.code === countryCode) ?? COUNTRIES[0];
+            setSelectedCountry(country);
+            setDisplayValue('');
+            onChange?.('');
+        };
+        const handleInputChange = (e)=>{
+            const rawDigits = e.target.value.replaceAll(/\D/g, '').slice(0, selectedCountry.maxLocalDigits);
+            setDisplayValue(applyMask(rawDigits, selectedCountry.code));
+            onChange?.(selectedCountry.dialCode + rawDigits);
+        };
+        return /*#__PURE__*/ (0, jsx_runtime.jsxs)(external_antd_namespaceObject.Input.Group, {
+            compact: true,
+            className: PhoneInput_module.container,
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Select, {
+                    value: selectedCountry.code,
+                    onChange: handleCountryChange,
+                    disabled: disabled,
+                    size: size,
+                    className: PhoneInput_module.countrySelect,
+                    popupMatchSelectWidth: false,
+                    showSearch: true,
+                    filterOption: (input, option)=>option?.searchLabel?.toLowerCase().includes(input.toLowerCase()) ?? false,
+                    options: COUNTRIES.map((c)=>({
+                            value: c.code,
+                            label: `${c.flag} +${c.dialCode}`,
+                            searchLabel: countrySearchLabel(c)
+                        })),
+                    optionRender: (option)=>option.data.searchLabel
+                }),
+                /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Input, {
+                    value: displayValue,
+                    onChange: handleInputChange,
+                    disabled: disabled,
+                    size: size,
+                    placeholder: placeholder,
+                    className: PhoneInput_module.phoneInput
+                })
+            ]
+        });
+    };
+    PhoneInput.propTypes = {
+        value: external_prop_types_default().string,
+        onChange: external_prop_types_default().func,
+        disabled: external_prop_types_default().bool,
+        size: external_prop_types_default().oneOf([
+            'large',
+            'middle',
+            'small'
+        ]),
+        placeholder: external_prop_types_default().string
+    };
+    PhoneInput.format = (fullDigits)=>{
+        if (!fullDigits) return '';
+        const country = detectCountry(fullDigits);
+        const localDigits = fullDigits.slice(country.dialCode.length);
+        const masked = applyMask(localDigits, country.code);
+        return `${country.flag} +${country.dialCode} ${masked}`;
+    };
     const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
     const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
         const hasLoaded = (0, external_react_.useRef)(false);
@@ -2320,6 +2694,7 @@ exports.LoggedMainContainer = __webpack_exports__.LoggedMainContainer;
 exports.Login = __webpack_exports__.Login;
 exports.LoginContainer = __webpack_exports__.LoginContainer;
 exports.OllamaOutlinedIcon = __webpack_exports__.OllamaOutlinedIcon;
+exports.PhoneInput = __webpack_exports__.PhoneInput;
 exports.TableContainer = __webpack_exports__.TableContainer;
 exports.ThemeToggle = __webpack_exports__.ThemeToggle;
 exports.useErrorMessage = __webpack_exports__.useErrorMessage;
@@ -2346,6 +2721,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
     "Login",
     "LoginContainer",
     "OllamaOutlinedIcon",
+    "PhoneInput",
     "TableContainer",
     "ThemeToggle",
     "useErrorMessage",

package/dist/index.css

@@ -74,7 +74,6 @@ html.dark-theme {
 }
 
 .audioPlayer-a4xARM {
-  padding: var(--antd-padding);
   gap: var(--antd-padding-sm);
   border-radius: 8px;
   flex-direction: column;
@@ -82,8 +81,7 @@ html.dark-theme {
 }
 
 .audioPlayer-a4xARM .durationTimeContainer-kmkK6M {
-  justify-content: center;
-  width: 100%;
+  text-align: right;
 }
 
 .audioPlayer-a4xARM .slider-bdta4v {
@@ -91,6 +89,21 @@ html.dark-theme {
   min-width: 100px;
 }
 
+.container-IJ_oCC {
+  width: 100%;
+  display: flex !important;
+}
+
+.countrySelect-hsVqWh {
+  flex-shrink: 0;
+  width: 110px !important;
+}
+
+.phoneInput-Pz8eaz {
+  flex: 1;
+  min-width: 0;
+}
+
 .layout-mL5o6I {
   height: 100vh;
   position: fixed;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebit-programando-solucoes/codebit-web-antd",
-  "version": "1.1.35",
+  "version": "1.1.39",
   "main": "./dist/index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",