@arkyn/components 3.0.1-beta.2 → 3.0.1-beta.200

package/dist/modules/components/modal/modalContainer/index.js

@@ -0,0 +1,36 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { ModalProvider as t } from "../modalContext.js";
+/* empty css       */
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/modal/modalContainer/index.tsx
+function o(o) {
+	let { isVisible: s, makeInvisible: c, children: l, className: u = "", ...d } = o, [f, p] = r(s), [m, h] = r(!1);
+	n(() => {
+		s ? (p(!0), h(!1)) : f && h(!0);
+	}, [s, f]), e(s);
+	function g(e) {
+		e.target === e.currentTarget && m && (h(!1), p(!1), c());
+	}
+	return f ? /* @__PURE__ */ i(t, {
+		makeInvisible: () => h(!0),
+		children: /* @__PURE__ */ a("aside", {
+			className: [
+				"arkynModalContainer",
+				m ? "exiting" : "",
+				u
+			].filter(Boolean).join(" ").trim(),
+			...d,
+			children: [/* @__PURE__ */ i("div", {
+				className: "arkynModalContainerOverlay",
+				onClick: () => h(!0),
+				onAnimationEnd: g
+			}), /* @__PURE__ */ i("div", {
+				className: "arkynModalContainerContent",
+				children: l
+			})]
+		})
+	}) : null;
+}
+//#endregion
+export { o as ModalContainer };

package/dist/modules/components/modal/modalContext.js

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/modal/modalContext.tsx
+var r = e({});
+function i(e) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: { makeInvisible: e.makeInvisible },
+		children: e.children
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { i as ModalProvider, a as useModal };

package/dist/modules/components/modal/modalFooter/index.js

@@ -0,0 +1,12 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/modal/modalFooter/index.tsx
+function t(t) {
+	let { alignment: n = "right", className: r, ...i } = t;
+	return /* @__PURE__ */ e("footer", {
+		className: `arkynModalFooter ${n} ${r}`.trim(),
+		...i
+	});
+}
+//#endregion
+export { t as ModalFooter };

package/dist/modules/components/modal/modalHeader/index.js

@@ -0,0 +1,21 @@
+import { useModal as e } from "../modalContext.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { X as r } from "lucide-react";
+//#region src/components/modal/modalHeader/index.tsx
+function i(i) {
+	let { showCloseButton: a = !0, className: o, children: s, ...c } = i, { makeInvisible: l } = e();
+	return /* @__PURE__ */ n("header", {
+		className: `arkynModalHeader ${o}`.trim(),
+		...c,
+		children: [s, a && /* @__PURE__ */ t("button", {
+			type: "button",
+			onClick: l,
+			"aria-label": "Close modal button",
+			className: "arkynModalHeaderCloseButton",
+			children: /* @__PURE__ */ t(r, { size: 24 })
+		})]
+	});
+}
+//#endregion
+export { i as ModalHeader };

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

@@ -0,0 +1,116 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { IconRenderer as t } from "../../services/iconRenderer.js";
+import { FieldTemplate as n } from "../../services/fieldTemplate.js";
+import { MultiSelectChevron as r } from "./multiSelectChevron/index.js";
+import { MultiSelectContainer as i } from "./multiSelectContainer/index.js";
+import { MultiSelectContent as a } from "./multiSelectContent/index.js";
+import { MultiSelectMark as o } from "./multiSelectMark/index.js";
+import { MultiSelectOption as s } from "./multiSelectOption/index.js";
+import { MultiSelectOptionsContainer as ee } from "./multiSelectOptionsContainer/index.js";
+import { MultiSelectOverlay as te } from "./multiSelectOverlay/index.js";
+import { MultiSelectSpinner as c } from "./multiSelectSpinner/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";
+//#region src/components/multiSelect/index.tsx
+function m(m) {
+	let { name: h, options: g, className: _ = "", placeholder: v = "Selecione...", closeOnSelect: y = !1, defaultValue: b = [], errorMessage: ne, isLoading: x = !1, readOnly: S = !1, isSearchable: re = !1, id: ie, label: ae, showAsterisk: oe, leftIcon: C, onSearch: w, onChange: T, onBlur: E, notFoundText: D = "Sem opções disponíveis", onFocus: O, disabled: k = !1, prefix: A, size: j = "md", value: M, variant: N = "solid", unShowFieldTemplate: P = !1, orientation: F = "vertical" } = m, { fieldErrors: I } = e(), L = u(null), R = l(), se = ie || R, z = ne || I?.[h], B = !!z, V = k || x || S, H = {
+		md: 20,
+		lg: 20
+	}[j], [U, W] = d(""), [G, K] = d(!1), [q, J] = d(b), Y = M || q;
+	function X(e) {
+		return Y.includes(e);
+	}
+	function ce(e) {
+		return g.find((t) => t.value === e)?.label || "";
+	}
+	function le() {
+		V || !L?.current || G || (K(!0), L.current.focus(), O?.());
+	}
+	function Z() {
+		K(!1), E && L.current && L.current.blur();
+	}
+	function ue(e) {
+		W(e), w && w(e);
+	}
+	function Q(e) {
+		X(e) ? (J(q.filter((t) => t !== e)), T && T(q.filter((t) => t !== e))) : (J([...q, e]), T && T([...q, e])), y && Z();
+	}
+	let $ = g.filter((e) => !!(m.onSearch || !m.isSearchable || e.label.toLowerCase().includes(U.toLowerCase())));
+	return /* @__PURE__ */ f(n, {
+		name: h,
+		label: ae,
+		showAsterisk: oe,
+		className: _,
+		errorMessage: z,
+		unShowFieldTemplate: P,
+		orientation: F,
+		children: /* @__PURE__ */ p(i, {
+			handleContainerFocus: le,
+			disabled: V,
+			isError: B,
+			isFocused: G,
+			isLoading: x,
+			readOnly: S,
+			size: j,
+			variant: N,
+			prefixExists: !!A,
+			id: se,
+			children: [
+				/* @__PURE__ */ f("input", {
+					ref: L,
+					name: h,
+					value: JSON.stringify(Y),
+					type: "hidden"
+				}),
+				/* @__PURE__ */ f(t, {
+					iconSize: H,
+					icon: A,
+					className: "prefix"
+				}),
+				C && /* @__PURE__ */ f(C, {
+					size: H,
+					strokeWidth: 2.5
+				}),
+				/* @__PURE__ */ p(a, {
+					size: j,
+					children: [Y.map((e) => /* @__PURE__ */ f(o, {
+						label: ce(e),
+						value: e,
+						handleChangeValue: Q,
+						disabled: V
+					}, e)), Y.length <= 0 && /* @__PURE__ */ f("p", { children: v })]
+				}),
+				/* @__PURE__ */ p(ee, {
+					isFocused: G,
+					isSearchable: re,
+					search: U,
+					onSearch: ue,
+					children: [$.map(({ label: e, value: t }) => /* @__PURE__ */ f(s, {
+						label: e,
+						value: t,
+						size: j,
+						handleChangeValue: Q,
+						optionHasSelected: X
+					}, t)), $.length <= 0 && /* @__PURE__ */ f("p", { children: D })]
+				}),
+				/* @__PURE__ */ f(r, {
+					disabled: V,
+					isFocused: G,
+					readOnly: S,
+					iconSize: H,
+					isLoading: x
+				}),
+				/* @__PURE__ */ f(c, {
+					iconSize: H,
+					isLoading: x
+				}),
+				/* @__PURE__ */ f(te, {
+					handleBlur: Z,
+					isFocused: G
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as MultiSelect };

package/dist/modules/components/multiSelect/multiSelectChevron/index.js

@@ -0,0 +1,19 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { ChevronDown as t } from "lucide-react";
+//#region src/components/multiSelect/multiSelectChevron/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i, disabled: a, readOnly: o, isFocused: s } = n;
+	return i ? null : /* @__PURE__ */ e(t, {
+		className: `arkynMultiSelectChevron ${a || o ? "notAnimate" : ""} ${s ? "focused" : ""}`,
+		strokeWidth: 2.5,
+		style: {
+			minWidth: r,
+			minHeight: r,
+			maxWidth: r,
+			maxHeight: r
+		}
+	});
+}
+//#endregion
+export { n as MultiSelectChevron };

package/dist/modules/components/multiSelect/multiSelectContainer/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/multiSelect/multiSelectContainer/index.tsx
+function t(t) {
+	let { children: n, handleContainerFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c, readOnly: l, variant: u, size: d, id: f, prefixExists: p } = t;
+	return /* @__PURE__ */ e("section", {
+		id: f,
+		className: `arkynMultiSelectContainer ${p ? "hasPrefix" : ""} ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`,
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as MultiSelectContainer };

package/dist/modules/components/multiSelect/multiSelectContent/index.js

@@ -0,0 +1,12 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/multiSelect/multiSelectContent/index.tsx
+function t(t) {
+	let { children: n, size: r } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynMultiSelectContent ${r}`,
+		children: n
+	});
+}
+//#endregion
+export { t as MultiSelectContent };

package/dist/modules/components/multiSelect/multiSelectMark/index.js

@@ -0,0 +1,20 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { X as n } from "lucide-react";
+//#region src/components/multiSelect/multiSelectMark/index.tsx
+function r(r) {
+	let { label: i, value: a, disabled: o, handleChangeValue: s } = r;
+	return /* @__PURE__ */ t("div", {
+		className: "arkynMultiSelectMark",
+		children: [i, /* @__PURE__ */ e("button", {
+			disabled: o,
+			type: "button",
+			onClick: (e) => {
+				e.stopPropagation(), s(a);
+			},
+			children: /* @__PURE__ */ e(n, {})
+		})]
+	});
+}
+//#endregion
+export { r as MultiSelectMark };

package/dist/modules/components/multiSelect/multiSelectOption/index.js

@@ -0,0 +1,18 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Check as n } from "lucide-react";
+//#region src/components/multiSelect/multiSelectOption/index.tsx
+function r(r) {
+	let { label: i, optionHasSelected: a, handleChangeValue: o, value: s, size: c } = r;
+	return /* @__PURE__ */ t("div", {
+		onClick: () => o(s),
+		className: `arkynMultiSelectOption ${c} ${a(s) ? "active" : ""}`,
+		children: [
+			i,
+			" ",
+			/* @__PURE__ */ e(n, {})
+		]
+	});
+}
+//#endregion
+export { r as MultiSelectOption };

package/dist/modules/components/multiSelect/multiSelectOptionsContainer/index.js

@@ -0,0 +1,36 @@
+import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
+import { Input as t } from "../../input/index.js";
+/* empty css       */
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Search as s } from "lucide-react";
+//#region src/components/multiSelect/multiSelectOptionsContainer/index.tsx
+function c(c) {
+	let { children: l, isFocused: u, isSearchable: d, search: f, onSearch: p } = c, m = r(null), [h, g] = i("bottom");
+	e(u), n(() => {
+		u && (() => {
+			if (!m.current) return;
+			let e = m.current.parentElement;
+			if (!e) return;
+			let t = e.getBoundingClientRect();
+			window.innerHeight - t.bottom < 300 && t.top > 300 ? g("top") : g("bottom");
+		})();
+	}, [u]);
+	function _(e) {
+		d && p(e.target.value);
+	}
+	return u ? /* @__PURE__ */ o("div", {
+		ref: m,
+		className: `arkynMultiSelectOptionsContainer ${h}`,
+		children: [d && /* @__PURE__ */ a(t, {
+			type: "search",
+			name: "search-select",
+			variant: "underline",
+			leftIcon: s,
+			value: f,
+			onChange: _
+		}), l]
+	}) : null;
+}
+//#endregion
+export { c as MultiSelectOptionsContainer };

package/dist/modules/components/multiSelect/multiSelectOverlay/index.js

@@ -0,0 +1,12 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/multiSelect/multiSelectOverlay/index.tsx
+function t(t) {
+	let { isFocused: n, handleBlur: r } = t;
+	return n ? /* @__PURE__ */ e("aside", {
+		className: "arkynMultiSelectOverlay",
+		onClick: r
+	}) : null;
+}
+//#endregion
+export { t as MultiSelectOverlay };

package/dist/modules/components/multiSelect/multiSelectSpinner/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { Loader2 as t } from "lucide-react";
+//#region src/components/multiSelect/multiSelectSpinner/index.tsx
+function n(n) {
+	let { iconSize: r, isLoading: i } = n;
+	return i ? /* @__PURE__ */ e(t, {
+		className: "arkynMultiSelectSpinner",
+		size: r,
+		strokeWidth: 2.5
+	}) : null;
+}
+//#endregion
+export { n as MultiSelectSpinner };

package/dist/modules/components/pagination/chevronButton/index.js

@@ -0,0 +1,19 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { ChevronLeft as t, ChevronRight as n } from "lucide-react";
+//#region src/components/pagination/chevronButton/index.tsx
+function r(r) {
+	let { orientation: i, handlePageChange: a, disabled: o } = r;
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		className: "arkynChevronPageButton",
+		disabled: o,
+		onClick: a,
+		children: {
+			left: /* @__PURE__ */ e(t, {}),
+			right: /* @__PURE__ */ e(n, {})
+		}[i]
+	});
+}
+//#endregion
+export { r as ChevronButton };

package/dist/modules/components/pagination/currentButton/index.js

@@ -0,0 +1,13 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/pagination/currentButton/index.tsx
+function t({ currentPage: t }) {
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		className: "arkynPaginationCurrentButton",
+		disabled: !0,
+		children: t
+	});
+}
+//#endregion
+export { t as CurrentButton };

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

@@ -0,0 +1,52 @@
+import { ChevronButton as e } from "./chevronButton/index.js";
+import { CurrentButton as t } from "./currentButton/index.js";
+import { PageButton as n } from "./pageButton/index.js";
+import { PaginationService as r } from "./paginationService.js";
+import { Spread as i } from "./spread/index.js";
+/* empty css       */
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/pagination/index.tsx
+function c(c) {
+	let { totalCountRegisters: l, siblingsCount: u, currentPage: d, registerPerPage: f, onChange: p, ...m } = c, { currentPage: h, siblingsCount: g, previousPages: _, nextPages: v, lastPage: y, handlePageChange: b, handleMinusChange: x, handlePlusChange: S } = new r({
+		totalCountRegisters: l,
+		currentPage: d,
+		registerPerPage: f,
+		siblingsCount: u,
+		onChange: p
+	});
+	return /* @__PURE__ */ s("div", {
+		className: "arkynPagination",
+		...m,
+		children: [
+			/* @__PURE__ */ o(e, {
+				orientation: "left",
+				handlePageChange: x,
+				disabled: h <= 1
+			}),
+			h > 1 + g && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(n, {
+				page: 1,
+				handlePageChange: () => b(1)
+			}), h > 2 + g && /* @__PURE__ */ o(i, {})] }),
+			_.map((e) => /* @__PURE__ */ o(n, {
+				page: e,
+				handlePageChange: x
+			}, e)),
+			/* @__PURE__ */ o(t, { currentPage: h }),
+			v.map((e) => /* @__PURE__ */ o(n, {
+				page: e,
+				handlePageChange: S
+			}, e)),
+			h + g < y && /* @__PURE__ */ s(a, { children: [h + 1 + g < y && /* @__PURE__ */ o(i, {}), /* @__PURE__ */ o(n, {
+				page: y,
+				handlePageChange: () => b(y)
+			})] }),
+			/* @__PURE__ */ o(e, {
+				orientation: "right",
+				handlePageChange: S,
+				disabled: h >= y
+			})
+		]
+	});
+}
+//#endregion
+export { c as Pagination };

package/dist/modules/components/pagination/pageButton/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/pagination/pageButton/index.tsx
+function t(t) {
+	let { page: n, handlePageChange: r } = t;
+	return /* @__PURE__ */ e("button", {
+		type: "button",
+		className: "arkynPaginationPageButton",
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as PageButton };

package/dist/modules/components/pagination/paginationService.js

@@ -0,0 +1,34 @@
+//#region src/components/pagination/paginationService.ts
+var e = class {
+	currentPage;
+	totalCountRegisters;
+	registerPerPage;
+	siblingsCount;
+	lastPage;
+	onChange;
+	previousPages;
+	nextPages;
+	generatePagesArray(e, t) {
+		return [...Array(t - e)].map((t, n) => e + n + 1).filter((e) => e > 0);
+	}
+	generatePreviousPages(e, t) {
+		return e > 1 ? this.generatePagesArray(e - 1 - t, e - 1) : [];
+	}
+	generateNextPages(e, t) {
+		return e < this.lastPage ? this.generatePagesArray(e, Math.min(e + t, this.lastPage)) : [];
+	}
+	constructor(e) {
+		this.totalCountRegisters = e.totalCountRegisters, this.currentPage = e.currentPage, this.registerPerPage = e?.registerPerPage || 20, this.siblingsCount = e?.siblingsCount || 2, this.lastPage = Math.ceil(this.totalCountRegisters / this.registerPerPage), this.onChange = e?.onChange, this.previousPages = this.generatePreviousPages(this.currentPage, this.siblingsCount), this.nextPages = this.generateNextPages(this.currentPage, this.siblingsCount);
+	}
+	handlePageChange = (e) => {
+		e < 1 || e > this.lastPage || this.onChange && (this.currentPage = e, this.onChange(this.currentPage));
+	};
+	handlePlusChange = () => {
+		this.currentPage >= this.lastPage || this.onChange && (this.currentPage += 1, this.onChange(this.currentPage));
+	};
+	handleMinusChange = () => {
+		this.currentPage <= 1 || this.onChange && (--this.currentPage, this.onChange(this.currentPage));
+	};
+};
+//#endregion
+export { e as PaginationService };

package/dist/modules/components/pagination/spread/index.js

@@ -0,0 +1,12 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+import { Ellipsis as t } from "lucide-react";
+//#region src/components/pagination/spread/index.tsx
+function n() {
+	return /* @__PURE__ */ e("p", {
+		className: "arkynPaginationSpread",
+		children: /* @__PURE__ */ e(t, {})
+	});
+}
+//#endregion
+export { n as Spread };

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

@@ -0,0 +1,104 @@
+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";
+//#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 ce() {
+		z(!1), F(!1);
+	}
+	function le() {
+		F(!0);
+	}
+	function ue() {
+		F(!1);
+	}
+	function Q(e) {
+		return e.name.toLowerCase().includes(I.toLowerCase());
+	}
+	function $(e) {
+		let t = U.code;
+		return t += f(e || H), t;
+	}
+	return /* @__PURE__ */ c(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,
+			variant: ie,
+			onFocus: oe,
+			children: [
+				/* @__PURE__ */ c(r, {
+					currentCountry: U,
+					onClick: se,
+					size: x
+				}),
+				/* @__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, {
+						country: e,
+						handleChangeValue: () => {
+							W(e), z(!1), V("");
+						},
+						isActive: e.iso === U.iso,
+						size: x
+					}, e.iso)), p.filter((e) => Q(e)).length === 0 && /* @__PURE__ */ c("p", { children: D })]
+				}),
+				/* @__PURE__ */ c(ee, {
+					isOpen: X || b ? !1 : R,
+					onClick: ce
+				}),
+				/* @__PURE__ */ c(i, {
+					id: J,
+					ref: Z,
+					readonly: b,
+					currentCountry: U,
+					value: H,
+					disabled: X,
+					onBlur: ue,
+					onFocus: le,
+					size: x,
+					onChange: (e) => {
+						V(e), T?.($(e));
+					}
+				}),
+				/* @__PURE__ */ c("input", {
+					ref: K,
+					type: "hidden",
+					name: w,
+					value: $()
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { m as PhoneInput };

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

@@ -0,0 +1,13 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/phoneInput/phoneInputContainer/index.tsx
+function t(t) {
+	let { children: n, onFocus: r, disabled: i, isError: a, isLoading: o, isFocused: s, className: c = "", readOnly: l, variant: u, size: d } = t;
+	return /* @__PURE__ */ e("section", {
+		className: `arkynPhoneInputContainer ${u} ${d} ${i || l || o ? "opacity" : ""} ${a ? "errored" : ""} ${s ? "focused" : ""} ${c}`.trim(),
+		onClick: r,
+		children: n
+	});
+}
+//#endregion
+export { t as PhoneInputContainer };

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

@@ -0,0 +1,12 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/phoneInput/phoneInputCountriesOverlay/index.tsx
+function t(t) {
+	let { isOpen: n, onClick: r } = t;
+	return n ? /* @__PURE__ */ e("aside", {
+		className: "arkynPhoneInputCountriesOverlay",
+		onClick: r
+	}) : null;
+}
+//#endregion
+export { t as PhoneInputCountriesOverlay };

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

@@ -0,0 +1,24 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Check as n } from "lucide-react";
+//#region src/components/phoneInput/phoneInputCountryOption/index.tsx
+function r(r) {
+	let { country: i, isActive: a, handleChangeValue: o, size: s } = r;
+	return /* @__PURE__ */ t("div", {
+		onClick: () => o(i),
+		className: `arkynPhoneInputCountryOption ${s} ${a ? "active" : ""}`,
+		children: [
+			/* @__PURE__ */ e("img", {
+				src: i.flag,
+				alt: i.name,
+				className: "flag"
+			}),
+			i.name,
+			" ",
+			/* @__PURE__ */ e("span", { children: i.code }),
+			/* @__PURE__ */ e(n, { className: "check" })
+		]
+	});
+}
+//#endregion
+export { r as PhoneInputCountryOption };