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

package/dist/modules/components/fullCalendar/weekCalendar/weekCalendarTableTd/index.js

@@ -0,0 +1,35 @@
+import { useFullCalendar as e } from "../../_fullCalendarProvider.js";
+import { WeekCalendarEvent as t } from "../weekCalendarEvent/index.js";
+/* empty css       */
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/fullCalendar/weekCalendar/weekCalendarTableTd/index.tsx
+function r(r) {
+	let { day: i, month: a, year: o, dayOwner: s, timeInMinutes: c } = r, { blockedTimestamps: l, onClickDate: u } = e();
+	function d() {
+		let e = new Date(o, a, i);
+		return l.some((t) => e >= t.initialDate && e <= t.endDate);
+	}
+	function f(e) {
+		if (e.stopPropagation(), !d() && u) {
+			let e = new Date(o, a, i);
+			e.setHours(0, c, 0, 0), u(e);
+		}
+	}
+	return /* @__PURE__ */ n("td", {
+		className: `arkynWeekCalendarTableTd ${s}  ${d() ? "blocked" : ""}`,
+		"data-day": i,
+		"data-time": c,
+		onClick: f,
+		children: /* @__PURE__ */ n("div", {
+			className: "arkynWeekCalendarTableTdContent",
+			children: /* @__PURE__ */ n(t, {
+				day: i,
+				month: a,
+				year: o,
+				timeInMinutes: c
+			})
+		})
+	});
+}
+//#endregion
+export { r as WeekCalendarTableTd };

package/dist/modules/components/googleAnalytics/googleAnalytics.client.js

@@ -0,0 +1,7 @@
+import { GoogleAnalytics as e } from "./googleAnalytics.js";
+//#region src/components/googleAnalytics/googleAnalytics.client.tsx
+function t(t) {
+	return new e().initialize(t), null;
+}
+//#endregion
+export { t as GoogleAnalyticsClient };

package/dist/modules/components/googleAnalytics/googleAnalytics.js

@@ -0,0 +1,18 @@
+import { generateGAElements as e } from "./snippets/generateGAElements.js";
+//#region src/components/googleAnalytics/googleAnalytics.tsx
+var t = class {
+	initializeAsyncScript(e) {
+		let t = document.createElement("script");
+		return t.async = !0, t.src = e, t;
+	}
+	initializeInlineScript(e) {
+		let t = document.createElement("script");
+		return t.innerHTML = e, t;
+	}
+	initialize(t) {
+		let { measurementId: n } = t, r = e({ measurementId: n }), i = this.initializeAsyncScript(r.src), a = this.initializeInlineScript(r.script);
+		document.head.appendChild(i), document.head.appendChild(a);
+	}
+};
+//#endregion
+export { t as GoogleAnalytics };

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

@@ -0,0 +1,10 @@
+import { ClientOnly as e } from "../clientOnly.js";
+import { GoogleAnalyticsClient as t } from "./googleAnalytics.client.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/googleAnalytics/index.tsx
+function r(r) {
+	let { measurementId: i, showInDevMode: a = !1 } = r;
+	return process.env.NODE_ENV !== "production" && !a ? null : /* @__PURE__ */ n(e, { children: () => /* @__PURE__ */ n(t, { measurementId: i }) });
+}
+//#endregion
+export { r as GoogleAnalytics };

package/dist/modules/components/googleAnalytics/snippets/generateGAElements.js

@@ -0,0 +1,14 @@
+//#region src/components/googleAnalytics/snippets/generateGAElements.ts
+function e(e) {
+	let { measurementId: t } = e;
+	return t || console.warn("Google Analytics Measurement ID is required"), {
+		src: `https://www.googletagmanager.com/gtag/js?id=${t}`,
+		script: `
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '${t}');`
+	};
+}
+//#endregion
+export { e as generateGAElements };

package/dist/modules/components/googleTagManager/googleTagManager.client.js

@@ -0,0 +1,7 @@
+import { GoogleTagManager as e } from "./googleTagManager.js";
+//#region src/components/googleTagManager/googleTagManager.client.tsx
+function t(t) {
+	return new e().initialize(t), null;
+}
+//#endregion
+export { t as GoogleTagManagerClient };

package/dist/modules/components/googleTagManager/googleTagManager.js

@@ -0,0 +1,45 @@
+import { appendToDataLayer as e } from "./snippets/appendToDataLayer.js";
+import { generateGTMElements as t } from "./snippets/generateGTMElements.js";
+//#region src/components/googleTagManager/googleTagManager.tsx
+var n = class {
+	initializeDataScript(e) {
+		let t = document.createElement("script");
+		return t.innerHTML = e, t;
+	}
+	initializeGTMElements(e) {
+		let n = t(e);
+		return {
+			noScript: () => {
+				let e = document.createElement("noscript");
+				return e.innerHTML = n.iframe, e;
+			},
+			script: () => {
+				let e = document.createElement("script");
+				return e.innerHTML = n.script, e;
+			},
+			dataScript: this.initializeDataScript(n.dataLayerVar)
+		};
+	}
+	initializeDataLayer(t) {
+		let { dataLayer: n, dataLayerName: r } = t;
+		if (window[r]) return window[r].push(n);
+		let i = e({
+			dataLayer: n,
+			dataLayerName: r
+		}), a = this.initializeDataScript(i);
+		document.head.insertBefore(a, document.head.childNodes[0]);
+	}
+	initialize(e) {
+		let { events: t, gtmId: n, dataLayer: r, auth: i = "", preview: a = "", dataLayerName: o = "dataLayer" } = e, s = this.initializeGTMElements({
+			id: n,
+			events: t,
+			dataLayer: r || void 0,
+			dataLayerName: o,
+			auth: i,
+			preview: a
+		});
+		r && document.head.appendChild(s.dataScript), document.head.insertBefore(s.script(), document.head.childNodes[0]), document.body.insertBefore(s.noScript(), document.body.childNodes[0]);
+	}
+};
+//#endregion
+export { n as GoogleTagManager };

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

@@ -0,0 +1,17 @@
+import { ClientOnly as e } from "../clientOnly.js";
+import { GoogleTagManagerClient as t } from "./googleTagManager.client.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/googleTagManager/index.tsx
+function r(r) {
+	let { gtmId: i, auth: a = "", preview: o = "", dataLayerName: s = "dataLayer", events: c = {}, dataLayer: l = {}, showInDevMode: u = !1 } = r;
+	return process.env.NODE_ENV !== "production" && !u ? null : /* @__PURE__ */ n(e, { children: () => /* @__PURE__ */ n(t, {
+		auth: a,
+		dataLayer: l,
+		dataLayerName: s,
+		events: c,
+		gtmId: i,
+		preview: o
+	}) });
+}
+//#endregion
+export { r as GoogleTagManager };

package/dist/modules/components/googleTagManager/snippets/appendToDataLayer.js

@@ -0,0 +1,9 @@
+//#region src/components/googleTagManager/snippets/appendToDataLayer.ts
+function e(e) {
+	let { dataLayer: t, dataLayerName: n } = e;
+	return `
+  window.${n} = window.${n} || [];
+  window.${n}.push(${JSON.stringify(t)})`;
+}
+//#endregion
+export { e as appendToDataLayer };

package/dist/modules/components/googleTagManager/snippets/generateGTMElements.js

@@ -0,0 +1,23 @@
+import { appendToDataLayer as e } from "./appendToDataLayer.js";
+//#region src/components/googleTagManager/snippets/generateGTMElements.ts
+function t(t) {
+	let { id: n, events: r, dataLayer: i, dataLayerName: a, preview: o, auth: s } = t, c = `&gtm_auth=${s}`, l = `&gtm_preview=${o}`;
+	return n || console.warn("GTM Id is required"), {
+		iframe: `
+    <iframe src="https://www.googletagmanager.com/ns.html?id=${n}${c}${l}&gtm_cookies_win=x"
+      height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>`,
+		script: `
+    (function(w,d,s,l,i){w[l]=w[l]||[];
+      w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js', ${JSON.stringify(r).slice(1, -1)}});
+      var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
+      j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+'${c}${l}&gtm_cookies_win=x';
+      f.parentNode.insertBefore(j,f);
+    })(window,document,'script','${a}','${n}');`,
+		dataLayerVar: e({
+			dataLayer: i,
+			dataLayerName: a
+		})
+	};
+}
+//#endregion
+export { t as generateGTMElements };

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

@@ -0,0 +1,32 @@
+/* empty css       */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Loader2 as n } from "lucide-react";
+//#region src/components/iconButton/index.tsx
+function r(r) {
+	let { isLoading: i = !1, scheme: a = "primary", variant: o = "solid", size: s = "md", icon: c, disabled: l, className: u = "", ...d } = r, f = {
+		xs: 12,
+		sm: 16,
+		md: 20,
+		lg: 24
+	}, p = `arkynIconButton ${o} ${a} ${s} ${i ? "loadingTrue" : "loadingFalse"} ${u}`;
+	return /* @__PURE__ */ t("button", {
+		disabled: l || i,
+		className: p.trim(),
+		...d,
+		children: [/* @__PURE__ */ e("div", {
+			className: "arkynIconButtonSpinner",
+			children: /* @__PURE__ */ e(n, {
+				size: f[s],
+				strokeWidth: 2.5
+			})
+		}), /* @__PURE__ */ e("div", {
+			className: "arkynIconButtonContent",
+			children: /* @__PURE__ */ e(c, {
+				size: f[s],
+				strokeWidth: 2.5
+			})
+		})]
+	});
+}
+//#endregion
+export { r as IconButton };

package/dist/modules/components/imageUpload/hasFileContent/index.js

@@ -0,0 +1,47 @@
+import { Button as e } from "../../button/index.js";
+import { IconButton as t } from "../../iconButton/index.js";
+import { Tooltip as n } from "../../tooltip/index.js";
+/* empty css       */
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { RefreshCw as a } from "lucide-react";
+//#region src/components/imageUpload/hasFileContent/index.tsx
+function o(o) {
+	let { disabled: s, filePath: c, isLoading: l, acceptImage: u, changeImageButtonText: d, handleSelectFile: f, reSendImage: p } = o;
+	function m() {
+		if (s) return;
+		let e = document.createElement("input");
+		e.type = "file", e.accept = u, e.onchange = (e) => {
+			let t = e.target.files?.[0];
+			t && f(t);
+		}, e.click();
+	}
+	return /* @__PURE__ */ i("div", {
+		className: "arkynImageUploadHasFileContent",
+		style: { backgroundImage: `url("${c}")` },
+		children: [p && /* @__PURE__ */ r(n, {
+			orientation: "bottom",
+			text: "Reenviar imagem",
+			children: /* @__PURE__ */ r(t, {
+				type: "button",
+				"aria-label": "resend image",
+				variant: "outline",
+				scheme: "danger",
+				size: "sm",
+				isLoading: l,
+				onClick: p,
+				icon: a,
+				disabled: s
+			})
+		}), /* @__PURE__ */ r(e, {
+			isLoading: l,
+			onClick: m,
+			variant: "outline",
+			size: "sm",
+			type: "button",
+			disabled: s,
+			children: d
+		})]
+	});
+}
+//#endregion
+export { o as HasFileContent };

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

@@ -0,0 +1,66 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { FieldTemplate as t } from "../../services/fieldTemplate.js";
+import { HasFileContent as n } from "./hasFileContent/index.js";
+import { NoFileContent as r } from "./noFileContent/index.js";
+/* empty css       */
+import { useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/imageUpload/index.tsx
+function s(s) {
+	let { name: c, defaultValue: l = "", label: u, showAsterisk: d = !1, action: f, fileName: p = "file", className: m = "", method: h = "POST", acceptImage: g = "image/*", fileResponseName: _ = "url", changeImageButtonText: v = "Alterar imagem", selectImageButtonText: y = "Selecionar imagem", dropImageText: b = "Ou arraste e solte a imagem aqui", onChange: x, disabled: S = !1, unShowFieldTemplate: C = !1, orientation: w = "vertical" } = s, { fieldErrors: T } = e(), E = T?.[c], [D, O] = i(l), [k, A] = i(""), [j, M] = i(null), [N, P] = i(l), [F, I] = i(!1);
+	async function L(e) {
+		if (S) return;
+		I(!0), M(e), A("");
+		let t = new FormData();
+		t.append(p, e), await fetch(f, {
+			method: h,
+			body: t
+		}).then(async (e) => await e.json()).then((e) => {
+			e?.error ? A(e.error) : O(e?.[_]), x?.(e?.[_]);
+		}).catch((e) => {
+			console.error(e), A("Erro ao enviar imagem");
+		}).finally(() => I(!1));
+	}
+	function R(e) {
+		S || (P(URL.createObjectURL(e)), L(e));
+	}
+	let z = E || k;
+	return /* @__PURE__ */ a(t, {
+		name: c,
+		label: u,
+		showAsterisk: d,
+		className: m,
+		errorMessage: z,
+		unShowFieldTemplate: C,
+		orientation: w,
+		children: /* @__PURE__ */ o("div", {
+			className: `arkynImageUpload ${z ? "hasError" : "noHasError"} ${N ? "hasImage" : "noHasImage"}`,
+			children: [
+				/* @__PURE__ */ a("input", {
+					type: "hidden",
+					name: c,
+					value: D || ""
+				}),
+				!N && /* @__PURE__ */ a(r, {
+					disabled: S,
+					isLoading: F,
+					acceptImage: g,
+					dropImageText: b,
+					handleSelectFile: R,
+					selectImageButtonText: y
+				}),
+				N && /* @__PURE__ */ a(n, {
+					disabled: S,
+					isLoading: F,
+					acceptImage: g,
+					filePath: N,
+					handleSelectFile: R,
+					changeImageButtonText: v,
+					reSendImage: z && j ? () => L(j) : void 0
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { s as ImageUpload };

package/dist/modules/components/imageUpload/noFileContent/index.js

@@ -0,0 +1,36 @@
+import { Button as e } from "../../button/index.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/imageUpload/noFileContent/index.tsx
+function r(r) {
+	let { dropImageText: i, isLoading: a, acceptImage: o, handleSelectFile: s, selectImageButtonText: c, disabled: l } = r;
+	function u(e) {
+		if (l) return;
+		e.preventDefault();
+		let t = e.dataTransfer.files[0];
+		t && s(t);
+	}
+	function d() {
+		if (l) return;
+		let e = document.createElement("input");
+		e.type = "file", e.accept = o, e.onchange = (e) => {
+			let t = e.target.files?.[0];
+			t && s(t);
+		}, e.click();
+	}
+	return /* @__PURE__ */ n("div", {
+		onDrop: u,
+		className: "arkynImageUploadNoFileContent",
+		children: [/* @__PURE__ */ t(e, {
+			isLoading: a,
+			onClick: d,
+			variant: "ghost",
+			size: "sm",
+			type: "button",
+			disabled: l,
+			children: c
+		}), /* @__PURE__ */ t("p", { children: i })]
+	});
+}
+//#endregion
+export { r as NoFileContent };

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

@@ -0,0 +1,93 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { IconRenderer as t } from "../../services/iconRenderer.js";
+import { FieldTemplate as n } from "../../services/fieldTemplate.js";
+/* empty css      */
+import { useId as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Loader2 as c } from "lucide-react";
+//#region src/components/input/index.tsx
+function l(l) {
+	let { name: u, disabled: d, title: f, style: p, variant: m = "solid", label: h, className: g = "", prefix: _, suffix: v, isLoading: y = !1, leftIcon: b, readOnly: x, onFocus: S, onBlur: C, unShowFieldTemplate: w = !1, errorMessage: T, showAsterisk: E, rightIcon: D, type: O = "text", size: k = "md", id: A, value: j, placeholder: M, orientation: N, ...P } = l, { fieldErrors: F } = e(), [I, L] = a(!1), R = i(null), z = r(), B = A || z, V = T || F?.[u], H = !!V, U = d || y, W = {
+		md: 20,
+		lg: 20
+	}[k], G = D ? "right" : "left", K = G === "left" && y, q = G === "right" && y;
+	function J() {
+		U || !R?.current || (L(!0), R.current.focus());
+	}
+	function Y(e) {
+		L(!0), S && S(e);
+	}
+	function X(e) {
+		L(!1), C && C(e);
+	}
+	return O === "hidden" ? /* @__PURE__ */ o("input", {
+		style: { display: "none" },
+		readOnly: !0,
+		type: "text",
+		ref: R,
+		...P
+	}) : /* @__PURE__ */ o(n, {
+		name: u,
+		label: h,
+		showAsterisk: E,
+		className: g,
+		errorMessage: V,
+		unShowFieldTemplate: w,
+		orientation: N,
+		children: /* @__PURE__ */ s("section", {
+			title: f,
+			style: p,
+			onClick: J,
+			className: `arkynInput ${_ ? "hasPrefix" : ""} ${d ? "disabled" : ""} ${v ? "hasSuffix" : ""} ${m} ${k} ${U || x || y ? "opacity" : ""} ${H ? "errored" : ""} ${I ? "focused" : ""}`,
+			children: [
+				/* @__PURE__ */ o(t, {
+					iconSize: W,
+					icon: _,
+					className: "prefix"
+				}),
+				/* @__PURE__ */ o(t, {
+					show: K,
+					iconSize: W,
+					className: "spinner",
+					icon: c
+				}),
+				/* @__PURE__ */ o(t, {
+					show: !y,
+					icon: b,
+					iconSize: W
+				}),
+				/* @__PURE__ */ o("input", {
+					disabled: U,
+					readOnly: x,
+					ref: R,
+					onFocus: Y,
+					onBlur: X,
+					type: O,
+					id: B,
+					name: u,
+					placeholder: U && j || M,
+					value: U ? void 0 : j,
+					...P
+				}),
+				/* @__PURE__ */ o(t, {
+					show: !y,
+					icon: D,
+					iconSize: W
+				}),
+				/* @__PURE__ */ o(t, {
+					show: q,
+					iconSize: W,
+					className: "spinner",
+					icon: c
+				}),
+				/* @__PURE__ */ o(t, {
+					iconSize: W,
+					icon: v,
+					className: "suffix"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { l as Input };

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

@@ -0,0 +1,29 @@
+import { ClientOnly as e } from "../clientOnly.js";
+import { ClientMapView as t } from "./mapView.client.js";
+/* empty css       */
+import { jsx as n } from "react/jsx-runtime";
+import { MapPinned as r } from "lucide-react";
+//#region src/components/mapView/index.tsx
+function i({ className: e }) {
+	return /* @__PURE__ */ n("div", {
+		className: `arkynMapViewPinnedEmpty ${e}`,
+		children: /* @__PURE__ */ n(r, {})
+	});
+}
+function a(r) {
+	let { coordinates: a, zoom: o = 18, accessToken: s, className: c, onMarkerClick: l, ...u } = r;
+	if (!a) return /* @__PURE__ */ n(i, { className: c });
+	let d = Array.isArray(a) ? a : [a];
+	return d.length === 0 ? /* @__PURE__ */ n(i, { className: c }) : /* @__PURE__ */ n(e, {
+		fallback: /* @__PURE__ */ n(i, { className: c }),
+		children: () => /* @__PURE__ */ n(t, {
+			accessToken: s,
+			coordinates: d,
+			center: d[0],
+			onMarkerClick: l,
+			...u
+		})
+	});
+}
+//#endregion
+export { a as MapView };

package/dist/modules/components/mapView/mapView.client.js

@@ -0,0 +1,56 @@
+/* empty css       */
+import { useEffect as e, useRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import r from "mapbox-gl";
+import { createRoot as i } from "react-dom/client";
+//#region src/components/mapView/mapView.client.tsx
+function a({ center: a, coordinates: o, onMarkerClick: s, accessToken: c, ...l }) {
+	let u = t(null), d = t(null), f = a || o[0];
+	return e(() => (r.accessToken = c, u.current = new r.Map({
+		container: d.current,
+		style: "mapbox://styles/mapbox/light-v11",
+		center: [f.lng, f.lat],
+		zoom: 13,
+		language: "pt-BR"
+	}), o.forEach((e) => {
+		let { lat: t, lng: n, popUp: a } = e, o = document.createElement("img");
+		o.className = "arkynMarker", o.src = "https://i.postimg.cc/mgKggjk7/Pin.png";
+		let c = new r.Marker(o).setLngLat([n, t]).addTo(u.current);
+		if (a) {
+			let e = document.createElement("div");
+			i(e).render(a);
+			let t = new r.Popup({
+				offset: 25,
+				closeButton: !1,
+				className: "arkynMapViewPopup"
+			}).setDOMContent(e);
+			c.setPopup(t);
+		}
+		o.addEventListener("click", () => {
+			s && s(e), u.current?.flyTo({
+				center: [n, t],
+				zoom: 15,
+				duration: 1200
+			}), c.togglePopup();
+		});
+	}), () => {
+		u.current?.remove();
+	}), [
+		f.lat,
+		s,
+		o.forEach,
+		f.lng,
+		c
+	]), /* @__PURE__ */ n("div", {
+		id: "map-container",
+		ref: d,
+		style: {
+			height: "100%",
+			width: "100%",
+			borderRadius: "8px"
+		},
+		...l
+	});
+}
+//#endregion
+export { a as ClientMapView };

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

@@ -0,0 +1,102 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { FieldError as t } from "../fieldError/index.js";
+import { FieldLabel as n } from "../fieldLabel/index.js";
+import { FieldWrapper as r } from "../fieldWrapper/index.js";
+import { IconRenderer as i } from "../../services/iconRenderer.js";
+/* empty css      */
+import { forwardRef as a, useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Loader2 as d } from "lucide-react";
+import { InputMask as f } from "@react-input/mask";
+//#region src/components/maskedInput/index.tsx
+var p = a((e, t) => /* @__PURE__ */ l("input", {
+	ref: t,
+	...e
+}));
+function m(a) {
+	let { name: m, disabled: h, title: g, style: _, variant: v = "solid", separate: y, mask: b, showMask: x, replacement: S, label: C, className: w = "", prefix: T, suffix: E, isLoading: D = !1, leftIcon: O, readOnly: k, onFocus: A, onBlur: j, errorMessage: M, defaultValue: N, showAsterisk: P, rightIcon: F, size: I = "md", id: L, value: R, placeholder: z, ...B } = a, { fieldErrors: V } = e(), [H, U] = c(!1), W = s(null), G = o(), K = L || G, q = M || V?.[m], J = !!q, Y = h || D, X = {
+		md: 20,
+		lg: 20
+	}[I], Z = F ? "right" : "left", Q = Z === "left" && D, $ = Z === "right" && D;
+	function ee() {
+		Y || !W?.current || (U(!0), W.current.focus());
+	}
+	function te(e) {
+		U(!0), A && A(e);
+	}
+	function ne(e) {
+		U(!1), j && j(e);
+	}
+	let re = `arkynMaskedInput ${T ? "hasPrefix" : ""} ${E ? "hasSuffix" : ""} ${v} ${I} ${Y || k || D ? "opacity" : ""} ${J ? "errored" : ""} ${H ? "focused" : ""}`;
+	return /* @__PURE__ */ u(r, {
+		className: w,
+		children: [
+			C && /* @__PURE__ */ l(n, {
+				showAsterisk: P,
+				htmlFor: K,
+				children: C
+			}),
+			/* @__PURE__ */ u("section", {
+				title: g,
+				style: _,
+				onClick: ee,
+				className: re,
+				children: [
+					/* @__PURE__ */ l(i, {
+						iconSize: X,
+						icon: T,
+						className: "prefix"
+					}),
+					/* @__PURE__ */ l(i, {
+						show: Q,
+						iconSize: X,
+						className: "spinner",
+						icon: d
+					}),
+					/* @__PURE__ */ l(i, {
+						show: !D,
+						icon: O,
+						iconSize: X
+					}),
+					/* @__PURE__ */ l(f, {
+						component: p,
+						mask: b,
+						replacement: S,
+						separate: y,
+						showMask: x,
+						ref: W,
+						onFocus: te,
+						onBlur: ne,
+						disabled: Y,
+						readOnly: k,
+						id: K,
+						name: m,
+						defaultValue: N || void 0,
+						placeholder: Y && R || z,
+						value: Y ? void 0 : R,
+						...B
+					}),
+					/* @__PURE__ */ l(i, {
+						show: !D,
+						icon: F,
+						iconSize: X
+					}),
+					/* @__PURE__ */ l(i, {
+						show: $,
+						iconSize: X,
+						className: "spinner",
+						icon: d
+					}),
+					/* @__PURE__ */ l(i, {
+						iconSize: X,
+						icon: E,
+						className: "suffix"
+					})
+				]
+			}),
+			q && /* @__PURE__ */ l(t, { children: q })
+		]
+	});
+}
+//#endregion
+export { m as MaskedInput };