@codebit-programando-solucoes/codebit-web-antd 1.1.38 → 1.1.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,49 @@
1
+ import { JSX } from 'react';
2
+
3
+ /** Props for the PhoneInput component */
4
+ export interface PhoneInputProps {
5
+ /**
6
+ * Full phone number as raw digits including the dial code prefix.
7
+ *
8
+ * @example "5516991234567" // Brazilian number
9
+ * @example "15551234567" // US number
10
+ */
11
+ value?: string;
12
+
13
+ /** Called with raw digits (dial code + local) whenever the value changes */
14
+ onChange?: (value: string) => void;
15
+
16
+ /** Whether the input is disabled */
17
+ disabled?: boolean;
18
+
19
+ /** Size variant, forwarded to the underlying Ant Design components */
20
+ size?: 'large' | 'middle' | 'small';
21
+
22
+ /** Placeholder text shown inside the phone number input */
23
+ placeholder?: string;
24
+ }
25
+
26
+ /**
27
+ * International phone input with a country selector.
28
+ *
29
+ * Integrates with antd Form: `value` and `onChange` deal in raw digits that include the
30
+ * dial code prefix — e.g. `"5516991234567"` for a Brazilian number or `"15551234567"` for
31
+ * a US number. The visible input applies a per-country mask for readability; `onChange`
32
+ * always fires with clean digits.
33
+ */
34
+ export function PhoneInput(props: PhoneInputProps): JSX.Element;
35
+
36
+ export namespace PhoneInput {
37
+ /**
38
+ * Formats a raw international phone number (digits only, with dial code prefix) into a
39
+ * human-readable string that includes the country flag, dial code, and local mask.
40
+ *
41
+ * Returns an empty string when `fullDigits` is falsy.
42
+ *
43
+ * @example
44
+ * PhoneInput.format("5516991234567") // "🇧🇷 +55 (16) 99123-4567"
45
+ * PhoneInput.format("15551234567") // "🇺🇸 +1 (555) 123-4567"
46
+ * PhoneInput.format("351912345678") // "🇵🇹 +351 (91) 234-567"
47
+ */
48
+ function format(fullDigits?: string): string;
49
+ }
@@ -6,3 +6,4 @@ export * from './CssTokenBridge';
6
6
  export * from './TableContainer';
7
7
  export * from './FilterContainer';
8
8
  export * from './AudioPlayer';
9
+ export * from './PhoneInput';
package/dist/index.cjs CHANGED
@@ -316,113 +316,10 @@ var __webpack_exports__ = {};
316
316
  CodebitConfigProvider: ()=>CodebitConfigProvider,
317
317
  ElectronicBrainOutlinedIcon: ()=>ElectronicBrainOutlinedIcon,
318
318
  OllamaOutlinedIcon: ()=>OllamaOutlinedIcon,
319
+ PhoneInput: ()=>PhoneInput,
319
320
  ThemeToggle: ()=>ThemeToggle
320
321
  });
321
- var jsx_runtime = __webpack_require__("../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-runtime.js");
322
- const icons_namespaceObject = require("@ant-design/icons");
323
- var icons_default = /*#__PURE__*/ __webpack_require__.n(icons_namespaceObject);
324
- const external_antd_namespaceObject = require("antd");
325
- const external_prop_types_namespaceObject = require("prop-types");
326
- var external_prop_types_default = /*#__PURE__*/ __webpack_require__.n(external_prop_types_namespaceObject);
327
- var external_react_ = __webpack_require__("react");
328
- const external_react_router_namespaceObject = require("react-router");
329
- const react_namespaceObject = require("@sentry/react");
330
- const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
331
- const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
332
- const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
333
- function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, doLogout, checkLogin, onMenuClick }) {
334
- const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
335
- const [user, setUser] = (0, external_react_.useState)(null);
336
- const logout = async ()=>{
337
- await doLogout();
338
- setIsLogged(false);
339
- setUser(null);
340
- react_namespaceObject.setUser(null);
341
- };
342
- (0, external_react_.useEffect)(()=>{
343
- if (null === isLogged) checkLogin().then((loggedUser)=>{
344
- if (loggedUser) {
345
- logger.trace('User data.', loggedUser);
346
- setIsLogged(true);
347
- setUser(loggedUser);
348
- react_namespaceObject.setUser({
349
- id: loggedUser.id,
350
- email: loggedUser.email,
351
- name: loggedUser.name
352
- });
353
- } else {
354
- logger.trace('User not logged in.');
355
- setIsLogged(false);
356
- setUser(null);
357
- react_namespaceObject.setUser(null);
358
- }
359
- }).catch((e)=>{
360
- logger.error('Error fetching session state.', e);
361
- setIsLogged(false);
362
- setUser(null);
363
- });
364
- }, [
365
- isLogged
366
- ]);
367
- const contextValue = (0, external_react_.useMemo)(()=>({
368
- menuItems,
369
- isLogged,
370
- setIsLogged,
371
- user,
372
- logout,
373
- version,
374
- showVersion,
375
- secondarySidebar,
376
- secondarySidebarWidth,
377
- bottomMenuItems,
378
- onMenuClick
379
- }), [
380
- menuItems,
381
- isLogged,
382
- user,
383
- version,
384
- showVersion,
385
- secondarySidebar,
386
- secondarySidebarWidth,
387
- bottomMenuItems,
388
- onMenuClick
389
- ]);
390
- return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitConfigContext.Provider, {
391
- value: contextValue,
392
- children: children
393
- });
394
- }
395
- CodebitConfigProvider.propTypes = {
396
- children: external_prop_types_default().node.isRequired,
397
- menuItems: external_prop_types_default().func.isRequired,
398
- version: external_prop_types_default().string,
399
- showVersion: external_prop_types_default().func,
400
- secondarySidebar: external_prop_types_default().func,
401
- secondarySidebarWidth: external_prop_types_default().number,
402
- bottomMenuItems: external_prop_types_default().func,
403
- doLogout: external_prop_types_default().func.isRequired,
404
- checkLogin: external_prop_types_default().func.isRequired,
405
- onMenuClick: external_prop_types_default().func
406
- };
407
- const ThemeToggle = ()=>{
408
- const config = (0, external_react_.useContext)(CodebitThemeContext);
409
- if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
410
- (0, external_react_.useEffect)(()=>{
411
- document.documentElement.style.colorScheme = config.isDarkMode ? 'dark' : 'light';
412
- }, [
413
- config.isDarkMode
414
- ]);
415
- return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Switch, {
416
- theme: config.isDarkMode ? 'dark' : 'light',
417
- checked: config.isDarkMode,
418
- onChange: (value)=>config.setIsDarkMode(value),
419
- checkedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MoonOutlined, {}),
420
- unCheckedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SunOutlined, {})
421
- });
422
- };
423
- const external_react_i18next_namespaceObject = require("react-i18next");
424
- const external_i18next_namespaceObject = require("i18next");
425
- const pt = {
322
+ const locales_pt = {
426
323
  codebitWebAntd: {
427
324
  LoggedMainContainer: {
428
325
  theme: 'Tema',
@@ -525,6 +422,35 @@ var __webpack_exports__ = {};
525
422
  muteAudio: 'Ativar som',
526
423
  unmuteAudio: 'Desativar som'
527
424
  },
425
+ PhoneInput: {
426
+ countries: {
427
+ BR: 'Brasil',
428
+ US: 'EUA',
429
+ CA: 'Canadá',
430
+ MX: 'México',
431
+ AR: 'Argentina',
432
+ CL: 'Chile',
433
+ CO: 'Colômbia',
434
+ PE: 'Peru',
435
+ VE: 'Venezuela',
436
+ UY: 'Uruguai',
437
+ PY: 'Paraguai',
438
+ BO: 'Bolívia',
439
+ PT: 'Portugal',
440
+ ES: 'Espanha',
441
+ IT: 'Itália',
442
+ FR: 'França',
443
+ DE: 'Alemanha',
444
+ GB: 'Reino Unido',
445
+ AO: 'Angola',
446
+ MZ: 'Moçambique',
447
+ ZA: 'África do Sul',
448
+ CN: 'China',
449
+ JP: 'Japão',
450
+ IN: 'Índia',
451
+ AU: 'Austrália'
452
+ }
453
+ },
528
454
  Common: {
529
455
  ok: 'Ok',
530
456
  close: 'Fechar',
@@ -534,7 +460,7 @@ var __webpack_exports__ = {};
534
460
  }
535
461
  }
536
462
  };
537
- const en = {
463
+ const locales_en = {
538
464
  codebitWebAntd: {
539
465
  LoggedMainContainer: {
540
466
  theme: 'Theme',
@@ -637,6 +563,35 @@ var __webpack_exports__ = {};
637
563
  muteAudio: 'Mute audio',
638
564
  unmuteAudio: 'Unmute audio'
639
565
  },
566
+ PhoneInput: {
567
+ countries: {
568
+ BR: 'Brazil',
569
+ US: 'USA',
570
+ CA: 'Canada',
571
+ MX: 'Mexico',
572
+ AR: 'Argentina',
573
+ CL: 'Chile',
574
+ CO: 'Colombia',
575
+ PE: 'Peru',
576
+ VE: 'Venezuela',
577
+ UY: 'Uruguay',
578
+ PY: 'Paraguay',
579
+ BO: 'Bolivia',
580
+ PT: 'Portugal',
581
+ ES: 'Spain',
582
+ IT: 'Italy',
583
+ FR: 'France',
584
+ DE: 'Germany',
585
+ GB: 'United Kingdom',
586
+ AO: 'Angola',
587
+ MZ: 'Mozambique',
588
+ ZA: 'South Africa',
589
+ CN: 'China',
590
+ JP: 'Japan',
591
+ IN: 'India',
592
+ AU: 'Australia'
593
+ }
594
+ },
640
595
  Common: {
641
596
  ok: 'Ok',
642
597
  close: 'Close',
@@ -646,11 +601,115 @@ var __webpack_exports__ = {};
646
601
  }
647
602
  }
648
603
  };
604
+ var jsx_runtime = __webpack_require__("../../node_modules/.pnpm/react@19.2.3/node_modules/react/jsx-runtime.js");
605
+ const icons_namespaceObject = require("@ant-design/icons");
606
+ var icons_default = /*#__PURE__*/ __webpack_require__.n(icons_namespaceObject);
607
+ const external_antd_namespaceObject = require("antd");
608
+ const external_prop_types_namespaceObject = require("prop-types");
609
+ var external_prop_types_default = /*#__PURE__*/ __webpack_require__.n(external_prop_types_namespaceObject);
610
+ var external_react_ = __webpack_require__("react");
611
+ const external_react_router_namespaceObject = require("react-router");
612
+ const react_namespaceObject = require("@sentry/react");
613
+ const codebit_web_namespaceObject = require("@codebit-programando-solucoes/codebit-web");
614
+ const logger = new codebit_web_namespaceObject.Logger('CodebitConfigContext');
615
+ const CodebitConfigContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
616
+ function CodebitConfigProvider({ children, menuItems, version = '1.0', showVersion = ()=>true, secondarySidebar, secondarySidebarWidth = 280, bottomMenuItems, doLogout, checkLogin, onMenuClick }) {
617
+ const [isLogged, setIsLogged] = (0, external_react_.useState)(null);
618
+ const [user, setUser] = (0, external_react_.useState)(null);
619
+ const logout = async ()=>{
620
+ await doLogout();
621
+ setIsLogged(false);
622
+ setUser(null);
623
+ react_namespaceObject.setUser(null);
624
+ };
625
+ (0, external_react_.useEffect)(()=>{
626
+ if (null === isLogged) checkLogin().then((loggedUser)=>{
627
+ if (loggedUser) {
628
+ logger.trace('User data.', loggedUser);
629
+ setIsLogged(true);
630
+ setUser(loggedUser);
631
+ react_namespaceObject.setUser({
632
+ id: loggedUser.id,
633
+ email: loggedUser.email,
634
+ name: loggedUser.name
635
+ });
636
+ } else {
637
+ logger.trace('User not logged in.');
638
+ setIsLogged(false);
639
+ setUser(null);
640
+ react_namespaceObject.setUser(null);
641
+ }
642
+ }).catch((e)=>{
643
+ logger.error('Error fetching session state.', e);
644
+ setIsLogged(false);
645
+ setUser(null);
646
+ });
647
+ }, [
648
+ isLogged
649
+ ]);
650
+ const contextValue = (0, external_react_.useMemo)(()=>({
651
+ menuItems,
652
+ isLogged,
653
+ setIsLogged,
654
+ user,
655
+ logout,
656
+ version,
657
+ showVersion,
658
+ secondarySidebar,
659
+ secondarySidebarWidth,
660
+ bottomMenuItems,
661
+ onMenuClick
662
+ }), [
663
+ menuItems,
664
+ isLogged,
665
+ user,
666
+ version,
667
+ showVersion,
668
+ secondarySidebar,
669
+ secondarySidebarWidth,
670
+ bottomMenuItems,
671
+ onMenuClick
672
+ ]);
673
+ return /*#__PURE__*/ (0, jsx_runtime.jsx)(CodebitConfigContext.Provider, {
674
+ value: contextValue,
675
+ children: children
676
+ });
677
+ }
678
+ CodebitConfigProvider.propTypes = {
679
+ children: external_prop_types_default().node.isRequired,
680
+ menuItems: external_prop_types_default().func.isRequired,
681
+ version: external_prop_types_default().string,
682
+ showVersion: external_prop_types_default().func,
683
+ secondarySidebar: external_prop_types_default().func,
684
+ secondarySidebarWidth: external_prop_types_default().number,
685
+ bottomMenuItems: external_prop_types_default().func,
686
+ doLogout: external_prop_types_default().func.isRequired,
687
+ checkLogin: external_prop_types_default().func.isRequired,
688
+ onMenuClick: external_prop_types_default().func
689
+ };
690
+ const ThemeToggle = ()=>{
691
+ const config = (0, external_react_.useContext)(CodebitThemeContext);
692
+ if (!config) throw new Error('ThemeToggle must be used within CodebitThemeContext');
693
+ (0, external_react_.useEffect)(()=>{
694
+ document.documentElement.style.colorScheme = config.isDarkMode ? 'dark' : 'light';
695
+ }, [
696
+ config.isDarkMode
697
+ ]);
698
+ return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Switch, {
699
+ theme: config.isDarkMode ? 'dark' : 'light',
700
+ checked: config.isDarkMode,
701
+ onChange: (value)=>config.setIsDarkMode(value),
702
+ checkedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.MoonOutlined, {}),
703
+ unCheckedChildren: /*#__PURE__*/ (0, jsx_runtime.jsx)(icons_namespaceObject.SunOutlined, {})
704
+ });
705
+ };
706
+ const external_react_i18next_namespaceObject = require("react-i18next");
707
+ const external_i18next_namespaceObject = require("i18next");
649
708
  const i18nLib = external_i18next_namespaceObject.createInstance();
650
709
  i18nLib.use(external_react_i18next_namespaceObject.initReactI18next).init({
651
710
  resources: {
652
- pt: pt,
653
- en: en
711
+ pt: locales_pt,
712
+ en: locales_en
654
713
  },
655
714
  lng: 'pt',
656
715
  fallbackLng: 'pt',
@@ -1147,6 +1206,313 @@ var __webpack_exports__ = {};
1147
1206
  AudioPlayer.propTypes = {
1148
1207
  audioUrl: external_prop_types_default().string.isRequired
1149
1208
  };
1209
+ const COUNTRIES = [
1210
+ {
1211
+ code: 'BR',
1212
+ dialCode: '55',
1213
+ flag: '🇧🇷',
1214
+ maxLocalDigits: 11
1215
+ },
1216
+ {
1217
+ code: 'US',
1218
+ dialCode: '1',
1219
+ flag: '🇺🇸',
1220
+ maxLocalDigits: 10
1221
+ },
1222
+ {
1223
+ code: 'CA',
1224
+ dialCode: '1',
1225
+ flag: '🇨🇦',
1226
+ maxLocalDigits: 10
1227
+ },
1228
+ {
1229
+ code: 'MX',
1230
+ dialCode: '52',
1231
+ flag: '🇲🇽',
1232
+ maxLocalDigits: 10
1233
+ },
1234
+ {
1235
+ code: 'AR',
1236
+ dialCode: '54',
1237
+ flag: '🇦🇷',
1238
+ maxLocalDigits: 10
1239
+ },
1240
+ {
1241
+ code: 'CL',
1242
+ dialCode: '56',
1243
+ flag: '🇨🇱',
1244
+ maxLocalDigits: 9
1245
+ },
1246
+ {
1247
+ code: 'CO',
1248
+ dialCode: '57',
1249
+ flag: '🇨🇴',
1250
+ maxLocalDigits: 10
1251
+ },
1252
+ {
1253
+ code: 'PE',
1254
+ dialCode: '51',
1255
+ flag: '🇵🇪',
1256
+ maxLocalDigits: 9
1257
+ },
1258
+ {
1259
+ code: 'VE',
1260
+ dialCode: '58',
1261
+ flag: '🇻🇪',
1262
+ maxLocalDigits: 10
1263
+ },
1264
+ {
1265
+ code: 'UY',
1266
+ dialCode: '598',
1267
+ flag: '🇺🇾',
1268
+ maxLocalDigits: 8
1269
+ },
1270
+ {
1271
+ code: 'PY',
1272
+ dialCode: '595',
1273
+ flag: '🇵🇾',
1274
+ maxLocalDigits: 9
1275
+ },
1276
+ {
1277
+ code: 'BO',
1278
+ dialCode: '591',
1279
+ flag: '🇧🇴',
1280
+ maxLocalDigits: 8
1281
+ },
1282
+ {
1283
+ code: 'PT',
1284
+ dialCode: '351',
1285
+ flag: '🇵🇹',
1286
+ maxLocalDigits: 9
1287
+ },
1288
+ {
1289
+ code: 'ES',
1290
+ dialCode: '34',
1291
+ flag: '🇪🇸',
1292
+ maxLocalDigits: 9
1293
+ },
1294
+ {
1295
+ code: 'IT',
1296
+ dialCode: '39',
1297
+ flag: '🇮🇹',
1298
+ maxLocalDigits: 10
1299
+ },
1300
+ {
1301
+ code: 'FR',
1302
+ dialCode: '33',
1303
+ flag: '🇫🇷',
1304
+ maxLocalDigits: 9
1305
+ },
1306
+ {
1307
+ code: 'DE',
1308
+ dialCode: '49',
1309
+ flag: '🇩🇪',
1310
+ maxLocalDigits: 11
1311
+ },
1312
+ {
1313
+ code: 'GB',
1314
+ dialCode: '44',
1315
+ flag: '🇬🇧',
1316
+ maxLocalDigits: 10
1317
+ },
1318
+ {
1319
+ code: 'AO',
1320
+ dialCode: '244',
1321
+ flag: '🇦🇴',
1322
+ maxLocalDigits: 9
1323
+ },
1324
+ {
1325
+ code: 'MZ',
1326
+ dialCode: '258',
1327
+ flag: '🇲🇿',
1328
+ maxLocalDigits: 9
1329
+ },
1330
+ {
1331
+ code: 'ZA',
1332
+ dialCode: '27',
1333
+ flag: '🇿🇦',
1334
+ maxLocalDigits: 9
1335
+ },
1336
+ {
1337
+ code: 'CN',
1338
+ dialCode: '86',
1339
+ flag: '🇨🇳',
1340
+ maxLocalDigits: 11
1341
+ },
1342
+ {
1343
+ code: 'JP',
1344
+ dialCode: '81',
1345
+ flag: '🇯🇵',
1346
+ maxLocalDigits: 10
1347
+ },
1348
+ {
1349
+ code: 'IN',
1350
+ dialCode: '91',
1351
+ flag: '🇮🇳',
1352
+ maxLocalDigits: 10
1353
+ },
1354
+ {
1355
+ code: 'AU',
1356
+ dialCode: '61',
1357
+ flag: '🇦🇺',
1358
+ maxLocalDigits: 9
1359
+ }
1360
+ ];
1361
+ function applyBrMask(digits) {
1362
+ if (digits.length <= 2) return `(${digits}`;
1363
+ if (digits.length <= 7) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
1364
+ if (digits.length <= 10) return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6)}`;
1365
+ return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7, 11)}`;
1366
+ }
1367
+ function applyUsMask(digits) {
1368
+ if (digits.length <= 3) return `(${digits}`;
1369
+ if (digits.length <= 6) return `(${digits.slice(0, 3)}) ${digits.slice(3)}`;
1370
+ return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
1371
+ }
1372
+ function applyArMask(digits) {
1373
+ if (digits.length <= 2) return `(${digits}`;
1374
+ if (digits.length <= 6) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`;
1375
+ return `(${digits.slice(0, 2)}) ${digits.slice(2, 6)}-${digits.slice(6, 10)}`;
1376
+ }
1377
+ function applyGenericMask(digits, areaLen, totalLen) {
1378
+ if (digits.length <= areaLen) return `(${digits}`;
1379
+ const area = digits.slice(0, areaLen);
1380
+ const rest = digits.slice(areaLen, totalLen);
1381
+ const mid = Math.floor(rest.length / 2 + rest.length % 2);
1382
+ if (rest.length <= mid) return `(${area}) ${rest}`;
1383
+ return `(${area}) ${rest.slice(0, mid)}-${rest.slice(mid)}`;
1384
+ }
1385
+ function applyMask(digits, countryCode) {
1386
+ switch(countryCode){
1387
+ case 'BR':
1388
+ return applyBrMask(digits);
1389
+ case 'US':
1390
+ case 'CA':
1391
+ return applyUsMask(digits);
1392
+ case 'MX':
1393
+ case 'CO':
1394
+ case 'VE':
1395
+ return applyGenericMask(digits, 2, 10);
1396
+ case 'AR':
1397
+ return applyArMask(digits);
1398
+ case 'CL':
1399
+ case 'PE':
1400
+ case 'PT':
1401
+ case 'ES':
1402
+ case 'AU':
1403
+ case 'ZA':
1404
+ case 'AO':
1405
+ case 'MZ':
1406
+ return applyGenericMask(digits, 2, 9);
1407
+ case 'UY':
1408
+ case 'BO':
1409
+ return applyGenericMask(digits, 1, 8);
1410
+ case 'PY':
1411
+ return applyGenericMask(digits, 3, 9);
1412
+ case 'FR':
1413
+ return applyGenericMask(digits, 2, 9);
1414
+ case 'IT':
1415
+ return applyGenericMask(digits, 3, 10);
1416
+ case 'DE':
1417
+ return applyGenericMask(digits, 3, 11);
1418
+ case 'GB':
1419
+ return applyGenericMask(digits, 4, 10);
1420
+ case 'CN':
1421
+ return applyGenericMask(digits, 3, 11);
1422
+ case 'JP':
1423
+ return applyGenericMask(digits, 3, 10);
1424
+ case 'IN':
1425
+ return applyGenericMask(digits, 5, 10);
1426
+ default:
1427
+ return digits;
1428
+ }
1429
+ }
1430
+ function detectCountry(fullDigits) {
1431
+ if (!fullDigits) return COUNTRIES[0];
1432
+ const sorted = [
1433
+ ...COUNTRIES
1434
+ ].sort((a, b)=>b.dialCode.length - a.dialCode.length);
1435
+ for (const c of sorted)if (fullDigits.startsWith(c.dialCode)) return c;
1436
+ return COUNTRIES[0];
1437
+ }
1438
+ const PhoneInput = ({ value, onChange, disabled, size, placeholder })=>{
1439
+ const { t } = useCodebitWebAntdTranslation();
1440
+ const countrySearchLabel = (c)=>{
1441
+ const name = t(`PhoneInput.countries.${c.code}`);
1442
+ return `${c.flag} ${name} +${c.dialCode}`;
1443
+ };
1444
+ const [selectedCountry, setSelectedCountry] = (0, external_react_.useState)(()=>detectCountry(value));
1445
+ const [displayValue, setDisplayValue] = (0, external_react_.useState)(()=>{
1446
+ if (!value) return '';
1447
+ const country = detectCountry(value);
1448
+ const localDigits = value.slice(country.dialCode.length);
1449
+ return applyMask(localDigits, country.code);
1450
+ });
1451
+ (0, external_react_.useEffect)(()=>{
1452
+ if (!value) return void setDisplayValue('');
1453
+ const country = detectCountry(value);
1454
+ setSelectedCountry(country);
1455
+ const localDigits = value.slice(country.dialCode.length);
1456
+ setDisplayValue(applyMask(localDigits, country.code));
1457
+ }, [
1458
+ value
1459
+ ]);
1460
+ const handleCountryChange = (countryCode)=>{
1461
+ const country = COUNTRIES.find((c)=>c.code === countryCode) ?? COUNTRIES[0];
1462
+ setSelectedCountry(country);
1463
+ setDisplayValue('');
1464
+ onChange?.('');
1465
+ };
1466
+ const handleInputChange = (e)=>{
1467
+ const rawDigits = e.target.value.replaceAll(/\D/g, '').slice(0, selectedCountry.maxLocalDigits);
1468
+ setDisplayValue(applyMask(rawDigits, selectedCountry.code));
1469
+ onChange?.(selectedCountry.dialCode + rawDigits);
1470
+ };
1471
+ const countrySelector = /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Select, {
1472
+ value: selectedCountry.code,
1473
+ onChange: handleCountryChange,
1474
+ disabled: disabled,
1475
+ size: size,
1476
+ style: {
1477
+ width: 110
1478
+ },
1479
+ popupMatchSelectWidth: false,
1480
+ showSearch: true,
1481
+ filterOption: (input, option)=>option?.searchLabel?.toLowerCase().includes(input.toLowerCase()) ?? false,
1482
+ options: COUNTRIES.map((c)=>({
1483
+ value: c.code,
1484
+ label: `${c.flag} +${c.dialCode}`,
1485
+ searchLabel: countrySearchLabel(c)
1486
+ })),
1487
+ optionRender: (option)=>option.data.searchLabel
1488
+ });
1489
+ return /*#__PURE__*/ (0, jsx_runtime.jsx)(external_antd_namespaceObject.Input, {
1490
+ addonBefore: countrySelector,
1491
+ value: displayValue,
1492
+ onChange: handleInputChange,
1493
+ disabled: disabled,
1494
+ size: size,
1495
+ placeholder: placeholder
1496
+ });
1497
+ };
1498
+ PhoneInput.propTypes = {
1499
+ value: external_prop_types_default().string,
1500
+ onChange: external_prop_types_default().func,
1501
+ disabled: external_prop_types_default().bool,
1502
+ size: external_prop_types_default().oneOf([
1503
+ 'large',
1504
+ 'middle',
1505
+ 'small'
1506
+ ]),
1507
+ placeholder: external_prop_types_default().string
1508
+ };
1509
+ PhoneInput.format = (fullDigits)=>{
1510
+ if (!fullDigits) return '';
1511
+ const country = detectCountry(fullDigits);
1512
+ const localDigits = fullDigits.slice(country.dialCode.length);
1513
+ const masked = applyMask(localDigits, country.code);
1514
+ return `${country.flag} +${country.dialCode} ${masked}`;
1515
+ };
1150
1516
  const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
1151
1517
  const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
1152
1518
  const hasLoaded = (0, external_react_.useRef)(false);
@@ -2319,6 +2685,7 @@ exports.LoggedMainContainer = __webpack_exports__.LoggedMainContainer;
2319
2685
  exports.Login = __webpack_exports__.Login;
2320
2686
  exports.LoginContainer = __webpack_exports__.LoginContainer;
2321
2687
  exports.OllamaOutlinedIcon = __webpack_exports__.OllamaOutlinedIcon;
2688
+ exports.PhoneInput = __webpack_exports__.PhoneInput;
2322
2689
  exports.TableContainer = __webpack_exports__.TableContainer;
2323
2690
  exports.ThemeToggle = __webpack_exports__.ThemeToggle;
2324
2691
  exports.useErrorMessage = __webpack_exports__.useErrorMessage;
@@ -2345,6 +2712,7 @@ for(var __rspack_i in __webpack_exports__)if (-1 === [
2345
2712
  "Login",
2346
2713
  "LoginContainer",
2347
2714
  "OllamaOutlinedIcon",
2715
+ "PhoneInput",
2348
2716
  "TableContainer",
2349
2717
  "ThemeToggle",
2350
2718
  "useErrorMessage",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codebit-programando-solucoes/codebit-web-antd",
3
- "version": "1.1.38",
3
+ "version": "1.1.40",
4
4
  "main": "./dist/index.cjs",
5
5
  "type": "module",
6
6
  "types": "./src/index.d.ts",