import { o as A } from "./rolldown-runtime.js";
import { i as E, n as j, t as w } from "./vendor/react.js";
import { t as h } from "./proxy.js";
import { t as _ } from "./use-reduced-motion.js";
import { t as S } from "./dist.js";
import { t as u } from "./utils.js";
var s = /* @__PURE__ */ A(E(), 1), l = w(), x = S("inline-block", {
  variants: { size: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-base",
    lg: "text-lg",
    xl: "text-xl"
  } },
  defaultVariants: { size: "md" }
}), O = {
  brand: "color-mix(in srgb, var(--brand-500) 60%, transparent)",
  silver: "color-mix(in srgb, var(--muted-foreground) 50%, transparent)"
}, T = s.forwardRef(({ children: e, size: t, duration: r = 2, variant: n = "brand", shimmerColor: a, baseColor: i = "var(--quaternary-foreground)", isActive: f = !0, className: o }, c) => {
  const m = _(), p = a ?? O[n];
  return !f || m ? /* @__PURE__ */ (0, l.jsx)("span", {
    ref: c,
    "data-slot": "ai-text-shimmer",
    className: u(x({ size: t }), o),
    style: { color: i },
    children: e
  }) : /* @__PURE__ */ (0, l.jsx)(h.span, {
    ref: c,
    "data-slot": "ai-text-shimmer",
    "aria-busy": "true",
    className: u(x({ size: t }), "bg-clip-text text-transparent bg-[length:200%_100%] will-change-[background-position]", o),
    style: { backgroundImage: `linear-gradient(
          90deg,
          ${i} 0%,
          ${i} 25%,
          ${p} 50%,
          ${i} 75%,
          ${i} 100%
        )` },
    animate: { backgroundPosition: ["200% 0", "-200% 0"] },
    transition: {
      duration: r,
      repeat: Number.POSITIVE_INFINITY,
      ease: "linear"
    },
    children: e
  });
});
T.displayName = "AITextShimmer";
var P = {
  sm: "size-1",
  md: "size-1.5",
  lg: "size-2"
}, R = {
  sm: "gap-0.5",
  md: "gap-1",
  lg: "gap-1.5"
}, k = s.forwardRef(({ size: e = "md", color: t = "bg-muted", className: r }, n) => {
  const a = _();
  return /* @__PURE__ */ (0, l.jsx)("span", {
    ref: n,
    "data-slot": "ai-loading-dots",
    role: "status",
    "aria-label": "Loading",
    className: u("inline-flex items-center", R[e], r),
    children: [
      0,
      1,
      2
    ].map((i) => /* @__PURE__ */ (0, l.jsx)(h.span, {
      className: u("rounded-full will-change-transform", P[e], t),
      animate: a ? {
        y: 0,
        opacity: 0.75
      } : {
        y: [
          0,
          -2,
          0
        ],
        opacity: [
          0.4,
          1,
          0.4
        ]
      },
      transition: a ? void 0 : {
        duration: 1,
        repeat: Number.POSITIVE_INFINITY,
        ease: [
          0.4,
          0,
          0.2,
          1
        ],
        delay: i * 0.15
      },
      "aria-hidden": "true"
    }, i))
  });
});
k.displayName = "AILoadingDots";
var z = s.forwardRef(({ texts: e, typingSpeed: t = 50, pauseDuration: r = 1500, className: n }, a) => {
  const [i, f] = s.useState(0), [o, c] = s.useState(""), [m, p] = s.useState(!1), b = s.useRef(void 0);
  return s.useEffect(() => {
    const g = e[i], N = setTimeout(() => {
      m ? o.length > 0 ? c(g.slice(0, o.length - 1)) : (p(!1), f((C) => (C + 1) % e.length)) : o.length < g.length ? c(g.slice(0, o.length + 1)) : b.current = setTimeout(() => p(!0), r);
    }, m ? t / 2 : t);
    return () => {
      clearTimeout(N), clearTimeout(b.current);
    };
  }, [
    o,
    m,
    i,
    e,
    t,
    r
  ]), /* @__PURE__ */ (0, l.jsxs)("span", {
    ref: a,
    "data-slot": "ai-typing-text",
    role: "status",
    "aria-label": e[i],
    className: u("inline-flex items-center", n),
    children: [o, /* @__PURE__ */ (0, l.jsx)(h.span, {
      className: "inline-block w-0.5 h-[1em] bg-muted-foreground ms-0.5 motion-reduce:animate-none motion-reduce:opacity-100",
      animate: { opacity: [
        1,
        0.15,
        1
      ] },
      transition: {
        duration: 1,
        repeat: Number.POSITIVE_INFINITY,
        ease: "easeInOut"
      },
      "aria-hidden": "true"
    })]
  });
});
z.displayName = "AITypingText";
var V = s.forwardRef(({ children: e, isActive: t = !0, className: r }, n) => {
  const a = _();
  return !t || a ? /* @__PURE__ */ (0, l.jsx)("span", {
    ref: n,
    "data-slot": "ai-pulse-text",
    role: "status",
    "aria-label": e,
    className: r,
    children: e
  }) : /* @__PURE__ */ (0, l.jsx)(h.span, {
    ref: n,
    "data-slot": "ai-pulse-text",
    role: "status",
    "aria-label": e,
    className: r,
    animate: { opacity: [
      0.4,
      1,
      0.7,
      1,
      0.4
    ] },
    transition: {
      duration: 2.5,
      repeat: Number.POSITIVE_INFINITY,
      times: [
        0,
        0.3,
        0.5,
        0.7,
        1
      ],
      ease: "easeInOut"
    },
    children: e
  });
});
V.displayName = "AIPulseText";
var v = j(), d = {
  variant: "string",
  size: "string",
  duration: "number",
  shimmerColor: "string",
  baseColor: "string",
  isActive: "boolean",
  className: "string"
};
function y(e, t) {
  if (e !== null)
    switch (t) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var I = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, v.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(d).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = d[e] || "string";
    this._props[e] = this._parseValue(t, r), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), r = d[e] || "string";
    return y(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, n] of Object.entries(d)) if (r in this._props) e[r] = this._props[r];
    else {
      const a = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = y(this.getAttribute(a), n);
    }
    const t = s.createElement(T, {
      ...e,
      _hostElement: this
    }, s.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(d)) Object.defineProperty(I.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-text-shimmer") && customElements.define("hf-ai-text-shimmer", I);
export {
  I as AITextShimmerWC,
  I as default
};

//# sourceMappingURL=hf-ai-text-shimmer.js.map