@panneau/fields 5.0.0-alpha.14 → 5.0.0-alpha.16

package/dist/shared/part.js

@@ -0,0 +1,64 @@
+import { getParentPath, useFieldsContext } from "./context.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/shared/part.tsx
+/**
+* A part of a value that a field edits itself (the postal code of an address, the URL of a link):
+* the field keeps its whole value, and the binding of the fields context gives each part the
+* errors of its own path, and marks it touched when it loses focus. Without a binding, the part
+* gets `errors` and `onBlur`.
+*/
+function BoundPart(t0) {
+	const $ = c(14);
+	const { field, path, errors, onBlur, render } = t0;
+	const { binding: Binding } = useFieldsContext();
+	if (Binding === null) {
+		let t1;
+		if ($[0] !== errors || $[1] !== onBlur || $[2] !== render) {
+			t1 = render({
+				...errors !== void 0 ? { errors } : {},
+				...onBlur !== void 0 ? { onBlur } : {}
+			});
+			$[0] = errors;
+			$[1] = onBlur;
+			$[2] = render;
+			$[3] = t1;
+		} else t1 = $[3];
+		return t1;
+	}
+	let t1;
+	if ($[4] !== path) {
+		t1 = getParentPath(path);
+		$[4] = path;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== render) {
+		t2 = (bound) => render({
+			...bound.errors !== void 0 ? { errors: bound.errors } : {},
+			...bound.onBlur !== void 0 ? { onBlur: bound.onBlur } : {}
+		});
+		$[6] = render;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== Binding || $[9] !== field || $[10] !== path || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Binding, {
+			field,
+			path,
+			parentPath: t1,
+			render: t2
+		});
+		$[8] = Binding;
+		$[9] = field;
+		$[10] = path;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+}
+//#endregion
+export { BoundPart };
+
+//# sourceMappingURL=part.js.map

package/dist/shared/part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"part.js","names":["ReactNode","Field","getParentPath","useFieldsContext","BoundPartProps","errors","onBlur","PartBindingProps","field","path","render","bound","BoundPart","t0","$","_c","binding","Binding","t1","undefined","t2","t3","_c"],"sources":["../../src/shared/part.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { Field } from '@panneau/protocol';\n\nimport { getParentPath, useFieldsContext } from './context';\n\n/** What a part of a value gets from the binding of the fields context: its errors and its blur. */\nexport interface BoundPartProps {\n    errors?: readonly string[];\n    onBlur?: () => void;\n}\n\nexport interface PartBindingProps {\n    /** The part, as a field of the definition: the binding reads its errors by its path. */\n    field: Field;\n    /** Dot path of the part (`address.postalCode`). */\n    path: string;\n    /** Errors of the part without a binding. */\n    errors?: readonly string[];\n    /** Blur of the part without a binding. */\n    onBlur?: () => void;\n    render: (bound: BoundPartProps) => ReactNode;\n}\n\n/**\n * A part of a value that a field edits itself (the postal code of an address, the URL of a link):\n * the field keeps its whole value, and the binding of the fields context gives each part the\n * errors of its own path, and marks it touched when it loses focus. Without a binding, the part\n * gets `errors` and `onBlur`.\n */\nexport function BoundPart({ field, path, errors, onBlur, render }: PartBindingProps) {\n    const { binding: Binding } = useFieldsContext();\n    if (Binding === null) {\n        return render({\n            ...(errors !== undefined ? { errors } : {}),\n            ...(onBlur !== undefined ? { onBlur } : {}),\n        });\n    }\n    return (\n        <Binding\n            field={field}\n            path={path}\n            parentPath={getParentPath(path)}\n            render={(bound) =>\n                render({\n                    ...(bound.errors !== undefined ? { errors: bound.errors } : {}),\n                    ...(bound.onBlur !== undefined ? { onBlur: bound.onBlur } : {}),\n                })\n            }\n        />\n    );\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAOY,UAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAmB,MAAA,EAAAP,OAAAC,MAAAJ,QAAAC,QAAAI,WAAAG;CACtB,MAAA,EAAAG,SAAAC,YAA6Bd,iBAAiB;CAC9C,IAAIc,YAAY,MAAI;EAAA,IAAAC;EAAA,IAAAJ,EAAA,OAAAT,UAAAS,EAAA,OAAAR,UAAAQ,EAAA,OAAAJ,QAAA;GACTQ,KAAAR,OAAO;IAAA,GACNL,WAAWc,KAAAA,IAAX,EAAAd,OAAqC,IAArC,CAAqC;IAAC,GACtCC,WAAWa,KAAAA,IAAX,EAAAb,OAAqC,IAArC,CAAqC;GAC7C,CAAC;GAACQ,EAAA,KAAAT;GAAAS,EAAA,KAAAR;GAAAQ,EAAA,KAAAJ;GAAAI,EAAA,KAAAI;EAAA,OAAAA,KAAAJ,EAAA;EAAA,OAHKI;CAGL;CACL,IAAAA;CAAA,IAAAJ,EAAA,OAAAL,MAAA;EAKmBS,KAAAhB,cAAcO,IAAI;EAACK,EAAA,KAAAL;EAAAK,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAJ,QAAA;EACvBU,MAAAT,UACJD,OAAO;GAAA,GACCC,MAAKN,WAAYc,KAAAA,IAAjB,EAAAd,QAAuCM,MAAKN,OAAa,IAAzD,CAAyD;GAAC,GAC1DM,MAAKL,WAAYa,KAAAA,IAAjB,EAAAb,QAAuCK,MAAKL,OAAa,IAAzD,CAAyD;EACjE,CAAC;EAACQ,EAAA,KAAAJ;EAAAI,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,WAAAH,EAAA,OAAAN,SAAAM,EAAA,QAAAL,QAAAK,EAAA,QAAAI,MAAAJ,EAAA,QAAAM,IAAA;EARVC,KAAA,oBAAC,SAAD;GACWb;GACDC;GACM,YAAAS;GACJ,QAAAE;EAIF,CAAA;EAERN,EAAA,KAAAG;EAAAH,EAAA,KAAAN;EAAAM,EAAA,MAAAL;EAAAK,EAAA,MAAAI;EAAAJ,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAVFO;AAUE"}

package/dist/tel/TelField.css

@@ -0,0 +1,25 @@
+/* The extension, after the number, in the same box. */
+.panneau-tel-field-extension {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--panneau-space-1);
+    align-self: stretch;
+    padding-inline-start: var(--panneau-space-2);
+    border-inline-start: var(--panneau-border-width) solid var(--panneau-color-border-control);
+}
+
+.panneau-tel-field-extension-input {
+    width: 6ch;
+    min-width: 0;
+    padding: 0;
+    font: inherit;
+    color: var(--panneau-color-text);
+    background: transparent;
+    border: 0;
+    outline: none;
+}
+
+.panneau-tel-field-extension-input:read-only,
+.panneau-tel-field-extension-input:disabled {
+    cursor: inherit;
+}

package/dist/tel/TelField.d.ts

@@ -6,6 +6,11 @@ export interface TelFieldProps extends Omit<TextFieldProps, 'type' | 'inputMode'
      * gives `CA`).
      */
     country?: string | null;
+    /**
+     * Adds an input for the extension, after the number. The value is then the number with its
+     * extension after `;ext=`, as in a `tel:` URI: `+15145550199;ext=123`.
+     */
+    extension?: boolean;
 }
 /**
  * A phone number, in E.164 (`+15145550199`). The country of the number, its flag and its calling
@@ -15,8 +20,15 @@ export interface TelFieldProps extends Omit<TextFieldProps, 'type' | 'inputMode'
  * Until a number is complete, the value is the text as typed, which the `tel` rule refuses. A value
  * that isn't E.164, kept from before, shows as it is, and becomes E.164 when the field is left, if
  * it reads as a number of the chosen country.
+ *
+ * With `extension`, an input after the number takes the digits of an extension, kept after `;ext=`
+ * (`+15145550199;ext=123`). An extension typed or pasted after the number (`ext. 123`, `x123`,
+ * `poste 123`) moves to that input when the field is left.
+ */
+export declare function TelField({ value, onChange, onBlur, country: defaultCountry, extension: allowsExtension, suffix, disabled, readOnly, ...props }: TelFieldProps): import("react").JSX.Element;
+/**
+ * The `tel` type: `settings.country` is the country of a new number, and `settings.extension` adds
+ * an input for an extension.
  */
-export declare function TelField({ value, onChange, onBlur, country: defaultCountry, disabled, readOnly, ...props }: TelFieldProps): import("react").JSX.Element;
-/** The `tel` type: `settings.country` is the country of a new number. */
 export declare function TelFieldEntry(props: FieldEntryProps): import("react").JSX.Element;
 //# sourceMappingURL=TelField.d.ts.map

package/dist/tel/TelField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TelField.d.ts","sourceRoot":"","sources":["../../src/tel/TelField.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AASnE,MAAM,WAAW,aAAc,SAAQ,IAAI,CACvC,cAAc,EACd,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAC3D;IACG;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAaD;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EAAE,cAAc,EACvB,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,aAAa,+BAwFf;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,+BAUnD"}
+{"version":3,"file":"TelField.d.ts","sourceRoot":"","sources":["../../src/tel/TelField.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAcnE,MAAM,WAAW,aAAc,SAAQ,IAAI,CACvC,cAAc,EACd,MAAM,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAC3D;IACG;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAgBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,eAAuB,EAClC,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,aAAa,+BAgJf;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,eAAe,+BAYnD"}

package/dist/tel/TelField.js

@@ -1,13 +1,16 @@
-import { getFieldProps, getSetting, isString } from "../shared/entry.js";
+import { getFieldProps, getSetting, isBoolean, isString } from "../shared/entry.js";
 import { messages } from "../shared/messages.js";
-import { TextField } from "../text/TextField.js";
 import { getCountryFlag, getCountryName, getLocaleCountry } from "../country/countries.js";
-import { formatPhoneInput, getCallingCode, getPhoneCountries, parsePhone, readPhone } from "./phone.js";
+import { TextField } from "../text/TextField.js";
+import TelField_module_default from "./TelField.module.js";
+import { formatPhoneInput, getCallingCode, getPhoneCountries, joinExtension, parsePhone, readExtension, readPhone, splitExtension } from "./phone.js";
 import { c } from "react/compiler-runtime";
 import { useState } from "react";
 import { Select, usePanneauIntl } from "@panneau/ui";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/tel/TelField.tsx
+/** Characters that aren't part of a number: an extension typed after it (`x123`, `ext. 123`). */
+var NOT_A_NUMBER = /[^\d\s()+.-]/;
 /** The text shown for a value: a number of the country in its format, any other as it is. */
 function display(value, country) {
 	const number = parsePhone(value);
@@ -22,18 +25,24 @@ function display(value, country) {
 * Until a number is complete, the value is the text as typed, which the `tel` rule refuses. A value
 * that isn't E.164, kept from before, shows as it is, and becomes E.164 when the field is left, if
 * it reads as a number of the chosen country.
+*
+* With `extension`, an input after the number takes the digits of an extension, kept after `;ext=`
+* (`+15145550199;ext=123`). An extension typed or pasted after the number (`ext. 123`, `x123`,
+* `poste 123`) moves to that input when the field is left.
 */
 function TelField(t0) {
-	const $ = c(69);
+	const $ = c(88);
 	let defaultCountry;
 	let disabled;
 	let onBlur;
 	let onChange;
 	let props;
 	let readOnly;
+	let suffix;
+	let t1;
 	let value;
 	if ($[0] !== t0) {
-		({value, onChange, onBlur, country: defaultCountry, disabled, readOnly, ...props} = t0);
+		({value, onChange, onBlur, country: defaultCountry, extension: t1, suffix, disabled, readOnly, ...props} = t0);
 		$[0] = t0;
 		$[1] = defaultCountry;
 		$[2] = disabled;
@@ -41,7 +50,9 @@ function TelField(t0) {
 		$[4] = onChange;
 		$[5] = props;
 		$[6] = readOnly;
-		$[7] = value;
+		$[7] = suffix;
+		$[8] = t1;
+		$[9] = value;
 	} else {
 		defaultCountry = $[1];
 		disabled = $[2];
@@ -49,47 +60,63 @@ function TelField(t0) {
 		onChange = $[4];
 		props = $[5];
 		readOnly = $[6];
-		value = $[7];
+		suffix = $[7];
+		t1 = $[8];
+		value = $[9];
 	}
+	const allowsExtension = t1 === void 0 ? false : t1;
 	const intl = usePanneauIntl();
 	const [chosen, setChosen] = useState(null);
 	const [draft, setDraft] = useState(null);
-	let t1;
-	if ($[8] !== value) {
-		t1 = parsePhone(value);
-		$[8] = value;
-		$[9] = t1;
-	} else t1 = $[9];
-	const number = t1;
+	let country;
+	let number;
+	let parts;
 	let t2;
-	if ($[10] !== chosen || $[11] !== defaultCountry || $[12] !== intl.locale || $[13] !== number?.country) {
-		t2 = number?.country ?? chosen ?? defaultCountry ?? getLocaleCountry(intl.locale) ?? null;
-		$[10] = chosen;
-		$[11] = defaultCountry;
-		$[12] = intl.locale;
-		$[13] = number?.country;
-		$[14] = t2;
-	} else t2 = $[14];
-	const country = t2;
+	if ($[10] !== allowsExtension || $[11] !== chosen || $[12] !== defaultCountry || $[13] !== draft || $[14] !== intl.locale || $[15] !== value) {
+		parts = allowsExtension ? splitExtension(value) : {
+			number: value ?? null,
+			extension: null
+		};
+		number = parsePhone(parts.number);
+		country = number?.country ?? chosen ?? defaultCountry ?? getLocaleCountry(intl.locale) ?? null;
+		t2 = draft ?? display(parts.number, country);
+		$[10] = allowsExtension;
+		$[11] = chosen;
+		$[12] = defaultCountry;
+		$[13] = draft;
+		$[14] = intl.locale;
+		$[15] = value;
+		$[16] = country;
+		$[17] = number;
+		$[18] = parts;
+		$[19] = t2;
+	} else {
+		country = $[16];
+		number = $[17];
+		parts = $[18];
+		t2 = $[19];
+	}
+	const shown = t2;
 	let t3;
-	if ($[15] !== country || $[16] !== draft || $[17] !== value) {
-		t3 = draft ?? display(value, country);
-		$[15] = country;
-		$[16] = draft;
-		$[17] = value;
-		$[18] = t3;
-	} else t3 = $[18];
-	const shown = t3;
-	let t4;
-	if ($[19] !== onChange || $[20] !== value) {
-		t4 = (next) => {
+	if ($[20] !== onChange || $[21] !== value) {
+		t3 = (next) => {
 			if (next !== (value ?? null)) onChange?.(next);
 		};
-		$[19] = onChange;
-		$[20] = value;
-		$[21] = t4;
-	} else t4 = $[21];
-	const emit = t4;
+		$[20] = onChange;
+		$[21] = value;
+		$[22] = t3;
+	} else t3 = $[22];
+	const emit = t3;
+	let t4;
+	if ($[23] !== emit || $[24] !== parts) {
+		t4 = (next_0, extension) => {
+			emit(joinExtension(next_0, extension === void 0 ? parts.extension : extension));
+		};
+		$[23] = emit;
+		$[24] = parts;
+		$[25] = t4;
+	} else t4 = $[25];
+	const emitNumber = t4;
 	let T0;
 	let t10;
 	let t5;
@@ -97,64 +124,64 @@ function TelField(t0) {
 	let t7;
 	let t8;
 	let t9;
-	if ($[22] !== disabled || $[23] !== intl || $[24] !== readOnly) {
+	if ($[26] !== disabled || $[27] !== intl || $[28] !== readOnly) {
 		const collator = new Intl.Collator(intl.locale);
 		let t11;
-		if ($[32] !== intl.locale) {
+		if ($[36] !== intl.locale) {
 			t11 = (code) => ({
 				code,
 				name: getCountryName(code, intl.locale)
 			});
-			$[32] = intl.locale;
-			$[33] = t11;
-		} else t11 = $[33];
+			$[36] = intl.locale;
+			$[37] = t11;
+		} else t11 = $[37];
 		const countries = getPhoneCountries().map(t11).sort((a, b) => collator.compare(a.name, b.name));
 		T0 = Select;
-		if ($[34] !== intl) {
+		if ($[38] !== intl) {
 			t5 = intl.formatMessage(messages.telCountry);
-			$[34] = intl;
-			$[35] = t5;
-		} else t5 = $[35];
+			$[38] = intl;
+			$[39] = t5;
+		} else t5 = $[39];
 		t6 = "bare";
 		t7 = true;
 		t8 = disabled === true || readOnly === true;
 		t9 = "+";
 		t10 = countries.map(_temp);
-		$[22] = disabled;
-		$[23] = intl;
-		$[24] = readOnly;
-		$[25] = T0;
-		$[26] = t10;
-		$[27] = t5;
-		$[28] = t6;
-		$[29] = t7;
-		$[30] = t8;
-		$[31] = t9;
+		$[26] = disabled;
+		$[27] = intl;
+		$[28] = readOnly;
+		$[29] = T0;
+		$[30] = t10;
+		$[31] = t5;
+		$[32] = t6;
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t9;
 	} else {
-		T0 = $[25];
-		t10 = $[26];
-		t5 = $[27];
-		t6 = $[28];
-		t7 = $[29];
-		t8 = $[30];
-		t9 = $[31];
+		T0 = $[29];
+		t10 = $[30];
+		t5 = $[31];
+		t6 = $[32];
+		t7 = $[33];
+		t8 = $[34];
+		t9 = $[35];
 	}
 	let t11;
-	if ($[36] !== emit || $[37] !== number?.nationalNumber || $[38] !== shown) {
-		t11 = (next_0) => {
-			const code_1 = next_0 !== null ? String(next_0) : null;
+	if ($[40] !== emitNumber || $[41] !== number?.nationalNumber || $[42] !== shown) {
+		t11 = (next_1) => {
+			const code_1 = next_1 !== null ? String(next_1) : null;
 			setChosen(code_1);
 			setDraft(null);
 			const digits = number?.nationalNumber ?? shown.replace(/^\+/, "");
-			emit(readPhone(digits, code_1).value);
+			emitNumber(readPhone(digits, code_1).value);
 		};
-		$[36] = emit;
-		$[37] = number?.nationalNumber;
-		$[38] = shown;
-		$[39] = t11;
-	} else t11 = $[39];
+		$[40] = emitNumber;
+		$[41] = number?.nationalNumber;
+		$[42] = shown;
+		$[43] = t11;
+	} else t11 = $[43];
 	let t12;
-	if ($[40] !== T0 || $[41] !== country || $[42] !== t10 || $[43] !== t11 || $[44] !== t5 || $[45] !== t6 || $[46] !== t7 || $[47] !== t8 || $[48] !== t9) {
+	if ($[44] !== T0 || $[45] !== country || $[46] !== t10 || $[47] !== t11 || $[48] !== t5 || $[49] !== t6 || $[50] !== t7 || $[51] !== t8 || $[52] !== t9) {
 		t12 = /* @__PURE__ */ jsx(T0, {
 			"aria-label": t5,
 			appearance: t6,
@@ -166,51 +193,105 @@ function TelField(t0) {
 			renderValue: _temp2,
 			onChange: t11
 		});
-		$[40] = T0;
-		$[41] = country;
-		$[42] = t10;
-		$[43] = t11;
-		$[44] = t5;
-		$[45] = t6;
-		$[46] = t7;
-		$[47] = t8;
-		$[48] = t9;
-		$[49] = t12;
-	} else t12 = $[49];
+		$[44] = T0;
+		$[45] = country;
+		$[46] = t10;
+		$[47] = t11;
+		$[48] = t5;
+		$[49] = t6;
+		$[50] = t7;
+		$[51] = t8;
+		$[52] = t9;
+		$[53] = t12;
+	} else t12 = $[53];
 	const picker = t12;
 	let t13;
-	if ($[50] !== country || $[51] !== emit || $[52] !== shown) {
-		t13 = (text) => {
+	if ($[54] !== allowsExtension || $[55] !== disabled || $[56] !== emitNumber || $[57] !== intl || $[58] !== onBlur || $[59] !== parts || $[60] !== props || $[61] !== readOnly) {
+		t13 = allowsExtension ? /* @__PURE__ */ jsxs("span", {
+			className: TelField_module_default.extension,
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: intl.formatMessage(messages.telExtensionShort)
+			}), /* @__PURE__ */ jsx("input", {
+				className: TelField_module_default.extensionInput,
+				type: "text",
+				inputMode: "numeric",
+				autoComplete: "tel-extension",
+				"aria-label": intl.formatMessage(messages.telExtension),
+				"aria-invalid": (props.errors?.length ?? 0) > 0 || void 0,
+				maxLength: 10,
+				value: parts.extension ?? "",
+				disabled,
+				readOnly,
+				onChange: (event) => {
+					const digits_0 = event.target.value.replace(/\D/g, "").slice(0, 10);
+					emitNumber(parts.number, digits_0 === "" ? null : digits_0);
+				},
+				onBlur: () => onBlur?.()
+			})]
+		}) : null;
+		$[54] = allowsExtension;
+		$[55] = disabled;
+		$[56] = emitNumber;
+		$[57] = intl;
+		$[58] = onBlur;
+		$[59] = parts;
+		$[60] = props;
+		$[61] = readOnly;
+		$[62] = t13;
+	} else t13 = $[62];
+	const extensionInput = t13;
+	let t14;
+	if ($[63] !== extensionInput || $[64] !== suffix) {
+		t14 = extensionInput !== null || suffix !== void 0 ? { suffix: /* @__PURE__ */ jsxs(Fragment, { children: [extensionInput, suffix] }) } : {};
+		$[63] = extensionInput;
+		$[64] = suffix;
+		$[65] = t14;
+	} else t14 = $[65];
+	let t15;
+	if ($[66] !== allowsExtension || $[67] !== country || $[68] !== emitNumber || $[69] !== shown) {
+		t15 = (text) => {
 			const typed = text ?? "";
-			const next_1 = typed.length > shown.length && typed.startsWith(shown) ? formatPhoneInput(typed, country) : typed;
-			setDraft(next_1);
-			const read = readPhone(next_1, country);
+			const typedExtension = allowsExtension && NOT_A_NUMBER.test(typed);
+			const added = typed.startsWith(shown) ? typed.slice(shown.length) : "";
+			const next_2 = !typedExtension && added !== "" && !(allowsExtension && added.trim() === "") ? formatPhoneInput(typed, country) : typed;
+			setDraft(next_2);
+			if (typedExtension) {
+				emitNumber(next_2.trim());
+				return;
+			}
+			const read = readPhone(next_2, country);
 			if (read.country !== null && read.country !== country) setChosen(read.country);
-			emit(read.value);
+			emitNumber(read.value);
 		};
-		$[50] = country;
-		$[51] = emit;
-		$[52] = shown;
-		$[53] = t13;
-	} else t13 = $[53];
-	let t14;
-	if ($[54] !== country || $[55] !== disabled || $[56] !== emit || $[57] !== onBlur || $[58] !== readOnly || $[59] !== value) {
-		t14 = () => {
+		$[66] = allowsExtension;
+		$[67] = country;
+		$[68] = emitNumber;
+		$[69] = shown;
+		$[70] = t15;
+	} else t15 = $[70];
+	let t16;
+	if ($[71] !== allowsExtension || $[72] !== country || $[73] !== disabled || $[74] !== emitNumber || $[75] !== onBlur || $[76] !== parts || $[77] !== readOnly) {
+		t16 = () => {
 			setDraft(null);
-			if (readOnly !== true && disabled !== true && isString(value) && parsePhone(value) === null) emit(readPhone(value, country).value);
+			if (readOnly !== true && disabled !== true && isString(parts.number) && parsePhone(parts.number) === null) {
+				const typed_0 = allowsExtension ? readExtension(parts.number) : null;
+				emitNumber(readPhone(typed_0?.number ?? parts.number, country).value, typed_0?.extension ?? parts.extension);
+			}
 			onBlur?.();
 		};
-		$[54] = country;
-		$[55] = disabled;
-		$[56] = emit;
-		$[57] = onBlur;
-		$[58] = readOnly;
-		$[59] = value;
-		$[60] = t14;
-	} else t14 = $[60];
-	let t15;
-	if ($[61] !== disabled || $[62] !== picker || $[63] !== props || $[64] !== readOnly || $[65] !== shown || $[66] !== t13 || $[67] !== t14) {
-		t15 = /* @__PURE__ */ jsx(TextField, {
+		$[71] = allowsExtension;
+		$[72] = country;
+		$[73] = disabled;
+		$[74] = emitNumber;
+		$[75] = onBlur;
+		$[76] = parts;
+		$[77] = readOnly;
+		$[78] = t16;
+	} else t16 = $[78];
+	let t17;
+	if ($[79] !== disabled || $[80] !== picker || $[81] !== props || $[82] !== readOnly || $[83] !== shown || $[84] !== t14 || $[85] !== t15 || $[86] !== t16) {
+		t17 = /* @__PURE__ */ jsx(TextField, {
 			autoComplete: "tel",
 			...props,
 			disabled,
@@ -218,22 +299,27 @@ function TelField(t0) {
 			type: "tel",
 			inputMode: "tel",
 			prefix: picker,
+			...t14,
 			value: shown,
-			onChange: t13,
-			onBlur: t14
+			onChange: t15,
+			onBlur: t16
 		});
-		$[61] = disabled;
-		$[62] = picker;
-		$[63] = props;
-		$[64] = readOnly;
-		$[65] = shown;
-		$[66] = t13;
-		$[67] = t14;
-		$[68] = t15;
-	} else t15 = $[68];
-	return t15;
+		$[79] = disabled;
+		$[80] = picker;
+		$[81] = props;
+		$[82] = readOnly;
+		$[83] = shown;
+		$[84] = t14;
+		$[85] = t15;
+		$[86] = t16;
+		$[87] = t17;
+	} else t17 = $[87];
+	return t17;
 }
-/** The `tel` type: `settings.country` is the country of a new number. */
+/**
+* The `tel` type: `settings.country` is the country of a new number, and `settings.extension` adds
+* an input for an extension.
+*/
 function _temp2(option) {
 	return `+${getCallingCode(String(option.value)) ?? ""}`;
 }
@@ -246,7 +332,7 @@ function _temp(t0) {
 	};
 }
 function TelFieldEntry(props) {
-	const $ = c(11);
+	const $ = c(16);
 	let t0;
 	if ($[0] !== props.field) {
 		t0 = getSetting(props.field, "country", isString);
@@ -255,33 +341,48 @@ function TelFieldEntry(props) {
 	} else t0 = $[1];
 	const country = t0;
 	let t1;
-	if ($[2] !== props) {
-		t1 = getFieldProps(props);
-		$[2] = props;
+	if ($[2] !== props.field) {
+		t1 = getSetting(props.field, "extension", isBoolean);
+		$[2] = props.field;
 		$[3] = t1;
 	} else t1 = $[3];
+	const extension = t1 === true;
 	let t2;
-	if ($[4] !== country) {
-		t2 = country !== void 0 ? { country } : {};
-		$[4] = country;
+	if ($[4] !== props) {
+		t2 = getFieldProps(props);
+		$[4] = props;
 		$[5] = t2;
 	} else t2 = $[5];
-	const t3 = isString(props.value) ? props.value : null;
+	let t3;
+	if ($[6] !== country) {
+		t3 = country !== void 0 ? { country } : {};
+		$[6] = country;
+		$[7] = t3;
+	} else t3 = $[7];
 	let t4;
-	if ($[6] !== props.onChange || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
-		t4 = /* @__PURE__ */ jsx(TelField, {
-			...t1,
+	if ($[8] !== extension) {
+		t4 = extension ? { extension } : {};
+		$[8] = extension;
+		$[9] = t4;
+	} else t4 = $[9];
+	const t5 = isString(props.value) ? props.value : null;
+	let t6;
+	if ($[10] !== props.onChange || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 || $[14] !== t5) {
+		t6 = /* @__PURE__ */ jsx(TelField, {
 			...t2,
-			value: t3,
+			...t3,
+			...t4,
+			value: t5,
 			onChange: props.onChange
 		});
-		$[6] = props.onChange;
-		$[7] = t1;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
+		$[10] = props.onChange;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+		$[14] = t5;
+		$[15] = t6;
+	} else t6 = $[15];
+	return t6;
 }
 //#endregion
 export { TelField, TelFieldEntry };