@arkyn/components 3.0.2 → 3.0.3

package/dist/modules/components/phoneInput/index.js

@@ -1,97 +1,102 @@
 import { useForm as e } from "../../hooks/useForm.js";
 import { FieldTemplate as t } from "../../services/fieldTemplate.js";
-import { PhoneInputContainer as n } from "./phoneInputContainer/index.js";
-import { PhoneInputCountriesOverlay as ee } from "./phoneInputCountriesOverlay/index.js";
-import { PhoneInputCountryOption as te } from "./phoneInputCountryOption/index.js";
-import { PhoneInputCountryOptionsContainer as ne } from "./phoneInputCountryOptionsContainer/index.js";
-import { PhoneInputCountrySelector as r } from "./phoneInputCountrySelector/index.js";
-import { PhoneInputMask as i } from "./phoneInputMask/index.js";
-import { useId as a, useRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { findCountryMask as u, formatToPhone as d, removeNonNumeric as f } from "@arkyn/shared";
-import { countries as p } from "@arkyn/templates";
+import { TYPES as n, applyMask as r, getMask as i } from "../../utils/phoneInputUtilities.js";
+import { PhoneInputContainer as a } from "./phoneInputContainer/index.js";
+import { PhoneInputCountriesOverlay as o } from "./phoneInputCountriesOverlay/index.js";
+import { PhoneInputCountryOption as ee } from "./phoneInputCountryOption/index.js";
+import { PhoneInputCountryOptionsContainer as s } from "./phoneInputCountryOptionsContainer/index.js";
+import { PhoneInputCountrySelector as te } from "./phoneInputCountrySelector/index.js";
+import { PhoneInputMask as c } from "./phoneInputMask/index.js";
+import { useId as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { findCountryMask as ne, formatToPhone as re, removeNonNumeric as m } from "@arkyn/shared";
+import { countries as h } from "@arkyn/templates";
 //#region src/components/phoneInput/index.tsx
-function m(m) {
-	let { value: h, label: re, className: g = "", disabled: _ = !1, errorMessage: v, isLoading: y = !1, readOnly: b = !1, size: x = "md", defaultValue: S = "", variant: ie = "solid", showAsterisk: C, name: w, onChange: T, searchCountryPlaceholder: E = "Pesquisar país", notFoundCountryText: D = "Nenhum país encontrado", id: O, unShowFieldTemplate: k = !1, orientation: A = "vertical" } = m, j = p.find((e) => e.iso === "BR"), M = S ? d(S) : "", N = S ? u(S)[1] : j, [P, F] = s(!1), [I, L] = s(""), [R, z] = s(!1), [B, V] = s(M), H = h === void 0 ? B : h, [U, W] = s(N), { fieldErrors: G } = e(), K = o(null), q = a(), J = O || q, Y = v || G?.[w], ae = !!Y, X = _ || y, Z = o(null);
-	function oe() {
-		X || P || R || (F(!0), Z.current && Z.current.focus());
-	}
-	function se() {
-		z(!0), F(!0);
-	}
+function g(e, t) {
+	let a = m(e);
+	return t.code === "+55" ? r(a, n[i(a)]) : r(a, typeof t.mask == "string" ? t.mask : t.mask[0], "_");
+}
+function _(n) {
+	let { value: r, label: i, className: _ = "", disabled: v = !1, errorMessage: y, isLoading: b = !1, readOnly: x = !1, size: S = "md", defaultValue: C = "", variant: ie = "solid", showAsterisk: ae, name: w, onChange: oe, searchCountryPlaceholder: T = "Pesquisar país", notFoundCountryText: E = "Nenhum país encontrado", id: D, unShowFieldTemplate: O = !1, orientation: k = "vertical" } = n, A = h.find((e) => e.iso === "BR"), j = C ? re(C) : "", M = C ? ne(C)[1] : A, [N, P] = d(!1), [F, I] = d(""), [L, R] = d(!1), [z, B] = d(j), [V, H] = d(M), U = r === void 0 ? z : g(r, V), { fieldErrors: W } = e(), G = u(null), K = l(), q = D || K, J = y || W?.[w], se = !!J, Y = v || b, X = u(null);
 	function ce() {
-		z(!1), F(!1);
+		Y || N || L || (P(!0), X.current && X.current.focus());
+	}
+	function Z() {
+		R(!0), P(!0);
 	}
 	function le() {
-		F(!0);
+		R(!1), P(!1);
 	}
 	function ue() {
-		F(!1);
+		P(!0);
+	}
+	function de() {
+		P(!1);
 	}
 	function Q(e) {
-		return e.name.toLowerCase().includes(I.toLowerCase());
+		return e.name.toLowerCase().includes(F.toLowerCase());
 	}
 	function $(e) {
-		let t = U.code;
-		return t += f(e || H), t;
+		let t = V.code;
+		return t += m(e || U), t;
 	}
-	return /* @__PURE__ */ c(t, {
+	return /* @__PURE__ */ f(t, {
 		name: w,
-		label: re,
-		showAsterisk: C,
-		className: g,
-		errorMessage: Y,
-		unShowFieldTemplate: k,
-		orientation: A,
-		children: /* @__PURE__ */ l(n, {
-			disabled: X,
-			isError: ae,
-			isLoading: y,
-			isFocused: P,
-			readOnly: b,
-			size: x,
+		label: i,
+		showAsterisk: ae,
+		className: _,
+		errorMessage: J,
+		unShowFieldTemplate: O,
+		orientation: k,
+		children: /* @__PURE__ */ p(a, {
+			disabled: Y,
+			isError: se,
+			isLoading: b,
+			isFocused: N,
+			readOnly: x,
+			size: S,
 			variant: ie,
-			onFocus: oe,
+			onFocus: ce,
 			children: [
-				/* @__PURE__ */ c(r, {
-					currentCountry: U,
-					onClick: se,
-					size: x
+				/* @__PURE__ */ f(te, {
+					currentCountry: V,
+					onClick: Z,
+					size: S
 				}),
-				/* @__PURE__ */ l(ne, {
-					isOpen: X || b ? !1 : R,
-					search: I,
-					placeholder: E,
-					onSearch: L,
-					children: [p.filter((e) => Q(e)).map((e) => /* @__PURE__ */ c(te, {
+				/* @__PURE__ */ p(s, {
+					isOpen: Y || x ? !1 : L,
+					search: F,
+					placeholder: T,
+					onSearch: I,
+					children: [h.filter((e) => Q(e)).map((e) => /* @__PURE__ */ f(ee, {
 						country: e,
 						handleChangeValue: () => {
-							W(e), z(!1), V("");
+							H(e), R(!1), B("");
 						},
-						isActive: e.iso === U.iso,
-						size: x
-					}, e.iso)), p.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ c("p", { children: D })]
+						isActive: e.iso === V.iso,
+						size: S
+					}, e.iso)), h.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ f("p", { children: E })]
 				}),
-				/* @__PURE__ */ c(ee, {
-					isOpen: X || b ? !1 : R,
-					onClick: ce
+				/* @__PURE__ */ f(o, {
+					isOpen: Y || x ? !1 : L,
+					onClick: le
 				}),
-				/* @__PURE__ */ c(i, {
-					id: J,
-					ref: Z,
-					readonly: b,
-					currentCountry: U,
-					value: H,
-					disabled: X,
-					onBlur: ue,
-					onFocus: le,
-					size: x,
+				/* @__PURE__ */ f(c, {
+					id: q,
+					ref: X,
+					readonly: x,
+					currentCountry: V,
+					value: U,
+					disabled: Y,
+					onBlur: de,
+					onFocus: ue,
+					size: S,
 					onChange: (e) => {
-						V(e), T?.($(e));
+						B(e), oe?.($(e));
 					}
 				}),
-				/* @__PURE__ */ c("input", {
-					ref: K,
+				/* @__PURE__ */ f("input", {
+					ref: G,
 					type: "hidden",
 					name: w,
 					value: $()
@@ -101,6 +106,6 @@ function m(m) {
 	});
 }
 //#endregion
-export { m as PhoneInput };
+export { _ as PhoneInput };
 
 //# sourceMappingURL=index.js.map

package/dist/modules/components/phoneInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/phoneInput/index.tsx"],"sourcesContent":["import {\n\tfindCountryMask,\n\tformatToPhone,\n\tremoveNonNumeric,\n} from \"@arkyn/shared\";\nimport { countries } from \"@arkyn/templates\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { PhoneInputContainer } from \"./phoneInputContainer\";\nimport { PhoneInputCountriesOverlay } from \"./phoneInputCountriesOverlay\";\nimport { PhoneInputCountryOption } from \"./phoneInputCountryOption\";\nimport { PhoneInputCountryOptionsContainer } from \"./phoneInputCountryOptionsContainer\";\nimport { PhoneInputCountrySelector } from \"./phoneInputCountrySelector\";\nimport { PhoneInputMask } from \"./phoneInputMask\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputProps = {\n\t/** Optional HTML id for the visible phone text input. */\n\tid?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Validation error message (overrides the `useForm` context error for this field). */\n\terrorMessage?: string;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Shows a loading state and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Input size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\";\n\t/** Additional CSS class applied to the field wrapper. */\n\tclassName?: string;\n\t/** Uncontrolled default phone value (numeric string with or without country code). @default \"\" */\n\tdefaultValue?: string;\n\t/** Text displayed when no country matches the search query. @default \"Nenhum país encontrado\" */\n\tnotFoundCountryText?: string;\n\t/** Field name for form submission (stored as numeric string with country code). Required. */\n\tname: string;\n\t/** Placeholder for the country search input. @default \"Pesquisar país\" */\n\tsearchCountryPlaceholder?: string;\n\t/** ISO 3166-1 alpha-2 code of the initially selected country. @default \"BR\" */\n\tdefaultCountryIso?: (typeof countries)[number][\"iso\"];\n\t/** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */\n\tonChange?: (e: string) => void;\n\t/** Controlled phone value (without country code). */\n\tvalue?: string;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.\n *\n * The visible input is masked according to the selected country's phone format.\n * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed above the input.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.disabled - Disables all interactions. Default: false\n * @param props.readOnly - Prevents editing. Default: false\n * @param props.isLoading - Shows loading state and disables interactions. Default: false\n * @param props.defaultValue - Uncontrolled default phone value.\n * @param props.value - Controlled phone value (without country code).\n * @param props.onChange - Callback fired on change — receives numeric string with country code.\n * @param props.defaultCountryIso - ISO code of the initially selected country. Default: \"BR\"\n * @param props.searchCountryPlaceholder - Placeholder for country search. Default: \"Pesquisar país\"\n * @param props.notFoundCountryText - Text shown when no country matches. Default: \"Nenhum país encontrado\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns PhoneInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <PhoneInput name=\"phone\" label=\"Phone\" />\n *\n * // Controlled with outline variant\n * <PhoneInput\n *   name=\"contactPhone\"\n *   label=\"Contact Phone\"\n *   value={phone}\n *   onChange={(v) => setPhone(v)}\n *   variant=\"outline\"\n *   size=\"lg\"\n * />\n *\n * // Pre-selected country (US)\n * <PhoneInput\n *   name=\"phone\"\n *   label=\"Phone\"\n *   defaultCountryIso=\"US\"\n *   showAsterisk\n * />\n * ```\n */\nfunction PhoneInput(props: PhoneInputProps) {\n\tconst {\n\t\tvalue: rawValue,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tsize = \"md\",\n\t\tdefaultValue = \"\",\n\t\tvariant = \"solid\",\n\t\tshowAsterisk,\n\t\tname,\n\t\tonChange,\n\t\tsearchCountryPlaceholder = \"Pesquisar país\",\n\t\tnotFoundCountryText = \"Nenhum país encontrado\",\n\t\tid,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\t// biome-ignore lint/style/noNonNullAssertion: \"BR\" is always present in the countries list\n\tconst brasilCountry = countries.find((country) => country.iso === \"BR\")!;\n\n\tconst defaultData = defaultValue ? formatToPhone(defaultValue) : \"\";\n\tconst defaultCountry: CountryType = defaultValue\n\t\t? findCountryMask(defaultValue)[1]\n\t\t: brasilCountry;\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [search, setSearch] = useState(\"\");\n\tconst [showCountryOptions, setShowCountryOptions] = useState(false);\n\tconst [internalValue, setValue] = useState(defaultData);\n\tconst value = rawValue !== undefined ? rawValue : internalValue;\n\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst { fieldErrors } = useForm();\n\n\tconst phoneInputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst phoneInputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst inputPhoneMaskRef = useRef<HTMLInputElement>(null);\n\n\tfunction handleContainerFocus() {\n\t\tif (isDisabled) return;\n\t\tif (isFocused || showCountryOptions) return;\n\n\t\tsetIsFocused(true);\n\t\tif (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();\n\t}\n\n\tfunction handleOpenCountryOptions() {\n\t\tsetShowCountryOptions(true);\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleCloseCountryOptions() {\n\t\tsetShowCountryOptions(false);\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction handleInputFocus() {\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleInputBlur() {\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction filterCountryFunction(country: CountryType) {\n\t\treturn country.name.toLowerCase().includes(search.toLowerCase());\n\t}\n\n\tfunction inputValue(props?: string) {\n\t\tlet returnValue = currentCountry.code;\n\t\treturnValue += removeNonNumeric(props || value);\n\t\treturn returnValue;\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<PhoneInputContainer\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t>\n\t\t\t\t<PhoneInputCountrySelector\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tonClick={handleOpenCountryOptions}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputCountryOptionsContainer\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tplaceholder={searchCountryPlaceholder}\n\t\t\t\t\tonSearch={setSearch}\n\t\t\t\t>\n\t\t\t\t\t{countries\n\t\t\t\t\t\t.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.map((country) => (\n\t\t\t\t\t\t\t<PhoneInputCountryOption\n\t\t\t\t\t\t\t\tkey={country.iso}\n\t\t\t\t\t\t\t\tcountry={country}\n\t\t\t\t\t\t\t\thandleChangeValue={() => {\n\t\t\t\t\t\t\t\t\tsetCurrentCountry(country);\n\t\t\t\t\t\t\t\t\tsetShowCountryOptions(false);\n\t\t\t\t\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisActive={country.iso === currentCountry.iso}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{countries.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.length === 0 && <p>{notFoundCountryText}</p>}\n\t\t\t\t</PhoneInputCountryOptionsContainer>\n\n\t\t\t\t<PhoneInputCountriesOverlay\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tonClick={handleCloseCountryOptions}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputMask\n\t\t\t\t\tid={phoneInputId}\n\t\t\t\t\tref={inputPhoneMaskRef}\n\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetValue(e);\n\t\t\t\t\t\tonChange?.(inputValue(e));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\tref={phoneInputRef}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue()}\n\t\t\t\t/>\n\t\t\t</PhoneInputContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { PhoneInput };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/phoneInput/index.tsx"],"sourcesContent":["import {\n\tfindCountryMask,\n\tformatToPhone,\n\tremoveNonNumeric,\n} from \"@arkyn/shared\";\nimport { countries } from \"@arkyn/templates\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { applyMask, getMask, TYPES } from \"../../utils/phoneInputUtilities\";\n\nimport { PhoneInputContainer } from \"./phoneInputContainer\";\nimport { PhoneInputCountriesOverlay } from \"./phoneInputCountriesOverlay\";\nimport { PhoneInputCountryOption } from \"./phoneInputCountryOption\";\nimport { PhoneInputCountryOptionsContainer } from \"./phoneInputCountryOptionsContainer\";\nimport { PhoneInputCountrySelector } from \"./phoneInputCountrySelector\";\nimport { PhoneInputMask } from \"./phoneInputMask\";\n\ntype CountryType = {\n\tname: string;\n\tcode: string;\n\tiso: string;\n\tflag: string;\n\tmask: string | string[];\n};\n\ntype PhoneInputProps = {\n\t/** Optional HTML id for the visible phone text input. */\n\tid?: string;\n\t/** Disables all interactions. @default false */\n\tdisabled?: boolean;\n\t/** Prevents value changes while keeping the current value visible. @default false */\n\treadOnly?: boolean;\n\t/** Validation error message (overrides the `useForm` context error for this field). */\n\terrorMessage?: string;\n\t/** Optional label text displayed above the input. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Shows a loading state and disables interactions. @default false */\n\tisLoading?: boolean;\n\t/**\n\t * Input size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * @default \"solid\"\n\t */\n\tvariant?: \"solid\" | \"outline\";\n\t/** Additional CSS class applied to the field wrapper. */\n\tclassName?: string;\n\t/** Uncontrolled default phone value (numeric string with or without country code). @default \"\" */\n\tdefaultValue?: string;\n\t/** Text displayed when no country matches the search query. @default \"Nenhum país encontrado\" */\n\tnotFoundCountryText?: string;\n\t/** Field name for form submission (stored as numeric string with country code). Required. */\n\tname: string;\n\t/** Placeholder for the country search input. @default \"Pesquisar país\" */\n\tsearchCountryPlaceholder?: string;\n\t/** ISO 3166-1 alpha-2 code of the initially selected country. @default \"BR\" */\n\tdefaultCountryIso?: (typeof countries)[number][\"iso\"];\n\t/** Callback fired on value change. Receives a numeric string prefixed with the country dial code. */\n\tonChange?: (e: string) => void;\n\t/** Controlled phone value (without country code). */\n\tvalue?: string;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"vertical\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\nfunction formatLocalValue(rawValue: string, country: CountryType) {\n\tconst digits = removeNonNumeric(rawValue);\n\n\tif (country.code === \"+55\") {\n\t\treturn applyMask(digits, TYPES[getMask(digits)]);\n\t}\n\n\tconst mask =\n\t\ttypeof country.mask === \"string\" ? country.mask : country.mask[0];\n\treturn applyMask(digits, mask, \"_\");\n}\n\n/**\n * PhoneInput — phone number field with an integrated country selector and automatic mask formatting.\n *\n * The visible input is masked according to the selected country's phone format.\n * The hidden `<input>` stores a numeric string prefixed with the country dial code for form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed above the input.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n * @param props.size - Input size (`md` | `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.disabled - Disables all interactions. Default: false\n * @param props.readOnly - Prevents editing. Default: false\n * @param props.isLoading - Shows loading state and disables interactions. Default: false\n * @param props.defaultValue - Uncontrolled default phone value.\n * @param props.value - Controlled phone value (without country code).\n * @param props.onChange - Callback fired on change — receives numeric string with country code.\n * @param props.defaultCountryIso - ISO code of the initially selected country. Default: \"BR\"\n * @param props.searchCountryPlaceholder - Placeholder for country search. Default: \"Pesquisar país\"\n * @param props.notFoundCountryText - Text shown when no country matches. Default: \"Nenhum país encontrado\"\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * @returns PhoneInput JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <PhoneInput name=\"phone\" label=\"Phone\" />\n *\n * // Controlled with outline variant\n * <PhoneInput\n *   name=\"contactPhone\"\n *   label=\"Contact Phone\"\n *   value={phone}\n *   onChange={(v) => setPhone(v)}\n *   variant=\"outline\"\n *   size=\"lg\"\n * />\n *\n * // Pre-selected country (US)\n * <PhoneInput\n *   name=\"phone\"\n *   label=\"Phone\"\n *   defaultCountryIso=\"US\"\n *   showAsterisk\n * />\n * ```\n */\nfunction PhoneInput(props: PhoneInputProps) {\n\tconst {\n\t\tvalue: rawValue,\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tisLoading = false,\n\t\treadOnly = false,\n\t\tsize = \"md\",\n\t\tdefaultValue = \"\",\n\t\tvariant = \"solid\",\n\t\tshowAsterisk,\n\t\tname,\n\t\tonChange,\n\t\tsearchCountryPlaceholder = \"Pesquisar país\",\n\t\tnotFoundCountryText = \"Nenhum país encontrado\",\n\t\tid,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\t// biome-ignore lint/style/noNonNullAssertion: \"BR\" is always present in the countries list\n\tconst brasilCountry = countries.find((country) => country.iso === \"BR\")!;\n\n\tconst defaultData = defaultValue ? formatToPhone(defaultValue) : \"\";\n\tconst defaultCountry: CountryType = defaultValue\n\t\t? findCountryMask(defaultValue)[1]\n\t\t: brasilCountry;\n\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst [search, setSearch] = useState(\"\");\n\tconst [showCountryOptions, setShowCountryOptions] = useState(false);\n\tconst [internalValue, setValue] = useState(defaultData);\n\n\tconst [currentCountry, setCurrentCountry] = useState(defaultCountry);\n\n\tconst value =\n\t\trawValue !== undefined\n\t\t\t? formatLocalValue(rawValue, currentCountry)\n\t\t\t: internalValue;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst phoneInputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst phoneInputId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled || isLoading;\n\n\tconst inputPhoneMaskRef = useRef<HTMLInputElement>(null);\n\n\tfunction handleContainerFocus() {\n\t\tif (isDisabled) return;\n\t\tif (isFocused || showCountryOptions) return;\n\n\t\tsetIsFocused(true);\n\t\tif (inputPhoneMaskRef.current) inputPhoneMaskRef.current.focus();\n\t}\n\n\tfunction handleOpenCountryOptions() {\n\t\tsetShowCountryOptions(true);\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleCloseCountryOptions() {\n\t\tsetShowCountryOptions(false);\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction handleInputFocus() {\n\t\tsetIsFocused(true);\n\t}\n\n\tfunction handleInputBlur() {\n\t\tsetIsFocused(false);\n\t}\n\n\tfunction filterCountryFunction(country: CountryType) {\n\t\treturn country.name.toLowerCase().includes(search.toLowerCase());\n\t}\n\n\tfunction inputValue(props?: string) {\n\t\tlet returnValue = currentCountry.code;\n\t\treturnValue += removeNonNumeric(props || value);\n\t\treturn returnValue;\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<PhoneInputContainer\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tisError={isError}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tisFocused={isFocused}\n\t\t\t\treadOnly={readOnly}\n\t\t\t\tsize={size}\n\t\t\t\tvariant={variant}\n\t\t\t\tonFocus={handleContainerFocus}\n\t\t\t>\n\t\t\t\t<PhoneInputCountrySelector\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tonClick={handleOpenCountryOptions}\n\t\t\t\t\tsize={size}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputCountryOptionsContainer\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tsearch={search}\n\t\t\t\t\tplaceholder={searchCountryPlaceholder}\n\t\t\t\t\tonSearch={setSearch}\n\t\t\t\t>\n\t\t\t\t\t{countries\n\t\t\t\t\t\t.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.map((country) => (\n\t\t\t\t\t\t\t<PhoneInputCountryOption\n\t\t\t\t\t\t\t\tkey={country.iso}\n\t\t\t\t\t\t\t\tcountry={country}\n\t\t\t\t\t\t\t\thandleChangeValue={() => {\n\t\t\t\t\t\t\t\t\tsetCurrentCountry(country);\n\t\t\t\t\t\t\t\t\tsetShowCountryOptions(false);\n\t\t\t\t\t\t\t\t\tsetValue(\"\");\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tisActive={country.iso === currentCountry.iso}\n\t\t\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{countries.filter((country) => filterCountryFunction(country))\n\t\t\t\t\t\t.length === 0 && <p>{notFoundCountryText}</p>}\n\t\t\t\t</PhoneInputCountryOptionsContainer>\n\n\t\t\t\t<PhoneInputCountriesOverlay\n\t\t\t\t\tisOpen={isDisabled ? false : readOnly ? false : showCountryOptions}\n\t\t\t\t\tonClick={handleCloseCountryOptions}\n\t\t\t\t/>\n\n\t\t\t\t<PhoneInputMask\n\t\t\t\t\tid={phoneInputId}\n\t\t\t\t\tref={inputPhoneMaskRef}\n\t\t\t\t\treadonly={readOnly}\n\t\t\t\t\tcurrentCountry={currentCountry}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tsetValue(e);\n\t\t\t\t\t\tonChange?.(inputValue(e));\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<input\n\t\t\t\t\tref={phoneInputRef}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={inputValue()}\n\t\t\t\t/>\n\t\t\t</PhoneInputContainer>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { PhoneInput };\n"],"mappings":"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"}

package/dist/modules/providers/modalProvider.js

@@ -1,42 +1,36 @@
-import { createContext as e, useState as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { createContext as e, useCallback as t, useMemo as n, useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/providers/modalProvider.tsx
-var r = e({});
-function i(e) {
-	let { children: i = !1 } = e, [a, o] = t([]);
-	function s(e) {
-		return !!a.some((t) => t.key === e);
-	}
-	function c(e) {
-		return a.find((t) => t.key === e)?.data;
-	}
-	function l(e, t) {
-		s(e) ? o((n) => [...n.filter((t) => t.key !== e), {
-			key: e,
-			data: t
-		}]) : o([...a, {
+var a = e({});
+function o(e) {
+	let { children: o = !1 } = e, [s, c] = r([]), l = t((e) => s.some((t) => t.key === e), [s]), u = t((e) => s.find((t) => t.key === e)?.data, [s]), d = t((e, t) => {
+		c((n) => [...n.filter((t) => t.key !== e), {
 			key: e,
 			data: t
 		}]);
-	}
-	function u(e) {
-		o(a.filter((t) => t.key !== e));
-	}
-	function d() {
-		o([]);
-	}
-	return /* @__PURE__ */ n(r.Provider, {
-		value: {
-			modalIsOpen: s,
-			modalData: c,
-			openModal: l,
-			closeModal: u,
-			closeAll: d
-		},
-		children: i
+	}, []), f = t((e) => {
+		c((t) => t.filter((t) => t.key !== e));
+	}, []), p = t(() => {
+		c([]);
+	}, []), m = n(() => ({
+		modalIsOpen: l,
+		modalData: u,
+		openModal: d,
+		closeModal: f,
+		closeAll: p
+	}), [
+		l,
+		u,
+		d,
+		f,
+		p
+	]);
+	return /* @__PURE__ */ i(a.Provider, {
+		value: m,
+		children: o
 	});
 }
 //#endregion
-export { i as ModalProvider, r as modalContext };
+export { o as ModalProvider, a as modalContext };
 
 //# sourceMappingURL=modalProvider.js.map

package/dist/modules/providers/modalProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"modalProvider.js","names":[],"sources":["../../../src/providers/modalProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useState } from \"react\";\n\n// biome-ignore lint/suspicious/noExplicitAny: intentional\ntype ModalContextProps<T = any> = {\n\tmodalIsOpen(key: string): boolean;\n\tmodalData(key: string): T;\n\topenModal(key: string, data?: T): void;\n\tcloseModal(key: string): void;\n\tcloseAll(): void;\n};\n\ntype OpenedModals = {\n\tkey: string;\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tdata?: any;\n}[];\n\ntype ModalProviderProps = {\n\tchildren: ReactNode;\n\tenableModalAutomation?: boolean;\n};\n\nconst modalContext = createContext({} as ModalContextProps);\n\n/**\n * ModalProvider — context provider that manages open/close state and data for named modals.\n *\n * Wrap your app (or a subtree) with this once. Any component in the tree can then call\n * `useModal(key)` to open, close, or read data for a specific modal. `closeAll()` is also\n * available (used by `useAutomation` to close all modals after a successful form action).\n *\n * @param props.children - Components that will have access to modal context.\n *\n * @returns ModalProvider JSX element.\n *\n * @example\n * ```tsx\n * // In your root layout\n * <ModalProvider>\n *   <App />\n * </ModalProvider>\n *\n * // Opening a modal from anywhere in the tree\n * const { openModal } = useModal();\n * openModal('confirm-delete', { id: user.id });\n *\n * // Consuming in the modal component\n * const { modalIsOpen, modalData, closeModal } = useModal<{ id: number }>('confirm-delete');\n * ```\n */\n\nfunction ModalProvider(args: ModalProviderProps) {\n\tconst { children = false } = args;\n\tconst [openedModals, setOpenedModals] = useState<OpenedModals>([]);\n\n\tfunction modalIsOpen(key: string) {\n\t\treturn !!openedModals.some((modal) => modal.key === key);\n\t}\n\n\tfunction modalData(key: string) {\n\t\treturn openedModals.find((modal) => modal.key === key)?.data;\n\t}\n\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tfunction openModal(key: string, data?: any) {\n\t\tconst alreadyExist = modalIsOpen(key);\n\t\tif (alreadyExist) {\n\t\t\tsetOpenedModals((old) => {\n\t\t\t\tconst filtered = old.filter((modal) => modal.key !== key);\n\t\t\t\treturn [...filtered, { key, data }];\n\t\t\t});\n\t\t} else setOpenedModals([...openedModals, { key, data }]);\n\t}\n\n\tfunction closeModal(key: string) {\n\t\tsetOpenedModals(openedModals.filter((modal) => modal.key !== key));\n\t}\n\n\tfunction closeAll() {\n\t\tsetOpenedModals([]);\n\t}\n\n\treturn (\n\t\t<modalContext.Provider\n\t\t\tvalue={{ modalIsOpen, modalData, openModal, closeModal, closeAll }}\n\t\t>\n\t\t\t{children}\n\t\t</modalContext.Provider>\n\t);\n}\n\nexport { type ModalContextProps, ModalProvider, modalContext };\n"],"mappings":";;;AAsBA,IAAM,IAAe,EAAc,CAAC,CAAsB;AA6B1D,SAAS,EAAc,GAA0B;CAChD,IAAM,EAAE,cAAW,OAAU,GACvB,CAAC,GAAc,KAAmB,EAAuB,CAAC,CAAC;CAEjE,SAAS,EAAY,GAAa;EACjC,OAAO,CAAC,CAAC,EAAa,MAAM,MAAU,EAAM,QAAQ,CAAG;CACxD;CAEA,SAAS,EAAU,GAAa;EAC/B,OAAO,EAAa,MAAM,MAAU,EAAM,QAAQ,CAAG,CAAC,EAAE;CACzD;CAGA,SAAS,EAAU,GAAa,GAAY;EAE3C,AADqB,EAAY,CAC7B,IACH,GAAiB,MAET,CAAC,GADS,EAAI,QAAQ,MAAU,EAAM,QAAQ,CAC1C,GAAU;GAAE;GAAK;EAAK,CAAC,CAClC,IACK,EAAgB,CAAC,GAAG,GAAc;GAAE;GAAK;EAAK,CAAC,CAAC;CACxD;CAEA,SAAS,EAAW,GAAa;EAChC,EAAgB,EAAa,QAAQ,MAAU,EAAM,QAAQ,CAAG,CAAC;CAClE;CAEA,SAAS,IAAW;EACnB,EAAgB,CAAC,CAAC;CACnB;CAEA,OACC,kBAAC,EAAa,UAAd;EACC,OAAO;GAAE;GAAa;GAAW;GAAW;GAAY;EAAS;EAEhE;CACqB,CAAA;AAEzB"}
+{"version":3,"file":"modalProvider.js","names":[],"sources":["../../../src/providers/modalProvider.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype ReactNode,\n\tuseCallback,\n\tuseMemo,\n\tuseState,\n} from \"react\";\n\n// biome-ignore lint/suspicious/noExplicitAny: intentional\ntype ModalContextProps<T = any> = {\n\tmodalIsOpen(key: string): boolean;\n\tmodalData(key: string): T;\n\topenModal(key: string, data?: T): void;\n\tcloseModal(key: string): void;\n\tcloseAll(): void;\n};\n\ntype OpenedModals = {\n\tkey: string;\n\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\tdata?: any;\n}[];\n\ntype ModalProviderProps = {\n\tchildren: ReactNode;\n\tenableModalAutomation?: boolean;\n};\n\nconst modalContext = createContext({} as ModalContextProps);\n\n/**\n * ModalProvider — context provider that manages open/close state and data for named modals.\n *\n * Wrap your app (or a subtree) with this once. Any component in the tree can then call\n * `useModal(key)` to open, close, or read data for a specific modal. `closeAll()` is also\n * available (used by `useAutomation` to close all modals after a successful form action).\n *\n * @param props.children - Components that will have access to modal context.\n *\n * @returns ModalProvider JSX element.\n *\n * @example\n * ```tsx\n * // In your root layout\n * <ModalProvider>\n *   <App />\n * </ModalProvider>\n *\n * // Opening a modal from anywhere in the tree\n * const { openModal } = useModal();\n * openModal('confirm-delete', { id: user.id });\n *\n * // Consuming in the modal component\n * const { modalIsOpen, modalData, closeModal } = useModal<{ id: number }>('confirm-delete');\n * ```\n */\n\nfunction ModalProvider(args: ModalProviderProps) {\n\tconst { children = false } = args;\n\tconst [openedModals, setOpenedModals] = useState<OpenedModals>([]);\n\n\tconst modalIsOpen = useCallback(\n\t\t(key: string) => openedModals.some((modal) => modal.key === key),\n\t\t[openedModals],\n\t);\n\n\tconst modalData = useCallback(\n\t\t(key: string) => openedModals.find((modal) => modal.key === key)?.data,\n\t\t[openedModals],\n\t);\n\n\tconst openModal = useCallback(\n\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t(key: string, data?: any) => {\n\t\t\tsetOpenedModals((old) => {\n\t\t\t\tconst filtered = old.filter((modal) => modal.key !== key);\n\t\t\t\treturn [...filtered, { key, data }];\n\t\t\t});\n\t\t},\n\t\t[],\n\t);\n\n\tconst closeModal = useCallback((key: string) => {\n\t\tsetOpenedModals((old) => old.filter((modal) => modal.key !== key));\n\t}, []);\n\n\tconst closeAll = useCallback(() => {\n\t\tsetOpenedModals([]);\n\t}, []);\n\n\tconst value = useMemo(\n\t\t() => ({ modalIsOpen, modalData, openModal, closeModal, closeAll }),\n\t\t[modalIsOpen, modalData, openModal, closeModal, closeAll],\n\t);\n\n\treturn (\n\t\t<modalContext.Provider value={value}>{children}</modalContext.Provider>\n\t);\n}\n\nexport { type ModalContextProps, ModalProvider, modalContext };\n"],"mappings":";;;AA4BA,IAAM,IAAe,EAAc,CAAC,CAAsB;AA6B1D,SAAS,EAAc,GAA0B;CAChD,IAAM,EAAE,cAAW,OAAU,GACvB,CAAC,GAAc,KAAmB,EAAuB,CAAC,CAAC,GAE3D,IAAc,GAClB,MAAgB,EAAa,MAAM,MAAU,EAAM,QAAQ,CAAG,GAC/D,CAAC,CAAY,CACd,GAEM,IAAY,GAChB,MAAgB,EAAa,MAAM,MAAU,EAAM,QAAQ,CAAG,CAAC,EAAE,MAClE,CAAC,CAAY,CACd,GAEM,IAAY,GAEhB,GAAa,MAAe;EAC5B,GAAiB,MAET,CAAC,GADS,EAAI,QAAQ,MAAU,EAAM,QAAQ,CAC1C,GAAU;GAAE;GAAK;EAAK,CAAC,CAClC;CACF,GACA,CAAC,CACF,GAEM,IAAa,GAAa,MAAgB;EAC/C,GAAiB,MAAQ,EAAI,QAAQ,MAAU,EAAM,QAAQ,CAAG,CAAC;CAClE,GAAG,CAAC,CAAC,GAEC,IAAW,QAAkB;EAClC,EAAgB,CAAC,CAAC;CACnB,GAAG,CAAC,CAAC,GAEC,IAAQ,SACN;EAAE;EAAa;EAAW;EAAW;EAAY;CAAS,IACjE;EAAC;EAAa;EAAW;EAAW;EAAY;CAAQ,CACzD;CAEA,OACC,kBAAC,EAAa,UAAd;EAA8B;EAAQ;CAAgC,CAAA;AAExE"}

package/dist/modules/services/fieldTemplate.js

@@ -11,6 +11,7 @@ function a(a) {
 		orientation: p,
 		children: [
 			s && /* @__PURE__ */ r(t, {
+				htmlFor: o,
 				showAsterisk: c,
 				children: s
 			}),

package/dist/modules/services/fieldTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"fieldTemplate.js","names":[],"sources":["../../../src/services/fieldTemplate.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { FieldError } from \"../components/fieldError\";\nimport { FieldLabel } from \"../components/fieldLabel\";\nimport { FieldWrapper } from \"../components/fieldWrapper\";\n\ntype FormRendererProps = {\n\tname?: string;\n\tlabel?: string;\n\tclassName?: string;\n\tshowAsterisk?: boolean;\n\tunShowFieldTemplate?: boolean;\n\terrorMessage?: string;\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n\tchildren: ReactNode;\n};\n\nfunction FieldTemplate(props: FormRendererProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tclassName,\n\t\tunShowFieldTemplate,\n\t\terrorMessage,\n\t\tchildren,\n\t\torientation,\n\t} = props;\n\n\tif (unShowFieldTemplate) return children;\n\n\treturn (\n\t\t<FieldWrapper id={name} className={className} orientation={orientation}>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\t\t\t{children}\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { FieldTemplate };\n"],"mappings":";;;;;AAiBA,SAAS,EAAc,GAA0B;CAChD,IAAM,EACL,SACA,UACA,iBACA,cACA,wBACA,iBACA,aACA,mBACG;CAIJ,OAFI,IAA4B,IAG/B,kBAAC,GAAD;EAAc,IAAI;EAAiB;EAAwB;YAA3D;GACE,KAAS,kBAAC,GAAD;IAA0B;cAAe;GAAkB,CAAA;GACpE;GACA,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;EAC1C;;AAEhB"}
+{"version":3,"file":"fieldTemplate.js","names":[],"sources":["../../../src/services/fieldTemplate.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { FieldError } from \"../components/fieldError\";\nimport { FieldLabel } from \"../components/fieldLabel\";\nimport { FieldWrapper } from \"../components/fieldWrapper\";\n\ntype FormRendererProps = {\n\tname?: string;\n\tlabel?: string;\n\tclassName?: string;\n\tshowAsterisk?: boolean;\n\tunShowFieldTemplate?: boolean;\n\terrorMessage?: string;\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n\tchildren: ReactNode;\n};\n\nfunction FieldTemplate(props: FormRendererProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\tclassName,\n\t\tunShowFieldTemplate,\n\t\terrorMessage,\n\t\tchildren,\n\t\torientation,\n\t} = props;\n\n\tif (unShowFieldTemplate) return children;\n\n\treturn (\n\t\t<FieldWrapper id={name} className={className} orientation={orientation}>\n\t\t\t{label && (\n\t\t\t\t<FieldLabel htmlFor={name} showAsterisk={showAsterisk}>\n\t\t\t\t\t{label}\n\t\t\t\t</FieldLabel>\n\t\t\t)}\n\n\t\t\t{children}\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { FieldTemplate };\n"],"mappings":";;;;;AAiBA,SAAS,EAAc,GAA0B;CAChD,IAAM,EACL,SACA,UACA,iBACA,cACA,wBACA,iBACA,aACA,mBACG;CAIJ,OAFI,IAA4B,IAG/B,kBAAC,GAAD;EAAc,IAAI;EAAiB;EAAwB;YAA3D;GACE,KACA,kBAAC,GAAD;IAAY,SAAS;IAAoB;cACvC;GACU,CAAA;GAGZ;GACA,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;EAC1C;;AAEhB"}

package/dist/modules/utils/phoneInputUtilities.js

@@ -6,13 +6,13 @@ var t = {
 	EIGHT: "(99) 9999-9999",
 	NINE: "(99) 99999-9999"
 };
-function n(e, t) {
-	let n = "", r = 0;
-	for (let i = 0; i < t.length; i++) if (t[i] === "9") if (r < e.length) n += e[r], r++;
+function n(e, t, n = "9") {
+	let r = "", i = 0;
+	for (let a = 0; a < t.length; a++) if (t[a] === n) if (i < e.length) r += e[i], i++;
 	else break;
-	else if (r < e.length) n += t[i];
+	else if (i < e.length) r += t[a];
 	else break;
-	return n;
+	return r;
 }
 function r(e) {
 	return e.length > 10 ? "NINE" : "EIGHT";

package/dist/modules/utils/phoneInputUtilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"phoneInputUtilities.js","names":[],"sources":["../../../src/utils/phoneInputUtilities.ts"],"sourcesContent":["function clear(value: string) {\n\treturn value?.replace(/[^0-9]/g, \"\");\n}\n\nconst TYPES = {\n\tEIGHT: \"(99) 9999-9999\",\n\tNINE: \"(99) 99999-9999\",\n};\n\nfunction applyMask(value: string, maskPattern: string) {\n\tlet result = \"\";\n\tlet digitIndex = 0;\n\n\tfor (let i = 0; i < maskPattern.length; i++) {\n\t\tif (maskPattern[i] === \"9\") {\n\t\t\tif (digitIndex < value.length) {\n\t\t\t\tresult += value[digitIndex];\n\t\t\t\tdigitIndex++;\n\t\t\t} else {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t} else {\n\t\t\tif (digitIndex < value.length) {\n\t\t\t\tresult += maskPattern[i];\n\t\t\t} else {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn result;\n}\n\nfunction getMask(value: string): \"NINE\" | \"EIGHT\" {\n\tconst mask = value.length > 10 ? \"NINE\" : \"EIGHT\";\n\treturn mask;\n}\n\nconst MAX_LENGTH = clear(TYPES.NINE).length;\n\nexport { applyMask, clear, getMask, MAX_LENGTH, TYPES };\n"],"mappings":";AAAA,SAAS,EAAM,GAAe;CAC7B,OAAO,GAAO,QAAQ,WAAW,EAAE;AACpC;AAEA,IAAM,IAAQ;CACb,OAAO;CACP,MAAM;AACP;AAEA,SAAS,EAAU,GAAe,GAAqB;CACtD,IAAI,IAAS,IACT,IAAa;CAEjB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAY,QAAQ,KACvC,IAAI,EAAY,OAAO,KACtB,IAAI,IAAa,EAAM,QAEtB,AADA,KAAU,EAAM,IAChB;MAEA;MAGD,IAAI,IAAa,EAAM,QACtB,KAAU,EAAY;MAEtB;CAKH,OAAO;AACR;AAEA,SAAS,EAAQ,GAAiC;CAEjD,OADa,EAAM,SAAS,KAAK,SAAS;AAE3C;AAEA,IAAM,IAAa,EAAM,EAAM,IAAI,CAAC,CAAC"}
+{"version":3,"file":"phoneInputUtilities.js","names":[],"sources":["../../../src/utils/phoneInputUtilities.ts"],"sourcesContent":["function clear(value: string) {\n\treturn value?.replace(/[^0-9]/g, \"\");\n}\n\nconst TYPES = {\n\tEIGHT: \"(99) 9999-9999\",\n\tNINE: \"(99) 99999-9999\",\n};\n\nfunction applyMask(value: string, maskPattern: string, placeholder = \"9\") {\n\tlet result = \"\";\n\tlet digitIndex = 0;\n\n\tfor (let i = 0; i < maskPattern.length; i++) {\n\t\tif (maskPattern[i] === placeholder) {\n\t\t\tif (digitIndex < value.length) {\n\t\t\t\tresult += value[digitIndex];\n\t\t\t\tdigitIndex++;\n\t\t\t} else {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t} else {\n\t\t\tif (digitIndex < value.length) {\n\t\t\t\tresult += maskPattern[i];\n\t\t\t} else {\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn result;\n}\n\nfunction getMask(value: string): \"NINE\" | \"EIGHT\" {\n\tconst mask = value.length > 10 ? \"NINE\" : \"EIGHT\";\n\treturn mask;\n}\n\nconst MAX_LENGTH = clear(TYPES.NINE).length;\n\nexport { applyMask, clear, getMask, MAX_LENGTH, TYPES };\n"],"mappings":";AAAA,SAAS,EAAM,GAAe;CAC7B,OAAO,GAAO,QAAQ,WAAW,EAAE;AACpC;AAEA,IAAM,IAAQ;CACb,OAAO;CACP,MAAM;AACP;AAEA,SAAS,EAAU,GAAe,GAAqB,IAAc,KAAK;CACzE,IAAI,IAAS,IACT,IAAa;CAEjB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAY,QAAQ,KACvC,IAAI,EAAY,OAAO,GACtB,IAAI,IAAa,EAAM,QAEtB,AADA,KAAU,EAAM,IAChB;MAEA;MAGD,IAAI,IAAa,EAAM,QACtB,KAAU,EAAY;MAEtB;CAKH,OAAO;AACR;AAEA,SAAS,EAAQ,GAAiC;CAEjD,OADa,EAAM,SAAS,KAAK,SAAS;AAE3C;AAEA,IAAM,IAAa,EAAM,EAAM,IAAI,CAAC,CAAC"}

package/dist/providers/modalProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modalProvider.d.ts","sourceRoot":"","sources":["../../src/providers/modalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGhE,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IACjC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;CACjB,CAAC;AAQF,KAAK,kBAAkB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,YAAY,iDAAyC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,iBAAS,aAAa,CAAC,IAAI,EAAE,kBAAkB,+BAsC9C;AAED,OAAO,EAAE,KAAK,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"modalProvider.d.ts","sourceRoot":"","sources":["../../src/providers/modalProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AAGf,KAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IACjC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1B,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACvC,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,IAAI,IAAI,CAAC;CACjB,CAAC;AAQF,KAAK,kBAAkB,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,YAAY,iDAAyC,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,iBAAS,aAAa,CAAC,IAAI,EAAE,kBAAkB,+BAyC9C;AAED,OAAO,EAAE,KAAK,iBAAiB,EAAE,aAAa,EAAE,YAAY,EAAE,CAAC"}

package/dist/services/fieldTemplate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldTemplate.d.ts","sourceRoot":"","sources":["../../src/services/fieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,KAAK,iBAAiB,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAC9D,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,iBAAiB,+TAqB9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"fieldTemplate.d.ts","sourceRoot":"","sources":["../../src/services/fieldTemplate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,KAAK,iBAAiB,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,mBAAmB,CAAC;IAC9D,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,iBAAS,aAAa,CAAC,KAAK,EAAE,iBAAiB,+TA0B9C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}