@arkyn/components 3.0.1-beta.17 → 3.0.1-beta.170
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.
- package/README.md +41 -0
- package/package.json +458 -20
- package/styles.d.ts +3 -0
- package/dist/bundle.js +0 -4292
- package/dist/bundle.umd.cjs +0 -30
- package/dist/documentation/src/app.d.ts +0 -3
- package/dist/documentation/src/app.d.ts.map +0 -1
- package/dist/documentation/src/app.js +0 -55
- package/dist/documentation/src/components/examples.alert.d.ts +0 -3
- package/dist/documentation/src/components/examples.alert.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.alert.js +0 -7
- package/dist/documentation/src/components/examples.audioPlayer.d.ts +0 -3
- package/dist/documentation/src/components/examples.audioPlayer.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.audioPlayer.js +0 -8
- package/dist/documentation/src/components/examples.badge.d.ts +0 -3
- package/dist/documentation/src/components/examples.badge.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.badge.js +0 -9
- package/dist/documentation/src/components/examples.button.d.ts +0 -3
- package/dist/documentation/src/components/examples.button.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.button.js +0 -9
- package/dist/documentation/src/components/examples.cardTab.d.ts +0 -3
- package/dist/documentation/src/components/examples.cardTab.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.cardTab.js +0 -7
- package/dist/documentation/src/components/examples.checkbox.d.ts +0 -3
- package/dist/documentation/src/components/examples.checkbox.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.checkbox.js +0 -13
- package/dist/documentation/src/components/examples.currencyInput.d.ts +0 -3
- package/dist/documentation/src/components/examples.currencyInput.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.currencyInput.js +0 -9
- package/dist/documentation/src/components/examples.divider.d.ts +0 -3
- package/dist/documentation/src/components/examples.divider.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.divider.js +0 -7
- package/dist/documentation/src/components/examples.drawer.d.ts +0 -3
- package/dist/documentation/src/components/examples.drawer.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.drawer.js +0 -11
- package/dist/documentation/src/components/examples.iconButton.d.ts +0 -3
- package/dist/documentation/src/components/examples.iconButton.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.iconButton.js +0 -9
- package/dist/documentation/src/components/examples.input.d.ts +0 -3
- package/dist/documentation/src/components/examples.input.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.input.js +0 -9
- package/dist/documentation/src/components/examples.maskedInput.d.ts +0 -3
- package/dist/documentation/src/components/examples.maskedInput.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.maskedInput.js +0 -9
- package/dist/documentation/src/components/examples.modal.d.ts +0 -3
- package/dist/documentation/src/components/examples.modal.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.modal.js +0 -10
- package/dist/documentation/src/components/examples.multiSelect.d.ts +0 -3
- package/dist/documentation/src/components/examples.multiSelect.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.multiSelect.js +0 -92
- package/dist/documentation/src/components/examples.phoneInput.d.ts +0 -3
- package/dist/documentation/src/components/examples.phoneInput.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.phoneInput.js +0 -26
- package/dist/documentation/src/components/examples.radio.d.ts +0 -3
- package/dist/documentation/src/components/examples.radio.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.radio.js +0 -11
- package/dist/documentation/src/components/examples.slider.d.ts +0 -3
- package/dist/documentation/src/components/examples.slider.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.slider.js +0 -10
- package/dist/documentation/src/components/examples.switch.d.ts +0 -3
- package/dist/documentation/src/components/examples.switch.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.switch.js +0 -20
- package/dist/documentation/src/components/examples.tab.d.ts +0 -3
- package/dist/documentation/src/components/examples.tab.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.tab.js +0 -7
- package/dist/documentation/src/components/examples.texarea.d.ts +0 -3
- package/dist/documentation/src/components/examples.texarea.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.texarea.js +0 -34
- package/dist/documentation/src/components/examples.tooltip.d.ts +0 -3
- package/dist/documentation/src/components/examples.tooltip.d.ts.map +0 -1
- package/dist/documentation/src/components/examples.tooltip.js +0 -8
- package/dist/documentation/src/main.d.ts +0 -3
- package/dist/documentation/src/main.d.ts.map +0 -1
- package/dist/documentation/src/main.js +0 -7
- package/dist/documentation/src/ui/box.d.ts +0 -8
- package/dist/documentation/src/ui/box.d.ts.map +0 -1
- package/dist/documentation/src/ui/box.js +0 -5
- package/dist/documentation/src/ui/row.d.ts +0 -7
- package/dist/documentation/src/ui/row.d.ts.map +0 -1
- package/dist/documentation/src/ui/row.js +0 -5
- package/dist/documentation/vite.config.d.ts +0 -3
- package/dist/documentation/vite.config.d.ts.map +0 -1
- package/dist/documentation/vite.config.js +0 -12
- package/dist/src/components/alert/alertContainer/index.d.ts +0 -44
- package/dist/src/components/alert/alertContainer/index.d.ts.map +0 -1
- package/dist/src/components/alert/alertContainer/index.js +0 -71
- package/dist/src/components/alert/alertContent/index.d.ts +0 -45
- package/dist/src/components/alert/alertContent/index.d.ts.map +0 -1
- package/dist/src/components/alert/alertContent/index.js +0 -47
- package/dist/src/components/alert/alertDescription/index.d.ts +0 -49
- package/dist/src/components/alert/alertDescription/index.d.ts.map +0 -1
- package/dist/src/components/alert/alertDescription/index.js +0 -51
- package/dist/src/components/alert/alertIcon/index.d.ts +0 -52
- package/dist/src/components/alert/alertIcon/index.d.ts.map +0 -1
- package/dist/src/components/alert/alertIcon/index.js +0 -66
- package/dist/src/components/alert/alertTitle/index.d.ts +0 -46
- package/dist/src/components/alert/alertTitle/index.d.ts.map +0 -1
- package/dist/src/components/alert/alertTitle/index.js +0 -48
- package/dist/src/components/audioPlayer/index.d.ts +0 -60
- package/dist/src/components/audioPlayer/index.d.ts.map +0 -1
- package/dist/src/components/audioPlayer/index.js +0 -130
- package/dist/src/components/badge/index.d.ts +0 -51
- package/dist/src/components/badge/index.d.ts.map +0 -1
- package/dist/src/components/badge/index.js +0 -49
- package/dist/src/components/button/index.d.ts +0 -60
- package/dist/src/components/button/index.d.ts.map +0 -1
- package/dist/src/components/button/index.js +0 -61
- package/dist/src/components/cardTab/cardTabButton/index.d.ts +0 -72
- package/dist/src/components/cardTab/cardTabButton/index.d.ts.map +0 -1
- package/dist/src/components/cardTab/cardTabButton/index.js +0 -80
- package/dist/src/components/cardTab/cardTabContainer/index.d.ts +0 -83
- package/dist/src/components/cardTab/cardTabContainer/index.d.ts.map +0 -1
- package/dist/src/components/cardTab/cardTabContainer/index.js +0 -88
- package/dist/src/components/cardTab/cardTabContext.d.ts +0 -16
- package/dist/src/components/cardTab/cardTabContext.d.ts.map +0 -1
- package/dist/src/components/cardTab/cardTabContext.js +0 -10
- package/dist/src/components/checkbox/index.d.ts +0 -73
- package/dist/src/components/checkbox/index.d.ts.map +0 -1
- package/dist/src/components/checkbox/index.js +0 -86
- package/dist/src/components/currencyInput/index.d.ts +0 -98
- package/dist/src/components/currencyInput/index.d.ts.map +0 -1
- package/dist/src/components/currencyInput/index.js +0 -140
- package/dist/src/components/divider/index.d.ts +0 -45
- package/dist/src/components/divider/index.d.ts.map +0 -1
- package/dist/src/components/divider/index.js +0 -45
- package/dist/src/components/drawer/drawerContainer/index.d.ts +0 -71
- package/dist/src/components/drawer/drawerContainer/index.d.ts.map +0 -1
- package/dist/src/components/drawer/drawerContainer/index.js +0 -75
- package/dist/src/components/drawer/drawerContext.d.ts +0 -12
- package/dist/src/components/drawer/drawerContext.d.ts.map +0 -1
- package/dist/src/components/drawer/drawerContext.js +0 -10
- package/dist/src/components/drawer/drawerHeader/index.d.ts +0 -55
- package/dist/src/components/drawer/drawerHeader/index.d.ts.map +0 -1
- package/dist/src/components/drawer/drawerHeader/index.js +0 -58
- package/dist/src/components/fieldError/index.d.ts +0 -29
- package/dist/src/components/fieldError/index.d.ts.map +0 -1
- package/dist/src/components/fieldError/index.js +0 -33
- package/dist/src/components/fieldLabel/index.d.ts +0 -38
- package/dist/src/components/fieldLabel/index.d.ts.map +0 -1
- package/dist/src/components/fieldLabel/index.js +0 -39
- package/dist/src/components/fieldWrapper/index.d.ts +0 -41
- package/dist/src/components/fieldWrapper/index.d.ts.map +0 -1
- package/dist/src/components/fieldWrapper/index.js +0 -41
- package/dist/src/components/iconButton/index.d.ts +0 -44
- package/dist/src/components/iconButton/index.d.ts.map +0 -1
- package/dist/src/components/iconButton/index.js +0 -41
- package/dist/src/components/input/index.d.ts +0 -81
- package/dist/src/components/input/index.d.ts.map +0 -1
- package/dist/src/components/input/index.js +0 -112
- package/dist/src/components/maskedInput/index.d.ts +0 -103
- package/dist/src/components/maskedInput/index.d.ts.map +0 -1
- package/dist/src/components/maskedInput/index.js +0 -130
- package/dist/src/components/modal/modalContainer/index.d.ts +0 -78
- package/dist/src/components/modal/modalContainer/index.d.ts.map +0 -1
- package/dist/src/components/modal/modalContainer/index.js +0 -82
- package/dist/src/components/modal/modalContext.d.ts +0 -12
- package/dist/src/components/modal/modalContext.d.ts.map +0 -1
- package/dist/src/components/modal/modalContext.js +0 -10
- package/dist/src/components/modal/modalFooter/index.d.ts +0 -72
- package/dist/src/components/modal/modalFooter/index.d.ts.map +0 -1
- package/dist/src/components/modal/modalFooter/index.js +0 -72
- package/dist/src/components/modal/modalHeader/index.d.ts +0 -66
- package/dist/src/components/modal/modalHeader/index.d.ts.map +0 -1
- package/dist/src/components/modal/modalHeader/index.js +0 -69
- package/dist/src/components/multiSelect/index.d.ts +0 -125
- package/dist/src/components/multiSelect/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/index.js +0 -169
- package/dist/src/components/multiSelect/multiSelectChevron/index.d.ts +0 -11
- package/dist/src/components/multiSelect/multiSelectChevron/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectChevron/index.js +0 -13
- package/dist/src/components/multiSelect/multiSelectContainer/index.d.ts +0 -19
- package/dist/src/components/multiSelect/multiSelectContainer/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectContainer/index.js +0 -11
- package/dist/src/components/multiSelect/multiSelectContent/index.d.ts +0 -9
- package/dist/src/components/multiSelect/multiSelectContent/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectContent/index.js +0 -8
- package/dist/src/components/multiSelect/multiSelectMark/index.d.ts +0 -10
- package/dist/src/components/multiSelect/multiSelectMark/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectMark/index.js +0 -11
- package/dist/src/components/multiSelect/multiSelectOption/index.d.ts +0 -11
- package/dist/src/components/multiSelect/multiSelectOption/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectOption/index.js +0 -10
- package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.d.ts +0 -12
- package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectOptionsContainer/index.js +0 -44
- package/dist/src/components/multiSelect/multiSelectOverlay/index.d.ts +0 -8
- package/dist/src/components/multiSelect/multiSelectOverlay/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectOverlay/index.js +0 -9
- package/dist/src/components/multiSelect/multiSelectSpinner/index.d.ts +0 -8
- package/dist/src/components/multiSelect/multiSelectSpinner/index.d.ts.map +0 -1
- package/dist/src/components/multiSelect/multiSelectSpinner/index.js +0 -10
- package/dist/src/components/phoneInput/index.d.ts +0 -127
- package/dist/src/components/phoneInput/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/index.js +0 -202
- package/dist/src/components/phoneInput/phoneInputContainer/index.d.ts +0 -18
- package/dist/src/components/phoneInput/phoneInputContainer/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/phoneInputContainer/index.js +0 -11
- package/dist/src/components/phoneInput/phoneInputCountriesOverlay/index.d.ts +0 -8
- package/dist/src/components/phoneInput/phoneInputCountriesOverlay/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/phoneInputCountriesOverlay/index.js +0 -9
- package/dist/src/components/phoneInput/phoneInputCountryOption/index.d.ts +0 -18
- package/dist/src/components/phoneInput/phoneInputCountryOption/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/phoneInputCountryOption/index.js +0 -10
- package/dist/src/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts +0 -12
- package/dist/src/components/phoneInput/phoneInputCountryOptionsContainer/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/phoneInputCountryOptionsContainer/index.js +0 -40
- package/dist/src/components/phoneInput/phoneInputCountrySelector/index.d.ts +0 -17
- package/dist/src/components/phoneInput/phoneInputCountrySelector/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/phoneInputCountrySelector/index.js +0 -9
- package/dist/src/components/phoneInput/phoneInputMask/index.d.ts +0 -21
- package/dist/src/components/phoneInput/phoneInputMask/index.d.ts.map +0 -1
- package/dist/src/components/phoneInput/phoneInputMask/index.js +0 -34
- package/dist/src/components/radio/radioBox/index.d.ts +0 -85
- package/dist/src/components/radio/radioBox/index.d.ts.map +0 -1
- package/dist/src/components/radio/radioBox/index.js +0 -90
- package/dist/src/components/radio/radioContext.d.ts +0 -18
- package/dist/src/components/radio/radioContext.d.ts.map +0 -1
- package/dist/src/components/radio/radioContext.js +0 -11
- package/dist/src/components/radio/radioGroup/index.d.ts +0 -92
- package/dist/src/components/radio/radioGroup/index.d.ts.map +0 -1
- package/dist/src/components/radio/radioGroup/index.js +0 -100
- package/dist/src/components/slider/index.d.ts +0 -57
- package/dist/src/components/slider/index.d.ts.map +0 -1
- package/dist/src/components/slider/index.js +0 -97
- package/dist/src/components/switch/index.d.ts +0 -94
- package/dist/src/components/switch/index.d.ts.map +0 -1
- package/dist/src/components/switch/index.js +0 -99
- package/dist/src/components/tab/tabButton/index.d.ts +0 -72
- package/dist/src/components/tab/tabButton/index.d.ts.map +0 -1
- package/dist/src/components/tab/tabButton/index.js +0 -80
- package/dist/src/components/tab/tabContainer/index.d.ts +0 -83
- package/dist/src/components/tab/tabContainer/index.d.ts.map +0 -1
- package/dist/src/components/tab/tabContainer/index.js +0 -88
- package/dist/src/components/tab/tabContext.d.ts +0 -16
- package/dist/src/components/tab/tabContext.d.ts.map +0 -1
- package/dist/src/components/tab/tabContext.js +0 -10
- package/dist/src/components/textarea/index.d.ts +0 -103
- package/dist/src/components/textarea/index.d.ts.map +0 -1
- package/dist/src/components/textarea/index.js +0 -127
- package/dist/src/components/tooltip/index.d.ts +0 -80
- package/dist/src/components/tooltip/index.d.ts.map +0 -1
- package/dist/src/components/tooltip/index.js +0 -135
- package/dist/src/hooks/useForm.d.ts +0 -52
- package/dist/src/hooks/useForm.d.ts.map +0 -1
- package/dist/src/hooks/useForm.js +0 -52
- package/dist/src/hooks/useScopedParams.d.ts +0 -89
- package/dist/src/hooks/useScopedParams.d.ts.map +0 -1
- package/dist/src/hooks/useScopedParams.js +0 -107
- package/dist/src/hooks/useScrollLock.d.ts +0 -39
- package/dist/src/hooks/useScrollLock.d.ts.map +0 -1
- package/dist/src/hooks/useScrollLock.js +0 -49
- package/dist/src/hooks/useSlider.d.ts +0 -31
- package/dist/src/hooks/useSlider.d.ts.map +0 -1
- package/dist/src/hooks/useSlider.js +0 -49
- package/dist/src/index.d.ts +0 -40
- package/dist/src/index.d.ts.map +0 -1
- package/dist/src/index.js +0 -42
- package/dist/src/providers/formProvider.d.ts +0 -76
- package/dist/src/providers/formProvider.d.ts.map +0 -1
- package/dist/src/providers/formProvider.js +0 -69
- package/dist/src/services/iconRenderer.d.ts +0 -10
- package/dist/src/services/iconRenderer.d.ts.map +0 -1
- package/dist/src/services/iconRenderer.js +0 -13
- package/dist/src/services/maskCurrencyValues.d.ts +0 -4
- package/dist/src/services/maskCurrencyValues.d.ts.map +0 -1
- package/dist/src/services/maskCurrencyValues.js +0 -23
- package/dist/src/utils/phoneInputUtilities.d.ts +0 -1722
- package/dist/src/utils/phoneInputUtilities.d.ts.map +0 -1
- package/dist/src/utils/phoneInputUtilities.js +0 -99
- package/dist/style.css +0 -1
- package/dist/vite.config.d.ts +0 -3
- package/dist/vite.config.d.ts.map +0 -1
- package/dist/vite.config.js +0 -24
- package/dist/vitest.config.d.ts +0 -3
- package/dist/vitest.config.d.ts.map +0 -1
- package/dist/vitest.config.js +0 -4
- package/documentation/css/reset.css +0 -38
- package/documentation/css/variables.css +0 -41
- package/documentation/index.html +0 -13
- package/documentation/src/app.tsx +0 -93
- package/documentation/src/components/examples.alert.tsx +0 -49
- package/documentation/src/components/examples.audioPlayer.tsx +0 -16
- package/documentation/src/components/examples.badge.tsx +0 -38
- package/documentation/src/components/examples.button.tsx +0 -66
- package/documentation/src/components/examples.cardTab.tsx +0 -36
- package/documentation/src/components/examples.checkbox.tsx +0 -94
- package/documentation/src/components/examples.currencyInput.tsx +0 -263
- package/documentation/src/components/examples.divider.tsx +0 -12
- package/documentation/src/components/examples.drawer.tsx +0 -43
- package/documentation/src/components/examples.iconButton.tsx +0 -78
- package/documentation/src/components/examples.input.tsx +0 -256
- package/documentation/src/components/examples.maskedInput.tsx +0 -274
- package/documentation/src/components/examples.modal.tsx +0 -31
- package/documentation/src/components/examples.multiSelect.tsx +0 -320
- package/documentation/src/components/examples.phoneInput.tsx +0 -262
- package/documentation/src/components/examples.radio.tsx +0 -149
- package/documentation/src/components/examples.slider.tsx +0 -28
- package/documentation/src/components/examples.switch.tsx +0 -180
- package/documentation/src/components/examples.tab.tsx +0 -36
- package/documentation/src/components/examples.texarea.tsx +0 -188
- package/documentation/src/components/examples.tooltip.tsx +0 -45
- package/documentation/src/main.tsx +0 -12
- package/documentation/src/ui/box.tsx +0 -17
- package/documentation/src/ui/row.tsx +0 -11
- package/documentation/vite.config.ts +0 -13
- package/src/components/alert/alertContainer/index.tsx +0 -87
- package/src/components/alert/alertContainer/styles.css +0 -33
- package/src/components/alert/alertContent/index.tsx +0 -53
- package/src/components/alert/alertContent/styles.css +0 -5
- package/src/components/alert/alertDescription/index.tsx +0 -57
- package/src/components/alert/alertDescription/styles.css +0 -7
- package/src/components/alert/alertIcon/index.tsx +0 -79
- package/src/components/alert/alertIcon/styles.css +0 -23
- package/src/components/alert/alertTitle/index.tsx +0 -54
- package/src/components/alert/alertTitle/styles.css +0 -7
- package/src/components/audioPlayer/index.tsx +0 -187
- package/src/components/audioPlayer/styles.css +0 -50
- package/src/components/badge/index.tsx +0 -80
- package/src/components/badge/styles.css +0 -145
- package/src/components/button/index.tsx +0 -104
- package/src/components/button/styles.css +0 -208
- package/src/components/cardTab/cardTabButton/index.tsx +0 -114
- package/src/components/cardTab/cardTabButton/styles.css +0 -30
- package/src/components/cardTab/cardTabContainer/index.tsx +0 -121
- package/src/components/cardTab/cardTabContainer/styles.css +0 -9
- package/src/components/cardTab/cardTabContext.tsx +0 -30
- package/src/components/checkbox/index.tsx +0 -158
- package/src/components/checkbox/styles.css +0 -78
- package/src/components/currencyInput/index.tsx +0 -312
- package/src/components/currencyInput/style.css +0 -226
- package/src/components/divider/index.tsx +0 -58
- package/src/components/divider/styles.css +0 -17
- package/src/components/drawer/drawerContainer/index.tsx +0 -123
- package/src/components/drawer/drawerContainer/styles.css +0 -46
- package/src/components/drawer/drawerContext.tsx +0 -26
- package/src/components/drawer/drawerHeader/index.tsx +0 -88
- package/src/components/drawer/drawerHeader/styles.css +0 -38
- package/src/components/fieldError/index.tsx +0 -43
- package/src/components/fieldError/styles.css +0 -6
- package/src/components/fieldLabel/index.tsx +0 -52
- package/src/components/fieldLabel/styles.css +0 -15
- package/src/components/fieldWrapper/index.tsx +0 -54
- package/src/components/fieldWrapper/styles.css +0 -7
- package/src/components/iconButton/index.tsx +0 -83
- package/src/components/iconButton/styles.css +0 -166
- package/src/components/input/index.tsx +0 -233
- package/src/components/input/style.css +0 -226
- package/src/components/maskedInput/index.tsx +0 -260
- package/src/components/maskedInput/style.css +0 -226
- package/src/components/modal/modalContainer/index.tsx +0 -127
- package/src/components/modal/modalContainer/styles.css +0 -37
- package/src/components/modal/modalContext.tsx +0 -26
- package/src/components/modal/modalFooter/index.tsx +0 -80
- package/src/components/modal/modalFooter/styles.css +0 -27
- package/src/components/modal/modalHeader/index.tsx +0 -99
- package/src/components/modal/modalHeader/styles.css +0 -38
- package/src/components/multiSelect/index.tsx +0 -319
- package/src/components/multiSelect/multiSelectChevron/index.tsx +0 -26
- package/src/components/multiSelect/multiSelectChevron/styles.css +0 -7
- package/src/components/multiSelect/multiSelectContainer/index.tsx +0 -51
- package/src/components/multiSelect/multiSelectContainer/styles.css +0 -134
- package/src/components/multiSelect/multiSelectContent/index.tsx +0 -15
- package/src/components/multiSelect/multiSelectContent/styles.css +0 -24
- package/src/components/multiSelect/multiSelectMark/index.tsx +0 -32
- package/src/components/multiSelect/multiSelectMark/styles.css +0 -44
- package/src/components/multiSelect/multiSelectOption/index.tsx +0 -25
- package/src/components/multiSelect/multiSelectOption/styles.css +0 -37
- package/src/components/multiSelect/multiSelectOptionsContainer/index.tsx +0 -81
- package/src/components/multiSelect/multiSelectOptionsContainer/styles.css +0 -45
- package/src/components/multiSelect/multiSelectOverlay/index.tsx +0 -14
- package/src/components/multiSelect/multiSelectOverlay/styles.css +0 -8
- package/src/components/multiSelect/multiSelectSpinner/index.tsx +0 -22
- package/src/components/multiSelect/multiSelectSpinner/styles.css +0 -12
- package/src/components/phoneInput/index.tsx +0 -332
- package/src/components/phoneInput/phoneInputContainer/index.tsx +0 -46
- package/src/components/phoneInput/phoneInputContainer/styles.css +0 -59
- package/src/components/phoneInput/phoneInputCountriesOverlay/index.tsx +0 -16
- package/src/components/phoneInput/phoneInputCountriesOverlay/styles.css +0 -8
- package/src/components/phoneInput/phoneInputCountryOption/index.tsx +0 -35
- package/src/components/phoneInput/phoneInputCountryOption/styles.css +0 -50
- package/src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx +0 -77
- package/src/components/phoneInput/phoneInputCountryOptionsContainer/styles.css +0 -59
- package/src/components/phoneInput/phoneInputCountrySelector/index.tsx +0 -37
- package/src/components/phoneInput/phoneInputCountrySelector/styles.css +0 -26
- package/src/components/phoneInput/phoneInputMask/index.tsx +0 -105
- package/src/components/phoneInput/phoneInputMask/style.css +0 -36
- package/src/components/radio/radioBox/index.tsx +0 -124
- package/src/components/radio/radioBox/styles.css +0 -95
- package/src/components/radio/radioContext.tsx +0 -34
- package/src/components/radio/radioGroup/index.tsx +0 -150
- package/src/components/radio/radioGroup/styles.css +0 -5
- package/src/components/slider/index.tsx +0 -132
- package/src/components/slider/styles.css +0 -45
- package/src/components/switch/index.tsx +0 -156
- package/src/components/switch/styles.css +0 -90
- package/src/components/tab/tabButton/index.tsx +0 -114
- package/src/components/tab/tabButton/styles.css +0 -41
- package/src/components/tab/tabContainer/index.tsx +0 -121
- package/src/components/tab/tabContainer/styles.css +0 -11
- package/src/components/tab/tabContext.tsx +0 -28
- package/src/components/textarea/index.tsx +0 -193
- package/src/components/textarea/styles.css +0 -93
- package/src/components/tooltip/index.tsx +0 -172
- package/src/components/tooltip/styles.css +0 -112
- package/src/hooks/useForm.ts +0 -55
- package/src/hooks/useScopedParams.ts +0 -111
- package/src/hooks/useScrollLock.ts +0 -52
- package/src/hooks/useSlider.ts +0 -52
- package/src/index.ts +0 -44
- package/src/providers/formProvider.tsx +0 -88
- package/src/services/iconRenderer.tsx +0 -23
- package/src/services/maskCurrencyValues.ts +0 -54
- package/src/utils/phoneInputUtilities.ts +0 -138
- package/tsconfig.json +0 -35
- package/variables.css +0 -41
- package/vite.config.ts +0 -24
- package/vitest.config.ts +0 -5
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import { countries } from "@arkyn/templates";
|
|
2
|
-
type PhoneInputProps = {
|
|
3
|
-
id?: string;
|
|
4
|
-
disabled?: boolean;
|
|
5
|
-
readOnly?: boolean;
|
|
6
|
-
errorMessage?: string;
|
|
7
|
-
label?: string;
|
|
8
|
-
showAsterisk?: boolean;
|
|
9
|
-
isLoading?: boolean;
|
|
10
|
-
size?: "md" | "lg";
|
|
11
|
-
variant?: "solid" | "outline";
|
|
12
|
-
className?: string;
|
|
13
|
-
defaultValue?: string;
|
|
14
|
-
notFoundCountryText?: string;
|
|
15
|
-
name: string;
|
|
16
|
-
searchCountryPlaceholder?: string;
|
|
17
|
-
defaultCountry?: (typeof countries)[number]["iso"];
|
|
18
|
-
onChange?: (e: string) => void;
|
|
19
|
-
};
|
|
20
|
-
/**
|
|
21
|
-
* PhoneInput component - used for international phone number input with country selection and automatic formatting
|
|
22
|
-
*
|
|
23
|
-
* @param props - PhoneInput component properties
|
|
24
|
-
* @param props.name - Required field name for form handling and phone input identification
|
|
25
|
-
* @param props.label - Optional label text to display above the phone input
|
|
26
|
-
* @param props.showAsterisk - Whether to show asterisk on label for required fields
|
|
27
|
-
* @param props.errorMessage - Error message to display below the phone input
|
|
28
|
-
* @param props.size - Size variant of the phone input. Default: "md"
|
|
29
|
-
* @param props.variant - Visual variant of the phone input. Default: "solid"
|
|
30
|
-
* @param props.defaultValue - Default phone number value for the input
|
|
31
|
-
* @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
|
|
32
|
-
* @param props.disabled - Whether the phone input is disabled. Default: false
|
|
33
|
-
* @param props.readOnly - Whether the phone input is read-only. Default: false
|
|
34
|
-
* @param props.isLoading - Whether the phone input is in loading state. Default: false
|
|
35
|
-
* @param props.className - Additional CSS classes for styling
|
|
36
|
-
* @param props.id - Optional unique identifier for the input
|
|
37
|
-
* @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
|
|
38
|
-
* @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
|
|
39
|
-
* @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
|
|
40
|
-
*
|
|
41
|
-
* @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* ```tsx
|
|
45
|
-
* // Basic phone input
|
|
46
|
-
* <PhoneInput name="phone" />
|
|
47
|
-
*
|
|
48
|
-
* // Phone input with label and default country
|
|
49
|
-
* <PhoneInput
|
|
50
|
-
* name="contactPhone"
|
|
51
|
-
* label="Contact Phone"
|
|
52
|
-
* defaultCountry="US"
|
|
53
|
-
* showAsterisk
|
|
54
|
-
* />
|
|
55
|
-
*
|
|
56
|
-
* // Phone input with validation and custom text
|
|
57
|
-
* <PhoneInput
|
|
58
|
-
* name="businessPhone"
|
|
59
|
-
* label="Business Phone"
|
|
60
|
-
* errorMessage="Please enter a valid phone number"
|
|
61
|
-
* searchCountryPlaceholder="Search country..."
|
|
62
|
-
* notFoundCountryText="Country not found"
|
|
63
|
-
* />
|
|
64
|
-
*
|
|
65
|
-
* // Large phone input with default value
|
|
66
|
-
* <PhoneInput
|
|
67
|
-
* name="emergencyContact"
|
|
68
|
-
* label="Emergency Contact"
|
|
69
|
-
* size="lg"
|
|
70
|
-
* variant="outline"
|
|
71
|
-
* defaultValue="+1 (555) 123-4567"
|
|
72
|
-
* defaultCountry="US"
|
|
73
|
-
* />
|
|
74
|
-
*
|
|
75
|
-
* // Controlled phone input with callback
|
|
76
|
-
* <PhoneInput
|
|
77
|
-
* name="userPhone"
|
|
78
|
-
* label="Your Phone Number"
|
|
79
|
-
* onChange={(formattedPhone) => {
|
|
80
|
-
* console.log('Phone number:', formattedPhone);
|
|
81
|
-
* setPhoneNumber(formattedPhone);
|
|
82
|
-
* }}
|
|
83
|
-
* defaultCountry="BR"
|
|
84
|
-
* showAsterisk
|
|
85
|
-
* />
|
|
86
|
-
*
|
|
87
|
-
* // Read-only phone input for display
|
|
88
|
-
* <PhoneInput
|
|
89
|
-
* name="displayPhone"
|
|
90
|
-
* label="Registered Phone"
|
|
91
|
-
* defaultValue="+55 11 99999-9999"
|
|
92
|
-
* readOnly
|
|
93
|
-
* variant="outline"
|
|
94
|
-
* />
|
|
95
|
-
*
|
|
96
|
-
* // Disabled phone input
|
|
97
|
-
* <PhoneInput
|
|
98
|
-
* name="lockedPhone"
|
|
99
|
-
* label="Phone (Locked)"
|
|
100
|
-
* defaultValue="+1 (555) 987-6543"
|
|
101
|
-
* disabled
|
|
102
|
-
* className="locked-field"
|
|
103
|
-
* />
|
|
104
|
-
*
|
|
105
|
-
* // Phone input with loading state
|
|
106
|
-
* <PhoneInput
|
|
107
|
-
* name="loadingPhone"
|
|
108
|
-
* label="Phone Number"
|
|
109
|
-
* isLoading
|
|
110
|
-
* defaultCountry="CA"
|
|
111
|
-
* />
|
|
112
|
-
* ```
|
|
113
|
-
*
|
|
114
|
-
* @remarks
|
|
115
|
-
* This component provides:
|
|
116
|
-
* - Automatic phone number formatting based on selected country
|
|
117
|
-
* - Searchable country dropdown with flags and country codes
|
|
118
|
-
* - Support for international phone number formats
|
|
119
|
-
* - Integration with form validation systems
|
|
120
|
-
* - Accessibility features with proper labeling
|
|
121
|
-
*
|
|
122
|
-
* The component uses country data from @arkyn/templates and automatically formats
|
|
123
|
-
* phone numbers according to each country's specific format and mask patterns.
|
|
124
|
-
*/
|
|
125
|
-
declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
|
|
126
|
-
export { PhoneInput };
|
|
127
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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,2CAkLzC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -1,202 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { countries } from "@arkyn/templates";
|
|
3
|
-
import { useId, useRef, useState } from "react";
|
|
4
|
-
import { useForm } from "../../hooks/useForm";
|
|
5
|
-
import { getDefaultFormatPhoneNumber } from "../../utils/phoneInputUtilities";
|
|
6
|
-
import { FieldError } from "../fieldError";
|
|
7
|
-
import { FieldLabel } from "../fieldLabel";
|
|
8
|
-
import { FieldWrapper } from "../fieldWrapper";
|
|
9
|
-
import { PhoneInputContainer } from "./phoneInputContainer";
|
|
10
|
-
import { PhoneInputCountriesOverlay } from "./phoneInputCountriesOverlay";
|
|
11
|
-
import { PhoneInputCountryOption } from "./phoneInputCountryOption";
|
|
12
|
-
import { PhoneInputCountryOptionsContainer } from "./phoneInputCountryOptionsContainer";
|
|
13
|
-
import { PhoneInputCountrySelector } from "./phoneInputCountrySelector";
|
|
14
|
-
import { PhoneInputMask } from "./phoneInputMask";
|
|
15
|
-
/**
|
|
16
|
-
* PhoneInput component - used for international phone number input with country selection and automatic formatting
|
|
17
|
-
*
|
|
18
|
-
* @param props - PhoneInput component properties
|
|
19
|
-
* @param props.name - Required field name for form handling and phone input identification
|
|
20
|
-
* @param props.label - Optional label text to display above the phone input
|
|
21
|
-
* @param props.showAsterisk - Whether to show asterisk on label for required fields
|
|
22
|
-
* @param props.errorMessage - Error message to display below the phone input
|
|
23
|
-
* @param props.size - Size variant of the phone input. Default: "md"
|
|
24
|
-
* @param props.variant - Visual variant of the phone input. Default: "solid"
|
|
25
|
-
* @param props.defaultValue - Default phone number value for the input
|
|
26
|
-
* @param props.defaultCountry - Default country ISO code to be selected. Uses country index 30 if not provided
|
|
27
|
-
* @param props.disabled - Whether the phone input is disabled. Default: false
|
|
28
|
-
* @param props.readOnly - Whether the phone input is read-only. Default: false
|
|
29
|
-
* @param props.isLoading - Whether the phone input is in loading state. Default: false
|
|
30
|
-
* @param props.className - Additional CSS classes for styling
|
|
31
|
-
* @param props.id - Optional unique identifier for the input
|
|
32
|
-
* @param props.searchCountryPlaceholder - Placeholder text for country search field. Default: "Pesquisar país"
|
|
33
|
-
* @param props.notFoundCountryText - Text displayed when no countries match the search. Default: "Nenhum país encontrado"
|
|
34
|
-
* @param props.onChange - Callback function called when phone number changes, receives the formatted value with country code
|
|
35
|
-
*
|
|
36
|
-
* @returns PhoneInput JSX element wrapped in FieldWrapper with country selector, masked input, and validation
|
|
37
|
-
*
|
|
38
|
-
* @example
|
|
39
|
-
* ```tsx
|
|
40
|
-
* // Basic phone input
|
|
41
|
-
* <PhoneInput name="phone" />
|
|
42
|
-
*
|
|
43
|
-
* // Phone input with label and default country
|
|
44
|
-
* <PhoneInput
|
|
45
|
-
* name="contactPhone"
|
|
46
|
-
* label="Contact Phone"
|
|
47
|
-
* defaultCountry="US"
|
|
48
|
-
* showAsterisk
|
|
49
|
-
* />
|
|
50
|
-
*
|
|
51
|
-
* // Phone input with validation and custom text
|
|
52
|
-
* <PhoneInput
|
|
53
|
-
* name="businessPhone"
|
|
54
|
-
* label="Business Phone"
|
|
55
|
-
* errorMessage="Please enter a valid phone number"
|
|
56
|
-
* searchCountryPlaceholder="Search country..."
|
|
57
|
-
* notFoundCountryText="Country not found"
|
|
58
|
-
* />
|
|
59
|
-
*
|
|
60
|
-
* // Large phone input with default value
|
|
61
|
-
* <PhoneInput
|
|
62
|
-
* name="emergencyContact"
|
|
63
|
-
* label="Emergency Contact"
|
|
64
|
-
* size="lg"
|
|
65
|
-
* variant="outline"
|
|
66
|
-
* defaultValue="+1 (555) 123-4567"
|
|
67
|
-
* defaultCountry="US"
|
|
68
|
-
* />
|
|
69
|
-
*
|
|
70
|
-
* // Controlled phone input with callback
|
|
71
|
-
* <PhoneInput
|
|
72
|
-
* name="userPhone"
|
|
73
|
-
* label="Your Phone Number"
|
|
74
|
-
* onChange={(formattedPhone) => {
|
|
75
|
-
* console.log('Phone number:', formattedPhone);
|
|
76
|
-
* setPhoneNumber(formattedPhone);
|
|
77
|
-
* }}
|
|
78
|
-
* defaultCountry="BR"
|
|
79
|
-
* showAsterisk
|
|
80
|
-
* />
|
|
81
|
-
*
|
|
82
|
-
* // Read-only phone input for display
|
|
83
|
-
* <PhoneInput
|
|
84
|
-
* name="displayPhone"
|
|
85
|
-
* label="Registered Phone"
|
|
86
|
-
* defaultValue="+55 11 99999-9999"
|
|
87
|
-
* readOnly
|
|
88
|
-
* variant="outline"
|
|
89
|
-
* />
|
|
90
|
-
*
|
|
91
|
-
* // Disabled phone input
|
|
92
|
-
* <PhoneInput
|
|
93
|
-
* name="lockedPhone"
|
|
94
|
-
* label="Phone (Locked)"
|
|
95
|
-
* defaultValue="+1 (555) 987-6543"
|
|
96
|
-
* disabled
|
|
97
|
-
* className="locked-field"
|
|
98
|
-
* />
|
|
99
|
-
*
|
|
100
|
-
* // Phone input with loading state
|
|
101
|
-
* <PhoneInput
|
|
102
|
-
* name="loadingPhone"
|
|
103
|
-
* label="Phone Number"
|
|
104
|
-
* isLoading
|
|
105
|
-
* defaultCountry="CA"
|
|
106
|
-
* />
|
|
107
|
-
* ```
|
|
108
|
-
*
|
|
109
|
-
* @remarks
|
|
110
|
-
* This component provides:
|
|
111
|
-
* - Automatic phone number formatting based on selected country
|
|
112
|
-
* - Searchable country dropdown with flags and country codes
|
|
113
|
-
* - Support for international phone number formats
|
|
114
|
-
* - Integration with form validation systems
|
|
115
|
-
* - Accessibility features with proper labeling
|
|
116
|
-
*
|
|
117
|
-
* The component uses country data from @arkyn/templates and automatically formats
|
|
118
|
-
* phone numbers according to each country's specific format and mask patterns.
|
|
119
|
-
*/
|
|
120
|
-
function PhoneInput(props) {
|
|
121
|
-
const { defaultCountry, label, className = "", 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;
|
|
122
|
-
const defaultData = getDefaultFormatPhoneNumber(defaultValue);
|
|
123
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
124
|
-
const [search, setSearch] = useState("");
|
|
125
|
-
const [showCountryOptions, setShowCountryOptions] = useState(false);
|
|
126
|
-
const [value, setValue] = useState(defaultData.formattedNumber || "");
|
|
127
|
-
const [currentCountry, setCurrentCountry] = useState(() => {
|
|
128
|
-
if (defaultData.country)
|
|
129
|
-
return defaultData.country;
|
|
130
|
-
const country = countries.find((country) => country.iso === defaultCountry);
|
|
131
|
-
if (country)
|
|
132
|
-
return country;
|
|
133
|
-
return countries[30];
|
|
134
|
-
});
|
|
135
|
-
const { fieldErrors } = useForm();
|
|
136
|
-
const phoneInputRef = useRef(null);
|
|
137
|
-
const phoneInputId = id || useId();
|
|
138
|
-
const errorMessage = baseErrorMessage || fieldErrors?.[name];
|
|
139
|
-
const isError = !!errorMessage;
|
|
140
|
-
const inputPhoneMaskRef = useRef(null);
|
|
141
|
-
function handleContainerFocus() {
|
|
142
|
-
if (isFocused || showCountryOptions)
|
|
143
|
-
return;
|
|
144
|
-
setIsFocused(true);
|
|
145
|
-
if (inputPhoneMaskRef.current)
|
|
146
|
-
inputPhoneMaskRef.current.focus();
|
|
147
|
-
}
|
|
148
|
-
function handleOpenCountryOptions() {
|
|
149
|
-
setShowCountryOptions(true);
|
|
150
|
-
setIsFocused(true);
|
|
151
|
-
}
|
|
152
|
-
function handleCloseCountryOptions() {
|
|
153
|
-
setShowCountryOptions(false);
|
|
154
|
-
setIsFocused(false);
|
|
155
|
-
}
|
|
156
|
-
function handleInputFocus() {
|
|
157
|
-
setIsFocused(true);
|
|
158
|
-
}
|
|
159
|
-
function handleInputBlur() {
|
|
160
|
-
setIsFocused(false);
|
|
161
|
-
}
|
|
162
|
-
function filterCountryFunction(country) {
|
|
163
|
-
return country.name.toLowerCase().includes(search.toLowerCase());
|
|
164
|
-
}
|
|
165
|
-
function removeNumberMasks(number) {
|
|
166
|
-
if (currentCountry.prefix) {
|
|
167
|
-
return number
|
|
168
|
-
.replace(currentCountry.prefix, "")
|
|
169
|
-
.replaceAll(" ", "")
|
|
170
|
-
.replaceAll("-", "")
|
|
171
|
-
.replaceAll("(", "")
|
|
172
|
-
.replaceAll(")", "")
|
|
173
|
-
.trim();
|
|
174
|
-
}
|
|
175
|
-
return number
|
|
176
|
-
.replaceAll(" ", "")
|
|
177
|
-
.replaceAll("-", "")
|
|
178
|
-
.replaceAll("(", "")
|
|
179
|
-
.replaceAll(")", "")
|
|
180
|
-
.trim();
|
|
181
|
-
}
|
|
182
|
-
function inputValue(props) {
|
|
183
|
-
let returnValue = currentCountry.code;
|
|
184
|
-
if (currentCountry.prefix)
|
|
185
|
-
returnValue += `-${currentCountry.prefix}`;
|
|
186
|
-
returnValue += " ";
|
|
187
|
-
returnValue += removeNumberMasks(props || value);
|
|
188
|
-
return returnValue;
|
|
189
|
-
}
|
|
190
|
-
return (_jsxs(FieldWrapper, { children: [label && _jsx(FieldLabel, { showAsterisk: showAsterisk, children: label }), _jsxs(PhoneInputContainer, { id: phoneInputId, disabled: disabled, isError: isError, isLoading: isLoading, isFocused: isFocused, readOnly: readOnly, size: size, variant: variant, className: className, onFocus: handleContainerFocus, children: [_jsx(PhoneInputCountrySelector, { currentCountry: currentCountry, onClick: handleOpenCountryOptions, size: size }), _jsxs(PhoneInputCountryOptionsContainer, { isOpen: showCountryOptions, search: search, placeholder: searchCountryPlaceholder, onSearch: setSearch, children: [countries
|
|
191
|
-
.filter((country) => filterCountryFunction(country))
|
|
192
|
-
.map((country) => (_jsx(PhoneInputCountryOption, { country: country, handleChangeValue: () => {
|
|
193
|
-
setCurrentCountry(country);
|
|
194
|
-
setShowCountryOptions(false);
|
|
195
|
-
setValue(country.mask);
|
|
196
|
-
}, isActive: country.iso === currentCountry.iso, size: size }, country.iso))), countries.filter((country) => filterCountryFunction(country))
|
|
197
|
-
.length === 0 && _jsx("p", { children: notFoundCountryText })] }), _jsx(PhoneInputCountriesOverlay, { isOpen: showCountryOptions, onClick: handleCloseCountryOptions }), _jsx(PhoneInputMask, { ref: inputPhoneMaskRef, currentCountry: currentCountry, value: value, onChange: (e) => {
|
|
198
|
-
setValue(e);
|
|
199
|
-
onChange && onChange(inputValue(e));
|
|
200
|
-
}, disabled: disabled, onBlur: handleInputBlur, onFocus: handleInputFocus, size: size }), _jsx("input", { ref: phoneInputRef, type: "hidden", name: name, value: inputValue() })] }), errorMessage && _jsx(FieldError, { children: errorMessage })] }));
|
|
201
|
-
}
|
|
202
|
-
export { PhoneInput };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
import "./styles.css";
|
|
3
|
-
type PhoneInputContainerProps = {
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
onFocus: () => void;
|
|
6
|
-
isError: boolean;
|
|
7
|
-
disabled: boolean;
|
|
8
|
-
readOnly: boolean;
|
|
9
|
-
isLoading: boolean;
|
|
10
|
-
isFocused: boolean;
|
|
11
|
-
className?: string;
|
|
12
|
-
id: string;
|
|
13
|
-
variant: "solid" | "outline";
|
|
14
|
-
size: "md" | "lg";
|
|
15
|
-
};
|
|
16
|
-
declare function PhoneInputContainer(props: PhoneInputContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export { PhoneInputContainer };
|
|
18
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,KAAK,wBAAwB,GAAG;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;CACnB,CAAC;AAEF,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CA0B3D;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import "./styles.css";
|
|
3
|
-
function PhoneInputContainer(props) {
|
|
4
|
-
const { children, onFocus, disabled, isError, isLoading, isFocused, className: baseClassName = "", readOnly, variant, size, id, } = props;
|
|
5
|
-
const errored = isError ? "errored" : "";
|
|
6
|
-
const opacity = disabled || readOnly || isLoading ? "opacity" : "";
|
|
7
|
-
const focused = isFocused ? "focused" : "";
|
|
8
|
-
const className = `arkynPhoneInputContainer ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
|
|
9
|
-
return (_jsx("section", { id: id, className: className.trim(), onClick: onFocus, children: children }));
|
|
10
|
-
}
|
|
11
|
-
export { PhoneInputContainer };
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import "./styles.css";
|
|
2
|
-
type PhoneInputCountriesOverlayProps = {
|
|
3
|
-
isOpen: boolean;
|
|
4
|
-
onClick: () => void;
|
|
5
|
-
};
|
|
6
|
-
declare function PhoneInputCountriesOverlay(props: PhoneInputCountriesOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export { PhoneInputCountriesOverlay };
|
|
8
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputCountriesOverlay/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAEtB,KAAK,+BAA+B,GAAG;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,iBAAS,0BAA0B,CAAC,KAAK,EAAE,+BAA+B,2CAMzE;AAED,OAAO,EAAE,0BAA0B,EAAE,CAAC"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import "./styles.css";
|
|
3
|
-
function PhoneInputCountriesOverlay(props) {
|
|
4
|
-
const { isOpen, onClick } = props;
|
|
5
|
-
if (!isOpen)
|
|
6
|
-
return _jsx(_Fragment, {});
|
|
7
|
-
return (_jsx("aside", { className: "arkynPhoneInputCountriesOverlay", onClick: onClick }));
|
|
8
|
-
}
|
|
9
|
-
export { PhoneInputCountriesOverlay };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import "./styles.css";
|
|
2
|
-
type CountryType = {
|
|
3
|
-
name: string;
|
|
4
|
-
code: string;
|
|
5
|
-
iso: string;
|
|
6
|
-
prefix: null | string;
|
|
7
|
-
flag: string;
|
|
8
|
-
mask: string;
|
|
9
|
-
};
|
|
10
|
-
type PhoneInputCountryOptionProps = {
|
|
11
|
-
country: CountryType;
|
|
12
|
-
size: "md" | "lg";
|
|
13
|
-
isActive: boolean;
|
|
14
|
-
handleChangeValue: (country: CountryType) => void;
|
|
15
|
-
};
|
|
16
|
-
declare function PhoneInputCountryOption(props: PhoneInputCountryOptionProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
-
export { PhoneInputCountryOption };
|
|
18
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Check } from "lucide-react";
|
|
3
|
-
import "./styles.css";
|
|
4
|
-
function PhoneInputCountryOption(props) {
|
|
5
|
-
const { country, isActive, handleChangeValue, size } = props;
|
|
6
|
-
const hasActive = isActive ? "active" : "";
|
|
7
|
-
const className = `arkynPhoneInputCountryOption ${size} ${hasActive}`;
|
|
8
|
-
return (_jsxs("div", { onClick: () => handleChangeValue(country), className: className, children: [_jsx("img", { src: country.flag, alt: country.name, className: "flag" }), country.name, " ", _jsx("span", { children: country.code }), _jsx(Check, { className: "check" })] }));
|
|
9
|
-
}
|
|
10
|
-
export { PhoneInputCountryOption };
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
import "./styles.css";
|
|
3
|
-
type PhoneInputCountryOptionsContainerProps = {
|
|
4
|
-
isOpen: boolean;
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
search: string;
|
|
7
|
-
placeholder: string;
|
|
8
|
-
onSearch: (value: string) => void;
|
|
9
|
-
};
|
|
10
|
-
declare function PhoneInputCountryOptionsContainer(props: PhoneInputCountryOptionsContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export { PhoneInputCountryOptionsContainer };
|
|
12
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/phoneInput/phoneInputCountryOptionsContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,SAAS,EAA+B,MAAM,OAAO,CAAC;AAE5E,OAAO,cAAc,CAAC;AAEtB,KAAK,sCAAsC,GAAG;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,iBAAS,iCAAiC,CACxC,KAAK,EAAE,sCAAsC,2CA6D9C;AAED,OAAO,EAAE,iCAAiC,EAAE,CAAC"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef, useState } from "react";
|
|
3
|
-
import { useScrollLock } from "../../../hooks/useScrollLock";
|
|
4
|
-
import "./styles.css";
|
|
5
|
-
function PhoneInputCountryOptionsContainer(props) {
|
|
6
|
-
const { children, isOpen, onSearch, search, placeholder } = props;
|
|
7
|
-
const containerRef = useRef(null);
|
|
8
|
-
const [position, setPosition] = useState("bottom");
|
|
9
|
-
function handleSearch(e) {
|
|
10
|
-
onSearch(e.target.value);
|
|
11
|
-
}
|
|
12
|
-
useScrollLock(isOpen);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
if (!isOpen)
|
|
15
|
-
return;
|
|
16
|
-
const checkContainerPosition = () => {
|
|
17
|
-
if (!containerRef.current)
|
|
18
|
-
return;
|
|
19
|
-
const parentElement = containerRef.current.parentElement;
|
|
20
|
-
if (!parentElement)
|
|
21
|
-
return;
|
|
22
|
-
const parentRect = parentElement.getBoundingClientRect();
|
|
23
|
-
const viewportHeight = window.innerHeight;
|
|
24
|
-
const estimatedContainerHeight = 300;
|
|
25
|
-
const spaceBelow = viewportHeight - parentRect.bottom;
|
|
26
|
-
if (spaceBelow < estimatedContainerHeight &&
|
|
27
|
-
parentRect.top > estimatedContainerHeight) {
|
|
28
|
-
setPosition("top");
|
|
29
|
-
}
|
|
30
|
-
else {
|
|
31
|
-
setPosition("bottom");
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
checkContainerPosition();
|
|
35
|
-
}, [isOpen]);
|
|
36
|
-
if (!isOpen)
|
|
37
|
-
return _jsx(_Fragment, {});
|
|
38
|
-
return (_jsxs("div", { className: `arkynPhoneInputCountryOptionsContainer ${position}`, ref: containerRef, children: [_jsx("input", { type: "search", name: "search-select", className: "arkynPhoneInputCountryOptionsContainerSearchSelect", value: search, id: "input-search", placeholder: placeholder, onChange: handleSearch }), children] }));
|
|
39
|
-
}
|
|
40
|
-
export { PhoneInputCountryOptionsContainer };
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import "./styles.css";
|
|
2
|
-
type CountryType = {
|
|
3
|
-
name: string;
|
|
4
|
-
code: string;
|
|
5
|
-
iso: string;
|
|
6
|
-
prefix: null | string;
|
|
7
|
-
flag: string;
|
|
8
|
-
mask: string;
|
|
9
|
-
};
|
|
10
|
-
type PhoneInputCountrySelectorProps = {
|
|
11
|
-
size: "md" | "lg";
|
|
12
|
-
currentCountry: CountryType;
|
|
13
|
-
onClick: () => void;
|
|
14
|
-
};
|
|
15
|
-
declare function PhoneInputCountrySelector(props: PhoneInputCountrySelectorProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export { PhoneInputCountrySelector };
|
|
17
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronDown } from "lucide-react";
|
|
3
|
-
import { Divider } from "../../divider";
|
|
4
|
-
import "./styles.css";
|
|
5
|
-
function PhoneInputCountrySelector(props) {
|
|
6
|
-
const { currentCountry, onClick } = props;
|
|
7
|
-
return (_jsxs("div", { className: "phoneInputSelectCountry", onClick: onClick, children: [_jsx("img", { className: "flag", src: currentCountry.flag, alt: currentCountry.name }), _jsx(ChevronDown, { className: "chevronDown", strokeWidth: 2.5 }), _jsx(Divider, { orientation: "vertical" })] }));
|
|
8
|
-
}
|
|
9
|
-
export { PhoneInputCountrySelector };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import "./style.css";
|
|
2
|
-
type CountryType = {
|
|
3
|
-
name: string;
|
|
4
|
-
code: string;
|
|
5
|
-
iso: string;
|
|
6
|
-
prefix: null | string;
|
|
7
|
-
flag: string;
|
|
8
|
-
mask: string;
|
|
9
|
-
};
|
|
10
|
-
type PhoneInputMaskProps = {
|
|
11
|
-
onFocus: () => void;
|
|
12
|
-
onBlur: () => void;
|
|
13
|
-
disabled: boolean;
|
|
14
|
-
size: "md" | "lg";
|
|
15
|
-
currentCountry: CountryType;
|
|
16
|
-
value: string;
|
|
17
|
-
onChange: (e: string) => void;
|
|
18
|
-
};
|
|
19
|
-
declare const PhoneInputMask: import("react").ForwardRefExoticComponent<PhoneInputMaskProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
20
|
-
export { PhoneInputMask };
|
|
21
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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,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;CAC/B,CAAC;AASF,QAAA,MAAM,cAAc,kHAyDnB,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { InputMask } from "@react-input/mask";
|
|
3
|
-
import { forwardRef, useEffect, useState, } from "react";
|
|
4
|
-
import { applyMask, clear, getMask, MAX_LENGTH, TYPES, } from "../../../utils/phoneInputUtilities";
|
|
5
|
-
import "./style.css";
|
|
6
|
-
const BaseInput = forwardRef((props, ref) => {
|
|
7
|
-
return _jsx("input", { ref: ref, ...props });
|
|
8
|
-
});
|
|
9
|
-
const PhoneInputMask = forwardRef((props, ref) => {
|
|
10
|
-
const { onFocus, onBlur, size, onChange, value, currentCountry, disabled } = props;
|
|
11
|
-
const [isMounted, setIsMounted] = useState(false);
|
|
12
|
-
useEffect(() => {
|
|
13
|
-
if (isMounted)
|
|
14
|
-
onChange(currentCountry.mask);
|
|
15
|
-
else
|
|
16
|
-
setIsMounted(true);
|
|
17
|
-
}, [currentCountry]);
|
|
18
|
-
const className = `phoneInputMask ${size}`;
|
|
19
|
-
function handleChange(event) {
|
|
20
|
-
let value = clear(event.target.value);
|
|
21
|
-
const mask = getMask(value);
|
|
22
|
-
let nextLength = value.length;
|
|
23
|
-
if (nextLength > MAX_LENGTH)
|
|
24
|
-
return;
|
|
25
|
-
value = applyMask(value, TYPES[mask]);
|
|
26
|
-
event.target.value = value;
|
|
27
|
-
onChange(value);
|
|
28
|
-
}
|
|
29
|
-
if (currentCountry.code === "+55") {
|
|
30
|
-
return (_jsx("input", { value: value, onChange: handleChange, className: className, onFocus: onFocus, onBlur: onBlur, disabled: disabled, ref: ref }));
|
|
31
|
-
}
|
|
32
|
-
return (_jsx(InputMask, { value: value, 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 }));
|
|
33
|
-
});
|
|
34
|
-
export { PhoneInputMask };
|