import { t as m } from "./vendor/react.js";
import { t as l } from "./utils.js";
var i = m(), g = {
  sm: {
    dot: 3,
    gap: 3,
    height: 6
  },
  md: {
    dot: 4,
    gap: 4,
    height: 8
  },
  lg: {
    dot: 6,
    gap: 6,
    height: 12
  }
};
function p({ size: e = "md", color: r, speed: a = 1400, className: o }) {
  const t = g[e], s = {
    width: t.dot,
    height: t.dot,
    backgroundColor: r || "var(--quaternary-foreground)"
  }, d = `
    @keyframes typing-bounce-${a} {
      0%, 60%, 100% { transform: translateY(0); }
      30% { transform: translateY(-${t.dot}px); }
    }
    @media (prefers-reduced-motion: reduce) {
      [data-slot="ai-typing-indicator"] span {
        animation: none !important;
      }
    }
  `;
  return /* @__PURE__ */ (0, i.jsxs)("output", {
    "data-slot": "ai-typing-indicator",
    "aria-label": "AI is typing",
    "aria-live": "polite",
    "aria-busy": "true",
    className: l("inline-flex items-end", o),
    style: {
      gap: t.gap,
      height: t.height
    },
    children: [/* @__PURE__ */ (0, i.jsx)("style", { children: d }), [
      0,
      1,
      2
    ].map((n) => /* @__PURE__ */ (0, i.jsx)("span", {
      "data-testid": "typing-dot",
      "aria-hidden": "true",
      className: "rounded-full",
      style: {
        ...s,
        animation: `typing-bounce-${a} ${a}ms ease-in-out infinite`,
        animationDelay: `${n * 200}ms`,
        willChange: "transform"
      }
    }, n))]
  });
}
p.displayName = "AITypingIndicator";
export {
  p as t
};

//# sourceMappingURL=AITypingIndicator.js.map