npm - @arkyn/components - Versions diffs - 3.0.8 → 3.0.9 - Mend

@arkyn/components 3.0.8 → 3.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/dist/modules/components/drawer/drawerContainer/index.js CHANGED Viewed

@@ -1,39 +1,47 @@
 import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
-import { DrawerProvider as t } from "../drawerContext.js";
+import { useEscapeKey as t } from "../../../hooks/useEscapeKey.js";
+import { useFocusTrap as n } from "../../../hooks/useFocusTrap.js";
+import { DrawerProvider as r } from "../drawerContext.js";
 /* empty css       */
-import { useEffect as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/drawer/drawerContainer/index.tsx
-function o(o) {
-	let { isVisible: s, makeInvisible: c, orientation: l = "left", children: u, className: d, ...f } = o, [p, m] = r(s), [h, g] = r(!1);
-	n(() => {
-		s ? (m(!0), g(!1)) : p && g(!0);
-	}, [s, p]), e(s);
-	function _(e) {
-		e.target === e.currentTarget && h && (g(!1), m(!1), c());
+function l(l) {
+	let { isVisible: u, makeInvisible: d, orientation: f = "left", children: p, className: m, ...h } = l, [g, _] = o(u), [v, y] = o(!1), b = a(null);
+	i(() => {
+		u ? (_(!0), y(!1)) : g && y(!0);
+	}, [u, g]), e(u);
+	let x = g && !v;
+	t(x, () => y(!0)), n(x, b);
+	function S(e) {
+		e.target === e.currentTarget && v && (y(!1), _(!1), d());
 	}
-	return p ? /* @__PURE__ */ i(t, {
-		makeInvisible: () => g(!0),
-		children: /* @__PURE__ */ a("aside", {
+	return g ? /* @__PURE__ */ s(r, {
+		makeInvisible: () => y(!0),
+		children: /* @__PURE__ */ c("aside", {
 			className: [
 				"arkynDrawerContainer",
-				l,
-				h ? "exiting" : "",
-				d
+				f,
+				v ? "exiting" : "",
+				m
 			].filter(Boolean).join(" "),
-			...f,
-			children: [/* @__PURE__ */ i("div", {
+			...h,
+			children: [/* @__PURE__ */ s("div", {
 				className: "arkynDrawerContainerOverlay",
-				onClick: () => g(!0),
-				onAnimationEnd: _
-			}), /* @__PURE__ */ i("div", {
+				onClick: () => y(!0),
+				onAnimationEnd: S
+			}), /* @__PURE__ */ s("div", {
+				ref: b,
+				role: "dialog",
+				"aria-modal": "true",
+				tabIndex: -1,
 				className: "arkynDrawerContainerContent",
-				children: u
+				children: p
 			})]
 		})
 	}) : null;
 }
 //#endregion
-export { o as DrawerContainer };
+export { l as DrawerContainer };
 //# sourceMappingURL=index.js.map

package/dist/modules/components/drawer/drawerContainer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/drawer/drawerContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { DrawerProvider } from \"../drawerContext\";\nimport \"./styles.css\";\n\ntype DrawerContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the drawer is visible. /\n\tisVisible: boolean;\n\t/* Callback invoked when the overlay is clicked to close the drawer. /\n\tmakeInvisible: () => void;\n\t/* Side from which the drawer slides in. @default \"left\" /\n\torientation?: \"left\" \| \"right\";\n};\n\n/\n DrawerContainer, animated slide-in panel rendered over an overlay backdrop.\n \n Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `DrawerHeader` (close button).\n \n @param props.isVisible - Whether the drawer is open. Required.\n * @param props.makeInvisible - Called when the overlay or close button is clicked. Required.\n * @param props.orientation - Slide direction. Default: `\"left\"`\n \n ...Other valid HTML `<aside>` properties\n \n @returns DrawerContainer JSX element.\n \n @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n \n <DrawerContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)} orientation=\"right\">\n * <DrawerHeader><h2>Navigation</h2></DrawerHeader>\n * <nav>...</nav>\n * </DrawerContainer>\n * ```\n */\n\nfunction DrawerContainer(props: DrawerContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\torientation = \"left\",\n\t\tchildren,\n\t\tclassName: baseClassName,\n\t\t...rest\n\t} = props;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynDrawerContainer\",\n\t\torientation,\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<DrawerProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynDrawerContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div ~~className~~=\"arkynDrawerContainerContent\">{children}</div>\n\t\t\t</aside>\n\t\t</DrawerProvider>\n\t);\n}\n\nexport { DrawerContainer };\n"],"mappings":"~~;;;;;;AA6CA~~,SAAS,EAAgB,GAA6B;CACrD,IAAM,EACL,cACA,kBACA,iBAAc,QACd,aACA,WAAW,GACX,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK;~~CAWhD~~,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAaA,OAXK,IAYJ,kBAAC,GAAD;EAAgB,qBAAqB,EAAa,EAAI;YACrD,kBAAC,SAAD;GAAkB,WAXF;IACjB;IACA;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa;GAAW,GAAI;aAAjC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;~~IAAK~~,WAAU;~~IAA+B~~;~~GAAc~~,CAAA,~~CACtD~~;;CACQ,CAAA,~~IArBI~~;~~AAuBtB~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/drawer/drawerContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useEscapeKey } from \"../../../hooks/useEscapeKey\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { DrawerProvider } from \"../drawerContext\";\nimport \"./styles.css\";\n\ntype DrawerContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the drawer is visible. /\n\tisVisible: boolean;\n\t/* Callback invoked when the overlay is clicked to close the drawer. /\n\tmakeInvisible: () => void;\n\t/* Side from which the drawer slides in. @default \"left\" /\n\torientation?: \"left\" \| \"right\";\n};\n\n/\n DrawerContainer, animated slide-in panel rendered over an overlay backdrop.\n \n Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `DrawerHeader` (close button).\n \n @param props.isVisible - Whether the drawer is open. Required.\n * @param props.makeInvisible - Called when the overlay or close button is clicked. Required.\n * @param props.orientation - Slide direction. Default: `\"left\"`\n \n ...Other valid HTML `<aside>` properties\n \n @returns DrawerContainer JSX element.\n \n @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n \n <DrawerContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)} orientation=\"right\">\n * <DrawerHeader><h2>Navigation</h2></DrawerHeader>\n * <nav>...</nav>\n * </DrawerContainer>\n * ```\n */\n\nfunction DrawerContainer(props: DrawerContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\torientation = \"left\",\n\t\tchildren,\n\t\tclassName: baseClassName,\n\t\t...rest\n\t} = props;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tconst isDialogActive = mounted && !isExiting;\n\tuseEscapeKey(isDialogActive, () => setIsExiting(true));\n\tuseFocusTrap(isDialogActive, contentRef);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynDrawerContainer\",\n\t\torientation,\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<DrawerProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynDrawerContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={contentRef}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"arkynDrawerContainerContent\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</aside>\n\t\t</DrawerProvider>\n\t);\n}\n\nexport { DrawerContainer };\n"],"mappings":";;;;;;;;AAgDA,SAAS,EAAgB,GAA6B;CACrD,IAAM,EACL,cACA,kBACA,iBAAc,QACd,aACA,WAAW,GACX,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAa,EAAuB,IAAI;CAW9C,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,IAAM,IAAiB,KAAW,CAAC;CAEnC,AADA,EAAa,SAAsB,EAAa,EAAI,CAAC,GACrD,EAAa,GAAgB,CAAU;CAEvC,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAaA,OAXK,IAYJ,kBAAC,GAAD;EAAgB,qBAAqB,EAAa,EAAI;YACrD,kBAAC,SAAD;GAAkB,WAXF;IACjB;IACA;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa;GAAW,GAAI;aAAjC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;IACC,KAAK;IACL,MAAK;IACL,cAAW;IACX,UAAU;IACV,WAAU;IAET;GACG,CAAA,CACC;;CACQ,CAAA,IA7BI;AA+BtB"}

package/dist/modules/components/facebookPixel/pixel.js CHANGED Viewed

@@ -4,7 +4,7 @@ var e = class {
 	autoConfig;
 	initialized;
 	constructor(e, t) {
-		this.pixelId = e, this.autoConfig = t?.autoConfig || !0, this.initialized = !1;
+		this.pixelId = e, this.autoConfig = t?.autoConfig ?? !0, this.initialized = !1;
 	}
 	loadFacebookPixel() {
 		if (window.fbq) return;

package/dist/modules/components/facebookPixel/pixel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pixel.js","names":[],"sources":["../../../../src/components/facebookPixel/pixel.ts"],"sourcesContent":["import type { Fbq } from \"../../types/defineType\";\n\ntype Options = {\n\tautoConfig?: boolean;\n\tdebug?: boolean;\n};\n\nclass FacebookPixel {\n\tpixelId: string;\n\tautoConfig: boolean;\n\tinitialized: boolean;\n\n\tconstructor(pixelId: string, options?: Options) {\n\t\tthis.pixelId = pixelId;\n\t\tthis.autoConfig = options?.autoConfig \|\| true;\n\t\tthis.initialized = false;\n\t}\n\n\tprivate loadFacebookPixel() {\n\t\t// Verifica se o objeto fbq já está definido no objeto window\n\t\tif (window.fbq) return;\n\n\t\t// Define a função fbq que será usada para enviar eventos ao Facebook Pixel\n\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\tconst fbq: Fbq = ((...args: any[]) => {\n\t\t\t// Se fbq.callMethod estiver definido, chama o método com os argumentos fornecidos\n\t\t\t// Caso contrário, adiciona os argumentos à fila de eventos\n\t\t\tfbq.callMethod ? fbq.callMethod.apply(fbq, args) : fbq.queue.push(args);\n\t\t}) as Fbq;\n\n\t\t// Se o objeto _fbq não estiver definido no objeto window, define-o como fbq\n\t\tif (!window._fbq) window._fbq = fbq;\n\n\t\t// Define propriedades e métodos adicionais para fbq\n\t\tfbq.push = fbq;\n\t\tfbq.loaded = true;\n\t\tfbq.version = \"2.0\";\n\t\tfbq.queue = [];\n\n\t\t// Cria um elemento script e define o atributo src como o URL do script do Facebook Pixel\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.async = true;\n\t\tscript.src = \"https://connect.facebook.net/en_US/fbevents.js\";\n\n\t\t// Busca o primeiro elemento script no documento\n\t\tconst firstScript = document.getElementsByTagName(\"script\")[0];\n\n\t\t// Estoura uma exceção se não houver nenhum elemento script no documento\n\t\tif (!firstScript.parentNode) {\n\t\t\tthrow new Error(\"No script tag found in the document\");\n\t\t}\n\n\t\t// Insere o elemento script no início do documento\n\t\tfirstScript.parentNode.insertBefore(script, firstScript);\n\t\twindow.fbq = fbq;\n\t}\n\n\tinit(advancedMatching: object = {}) {\n\t\t// Verifica se o pixel já foi inicializado\n\t\tthis.initialized = typeof window !== \"undefined\" && !!window.fbq;\n\n\t\t// Carrega o Facebook Pixel\n\t\tthis.loadFacebookPixel();\n\n\t\t// Estoura uma exceção se o fbq não estiver definido\n\t\tif (!window.fbq) {\n\t\t\tthrow new Error(\"window.fbq is not defined\");\n\t\t}\n\n\t\t// Inicializa o pixel com o ID fornecido\n\t\tif (this.autoConfig === false) {\n\t\t\twindow.fbq(\"set\", \"autoConfig\", false, this.pixelId);\n\t\t} else {\n\t\t\twindow.fbq(\"init\", this.pixelId, advancedMatching);\n\t\t}\n\n\t\t// Marca o pixel como inicializado\n\t\tthis.initialized = true;\n\t}\n\n\tpageView() {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"track\", \"PageView\");\n\t}\n\n\ttrack(title: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"track\", title, data);\n\t}\n\n\ttrackSingle(pixel: string, title: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"trackSingle\", pixel, title, data);\n\t}\n\n\ttrackCustom(event: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"trackCustom\", event, data);\n\t}\n\n\ttrackSingleCustom(pixel: string, event: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"trackSingle\", pixel, event, data);\n\t}\n\n\tgrantConsent() {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"consent\", \"grant\");\n\t}\n\n\trevokeConsent() {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"consent\", \"revoke\");\n\t}\n}\n\nexport { FacebookPixel };\n"],"mappings":";AAOA,IAAM,IAAN,MAAoB;CACnB;CACA;CACA;CAEA,YAAY,GAAiB,GAAmB;EAG/C,AAFA,KAAK,UAAU,GACf,KAAK,aAAa,GAAS,cAAc,IACzC,KAAK,cAAc;CACpB;CAEA,oBAA4B;EAE3B,IAAI,OAAO,KAAK;EAIhB,IAAM,MAAa,GAAG,MAAgB;GAGrC,EAAI,aAAa,EAAI,WAAW,MAAM,GAAK,CAAI,IAAI,EAAI,MAAM,KAAK,CAAI;EACvE;EASA,AANK,OAAO,SAAM,OAAO,OAAO,IAGhC,EAAI,OAAO,GACX,EAAI,SAAS,IACb,EAAI,UAAU,OACd,EAAI,QAAQ,CAAC;EAGb,IAAM,IAAS,SAAS,cAAc,QAAQ;EAE9C,AADA,EAAO,QAAQ,IACf,EAAO,MAAM;EAGb,IAAM,IAAc,SAAS,qBAAqB,QAAQ,CAAC,CAAC;EAG5D,IAAI,CAAC,EAAY,YAChB,MAAU,MAAM,qCAAqC;EAKtD,AADA,EAAY,WAAW,aAAa,GAAQ,CAAW,GACvD,OAAO,MAAM;CACd;CAEA,KAAK,IAA2B,CAAC,GAAG;EAQnC,IANA,KAAK,cAAc,OAAO,SAAW,OAAe,CAAC,CAAC,OAAO,KAG7D,KAAK,kBAAkB,GAGnB,CAAC,OAAO,KACX,MAAU,MAAM,2BAA2B;EAW5C,AAPI,KAAK,eAAe,KACvB,OAAO,IAAI,OAAO,cAAc,IAAO,KAAK,OAAO,IAEnD,OAAO,IAAI,QAAQ,KAAK,SAAS,CAAgB,GAIlD,KAAK,cAAc;CACpB;CAEA,WAAW;EACL,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,SAAS,UAAU;CAC/B;CAEA,MAAM,GAAe,GAAe;EAC9B,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,SAAS,GAAO,CAAI;CAChC;CAEA,YAAY,GAAe,GAAe,GAAe;EACnD,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,eAAe,GAAO,GAAO,CAAI;CAC7C;CAEA,YAAY,GAAe,GAAe;EACpC,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,eAAe,GAAO,CAAI;CACtC;CAEA,kBAAkB,GAAe,GAAe,GAAe;EACzD,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,eAAe,GAAO,GAAO,CAAI;CAC7C;CAEA,eAAe;EACT,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,WAAW,OAAO;CAC9B;CAEA,gBAAgB;EACV,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,WAAW,QAAQ;CAC/B;AACD"}
1	+ {"version":3,"file":"pixel.js","names":[],"sources":["../../../../src/components/facebookPixel/pixel.ts"],"sourcesContent":["import type { Fbq } from \"../../types/defineType\";\n\ntype Options = {\n\tautoConfig?: boolean;\n\tdebug?: boolean;\n};\n\nclass FacebookPixel {\n\tpixelId: string;\n\tautoConfig: boolean;\n\tinitialized: boolean;\n\n\tconstructor(pixelId: string, options?: Options) {\n\t\tthis.pixelId = pixelId;\n\t\tthis.autoConfig = options?.autoConfig ?? true;\n\t\tthis.initialized = false;\n\t}\n\n\tprivate loadFacebookPixel() {\n\t\t// Verifica se o objeto fbq já está definido no objeto window\n\t\tif (window.fbq) return;\n\n\t\t// Define a função fbq que será usada para enviar eventos ao Facebook Pixel\n\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\tconst fbq: Fbq = ((...args: any[]) => {\n\t\t\t// Se fbq.callMethod estiver definido, chama o método com os argumentos fornecidos\n\t\t\t// Caso contrário, adiciona os argumentos à fila de eventos\n\t\t\tfbq.callMethod ? fbq.callMethod.apply(fbq, args) : fbq.queue.push(args);\n\t\t}) as Fbq;\n\n\t\t// Se o objeto _fbq não estiver definido no objeto window, define-o como fbq\n\t\tif (!window._fbq) window._fbq = fbq;\n\n\t\t// Define propriedades e métodos adicionais para fbq\n\t\tfbq.push = fbq;\n\t\tfbq.loaded = true;\n\t\tfbq.version = \"2.0\";\n\t\tfbq.queue = [];\n\n\t\t// Cria um elemento script e define o atributo src como o URL do script do Facebook Pixel\n\t\tconst script = document.createElement(\"script\");\n\t\tscript.async = true;\n\t\tscript.src = \"https://connect.facebook.net/en_US/fbevents.js\";\n\n\t\t// Busca o primeiro elemento script no documento\n\t\tconst firstScript = document.getElementsByTagName(\"script\")[0];\n\n\t\t// Estoura uma exceção se não houver nenhum elemento script no documento\n\t\tif (!firstScript.parentNode) {\n\t\t\tthrow new Error(\"No script tag found in the document\");\n\t\t}\n\n\t\t// Insere o elemento script no início do documento\n\t\tfirstScript.parentNode.insertBefore(script, firstScript);\n\t\twindow.fbq = fbq;\n\t}\n\n\tinit(advancedMatching: object = {}) {\n\t\t// Verifica se o pixel já foi inicializado\n\t\tthis.initialized = typeof window !== \"undefined\" && !!window.fbq;\n\n\t\t// Carrega o Facebook Pixel\n\t\tthis.loadFacebookPixel();\n\n\t\t// Estoura uma exceção se o fbq não estiver definido\n\t\tif (!window.fbq) {\n\t\t\tthrow new Error(\"window.fbq is not defined\");\n\t\t}\n\n\t\t// Inicializa o pixel com o ID fornecido\n\t\tif (this.autoConfig === false) {\n\t\t\twindow.fbq(\"set\", \"autoConfig\", false, this.pixelId);\n\t\t} else {\n\t\t\twindow.fbq(\"init\", this.pixelId, advancedMatching);\n\t\t}\n\n\t\t// Marca o pixel como inicializado\n\t\tthis.initialized = true;\n\t}\n\n\tpageView() {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"track\", \"PageView\");\n\t}\n\n\ttrack(title: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"track\", title, data);\n\t}\n\n\ttrackSingle(pixel: string, title: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"trackSingle\", pixel, title, data);\n\t}\n\n\ttrackCustom(event: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"trackCustom\", event, data);\n\t}\n\n\ttrackSingleCustom(pixel: string, event: string, data?: object) {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"trackSingle\", pixel, event, data);\n\t}\n\n\tgrantConsent() {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"consent\", \"grant\");\n\t}\n\n\trevokeConsent() {\n\t\tif (!this.initialized) return;\n\t\tif (!window.fbq) return;\n\n\t\twindow.fbq(\"consent\", \"revoke\");\n\t}\n}\n\nexport { FacebookPixel };\n"],"mappings":";AAOA,IAAM,IAAN,MAAoB;CACnB;CACA;CACA;CAEA,YAAY,GAAiB,GAAmB;EAG/C,AAFA,KAAK,UAAU,GACf,KAAK,aAAa,GAAS,cAAc,IACzC,KAAK,cAAc;CACpB;CAEA,oBAA4B;EAE3B,IAAI,OAAO,KAAK;EAIhB,IAAM,MAAa,GAAG,MAAgB;GAGrC,EAAI,aAAa,EAAI,WAAW,MAAM,GAAK,CAAI,IAAI,EAAI,MAAM,KAAK,CAAI;EACvE;EASA,AANK,OAAO,SAAM,OAAO,OAAO,IAGhC,EAAI,OAAO,GACX,EAAI,SAAS,IACb,EAAI,UAAU,OACd,EAAI,QAAQ,CAAC;EAGb,IAAM,IAAS,SAAS,cAAc,QAAQ;EAE9C,AADA,EAAO,QAAQ,IACf,EAAO,MAAM;EAGb,IAAM,IAAc,SAAS,qBAAqB,QAAQ,CAAC,CAAC;EAG5D,IAAI,CAAC,EAAY,YAChB,MAAU,MAAM,qCAAqC;EAKtD,AADA,EAAY,WAAW,aAAa,GAAQ,CAAW,GACvD,OAAO,MAAM;CACd;CAEA,KAAK,IAA2B,CAAC,GAAG;EAQnC,IANA,KAAK,cAAc,OAAO,SAAW,OAAe,CAAC,CAAC,OAAO,KAG7D,KAAK,kBAAkB,GAGnB,CAAC,OAAO,KACX,MAAU,MAAM,2BAA2B;EAW5C,AAPI,KAAK,eAAe,KACvB,OAAO,IAAI,OAAO,cAAc,IAAO,KAAK,OAAO,IAEnD,OAAO,IAAI,QAAQ,KAAK,SAAS,CAAgB,GAIlD,KAAK,cAAc;CACpB;CAEA,WAAW;EACL,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,SAAS,UAAU;CAC/B;CAEA,MAAM,GAAe,GAAe;EAC9B,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,SAAS,GAAO,CAAI;CAChC;CAEA,YAAY,GAAe,GAAe,GAAe;EACnD,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,eAAe,GAAO,GAAO,CAAI;CAC7C;CAEA,YAAY,GAAe,GAAe;EACpC,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,eAAe,GAAO,CAAI;CACtC;CAEA,kBAAkB,GAAe,GAAe,GAAe;EACzD,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,eAAe,GAAO,GAAO,CAAI;CAC7C;CAEA,eAAe;EACT,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,WAAW,OAAO;CAC9B;CAEA,gBAAgB;EACV,KAAK,eACL,OAAO,OAEZ,OAAO,IAAI,WAAW,QAAQ;CAC/B;AACD"}

package/dist/modules/components/imageUpload/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/imageUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype ImageUploadProps = {\n\t/** Field name for form submission (stores the uploaded image URL). Required. /\n\tname: string;\n\t/* Server endpoint URL that receives the `multipart/form-data` upload request. Required. /\n\taction: string;\n\t/* Pre-populated image URL displayed as a preview (e.g. an existing avatar). @default \"\" /\n\tdefaultValue?: string \| null;\n\t/* Additional CSS class applied to the wrapper element. /\n\tclassName?: string;\n\t/* Disables file selection and upload. @default false /\n\tdisabled?: boolean;\n\t/* Optional label text displayed above the upload area. /\n\tlabel?: string;\n\t/* Displays an asterisk on the label to signal a required field. @default false /\n\tshowAsterisk?: boolean;\n\t/* Label for the file-picker button after an image is selected. @default \"Alterar imagem\" /\n\tchangeImageButtonText?: string;\n\t/* Label for the file-picker button before an image is selected. @default \"Selecionar imagem\" /\n\tselectImageButtonText?: string;\n\t/* Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte a imagem aqui\" /\n\tdropImageText?: string;\n\t/* HTTP method for the upload request. @default \"POST\" /\n\tmethod?: string;\n\t/* Form-data field name used for the file. @default \"file\" /\n\tfileName?: string;\n\t/* Property name in the server response that contains the image URL. @default \"url\" /\n\tfileResponseName?: string;\n\t/* Accepted image MIME types or extensions (e.g. `\"image/jpeg,image/png\"`). @default \"image/\" /\n\tacceptImage?: string;\n\t/** Callback fired after a successful upload. Receives the image URL returned by the server. /\n\tonChange?: (url: string) => void;\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 \"horizontal\"\n\t /\n\torientation?: \"horizontal\" \| \"vertical\" \| \"horizontalReverse\";\n};\n\n/\n ImageUpload, drag-and-drop image uploader with server upload and image preview.\n \n Sends the file via `fetch` as `multipart/form-data` and stores the returned URL\n * in a hidden `<input>` 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.action - Upload endpoint URL. Required.\n * @param props.defaultValue - Pre-populated image URL displayed as preview.\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `` to the label. Default: false\n @param props.acceptImage - Accepted MIME types or extensions. Default: \"image/\"\n @param props.method - HTTP method. Default: \"POST\"\n * @param props.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.onChange - Callback fired after a successful upload, receives the image URL.\n * @param props.orientation - Layout direction. Default: \"~~horizontal~~\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n @returns ImageUpload JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <ImageUpload name=\"avatar\" action=\"/api/upload/image\" />\n \n // Profile picture with existing image and label\n * <ImageUpload\n * name=\"profilePicture\"\n * action=\"/api/upload/avatar\"\n * label=\"Profile Picture\"\n * showAsterisk\n * defaultValue={user.avatarUrl}\n * selectImageButtonText=\"Choose photo\"\n * onChange={(url) => updateProfile({ avatarUrl: url })}\n * />\n \n // Restricted to JPEG/PNG\n * <ImageUpload\n * name=\"productImage\"\n * action=\"/api/upload/product\"\n * label=\"Product Image\"\n * acceptImage=\"image/jpeg,image/png\"\n * fileResponseName=\"imageUrl\"\n * />\n * ```\n /\n\nfunction ImageUpload(props: ImageUploadProps) {\n\tconst {\n\t\tname,\n\t\tdefaultValue = \"\",\n\t\tlabel,\n\t\tshowAsterisk = false,\n\t\taction,\n\t\tfileName = \"file\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tmethod = \"POST\",\n\t\tacceptImage = \"image/\",\n\t\tfileResponseName = \"url\",\n\t\tchangeImageButtonText = \"Alterar imagem\",\n\t\tselectImageButtonText = \"Selecionar imagem\",\n\t\tdropImageText = \"Ou arraste e solte a imagem aqui\",\n\t\tonChange,\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File \| null>(null);\n\tconst [filePath, setFilePath] = useState(defaultValue);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadImage(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetIsLoading(true);\n\t\tsetFile(file);\n\t\tsetError(\"\");\n\n\t\tconst formData = new FormData();\n\t\tformData.append(fileName, file);\n\n\t\tawait fetch(action, { method: method, body: formData })\n\t\t\t.then(async (response) => await response.json())\n\t\t\t.then((response) => {\n\t\t\t\tif (response?.error) setError(response.error);\n\t\t\t\telse setValue(response?.[fileResponseName]);\n\t\t\t\tonChange?.(response?.[fileResponseName]);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(error);\n\t\t\t\tsetError(\"Erro ao enviar imagem\");\n\t\t\t})\n\t\t\t.finally(() => setIsLoading(false));\n\t}\n\n\tfunction handleSelectFile(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadImage(file);\n\t}\n\n\tconst errorMessage = fieldError \|\| error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasImage\" : \"noHasImage\";\n\tconst className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;\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<div className={className}>\n\t\t\t\t<input type=\"hidden\" name={name} value={value \|\| \"\"} />\n\n\t\t\t\t{!filePath && (\n\t\t\t\t\t<NoFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tdropImageText={dropImageText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectImageButtonText={selectImageButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{filePath && (\n\t\t\t\t\t<HasFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tfilePath={filePath}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tchangeImageButtonText={changeImageButtonText}\n\t\t\t\t\t\treSendImage={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadImage(file) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { ImageUpload };\n"],"mappings":";;;;;;;;AAmGA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,kBAAe,IACf,UACA,kBAAe,IACf,WACA,cAAW,QACX,WAAW,IAAmB,IAC9B,YAAS,QACT,iBAAc,WACd,sBAAmB,OACnB,2BAAwB,kBACxB,2BAAwB,qBACxB,mBAAgB,oCAChB,aACA,cAAW,IACX,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAkB,GAAY;EAC5C,IAAI,GAAU;EAId,AAFA,EAAa,EAAI,GACjB,EAAQ,CAAI,GACZ,EAAS,EAAE;EAEX,IAAM,IAAW,IAAI,SAAS;EAG9B,AAFA,EAAS,OAAO,GAAU,CAAI,GAE9B,MAAM,MAAM,GAAQ;GAAU;GAAQ,MAAM;EAAS,CAAC,CAAC,CACrD,KAAK,OAAO,MAAa,MAAM,EAAS,KAAK,CAAC,CAAC,CAC/C,MAAM,MAAa;GAGnB,AAFI,GAAU,QAAO,EAAS,EAAS,KAAK,IACvC,EAAS,IAAW,EAAiB,GAC1C,IAAW,IAAW,EAAiB;EACxC,CAAC,CAAC,CACD,OAAO,MAAU;GAEjB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,uBAAuB;EACjC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,MAEJ,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;CACvB;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,OAAD;GAAgB,WAAA,oBAdQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAahD;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACE;KACE;KACG;KACK;IACvB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACC;KACE;KACH;KACQ;KACK;KACvB,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;CACS,CAAA;AAEjB"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/imageUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype ImageUploadProps = {\n\t/** Field name for form submission (stores the uploaded image URL). Required. /\n\tname: string;\n\t/* Server endpoint URL that receives the `multipart/form-data` upload request. Required. /\n\taction: string;\n\t/* Pre-populated image URL displayed as a preview (e.g. an existing avatar). @default \"\" /\n\tdefaultValue?: string \| null;\n\t/* Additional CSS class applied to the wrapper element. /\n\tclassName?: string;\n\t/* Disables file selection and upload. @default false /\n\tdisabled?: boolean;\n\t/* Optional label text displayed above the upload area. /\n\tlabel?: string;\n\t/* Displays an asterisk on the label to signal a required field. @default false /\n\tshowAsterisk?: boolean;\n\t/* Label for the file-picker button after an image is selected. @default \"Alterar imagem\" /\n\tchangeImageButtonText?: string;\n\t/* Label for the file-picker button before an image is selected. @default \"Selecionar imagem\" /\n\tselectImageButtonText?: string;\n\t/* Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte a imagem aqui\" /\n\tdropImageText?: string;\n\t/* HTTP method for the upload request. @default \"POST\" /\n\tmethod?: string;\n\t/* Form-data field name used for the file. @default \"file\" /\n\tfileName?: string;\n\t/* Property name in the server response that contains the image URL. @default \"url\" /\n\tfileResponseName?: string;\n\t/* Accepted image MIME types or extensions (e.g. `\"image/jpeg,image/png\"`). @default \"image/\" /\n\tacceptImage?: string;\n\t/** Callback fired after a successful upload. Receives the image URL returned by the server. /\n\tonChange?: (url: string) => void;\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 \"horizontal\"\n\t /\n\torientation?: \"horizontal\" \| \"vertical\" \| \"horizontalReverse\";\n};\n\n/\n ImageUpload, drag-and-drop image uploader with server upload and image preview.\n \n Sends the file via `fetch` as `multipart/form-data` and stores the returned URL\n * in a hidden `<input>` 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.action - Upload endpoint URL. Required.\n * @param props.defaultValue - Pre-populated image URL displayed as preview.\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `` to the label. Default: false\n @param props.acceptImage - Accepted MIME types or extensions. Default: \"image/\"\n @param props.method - HTTP method. Default: \"POST\"\n * @param props.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.onChange - Callback fired after a successful upload, receives the image URL.\n * @param props.orientation - Layout direction. Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n @returns ImageUpload JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <ImageUpload name=\"avatar\" action=\"/api/upload/image\" />\n \n // Profile picture with existing image and label\n * <ImageUpload\n * name=\"profilePicture\"\n * action=\"/api/upload/avatar\"\n * label=\"Profile Picture\"\n * showAsterisk\n * defaultValue={user.avatarUrl}\n * selectImageButtonText=\"Choose photo\"\n * onChange={(url) => updateProfile({ avatarUrl: url })}\n * />\n \n // Restricted to JPEG/PNG\n * <ImageUpload\n * name=\"productImage\"\n * action=\"/api/upload/product\"\n * label=\"Product Image\"\n * acceptImage=\"image/jpeg,image/png\"\n * fileResponseName=\"imageUrl\"\n * />\n * ```\n /\n\nfunction ImageUpload(props: ImageUploadProps) {\n\tconst {\n\t\tname,\n\t\tdefaultValue = \"\",\n\t\tlabel,\n\t\tshowAsterisk = false,\n\t\taction,\n\t\tfileName = \"file\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tmethod = \"POST\",\n\t\tacceptImage = \"image/\",\n\t\tfileResponseName = \"url\",\n\t\tchangeImageButtonText = \"Alterar imagem\",\n\t\tselectImageButtonText = \"Selecionar imagem\",\n\t\tdropImageText = \"Ou arraste e solte a imagem aqui\",\n\t\tonChange,\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst fieldError = fieldErrors?.[name];\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst [error, setError] = useState(\"\");\n\tconst [file, setFile] = useState<File \| null>(null);\n\tconst [filePath, setFilePath] = useState(defaultValue);\n\tconst [isLoading, setIsLoading] = useState(false);\n\n\tasync function handleUploadImage(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetIsLoading(true);\n\t\tsetFile(file);\n\t\tsetError(\"\");\n\n\t\tconst formData = new FormData();\n\t\tformData.append(fileName, file);\n\n\t\tawait fetch(action, { method: method, body: formData })\n\t\t\t.then(async (response) => await response.json())\n\t\t\t.then((response) => {\n\t\t\t\tif (response?.error) setError(response.error);\n\t\t\t\telse setValue(response?.[fileResponseName]);\n\t\t\t\tonChange?.(response?.[fileResponseName]);\n\t\t\t})\n\t\t\t.catch((error) => {\n\t\t\t\tconsole.error(error);\n\t\t\t\tsetError(\"Erro ao enviar imagem\");\n\t\t\t})\n\t\t\t.finally(() => setIsLoading(false));\n\t}\n\n\tfunction handleSelectFile(file: File) {\n\t\tif (disabled) return;\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadImage(file);\n\t}\n\n\tconst errorMessage = fieldError \|\| error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasImage\" : \"noHasImage\";\n\tconst className = `arkynImageUpload ${hasErrorClassName} ${hasImageClassName}`;\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<div className={className}>\n\t\t\t\t<input type=\"hidden\" name={name} value={value \|\| \"\"} />\n\n\t\t\t\t{!filePath && (\n\t\t\t\t\t<NoFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tdropImageText={dropImageText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectImageButtonText={selectImageButtonText}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{filePath && (\n\t\t\t\t\t<HasFileContent\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\tacceptImage={acceptImage}\n\t\t\t\t\t\tfilePath={filePath}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tchangeImageButtonText={changeImageButtonText}\n\t\t\t\t\t\treSendImage={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadImage(file) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { ImageUpload };\n"],"mappings":";;;;;;;;AAmGA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,kBAAe,IACf,UACA,kBAAe,IACf,WACA,cAAW,QACX,WAAW,IAAmB,IAC9B,YAAS,QACT,iBAAc,WACd,sBAAmB,OACnB,2BAAwB,kBACxB,2BAAwB,qBACxB,mBAAgB,oCAChB,aACA,cAAW,IACX,yBAAsB,IACtB,iBAAc,eACX,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,IAAa,IAAc,IAE3B,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAM,KAAW,EAAsB,IAAI,GAC5C,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,CAAC,GAAW,KAAgB,EAAS,EAAK;CAEhD,eAAe,EAAkB,GAAY;EAC5C,IAAI,GAAU;EAId,AAFA,EAAa,EAAI,GACjB,EAAQ,CAAI,GACZ,EAAS,EAAE;EAEX,IAAM,IAAW,IAAI,SAAS;EAG9B,AAFA,EAAS,OAAO,GAAU,CAAI,GAE9B,MAAM,MAAM,GAAQ;GAAU;GAAQ,MAAM;EAAS,CAAC,CAAC,CACrD,KAAK,OAAO,MAAa,MAAM,EAAS,KAAK,CAAC,CAAC,CAC/C,MAAM,MAAa;GAGnB,AAFI,GAAU,QAAO,EAAS,EAAS,KAAK,IACvC,EAAS,IAAW,EAAiB,GAC1C,IAAW,IAAW,EAAiB;EACxC,CAAC,CAAC,CACD,OAAO,MAAU;GAEjB,AADA,QAAQ,MAAM,CAAK,GACnB,EAAS,uBAAuB;EACjC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,MAEJ,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;CACvB;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,OAAD;GAAgB,WAAA,oBAdQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAahD;IACC,kBAAC,SAAD;KAAO,MAAK;KAAe;KAAM,OAAO,KAAS;IAAK,CAAA;IAErD,CAAC,KACD,kBAAC,GAAD;KACW;KACC;KACE;KACE;KACG;KACK;IACvB,CAAA;IAGD,KACA,kBAAC,GAAD;KACW;KACC;KACE;KACH;KACQ;KACK;KACvB,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;CACS,CAAA;AAEjB"}

package/dist/modules/components/input/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/input/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport \"./style.css\";\n\ntype InputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t\"size\" \| \"prefix\" \| \"name\" \| \"value\" \| \"defaultValue\"\n> & {\n\t/** Field name for form submission. Required. /\n\tname: string;\n\t/* Optional label text displayed above the input. /\n\tlabel?: string;\n\t/* Validation error message displayed below the input. /\n\terrorMessage?: string;\n\t/* Shows a spinner and disables the input during async operations. @default false /\n\tisLoading?: boolean;\n\t/* When true, skips `FieldTemplate` wrapper (label and error text). @default false /\n\tunShowFieldTemplate?: 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 * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t /\n\tvariant?: \"solid\" \| \"outline\" \| \"underline\";\n\t/* Text or icon rendered at the far left, outside the input area (e.g. `\"https://\"`). /\n\tprefix?: string \| LucideIcon;\n\t/* Text or icon rendered at the far right, outside the input area (e.g. `\".com\"`). /\n\tsuffix?: string \| LucideIcon;\n\t/* Displays an asterisk on the label to signal a required field. /\n\tshowAsterisk?: boolean;\n\t/\n\t Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t /\n\torientation?: \"horizontal\" \| \"vertical\" \| \"horizontalReverse\";\n\t/* Lucide icon rendered inside the input on the left. /\n\tleftIcon?: LucideIcon;\n\t/* Lucide icon rendered inside the input on the right. /\n\trightIcon?: LucideIcon;\n\t/* Controlled value. /\n\tvalue?: string;\n\t/* Uncontrolled default value. /\n\tdefaultValue?: string;\n};\n\n/\n Input, text input field with label, validation, icons, prefix/suffix, and loading state.\n \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.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` \| `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.prefix - Text or icon at the far left (outside the input).\n * @param props.suffix - Text or icon at the far right (outside the input).\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `` to the label.\n @param props.orientation - Layout direction (`horizontal` \| `vertical` \| `horizontalReverse`). Default: \"~~horizontal~~\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n ...Other valid HTML properties for `<input>`\n \n @returns Input JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <Input name=\"username\" placeholder=\"Enter username\" />\n \n // With label and validation\n * <Input\n * name=\"email\"\n * label=\"Email Address\"\n * type=\"email\"\n * showAsterisk\n * errorMessage=\"Please enter a valid email\"\n * />\n \n // With icons and loading state\n * <Input name=\"search\" label=\"Search\" leftIcon={SearchIcon} isLoading />\n \n // With prefix/suffix\n * <Input name=\"website\" label=\"Website\" prefix=\"https://\" suffix=\".com\" variant=\"outline\" />\n * ```\n */\n\nfunction Input(props: InputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\tunShowFieldTemplate = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\ttype = \"text\",\n\t\tsize = \"md\",\n\t\tid,\n\t\tvalue,\n\t\tplaceholder,\n\t\torientation,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled \|\| isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled \|\| !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tif (type === \"hidden\") {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\treadOnly\n\t\t\t\ttype=\"text\"\n\t\t\t\tref={inputRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled \|\| readOnly \|\| isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\tconst disabledClass = disabled ? \"disabled\" : \"\";\n\n\tconst className = `arkynInput ${hasPrefix} ${disabledClass} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\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<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tplaceholder={isDisabled ? value \|\| placeholder : placeholder}\n\t\t\t\t\tvalue={isDisabled ? undefined : value}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Input, type InputProps };\n"],"mappings":";;;;;;;;AA4GA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,yBAAsB,IACtB,cAAc,GACd,iBACA,cACA,UAAO,QACP,UAAO,MACP,OACA,UACA,gBACA,gBACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,IAAmB,MAAoB,WAAW;CAExD,SAAS,IAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,EAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,EAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAuBA,OArBI,MAAS,WAEX,kBAAC,SAAD;EACC,OAAO,EAAE,SAAS,OAAO;EACzB,UAAA;EACA,MAAK;EACL,KAAK;EACL,GAAI;CACJ,CAAA,IAcF,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACP,SAAS;GACE,WAAA,cAvBI,IAAS,cAAc,GAOC,GAFpB,IAAW,aAAa,GAEa,GANzC,IAAS,cAAc,GAM+B,GAAG,EAAQ,GAAG,EAAK,GAJ3E,KAAc,KAAY,IAAY,YAAY,GAIoC,GALtF,IAAU,YAAY,GAK2E,GAHjG,IAAY,YAAY;aAetC;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACF;KACN,IAAI;KACE;KACN,aAAa,KAAa,KAAuB;KACjD,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/input/index.tsx"],"sourcesContent":["import { Loader2, type LucideIcon } from \"lucide-react\";\nimport {\n\ttype FocusEvent,\n\ttype InputHTMLAttributes,\n\tuseId,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport { IconRenderer } from \"../../services/iconRenderer\";\n\nimport \"./style.css\";\n\ntype InputProps = Omit<\n\tInputHTMLAttributes<HTMLInputElement>,\n\t\"size\" \| \"prefix\" \| \"name\" \| \"value\" \| \"defaultValue\"\n> & {\n\t/** Field name for form submission. Required. /\n\tname: string;\n\t/* Optional label text displayed above the input. /\n\tlabel?: string;\n\t/* Validation error message displayed below the input. /\n\terrorMessage?: string;\n\t/* Shows a spinner and disables the input during async operations. @default false /\n\tisLoading?: boolean;\n\t/* When true, skips `FieldTemplate` wrapper (label and error text). @default false /\n\tunShowFieldTemplate?: 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 * - `underline`: bottom border only.\n\t * @default \"solid\"\n\t /\n\tvariant?: \"solid\" \| \"outline\" \| \"underline\";\n\t/* Text or icon rendered at the far left, outside the input area (e.g. `\"https://\"`). /\n\tprefix?: string \| LucideIcon;\n\t/* Text or icon rendered at the far right, outside the input area (e.g. `\".com\"`). /\n\tsuffix?: string \| LucideIcon;\n\t/* Displays an asterisk on the label to signal a required field. /\n\tshowAsterisk?: boolean;\n\t/\n\t Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontal\"\n\t /\n\torientation?: \"horizontal\" \| \"vertical\" \| \"horizontalReverse\";\n\t/* Lucide icon rendered inside the input on the left. /\n\tleftIcon?: LucideIcon;\n\t/* Lucide icon rendered inside the input on the right. /\n\trightIcon?: LucideIcon;\n\t/* Controlled value. /\n\tvalue?: string;\n\t/* Uncontrolled default value. /\n\tdefaultValue?: string;\n};\n\n/\n Input, text input field with label, validation, icons, prefix/suffix, and loading state.\n \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.errorMessage - Validation error message.\n * @param props.isLoading - Shows a spinner and disables the input. Default: false\n * @param props.size - Input size (`md` \| `lg`). Default: \"md\"\n * @param props.variant - Visual style variant. Default: \"solid\"\n * @param props.prefix - Text or icon at the far left (outside the input).\n * @param props.suffix - Text or icon at the far right (outside the input).\n * @param props.leftIcon - Lucide icon inside the input on the left.\n * @param props.rightIcon - Lucide icon inside the input on the right.\n * @param props.showAsterisk - Appends `` to the label.\n @param props.orientation - Layout direction (`horizontal` \| `vertical` \| `horizontalReverse`). Default: \"vertical\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n \n ...Other valid HTML properties for `<input>`\n \n @returns Input JSX element wrapped in `FieldTemplate`.\n \n @example\n * ```tsx\n * // Basic\n * <Input name=\"username\" placeholder=\"Enter username\" />\n \n // With label and validation\n * <Input\n * name=\"email\"\n * label=\"Email Address\"\n * type=\"email\"\n * showAsterisk\n * errorMessage=\"Please enter a valid email\"\n * />\n \n // With icons and loading state\n * <Input name=\"search\" label=\"Search\" leftIcon={SearchIcon} isLoading />\n \n // With prefix/suffix\n * <Input name=\"website\" label=\"Website\" prefix=\"https://\" suffix=\".com\" variant=\"outline\" />\n * ```\n */\n\nfunction Input(props: InputProps) {\n\tconst {\n\t\tname,\n\t\tdisabled,\n\t\ttitle,\n\t\tstyle,\n\t\tvariant = \"solid\",\n\t\tlabel,\n\t\tclassName: wrapperClassName = \"\",\n\t\tprefix,\n\t\tsuffix,\n\t\tisLoading = false,\n\t\tleftIcon,\n\t\treadOnly,\n\t\tonFocus,\n\t\tonBlur,\n\t\tunShowFieldTemplate = false,\n\t\terrorMessage: baseErrorMessage,\n\t\tshowAsterisk,\n\t\trightIcon,\n\t\ttype = \"text\",\n\t\tsize = \"md\",\n\t\tid,\n\t\tvalue,\n\t\tplaceholder,\n\t\torientation,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\tconst [isFocused, setIsFocused] = useState(false);\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id \|\| generatedId;\n\n\tconst errorMessage = baseErrorMessage \|\| fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst isDisabled = disabled \|\| isLoading;\n\n\tconst iconSizes = { md: 20, lg: 20 };\n\tconst iconSize = iconSizes[size];\n\n\tconst loadingPosition = rightIcon ? \"right\" : \"left\";\n\n\tconst showLeftSpinner = loadingPosition === \"left\" && isLoading;\n\tconst showRightSpinner = loadingPosition === \"right\" && isLoading;\n\n\tfunction handleSectionClick() {\n\t\tif (isDisabled \|\| !inputRef?.current) return;\n\t\tsetIsFocused(true);\n\t\tinputRef.current.focus();\n\t}\n\n\tfunction handleFocus(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(true);\n\t\tif (onFocus) onFocus(e);\n\t}\n\n\tfunction handleBlur(e: FocusEvent<HTMLInputElement>) {\n\t\tsetIsFocused(false);\n\t\tif (onBlur) onBlur(e);\n\t}\n\n\tif (type === \"hidden\") {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\treadOnly\n\t\t\t\ttype=\"text\"\n\t\t\t\tref={inputRef}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t}\n\n\tconst hasPrefix = prefix ? \"hasPrefix\" : \"\";\n\tconst hasSuffix = suffix ? \"hasSuffix\" : \"\";\n\tconst errored = isError ? \"errored\" : \"\";\n\tconst opacity = isDisabled \|\| readOnly \|\| isLoading ? \"opacity\" : \"\";\n\tconst focused = isFocused ? \"focused\" : \"\";\n\tconst disabledClass = disabled ? \"disabled\" : \"\";\n\n\tconst className = `arkynInput ${hasPrefix} ${disabledClass} ${hasSuffix} ${variant} ${size} ${opacity} ${errored} ${focused}`;\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<section\n\t\t\t\ttitle={title}\n\t\t\t\tstyle={style}\n\t\t\t\tonClick={handleSectionClick}\n\t\t\t\tclassName={className}\n\t\t\t>\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={prefix} className=\"prefix\" />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showLeftSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={leftIcon} iconSize={iconSize} />\n\n\t\t\t\t<input\n\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\treadOnly={readOnly}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonFocus={handleFocus}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t\ttype={type}\n\t\t\t\t\tid={inputId}\n\t\t\t\t\tname={name}\n\t\t\t\t\tplaceholder={isDisabled ? value \|\| placeholder : placeholder}\n\t\t\t\t\tvalue={isDisabled ? undefined : value}\n\t\t\t\t\t{...rest}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer show={!isLoading} icon={rightIcon} iconSize={iconSize} />\n\n\t\t\t\t<IconRenderer\n\t\t\t\t\tshow={showRightSpinner}\n\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\ticon={Loader2}\n\t\t\t\t/>\n\n\t\t\t\t<IconRenderer iconSize={iconSize} icon={suffix} className=\"suffix\" />\n\t\t\t</section>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Input, type InputProps };\n"],"mappings":";;;;;;;;AA4GA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,SACA,aACA,UACA,UACA,aAAU,SACV,UACA,WAAW,IAAmB,IAC9B,WACA,WACA,eAAY,IACZ,aACA,aACA,YACA,WACA,yBAAsB,IACtB,cAAc,GACd,iBACA,cACA,UAAO,QACP,UAAO,MACP,OACA,UACA,gBACA,gBACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAC1B,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAa,KAAY,GAGzB,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU,IAErB,IAAkB,IAAY,UAAU,QAExC,IAAkB,MAAoB,UAAU,GAChD,IAAmB,MAAoB,WAAW;CAExD,SAAS,IAAqB;EACzB,KAAc,CAAC,GAAU,YAC7B,EAAa,EAAI,GACjB,EAAS,QAAQ,MAAM;CACxB;CAEA,SAAS,EAAY,GAAiC;EAErD,AADA,EAAa,EAAI,GACb,KAAS,EAAQ,CAAC;CACvB;CAEA,SAAS,EAAW,GAAiC;EAEpD,AADA,EAAa,EAAK,GACd,KAAQ,EAAO,CAAC;CACrB;CAuBA,OArBI,MAAS,WAEX,kBAAC,SAAD;EACC,OAAO,EAAE,SAAS,OAAO;EACzB,UAAA;EACA,MAAK;EACL,KAAK;EACL,GAAI;CACJ,CAAA,IAcF,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,WAAD;GACQ;GACA;GACP,SAAS;GACE,WAAA,cAvBI,IAAS,cAAc,GAOC,GAFpB,IAAW,aAAa,GAEa,GANzC,IAAS,cAAc,GAM+B,GAAG,EAAQ,GAAG,EAAK,GAJ3E,KAAc,KAAY,IAAY,YAAY,GAIoC,GALtF,IAAU,YAAY,GAK2E,GAHjG,IAAY,YAAY;aAetC;IAMC,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;IAEpE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAoB;IAAW,CAAA;IAErE,kBAAC,SAAD;KACC,UAAU;KACA;KACV,KAAK;KACL,SAAS;KACT,QAAQ;KACF;KACN,IAAI;KACE;KACN,aAAa,KAAa,KAAuB;KACjD,OAAO,IAAa,KAAA,IAAY;KAChC,GAAI;IACJ,CAAA;IAED,kBAAC,GAAD;KAAc,MAAM,CAAC;KAAW,MAAM;KAAqB;IAAW,CAAA;IAEtE,kBAAC,GAAD;KACC,MAAM;KACI;KACV,WAAU;KACV,MAAM;IACN,CAAA;IAED,kBAAC,GAAD;KAAwB;KAAU,MAAM;KAAQ,WAAU;IAAU,CAAA;GAC5D;;CACK,CAAA;AAEjB"}

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

@@ -1,38 +1,46 @@
 import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
-import { ModalProvider as t } from "../modalContext.js";
+import { useEscapeKey as t } from "../../../hooks/useEscapeKey.js";
+import { useFocusTrap as n } from "../../../hooks/useFocusTrap.js";
+import { ModalProvider as r } 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";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } 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());
+function l(l) {
+	let { isVisible: u, makeInvisible: d, children: f, className: p = "", ...m } = l, [h, g] = o(u), [_, v] = o(!1), y = a(null);
+	i(() => {
+		u ? (g(!0), v(!1)) : h && v(!0);
+	}, [u, h]), e(u);
+	let b = h && !_;
+	t(b, () => v(!0)), n(b, y);
+	function x(e) {
+		e.target === e.currentTarget && _ && (v(!1), g(!1), d());
 	}
-	return f ? /* @__PURE__ */ i(t, {
-		makeInvisible: () => h(!0),
-		children: /* @__PURE__ */ a("aside", {
+	return h ? /* @__PURE__ */ s(r, {
+		makeInvisible: () => v(!0),
+		children: /* @__PURE__ */ c("aside", {
 			className: [
 				"arkynModalContainer",
-				m ? "exiting" : "",
-				u
+				_ ? "exiting" : "",
+				p
 			].filter(Boolean).join(" ").trim(),
-			...d,
-			children: [/* @__PURE__ */ i("div", {
+			...m,
+			children: [/* @__PURE__ */ s("div", {
 				className: "arkynModalContainerOverlay",
-				onClick: () => h(!0),
-				onAnimationEnd: g
-			}), /* @__PURE__ */ i("div", {
+				onClick: () => v(!0),
+				onAnimationEnd: x
+			}), /* @__PURE__ */ s("div", {
+				ref: y,
+				role: "dialog",
+				"aria-modal": "true",
+				tabIndex: -1,
 				className: "arkynModalContainerContent",
-				children: l
+				children: f
 			})]
 		})
 	}) : null;
 }
 //#endregion
-export { o as ModalContainer };
+export { l as ModalContainer };
 //# sourceMappingURL=index.js.map

package/dist/modules/components/modal/modalContainer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { ModalProvider } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the modal is visible. /\n\tisVisible: boolean;\n\t/* Callback invoked when the backdrop overlay is clicked. /\n\tmakeInvisible: () => void;\n};\n\n/\n ModalContainer, animated centered modal rendered over a backdrop overlay.\n \n Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `ModalHeader` (close button).\n \n @param props.isVisible - Whether the modal is open. Required.\n * @param props.makeInvisible - Called when the overlay is clicked. Required.\n \n ...Other valid HTML `<aside>` properties\n \n @returns ModalContainer JSX element.\n \n @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n \n <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n * <ModalHeader><h2>Confirm deletion</h2></ModalHeader>\n * <main><p>This action cannot be undone.</p></main>\n * <ModalFooter>\n * <Button onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button scheme=\"danger\" onClick={handleDelete}>Delete</Button>\n * </ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalContainer(args: ModalContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = args;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynModalContainer\",\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<ModalProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className.trim()} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynModalContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div ~~className~~=\"arkynModalContainerContent\">{children}</div>\n\t\t\t</aside>\n\t\t</ModalProvider>\n\t);\n}\n\nexport { ModalContainer };\n"],"mappings":"~~;;;;;;AA8CA~~,SAAS,EAAe,GAA2B;CAClD,IAAM,EACL,cACA,kBACA,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK;~~CAWhD~~,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAYA,OAVK,IAWJ,kBAAC,GAAD;EAAe,qBAAqB,EAAa,EAAI;YACpD,kBAAC,SAAD;GAAO,WAVS;IACjB;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa,CAAA,CAAU,KAAK;GAAG,GAAI;aAAxC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;~~IAAK~~,WAAU;~~IAA8B~~;~~GAAc~~,CAAA,~~CACrD~~;;CACO,CAAA,~~IApBK~~;~~AAsBtB~~"}
1	+ {"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/modal/modalContainer/index.tsx"],"sourcesContent":["import {\n\ttype AnimationEvent,\n\ttype HTMLAttributes,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useEscapeKey } from \"../../../hooks/useEscapeKey\";\nimport { useFocusTrap } from \"../../../hooks/useFocusTrap\";\nimport { useScrollLock } from \"../../../hooks/useScrollLock\";\nimport { ModalProvider } from \"../modalContext\";\nimport \"./styles.css\";\n\ntype ModalContainerProps = HTMLAttributes<HTMLElement> & {\n\t/** Controls whether the modal is visible. /\n\tisVisible: boolean;\n\t/* Callback invoked when the backdrop overlay is clicked. /\n\tmakeInvisible: () => void;\n};\n\n/\n ModalContainer, animated centered modal rendered over a backdrop overlay.\n \n Locks body scroll while open. Closes when the overlay is clicked.\n * Provides context consumed by `ModalHeader` (close button).\n \n @param props.isVisible - Whether the modal is open. Required.\n * @param props.makeInvisible - Called when the overlay is clicked. Required.\n \n ...Other valid HTML `<aside>` properties\n \n @returns ModalContainer JSX element.\n \n @example\n * ```tsx\n * const [isOpen, setIsOpen] = useState(false);\n \n <ModalContainer isVisible={isOpen} makeInvisible={() => setIsOpen(false)}>\n * <ModalHeader><h2>Confirm deletion</h2></ModalHeader>\n * <main><p>This action cannot be undone.</p></main>\n * <ModalFooter>\n * <Button onClick={() => setIsOpen(false)}>Cancel</Button>\n * <Button scheme=\"danger\" onClick={handleDelete}>Delete</Button>\n * </ModalFooter>\n * </ModalContainer>\n * ```\n */\n\nfunction ModalContainer(args: ModalContainerProps) {\n\tconst {\n\t\tisVisible,\n\t\tmakeInvisible,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\t...rest\n\t} = args;\n\n\tconst [mounted, setMounted] = useState(isVisible);\n\tconst [isExiting, setIsExiting] = useState(false);\n\tconst contentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (isVisible) {\n\t\t\tsetMounted(true);\n\t\t\tsetIsExiting(false);\n\t\t} else if (mounted) {\n\t\t\tsetIsExiting(true);\n\t\t}\n\t}, [isVisible, mounted]);\n\n\tuseScrollLock(isVisible);\n\n\tconst isDialogActive = mounted && !isExiting;\n\tuseEscapeKey(isDialogActive, () => setIsExiting(true));\n\tuseFocusTrap(isDialogActive, contentRef);\n\n\tfunction handleOverlayAnimationEnd(e: AnimationEvent<HTMLDivElement>) {\n\t\tif (e.target === e.currentTarget && isExiting) {\n\t\t\tsetIsExiting(false);\n\t\t\tsetMounted(false);\n\t\t\tmakeInvisible();\n\t\t}\n\t}\n\n\tif (!mounted) return null;\n\n\tconst className = [\n\t\t\"arkynModalContainer\",\n\t\tisExiting ? \"exiting\" : \"\",\n\t\tbaseClassName,\n\t]\n\t\t.filter(Boolean)\n\t\t.join(\" \");\n\n\treturn (\n\t\t<ModalProvider makeInvisible={() => setIsExiting(true)}>\n\t\t\t<aside className={className.trim()} {...rest}>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"arkynModalContainerOverlay\"\n\t\t\t\t\tonClick={() => setIsExiting(true)}\n\t\t\t\t\tonAnimationEnd={handleOverlayAnimationEnd}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tref={contentRef}\n\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"arkynModalContainerContent\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</aside>\n\t\t</ModalProvider>\n\t);\n}\n\nexport { ModalContainer };\n"],"mappings":";;;;;;;;AAiDA,SAAS,EAAe,GAA2B;CAClD,IAAM,EACL,cACA,kBACA,aACA,WAAW,IAAgB,IAC3B,GAAG,MACA,GAEE,CAAC,GAAS,KAAc,EAAS,CAAS,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAa,EAAuB,IAAI;CAW9C,AATA,QAAgB;EACf,AAAI,KACH,EAAW,EAAI,GACf,EAAa,EAAK,KACR,KACV,EAAa,EAAI;CAEnB,GAAG,CAAC,GAAW,CAAO,CAAC,GAEvB,EAAc,CAAS;CAEvB,IAAM,IAAiB,KAAW,CAAC;CAEnC,AADA,EAAa,SAAsB,EAAa,EAAI,CAAC,GACrD,EAAa,GAAgB,CAAU;CAEvC,SAAS,EAA0B,GAAmC;EACrE,AAAI,EAAE,WAAW,EAAE,iBAAiB,MACnC,EAAa,EAAK,GAClB,EAAW,EAAK,GAChB,EAAc;CAEhB;CAYA,OAVK,IAWJ,kBAAC,GAAD;EAAe,qBAAqB,EAAa,EAAI;YACpD,kBAAC,SAAD;GAAO,WAVS;IACjB;IACA,IAAY,YAAY;IACxB;GACD,CAAC,CACC,OAAO,OAAO,CAAC,CACf,KAAK,GAIa,CAAA,CAAU,KAAK;GAAG,GAAI;aAAxC,CACC,kBAAC,OAAD;IACC,WAAU;IACV,eAAe,EAAa,EAAI;IAChC,gBAAgB;GAChB,CAAA,GACD,kBAAC,OAAD;IACC,KAAK;IACL,MAAK;IACL,cAAW;IACX,UAAU;IACV,WAAU;IAET;GACG,CAAA,CACC;;CACO,CAAA,IA5BK;AA8BtB"}

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

@@ -1,118 +1,158 @@
 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";
+import { MultiSelectChevron as ee } from "./multiSelectChevron/index.js";
+import { MultiSelectContainer as te } from "./multiSelectContainer/index.js";
+import { MultiSelectContent as ne } from "./multiSelectContent/index.js";
+import { MultiSelectMark as re } from "./multiSelectMark/index.js";
+import { MultiSelectOption as ie } from "./multiSelectOption/index.js";
+import { MultiSelectOptionsContainer as r } from "./multiSelectOptionsContainer/index.js";
+import { MultiSelectOverlay as i } from "./multiSelectOverlay/index.js";
+import { MultiSelectSpinner as a } from "./multiSelectSpinner/index.js";
+import { useId as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } 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 = {
+function d(d) {
+	let { name: f, options: p, className: m = "", placeholder: h = "Selecione...", closeOnSelect: g = !1, defaultValue: _ = [], errorMessage: v, isLoading: y = !1, readOnly: b = !1, isSearchable: ae = !1, id: oe, label: se, showAsterisk: ce, leftIcon: x, onSearch: S, onChange: C, onBlur: le, notFoundText: ue = "Sem opções disponíveis", onFocus: de, disabled: fe = !1, prefix: w, size: T = "md", value: pe, variant: E = "solid", unShowFieldTemplate: D = !1, orientation: O = "vertical" } = d, { fieldErrors: k } = e(), A = s(null), j = s(null), M = o(), N = oe || M, P = `${N}-listbox`, F = v || k?.[f], I = !!F, L = fe || y || b, R = {
 		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);
+	}[T], [z, B] = c(""), [V, H] = c(!1), [U, W] = c(_), [G, K] = c(-1), q = pe || U;
+	function J(e) {
+		return q.includes(e);
 	}
-	function ce(e) {
-		return g.find((t) => t.value === e)?.label || "";
+	function me(e) {
+		return p.find((t) => t.value === e)?.label || "";
 	}
-	function le() {
-		V || !L?.current || G || (K(!0), L.current.focus(), O?.());
+	function Y(e) {
+		return `${P}-option-${e.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+	}
+	function X() {
+		L || !A?.current || V || (H(!0), K(-1), A.current.focus(), de?.());
 	}
 	function Z() {
-		K(!1), E && L.current && L.current.blur();
+		H(!1), K(-1), le && A.current && A.current.blur();
 	}
-	function ue(e) {
-		W(e), w && w(e);
+	function he(e) {
+		B(e), K(-1), S && S(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();
+		J(e) ? (W(U.filter((t) => t !== e)), C && C(U.filter((t) => t !== e))) : (W([...U, e]), C && C([...U, e])), g && Z();
+	}
+	let $ = p.filter((e) => !!(d.onSearch || !d.isSearchable || e.label.toLowerCase().includes(z.toLowerCase())));
+	function ge(e) {
+		if (L) return;
+		if (!V) {
+			(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), X(), e.key === "ArrowDown" && K(0));
+			return;
+		}
+		let t = e.target?.tagName === "INPUT", n = e.target?.tagName === "BUTTON";
+		switch (e.key) {
+			case "Escape":
+				e.preventDefault(), Z(), j.current?.focus();
+				break;
+			case "ArrowDown":
+				e.preventDefault(), K((e) => $.length === 0 ? -1 : e < 0 || e + 1 >= $.length ? 0 : e + 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), K((e) => $.length === 0 ? -1 : e < 0 || e - 1 < 0 ? $.length - 1 : e - 1);
+				break;
+			case " ":
+				if (t || n) return;
+				e.preventDefault(), G >= 0 && G < $.length && Q($[G].value);
+				break;
+			case "Enter":
+				if (n) return;
+				e.preventDefault(), G >= 0 && G < $.length && Q($[G].value);
+				break;
+			default: break;
+		}
 	}
-	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,
+	let _e = G >= 0 && G < $.length ? Y($[G].value) : void 0;
+	return /* @__PURE__ */ l(n, {
+		name: f,
+		label: se,
+		showAsterisk: ce,
+		className: m,
+		errorMessage: F,
+		unShowFieldTemplate: D,
+		orientation: O,
+		children: /* @__PURE__ */ u(te, {
+			handleContainerFocus: X,
+			disabled: L,
+			isError: I,
+			isFocused: V,
+			isLoading: y,
+			readOnly: b,
+			size: T,
+			variant: E,
+			prefixExists: !!w,
+			id: N,
+			containerRef: j,
+			onContainerKeyDown: ge,
+			tabIndex: L ? -1 : 0,
+			ariaControls: P,
+			ariaActiveDescendant: _e,
 			children: [
-				/* @__PURE__ */ f("input", {
-					ref: L,
-					name: h,
-					value: JSON.stringify(Y),
+				/* @__PURE__ */ l("input", {
+					ref: A,
+					name: f,
+					value: JSON.stringify(q),
 					type: "hidden"
 				}),
-				/* @__PURE__ */ f(t, {
-					iconSize: H,
-					icon: A,
+				/* @__PURE__ */ l(t, {
+					iconSize: R,
+					icon: w,
 					className: "prefix"
 				}),
-				C && /* @__PURE__ */ f(C, {
-					size: H,
+				x && /* @__PURE__ */ l(x, {
+					size: R,
 					strokeWidth: 2.5
 				}),
-				/* @__PURE__ */ p(a, {
-					size: j,
-					children: [Y.map((e) => /* @__PURE__ */ f(o, {
-						label: ce(e),
+				/* @__PURE__ */ u(ne, {
+					size: T,
+					children: [q.map((e) => /* @__PURE__ */ l(re, {
+						label: me(e),
 						value: e,
 						handleChangeValue: Q,
-						disabled: V
-					}, e)), Y.length <= 0 && /* @__PURE__ */ f("p", { children: v })]
+						disabled: L
+					}, e)), q.length <= 0 && /* @__PURE__ */ l("p", { children: h })]
 				}),
-				/* @__PURE__ */ p(ee, {
-					isFocused: G,
-					isSearchable: re,
-					search: U,
-					onSearch: ue,
-					children: [$.map(({ label: e, value: t }) => /* @__PURE__ */ f(s, {
+				/* @__PURE__ */ u(r, {
+					id: P,
+					isFocused: V,
+					isSearchable: ae,
+					search: z,
+					onSearch: he,
+					children: [$.map(({ label: e, value: t }, n) => /* @__PURE__ */ l(ie, {
+						id: Y(t),
 						label: e,
 						value: t,
-						size: j,
+						size: T,
+						isHighlighted: n === G,
 						handleChangeValue: Q,
-						optionHasSelected: X
-					}, t)), $.length <= 0 && /* @__PURE__ */ f("p", { children: D })]
+						optionHasSelected: J
+					}, t)), $.length <= 0 && /* @__PURE__ */ l("p", { children: ue })]
 				}),
-				/* @__PURE__ */ f(r, {
-					disabled: V,
-					isFocused: G,
-					readOnly: S,
-					iconSize: H,
-					isLoading: x
+				/* @__PURE__ */ l(ee, {
+					disabled: L,
+					isFocused: V,
+					readOnly: b,
+					iconSize: R,
+					isLoading: y
 				}),
-				/* @__PURE__ */ f(c, {
-					iconSize: H,
-					isLoading: x
+				/* @__PURE__ */ l(a, {
+					iconSize: R,
+					isLoading: y
 				}),
-				/* @__PURE__ */ f(te, {
+				/* @__PURE__ */ l(i, {
 					handleBlur: Z,
-					isFocused: G
+					isFocused: V
 				})
 			]
 		})
 	});
 }
 //#endregion
-export { m as MultiSelect };
+export { d as MultiSelect };
 //# sourceMappingURL=index.js.map