'use client';


import { cn } from "../../utils/cn.mjs";
import { useEffect, useMemo, useRef, useState } from "react";
import { Eye, EyeOff } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/HideShow/index.tsx
const insertBreaks = (str, groupSize = 6) => str.replace(new RegExp(`.{1,${groupSize}}`, "g"), "$&​");
const HideShow = ({ text, className, visiblePrefixChars = 6, maskChar = "•", revealDurationMs = 1e4 }) => {
	const [isRevealed, setIsRevealed] = useState(false);
	const hideTimerRef = useRef(null);
	const maskedText = useMemo(() => {
		if (!text) return "";
		if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);
		const prefix = text.slice(0, visiblePrefixChars);
		const remaining = Math.max(0, text.length - visiblePrefixChars);
		return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);
	}, [
		text,
		visiblePrefixChars,
		maskChar
	]);
	useEffect(() => {
		return () => {
			if (hideTimerRef.current) {
				window.clearTimeout(hideTimerRef.current);
				hideTimerRef.current = null;
			}
		};
	}, []);
	const reveal = () => {
		if (isRevealed) return;
		setIsRevealed(true);
		if (hideTimerRef.current) {
			window.clearTimeout(hideTimerRef.current);
			hideTimerRef.current = null;
		}
		hideTimerRef.current = window.setTimeout(() => {
			setIsRevealed(false);
		}, revealDurationMs);
	};
	const hide = () => {
		setIsRevealed(false);
		if (hideTimerRef.current) {
			window.clearTimeout(hideTimerRef.current);
			hideTimerRef.current = null;
		}
	};
	const IconComponent = isRevealed ? EyeOff : Eye;
	return /* @__PURE__ */ jsxs("span", {
		className: cn("inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10", className),
		onClick: isRevealed ? hide : reveal,
		onKeyDown: (e) => {
			if (e.key === "Enter" || e.key === " ") {
				e.preventDefault();
				isRevealed ? hide() : reveal();
			}
		},
		role: "button",
		tabIndex: 0,
		children: [/* @__PURE__ */ jsx("span", {
			className: "min-w-0 break-all",
			children: isRevealed ? text : maskedText
		}), /* @__PURE__ */ jsx(IconComponent, { className: "ml-1 ml-auto size-4 min-w-4 shrink-0" })]
	});
};

//#endregion
export { HideShow };
//# sourceMappingURL=index.mjs.map