refactor: improve PhoneInput digit normalization and update validation to trigger on blur

libs/ui/src/lib/input/PhoneInput.tsx

@@ -46,6 +46,8 @@ export interface PhoneInputProps {
   /** E.164 (`+14155552671`), or '' when empty. */
   value: string;
   onChange: (value: string) => void;
+  /** Fired when the number box loses focus — wire to the form's `trigger`. */
+  onBlur?: () => void;
   label?: React.ReactNode;
   placeholder?: string;
   description?: React.ReactNode;
@@ -69,6 +71,7 @@ export interface PhoneInputProps {
 export function PhoneInput({
   value,
   onChange,
+  onBlur,
   label,
   placeholder,
   description,
@@ -119,8 +122,12 @@ export function PhoneInput({
   }
 
   function applyDigits(digits: string, forCountry: CountryCode) {
-    setNational(new AsYouType(forCountry).input(digits));
-    push(toE164(digits, forCountry));
+    // Once the digits parse, show the true national number: someone who
+    // types a trunk prefix (0911111111) or the country code (251911111111)
+    // shouldn't end up with it doubled beside the "+251" selector.
+    const parsed = parsePhoneNumberFromString(digits, forCountry);
+    setNational(new AsYouType(forCountry).input(parsed?.nationalNumber ?? digits));
+    push(parsed?.number ?? toE164(digits, forCountry));
   }
 
   function handleText(text: string) {
@@ -162,6 +169,7 @@ export function PhoneInput({
       placeholder={placeholder}
       value={national}
       onChange={(e) => handleText(e.currentTarget.value)}
+      onBlur={onBlur}
       leftSectionWidth={92}
       leftSectionPointerEvents={disabled || readOnly ? 'none' : 'all'}
       leftSection={