@scripso-homepad/ui 0.4.39 → 0.4.40

package/dist/index.d.cts

@@ -113,7 +113,16 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, height, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, height, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, value, placeholder, ...props }: PhoneInputProps): react.JSX.Element;
+
+declare const DEFAULT_PHONE_COUNTRY_CODE: string;
+declare function getPhoneDigits(value: string): string;
+/** Armenia mobile display while typing: (91) 44-55-66 */
+declare function formatArmenianNationalNumber(digits: string): string;
+declare function formatNationalPhoneDisplay(digits: string, countryCode?: string): string;
+declare function sanitizeNationalPhoneDigits(value: string, countryCode?: string): string;
+/** Placeholder mask shown for Armenia national numbers. */
+declare const ARMENIAN_PHONE_PLACEHOLDER = "(00) 00-00-00";
 
 type Country = {
     code: string;
@@ -567,4 +576,4 @@ declare const shadows: {
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, announcementStatusBadge, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };
+export { ARMENIAN_PHONE_PLACEHOLDER, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DEFAULT_PHONE_COUNTRY_CODE, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, announcementStatusBadge, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatArmenianNationalNumber, formatLocalizedCalendarMonthYear, formatNationalPhoneDisplay, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, getPhoneDigits, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, sanitizeNationalPhoneDigits, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.d.ts

@@ -113,7 +113,16 @@ interface PhoneInputProps extends Omit<TextInputProps, "style"> {
     errorClassName?: string;
     hintClassName?: string;
 }
-declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, height, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, ...props }: PhoneInputProps): react.JSX.Element;
+declare function PhoneInput({ label, countryCode, onCountryCodeChange, error, hint, height, containerStyle, style, className, labelClassName, labelStyles, inputClassName, errorClassName, hintClassName, editable, onFocus, onBlur, onChangeText, value, placeholder, ...props }: PhoneInputProps): react.JSX.Element;
+
+declare const DEFAULT_PHONE_COUNTRY_CODE: string;
+declare function getPhoneDigits(value: string): string;
+/** Armenia mobile display while typing: (91) 44-55-66 */
+declare function formatArmenianNationalNumber(digits: string): string;
+declare function formatNationalPhoneDisplay(digits: string, countryCode?: string): string;
+declare function sanitizeNationalPhoneDigits(value: string, countryCode?: string): string;
+/** Placeholder mask shown for Armenia national numbers. */
+declare const ARMENIAN_PHONE_PLACEHOLDER = "(00) 00-00-00";
 
 type Country = {
     code: string;
@@ -567,4 +576,4 @@ declare const shadows: {
     };
 };
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, announcementStatusBadge, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, shadows, spacing, stormGray, typographyScale, useCalendarLocale };
+export { ARMENIAN_PHONE_PLACEHOLDER, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarLabels, type CalendarLocale, CalendarLocaleProvider, type CalendarLocaleProviderProps, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, type CalendarTranslationKey$1 as CalendarTranslationKey, type CalendarTranslations, type Country, CountryCodeSelector, type CountryCodeSelectorProps, CountryFlag, type CountryFlagProps, DEFAULT_PHONE_COUNTRY_CODE, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, type EmeraldGreenStep, Input, type InputProps, Label, type LabelProps, LockIcon, type MultipleSelectProps, type NavyStep, PhoneInput, type PhoneInputProps, type RubyRedStep, Select, type SelectOption, type SelectProps, type SingleSelectProps, type StormGrayStep, announcementStatusBadge, brand, buttonTypography, calendarTranslations, colors, countries, countryCodeToFlagEmoji, defaultCountry, emeraldGreen, findCountry, fontSize, fontWeight, fonts, formatArmenianNationalNumber, formatLocalizedCalendarMonthYear, formatNationalPhoneDisplay, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, getPhoneDigits, labelTypography, navy, radii, resolveCalendarLocale, resolveWeekdayLabels, rubyRed, sanitizeNationalPhoneDigits, shadows, spacing, stormGray, typographyScale, useCalendarLocale };

package/dist/index.js

@@ -1147,6 +1147,42 @@ var styles3 = StyleSheet.create({
     color: colors.slateBlue
   }
 });
+
+// src/utils/phoneFormat.ts
+var DEFAULT_PHONE_COUNTRY_CODE = defaultCountry.code;
+var AM_NATIONAL_MAX_DIGITS = 8;
+var MAX_NATIONAL_DIGITS = 15;
+function getPhoneDigits(value) {
+  return value.replace(/\D/g, "");
+}
+function formatArmenianNationalNumber(digits) {
+  const national = getPhoneDigits(digits).slice(0, AM_NATIONAL_MAX_DIGITS);
+  if (national.length === 0) {
+    return "";
+  }
+  if (national.length <= 2) {
+    return `(${national}`;
+  }
+  const head = national.slice(0, 2);
+  const rest = national.slice(2);
+  const groups = rest.match(/.{1,2}/g) ?? [];
+  return `(${head}) ${groups.join("-")}`;
+}
+function formatNationalPhoneDisplay(digits, countryCode = DEFAULT_PHONE_COUNTRY_CODE) {
+  const national = getPhoneDigits(digits).slice(0, MAX_NATIONAL_DIGITS);
+  if (countryCode === DEFAULT_PHONE_COUNTRY_CODE) {
+    return formatArmenianNationalNumber(national);
+  }
+  return national;
+}
+function sanitizeNationalPhoneDigits(value, countryCode = DEFAULT_PHONE_COUNTRY_CODE) {
+  const digits = getPhoneDigits(value);
+  if (countryCode === DEFAULT_PHONE_COUNTRY_CODE) {
+    return digits.slice(0, AM_NATIONAL_MAX_DIGITS);
+  }
+  return digits.slice(0, MAX_NATIONAL_DIGITS);
+}
+var ARMENIAN_PHONE_PLACEHOLDER = "(00) 00-00-00";
 var countryOutlineSlot = {
   borderRadius: radii.lg + INPUT_OUTLINE_WIDTH,
   borderWidth: INPUT_OUTLINE_WIDTH,
@@ -1154,12 +1190,9 @@ var countryOutlineSlot = {
   padding: 0,
   backgroundColor: colors.transparent
 };
-function sanitizePhoneDigits(value) {
-  return value.replace(/\D/g, "");
-}
 function PhoneInput({
   label,
-  countryCode,
+  countryCode = defaultCountry.code,
   onCountryCodeChange,
   error,
   hint,
@@ -1176,6 +1209,8 @@ function PhoneInput({
   onFocus,
   onBlur,
   onChangeText,
+  value,
+  placeholder,
   ...props
 }) {
   const wrapperRef = useRef(null);
@@ -1192,6 +1227,9 @@ function PhoneInput({
     disabled: isDisabled
   });
   const phoneFieldStyles = getInputFieldStyles(phoneVisualState);
+  const resolvedCountryCode = countryCode || DEFAULT_PHONE_COUNTRY_CODE;
+  const displayValue = typeof value === "string" || typeof value === "number" ? formatNationalPhoneDisplay(String(value), resolvedCountryCode) : value;
+  const resolvedPlaceholder = placeholder ?? (resolvedCountryCode === DEFAULT_PHONE_COUNTRY_CODE ? ARMENIAN_PHONE_PLACEHOLDER : void 0);
   function handleFocus(event) {
     setFocused(true);
     onFocus?.(event);
@@ -1200,8 +1238,8 @@ function PhoneInput({
     setFocused(false);
     onBlur?.(event);
   }
-  function handleChangeText(value) {
-    onChangeText?.(sanitizePhoneDigits(value));
+  function handleChangeText(nextValue) {
+    onChangeText?.(sanitizeNationalPhoneDigits(nextValue, resolvedCountryCode));
   }
   const helperMessage = error ?? hint;
   return /* @__PURE__ */ jsxs(View, { ref: wrapperRef, style: [styles4.wrapper, containerStyle], children: [
@@ -1251,6 +1289,8 @@ function PhoneInput({
               onBlur: handleBlur,
               accessibilityState: { disabled: isDisabled },
               ...props,
+              value: displayValue,
+              placeholder: resolvedPlaceholder,
               onChangeText: handleChangeText
             }
           )
@@ -2662,6 +2702,6 @@ function LockIcon({
   ) });
 }
 
-export { Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, CountryFlag, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, countryCodeToFlagEmoji, defaultCountry, findCountry, formatLocalizedCalendarMonthYear, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, resolveCalendarLocale, resolveWeekdayLabels, useCalendarLocale };
+export { ARMENIAN_PHONE_PLACEHOLDER, Calendar, CalendarIcon, CalendarLocaleProvider, CountryCodeSelector, CountryFlag, DEFAULT_PHONE_COUNTRY_CODE, DatePicker, LockIcon, PhoneInput, Select, calendarTranslations, countries, countryCodeToFlagEmoji, defaultCountry, findCountry, formatArmenianNationalNumber, formatLocalizedCalendarMonthYear, formatNationalPhoneDisplay, getCalendarMonthLabels, getCalendarTranslations, getCountryFlagImageUri, getPhoneDigits, resolveCalendarLocale, resolveWeekdayLabels, sanitizeNationalPhoneDigits, useCalendarLocale };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map