@arkyn/components 3.0.1-beta.99 → 3.0.2

package/dist/modules/components/alert/alertContainer/index.js

@@ -0,0 +1,29 @@
+import { AlertTitle as e } from "../alertTitle/index.js";
+/* empty css       */
+import { createContext as t, useContext as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/alert/alertContainer/index.tsx
+var a = t({});
+function o() {
+	return n(a);
+}
+function s(t) {
+	let { scheme: n, children: o, className: s, ...c } = t, l = `arkynAlertContainer ${n} ${((t) => {
+		let n = !1, r = (t) => {
+			Array.isArray(t) ? t.forEach(r) : t && typeof t == "object" && "type" in t && (t.type === e ? n = !0 : t.props && typeof t.props == "object" && t.props !== null && "children" in t.props && r(t.props.children));
+		};
+		return r(t), n;
+	})(o) ? "existsAlertTitle" : "nonExistsAlertTitle"} ${s}`, u = r(() => ({ scheme: n }), [n]);
+	return /* @__PURE__ */ i(a.Provider, {
+		value: u,
+		children: /* @__PURE__ */ i("div", {
+			className: l.trim(),
+			...c,
+			children: o
+		})
+	});
+}
+//#endregion
+export { s as AlertContainer, o as useAlertContainer };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/alert/alertContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertContainer/index.tsx"],"sourcesContent":["import {\n\tcreateContext,\n\ttype HTMLAttributes,\n\ttype JSX,\n\ttype ReactNode,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport { AlertTitle } from \"../alertTitle\";\nimport \"./styles.css\";\n\ntype AlertContainerProps = {\n\t/**\n\t * Visual style and semantic meaning.\n\t * - `success`: green — operation completed.\n\t * - `danger`: red — error or destructive action.\n\t * - `warning`: yellow — caution required.\n\t * - `info`: blue — informational message.\n\t */\n\tscheme: \"success\" | \"danger\" | \"warning\" | \"info\";\n} & HTMLAttributes<HTMLDivElement>;\n\nconst AlertContainerContext = createContext({} as AlertContainerProps);\n\n/** @internal Accesses the schema and HTML props of the enclosing `AlertContainer`. */\nfunction useAlertContainer(): AlertContainerProps {\n\treturn useContext(AlertContainerContext);\n}\n\n/**\n * AlertContainer — root wrapper for the Alert component set. Provides schema context to child components.\n *\n * Automatically detects whether an `AlertTitle` is present among children and adjusts layout:\n * centered when no title, left-aligned when a title is present.\n *\n * @param props.scheme - Visual style variant. Required.\n * @param props.children - Alert sub-components: `AlertIcon`, `AlertContent`, `AlertTitle`, `AlertDescription`.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns AlertContainer JSX element.\n *\n * @example\n * ```tsx\n * // Inline alert — no title, centered layout\n * <AlertContainer scheme=\"success\">\n *   <AlertIcon />\n *   <AlertContent>Your subscription has been activated.</AlertContent>\n * </AlertContainer>\n *\n * // Full alert with title and description — left-aligned layout\n * <AlertContainer scheme=\"danger\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Payment failed</AlertTitle>\n *     <AlertDescription>Please check your card details and try again.</AlertDescription>\n *   </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertContainer(props: AlertContainerProps): JSX.Element {\n\tconst { scheme, children, className: baseClassName, ...rest } = props;\n\n\tconst hasAlertTitle = (children: ReactNode): boolean => {\n\t\tlet found = false;\n\t\tconst searchForAlertTitle = (nodes: ReactNode) => {\n\t\t\tif (Array.isArray(nodes)) {\n\t\t\t\tnodes.forEach(searchForAlertTitle);\n\t\t\t} else if (nodes && typeof nodes === \"object\" && \"type\" in nodes) {\n\t\t\t\tif (nodes.type === AlertTitle) {\n\t\t\t\t\tfound = true;\n\t\t\t\t} else if (\n\t\t\t\t\tnodes.props &&\n\t\t\t\t\ttypeof nodes.props === \"object\" &&\n\t\t\t\t\tnodes.props !== null &&\n\t\t\t\t\t\"children\" in nodes.props\n\t\t\t\t) {\n\t\t\t\t\t// biome-ignore lint/suspicious/noExplicitAny: intentional\n\t\t\t\t\tsearchForAlertTitle((nodes.props as any).children);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tsearchForAlertTitle(children);\n\t\treturn found;\n\t};\n\n\tconst shouldAlignCenter = !hasAlertTitle(children);\n\tconst finalClassName = shouldAlignCenter\n\t\t? \"nonExistsAlertTitle\"\n\t\t: \"existsAlertTitle\";\n\n\tconst className = `arkynAlertContainer ${scheme} ${finalClassName} ${baseClassName}`;\n\n\tconst value = useMemo(() => ({ scheme }), [scheme]);\n\n\treturn (\n\t\t<AlertContainerContext.Provider value={value}>\n\t\t\t<div className={className.trim()} {...rest}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</AlertContainerContext.Provider>\n\t);\n}\n\nexport { AlertContainer, useAlertContainer };\n"],"mappings":";;;;;AAsBA,IAAM,IAAwB,EAAc,CAAC,CAAwB;AAGrE,SAAS,IAAyC;CACjD,OAAO,EAAW,CAAqB;AACxC;AAkCA,SAAS,EAAe,GAAyC;CAChE,IAAM,EAAE,WAAQ,aAAU,WAAW,GAAe,GAAG,MAAS,GA8B1D,IAAY,uBAAuB,EAAO,KA5BzB,MAAiC;EACvD,IAAI,IAAQ,IACN,KAAuB,MAAqB;GACjD,AAAI,MAAM,QAAQ,CAAK,IACtB,EAAM,QAAQ,CAAmB,IACvB,KAAS,OAAO,KAAU,YAAY,UAAU,MACtD,EAAM,SAAS,IAClB,IAAQ,KAER,EAAM,SACN,OAAO,EAAM,SAAU,YACvB,EAAM,UAAU,QAChB,cAAc,EAAM,SAGpB,EAAqB,EAAM,MAAc,QAAQ;EAGpD;EAEA,OADA,EAAoB,CAAQ,GACrB;CACR,EAE2B,CAAc,CAAQ,IAG9C,qBADA,sBAG+D,GAAG,KAE/D,IAAQ,SAAe,EAAE,UAAO,IAAI,CAAC,CAAM,CAAC;CAElD,OACC,kBAAC,EAAsB,UAAvB;EAAuC;YACtC,kBAAC,OAAD;GAAK,WAAW,EAAU,KAAK;GAAG,GAAI;GACpC;EACG,CAAA;CAC0B,CAAA;AAElC"}

package/dist/modules/components/alert/alertContainer/styles.css

@@ -0,0 +1,3 @@
+@layer arkyn{.arkynAlertContainer{border:1px solid #0000;border-radius:6px;align-items:start;gap:16px;padding:16px;display:flex}.arkynAlertContainer.nonExistsAlertTitle{align-items:center}.arkynAlertContainer.danger{background:rgb(var(--spotlight-danger-foreground,254, 236, 239));border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynAlertContainer.success{background:rgb(var(--spotlight-success-foreground,231, 248, 242));border-color:rgb(var(--spotlight-success,16, 185, 129))}.arkynAlertContainer.info{background:rgb(var(--spotlight-info-foreground,231, 246, 253));border-color:rgb(var(--spotlight-info,14, 165, 233))}.arkynAlertContainer.warning{background:rgb(var(--spotlight-warning-foreground,254, 241, 232));border-color:rgb(var(--spotlight-warning,249, 115, 22))}}
+
+@layer arkyn{.arkynAlertTitle{text-align:left;color:var(--text-heading,#09090b);font-size:16px;font-weight:600;line-height:130%}}

package/dist/modules/components/alert/alertContent/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/alert/alertContent/index.tsx
+function t(t) {
+	let { className: n, ...r } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynAlertContent ${n}`.trim(),
+		...r
+	});
+}
+//#endregion
+export { t as AlertContent };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/alert/alertContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertContent/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertContentProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertContent — text/content area inside an `AlertContainer`. Wraps `AlertTitle` and `AlertDescription`.\n *\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertContent JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"warning\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Session expiring</AlertTitle>\n *     <AlertDescription>You will be logged out in 5 minutes.</AlertDescription>\n *   </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertContent(props: AlertContentProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertContent ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertContent };\n"],"mappings":";;;AAwBA,SAAS,EAAa,GAAuC;CAC5D,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,qBAFgB,IAEN,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}

package/dist/modules/components/alert/alertContent/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynAlertContent{flex-direction:column;gap:8px;display:flex}}

package/dist/modules/components/alert/alertDescription/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/alert/alertDescription/index.tsx
+function t(t) {
+	let { className: n, ...r } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynAlertDescription ${n}`.trim(),
+		...r
+	});
+}
+//#endregion
+export { t as AlertDescription };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/alert/alertDescription/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertDescription/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertDescription — body text for an alert. Place inside `AlertContent`.\n *\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertDescription JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"info\">\n *   <AlertContent>\n *     <AlertTitle>Maintenance scheduled</AlertTitle>\n *     <AlertDescription>The service will be unavailable on Sunday from 2–4 AM UTC.</AlertDescription>\n *   </AlertContent>\n * </AlertContainer>\n * ```\n */\n\nfunction AlertDescription(props: AlertDescriptionProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertDescription ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertDescription };\n"],"mappings":";;;AAuBA,SAAS,EAAiB,GAA2C;CACpE,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,yBAFoB,IAEV,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}

package/dist/modules/components/alert/alertDescription/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynAlertDescription{text-align:left;color:var(--text-body,#52525b);font-size:14px;font-weight:400;line-height:130%}}

package/dist/modules/components/alert/alertIcon/index.js

@@ -0,0 +1,30 @@
+import { useAlertContainer as e } from "../alertContainer/index.js";
+/* empty css       */
+import { jsx as t } from "react/jsx-runtime";
+import { AlertTriangle as n, CheckCircle2 as r, Info as i, XCircle as a } from "lucide-react";
+//#region src/components/alert/alertIcon/index.tsx
+function o(o) {
+	let { className: s, ...c } = o, { scheme: l } = e(), u = `arkynAlertIcon ${l} ${s}`;
+	switch (l) {
+		case "success": return /* @__PURE__ */ t(r, {
+			className: u,
+			...c
+		});
+		case "danger": return /* @__PURE__ */ t(a, {
+			className: u,
+			...c
+		});
+		case "warning": return /* @__PURE__ */ t(n, {
+			className: u,
+			...c
+		});
+		case "info": return /* @__PURE__ */ t(i, {
+			className: u,
+			...c
+		});
+	}
+}
+//#endregion
+export { o as AlertIcon };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/alert/alertIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertIcon/index.tsx"],"sourcesContent":["import {\n\tAlertTriangle,\n\tCheckCircle2,\n\tInfo,\n\ttype LucideProps,\n\tXCircle,\n} from \"lucide-react\";\n\nimport type { JSX } from \"react\";\nimport { useAlertContainer } from \"../alertContainer\";\nimport \"./styles.css\";\n\ntype AlertIconProps = LucideProps;\n\n/**\n * AlertIcon — renders a scheme-appropriate icon from `AlertContainer` context.\n *\n * - `success` → `CheckCircle2`\n * - `danger` → `XCircle`\n * - `warning` → `AlertTriangle`\n * - `info` → `Info`\n *\n * Must be placed inside an `AlertContainer`. Accepts all Lucide icon props.\n *\n * @returns The scheme-matched Lucide icon element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"danger\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Payment failed</AlertTitle>\n *     <AlertDescription>Please check your card details.</AlertDescription>\n *   </AlertContent>\n * </AlertContainer>\n * ```\n */\nfunction AlertIcon(props: AlertIconProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst { scheme } = useAlertContainer();\n\n\tconst className = `arkynAlertIcon ${scheme} ${baseClassName}`;\n\n\tswitch (scheme) {\n\t\tcase \"success\":\n\t\t\treturn <CheckCircle2 className={className} {...rest} />;\n\t\tcase \"danger\":\n\t\t\treturn <XCircle className={className} {...rest} />;\n\t\tcase \"warning\":\n\t\t\treturn <AlertTriangle className={className} {...rest} />;\n\t\tcase \"info\":\n\t\t\treturn <Info className={className} {...rest} />;\n\t}\n}\n\nexport { AlertIcon };\n"],"mappings":";;;;;AAqCA,SAAS,EAAU,GAAoC;CACtD,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS,GACxC,EAAE,cAAW,EAAkB,GAE/B,IAAY,kBAAkB,EAAO,GAAG;CAE9C,QAAQ,GAAR;EACC,KAAK,WACJ,OAAO,kBAAC,GAAD;GAAyB;GAAW,GAAI;EAAO,CAAA;EACvD,KAAK,UACJ,OAAO,kBAAC,GAAD;GAAoB;GAAW,GAAI;EAAO,CAAA;EAClD,KAAK,WACJ,OAAO,kBAAC,GAAD;GAA0B;GAAW,GAAI;EAAO,CAAA;EACxD,KAAK,QACJ,OAAO,kBAAC,GAAD;GAAiB;GAAW,GAAI;EAAO,CAAA;CAChD;AACD"}

package/dist/modules/components/alert/alertIcon/styles.css

@@ -0,0 +1,7 @@
+@layer arkyn{.arkynAlertIcon{min-width:28px;max-width:28px;min-height:28px;max-height:28px}.arkynAlertIcon.danger{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynAlertIcon.success{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynAlertIcon.info{color:rgb(var(--spotlight-info,14, 165, 233))}.arkynAlertIcon.warning{color:rgb(var(--spotlight-warning,249, 115, 22))}}
+
+@layer arkyn{.arkynAlertContainer{border:1px solid #0000;border-radius:6px;align-items:start;gap:16px;padding:16px;display:flex}.arkynAlertContainer.nonExistsAlertTitle{align-items:center}.arkynAlertContainer.danger{background:rgb(var(--spotlight-danger-foreground,254, 236, 239));border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynAlertContainer.success{background:rgb(var(--spotlight-success-foreground,231, 248, 242));border-color:rgb(var(--spotlight-success,16, 185, 129))}.arkynAlertContainer.info{background:rgb(var(--spotlight-info-foreground,231, 246, 253));border-color:rgb(var(--spotlight-info,14, 165, 233))}.arkynAlertContainer.warning{background:rgb(var(--spotlight-warning-foreground,254, 241, 232));border-color:rgb(var(--spotlight-warning,249, 115, 22))}}
+
+@layer arkyn{.arkynAlertTitle{text-align:left;color:var(--text-heading,#09090b);font-size:16px;font-weight:600;line-height:130%}}
+
+@layer arkyn{.arkynAlertTitle{text-align:left;color:var(--text-heading,#09090b);font-size:16px;font-weight:600;line-height:130%}}

package/dist/modules/components/alert/alertTitle/index.js

@@ -0,0 +1,14 @@
+/* empty css       */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/alert/alertTitle/index.tsx
+function t(t) {
+	let { className: n, ...r } = t;
+	return /* @__PURE__ */ e("div", {
+		className: `arkynAlertTitle ${n}`.trim(),
+		...r
+	});
+}
+//#endregion
+export { t as AlertTitle };
+
+//# sourceMappingURL=index.js.map

package/dist/modules/components/alert/alertTitle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/alert/alertTitle/index.tsx"],"sourcesContent":["import type { HTMLAttributes, JSX } from \"react\";\nimport \"./styles.css\";\n\ntype AlertTitleProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * AlertTitle — bold heading for an alert. Place inside `AlertContent`.\n *\n * Its presence is detected by `AlertContainer` to switch the layout from centered to left-aligned.\n * Accepts all standard `<div>` HTML attributes.\n *\n * @returns AlertTitle JSX element.\n *\n * @example\n * ```tsx\n * <AlertContainer scheme=\"danger\">\n *   <AlertIcon />\n *   <AlertContent>\n *     <AlertTitle>Access denied</AlertTitle>\n *     <AlertDescription>You don't have permission to view this page.</AlertDescription>\n *   </AlertContent>\n * </AlertContainer>\n * ```\n */\nfunction AlertTitle(props: AlertTitleProps): JSX.Element {\n\tconst { className: baseClassName, ...rest } = props;\n\tconst className = `arkynAlertTitle ${baseClassName}`;\n\n\treturn <div className={className.trim()} {...rest} />;\n}\n\nexport { AlertTitle };\n"],"mappings":";;;AAwBA,SAAS,EAAW,GAAqC;CACxD,IAAM,EAAE,WAAW,GAAe,GAAG,MAAS;CAG9C,OAAO,kBAAC,OAAD;EAAK,WAAW,mBAFc,IAEJ,KAAK;EAAG,GAAI;CAAO,CAAA;AACrD"}

package/dist/modules/components/alert/alertTitle/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynAlertTitle{text-align:left;color:var(--text-heading,#09090b);font-size:16px;font-weight:600;line-height:130%}}

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

@@ -0,0 +1,77 @@
+import { useSlider as e } from "../../hooks/useSlider.js";
+import { Slider as t } from "../slider/index.js";
+/* empty css       */
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Pause as s, Play as c } from "lucide-react";
+//#region src/components/audioPlayer/index.tsx
+function l(l) {
+	let { onPlayAudio: u, onPauseAudio: d, disabled: f, style: p, ...m } = l, [h, g] = e(0), [_, v] = i(!1), [y, b] = i(!1), x = r(null), S = x.current?.currentTime || 0, C = x.current?.duration || 0, w = D(S), T = D(C), E = {
+		totalTime: C,
+		currentTime: S,
+		formattedCurrentTime: w,
+		formattedTotalTime: T
+	};
+	function D(e) {
+		if (!e) return "00:00";
+		let t = Math.floor(e / 60), n = Math.floor(e % 60);
+		return `${String(t).padStart(2, "0")}:${String(n).padStart(2, "0")}`;
+	}
+	function O() {
+		let e = x.current;
+		e && (l.onPlayAudio && l.onPlayAudio(E), e.play(), v(!0));
+	}
+	function k() {
+		let e = x.current;
+		e && (l.onPauseAudio && l.onPauseAudio(E), e.pause(), v(!1));
+	}
+	function A() {
+		_ ? k() : O();
+	}
+	function j(e) {
+		let t = x.current;
+		if (!t) return;
+		let n = t.duration;
+		t.currentTime = e / 100 * n;
+	}
+	return y || !_ ? x.current?.pause() : _ && x.current?.play(), n(() => {
+		let e = x.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.duration;
+			g(e.currentTime / t * 100);
+		};
+		return e.addEventListener("timeupdate", t), () => {
+			e.removeEventListener("timeupdate", t);
+		};
+	}, [g]), /* @__PURE__ */ o("div", {
+		className: "arkynAudioPlayer",
+		style: p,
+		children: [
+			/* @__PURE__ */ a("audio", {
+				...m,
+				ref: x,
+				src: l.src || void 0,
+				onEnded: k
+			}),
+			/* @__PURE__ */ o("button", {
+				type: "button",
+				disabled: f,
+				onClick: A,
+				children: [_ && /* @__PURE__ */ a(s, {}), !_ && /* @__PURE__ */ a(c, {})]
+			}),
+			/* @__PURE__ */ a("p", { children: w }),
+			/* @__PURE__ */ a(t, {
+				value: h,
+				onChange: j,
+				onDragging: b,
+				disabled: f
+			}),
+			/* @__PURE__ */ a("p", { children: T })
+		]
+	});
+}
+//#endregion
+export { l as AudioPlayer };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/audioPlayer/index.tsx"],"sourcesContent":["import { Pause, Play } from \"lucide-react\";\nimport {\n\ttype AudioHTMLAttributes,\n\ttype JSX,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { useSlider } from \"../../hooks/useSlider\";\nimport { Slider } from \"../slider\";\nimport \"./styles.css\";\n\n/** Audio state snapshot passed to play/pause callbacks. */\ntype AudioInformationProps = {\n\t/** Current playback position in seconds. */\n\tcurrentTime: number;\n\t/** Total audio duration in seconds. */\n\ttotalTime: number;\n\t/** Current position formatted as `MM:SS`. */\n\tformattedCurrentTime: string;\n\t/** Total duration formatted as `MM:SS`. */\n\tformattedTotalTime: string;\n};\n\ntype AudioPlayerProps = Omit<\n\tAudioHTMLAttributes<HTMLAudioElement>,\n\t\"onEnded\" | \"src\"\n> & {\n\t/** Audio file URL. Required. */\n\tsrc: string;\n\t/** Disables the play/pause button and the progress slider. @default false */\n\tdisabled?: boolean;\n\t/** Callback fired when playback starts. Receives the current audio state. */\n\tonPlayAudio?: (props: AudioInformationProps) => void;\n\t/** Callback fired when playback is paused. Receives the current audio state. */\n\tonPauseAudio?: (props: AudioInformationProps) => void;\n};\n\n/**\n * AudioPlayer — play/pause controls, a scrubable progress bar, and elapsed/total time display.\n *\n * @param props.src - Audio file URL. Required.\n * @param props.disabled - Disables controls. Default: false\n * @param props.onPlayAudio - Callback fired when playback starts.\n * @param props.onPauseAudio - Callback fired when playback is paused.\n *\n * **...Other valid HTML properties for `<audio>` (except `onEnded` and `src`)**\n *\n * @returns AudioPlayer JSX element.\n *\n * @example\n * ```tsx\n * // Basic\n * <AudioPlayer src=\"/audio/episode.mp3\" />\n *\n * // With play/pause callbacks\n * <AudioPlayer\n *   src=\"/audio/episode.mp3\"\n *   onPlayAudio={(info) => console.log(\"Playing at\", info.formattedCurrentTime)}\n *   onPauseAudio={(info) => console.log(\"Paused at\", info.formattedCurrentTime)}\n * />\n * ```\n */\nfunction AudioPlayer(props: AudioPlayerProps): JSX.Element {\n\tconst { onPlayAudio, onPauseAudio, disabled, style, ...rest } = props;\n\n\tconst [sliderValue, setSliderValue] = useSlider(0);\n\tconst [isPlaying, setIsPlaying] = useState(false);\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst audioReference = useRef<HTMLAudioElement>(null);\n\n\tconst currentTime = audioReference.current?.currentTime || 0;\n\tconst totalTime = audioReference.current?.duration || 0;\n\n\tconst formattedCurrentTime = formatTime(currentTime);\n\tconst formattedTotalTime = formatTime(totalTime);\n\n\tconst audioInformation: AudioInformationProps = {\n\t\ttotalTime,\n\t\tcurrentTime,\n\t\tformattedCurrentTime,\n\t\tformattedTotalTime,\n\t};\n\n\tfunction formatTime(time?: number): string {\n\t\tif (!time) return \"00:00\";\n\n\t\tconst minutes = Math.floor(time / 60);\n\t\tconst seconds = Math.floor(time % 60);\n\n\t\tconst formattedMinutes = String(minutes).padStart(2, \"0\");\n\t\tconst formattedSeconds = String(seconds).padStart(2, \"0\");\n\n\t\treturn `${formattedMinutes}:${formattedSeconds}`;\n\t}\n\n\tfunction handlePlayAudio(): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\t\tif (props.onPlayAudio) props.onPlayAudio(audioInformation);\n\t\taudioElement.play();\n\t\tsetIsPlaying(true);\n\t}\n\n\tfunction handlePauseAudio(): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\t\tif (props.onPauseAudio) props.onPauseAudio(audioInformation);\n\t\taudioElement.pause();\n\t\tsetIsPlaying(false);\n\t}\n\n\tfunction handleToggleAudio(): void {\n\t\tif (isPlaying) handlePauseAudio();\n\t\telse handlePlayAudio();\n\t}\n\n\tfunction handleSliderChange(value: number): void {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\n\t\tconst totalTime = audioElement.duration;\n\t\tconst currentTime = (value / 100) * totalTime;\n\n\t\taudioElement.currentTime = currentTime;\n\t}\n\n\tif (isDragging || !isPlaying) {\n\t\taudioReference.current?.pause();\n\t} else if (isPlaying) {\n\t\taudioReference.current?.play();\n\t}\n\n\tuseEffect(() => {\n\t\tconst audioElement = audioReference.current;\n\t\tif (!audioElement) return;\n\n\t\tconst handleTimeUpdate = () => {\n\t\t\tconst totalTime = audioElement.duration;\n\t\t\tconst currentTime = audioElement.currentTime;\n\n\t\t\tconst value = (currentTime / totalTime) * 100;\n\t\t\tsetSliderValue(value);\n\t\t};\n\n\t\taudioElement.addEventListener(\"timeupdate\", handleTimeUpdate);\n\n\t\treturn () => {\n\t\t\taudioElement.removeEventListener(\"timeupdate\", handleTimeUpdate);\n\t\t};\n\t}, [setSliderValue]);\n\n\treturn (\n\t\t<div className=\"arkynAudioPlayer\" style={style}>\n\t\t\t<audio\n\t\t\t\t{...rest}\n\t\t\t\tref={audioReference}\n\t\t\t\tsrc={props.src || undefined}\n\t\t\t\tonEnded={handlePauseAudio}\n\t\t\t/>\n\n\t\t\t<button type=\"button\" disabled={disabled} onClick={handleToggleAudio}>\n\t\t\t\t{isPlaying && <Pause />}\n\t\t\t\t{!isPlaying && <Play />}\n\t\t\t</button>\n\n\t\t\t<p>{formattedCurrentTime}</p>\n\n\t\t\t<Slider\n\t\t\t\tvalue={sliderValue}\n\t\t\t\tonChange={handleSliderChange}\n\t\t\t\tonDragging={setIsDragging}\n\t\t\t\tdisabled={disabled}\n\t\t\t/>\n\n\t\t\t<p>{formattedTotalTime}</p>\n\t\t</div>\n\t);\n}\n\nexport { AudioPlayer };\n"],"mappings":";;;;;;;AAgEA,SAAS,EAAY,GAAsC;CAC1D,IAAM,EAAE,gBAAa,iBAAc,aAAU,UAAO,GAAG,MAAS,GAE1D,CAAC,GAAa,KAAkB,EAAU,CAAC,GAC3C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAY,KAAiB,EAAS,EAAK,GAE5C,IAAiB,EAAyB,IAAI,GAE9C,IAAc,EAAe,SAAS,eAAe,GACrD,IAAY,EAAe,SAAS,YAAY,GAEhD,IAAuB,EAAW,CAAW,GAC7C,IAAqB,EAAW,CAAS,GAEzC,IAA0C;EAC/C;EACA;EACA;EACA;CACD;CAEA,SAAS,EAAW,GAAuB;EAC1C,IAAI,CAAC,GAAM,OAAO;EAElB,IAAM,IAAU,KAAK,MAAM,IAAO,EAAE,GAC9B,IAAU,KAAK,MAAM,IAAO,EAAE;EAKpC,OAAO,GAHkB,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAG3C,EAAiB,GAFF,OAAO,CAAO,CAAC,CAAC,SAAS,GAAG,GAEvB;CAC/B;CAEA,SAAS,IAAwB;EAChC,IAAM,IAAe,EAAe;EAC/B,MACD,EAAM,eAAa,EAAM,YAAY,CAAgB,GACzD,EAAa,KAAK,GAClB,EAAa,EAAI;CAClB;CAEA,SAAS,IAAyB;EACjC,IAAM,IAAe,EAAe;EAC/B,MACD,EAAM,gBAAc,EAAM,aAAa,CAAgB,GAC3D,EAAa,MAAM,GACnB,EAAa,EAAK;CACnB;CAEA,SAAS,IAA0B;EAClC,AAAI,IAAW,EAAiB,IAC3B,EAAgB;CACtB;CAEA,SAAS,EAAmB,GAAqB;EAChD,IAAM,IAAe,EAAe;EACpC,IAAI,CAAC,GAAc;EAEnB,IAAM,IAAY,EAAa;EAG/B,EAAa,cAFQ,IAAQ,MAAO;CAGrC;CA2BA,OAzBI,KAAc,CAAC,IAClB,EAAe,SAAS,MAAM,IACpB,KACV,EAAe,SAAS,KAAK,GAG9B,QAAgB;EACf,IAAM,IAAe,EAAe;EACpC,IAAI,CAAC,GAAc;EAEnB,IAAM,UAAyB;GAC9B,IAAM,IAAY,EAAa;GAI/B,EAHoB,EAAa,cAEJ,IAAa,GACtB;EACrB;EAIA,OAFA,EAAa,iBAAiB,cAAc,CAAgB,SAE/C;GACZ,EAAa,oBAAoB,cAAc,CAAgB;EAChE;CACD,GAAG,CAAC,CAAc,CAAC,GAGlB,kBAAC,OAAD;EAAK,WAAU;EAA0B;YAAzC;GACC,kBAAC,SAAD;IACC,GAAI;IACJ,KAAK;IACL,KAAK,EAAM,OAAO,KAAA;IAClB,SAAS;GACT,CAAA;GAED,kBAAC,UAAD;IAAQ,MAAK;IAAmB;IAAU,SAAS;cAAnD,CACE,KAAa,kBAAC,GAAD,CAAQ,CAAA,GACrB,CAAC,KAAa,kBAAC,GAAD,CAAO,CAAA,CACf;;GAER,kBAAC,KAAD,EAAA,UAAI,EAAwB,CAAA;GAE5B,kBAAC,GAAD;IACC,OAAO;IACP,UAAU;IACV,YAAY;IACF;GACV,CAAA;GAED,kBAAC,KAAD,EAAA,UAAI,EAAsB,CAAA;EACtB;;AAEP"}

package/dist/modules/components/audioPlayer/styles.css

@@ -0,0 +1,3 @@
+@layer arkyn{.arkynAudioPlayer{align-items:center;gap:8px;min-width:280px;display:flex}.arkynAudioPlayer button{background-color:rgb(var(--spotlight-primary,17, 109, 220));border:none;border-radius:50%;justify-content:center;align-items:center;min-width:40px;max-width:40px;min-height:40px;max-height:40px;display:flex}.arkynAudioPlayer button:hover:not(:disabled){cursor:pointer;filter:brightness(.95);transition:all .3s}.arkynAudioPlayer button:disabled{cursor:not-allowed;opacity:.2}.arkynAudioPlayer button svg{fill:var(--white,#fff);stroke:var(--white,#fff);min-width:20px;max-width:20px;min-height:20px;max-height:20px}.arkynAudioPlayer p{text-align:left;color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:400;line-height:12px}}
+
+@layer arkyn{.arkynSliderTrack{border:1px solid var(--border,#e2e8f0);background:var(--input-background,#fafafa);cursor:pointer;border-radius:5px;width:100%;max-width:400px;height:6px;position:relative}.arkynSliderTrack.isDragging{cursor:grabbing}.arkynSliderTrack.isDisabled{cursor:not-allowed;opacity:.5}.arkynSliderFill{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:5px;height:100%}.arkynSliderThumb{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%)}.arkynSliderTrack.isEnabled .arkynSliderThumb{cursor:grab}.arkynSliderValue{margin-top:10px;font-size:18px}}

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

@@ -0,0 +1,57 @@
+import { AudioPlayer as e } from "../../audioPlayer/index.js";
+import { Button as t } from "../../button/index.js";
+import { Divider as n } from "../../divider/index.js";
+import { IconButton as r } from "../../iconButton/index.js";
+import { Tooltip as i } from "../../tooltip/index.js";
+/* empty css       */
+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() {
+		if (u) return;
+		let e = document.createElement("input");
+		e.type = "file", e.accept = d, e.onchange = (e) => {
+			let t = e.target.files?.[0];
+			t && f(t);
+		}, e.click();
+	}
+	return /* @__PURE__ */ o("div", {
+		className: "arkynAudioUploadHasFileContentContainer",
+		children: [
+			/* @__PURE__ */ a(e, { src: l }),
+			/* @__PURE__ */ a(n, {}),
+			/* @__PURE__ */ o("div", {
+				className: "arkynAudioUploadButtonsContainer",
+				children: [!!m && /* @__PURE__ */ a(i, {
+					orientation: "bottom",
+					text: "Reenviar áudio",
+					children: /* @__PURE__ */ a(r, {
+						type: "button",
+						"aria-label": "resend image",
+						variant: "outline",
+						scheme: "danger",
+						size: "sm",
+						isLoading: p,
+						onClick: m,
+						icon: s,
+						disabled: u
+					})
+				}), /* @__PURE__ */ a(t, {
+					isLoading: p,
+					onClick: g,
+					variant: "outline",
+					size: "sm",
+					type: "button",
+					disabled: u,
+					children: h
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { c as HasFileContent };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/dist/modules/components/audioUpload/hasFileContent/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynAudioUploadHasFileContentContainer{flex-direction:column;gap:16px;padding:16px;display:flex}.arkynAudioUploadAudioPlayer{align-items:center;gap:8px;display:flex}.arkynAudioUploadAudioPlayer button{background-color:rgb(var(--spotlight-primary,17, 109, 220));border:none;border-radius:50%;justify-content:center;align-items:center;min-width:40px;max-width:40px;min-height:40px;max-height:40px;display:flex}.arkynAudioUploadAudioPlayer p{text-align:left;color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:400;line-height:12px}.arkynAudioUploadButtonsContainer{justify-content:end;align-items:center;gap:8px;display:flex}}

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

@@ -0,0 +1,74 @@
+import { useForm as e } from "../../hooks/useForm.js";
+import { FieldError as t } from "../fieldError/index.js";
+import { FieldLabel as n } from "../fieldLabel/index.js";
+import { FieldWrapper as r } from "../fieldWrapper/index.js";
+import { HasFileContent as i } from "./hasFileContent/index.js";
+import { NoFileContent as a } from "./noFileContent/index.js";
+/* empty css       */
+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 t = new FormData();
+		t.append(f, e), await fetch(b, {
+			method: p,
+			body: t
+		}).then(async (e) => await e.json()).then((e) => {
+			e?.error ? k(e.error) : D(e?.[h]), m?.(e?.[h]);
+		}).catch((e) => {
+			console.error(e), k("Erro ao enviar audio");
+		}).finally(() => F(!1));
+	}
+	function L(e) {
+		if (!C) {
+			if (e.type.indexOf("audio") === -1) {
+				k("O arquivo selecionado não é um arquivo de áudio");
+				return;
+			}
+			N(URL.createObjectURL(e)), I(e);
+		}
+	}
+	let R = T || O;
+	return /* @__PURE__ */ c(r, { children: [
+		d && /* @__PURE__ */ s(n, {
+			showAsterisk: S,
+			children: d
+		}),
+		/* @__PURE__ */ c("div", {
+			className: `arkynAudioUpload ${R ? "hasError" : "noHasError"} ${M ? "hasAudio" : "noHasAudio"}`,
+			children: [
+				/* @__PURE__ */ s("input", {
+					type: "hidden",
+					name: u,
+					value: E || ""
+				}),
+				!M && /* @__PURE__ */ s(a, {
+					disabled: C,
+					isLoading: P,
+					acceptAudio: y,
+					dropAudioText: _,
+					handleSelectFile: L,
+					selectAudioButtonText: g
+				}),
+				M && /* @__PURE__ */ s(i, {
+					filePath: M,
+					acceptAudio: y,
+					changeAudioButtonText: v,
+					disabled: C,
+					handleSelectFile: L,
+					isLoading: P,
+					reSendAudio: R && A ? () => I(A) : void 0
+				})
+			]
+		}),
+		R && /* @__PURE__ */ s(t, { children: R })
+	] });
+}
+//#endregion
+export { l as AudioUpload };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/audioUpload/noFileContent/index.tsx"],"sourcesContent":["import type { DragEvent } from \"react\";\n\nimport { Button } from \"../../button\";\nimport \"./styles.css\";\n\ntype NoFileContentProps = {\n\tdisabled: boolean;\n\tacceptAudio: string;\n\tisLoading: boolean;\n\tselectAudioButtonText: string;\n\tdropAudioText: string;\n\thandleSelectFile: (file: File) => void;\n};\n\nfunction NoFileContent(props: NoFileContentProps) {\n\tconst {\n\t\tdropAudioText,\n\t\tisLoading,\n\t\tacceptAudio,\n\t\thandleSelectFile,\n\t\tselectAudioButtonText,\n\t\tdisabled,\n\t} = props;\n\n\tfunction handleDrop(event: DragEvent<HTMLDivElement>) {\n\t\tif (disabled) return;\n\n\t\tevent.preventDefault();\n\t\tconst file = event.dataTransfer.files[0];\n\t\tif (file) handleSelectFile(file);\n\t}\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 onDrop={handleDrop} className=\"arkynAudioUploadNoFileContent\">\n\t\t\t<Button\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tonClick={handleClick}\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tsize=\"sm\"\n\t\t\t\ttype=\"button\"\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t{selectAudioButtonText}\n\t\t\t</Button>\n\n\t\t\t<p>{dropAudioText}</p>\n\t\t</div>\n\t);\n}\n\nexport { NoFileContent };\n"],"mappings":";;;;AAcA,SAAS,EAAc,GAA2B;CACjD,IAAM,EACL,kBACA,cACA,gBACA,qBACA,0BACA,gBACG;CAEJ,SAAS,EAAW,GAAkC;EACrD,IAAI,GAAU;EAEd,EAAM,eAAe;EACrB,IAAM,IAAO,EAAM,aAAa,MAAM;EACtC,AAAI,KAAM,EAAiB,CAAI;CAChC;CAEA,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,QAAQ;EAAY,WAAU;YAAnC,CACC,kBAAC,GAAD;GACY;GACX,SAAS;GACT,SAAQ;GACR,MAAK;GACL,MAAK;GACK;aAET;EACM,CAAA,GAER,kBAAC,KAAD,EAAA,UAAI,EAAiB,CAAA,CACjB;;AAEP"}

package/dist/modules/components/audioUpload/noFileContent/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynAudioUploadNoFileContent{flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;display:flex}.arkynAudioUploadNoFileContent>p{text-align:center;white-space:nowrap;color:var(--text-body,#52525b);padding:0 24px;font-size:12px;font-weight:400;line-height:12px}}

package/dist/modules/components/audioUpload/styles.css

@@ -0,0 +1,25 @@
+@layer arkyn{.arkynAudioUpload{border-width:1px;border-color:var(--border,#e2e8f0);background:var(--input-background,#fafafa);border-radius:8px;outline:1px solid #0000;width:100%;max-width:475px;height:137px}.arkynAudioUpload.hasAudio{border-style:solid}.arkynAudioUpload.noHasAudio{border-style:dashed}.arkynAudioUpload.hasError{border-color:rgb(var(--spotlight-danger,244, 63, 94));outline-color:rgb(var(--spotlight-danger,244, 63, 94))}}
+
+@layer arkyn{.arkynFieldError{color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:12px}}
+
+@layer arkyn{.arkynFieldLabel{color:var(--text-body,#52525b);font-size:14px;font-weight:600;line-height:19.07px}.arkynFieldLabel.asteriskTrue:before{content:"* ";text-align:left;color:rgb(var(--spotlight-danger,244, 63, 94));font-size:12px;font-weight:600;line-height:16.34px}}
+
+@layer arkyn{.arkynFieldWrapper{gap:6px;height:max-content;display:flex}.arkynFieldWrapper.horizontal{flex-direction:row;align-items:center}.arkynFieldWrapper.horizontalReverse{flex-direction:row-reverse;align-items:center;margin-right:auto}.arkynFieldWrapper.vertical{flex-direction:column;align-items:flex-start}}
+
+@layer arkyn{.arkynAudioUploadHasFileContentContainer{flex-direction:column;gap:16px;padding:16px;display:flex}.arkynAudioUploadAudioPlayer{align-items:center;gap:8px;display:flex}.arkynAudioUploadAudioPlayer button{background-color:rgb(var(--spotlight-primary,17, 109, 220));border:none;border-radius:50%;justify-content:center;align-items:center;min-width:40px;max-width:40px;min-height:40px;max-height:40px;display:flex}.arkynAudioUploadAudioPlayer p{text-align:left;color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:400;line-height:12px}.arkynAudioUploadButtonsContainer{justify-content:end;align-items:center;gap:8px;display:flex}}
+
+@layer arkyn{.arkynAudioPlayer{align-items:center;gap:8px;min-width:280px;display:flex}.arkynAudioPlayer button{background-color:rgb(var(--spotlight-primary,17, 109, 220));border:none;border-radius:50%;justify-content:center;align-items:center;min-width:40px;max-width:40px;min-height:40px;max-height:40px;display:flex}.arkynAudioPlayer button:hover:not(:disabled){cursor:pointer;filter:brightness(.95);transition:all .3s}.arkynAudioPlayer button:disabled{cursor:not-allowed;opacity:.2}.arkynAudioPlayer button svg{fill:var(--white,#fff);stroke:var(--white,#fff);min-width:20px;max-width:20px;min-height:20px;max-height:20px}.arkynAudioPlayer p{text-align:left;color:var(--text-body,#52525b);-webkit-user-select:none;user-select:none;font-size:12px;font-weight:400;line-height:12px}}
+
+@layer arkyn{.arkynSliderTrack{border:1px solid var(--border,#e2e8f0);background:var(--input-background,#fafafa);cursor:pointer;border-radius:5px;width:100%;max-width:400px;height:6px;position:relative}.arkynSliderTrack.isDragging{cursor:grabbing}.arkynSliderTrack.isDisabled{cursor:not-allowed;opacity:.5}.arkynSliderFill{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:5px;height:100%}.arkynSliderThumb{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%)}.arkynSliderTrack.isEnabled .arkynSliderThumb{cursor:grab}.arkynSliderValue{margin-top:10px;font-size:18px}}
+
+@layer arkyn{.arkynSliderTrack{border:1px solid var(--border,#e2e8f0);background:var(--input-background,#fafafa);cursor:pointer;border-radius:5px;width:100%;max-width:400px;height:6px;position:relative}.arkynSliderTrack.isDragging{cursor:grabbing}.arkynSliderTrack.isDisabled{cursor:not-allowed;opacity:.5}.arkynSliderFill{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:5px;height:100%}.arkynSliderThumb{background:rgb(var(--spotlight-primary,17, 109, 220));border-radius:50%;width:12px;height:12px;position:absolute;top:50%;transform:translate(-50%,-50%)}.arkynSliderTrack.isEnabled .arkynSliderThumb{cursor:grab}.arkynSliderValue{margin-top:10px;font-size:18px}}
+
+@layer arkyn{.arkynButton{background:0 0;border:1px solid #0000;outline:1px solid #0000;position:relative}.arkynButton:hover{cursor:pointer;filter:brightness(.95);transition:all .3s}html.dark .arkynButton:hover{cursor:pointer;filter:brightness(1.2)}.arkynButton:disabled{cursor:not-allowed;opacity:.5}.arkynButton .arkynButtonContent{white-space:nowrap;justify-content:center;align-items:center;display:flex}.arkynButton .arkynButtonSpinner{white-space:nowrap;opacity:0;justify-content:center;align-items:center;display:flex}.arkynButton.solid{color:var(--white,#fff)}.arkynButton.solid.primary{background-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynButton.solid.secondary{background-color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynButton.solid.danger{background-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynButton.solid.success{background-color:rgb(var(--spotlight-success,16, 185, 129))}.arkynButton.solid.warning{background-color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynButton.solid.info{background-color:rgb(var(--spotlight-info,14, 165, 233))}.arkynButton.outline{background-color:var(--background-underground,#fafafa);border-color:var(--border,#e2e8f0)}.arkynButton.outline.primary{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynButton.outline.secondary{color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynButton.outline.danger{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynButton.outline.success{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynButton.outline.warning{color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynButton.outline.info{color:rgb(var(--spotlight-info,14, 165, 233))}.arkynButton.ghost.primary{color:rgb(var(--spotlight-primary,17, 109, 220));background-color:rgb(var(--spotlight-primary-foreground,231, 240, 252))}.arkynButton.ghost.secondary{color:rgb(var(--spotlight-secondary,100, 116, 139));background-color:rgb(var(--spotlight-secondary-foreground,250, 250, 250))}.arkynButton.ghost.danger{color:rgb(var(--spotlight-danger,244, 63, 94));background-color:rgb(var(--spotlight-danger-foreground,254, 236, 239))}.arkynButton.ghost.success{color:rgb(var(--spotlight-success,16, 185, 129));background-color:rgb(var(--spotlight-success-foreground,231, 248, 242))}.arkynButton.ghost.warning{color:rgb(var(--spotlight-warning,249, 115, 22));background-color:rgb(var(--spotlight-warning-foreground,254, 241, 232))}.arkynButton.ghost.info{color:rgb(var(--spotlight-info,14, 165, 233));background-color:rgb(var(--spotlight-info-foreground,231, 246, 253))}.arkynButton.invisible.primary{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynButton.invisible.secondary{color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynButton.invisible.danger{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynButton.invisible.success{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynButton.invisible.warning{color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynButton.invisible.info{color:rgb(var(--spotlight-info,14, 165, 233))}.arkynButton.lg{border-radius:8px;height:44px;padding:0 20px;font-size:14px;font-weight:600;line-height:14px}.arkynButton.lg .arkynButtonContent,.arkynButton.lg .arkynButtonSpinner{gap:16px}.arkynButton.md{border-radius:8px;gap:16px;height:40px;padding:0 16px;font-size:14px;font-weight:600;line-height:14px}.arkynButton.md .arkynButtonContent,.arkynButton.md .arkynButtonSpinner{gap:14px}.arkynButton.sm{border-radius:6px;height:32px;padding:0 16px;font-size:12px;font-weight:600;line-height:12px}.arkynButton.sm .arkynButtonContent,.arkynButton.sm .arkynButtonSpinner{gap:12px}.arkynButton.xs{border-radius:4px;height:24px;padding:0 16px;font-size:10px;font-weight:600;line-height:10px}.arkynButton.xs .arkynButtonContent,.arkynButton.xs .arkynButtonSpinner{gap:8px}.arkynButton .arkynButtonSpinner>svg{animation:2s linear infinite spin}.arkynButton.loadingTextFalse .arkynButtonSpinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynButton.loadingTextTrue .arkynButtonSpinner{max-height:0}.arkynButton.loadingTrue .arkynButtonContent{opacity:0;max-height:0}.arkynButton.loadingTrue .arkynButtonSpinner{opacity:1;max-height:unset}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynDivider{background-color:var(--border,#e2e8f0);flex:1;display:block}.arkynDivider.horizontal{width:100%;min-height:1px;max-height:1px}.arkynDivider.vertical{min-width:1px;max-width:1px;height:100%}}
+
+@layer arkyn{.arkynIconButton{background:0 0;border:1px solid #0000;outline:1px solid #0000;position:relative}.arkynIconButton:hover{cursor:pointer;filter:brightness(.9);transition:all .15s ease-out}html.dark .arkynIconButton:hover{cursor:pointer;filter:brightness(1.2)}.arkynIconButton:disabled{cursor:not-allowed;opacity:.5}.arkynIconButtonContent{justify-content:center;align-items:center;display:flex}.arkynIconButton.solid{color:var(--white,#fff)}.arkynIconButton.solid.primary{background-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynIconButton.solid.secondary{background-color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynIconButton.solid.danger{background-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynIconButton.solid.success{background-color:rgb(var(--spotlight-success,16, 185, 129))}.arkynIconButton.solid.warning{background-color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynIconButton.solid.info{background-color:rgb(var(--spotlight-info,14, 165, 233))}.arkynIconButton.outline{background-color:var(--background-underground,#fafafa);border-color:var(--border,#e2e8f0)}.arkynIconButton.outline.primary{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynIconButton.outline.secondary{color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynIconButton.outline.danger{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynIconButton.outline.success{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynIconButton.outline.warning{color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynIconButton.outline.info{color:rgb(var(--spotlight-info,14, 165, 233))}.arkynIconButton.ghost:hover{filter:brightness(.8)}.arkynIconButton.ghost.primary{color:rgb(var(--spotlight-primary,17, 109, 220));background-color:rgb(var(--spotlight-primary-foreground,231, 240, 252))}.arkynIconButton.ghost.secondary{color:rgb(var(--spotlight-secondary,100, 116, 139));background-color:rgb(var(--spotlight-secondary-foreground,250, 250, 250))}.arkynIconButton.ghost.danger{color:rgb(var(--spotlight-danger,244, 63, 94));background-color:rgb(var(--spotlight-danger-foreground,254, 236, 239))}.arkynIconButton.ghost.success{color:rgb(var(--spotlight-success,16, 185, 129));background-color:rgb(var(--spotlight-success-foreground,231, 248, 242))}.arkynIconButton.ghost.warning{color:rgb(var(--spotlight-warning,249, 115, 22));background-color:rgb(var(--spotlight-warning-foreground,254, 241, 232))}.arkynIconButton.ghost.info{color:rgb(var(--spotlight-info,14, 165, 233));background-color:rgb(var(--spotlight-info-foreground,231, 246, 253))}.arkynIconButton.invisible.primary{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynIconButton.invisible.secondary{color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynIconButton.invisible.danger{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynIconButton.invisible.success{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynIconButton.invisible.warning{color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynIconButton.invisible.info{color:rgb(var(--spotlight-info,14, 165, 233))}.arkynIconButton.lg{border-radius:6px;width:44px;height:44px}.arkynIconButton.md{border-radius:6px;width:40px;height:40px}.arkynIconButton.sm{border-radius:6px;width:32px;height:32px}.arkynIconButton.xs{border-radius:4px;width:24px;height:24px}.arkynIconButtonSpinner{opacity:0;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.arkynIconButtonSpinner>svg{animation:2s linear infinite spin}.arkynIconButton.loadingTrue .arkynIconButtonSpinner{opacity:1}.arkynIconButton.loadingTrue .arkynIconButtonContent{opacity:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}}
+
+@layer arkyn{.arkynTooltip{display:block;position:relative}.arkynTooltipText{visibility:hidden;opacity:0;white-space:nowrap;color:var(--tooltip-text,#fafafa);background-color:var(--tooltip-background,#27272a);z-index:9999;border-radius:4px;justify-content:center;align-items:center;font-weight:400;transition:all .15s ease-out;display:flex;position:absolute;transform:translate(-50%,-50%)}.arkynTooltip.lg .arkynTooltipText{padding:8px 12px;font-size:14px;line-height:130%}.arkynTooltip.md .arkynTooltipText{padding:8px 12px;font-size:12px;line-height:130%}.arkynTooltip:hover .arkynTooltipText{opacity:1;visibility:visible}.arkynTooltip.top .arkynTooltipText{bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}.arkynTooltip.top .arkynTooltipText:before{content:"";border-style:solid;border-color:var(--tooltip-background,#27272a) transparent;border-width:6px 6px 0;position:absolute;top:100%;bottom:20px;left:50%;transform:translate(-50%)}.arkynTooltip.left .arkynTooltipText{top:50%;right:calc(100% + 10px);transform:translateY(-50%)}.arkynTooltip.left .arkynTooltipText:before{content:"";border-style:solid;border-color:transparent var(--tooltip-background,#27272a);border-width:6px 0 6px 6px;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.arkynTooltip.right .arkynTooltipText{top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.arkynTooltip.right .arkynTooltipText:before{content:"";border-style:solid;border-color:transparent var(--tooltip-background,#27272a);border-width:6px 6px 6px 0;position:absolute;top:50%;left:0;transform:translate(-100%,-50%)}.arkynTooltip.bottom .arkynTooltipText{top:calc(100% + 10px);left:50%;transform:translate(-50%)}.arkynTooltip.bottom .arkynTooltipText:before{content:"";border-style:solid;border-color:var(--tooltip-background,#27272a) transparent;border-width:0 6px 6px;position:absolute;top:0;left:50%;transform:translate(-50%,-100%)}}
+
+@layer arkyn{.arkynAudioUploadNoFileContent{flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:100%;display:flex}.arkynAudioUploadNoFileContent>p{text-align:center;white-space:nowrap;color:var(--text-body,#52525b);padding:0 24px;font-size:12px;font-weight:400;line-height:12px}}

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

@@ -0,0 +1,29 @@
+import { IconRenderer as e } from "../../services/iconRenderer.js";
+/* empty css       */
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/badge/index.tsx
+function r(r) {
+	let { variant: i = "ghost", scheme: a = "primary", size: o = "lg", leftIcon: s, rightIcon: c, className: l = "", children: u, ...d } = r, f = {
+		md: 12,
+		lg: 14
+	}[o];
+	return /* @__PURE__ */ n("div", {
+		className: `arkynBadge ${i} ${a} ${o} ${l}`.trim(),
+		...d,
+		children: [
+			/* @__PURE__ */ t(e, {
+				iconSize: f,
+				icon: s
+			}),
+			/* @__PURE__ */ t("p", { children: u }),
+			/* @__PURE__ */ t(e, {
+				iconSize: f,
+				icon: c
+			})
+		]
+	});
+}
+//#endregion
+export { r as Badge };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/badge/index.tsx"],"sourcesContent":["import type { LucideIcon } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\n\nimport { IconRenderer } from \"../../services/iconRenderer\";\nimport \"./styles.css\";\n\ntype BadgeProps = HTMLAttributes<HTMLDivElement> & {\n\t/**\n\t * Badge size.\n\t * @default \"lg\"\n\t */\n\tsize?: \"md\" | \"lg\";\n\t/**\n\t * Visual style variant.\n\t * - `solid`: filled background.\n\t * - `outline`: bordered, transparent background.\n\t * - `ghost`: no border, subtle background on hover.\n\t * @default \"ghost\"\n\t */\n\tvariant?: \"solid\" | \"outline\" | \"ghost\";\n\t/**\n\t * Color scheme applied to the badge.\n\t * @default \"primary\"\n\t */\n\tscheme?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"danger\" | \"info\";\n\t/** Lucide icon rendered to the left of the label. */\n\tleftIcon?: LucideIcon;\n\t/** Lucide icon rendered to the right of the label. */\n\trightIcon?: LucideIcon;\n};\n\n/**\n * Badge — displays labels, statuses, and categorization tags.\n *\n * @param props.size - Badge size (`md` | `lg`). Default: \"lg\"\n * @param props.variant - Visual style variant. Default: \"ghost\"\n * @param props.scheme - Color scheme. Default: \"primary\"\n * @param props.leftIcon - Lucide icon rendered to the left of the label.\n * @param props.rightIcon - Lucide icon rendered to the right of the label.\n *\n * **...Other valid HTML properties for `<div>`**\n *\n * @returns Badge JSX element.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // With color scheme\n * <Badge scheme=\"success\">Approved</Badge>\n *\n * // With icon\n * <Badge leftIcon={CheckIcon} scheme=\"success\">Completed</Badge>\n *\n * // Custom size, variant and scheme\n * <Badge size=\"lg\" variant=\"solid\" scheme=\"warning\" rightIcon={AlertIcon}>\n *   Warning\n * </Badge>\n * ```\n */\n\nfunction Badge(props: BadgeProps) {\n\tconst {\n\t\tvariant = \"ghost\",\n\t\tscheme = \"primary\",\n\t\tsize = \"lg\",\n\t\tleftIcon,\n\t\trightIcon,\n\t\tclassName: baseClassName = \"\",\n\t\tchildren,\n\t\t...rest\n\t} = props;\n\n\tconst iconSizes = { md: 12, lg: 14 };\n\tconst iconSize = iconSizes[size];\n\n\tconst className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;\n\n\treturn (\n\t\t<div className={className.trim()} {...rest}>\n\t\t\t<IconRenderer iconSize={iconSize} icon={leftIcon} />\n\t\t\t<p>{children}</p>\n\t\t\t<IconRenderer iconSize={iconSize} icon={rightIcon} />\n\t\t</div>\n\t);\n}\n\nexport { Badge };\n"],"mappings":";;;;AA8DA,SAAS,EAAM,GAAmB;CACjC,IAAM,EACL,aAAU,SACV,YAAS,WACT,UAAO,MACP,aACA,cACA,WAAW,IAAgB,IAC3B,aACA,GAAG,MACA,GAGE,IAAW;EADG,IAAI;EAAI,IAAI;CACf,EAAU;CAI3B,OACC,kBAAC,OAAD;EAAK,WAAW,cAHe,EAAQ,GAAG,EAAO,GAAG,EAAK,GAAG,IAGlC,KAAK;EAAG,GAAI;YAAtC;GACC,kBAAC,GAAD;IAAwB;IAAU,MAAM;GAAW,CAAA;GACnD,kBAAC,KAAD,EAAI,YAAY,CAAA;GAChB,kBAAC,GAAD;IAAwB;IAAU,MAAM;GAAY,CAAA;EAChD;;AAEP"}

package/dist/modules/components/badge/styles.css

@@ -0,0 +1 @@
+@layer arkyn{.arkynBadge{white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:4px;width:min-content;display:flex}.arkynBadge.lg{border-radius:12px;height:24px;padding:0 16px}.arkynBadge.lg p{font-size:12px;font-weight:400;line-height:12px}.arkynBadge.md{border-radius:10px;height:20px;padding:0 12px}.arkynBadge.md p{font-size:10px;font-weight:400;line-height:10px}.arkynBadge.solid{color:#fff}.arkynBadge.solid.primary{background-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynBadge.solid.secondary{background-color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynBadge.solid.danger{background-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynBadge.solid.success{background-color:rgb(var(--spotlight-success,16, 185, 129))}.arkynBadge.solid.warning{background-color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynBadge.solid.info{background-color:rgb(var(--spotlight-info,14, 165, 233))}.arkynBadge.outline.primary{border-color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynBadge.outline.primary p,.arkynBadge.outline.primary svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynBadge.outline.secondary{border-color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynBadge.outline.secondary p,.arkynBadge.outline.secondary svg{color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynBadge.outline.danger{border-color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynBadge.outline.danger p,.arkynBadge.outline.danger svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynBadge.outline.success{border-color:rgb(var(--spotlight-success,16, 185, 129))}.arkynBadge.outline.success p,.arkynBadge.outline.success svg{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynBadge.outline.warning{border-color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynBadge.outline.warning p,.arkynBadge.outline.warning svg{color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynBadge.outline.info{border-color:rgb(var(--spotlight-info,14, 165, 233))}.arkynBadge.outline.info p,.arkynBadge.outline.info svg{color:rgb(var(--spotlight-info,14, 165, 233))}.arkynBadge.ghost.primary{background-color:rgb(var(--spotlight-primary-foreground,231, 240, 252))}.arkynBadge.ghost.primary p,.arkynBadge.ghost.primary svg{color:rgb(var(--spotlight-primary,17, 109, 220))}.arkynBadge.ghost.secondary{background-color:rgb(var(--spotlight-secondary-foreground,250, 250, 250))}.arkynBadge.ghost.secondary p,.arkynBadge.ghost.secondary svg{color:rgb(var(--spotlight-secondary,100, 116, 139))}.arkynBadge.ghost.danger{background-color:rgb(var(--spotlight-danger-foreground,254, 236, 239))}.arkynBadge.ghost.danger p,.arkynBadge.ghost.danger svg{color:rgb(var(--spotlight-danger,244, 63, 94))}.arkynBadge.ghost.success{background-color:rgb(var(--spotlight-success-foreground,231, 248, 242))}.arkynBadge.ghost.success p,.arkynBadge.ghost.success svg{color:rgb(var(--spotlight-success,16, 185, 129))}.arkynBadge.ghost.warning{background-color:rgb(var(--spotlight-warning-foreground,254, 241, 232))}.arkynBadge.ghost.warning p,.arkynBadge.ghost.warning svg{color:rgb(var(--spotlight-warning,249, 115, 22))}.arkynBadge.ghost.info{background-color:rgb(var(--spotlight-info-foreground,231, 246, 253))}.arkynBadge.ghost.info p,.arkynBadge.ghost.info svg{color:rgb(var(--spotlight-info,14, 165, 233))}}