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

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

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