import { cn } from "./index3.js";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AITypingIndicator/AITypingIndicator.tsx
var SIZE_CONFIG = {
	sm: {
		dot: 3,
		gap: 3,
		height: 6
	},
	md: {
		dot: 4,
		gap: 4,
		height: 8
	},
	lg: {
		dot: 6,
		gap: 6,
		height: 12
	}
};
function AITypingIndicator({ size = "md", color, speed = 1400, className }) {
	const config = SIZE_CONFIG[size];
	const dotStyle = {
		width: config.dot,
		height: config.dot,
		backgroundColor: color || "var(--quaternary-foreground)"
	};
	const keyframes = `
    @keyframes typing-bounce-${speed} {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-${config.dot}px); }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-slot="ai-typing-indicator"] span {
        animation: none !important;
      }
    }
  `;
	return /* @__PURE__ */ jsxs("output", {
		"data-slot": "ai-typing-indicator",
		"aria-label": "AI is typing",
		"aria-live": "polite",
		"aria-busy": "true",
		className: cn("inline-flex items-end", className),
		style: {
			gap: config.gap,
			height: config.height
		},
		children: [/* @__PURE__ */ jsx("style", { children: keyframes }), [
			0,
			1,
			2
		].map((i) => /* @__PURE__ */ jsx("span", {
			"data-testid": "typing-dot",
			"aria-hidden": "true",
			className: "rounded-full",
			style: {
				...dotStyle,
				animation: `typing-bounce-${speed} ${speed}ms ease-in-out infinite`,
				animationDelay: `${i * 200}ms`,
				willChange: "transform"
			}
		}, i))]
	});
}
AITypingIndicator.displayName = "AITypingIndicator";
//#endregion
export { AITypingIndicator };

//# sourceMappingURL=index418.js.map