@arkyn/components 3.0.11 → 3.0.12

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

@@ -8,8 +8,8 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import { RefreshCw as s } from "lucide-react";
 //#region src/components/audioUpload/hasFileContent/index.tsx
 function c(c) {
-	let { filePath: l, disabled: u, acceptAudio: d, handleSelectFile: f, isLoading: p, reSendAudio: m, changeAudioButtonText: h } = c;
-	function g() {
+	let { filePath: l, disabled: u, acceptAudio: d, handleSelectFile: f, isLoading: p, reSendAudio: m, changeAudioButtonText: h, resendAudioText: g } = c;
+	function _() {
 		if (u) return;
 		let e = document.createElement("input");
 		e.type = "file", e.accept = d, e.onchange = (e) => {
@@ -26,10 +26,10 @@ function c(c) {
 				className: "arkynAudioUploadButtonsContainer",
 				children: [!!m && /* @__PURE__ */ a(i, {
 					orientation: "bottom",
-					text: "Reenviar áudio",
+					text: g,
 					children: /* @__PURE__ */ a(r, {
 						type: "button",
-						"aria-label": "resend image",
+						"aria-label": g,
 						variant: "outline",
 						scheme: "danger",
 						size: "sm",
@@ -40,7 +40,7 @@ function c(c) {
 					})
 				}), /* @__PURE__ */ a(t, {
 					isLoading: p,
-					onClick: g,
+					onClick: _,
 					variant: "outline",
 					size: "sm",
 					type: "button",

package/dist/modules/components/audioUpload/hasFileContent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/audioUpload/hasFileContent/index.tsx"],"sourcesContent":["import { RefreshCw } from \"lucide-react\";\n\nimport { AudioPlayer } from \"../../audioPlayer\";\nimport { Button } from \"../../button\";\nimport { Divider } from \"../../divider\";\nimport { IconButton } from \"../../iconButton\";\nimport { Tooltip } from \"../../tooltip\";\n\nimport \"./styles.css\";\n\ntype HasFileContentProps = {\n\tfilePath: string;\n\tdisabled: boolean;\n\tacceptAudio: string;\n\tisLoading: boolean;\n\thandleSelectFile: (file: File) => void;\n\treSendAudio?: () => void;\n\tchangeAudioButtonText: string;\n};\n\nfunction HasFileContent(props: HasFileContentProps) {\n\tconst {\n\t\tfilePath,\n\t\tdisabled,\n\t\tacceptAudio,\n\t\thandleSelectFile,\n\t\tisLoading,\n\t\treSendAudio,\n\t\tchangeAudioButtonText,\n\t} = props;\n\n\tfunction handleClick() {\n\t\tif (disabled) return;\n\n\t\tconst input = document.createElement(\"input\");\n\n\t\tinput.type = \"file\";\n\t\tinput.accept = acceptAudio;\n\n\t\tinput.onchange = (event) => {\n\t\t\tconst file = (event.target as HTMLInputElement).files?.[0];\n\t\t\tif (file) handleSelectFile(file);\n\t\t};\n\n\t\tinput.click();\n\t}\n\n\treturn (\n\t\t<div className=\"arkynAudioUploadHasFileContentContainer\">\n\t\t\t<AudioPlayer src={filePath} />\n\t\t\t<Divider />\n\n\t\t\t<div className=\"arkynAudioUploadButtonsContainer\">\n\t\t\t\t{!!reSendAudio && (\n\t\t\t\t\t<Tooltip orientation=\"bottom\" text=\"Reenviar áudio\">\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label=\"resend image\"\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tscheme=\"danger\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\tonClick={reSendAudio}\n\t\t\t\t\t\t\ticon={RefreshCw}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\n\t\t\t\t<Button\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t{changeAudioButtonText}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport { HasFileContent };\n"],"mappings":";;;;;;;;;AAoBA,SAAS,EAAe,GAA4B;CACnD,IAAM,EACL,aACA,aACA,gBACA,qBACA,cACA,gBACA,6BACG;CAEJ,SAAS,IAAc;EACtB,IAAI,GAAU;EAEd,IAAM,IAAQ,SAAS,cAAc,OAAO;EAU5C,AARA,EAAM,OAAO,QACb,EAAM,SAAS,GAEf,EAAM,YAAY,MAAU;GAC3B,IAAM,IAAQ,EAAM,OAA4B,QAAQ;GACxD,AAAI,KAAM,EAAiB,CAAI;EAChC,GAEA,EAAM,MAAM;CACb;CAEA,OACC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACC,kBAAC,GAAD,EAAa,KAAK,EAAW,CAAA;GAC7B,kBAAC,GAAD,CAAU,CAAA;GAEV,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,CAAC,CAAC,KACF,kBAAC,GAAD;KAAS,aAAY;KAAS,MAAK;eAClC,kBAAC,GAAD;MACC,MAAK;MACL,cAAW;MACX,SAAQ;MACR,QAAO;MACP,MAAK;MACM;MACX,SAAS;MACT,MAAM;MACI;KACV,CAAA;IACO,CAAA,GAGV,kBAAC,GAAD;KACY;KACX,SAAS;KACT,SAAQ;KACR,MAAK;KACL,MAAK;KACK;eAET;IACM,CAAA,CACJ;;EACD;;AAEP"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/audioUpload/hasFileContent/index.tsx"],"sourcesContent":["import { RefreshCw } from \"lucide-react\";\n\nimport { AudioPlayer } from \"../../audioPlayer\";\nimport { Button } from \"../../button\";\nimport { Divider } from \"../../divider\";\nimport { IconButton } from \"../../iconButton\";\nimport { Tooltip } from \"../../tooltip\";\n\nimport \"./styles.css\";\n\ntype HasFileContentProps = {\n\tfilePath: string;\n\tdisabled: boolean;\n\tacceptAudio: string;\n\tisLoading: boolean;\n\thandleSelectFile: (file: File) => void;\n\treSendAudio?: () => void;\n\tchangeAudioButtonText: string;\n\tresendAudioText: string;\n};\n\nfunction HasFileContent(props: HasFileContentProps) {\n\tconst {\n\t\tfilePath,\n\t\tdisabled,\n\t\tacceptAudio,\n\t\thandleSelectFile,\n\t\tisLoading,\n\t\treSendAudio,\n\t\tchangeAudioButtonText,\n\t\tresendAudioText,\n\t} = props;\n\n\tfunction handleClick() {\n\t\tif (disabled) return;\n\n\t\tconst input = document.createElement(\"input\");\n\n\t\tinput.type = \"file\";\n\t\tinput.accept = acceptAudio;\n\n\t\tinput.onchange = (event) => {\n\t\t\tconst file = (event.target as HTMLInputElement).files?.[0];\n\t\t\tif (file) handleSelectFile(file);\n\t\t};\n\n\t\tinput.click();\n\t}\n\n\treturn (\n\t\t<div className=\"arkynAudioUploadHasFileContentContainer\">\n\t\t\t<AudioPlayer src={filePath} />\n\t\t\t<Divider />\n\n\t\t\t<div className=\"arkynAudioUploadButtonsContainer\">\n\t\t\t\t{!!reSendAudio && (\n\t\t\t\t\t<Tooltip orientation=\"bottom\" text={resendAudioText}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\taria-label={resendAudioText}\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tscheme=\"danger\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\tonClick={reSendAudio}\n\t\t\t\t\t\t\ticon={RefreshCw}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\n\t\t\t\t<Button\n\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\tonClick={handleClick}\n\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t>\n\t\t\t\t\t{changeAudioButtonText}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport { HasFileContent };\n"],"mappings":";;;;;;;;;AAqBA,SAAS,EAAe,GAA4B;CACnD,IAAM,EACL,aACA,aACA,gBACA,qBACA,cACA,gBACA,0BACA,uBACG;CAEJ,SAAS,IAAc;EACtB,IAAI,GAAU;EAEd,IAAM,IAAQ,SAAS,cAAc,OAAO;EAU5C,AARA,EAAM,OAAO,QACb,EAAM,SAAS,GAEf,EAAM,YAAY,MAAU;GAC3B,IAAM,IAAQ,EAAM,OAA4B,QAAQ;GACxD,AAAI,KAAM,EAAiB,CAAI;EAChC,GAEA,EAAM,MAAM;CACb;CAEA,OACC,kBAAC,OAAD;EAAK,WAAU;YAAf;GACC,kBAAC,GAAD,EAAa,KAAK,EAAW,CAAA;GAC7B,kBAAC,GAAD,CAAU,CAAA;GAEV,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,CAAC,CAAC,KACF,kBAAC,GAAD;KAAS,aAAY;KAAS,MAAM;eACnC,kBAAC,GAAD;MACC,MAAK;MACL,cAAY;MACZ,SAAQ;MACR,QAAO;MACP,MAAK;MACM;MACX,SAAS;MACT,MAAM;MACI;KACV,CAAA;IACO,CAAA,GAGV,kBAAC,GAAD;KACY;KACX,SAAS;KACT,SAAQ;KACR,MAAK;KACL,MAAK;KACK;eAET;IACM,CAAA,CACJ;;EACD;;AAEP"}

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

@@ -9,63 +9,64 @@ import { useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/audioUpload/index.tsx
 function l(l) {
-	let { name: u, label: d, fileName: f = "file", method: p = "POST", onChange: m, fileResponseName: h = "url", selectAudioButtonText: g = "Selecionar arquivo de áudio", dropAudioText: _ = "Ou arraste e solte um arquivo de áudio aqui", changeAudioButtonText: v = "Trocar arquivo de áudio", acceptAudio: y = "audio/*", action: b, defaultValue: x = "", showAsterisk: S = !1, disabled: C = !1 } = l, { fieldErrors: w } = e(), T = w?.[u], [E, D] = o(x), [O, k] = o(""), [A, j] = o(null), [M, N] = o(x), [P, F] = o(!1);
-	async function I(e) {
-		if (C) return;
-		F(!0), j(e), k("");
+	let { name: u, label: d, fileName: f = "file", method: p = "POST", onChange: m, fileResponseName: h = "url", selectAudioButtonText: g = "Selecionar arquivo de áudio", dropAudioText: _ = "Ou arraste e solte um arquivo de áudio aqui", changeAudioButtonText: v = "Trocar arquivo de áudio", resendAudioText: y = "Reenviar áudio", invalidFileTypeText: b = "O arquivo selecionado não é um arquivo de áudio", uploadErrorText: x = "Erro ao enviar áudio", acceptAudio: S = "audio/*", action: C, defaultValue: w = "", showAsterisk: T = !1, disabled: E = !1 } = l, { fieldErrors: D } = e(), O = D?.[u], [k, A] = o(w), [j, M] = o(""), [N, P] = o(null), [F, I] = o(w), [L, R] = o(!1);
+	async function z(e) {
+		if (E) return;
+		R(!0), P(e), M("");
 		let t = new FormData();
-		t.append(f, e), await fetch(b, {
+		t.append(f, e), await fetch(C, {
 			method: p,
 			body: t
 		}).then(async (e) => await e.json()).then((e) => {
-			e?.error ? k(e.error) : D(e?.[h]), m?.(e?.[h]);
+			e?.error ? M(e.error) : A(e?.[h]), m?.(e?.[h]);
 		}).catch((e) => {
-			console.error(e), k("Erro ao enviar audio");
-		}).finally(() => F(!1));
+			console.error(e), M(x);
+		}).finally(() => R(!1));
 	}
-	function L(e) {
-		if (!C) {
+	function B(e) {
+		if (!E) {
 			if (e.type.indexOf("audio") === -1) {
-				k("O arquivo selecionado não é um arquivo de áudio");
+				M(b);
 				return;
 			}
-			N(URL.createObjectURL(e)), I(e);
+			I(URL.createObjectURL(e)), z(e);
 		}
 	}
-	let R = T || O;
+	let V = O || j;
 	return /* @__PURE__ */ c(r, { children: [
 		d && /* @__PURE__ */ s(n, {
-			showAsterisk: S,
+			showAsterisk: T,
 			children: d
 		}),
 		/* @__PURE__ */ c("div", {
-			className: `arkynAudioUpload ${R ? "hasError" : "noHasError"} ${M ? "hasAudio" : "noHasAudio"}`,
+			className: `arkynAudioUpload ${V ? "hasError" : "noHasError"} ${F ? "hasAudio" : "noHasAudio"}`,
 			children: [
 				/* @__PURE__ */ s("input", {
 					type: "hidden",
 					name: u,
-					value: E || ""
+					value: k || ""
 				}),
-				!M && /* @__PURE__ */ s(a, {
-					disabled: C,
-					isLoading: P,
-					acceptAudio: y,
+				!F && /* @__PURE__ */ s(a, {
+					disabled: E,
+					isLoading: L,
+					acceptAudio: S,
 					dropAudioText: _,
-					handleSelectFile: L,
+					handleSelectFile: B,
 					selectAudioButtonText: g
 				}),
-				M && /* @__PURE__ */ s(i, {
-					filePath: M,
-					acceptAudio: y,
+				F && /* @__PURE__ */ s(i, {
+					filePath: F,
+					acceptAudio: S,
 					changeAudioButtonText: v,
-					disabled: C,
-					handleSelectFile: L,
-					isLoading: P,
-					reSendAudio: R && A ? () => I(A) : void 0
+					resendAudioText: y,
+					disabled: E,
+					handleSelectFile: B,
+					isLoading: L,
+					reSendAudio: V && N ? () => z(N) : void 0
 				})
 			]
 		}),
-		R && /* @__PURE__ */ s(t, { children: R })
+		V && /* @__PURE__ */ s(t, { children: V })
 	] });
 }
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype AudioUploadProps = {\n\t/** Field name for form submission (stores the uploaded audio URL). Required. */\n\tname: string;\n\t/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */\n\taction: string;\n\t/** Form-data field name used for the file. @default \"file\" */\n\tfileName?: string;\n\t/** HTTP method for the upload request. @default \"POST\" */\n\tmethod?: string;\n\t/** Accepted audio MIME types or extensions (e.g. `\"audio/mp3,audio/wav\"`). @default \"audio/*\" */\n\tacceptAudio?: string;\n\t/** Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte um arquivo de áudio aqui\" */\n\tdropAudioText?: string;\n\t/** Label for the file-picker button before a file is selected. @default \"Selecionar arquivo de áudio\" */\n\tselectAudioButtonText?: string;\n\t/** Label for the file-picker button after a file is selected. @default \"Trocar arquivo de áudio\" */\n\tchangeAudioButtonText?: string;\n\t/** Callback fired after a successful upload. Receives the URL returned by the server. */\n\tonChange?: (url?: string) => void;\n\t/** Property name in the server response that contains the file URL. @default \"url\" */\n\tfileResponseName?: string;\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/** Disables file selection and upload. @default false */\n\tdisabled?: boolean;\n\t/** Pre-populated audio URL (e.g. an existing recording). @default \"\" */\n\tdefaultValue?: string;\n};\n\n/**\n * AudioUpload, drag-and-drop audio file uploader with server upload and playback 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.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.method - HTTP method. Default: \"POST\"\n * @param props.acceptAudio - Accepted MIME types / extensions. Default: \"audio/*\"\n * @param props.onChange - Callback fired after a successful upload, receives the audio URL.\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.defaultValue - Pre-populated audio URL.\n *\n * @returns AudioUpload JSX element wrapped in `FieldWrapper`.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioUpload name=\"audio\" action=\"/api/upload\" />\n *\n * // With label and custom texts\n * <AudioUpload\n *   name=\"podcast\"\n *   action=\"/api/upload/podcast\"\n *   label=\"Podcast Episode\"\n *   showAsterisk\n *   selectAudioButtonText=\"Choose audio file\"\n *   onChange={(url) => setPodcastUrl(url)}\n * />\n * ```\n */\n\nfunction AudioUpload(props: AudioUploadProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tfileName = \"file\",\n\t\tmethod = \"POST\",\n\t\tonChange,\n\t\tfileResponseName = \"url\",\n\t\tselectAudioButtonText = \"Selecionar arquivo de áudio\",\n\t\tdropAudioText = \"Ou arraste e solte um arquivo de áudio aqui\",\n\t\tchangeAudioButtonText = \"Trocar arquivo de áudio\",\n\t\tacceptAudio = \"audio/*\",\n\t\taction,\n\t\tdefaultValue = \"\",\n\t\tshowAsterisk = false,\n\t\tdisabled = false,\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 handleUploadAudio(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 audio\");\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\tif (file.type.indexOf(\"audio\") === -1) {\n\t\t\tsetError(\"O arquivo selecionado não é um arquivo de áudio\");\n\t\t\treturn;\n\t\t}\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadAudio(file);\n\t}\n\n\tconst errorMessage = fieldError || error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasAudio\" : \"noHasAudio\";\n\tconst className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;\n\n\treturn (\n\t\t<FieldWrapper>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\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\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tdropAudioText={dropAudioText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectAudioButtonText={selectAudioButtonText}\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\tfilePath={filePath}\n\t\t\t\t\t\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tchangeAudioButtonText={changeAudioButtonText}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\treSendAudio={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadAudio(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\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { AudioUpload };\n"],"mappings":";;;;;;;;;;AAgFA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,UACA,cAAW,QACX,YAAS,QACT,aACA,sBAAmB,OACnB,2BAAwB,+BACxB,mBAAgB,+CAChB,2BAAwB,2BACxB,iBAAc,WACd,WACA,kBAAe,IACf,kBAAe,IACf,cAAW,OACR,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,sBAAsB;EAChC,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,QAEJ;OAAI,EAAK,KAAK,QAAQ,OAAO,MAAM,IAAI;IACtC,EAAS,iDAAiD;IAC1D;GACD;GAGA,AADA,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;EAHtB;CAID;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD,EAAA,UAAA;EACE,KAAS,kBAAC,GAAD;GAA0B;aAAe;EAAkB,CAAA;EAErE,kBAAC,OAAD;GAAgB,WAAA,oBARQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAOhD;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;KACG;KACU;KACb;KACQ;KACP;KACX,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;EAEJ,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;CAC1C,EAAA,CAAA;AAEhB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioUpload/index.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldError } from \"../fieldError\";\nimport { FieldLabel } from \"../fieldLabel\";\nimport { FieldWrapper } from \"../fieldWrapper\";\n\nimport { HasFileContent } from \"./hasFileContent\";\nimport { NoFileContent } from \"./noFileContent\";\nimport \"./styles.css\";\n\ntype AudioUploadProps = {\n\t/** Field name for form submission (stores the uploaded audio URL). Required. */\n\tname: string;\n\t/** Server endpoint URL that receives the `multipart/form-data` upload request. Required. */\n\taction: string;\n\t/** Form-data field name used for the file. @default \"file\" */\n\tfileName?: string;\n\t/** HTTP method for the upload request. @default \"POST\" */\n\tmethod?: string;\n\t/** Accepted audio MIME types or extensions (e.g. `\"audio/mp3,audio/wav\"`). @default \"audio/*\" */\n\tacceptAudio?: string;\n\t/** Text displayed in the drag-and-drop zone. @default \"Ou arraste e solte um arquivo de áudio aqui\" */\n\tdropAudioText?: string;\n\t/** Label for the file-picker button before a file is selected. @default \"Selecionar arquivo de áudio\" */\n\tselectAudioButtonText?: string;\n\t/** Label for the file-picker button after a file is selected. @default \"Trocar arquivo de áudio\" */\n\tchangeAudioButtonText?: string;\n\t/** Tooltip/label for the resend button shown after a failed upload. @default \"Reenviar áudio\" */\n\tresendAudioText?: string;\n\t/** Error message shown when the selected file isn't an audio file. @default \"O arquivo selecionado não é um arquivo de áudio\" */\n\tinvalidFileTypeText?: string;\n\t/** Error message shown when the upload request fails. @default \"Erro ao enviar áudio\" */\n\tuploadErrorText?: string;\n\t/** Callback fired after a successful upload. Receives the URL returned by the server. */\n\tonChange?: (url?: string) => void;\n\t/** Property name in the server response that contains the file URL. @default \"url\" */\n\tfileResponseName?: string;\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/** Disables file selection and upload. @default false */\n\tdisabled?: boolean;\n\t/** Pre-populated audio URL (e.g. an existing recording). @default \"\" */\n\tdefaultValue?: string;\n};\n\n/**\n * AudioUpload, drag-and-drop audio file uploader with server upload and playback 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.fileName - Form-data field name for the file. Default: \"file\"\n * @param props.method - HTTP method. Default: \"POST\"\n * @param props.acceptAudio - Accepted MIME types / extensions. Default: \"audio/*\"\n * @param props.onChange - Callback fired after a successful upload, receives the audio URL.\n * @param props.fileResponseName - Server response property containing the URL. Default: \"url\"\n * @param props.label - Label text displayed above the upload area.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.disabled - Disables file selection and upload. Default: false\n * @param props.defaultValue - Pre-populated audio URL.\n * @param props.resendAudioText - Resend button tooltip after a failed upload. Default: \"Reenviar áudio\"\n * @param props.invalidFileTypeText - Error shown for a non-audio file. Default: \"O arquivo selecionado não é um arquivo de áudio\"\n * @param props.uploadErrorText - Error shown when the upload request fails. Default: \"Erro ao enviar áudio\"\n *\n * @returns AudioUpload JSX element wrapped in `FieldWrapper`.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioUpload name=\"audio\" action=\"/api/upload\" />\n *\n * // With label and custom texts\n * <AudioUpload\n *   name=\"podcast\"\n *   action=\"/api/upload/podcast\"\n *   label=\"Podcast Episode\"\n *   showAsterisk\n *   selectAudioButtonText=\"Choose audio file\"\n *   onChange={(url) => setPodcastUrl(url)}\n * />\n * ```\n */\n\nfunction AudioUpload(props: AudioUploadProps) {\n\tconst {\n\t\tname,\n\t\tlabel,\n\t\tfileName = \"file\",\n\t\tmethod = \"POST\",\n\t\tonChange,\n\t\tfileResponseName = \"url\",\n\t\tselectAudioButtonText = \"Selecionar arquivo de áudio\",\n\t\tdropAudioText = \"Ou arraste e solte um arquivo de áudio aqui\",\n\t\tchangeAudioButtonText = \"Trocar arquivo de áudio\",\n\t\tresendAudioText = \"Reenviar áudio\",\n\t\tinvalidFileTypeText = \"O arquivo selecionado não é um arquivo de áudio\",\n\t\tuploadErrorText = \"Erro ao enviar áudio\",\n\t\tacceptAudio = \"audio/*\",\n\t\taction,\n\t\tdefaultValue = \"\",\n\t\tshowAsterisk = false,\n\t\tdisabled = false,\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 handleUploadAudio(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(uploadErrorText);\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\tif (file.type.indexOf(\"audio\") === -1) {\n\t\t\tsetError(invalidFileTypeText);\n\t\t\treturn;\n\t\t}\n\n\t\tsetFilePath(URL.createObjectURL(file));\n\t\thandleUploadAudio(file);\n\t}\n\n\tconst errorMessage = fieldError || error;\n\n\tconst hasErrorClassName = errorMessage ? \"hasError\" : \"noHasError\";\n\tconst hasImageClassName = filePath ? \"hasAudio\" : \"noHasAudio\";\n\tconst className = `arkynAudioUpload ${hasErrorClassName} ${hasImageClassName}`;\n\n\treturn (\n\t\t<FieldWrapper>\n\t\t\t{label && <FieldLabel showAsterisk={showAsterisk}>{label}</FieldLabel>}\n\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\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tdropAudioText={dropAudioText}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tselectAudioButtonText={selectAudioButtonText}\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\tfilePath={filePath}\n\t\t\t\t\t\tacceptAudio={acceptAudio}\n\t\t\t\t\t\tchangeAudioButtonText={changeAudioButtonText}\n\t\t\t\t\t\tresendAudioText={resendAudioText}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\thandleSelectFile={handleSelectFile}\n\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\treSendAudio={\n\t\t\t\t\t\t\terrorMessage && file ? () => handleUploadAudio(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\n\t\t\t{errorMessage && <FieldError>{errorMessage}</FieldError>}\n\t\t</FieldWrapper>\n\t);\n}\n\nexport { AudioUpload };\n"],"mappings":";;;;;;;;;;AAyFA,SAAS,EAAY,GAAyB;CAC7C,IAAM,EACL,SACA,UACA,cAAW,QACX,YAAS,QACT,aACA,sBAAmB,OACnB,2BAAwB,+BACxB,mBAAgB,+CAChB,2BAAwB,2BACxB,qBAAkB,kBAClB,yBAAsB,mDACtB,qBAAkB,wBAClB,iBAAc,WACd,WACA,kBAAe,IACf,kBAAe,IACf,cAAW,OACR,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,CAAe;EACzB,CAAC,CAAC,CACD,cAAc,EAAa,EAAK,CAAC;CACpC;CAEA,SAAS,EAAiB,GAAY;EACjC,QAEJ;OAAI,EAAK,KAAK,QAAQ,OAAO,MAAM,IAAI;IACtC,EAAS,CAAmB;IAC5B;GACD;GAGA,AADA,EAAY,IAAI,gBAAgB,CAAI,CAAC,GACrC,EAAkB,CAAI;EAHtB;CAID;CAEA,IAAM,IAAe,KAAc;CAMnC,OACC,kBAAC,GAAD,EAAA,UAAA;EACE,KAAS,kBAAC,GAAD;GAA0B;aAAe;EAAkB,CAAA;EAErE,kBAAC,OAAD;GAAgB,WAAA,oBARQ,IAAe,aAAa,aAEE,GAD9B,IAAW,aAAa;aAOhD;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;KACG;KACU;KACN;KACP;KACQ;KACP;KACX,aACC,KAAgB,UAAa,EAAkB,CAAI,IAAI,KAAA;IAExD,CAAA;GAEE;;EAEJ,KAAgB,kBAAC,GAAD,EAAA,UAAa,EAAyB,CAAA;CAC1C,EAAA,CAAA;AAEhB"}

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

@@ -22,6 +22,8 @@ function c(c) {
 		children: /* @__PURE__ */ o("button", {
 			id: E,
 			type: "button",
+			role: "checkbox",
+			"aria-checked": j,
 			className: M,
 			onClick: N,
 			...S,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/checkbox/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { type ButtonHTMLAttributes, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport \"./styles.css\";\n\ntype CheckboxProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"type\"\n\t| \"name\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"onSelect\"\n\t| \"onClick\"\n> & {\n\t/** Optional label text displayed beside the checkbox. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Validation error message displayed below the checkbox. */\n\terrorMessage?: string;\n\t/**\n\t * Checkbox size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\" | \"sm\";\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Value stored in the hidden input when checked. @default \"checked\" */\n\tvalue?: string;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Callback fired on toggle, receives the value string (or `\"\"` when unchecked). */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Checkbox, interactive checkbox input with label, validation, and form integration.\n *\n * Stores value in a hidden `<input>` for native form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed beside the checkbox.\n * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: \"md\"\n * @param props.value - Value stored when checked. Default: \"checked\"\n * @param props.checked - Controlled checked state.\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.onCheck - Callback fired on toggle, receives value or `\"\"` when unchecked.\n * @param props.errorMessage - Validation error message.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**\n *\n * @returns Checkbox JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" />\n *\n * // With custom value and error\n * <Checkbox\n *   name=\"newsletter\"\n *   label=\"Subscribe to newsletter\"\n *   value=\"subscribed\"\n *   errorMessage={errors.newsletter}\n * />\n *\n * // Controlled\n * <Checkbox\n *   name=\"premium\"\n *   label=\"Enable premium features\"\n *   size=\"lg\"\n *   checked={isPremium}\n *   onCheck={(v) => setIsPremium(!!v)}\n * />\n * ```\n */\n\nfunction Checkbox(props: CheckboxProps) {\n\tconst {\n\t\tid,\n\t\tname,\n\t\tclassName: wrapperClassName = \"\",\n\t\tsize = \"md\",\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultChecked = false,\n\t\tlabel,\n\t\tchecked: baseChecked = null,\n\t\tonCheck,\n\t\torientation = \"horizontalReverse\",\n\t\tshowAsterisk,\n\t\tunShowFieldTemplate,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst checkboxRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst checkboxId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked || false);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst currentCheckedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\n\tconst className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;\n\n\tfunction handleCheck() {\n\t\tconst defaultChecked = isChecked;\n\t\tsetIsChecked(!defaultChecked);\n\t\tonCheck?.(!defaultChecked ? value || \"checked\" : \"\");\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t<button\n\t\t\t\tid={checkboxId}\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleCheck}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={checkboxRef}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : \"\"}\n\t\t\t\t/>\n\n\t\t\t\t<Check />\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAgGA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OACA,SACA,WAAW,IAAmB,IAC9B,UAAO,MACP,cAAc,GACd,oBAAiB,IACjB,UACA,SAAS,IAAc,MACvB,YACA,iBAAc,qBACd,iBACA,wBACA,UACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAc,EAAyB,IAAI,GAC3C,IAAc,EAAM,GACpB,IAAa,KAAM,GAEnB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GAEZ,CAAC,GAAW,KAAgB,EAAS,KAAkB,EAAK,GAE5D,IACL,OAAO,KAAgB,YAAY,IAAc,GAK5C,IAAY,iBAAiB,EAAK,GAHrB,IAAU,cAAc,aAGW,GAF1B,IAAiB,gBAAgB;CAI7D,SAAS,IAAc;EACtB,IAAM,IAAiB;EAEvB,AADA,EAAa,CAAC,CAAc,GAC5B,IAAW,IAAsC,KAArB,KAAS,SAAc;CACpD;CAEA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,IAAI;GACJ,MAAK;GACM;GACX,SAAS;GACT,GAAI;aALL,CAOC,kBAAC,SAAD;IACC,MAAK;IACC;IACN,KAAK;IACL,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA,GAED,kBAAC,GAAD,CAAQ,CAAA,CACD;;CACM,CAAA;AAEjB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/checkbox/index.tsx"],"sourcesContent":["import { Check } from \"lucide-react\";\nimport { type ButtonHTMLAttributes, useId, useRef, useState } from \"react\";\n\nimport { useForm } from \"../../hooks/useForm\";\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\n\nimport \"./styles.css\";\n\ntype CheckboxProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t| \"size\"\n\t| \"prefix\"\n\t| \"type\"\n\t| \"name\"\n\t| \"defaultValue\"\n\t| \"value\"\n\t| \"onChange\"\n\t| \"onSelect\"\n\t| \"onClick\"\n> & {\n\t/** Optional label text displayed beside the checkbox. */\n\tlabel?: string;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Validation error message displayed below the checkbox. */\n\terrorMessage?: string;\n\t/**\n\t * Checkbox size.\n\t * @default \"md\"\n\t */\n\tsize?: \"md\" | \"lg\" | \"sm\";\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Value stored in the hidden input when checked. @default \"checked\" */\n\tvalue?: string;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Callback fired on toggle, receives the value string (or `\"\"` when unchecked). */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * Checkbox, interactive checkbox input with label, validation, and form integration.\n *\n * Stores value in a hidden `<input>` for native form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed beside the checkbox.\n * @param props.size - Checkbox size (`sm` | `md` | `lg`). Default: \"md\"\n * @param props.value - Value stored when checked. Default: \"checked\"\n * @param props.checked - Controlled checked state.\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.onCheck - Callback fired on toggle, receives value or `\"\"` when unchecked.\n * @param props.errorMessage - Validation error message.\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n *\n * **...Other valid HTML properties for `<button>` (except `type`, `name`, `defaultValue`, `value`, `onChange`, `onSelect`, `onClick`)**\n *\n * @returns Checkbox JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Checkbox name=\"terms\" label=\"I agree to the terms and conditions\" />\n *\n * // With custom value and error\n * <Checkbox\n *   name=\"newsletter\"\n *   label=\"Subscribe to newsletter\"\n *   value=\"subscribed\"\n *   errorMessage={errors.newsletter}\n * />\n *\n * // Controlled\n * <Checkbox\n *   name=\"premium\"\n *   label=\"Enable premium features\"\n *   size=\"lg\"\n *   checked={isPremium}\n *   onCheck={(v) => setIsPremium(!!v)}\n * />\n * ```\n */\n\nfunction Checkbox(props: CheckboxProps) {\n\tconst {\n\t\tid,\n\t\tname,\n\t\tclassName: wrapperClassName = \"\",\n\t\tsize = \"md\",\n\t\terrorMessage: baseErrorMessage,\n\t\tdefaultChecked = false,\n\t\tlabel,\n\t\tchecked: baseChecked = null,\n\t\tonCheck,\n\t\torientation = \"horizontalReverse\",\n\t\tshowAsterisk,\n\t\tunShowFieldTemplate,\n\t\tvalue,\n\t\t...rest\n\t} = props;\n\n\tconst { fieldErrors } = useForm();\n\n\tconst checkboxRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst checkboxId = id || generatedId;\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked || false);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst currentCheckedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\n\tconst className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass}`;\n\n\tfunction handleCheck() {\n\t\tconst defaultChecked = isChecked;\n\t\tsetIsChecked(!defaultChecked);\n\t\tonCheck?.(!defaultChecked ? value || \"checked\" : \"\");\n\t}\n\n\treturn (\n\t\t<FieldTemplate\n\t\t\tname={name}\n\t\t\tlabel={label}\n\t\t\tshowAsterisk={showAsterisk}\n\t\t\tclassName={wrapperClassName}\n\t\t\terrorMessage={errorMessage}\n\t\t\tunShowFieldTemplate={unShowFieldTemplate}\n\t\t\torientation={orientation}\n\t\t>\n\t\t\t{/* biome-ignore lint/a11y/useSemanticElements: intentional custom control — a native <input type=\"checkbox\"> can't be styled to match this design; button + role=\"checkbox\" + aria-checked is the standard accessible pattern for custom checkboxes. */}\n\t\t\t<button\n\t\t\t\tid={checkboxId}\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"checkbox\"\n\t\t\t\taria-checked={currentChecked}\n\t\t\t\tclassName={className}\n\t\t\t\tonClick={handleCheck}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={checkboxRef}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : \"\"}\n\t\t\t\t/>\n\n\t\t\t\t<Check />\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;;AAgGA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OACA,SACA,WAAW,IAAmB,IAC9B,UAAO,MACP,cAAc,GACd,oBAAiB,IACjB,UACA,SAAS,IAAc,MACvB,YACA,iBAAc,qBACd,iBACA,wBACA,UACA,GAAG,MACA,GAEE,EAAE,mBAAgB,EAAQ,GAE1B,IAAc,EAAyB,IAAI,GAC3C,IAAc,EAAM,GACpB,IAAa,KAAM,GAEnB,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GAEZ,CAAC,GAAW,KAAgB,EAAS,KAAkB,EAAK,GAE5D,IACL,OAAO,KAAgB,YAAY,IAAc,GAK5C,IAAY,iBAAiB,EAAK,GAHrB,IAAU,cAAc,aAGW,GAF1B,IAAiB,gBAAgB;CAI7D,SAAS,IAAc;EACtB,IAAM,IAAiB;EAEvB,AADA,EAAa,CAAC,CAAc,GAC5B,IAAW,IAAsC,KAArB,KAAS,SAAc;CACpD;CAEA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAGb,kBAAC,UAAD;GACC,IAAI;GACJ,MAAK;GACL,MAAK;GACL,gBAAc;GACH;GACX,SAAS;GACT,GAAI;aAPL,CASC,kBAAC,SAAD;IACC,MAAK;IACC;IACN,KAAK;IACL,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA,GAED,kBAAC,GAAD,CAAQ,CAAA,CACD;;CACM,CAAA;AAEjB"}

package/dist/modules/components/radio/radioBox/index.js

@@ -14,6 +14,8 @@ function r(r) {
 		className: b.trim(),
 		children: [/* @__PURE__ */ t("button", {
 			type: "button",
+			role: "radio",
+			"aria-checked": _,
 			disabled: y,
 			onClick: x,
 			onFocus: S,

package/dist/modules/components/radio/radioBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioBox/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nimport { useRadioGroup } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Value submitted to the form when this option is selected. Required. */\n\tvalue: string;\n\t/** Applies error styling. Inherited from `RadioGroup` when not set. */\n\tisError?: boolean;\n\t/** Size variant. Inherits from `RadioGroup` when not set. */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * RadioBox, individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.\n *\n * Reads active value, size, error state, and disabled state from `RadioGroup` context.\n * Must be used as a direct child of `RadioGroup`.\n *\n * @param props.value - Option value. Required.\n * @param props.children - Option label content (text, icons, or rich markup).\n * @param props.disabled - Disables this option (group can also disable all options).\n * @param props.size - Size override. Inherits from group by default.\n *\n * **...Other valid HTML `<button>` properties**\n *\n * @returns RadioBox JSX element.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Choose a plan\" onChange={setPlan}>\n *   <RadioBox value=\"basic\">Basic, $9/mo</RadioBox>\n *   <RadioBox value=\"pro\">Pro, $29/mo</RadioBox>\n *   <RadioBox value=\"enterprise\" disabled>Enterprise, contact us</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioBox(props: RadioBoxProps) {\n\tconst {\n\t\tvalue: componentValue,\n\t\tsize: componentSize,\n\t\tdisabled,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tonFocus,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\thandleChange,\n\t\tsize: groupSize,\n\t\tvalue,\n\t\tisError,\n\t\tdisabled: groupDisabled,\n\t} = useRadioGroup();\n\n\tconst isChecked = value === componentValue;\n\tconst size = componentSize || groupSize;\n\n\tconst isDisabled = disabled || groupDisabled;\n\n\tconst checkedClass = isChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst disabledClass = isDisabled ? \"disabledTrue\" : \"disabledFalse\";\n\tconst className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;\n\n\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\tonClick?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\tfunction handleFocus(event: React.FocusEvent<HTMLButtonElement>) {\n\t\tonFocus?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\treturn (\n\t\t<label className={className.trim()}>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\t{...rest}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</label>\n\t);\n}\n\nexport { RadioBox };\n"],"mappings":";;;;AAuCA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OAAO,GACP,MAAM,GACN,aACA,aACA,WAAW,IAAgB,IAC3B,YACA,YACA,GAAG,MACA,GAEE,EACL,iBACA,MAAM,GACN,UACA,YACA,UAAU,MACP,EAAc,GAEZ,IAAY,MAAU,GACtB,IAAO,KAAiB,GAExB,IAAa,KAAY,GAKzB,IAAY,iBAAiB,EAAK,GAHnB,IAAY,gBAAgB,eAGO,GAFrC,IAAU,cAAc,aAE2B,GADhD,IAAa,iBAAiB,gBACmC,GAAG;CAE1F,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,OACC,kBAAC,SAAD;EAAO,WAAW,EAAU,KAAK;YAAjC,CACC,kBAAC,UAAD;GACC,MAAK;GACL,UAAU;GACV,SAAS;GACT,SAAS;GACT,GAAI;EACJ,CAAA,GAEA,CACK;;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioBox/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nimport { useRadioGroup } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioBoxProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\t/** Value submitted to the form when this option is selected. Required. */\n\tvalue: string;\n\t/** Applies error styling. Inherited from `RadioGroup` when not set. */\n\tisError?: boolean;\n\t/** Size variant. Inherits from `RadioGroup` when not set. */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n};\n\n/**\n * RadioBox, individual option inside a `RadioGroup`. Renders as a `<label>` + hidden `<button>` pair.\n *\n * Reads active value, size, error state, and disabled state from `RadioGroup` context.\n * Must be used as a direct child of `RadioGroup`.\n *\n * @param props.value - Option value. Required.\n * @param props.children - Option label content (text, icons, or rich markup).\n * @param props.disabled - Disables this option (group can also disable all options).\n * @param props.size - Size override. Inherits from group by default.\n *\n * **...Other valid HTML `<button>` properties**\n *\n * @returns RadioBox JSX element.\n *\n * @example\n * ```tsx\n * <RadioGroup name=\"plan\" label=\"Choose a plan\" onChange={setPlan}>\n *   <RadioBox value=\"basic\">Basic, $9/mo</RadioBox>\n *   <RadioBox value=\"pro\">Pro, $29/mo</RadioBox>\n *   <RadioBox value=\"enterprise\" disabled>Enterprise, contact us</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioBox(props: RadioBoxProps) {\n\tconst {\n\t\tvalue: componentValue,\n\t\tsize: componentSize,\n\t\tdisabled,\n\t\tchildren,\n\t\tclassName: baseClassName = \"\",\n\t\tonClick,\n\t\tonFocus,\n\t\t...rest\n\t} = props;\n\n\tconst {\n\t\thandleChange,\n\t\tsize: groupSize,\n\t\tvalue,\n\t\tisError,\n\t\tdisabled: groupDisabled,\n\t} = useRadioGroup();\n\n\tconst isChecked = value === componentValue;\n\tconst size = componentSize || groupSize;\n\n\tconst isDisabled = disabled || groupDisabled;\n\n\tconst checkedClass = isChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst errorClass = isError ? \"errorTrue\" : \"errorFalse\";\n\tconst disabledClass = isDisabled ? \"disabledTrue\" : \"disabledFalse\";\n\tconst className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;\n\n\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\tonClick?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\tfunction handleFocus(event: React.FocusEvent<HTMLButtonElement>) {\n\t\tonFocus?.(event);\n\t\thandleChange(componentValue);\n\t}\n\n\treturn (\n\t\t<label className={className.trim()}>\n\t\t\t{/* biome-ignore lint/a11y/useSemanticElements: intentional custom control — a native <input type=\"radio\"> can't be styled to match this design; button + role=\"radio\" + aria-checked is the standard accessible pattern for custom radio options. */}\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"radio\"\n\t\t\t\taria-checked={isChecked}\n\t\t\t\tdisabled={isDisabled}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\t{...rest}\n\t\t\t/>\n\n\t\t\t{children}\n\t\t</label>\n\t);\n}\n\nexport { RadioBox };\n"],"mappings":";;;;AAuCA,SAAS,EAAS,GAAsB;CACvC,IAAM,EACL,OAAO,GACP,MAAM,GACN,aACA,aACA,WAAW,IAAgB,IAC3B,YACA,YACA,GAAG,MACA,GAEE,EACL,iBACA,MAAM,GACN,UACA,YACA,UAAU,MACP,EAAc,GAEZ,IAAY,MAAU,GACtB,IAAO,KAAiB,GAExB,IAAa,KAAY,GAKzB,IAAY,iBAAiB,EAAK,GAHnB,IAAY,gBAAgB,eAGO,GAFrC,IAAU,cAAc,aAE2B,GADhD,IAAa,iBAAiB,gBACmC,GAAG;CAE1F,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,SAAS,EAAY,GAA4C;EAEhE,AADA,IAAU,CAAK,GACf,EAAa,CAAc;CAC5B;CAEA,OACC,kBAAC,SAAD;EAAO,WAAW,EAAU,KAAK;YAAjC,CAEC,kBAAC,UAAD;GACC,MAAK;GACL,MAAK;GACL,gBAAc;GACd,UAAU;GACV,SAAS;GACT,SAAS;GACT,GAAI;EACJ,CAAA,GAEA,CACK;;AAET"}

package/dist/modules/components/radio/radioGroup/index.js

@@ -32,6 +32,7 @@ function o(o) {
 				name: c,
 				value: f || b
 			}), /* @__PURE__ */ i("div", {
+				role: "radiogroup",
 				className: E.trim(),
 				...y
 			})]

package/dist/modules/components/radio/radioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioGroup/index.tsx"],"sourcesContent":["import { type HTMLAttributes, useState } from \"react\";\n\nimport { useForm } from \"../../../hooks/useForm\";\nimport { FieldTemplate } from \"../../../services/fieldTemplate\";\n\nimport { RadioProvider } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Field name used for form submission. Required. */\n\tname: string;\n\t/** Label displayed above the group. */\n\tlabel?: string;\n\t/** Appends an asterisk to the label. @default false */\n\tshowAsterisk?: boolean;\n\t/** Error message shown below the group. Overrides `fieldErrors[name]` from `FormProvider`. */\n\terrorMessage?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Initial selected value (uncontrolled). @default \"\" */\n\tdefaultValue?: string;\n\t/** Callback fired when the selected option changes. */\n\tonChange?: (value: string) => void;\n\t/** Size variant applied to all `RadioBox` children. @default \"md\" */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Disables all `RadioBox` children. @default false */\n\tdisabled?: boolean;\n\t/** When `true`, skips the `FieldTemplate` wrapper (label, error message). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Layout direction of the `FieldWrapper`. @default \"horizontal\" */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * RadioGroup, managed group of `RadioBox` options with form integration.\n *\n * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from\n * the nearest `FormProvider` when no `errorMessage` is explicitly provided.\n *\n * @param props.name - Form field name. Required.\n * @param props.label - Label displayed above the group.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.value - Controlled selection.\n * @param props.defaultValue - Initial selection (uncontrolled). Default: `\"\"`\n * @param props.onChange - Called with the newly selected value.\n * @param props.size - Size for all child `RadioBox` elements. Default: `\"md\"`\n * @param props.disabled - Disables all options. Default: false\n * @param props.errorMessage - Validation error message.\n * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false\n *\n * **...Other valid HTML `<div>` properties**\n *\n * @returns RadioGroup JSX element.\n *\n * @example\n * ```tsx\n * // Uncontrolled with label\n * <RadioGroup name=\"gender\" label=\"Gender\" showAsterisk defaultValue=\"male\">\n *   <RadioBox value=\"male\">Male</RadioBox>\n *   <RadioBox value=\"female\">Female</RadioBox>\n *   <RadioBox value=\"other\">Other</RadioBox>\n * </RadioGroup>\n *\n * // Controlled with change handler\n * <RadioGroup name=\"plan\" label=\"Subscription plan\" value={plan} onChange={setPlan}>\n *   <RadioBox value=\"basic\">Basic, $9/mo</RadioBox>\n *   <RadioBox value=\"pro\">Pro, $29/mo</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioGroup(props: RadioGroupProps) {\n\tconst {\n\t\tdefaultValue = \"\",\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\terrorMessage: baseErrorMessage,\n\t\tvalue: forceValue,\n\t\tonChange,\n\t\tsize = \"md\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t\t...rest\n\t} = props;\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst { fieldErrors } = useForm();\n\n\tfunction handleChange(value: string) {\n\t\tsetValue(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst className = `arkynRadioGroup ${size}`;\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<RadioProvider\n\t\t\t\tisError={isError}\n\t\t\t\tsize={size}\n\t\t\t\tvalue={forceValue || value}\n\t\t\t\thandleChange={handleChange}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadOnly\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceValue || value}\n\t\t\t\t/>\n\n\t\t\t\t<div className={className.trim()} {...rest} />\n\t\t\t</RadioProvider>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RadioGroup };\n"],"mappings":";;;;;;;AAuEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,kBAAe,IACf,SACA,UACA,iBACA,cAAc,GACd,OAAO,GACP,aACA,UAAO,MACP,WAAW,IAAmB,IAC9B,cAAW,IACX,yBAAsB,IACtB,iBAAc,YACd,GAAG,MACA,GAEE,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,EAAE,mBAAgB,EAAQ;CAEhC,SAAS,EAAa,GAAe;EAEpC,AADA,EAAS,CAAK,GACV,KAAU,EAAS,CAAK;CAC7B;CAEA,IAAM,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAY,mBAAmB;CAErC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACU;GACH;GACN,OAAO,KAAc;GACP;GACJ;aALX,CAOC,kBAAC,SAAD;IACC,OAAO,EAAE,SAAS,OAAO;IACzB,MAAK;IACL,UAAA;IACM;IACN,OAAO,KAAc;GACrB,CAAA,GAED,kBAAC,OAAD;IAAK,WAAW,EAAU,KAAK;IAAG,GAAI;GAAO,CAAA,CAC/B;;CACD,CAAA;AAEjB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/radio/radioGroup/index.tsx"],"sourcesContent":["import { type HTMLAttributes, useState } from \"react\";\n\nimport { useForm } from \"../../../hooks/useForm\";\nimport { FieldTemplate } from \"../../../services/fieldTemplate\";\n\nimport { RadioProvider } from \"../radioContext\";\nimport \"./styles.css\";\n\ntype RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Field name used for form submission. Required. */\n\tname: string;\n\t/** Label displayed above the group. */\n\tlabel?: string;\n\t/** Appends an asterisk to the label. @default false */\n\tshowAsterisk?: boolean;\n\t/** Error message shown below the group. Overrides `fieldErrors[name]` from `FormProvider`. */\n\terrorMessage?: string;\n\t/** Controlled selected value. */\n\tvalue?: string;\n\t/** Initial selected value (uncontrolled). @default \"\" */\n\tdefaultValue?: string;\n\t/** Callback fired when the selected option changes. */\n\tonChange?: (value: string) => void;\n\t/** Size variant applied to all `RadioBox` children. @default \"md\" */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Disables all `RadioBox` children. @default false */\n\tdisabled?: boolean;\n\t/** When `true`, skips the `FieldTemplate` wrapper (label, error message). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Layout direction of the `FieldWrapper`. @default \"horizontal\" */\n\torientation?: \"horizontal\" | \"vertical\" | \"horizontalReverse\";\n};\n\n/**\n * RadioGroup, managed group of `RadioBox` options with form integration.\n *\n * Renders a hidden `<input>` for native form submission. Reads `fieldErrors[name]` from\n * the nearest `FormProvider` when no `errorMessage` is explicitly provided.\n *\n * @param props.name - Form field name. Required.\n * @param props.label - Label displayed above the group.\n * @param props.showAsterisk - Appends `*` to the label. Default: false\n * @param props.value - Controlled selection.\n * @param props.defaultValue - Initial selection (uncontrolled). Default: `\"\"`\n * @param props.onChange - Called with the newly selected value.\n * @param props.size - Size for all child `RadioBox` elements. Default: `\"md\"`\n * @param props.disabled - Disables all options. Default: false\n * @param props.errorMessage - Validation error message.\n * @param props.unShowFieldTemplate - Omit label/error wrapper. Default: false\n *\n * **...Other valid HTML `<div>` properties**\n *\n * @returns RadioGroup JSX element.\n *\n * @example\n * ```tsx\n * // Uncontrolled with label\n * <RadioGroup name=\"gender\" label=\"Gender\" showAsterisk defaultValue=\"male\">\n *   <RadioBox value=\"male\">Male</RadioBox>\n *   <RadioBox value=\"female\">Female</RadioBox>\n *   <RadioBox value=\"other\">Other</RadioBox>\n * </RadioGroup>\n *\n * // Controlled with change handler\n * <RadioGroup name=\"plan\" label=\"Subscription plan\" value={plan} onChange={setPlan}>\n *   <RadioBox value=\"basic\">Basic, $9/mo</RadioBox>\n *   <RadioBox value=\"pro\">Pro, $29/mo</RadioBox>\n * </RadioGroup>\n * ```\n */\n\nfunction RadioGroup(props: RadioGroupProps) {\n\tconst {\n\t\tdefaultValue = \"\",\n\t\tname,\n\t\tlabel,\n\t\tshowAsterisk,\n\t\terrorMessage: baseErrorMessage,\n\t\tvalue: forceValue,\n\t\tonChange,\n\t\tsize = \"md\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tdisabled = false,\n\t\tunShowFieldTemplate = false,\n\t\torientation = \"vertical\",\n\t\t...rest\n\t} = props;\n\n\tconst [value, setValue] = useState(defaultValue);\n\tconst { fieldErrors } = useForm();\n\n\tfunction handleChange(value: string) {\n\t\tsetValue(value);\n\t\tif (onChange) onChange(value);\n\t}\n\n\tconst errorMessage = baseErrorMessage || fieldErrors?.[name];\n\tconst isError = !!errorMessage;\n\tconst className = `arkynRadioGroup ${size}`;\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<RadioProvider\n\t\t\t\tisError={isError}\n\t\t\t\tsize={size}\n\t\t\t\tvalue={forceValue || value}\n\t\t\t\thandleChange={handleChange}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tstyle={{ display: \"none\" }}\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\treadOnly\n\t\t\t\t\tname={name}\n\t\t\t\t\tvalue={forceValue || value}\n\t\t\t\t/>\n\n\t\t\t\t<div role=\"radiogroup\" className={className.trim()} {...rest} />\n\t\t\t</RadioProvider>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { RadioGroup };\n"],"mappings":";;;;;;;AAuEA,SAAS,EAAW,GAAwB;CAC3C,IAAM,EACL,kBAAe,IACf,SACA,UACA,iBACA,cAAc,GACd,OAAO,GACP,aACA,UAAO,MACP,WAAW,IAAmB,IAC9B,cAAW,IACX,yBAAsB,IACtB,iBAAc,YACd,GAAG,MACA,GAEE,CAAC,GAAO,KAAY,EAAS,CAAY,GACzC,EAAE,mBAAgB,EAAQ;CAEhC,SAAS,EAAa,GAAe;EAEpC,AADA,EAAS,CAAK,GACV,KAAU,EAAS,CAAK;CAC7B;CAEA,IAAM,IAAe,KAAoB,IAAc,IACjD,IAAU,CAAC,CAAC,GACZ,IAAY,mBAAmB;CAErC,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,GAAD;GACU;GACH;GACN,OAAO,KAAc;GACP;GACJ;aALX,CAOC,kBAAC,SAAD;IACC,OAAO,EAAE,SAAS,OAAO;IACzB,MAAK;IACL,UAAA;IACM;IACN,OAAO,KAAc;GACrB,CAAA,GAED,kBAAC,OAAD;IAAK,MAAK;IAAa,WAAW,EAAU,KAAK;IAAG,GAAI;GAAO,CAAA,CACjD;;CACD,CAAA;AAEjB"}

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

@@ -2,45 +2,94 @@
 import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/slider/index.tsx
-function o(o) {
-	let { onChange: s, value: c, disabled: l = !1, onDragging: u, className: d = "", ...f } = o, [p, m] = r(!1), h = n(null), g = () => m(!0), _ = e(() => m(!1), []), v = e((e) => {
-		if (l || !p || !h.current) return;
-		let t = h.current.getBoundingClientRect(), n = e.clientX - t.left;
-		s(Math.min(Math.max(n / t.width * 100, 0), 100));
+function o(e) {
+	return Math.min(Math.max(e, 0), 100);
+}
+function s(s) {
+	let { onChange: c, value: l, disabled: u = !1, onDragging: d, className: f = "", step: p = 1, ...m } = s, [h, g] = r(!1), _ = n(null), v = e((e) => {
+		if (!_.current) return null;
+		let t = _.current.getBoundingClientRect();
+		return t.width === 0 ? null : o((e - t.left) / t.width * 100);
+	}, []), y = () => g(!0), b = e(() => g(!1), []), x = e((e) => {
+		if (u || !h) return;
+		let t = v(e.clientX);
+		t !== null && c(t);
+	}, [
+		u,
+		h,
+		c,
+		v
+	]), S = e((e) => {
+		if (u || !h) return;
+		let t = e.touches[0];
+		if (!t) return;
+		let n = v(t.clientX);
+		n !== null && c(n);
 	}, [
-		l,
-		p,
-		s
-	]), y = (e) => {
-		if (l || !h.current) return;
-		let t = h.current.getBoundingClientRect(), n = e.clientX - t.left;
-		s(Math.min(Math.max(n / t.width * 100, 0), 100));
-	};
-	t(() => (p ? (u?.(!0), document.addEventListener("mousemove", v), document.addEventListener("mouseup", _)) : (u?.(!1), document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", _)), () => {
-		document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", _);
-	}), [
-		p,
 		u,
-		_,
+		h,
+		c,
 		v
+	]), C = (e) => {
+		if (u) return;
+		let t = v(e.clientX);
+		t !== null && c(t);
+	}, w = (e) => {
+		if (u) return;
+		g(!0);
+		let t = e.touches[0];
+		if (!t) return;
+		let n = v(t.clientX);
+		n !== null && c(n);
+	}, T = (e) => {
+		if (u) return;
+		let t = p * 10, n = {
+			ArrowLeft: l - p,
+			ArrowDown: l - p,
+			ArrowRight: l + p,
+			ArrowUp: l + p,
+			PageDown: l - t,
+			PageUp: l + t,
+			Home: 0,
+			End: 100
+		}[e.key];
+		n !== void 0 && (e.preventDefault(), c(o(n)));
+	};
+	t(() => (h ? (d?.(!0), document.addEventListener("mousemove", x), document.addEventListener("mouseup", b), document.addEventListener("touchmove", S), document.addEventListener("touchend", b)) : (d?.(!1), document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", b), document.removeEventListener("touchmove", S), document.removeEventListener("touchend", b)), () => {
+		document.removeEventListener("mousemove", x), document.removeEventListener("mouseup", b), document.removeEventListener("touchmove", S), document.removeEventListener("touchend", b);
+	}), [
+		h,
+		d,
+		b,
+		x,
+		S
 	]);
-	let b = `arkynSliderTrack ${p ? "isDragging" : "isNotDragging"} ${l ? "isDisabled" : "isEnabled"} ${d}`;
+	let E = `arkynSliderTrack ${h ? "isDragging" : "isNotDragging"} ${u ? "isDisabled" : "isEnabled"} ${f}`;
 	return /* @__PURE__ */ a("div", {
-		...f,
-		className: b,
-		onMouseDown: g,
-		onClick: y,
-		ref: h,
+		role: "slider",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": l,
+		"aria-orientation": "horizontal",
+		"aria-disabled": u || void 0,
+		tabIndex: u ? -1 : 0,
+		...m,
+		className: E,
+		onMouseDown: y,
+		onTouchStart: w,
+		onClick: C,
+		onKeyDown: T,
+		ref: _,
 		children: [/* @__PURE__ */ i("div", {
 			className: "arkynSliderFill",
-			style: { width: `${c}%` }
+			style: { width: `${l}%` }
 		}), /* @__PURE__ */ i("div", {
 			className: "arkynSliderThumb",
-			style: { left: `${c}%` }
+			style: { left: `${l}%` }
 		})]
 	});
 }
 //#endregion
-export { o as Slider };
+export { s as Slider };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/slider/index.tsx"],"sourcesContent":["import {\n\ttype HTMLAttributes,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport \"./styles.css\";\n\ntype SliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Current slider position as a percentage (0–100). Required. */\n\tvalue: number;\n\t/** Callback fired whenever the value changes. Required. */\n\tonChange: (value: number) => void;\n\t/** Disables all drag and click interactions. @default false */\n\tdisabled?: boolean;\n\t/** Callback fired when the dragging state changes (`true` = drag started, `false` = drag ended). */\n\tonDragging?: (isDragging: boolean) => void;\n};\n\n/**\n * Slider, interactive track for selecting a numeric value between 0 and 100.\n *\n * Pair with `useSlider` for managed state.\n *\n * @param props.value - Current position as a percentage (0–100). Required.\n * @param props.onChange - Callback fired on value change. Required.\n * @param props.disabled - Disables interactions. Default: false\n * @param props.onDragging - Callback fired when dragging starts or stops.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Slider JSX element.\n *\n * @example\n * ```tsx\n * // Controlled slider\n * const [value, setValue] = useState(50);\n * <Slider value={value} onChange={setValue} />\n *\n * // With useSlider hook\n * const [value, setValue] = useSlider(25);\n * <Slider value={value} onChange={setValue} onDragging={setIsDragging} />\n *\n * // Disabled\n * <Slider value={75} onChange={() => {}} disabled />\n * ```\n */\n\nfunction Slider(props: SliderProps) {\n\tconst {\n\t\tonChange,\n\t\tvalue,\n\t\tdisabled = false,\n\t\tonDragging,\n\t\tclassName = \"\",\n\t\t...rest\n\t} = props;\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst sliderRef = useRef<HTMLDivElement>(null);\n\n\tconst handleMouseDown = () => setIsDragging(true);\n\tconst handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n\tconst handleMouseMove = useCallback(\n\t\t(event: MouseEvent) => {\n\t\t\tif (disabled) return;\n\t\t\tif (!isDragging || !sliderRef.current) return;\n\n\t\t\tconst rect = sliderRef.current.getBoundingClientRect();\n\t\t\tconst offsetX = event.clientX - rect.left;\n\t\t\tconst newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);\n\n\t\t\tonChange(newValue);\n\t\t},\n\t\t[disabled, isDragging, onChange],\n\t);\n\n\tconst handleSliderClick = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\tif (!sliderRef.current) return;\n\n\t\tconst rect = sliderRef.current.getBoundingClientRect();\n\t\tconst offsetX = event.clientX - rect.left;\n\t\tconst newValue = Math.min(Math.max((offsetX / rect.width) * 100, 0), 100);\n\n\t\tonChange(newValue);\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDragging) {\n\t\t\tonDragging?.(true);\n\t\t\tdocument.addEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.addEventListener(\"mouseup\", handleMouseUp);\n\t\t} else {\n\t\t\tonDragging?.(false);\n\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t};\n\t}, [isDragging, onDragging, handleMouseUp, handleMouseMove]);\n\n\tconst isDraggingClass = isDragging ? \"isDragging\" : \"isNotDragging\";\n\tconst disabledClass = disabled ? \"isDisabled\" : \"isEnabled\";\n\tconst sliderClassname = `arkynSliderTrack ${isDraggingClass} ${disabledClass} ${className}`;\n\n\treturn (\n\t\t<div\n\t\t\t{...rest}\n\t\t\tclassName={sliderClassname}\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonClick={handleSliderClick}\n\t\t\tref={sliderRef}\n\t\t>\n\t\t\t<div className=\"arkynSliderFill\" style={{ width: `${value}%` }} />\n\t\t\t<div className=\"arkynSliderThumb\" style={{ left: `${value}%` }} />\n\t\t</div>\n\t);\n}\n\nexport { Slider };\n"],"mappings":";;;;AAkDA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,aACA,UACA,cAAW,IACX,eACA,eAAY,IACZ,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,IAAY,EAAuB,IAAI,GAEvC,UAAwB,EAAc,EAAI,GAC1C,IAAgB,QAAkB,EAAc,EAAK,GAAG,CAAC,CAAC,GAE1D,IAAkB,GACtB,MAAsB;EAEtB,IADI,KACA,CAAC,KAAc,CAAC,EAAU,SAAS;EAEvC,IAAM,IAAO,EAAU,QAAQ,sBAAsB,GAC/C,IAAU,EAAM,UAAU,EAAK;EAGrC,EAFiB,KAAK,IAAI,KAAK,IAAK,IAAU,EAAK,QAAS,KAAK,CAAC,GAAG,GAE5D,CAAQ;CAClB,GACA;EAAC;EAAU;EAAY;CAAQ,CAChC,GAEM,KAAqB,MAA4C;EAEtE,IADI,KACA,CAAC,EAAU,SAAS;EAExB,IAAM,IAAO,EAAU,QAAQ,sBAAsB,GAC/C,IAAU,EAAM,UAAU,EAAK;EAGrC,EAFiB,KAAK,IAAI,KAAK,IAAK,IAAU,EAAK,QAAS,KAAK,CAAC,GAAG,GAE5D,CAAQ;CAClB;CAEA,SACK,KACH,IAAa,EAAI,GACjB,SAAS,iBAAiB,aAAa,CAAe,GACtD,SAAS,iBAAiB,WAAW,CAAa,MAElD,IAAa,EAAK,GAClB,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,WAAW,CAAa,UAGzC;EAEZ,AADA,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,WAAW,CAAa;CACtD,IACE;EAAC;EAAY;EAAY;EAAe;CAAe,CAAC;CAI3D,IAAM,IAAkB,oBAFA,IAAa,eAAe,gBAEQ,GADtC,IAAW,eAAe,YAC6B,GAAG;CAEhF,OACC,kBAAC,OAAD;EACC,GAAI;EACJ,WAAW;EACX,aAAa;EACb,SAAS;EACT,KAAK;YALN,CAOC,kBAAC,OAAD;GAAK,WAAU;GAAkB,OAAO,EAAE,OAAO,GAAG,EAAM,GAAG;EAAI,CAAA,GACjE,kBAAC,OAAD;GAAK,WAAU;GAAmB,OAAO,EAAE,MAAM,GAAG,EAAM,GAAG;EAAI,CAAA,CAC7D;;AAEP"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/slider/index.tsx"],"sourcesContent":["import {\n\ttype HTMLAttributes,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport \"./styles.css\";\n\ntype SliderProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n\t/** Current slider position as a percentage (0–100). Required. */\n\tvalue: number;\n\t/** Callback fired whenever the value changes. Required. */\n\tonChange: (value: number) => void;\n\t/** Disables all drag, click, touch, and keyboard interactions. @default false */\n\tdisabled?: boolean;\n\t/** Callback fired when the dragging state changes (`true` = drag started, `false` = drag ended). */\n\tonDragging?: (isDragging: boolean) => void;\n\t/**\n\t * Amount ArrowLeft/ArrowRight/ArrowUp/ArrowDown move the value by.\n\t * PageUp/PageDown move by 10× this amount. Home/End jump to 0/100.\n\t * @default 1\n\t */\n\tstep?: number;\n};\n\n/**\n * Slider, interactive track for selecting a numeric value between 0 and 100.\n *\n * Pair with `useSlider` for managed state.\n *\n * @param props.value - Current position as a percentage (0–100). Required.\n * @param props.onChange - Callback fired on value change. Required.\n * @param props.disabled - Disables interactions. Default: false\n * @param props.onDragging - Callback fired when dragging starts or stops.\n * @param props.step - Keyboard ArrowLeft/Right/Up/Down increment. Default: 1\n *\n * Exposes `role=\"slider\"` with `aria-valuemin`/`aria-valuemax`/`aria-valuenow`,\n * and supports keyboard interaction (ArrowLeft/ArrowDown to decrease,\n * ArrowRight/ArrowUp to increase, PageDown/PageUp for a larger step,\n * Home/End to jump to 0/100) and touch dragging in addition to mouse.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Slider JSX element.\n *\n * @example\n * ```tsx\n * // Controlled slider\n * const [value, setValue] = useState(50);\n * <Slider value={value} onChange={setValue} />\n *\n * // With useSlider hook\n * const [value, setValue] = useSlider(25);\n * <Slider value={value} onChange={setValue} onDragging={setIsDragging} />\n *\n * // Disabled\n * <Slider value={75} onChange={() => {}} disabled />\n * ```\n */\n\nfunction clampPercentage(value: number): number {\n\treturn Math.min(Math.max(value, 0), 100);\n}\n\nfunction Slider(props: SliderProps) {\n\tconst {\n\t\tonChange,\n\t\tvalue,\n\t\tdisabled = false,\n\t\tonDragging,\n\t\tclassName = \"\",\n\t\tstep = 1,\n\t\t...rest\n\t} = props;\n\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst sliderRef = useRef<HTMLDivElement>(null);\n\n\tconst getValueFromClientX = useCallback((clientX: number) => {\n\t\tif (!sliderRef.current) return null;\n\n\t\tconst rect = sliderRef.current.getBoundingClientRect();\n\t\tif (rect.width === 0) return null;\n\n\t\tconst offsetX = clientX - rect.left;\n\t\treturn clampPercentage((offsetX / rect.width) * 100);\n\t}, []);\n\n\tconst handleMouseDown = () => setIsDragging(true);\n\tconst handleMouseUp = useCallback(() => setIsDragging(false), []);\n\n\tconst handleMouseMove = useCallback(\n\t\t(event: MouseEvent) => {\n\t\t\tif (disabled || !isDragging) return;\n\n\t\t\tconst newValue = getValueFromClientX(event.clientX);\n\t\t\tif (newValue !== null) onChange(newValue);\n\t\t},\n\t\t[disabled, isDragging, onChange, getValueFromClientX],\n\t);\n\n\tconst handleTouchMove = useCallback(\n\t\t(event: TouchEvent) => {\n\t\t\tif (disabled || !isDragging) return;\n\n\t\t\tconst touch = event.touches[0];\n\t\t\tif (!touch) return;\n\n\t\t\tconst newValue = getValueFromClientX(touch.clientX);\n\t\t\tif (newValue !== null) onChange(newValue);\n\t\t},\n\t\t[disabled, isDragging, onChange, getValueFromClientX],\n\t);\n\n\tconst handleSliderClick = (event: React.MouseEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\n\t\tconst newValue = getValueFromClientX(event.clientX);\n\t\tif (newValue !== null) onChange(newValue);\n\t};\n\n\tconst handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\t\tsetIsDragging(true);\n\n\t\tconst touch = event.touches[0];\n\t\tif (!touch) return;\n\n\t\tconst newValue = getValueFromClientX(touch.clientX);\n\t\tif (newValue !== null) onChange(newValue);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tif (disabled) return;\n\n\t\tconst bigStep = step * 10;\n\t\tconst keyToNewValue: Record<string, number> = {\n\t\t\tArrowLeft: value - step,\n\t\t\tArrowDown: value - step,\n\t\t\tArrowRight: value + step,\n\t\t\tArrowUp: value + step,\n\t\t\tPageDown: value - bigStep,\n\t\t\tPageUp: value + bigStep,\n\t\t\tHome: 0,\n\t\t\tEnd: 100,\n\t\t};\n\n\t\tconst newValue = keyToNewValue[event.key];\n\t\tif (newValue === undefined) return;\n\n\t\tevent.preventDefault();\n\t\tonChange(clampPercentage(newValue));\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDragging) {\n\t\t\tonDragging?.(true);\n\t\t\tdocument.addEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.addEventListener(\"mouseup\", handleMouseUp);\n\t\t\tdocument.addEventListener(\"touchmove\", handleTouchMove);\n\t\t\tdocument.addEventListener(\"touchend\", handleMouseUp);\n\t\t} else {\n\t\t\tonDragging?.(false);\n\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t\tdocument.removeEventListener(\"touchmove\", handleTouchMove);\n\t\t\tdocument.removeEventListener(\"touchend\", handleMouseUp);\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"mousemove\", handleMouseMove);\n\t\t\tdocument.removeEventListener(\"mouseup\", handleMouseUp);\n\t\t\tdocument.removeEventListener(\"touchmove\", handleTouchMove);\n\t\t\tdocument.removeEventListener(\"touchend\", handleMouseUp);\n\t\t};\n\t}, [isDragging, onDragging, handleMouseUp, handleMouseMove, handleTouchMove]);\n\n\tconst isDraggingClass = isDragging ? \"isDragging\" : \"isNotDragging\";\n\tconst disabledClass = disabled ? \"isDisabled\" : \"isEnabled\";\n\tconst sliderClassname = `arkynSliderTrack ${isDraggingClass} ${disabledClass} ${className}`;\n\n\treturn (\n\t\t<div\n\t\t\trole=\"slider\"\n\t\t\taria-valuemin={0}\n\t\t\taria-valuemax={100}\n\t\t\taria-valuenow={value}\n\t\t\taria-orientation=\"horizontal\"\n\t\t\taria-disabled={disabled || undefined}\n\t\t\ttabIndex={disabled ? -1 : 0}\n\t\t\t{...rest}\n\t\t\tclassName={sliderClassname}\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonTouchStart={handleTouchStart}\n\t\t\tonClick={handleSliderClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tref={sliderRef}\n\t\t>\n\t\t\t<div className=\"arkynSliderFill\" style={{ width: `${value}%` }} />\n\t\t\t<div className=\"arkynSliderThumb\" style={{ left: `${value}%` }} />\n\t\t</div>\n\t);\n}\n\nexport { Slider };\n"],"mappings":";;;;AA8DA,SAAS,EAAgB,GAAuB;CAC/C,OAAO,KAAK,IAAI,KAAK,IAAI,GAAO,CAAC,GAAG,GAAG;AACxC;AAEA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,aACA,UACA,cAAW,IACX,eACA,eAAY,IACZ,UAAO,GACP,GAAG,MACA,GAEE,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,IAAY,EAAuB,IAAI,GAEvC,IAAsB,GAAa,MAAoB;EAC5D,IAAI,CAAC,EAAU,SAAS,OAAO;EAE/B,IAAM,IAAO,EAAU,QAAQ,sBAAsB;EAIrD,OAHI,EAAK,UAAU,IAAU,OAGtB,GADS,IAAU,EAAK,QACG,EAAK,QAAS,GAAG;CACpD,GAAG,CAAC,CAAC,GAEC,UAAwB,EAAc,EAAI,GAC1C,IAAgB,QAAkB,EAAc,EAAK,GAAG,CAAC,CAAC,GAE1D,IAAkB,GACtB,MAAsB;EACtB,IAAI,KAAY,CAAC,GAAY;EAE7B,IAAM,IAAW,EAAoB,EAAM,OAAO;EAClD,AAAI,MAAa,QAAM,EAAS,CAAQ;CACzC,GACA;EAAC;EAAU;EAAY;EAAU;CAAmB,CACrD,GAEM,IAAkB,GACtB,MAAsB;EACtB,IAAI,KAAY,CAAC,GAAY;EAE7B,IAAM,IAAQ,EAAM,QAAQ;EAC5B,IAAI,CAAC,GAAO;EAEZ,IAAM,IAAW,EAAoB,EAAM,OAAO;EAClD,AAAI,MAAa,QAAM,EAAS,CAAQ;CACzC,GACA;EAAC;EAAU;EAAY;EAAU;CAAmB,CACrD,GAEM,KAAqB,MAA4C;EACtE,IAAI,GAAU;EAEd,IAAM,IAAW,EAAoB,EAAM,OAAO;EAClD,AAAI,MAAa,QAAM,EAAS,CAAQ;CACzC,GAEM,KAAoB,MAA4C;EACrE,IAAI,GAAU;EACd,EAAc,EAAI;EAElB,IAAM,IAAQ,EAAM,QAAQ;EAC5B,IAAI,CAAC,GAAO;EAEZ,IAAM,IAAW,EAAoB,EAAM,OAAO;EAClD,AAAI,MAAa,QAAM,EAAS,CAAQ;CACzC,GAEM,KAAiB,MAA+C;EACrE,IAAI,GAAU;EAEd,IAAM,IAAU,IAAO,IAYjB,IAAW;GAVhB,WAAW,IAAQ;GACnB,WAAW,IAAQ;GACnB,YAAY,IAAQ;GACpB,SAAS,IAAQ;GACjB,UAAU,IAAQ;GAClB,QAAQ,IAAQ;GAChB,MAAM;GACN,KAAK;EAGW,EAAc,EAAM;EACjC,MAAa,KAAA,MAEjB,EAAM,eAAe,GACrB,EAAS,EAAgB,CAAQ,CAAC;CACnC;CAEA,SACK,KACH,IAAa,EAAI,GACjB,SAAS,iBAAiB,aAAa,CAAe,GACtD,SAAS,iBAAiB,WAAW,CAAa,GAClD,SAAS,iBAAiB,aAAa,CAAe,GACtD,SAAS,iBAAiB,YAAY,CAAa,MAEnD,IAAa,EAAK,GAClB,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,WAAW,CAAa,GACrD,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,YAAY,CAAa,UAG1C;EAIZ,AAHA,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,WAAW,CAAa,GACrD,SAAS,oBAAoB,aAAa,CAAe,GACzD,SAAS,oBAAoB,YAAY,CAAa;CACvD,IACE;EAAC;EAAY;EAAY;EAAe;EAAiB;CAAe,CAAC;CAI5E,IAAM,IAAkB,oBAFA,IAAa,eAAe,gBAEQ,GADtC,IAAW,eAAe,YAC6B,GAAG;CAEhF,OACC,kBAAC,OAAD;EACC,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,oBAAiB;EACjB,iBAAe,KAAY,KAAA;EAC3B,UAAU,IAAW,KAAK;EAC1B,GAAI;EACJ,WAAW;EACX,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;YAdN,CAgBC,kBAAC,OAAD;GAAK,WAAU;GAAkB,OAAO,EAAE,OAAO,GAAG,EAAM,GAAG;EAAI,CAAA,GACjE,kBAAC,OAAD;GAAK,WAAU;GAAmB,OAAO,EAAE,MAAM,GAAG,EAAM,GAAG;EAAI,CAAA,CAC7D;;AAEP"}

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

@@ -18,6 +18,8 @@ function a(a) {
 		orientation: g,
 		children: /* @__PURE__ */ i("button", {
 			type: "button",
+			role: "switch",
+			"aria-checked": D,
 			onClick: O,
 			className: `arkynSwitch ${D ? "checkedTrue" : "checkedFalse"} ${s} ${p}`,
 			...x,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/switch/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport \"./styles.css\";\n\ntype SwitchProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"onChange\" | \"defaultValue\" | \"onCheck\" | \"value\"\n> & {\n\t/** Optional label text displayed beside the switch. */\n\tlabel?: string;\n\t/**\n\t * Switch size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Value emitted when the switch is on. @default \"checked\" */\n\tvalue?: string;\n\t/** Value emitted when the switch is off. @default \"\" */\n\tunCheckedValue?: string;\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Callback fired on toggle, receives the current value string. */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"vertical\" | \"horizontal\" | \"horizontalReverse\";\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Validation error message displayed below the switch. */\n\terrorMessage?: string;\n};\n\n/**\n * Switch, toggle input for binary on/off states.\n *\n * Stores value in a hidden `<input>` for native form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed beside the switch.\n * @param props.size - Switch size (`sm` | `md` | `lg`). Default: \"lg\"\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.checked - Controlled checked state.\n * @param props.value - Value emitted when on. Default: \"checked\"\n * @param props.unCheckedValue - Value emitted when off. Default: \"\"\n * @param props.onCheck - Callback fired on toggle, receives the current value string.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n *\n * **...Other valid HTML properties for `<button>` (except `children`, `onChange`, `defaultValue`)**\n *\n * @returns Switch JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\n *\n * // Custom on/off values\n * <Switch\n *   name=\"theme\"\n *   label=\"Dark mode\"\n *   value=\"dark\"\n *   unCheckedValue=\"light\"\n *   onCheck={(v) => setTheme(v)}\n * />\n *\n * // Controlled\n * <Switch\n *   name=\"autoSave\"\n *   label=\"Auto-save\"\n *   checked={isAutoSaveEnabled}\n *   onCheck={(v) => setAutoSave(!!v)}\n *   size=\"md\"\n * />\n * ```\n */\n\nfunction Switch(props: SwitchProps) {\n\tconst {\n\t\tlabel,\n\t\tsize = \"lg\",\n\t\tdefaultChecked = false,\n\t\tchecked: baseChecked = null,\n\t\tvalue,\n\t\tunCheckedValue = \"\",\n\t\tname,\n\t\tclassName: baseClassName = \"\",\n\t\tonCheck,\n\t\tid,\n\t\torientation = \"horizontalReverse\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tshowAsterisk,\n\t\terrorMessage,\n\t\tunShowFieldTemplate = false,\n\t\t...rest\n\t} = props;\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tfunction handleCheck() {\n\t\tsetIsChecked(!isChecked);\n\t\tonCheck?.(!currentChecked ? value || \"checked\" : unCheckedValue);\n\t}\n\n\tconst checkedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;\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<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={handleCheck}\n\t\t\t\tclassName={className}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tid={inputId}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonClick={handleCheck}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : unCheckedValue}\n\t\t\t\t/>\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Switch };\n"],"mappings":";;;;;AA0FA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,UACA,UAAO,MACP,oBAAiB,IACjB,SAAS,IAAc,MACvB,UACA,oBAAiB,IACjB,SACA,WAAW,IAAgB,IAC3B,YACA,OACA,iBAAc,qBACd,WAAW,IAAmB,IAC9B,iBACA,iBACA,yBAAsB,IACtB,GAAG,MACA,GAEE,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,CAAC,GAAW,KAAgB,EAAS,CAAc,GAEnD,IACL,OAAO,KAAgB,YAAY,IAAc;CAElD,SAAS,IAAc;EAEtB,AADA,EAAa,CAAC,CAAS,GACvB,IAAW,IAAsC,IAArB,KAAS,SAA0B;CAChE;CAKA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,MAAK;GACL,SAAS;GACE,WAAA,eAhBO,IAAiB,gBAAgB,eACR,GAAG,EAAK,GAAG;GAgBtD,GAAI;aAEJ,kBAAC,SAAD;IACC,IAAI;IACJ,MAAK;IACC;IACN,KAAK;IACL,SAAS;IACT,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA;EACM,CAAA;CACM,CAAA;AAEjB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/switch/index.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\nimport { useId, useRef, useState } from \"react\";\n\nimport { FieldTemplate } from \"../../services/fieldTemplate\";\nimport \"./styles.css\";\n\ntype SwitchProps = Omit<\n\tButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\" | \"onChange\" | \"defaultValue\" | \"onCheck\" | \"value\"\n> & {\n\t/** Optional label text displayed beside the switch. */\n\tlabel?: string;\n\t/**\n\t * Switch size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"sm\" | \"md\" | \"lg\";\n\t/** Uncontrolled initial checked state. @default false */\n\tdefaultChecked?: boolean;\n\t/** Controlled checked state. */\n\tchecked?: boolean;\n\t/** Value emitted when the switch is on. @default \"checked\" */\n\tvalue?: string;\n\t/** Value emitted when the switch is off. @default \"\" */\n\tunCheckedValue?: string;\n\t/** Field name for form submission. Required. */\n\tname: string;\n\t/** Callback fired on toggle, receives the current value string. */\n\tonCheck?: (value: string) => void;\n\t/**\n\t * Layout direction forwarded to `FieldTemplate`.\n\t * @default \"horizontalReverse\"\n\t */\n\torientation?: \"vertical\" | \"horizontal\" | \"horizontalReverse\";\n\t/** When true, skips `FieldTemplate` wrapper (label and error text). @default false */\n\tunShowFieldTemplate?: boolean;\n\t/** Displays an asterisk on the label to signal a required field. */\n\tshowAsterisk?: boolean;\n\t/** Validation error message displayed below the switch. */\n\terrorMessage?: string;\n};\n\n/**\n * Switch, toggle input for binary on/off states.\n *\n * Stores value in a hidden `<input>` for native form submission.\n * Integrates with `useForm` to display validation errors by field name.\n *\n * @param props.name - Field name for form submission. Required.\n * @param props.label - Label text displayed beside the switch.\n * @param props.size - Switch size (`sm` | `md` | `lg`). Default: \"lg\"\n * @param props.defaultChecked - Uncontrolled initial checked state. Default: false\n * @param props.checked - Controlled checked state.\n * @param props.value - Value emitted when on. Default: \"checked\"\n * @param props.unCheckedValue - Value emitted when off. Default: \"\"\n * @param props.onCheck - Callback fired on toggle, receives the current value string.\n * @param props.orientation - Layout direction (`horizontal` | `vertical` | `horizontalReverse`). Default: \"horizontalReverse\"\n * @param props.unShowFieldTemplate - Skips wrapper, label, and error rendering. Default: false\n * @param props.showAsterisk - Appends `*` to the label.\n * @param props.errorMessage - Validation error message.\n *\n * **...Other valid HTML properties for `<button>` (except `children`, `onChange`, `defaultValue`)**\n *\n * @returns Switch JSX element wrapped in `FieldTemplate`.\n *\n * @example\n * ```tsx\n * // Basic\n * <Switch name=\"notifications\" label=\"Enable notifications\" />\n *\n * // Custom on/off values\n * <Switch\n *   name=\"theme\"\n *   label=\"Dark mode\"\n *   value=\"dark\"\n *   unCheckedValue=\"light\"\n *   onCheck={(v) => setTheme(v)}\n * />\n *\n * // Controlled\n * <Switch\n *   name=\"autoSave\"\n *   label=\"Auto-save\"\n *   checked={isAutoSaveEnabled}\n *   onCheck={(v) => setAutoSave(!!v)}\n *   size=\"md\"\n * />\n * ```\n */\n\nfunction Switch(props: SwitchProps) {\n\tconst {\n\t\tlabel,\n\t\tsize = \"lg\",\n\t\tdefaultChecked = false,\n\t\tchecked: baseChecked = null,\n\t\tvalue,\n\t\tunCheckedValue = \"\",\n\t\tname,\n\t\tclassName: baseClassName = \"\",\n\t\tonCheck,\n\t\tid,\n\t\torientation = \"horizontalReverse\",\n\t\tclassName: wrapperClassName = \"\",\n\t\tshowAsterisk,\n\t\terrorMessage,\n\t\tunShowFieldTemplate = false,\n\t\t...rest\n\t} = props;\n\n\tconst inputRef = useRef<HTMLInputElement>(null);\n\tconst generatedId = useId();\n\tconst inputId = id || generatedId;\n\n\tconst [isChecked, setIsChecked] = useState(defaultChecked);\n\n\tconst currentChecked =\n\t\ttypeof baseChecked === \"boolean\" ? baseChecked : isChecked;\n\n\tfunction handleCheck() {\n\t\tsetIsChecked(!isChecked);\n\t\tonCheck?.(!currentChecked ? value || \"checked\" : unCheckedValue);\n\t}\n\n\tconst checkedClass = currentChecked ? \"checkedTrue\" : \"checkedFalse\";\n\tconst className = `arkynSwitch ${checkedClass} ${size} ${baseClassName}`;\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<button\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked={currentChecked}\n\t\t\t\tonClick={handleCheck}\n\t\t\t\tclassName={className}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<input\n\t\t\t\t\tid={inputId}\n\t\t\t\t\ttype=\"hidden\"\n\t\t\t\t\tname={name}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tonClick={handleCheck}\n\t\t\t\t\tvalue={currentChecked ? value || \"checked\" : unCheckedValue}\n\t\t\t\t/>\n\t\t\t</button>\n\t\t</FieldTemplate>\n\t);\n}\n\nexport { Switch };\n"],"mappings":";;;;;AA0FA,SAAS,EAAO,GAAoB;CACnC,IAAM,EACL,UACA,UAAO,MACP,oBAAiB,IACjB,SAAS,IAAc,MACvB,UACA,oBAAiB,IACjB,SACA,WAAW,IAAgB,IAC3B,YACA,OACA,iBAAc,qBACd,WAAW,IAAmB,IAC9B,iBACA,iBACA,yBAAsB,IACtB,GAAG,MACA,GAEE,IAAW,EAAyB,IAAI,GACxC,IAAc,EAAM,GACpB,IAAU,KAAM,GAEhB,CAAC,GAAW,KAAgB,EAAS,CAAc,GAEnD,IACL,OAAO,KAAgB,YAAY,IAAc;CAElD,SAAS,IAAc;EAEtB,AADA,EAAa,CAAC,CAAS,GACvB,IAAW,IAAsC,IAArB,KAAS,SAA0B;CAChE;CAKA,OACC,kBAAC,GAAD;EACO;EACC;EACO;EACd,WAAW;EACG;EACO;EACR;YAEb,kBAAC,UAAD;GACC,MAAK;GACL,MAAK;GACL,gBAAc;GACd,SAAS;GACE,WAAA,eAlBO,IAAiB,gBAAgB,eACR,GAAG,EAAK,GAAG;GAkBtD,GAAI;aAEJ,kBAAC,SAAD;IACC,IAAI;IACJ,MAAK;IACC;IACN,KAAK;IACL,SAAS;IACT,OAAO,IAAiB,KAAS,YAAY;GAC7C,CAAA;EACM,CAAA;CACM,CAAA;AAEjB"}

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

@@ -1,18 +1,19 @@
+import { sanitizeTooltipHtml as e } from "../../utils/sanitizeTooltipHtml.js";
 /* empty css       */
-import { useEffect as e, useId as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as t, useId as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/tooltip/index.tsx
-function o(o) {
-	let { text: s, size: c = "lg", children: l, orientation: u = "top", className: d = "", ...f } = o, p = t(), m = n(null), [h, g] = r(u);
-	return e(() => {
+function s(s) {
+	let { text: c, size: l = "lg", children: u, orientation: d = "top", className: f = "", ...p } = s, m = n(), h = r(null), [g, _] = i(d);
+	return t(() => {
 		let e = () => {
-			if (!m.current) return;
-			let e = document.getElementById(p);
-			e && (g(u), requestAnimationFrame(() => {
-				let t = e.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, i = u;
-				u === "left" && t.left < 0 ? i = "right" : u === "right" && t.right > n ? i = "left" : u === "top" && t.top < 0 ? i = "bottom" : u === "bottom" && t.bottom > r && (i = "top"), i === "right" && t.right > n ? i = "left" : i === "left" && t.left < 0 ? i = "right" : i === "bottom" && t.bottom > r ? i = "top" : i === "top" && t.top < 0 && (i = "bottom"), g(i);
+			if (!h.current) return;
+			let e = document.getElementById(m);
+			e && (_(d), requestAnimationFrame(() => {
+				let t = e.getBoundingClientRect(), n = window.innerWidth, r = window.innerHeight, i = d;
+				d === "left" && t.left < 0 ? i = "right" : d === "right" && t.right > n ? i = "left" : d === "top" && t.top < 0 ? i = "bottom" : d === "bottom" && t.bottom > r && (i = "top"), i === "right" && t.right > n ? i = "left" : i === "left" && t.left < 0 ? i = "right" : i === "bottom" && t.bottom > r ? i = "top" : i === "top" && t.top < 0 && (i = "bottom"), _(i);
 			}));
-		}, t = m.current;
+		}, t = h.current;
 		if (!t) return;
 		let n = () => {
 			setTimeout(e, 1);
@@ -20,18 +21,18 @@ function o(o) {
 		return t.addEventListener("mouseenter", n), window.addEventListener("resize", e), () => {
 			t.removeEventListener("mouseenter", n), window.removeEventListener("resize", e);
 		};
-	}, [u, p]), /* @__PURE__ */ a("div", {
-		className: `arkynTooltip ${c} ${h} ${d}`.trim(),
-		...f,
-		ref: m,
-		children: [l, /* @__PURE__ */ i("div", {
+	}, [d, m]), /* @__PURE__ */ o("div", {
+		className: `arkynTooltip ${l} ${g} ${f}`.trim(),
+		...p,
+		ref: h,
+		children: [u, /* @__PURE__ */ a("div", {
 			className: "arkynTooltipText",
-			id: p,
-			dangerouslySetInnerHTML: { __html: s }
+			id: m,
+			dangerouslySetInnerHTML: { __html: e(c) }
 		})]
 	});
 }
 //#endregion
-export { o as Tooltip };
+export { s as Tooltip };
 
 //# sourceMappingURL=index.js.map