koval-ui/dist/src/lib/TextToSpeech/TextToSpeech.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as n, jsx as a } from "react/jsx-runtime";
import { forwardRef as g, useRef as v, useId as y, useCallback as C } from "react";
import r from "classnames";
import { IconPlay as T } from "../../internal/Icons/IconPlay.js";
import { IconPause as w } from "../../internal/Icons/IconPause.js";
import { IconRepeat as P } from "../../internal/Icons/IconRepeat.js";
import e from "./TextToSpeech.module.css.js";
import { useSpeechSynth as j } from "./useSpeechSynth.js";
const q = g(
  ({
    children: l,
    className: m,
    language: p = "en",
    playLabel: d = "Read the text",
    pauseLabel: f = "Pause reading",
    restartLabel: u = "Restart reading",
    onSpeak: h = () => {
    },
    onPause: b = () => {
    },
    onEnd: N = () => {
    },
    ...k
  }, x) => {
    const o = v(null), { speak: t, pause: c, isSpeaking: s, restart: I } = j({
      language: p,
      ref: o,
      onSpeak: h,
      onEnd: N,
      onPause: b
    }), i = y(), R = C(() => {
      s ? c() : t();
    }, [s, c, t]), S = s ? w : T;
    return /* @__PURE__ */ n("div", { ...k, className: r(e.wrapper, m), ref: x, children: [
      /* @__PURE__ */ n("div", { className: r(e.controls, { [e.speaking]: s }), children: [
        /* @__PURE__ */ a(
          "button",
          {
            onClick: R,
            className: e.button,
            "aria-describedby": i,
            children: /* @__PURE__ */ a(S, { className: e.icon })
          }
        ),
        /* @__PURE__ */ a("div", { className: e.label, id: i, children: s ? f : d }),
        s && /* @__PURE__ */ a(
          "button",
          {
            "aria-description": u,
            onClick: I,
            className: r(e.button, e.restart),
            children: /* @__PURE__ */ a(P, { className: e.icon })
          }
        )
      ] }),
      /* @__PURE__ */ a("div", { ref: o, children: l })
    ] });
  }
);
q.displayName = "TextToSpeech";
export {
  q as TextToSpeech
};
//# sourceMappingURL=TextToSpeech.js.map