svelte-tel-input 4.0.0-next.1 → 4.0.0-next.2

package/dist/components/input/TelInput.svelte

@@ -103,11 +103,10 @@
 		}
 	});
 
-	/**
-	 * Compute the initial formatted display value synchronously.
-	 * Runs on both server and client at initialization time, so SSR renders the
-	 * formatted number and the client's first render matches — no hydration mismatch.
-	 */
+	// Compute the initial formatted display value synchronously.
+	// Runs on both server and client at initialization time, so SSR renders the
+	// formatted number and the client's first render matches — no hydration mismatch.
+
 	const computeInitialDisplayValue = (): string => {
 		if (!value) return '';
 		let effectiveCountryIso2: CountryCode | null = null;
@@ -139,18 +138,16 @@
 		if (prevCountry === undefined) prevCountry = country;
 	});
 
-	/**
-	 * Shadow trackers — record every value this component writes internally so the
-	 * external-change watchers below can distinguish "we set it" vs "parent set it".
-	 * Plain let (not $state) because they are only ever read inside untrack(), never
-	 * as reactive dependencies.
-	 * Initialized to the incoming prop values so the first render never false-fires.
-	 */
+	//Shadow trackers — record every value this component writes internally so the
+	//external-change watchers below can distinguish "we set it" vs "parent set it".
+	//Plain let (not $state) because they are only ever read inside untrack(), never
+	//as reactive dependencies.
+	//Initialized to the incoming prop values so the first render never false-fires.
 	let _lastWrittenValue: string = value;
 	let _lastWrittenCountry: CountryCode | null | undefined = untrack(() => country);
 	// let isInitialized = $state(false);
 
-	/** Merge options into default opts, to be able to set just one config option. */
+	// Merge options into default opts, to be able to set just one config option.
 	const combinedOptions = $derived({
 		...defaultOptions,
 		...options
@@ -378,11 +375,9 @@
 		});
 	});
 
-	/**
-	 * Detect externally driven value changes (e.g. parent sets bind:value, or resets to null).
-	 * The shadow `_lastWrittenValue` is stamped on every internal write inside
-	 * handleParsePhoneNumber, so any difference here means the parent changed it.
-	 */
+	//Detect externally driven value changes (e.g. parent sets bind:value, or resets to null).
+	//The shadow `_lastWrittenValue` is stamped on every internal write inside
+	//handleParsePhoneNumber, so any difference here means the parent changed it.
 	$effect(() => {
 		const currentValue = value;
 		untrack(() => {
@@ -392,11 +387,9 @@
 		});
 	});
 
-	/**
-	 * Detect externally driven country changes (e.g. parent's <select bind:value={country}>).
-	 * Stamps `_lastWrittenCountry` eagerly so the watcher doesn't re-fire when
-	 * handleParsePhoneNumber later writes country through countryUpdater.
-	 */
+	// Detect externally driven country changes (e.g. parent's <select bind:value={country}>).
+	// Stamps `_lastWrittenCountry` eagerly so the watcher doesn't re-fire when
+	// handleParsePhoneNumber later writes country through countryUpdater.
 	$effect(() => {
 		const currentCountry = country;
 		untrack(() => {
@@ -425,6 +418,13 @@
 		onLoad?.();
 	});
 
+	/**
+	 * Resets the input value and validation state.
+	 *
+	 * @param {Object} [options] - Optional settings.
+	 * @param {boolean} [options.country=false] - If true, resets the country to null; otherwise, resets to defaultCountry.
+	 * @returns {void}
+	 */
 	const reset = ({ country: resetCountry = false }: { country?: boolean } = {}) => {
 		const targetCountry = resetCountry ? null : (defaultCountry ?? null);
 		applyValidity(true, false, targetCountry);
@@ -438,6 +438,11 @@
 		onValueChange?.('', null);
 	};
 
+	/**
+	 * Checks the validity of the current input value and updates validation state.
+	 *
+	 * @returns {{ valid: boolean; error: ValidationError }} - The validity status and error type.
+	 */
 	const checkValidity = (): { valid: boolean; error: ValidationError } => {
 		if (inputValue === '') {
 			applyValidity(true, false, country);

package/dist/types/index.d.ts

@@ -99,6 +99,9 @@ export interface TelInputOptions {
 }
 
 export interface Props extends HTMLInputAttributes {
+	/**
+	 * Autocomplete attribute for autofill hints (e.g. 'tel', 'tel-national').
+	 */
 	autocomplete?: AutoFill | null;
 	/** You can set the classes of the input field*/
 	class?: string;
@@ -135,10 +138,31 @@ export interface Props extends HTMLInputAttributes {
 	options?: TelInputOptions;
 	/** Binding to the underlying `<input>` element */
 	el?: HTMLInputElement | undefined;
+	/**
+	 * Callback fired when the country changes (auto-detected or user-selected).
+	 * @param newCountry The new country code or null.
+	 */
 	onCountryChange?: (newCountry: CountryCode | null) => void;
+	/**
+	 * Callback fired when validity changes.
+	 * @param newValidity The new validity state.
+	 * @param error The validation error type.
+	 */
 	onValidityChange?: (newValidity: boolean, error: ValidationError) => void;
+	/**
+	 * Callback fired when the value or details change.
+	 * @param newValue The new E164 value.
+	 * @param newDetails The new detailed value object.
+	 */
 	onValueChange?: (newValue: string, newDetails: Readonly<Partial<DetailedValue> | null>) => void;
+	/**
+	 * Callback fired on parse or validation errors.
+	 * @param error The error message.
+	 */
 	onError?: (error: string) => void;
+	/**
+	 * Callback fired after component initialization.
+	 */
 	onLoad?: () => void;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svelte-tel-input",
   "description": "svelte-tel-input",
-  "version": "4.0.0-next.1",
+  "version": "4.0.0-next.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gyurielf/svelte-tel-input.git"
@@ -47,7 +47,7 @@
     "micromatch": "^4.0.8",
     "postcss": "^8.5.8",
     "publint": "^0.3.18",
-    "svelte": "^5.53.13",
+    "svelte": "^5.54.0",
     "svelte-check": "^4.4.5",
     "svelte2tsx": "^0.7.52",
     "tailwindcss": "^4.2.1",