@zentauri-ui/zentauri-components 2.3.1 → 2.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -5
- package/cli/props.json +664 -0
- package/cli/registry.json +12 -0
- package/dist/chunk-2RBBXVFA.js +19 -0
- package/dist/{chunk-MY3DQVNF.js.map → chunk-2RBBXVFA.js.map} +1 -1
- package/dist/{chunk-VMVG2RVZ.mjs → chunk-425DAZTS.mjs} +4 -4
- package/dist/{chunk-VMVG2RVZ.mjs.map → chunk-425DAZTS.mjs.map} +1 -1
- package/dist/{chunk-RBNZNWYQ.js → chunk-6GP74P4F.js} +6 -6
- package/dist/{chunk-RBNZNWYQ.js.map → chunk-6GP74P4F.js.map} +1 -1
- package/dist/chunk-DUKHIN2W.js +44 -0
- package/dist/chunk-DUKHIN2W.js.map +1 -0
- package/dist/chunk-HJ7EFBED.js +86 -0
- package/dist/chunk-HJ7EFBED.js.map +1 -0
- package/dist/chunk-K2VCZK4I.mjs +75 -0
- package/dist/chunk-K2VCZK4I.mjs.map +1 -0
- package/dist/{chunk-UN5RRNPV.js → chunk-KVBFWRPF.js} +12 -12
- package/dist/{chunk-UN5RRNPV.js.map → chunk-KVBFWRPF.js.map} +1 -1
- package/dist/chunk-N4MLFU2Q.mjs +69 -0
- package/dist/chunk-N4MLFU2Q.mjs.map +1 -0
- package/dist/{chunk-K7UU3K54.js → chunk-NZQA4M35.js} +24 -4
- package/dist/chunk-NZQA4M35.js.map +1 -0
- package/dist/chunk-OME7XOPN.js +78 -0
- package/dist/chunk-OME7XOPN.js.map +1 -0
- package/dist/chunk-PVDWJUMF.mjs +34 -0
- package/dist/chunk-PVDWJUMF.mjs.map +1 -0
- package/dist/{chunk-TTKTPERV.mjs → chunk-R2JXARKB.mjs} +3 -3
- package/dist/{chunk-TTKTPERV.mjs.map → chunk-R2JXARKB.mjs.map} +1 -1
- package/dist/chunk-SD7YXMNV.js +40 -0
- package/dist/chunk-SD7YXMNV.js.map +1 -0
- package/dist/{chunk-PJATBFEK.mjs → chunk-TZTUL6C4.mjs} +24 -4
- package/dist/chunk-TZTUL6C4.mjs.map +1 -0
- package/dist/chunk-V5EE5ATH.mjs +36 -0
- package/dist/chunk-V5EE5ATH.mjs.map +1 -0
- package/dist/{chunk-STWXN5EM.mjs → chunk-YDD5HQGX.mjs} +3 -3
- package/dist/{chunk-STWXN5EM.mjs.map → chunk-YDD5HQGX.mjs.map} +1 -1
- package/dist/design-system/facade.js +6 -4
- package/dist/design-system/facade.js.map +1 -1
- package/dist/design-system/facade.mjs +5 -3
- package/dist/design-system/facade.mjs.map +1 -1
- package/dist/design-system/index.d.ts +2 -0
- package/dist/design-system/index.d.ts.map +1 -1
- package/dist/design-system/speech-recognition.d.ts +39 -0
- package/dist/design-system/speech-recognition.d.ts.map +1 -0
- package/dist/design-system/speech-synthesizer.d.ts +41 -0
- package/dist/design-system/speech-synthesizer.d.ts.map +1 -0
- package/dist/ui/buttons/animated.js +8 -6
- package/dist/ui/buttons/animated.js.map +1 -1
- package/dist/ui/buttons/animated.mjs +6 -4
- package/dist/ui/buttons/animated.mjs.map +1 -1
- package/dist/ui/buttons.js +9 -7
- package/dist/ui/buttons.mjs +7 -5
- package/dist/ui/data-table.js +19 -17
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/data-table.mjs +9 -7
- package/dist/ui/data-table.mjs.map +1 -1
- package/dist/ui/dynamic-stepper.js +18 -16
- package/dist/ui/dynamic-stepper.js.map +1 -1
- package/dist/ui/dynamic-stepper.mjs +7 -5
- package/dist/ui/dynamic-stepper.mjs.map +1 -1
- package/dist/ui/pagination.js +10 -8
- package/dist/ui/pagination.mjs +7 -5
- package/dist/ui/speech-recognition/animated/animations.d.ts +8 -0
- package/dist/ui/speech-recognition/animated/animations.d.ts.map +1 -0
- package/dist/ui/speech-recognition/animated/index.d.ts +4 -0
- package/dist/ui/speech-recognition/animated/index.d.ts.map +1 -0
- package/dist/ui/speech-recognition/animated/speech-recognition-animated.d.ts +6 -0
- package/dist/ui/speech-recognition/animated/speech-recognition-animated.d.ts.map +1 -0
- package/dist/ui/speech-recognition/animated/types.d.ts +9 -0
- package/dist/ui/speech-recognition/animated/types.d.ts.map +1 -0
- package/dist/ui/speech-recognition/animated.js +288 -0
- package/dist/ui/speech-recognition/animated.js.map +1 -0
- package/dist/ui/speech-recognition/animated.mjs +285 -0
- package/dist/ui/speech-recognition/animated.mjs.map +1 -0
- package/dist/ui/speech-recognition/index.d.ts +4 -0
- package/dist/ui/speech-recognition/index.d.ts.map +1 -0
- package/dist/ui/speech-recognition/speech-recognition-base.d.ts +6 -0
- package/dist/ui/speech-recognition/speech-recognition-base.d.ts.map +1 -0
- package/dist/ui/speech-recognition/speech-recognition.d.ts +2 -0
- package/dist/ui/speech-recognition/speech-recognition.d.ts.map +1 -0
- package/dist/ui/speech-recognition/types.d.ts +31 -0
- package/dist/ui/speech-recognition/types.d.ts.map +1 -0
- package/dist/ui/speech-recognition/variants.d.ts +11 -0
- package/dist/ui/speech-recognition/variants.d.ts.map +1 -0
- package/dist/ui/speech-recognition.js +242 -0
- package/dist/ui/speech-recognition.js.map +1 -0
- package/dist/ui/speech-recognition.mjs +233 -0
- package/dist/ui/speech-recognition.mjs.map +1 -0
- package/dist/ui/speech-synthesizer/animated/animations.d.ts +8 -0
- package/dist/ui/speech-synthesizer/animated/animations.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/animated/index.d.ts +4 -0
- package/dist/ui/speech-synthesizer/animated/index.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/animated/speech-synthesizer-animated.d.ts +6 -0
- package/dist/ui/speech-synthesizer/animated/speech-synthesizer-animated.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/animated/types.d.ts +9 -0
- package/dist/ui/speech-synthesizer/animated/types.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/animated.js +269 -0
- package/dist/ui/speech-synthesizer/animated.js.map +1 -0
- package/dist/ui/speech-synthesizer/animated.mjs +266 -0
- package/dist/ui/speech-synthesizer/animated.mjs.map +1 -0
- package/dist/ui/speech-synthesizer/index.d.ts +4 -0
- package/dist/ui/speech-synthesizer/index.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/speech-synthesizer-base.d.ts +6 -0
- package/dist/ui/speech-synthesizer/speech-synthesizer-base.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/speech-synthesizer.d.ts +2 -0
- package/dist/ui/speech-synthesizer/speech-synthesizer.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/types.d.ts +43 -0
- package/dist/ui/speech-synthesizer/types.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer/variants.d.ts +13 -0
- package/dist/ui/speech-synthesizer/variants.d.ts.map +1 -0
- package/dist/ui/speech-synthesizer.js +220 -0
- package/dist/ui/speech-synthesizer.js.map +1 -0
- package/dist/ui/speech-synthesizer.mjs +211 -0
- package/dist/ui/speech-synthesizer.mjs.map +1 -0
- package/dist/ui/split-button.js +20 -18
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/split-button.mjs +7 -5
- package/dist/ui/split-button.mjs.map +1 -1
- package/package.json +1 -1
- package/src/design-system/index.ts +2 -0
- package/src/design-system/speech-recognition.ts +82 -0
- package/src/design-system/speech-synthesizer.ts +90 -0
- package/src/ui/speech-recognition/animated/animations.ts +62 -0
- package/src/ui/speech-recognition/animated/index.ts +8 -0
- package/src/ui/speech-recognition/animated/speech-recognition-animated.tsx +276 -0
- package/src/ui/speech-recognition/animated/types.ts +11 -0
- package/src/ui/speech-recognition/index.ts +15 -0
- package/src/ui/speech-recognition/speech-recognition-base.tsx +276 -0
- package/src/ui/speech-recognition/speech-recognition.test.tsx +74 -0
- package/src/ui/speech-recognition/speech-recognition.tsx +1 -0
- package/src/ui/speech-recognition/types.ts +50 -0
- package/src/ui/speech-recognition/variants.ts +47 -0
- package/src/ui/speech-synthesizer/animated/animations.ts +62 -0
- package/src/ui/speech-synthesizer/animated/index.ts +8 -0
- package/src/ui/speech-synthesizer/animated/speech-synthesizer-animated.tsx +260 -0
- package/src/ui/speech-synthesizer/animated/types.ts +11 -0
- package/src/ui/speech-synthesizer/index.ts +14 -0
- package/src/ui/speech-synthesizer/speech-synthesizer-base.tsx +255 -0
- package/src/ui/speech-synthesizer/speech-synthesizer.test.tsx +87 -0
- package/src/ui/speech-synthesizer/speech-synthesizer.tsx +1 -0
- package/src/ui/speech-synthesizer/types.ts +57 -0
- package/src/ui/speech-synthesizer/variants.ts +55 -0
- package/dist/chunk-K7UU3K54.js.map +0 -1
- package/dist/chunk-MY3DQVNF.js +0 -19
- package/dist/chunk-PJATBFEK.mjs.map +0 -1
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var chunkDUKHIN2W_js = require('../../chunk-DUKHIN2W.js');
|
|
5
|
+
require('../../chunk-HJ7EFBED.js');
|
|
6
|
+
var chunkZS5756ZC_js = require('../../chunk-ZS5756ZC.js');
|
|
7
|
+
require('../../chunk-PZ5AY32C.js');
|
|
8
|
+
var framerMotion = require('framer-motion');
|
|
9
|
+
var react = require('react');
|
|
10
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
11
|
+
|
|
12
|
+
// src/ui/speech-synthesizer/animated/animations.ts
|
|
13
|
+
var speechSynthesizerAnimationPresets = {
|
|
14
|
+
none: {
|
|
15
|
+
transition: { duration: 0 },
|
|
16
|
+
variants: {
|
|
17
|
+
initial: { scale: 1 },
|
|
18
|
+
animate: { scale: 1 }
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
pulse: {
|
|
22
|
+
transition: {
|
|
23
|
+
duration: 1,
|
|
24
|
+
repeat: Infinity,
|
|
25
|
+
repeatType: "reverse",
|
|
26
|
+
ease: "easeInOut"
|
|
27
|
+
},
|
|
28
|
+
variants: {
|
|
29
|
+
initial: { scale: 1, opacity: 0.7 },
|
|
30
|
+
animate: { scale: 1.15, opacity: 1 }
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
wave: {
|
|
34
|
+
transition: {
|
|
35
|
+
duration: 0.8,
|
|
36
|
+
repeat: Infinity,
|
|
37
|
+
repeatType: "reverse",
|
|
38
|
+
ease: "easeInOut"
|
|
39
|
+
},
|
|
40
|
+
variants: {
|
|
41
|
+
initial: { scale: 1, rotate: 0 },
|
|
42
|
+
animate: { scale: 1.1, rotate: -5 }
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
glow: {
|
|
46
|
+
transition: {
|
|
47
|
+
duration: 1.5,
|
|
48
|
+
repeat: Infinity,
|
|
49
|
+
repeatType: "reverse",
|
|
50
|
+
ease: "easeInOut"
|
|
51
|
+
},
|
|
52
|
+
variants: {
|
|
53
|
+
initial: {
|
|
54
|
+
boxShadow: "0 0 0px rgba(59,130,246,0)"
|
|
55
|
+
},
|
|
56
|
+
animate: {
|
|
57
|
+
boxShadow: "0 0 20px rgba(59,130,246,0.5)"
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
function DefaultPlayIcon() {
|
|
63
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) });
|
|
64
|
+
}
|
|
65
|
+
function DefaultPauseIcon() {
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: [
|
|
67
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "4", width: "4", height: "16" }),
|
|
68
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "4", width: "4", height: "16" })
|
|
69
|
+
] });
|
|
70
|
+
}
|
|
71
|
+
function DefaultStopIcon() {
|
|
72
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "6", y: "6", width: "12", height: "12" }) });
|
|
73
|
+
}
|
|
74
|
+
function SpeechSynthesizerAnimated({
|
|
75
|
+
appearance,
|
|
76
|
+
size,
|
|
77
|
+
text,
|
|
78
|
+
lang,
|
|
79
|
+
rate = 1,
|
|
80
|
+
pitch = 1,
|
|
81
|
+
volume = 1,
|
|
82
|
+
autoSpeak = false,
|
|
83
|
+
onStart,
|
|
84
|
+
onEnd,
|
|
85
|
+
onError,
|
|
86
|
+
onStateChange,
|
|
87
|
+
renderPlay,
|
|
88
|
+
renderPause,
|
|
89
|
+
renderStop,
|
|
90
|
+
showProgress = false,
|
|
91
|
+
animation = "pulse",
|
|
92
|
+
className,
|
|
93
|
+
children,
|
|
94
|
+
...rest
|
|
95
|
+
}) {
|
|
96
|
+
const [state, setState] = react.useState("idle");
|
|
97
|
+
const utteranceRef = react.useRef(null);
|
|
98
|
+
const stateRef = react.useRef("idle");
|
|
99
|
+
const preset = speechSynthesizerAnimationPresets[animation];
|
|
100
|
+
const setStateSafe = react.useCallback(
|
|
101
|
+
(newState) => {
|
|
102
|
+
stateRef.current = newState;
|
|
103
|
+
setState(newState);
|
|
104
|
+
onStateChange?.(newState);
|
|
105
|
+
},
|
|
106
|
+
[onStateChange]
|
|
107
|
+
);
|
|
108
|
+
const speak = react.useCallback(() => {
|
|
109
|
+
if (!text || typeof window === "undefined") return;
|
|
110
|
+
window.speechSynthesis.cancel();
|
|
111
|
+
const utterance = new SpeechSynthesisUtterance(text);
|
|
112
|
+
if (lang) utterance.lang = lang;
|
|
113
|
+
utterance.rate = rate;
|
|
114
|
+
utterance.pitch = pitch;
|
|
115
|
+
utterance.volume = volume;
|
|
116
|
+
utterance.onstart = () => {
|
|
117
|
+
setStateSafe("speaking");
|
|
118
|
+
onStart?.();
|
|
119
|
+
};
|
|
120
|
+
utterance.onend = () => {
|
|
121
|
+
setStateSafe("idle");
|
|
122
|
+
onEnd?.();
|
|
123
|
+
};
|
|
124
|
+
utterance.onerror = (event) => {
|
|
125
|
+
setStateSafe("idle");
|
|
126
|
+
onError?.(event.error);
|
|
127
|
+
};
|
|
128
|
+
utterance.onpause = () => setStateSafe("paused");
|
|
129
|
+
utterance.onresume = () => setStateSafe("speaking");
|
|
130
|
+
utteranceRef.current = utterance;
|
|
131
|
+
window.speechSynthesis.speak(utterance);
|
|
132
|
+
}, [text, lang, rate, pitch, volume, onStart, onEnd, onError, setStateSafe]);
|
|
133
|
+
const pauseFn = react.useCallback(() => {
|
|
134
|
+
if (typeof window !== "undefined") window.speechSynthesis.pause();
|
|
135
|
+
}, []);
|
|
136
|
+
const resumeFn = react.useCallback(() => {
|
|
137
|
+
if (typeof window !== "undefined") window.speechSynthesis.resume();
|
|
138
|
+
}, []);
|
|
139
|
+
const stop = react.useCallback(() => {
|
|
140
|
+
if (typeof window !== "undefined") window.speechSynthesis.cancel();
|
|
141
|
+
setStateSafe("idle");
|
|
142
|
+
}, [setStateSafe]);
|
|
143
|
+
const imperativeHandle = {
|
|
144
|
+
speak,
|
|
145
|
+
pause: pauseFn,
|
|
146
|
+
resume: resumeFn,
|
|
147
|
+
stop,
|
|
148
|
+
get state() {
|
|
149
|
+
return stateRef.current;
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
react.useImperativeHandle(rest.ref, () => imperativeHandle, [
|
|
153
|
+
speak,
|
|
154
|
+
pauseFn,
|
|
155
|
+
resumeFn,
|
|
156
|
+
stop
|
|
157
|
+
]);
|
|
158
|
+
react.useEffect(() => {
|
|
159
|
+
if (autoSpeak && text) speak();
|
|
160
|
+
return () => {
|
|
161
|
+
if (typeof window !== "undefined") window.speechSynthesis.cancel();
|
|
162
|
+
};
|
|
163
|
+
}, []);
|
|
164
|
+
const isSpeaking = state === "speaking";
|
|
165
|
+
const isPaused = state === "paused";
|
|
166
|
+
const showPlay = state === "idle" || state === "paused";
|
|
167
|
+
const showPause = state === "speaking";
|
|
168
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
169
|
+
framerMotion.motion.div,
|
|
170
|
+
{
|
|
171
|
+
"data-slot": "speech-synthesizer",
|
|
172
|
+
className: chunkZS5756ZC_js.cn(chunkDUKHIN2W_js.speechSynthesizerVariants({ size }), className),
|
|
173
|
+
...rest,
|
|
174
|
+
children: [
|
|
175
|
+
text && /* @__PURE__ */ jsxRuntime.jsx(
|
|
176
|
+
framerMotion.motion.p,
|
|
177
|
+
{
|
|
178
|
+
"data-slot": "speech-synthesizer-text",
|
|
179
|
+
className: chunkDUKHIN2W_js.speechSynthesizerTextClasses,
|
|
180
|
+
initial: "initial",
|
|
181
|
+
animate: isSpeaking ? "animate" : "initial",
|
|
182
|
+
variants: preset.variants,
|
|
183
|
+
transition: preset.transition,
|
|
184
|
+
children: text
|
|
185
|
+
}
|
|
186
|
+
),
|
|
187
|
+
showProgress && isSpeaking && /* @__PURE__ */ jsxRuntime.jsx(
|
|
188
|
+
framerMotion.motion.div,
|
|
189
|
+
{
|
|
190
|
+
"data-slot": "speech-synthesizer-progress",
|
|
191
|
+
className: chunkDUKHIN2W_js.speechSynthesizerProgressClasses,
|
|
192
|
+
initial: { scaleX: 0 },
|
|
193
|
+
animate: { scaleX: 1 },
|
|
194
|
+
transition: { duration: 0.3 },
|
|
195
|
+
style: { originX: 0 },
|
|
196
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
197
|
+
"div",
|
|
198
|
+
{
|
|
199
|
+
"data-slot": "speech-synthesizer-progress-bar",
|
|
200
|
+
className: chunkZS5756ZC_js.cn(
|
|
201
|
+
chunkDUKHIN2W_js.speechSynthesizerProgressBarClasses,
|
|
202
|
+
"w-full animate-pulse"
|
|
203
|
+
)
|
|
204
|
+
}
|
|
205
|
+
)
|
|
206
|
+
}
|
|
207
|
+
),
|
|
208
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
209
|
+
framerMotion.motion.div,
|
|
210
|
+
{
|
|
211
|
+
"data-slot": "speech-synthesizer-controls",
|
|
212
|
+
className: chunkDUKHIN2W_js.speechSynthesizerControlsClasses,
|
|
213
|
+
children: [
|
|
214
|
+
showPlay && /* @__PURE__ */ jsxRuntime.jsx(
|
|
215
|
+
framerMotion.motion.button,
|
|
216
|
+
{
|
|
217
|
+
type: "button",
|
|
218
|
+
"data-slot": "speech-synthesizer-play-btn",
|
|
219
|
+
className: chunkZS5756ZC_js.cn(
|
|
220
|
+
chunkDUKHIN2W_js.speechSynthesizerBtnVariants({ appearance, size }),
|
|
221
|
+
isPaused && chunkDUKHIN2W_js.speechSynthesizerBtnActiveClasses
|
|
222
|
+
),
|
|
223
|
+
onClick: isPaused ? resumeFn : speak,
|
|
224
|
+
"aria-label": isPaused ? "Resume" : "Play",
|
|
225
|
+
whileHover: { scale: 1.1 },
|
|
226
|
+
whileTap: { scale: 0.9 },
|
|
227
|
+
children: renderPlay ? renderPlay({ isSpeaking, isPaused, state }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultPlayIcon, {})
|
|
228
|
+
}
|
|
229
|
+
),
|
|
230
|
+
showPause && /* @__PURE__ */ jsxRuntime.jsx(
|
|
231
|
+
framerMotion.motion.button,
|
|
232
|
+
{
|
|
233
|
+
type: "button",
|
|
234
|
+
"data-slot": "speech-synthesizer-pause-btn",
|
|
235
|
+
className: chunkDUKHIN2W_js.speechSynthesizerBtnVariants({ appearance, size }),
|
|
236
|
+
onClick: pauseFn,
|
|
237
|
+
"aria-label": "Pause",
|
|
238
|
+
whileHover: { scale: 1.1 },
|
|
239
|
+
whileTap: { scale: 0.9 },
|
|
240
|
+
children: renderPause ? renderPause({ isSpeaking, isPaused, state }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultPauseIcon, {})
|
|
241
|
+
}
|
|
242
|
+
),
|
|
243
|
+
(isSpeaking || isPaused) && /* @__PURE__ */ jsxRuntime.jsx(
|
|
244
|
+
framerMotion.motion.button,
|
|
245
|
+
{
|
|
246
|
+
type: "button",
|
|
247
|
+
"data-slot": "speech-synthesizer-stop-btn",
|
|
248
|
+
className: chunkDUKHIN2W_js.speechSynthesizerBtnVariants({ appearance, size }),
|
|
249
|
+
onClick: stop,
|
|
250
|
+
"aria-label": "Stop",
|
|
251
|
+
whileHover: { scale: 1.1 },
|
|
252
|
+
whileTap: { scale: 0.9 },
|
|
253
|
+
children: renderStop ? renderStop({ isSpeaking, isPaused, state }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultStopIcon, {})
|
|
254
|
+
}
|
|
255
|
+
)
|
|
256
|
+
]
|
|
257
|
+
}
|
|
258
|
+
),
|
|
259
|
+
children
|
|
260
|
+
]
|
|
261
|
+
}
|
|
262
|
+
);
|
|
263
|
+
}
|
|
264
|
+
SpeechSynthesizerAnimated.displayName = "SpeechSynthesizerAnimated";
|
|
265
|
+
|
|
266
|
+
exports.SpeechSynthesizerAnimated = SpeechSynthesizerAnimated;
|
|
267
|
+
exports.speechSynthesizerAnimationPresets = speechSynthesizerAnimationPresets;
|
|
268
|
+
//# sourceMappingURL=animated.js.map
|
|
269
|
+
//# sourceMappingURL=animated.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/speech-synthesizer/animated/animations.ts","../../../src/ui/speech-synthesizer/animated/speech-synthesizer-animated.tsx"],"names":["jsx","useState","useRef","useCallback","useImperativeHandle","useEffect","jsxs","motion","cn","speechSynthesizerVariants","speechSynthesizerTextClasses","speechSynthesizerProgressClasses","speechSynthesizerProgressBarClasses","speechSynthesizerControlsClasses","speechSynthesizerBtnVariants","speechSynthesizerBtnActiveClasses"],"mappings":"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","file":"animated.js","sourcesContent":["import type { Transition, Variants } from \"framer-motion\";\n\nexport type SpeechSynthesizerAnimation = \"none\" | \"pulse\" | \"wave\" | \"glow\";\n\nexport type SpeechSynthesizerAnimationPresets = Record<\n SpeechSynthesizerAnimation,\n {\n transition: Transition;\n variants: Variants;\n }\n>;\n\nexport const speechSynthesizerAnimationPresets: SpeechSynthesizerAnimationPresets =\n {\n none: {\n transition: { duration: 0 },\n variants: {\n initial: { scale: 1 },\n animate: { scale: 1 },\n },\n },\n pulse: {\n transition: {\n duration: 1,\n repeat: Infinity,\n repeatType: \"reverse\",\n ease: \"easeInOut\",\n },\n variants: {\n initial: { scale: 1, opacity: 0.7 },\n animate: { scale: 1.15, opacity: 1 },\n },\n },\n wave: {\n transition: {\n duration: 0.8,\n repeat: Infinity,\n repeatType: \"reverse\",\n ease: \"easeInOut\",\n },\n variants: {\n initial: { scale: 1, rotate: 0 },\n animate: { scale: 1.1, rotate: -5 },\n },\n },\n glow: {\n transition: {\n duration: 1.5,\n repeat: Infinity,\n repeatType: \"reverse\",\n ease: \"easeInOut\",\n },\n variants: {\n initial: {\n boxShadow: \"0 0 0px rgba(59,130,246,0)\",\n },\n animate: {\n boxShadow: \"0 0 20px rgba(59,130,246,0.5)\",\n },\n },\n },\n };\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpeechSynthesizerRef, SpeechSynthesizerState } from \"../types\";\nimport {\n speechSynthesizerBtnActiveClasses,\n speechSynthesizerBtnVariants,\n speechSynthesizerControlsClasses,\n speechSynthesizerProgressBarClasses,\n speechSynthesizerProgressClasses,\n speechSynthesizerTextClasses,\n speechSynthesizerVariants,\n} from \"../variants\";\n\nimport { speechSynthesizerAnimationPresets } from \"./animations\";\nimport type { SpeechSynthesizerAnimatedProps } from \"./types\";\n\nfunction DefaultPlayIcon() {\n return (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-5\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n );\n}\n\nfunction DefaultPauseIcon() {\n return (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-5\">\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" />\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" />\n </svg>\n );\n}\n\nfunction DefaultStopIcon() {\n return (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-5\">\n <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" />\n </svg>\n );\n}\n\nexport function SpeechSynthesizerAnimated({\n appearance,\n size,\n text,\n lang,\n rate = 1,\n pitch = 1,\n volume = 1,\n autoSpeak = false,\n onStart,\n onEnd,\n onError,\n onStateChange,\n renderPlay,\n renderPause,\n renderStop,\n showProgress = false,\n animation = \"pulse\",\n className,\n children,\n ...rest\n}: SpeechSynthesizerAnimatedProps) {\n const [state, setState] = useState<SpeechSynthesizerState>(\"idle\");\n const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);\n const stateRef = useRef<SpeechSynthesizerState>(\"idle\");\n const preset = speechSynthesizerAnimationPresets[animation];\n\n const setStateSafe = useCallback(\n (newState: SpeechSynthesizerState) => {\n stateRef.current = newState;\n setState(newState);\n onStateChange?.(newState);\n },\n [onStateChange],\n );\n\n const speak = useCallback(() => {\n if (!text || typeof window === \"undefined\") return;\n window.speechSynthesis.cancel();\n\n const utterance = new SpeechSynthesisUtterance(text);\n if (lang) utterance.lang = lang;\n utterance.rate = rate;\n utterance.pitch = pitch;\n utterance.volume = volume;\n\n utterance.onstart = () => {\n setStateSafe(\"speaking\");\n onStart?.();\n };\n utterance.onend = () => {\n setStateSafe(\"idle\");\n onEnd?.();\n };\n utterance.onerror = (event) => {\n setStateSafe(\"idle\");\n onError?.(event.error);\n };\n utterance.onpause = () => setStateSafe(\"paused\");\n utterance.onresume = () => setStateSafe(\"speaking\");\n\n utteranceRef.current = utterance;\n window.speechSynthesis.speak(utterance);\n }, [text, lang, rate, pitch, volume, onStart, onEnd, onError, setStateSafe]);\n\n const pauseFn = useCallback(() => {\n if (typeof window !== \"undefined\") window.speechSynthesis.pause();\n }, []);\n\n const resumeFn = useCallback(() => {\n if (typeof window !== \"undefined\") window.speechSynthesis.resume();\n }, []);\n\n const stop = useCallback(() => {\n if (typeof window !== \"undefined\") window.speechSynthesis.cancel();\n setStateSafe(\"idle\");\n }, [setStateSafe]);\n\n const imperativeHandle: SpeechSynthesizerRef = {\n speak,\n pause: pauseFn,\n resume: resumeFn,\n stop,\n get state() {\n return stateRef.current;\n },\n };\n\n useImperativeHandle((rest as any).ref, () => imperativeHandle, [\n speak,\n pauseFn,\n resumeFn,\n stop,\n ]);\n\n useEffect(() => {\n if (autoSpeak && text) speak();\n return () => {\n if (typeof window !== \"undefined\") window.speechSynthesis.cancel();\n };\n }, []);\n\n const isSpeaking = state === \"speaking\";\n const isPaused = state === \"paused\";\n const showPlay = state === \"idle\" || state === \"paused\";\n const showPause = state === \"speaking\";\n\n return (\n <motion.div\n data-slot=\"speech-synthesizer\"\n className={cn(speechSynthesizerVariants({ size }), className)}\n {...(rest as any)}\n >\n {text && (\n <motion.p\n data-slot=\"speech-synthesizer-text\"\n className={speechSynthesizerTextClasses}\n initial=\"initial\"\n animate={isSpeaking ? \"animate\" : \"initial\"}\n variants={preset.variants}\n transition={preset.transition}\n >\n {text}\n </motion.p>\n )}\n {showProgress && isSpeaking && (\n <motion.div\n data-slot=\"speech-synthesizer-progress\"\n className={speechSynthesizerProgressClasses}\n initial={{ scaleX: 0 }}\n animate={{ scaleX: 1 }}\n transition={{ duration: 0.3 }}\n style={{ originX: 0 }}\n >\n <div\n data-slot=\"speech-synthesizer-progress-bar\"\n className={cn(\n speechSynthesizerProgressBarClasses,\n \"w-full animate-pulse\",\n )}\n />\n </motion.div>\n )}\n <motion.div\n data-slot=\"speech-synthesizer-controls\"\n className={speechSynthesizerControlsClasses}\n >\n {showPlay && (\n <motion.button\n type=\"button\"\n data-slot=\"speech-synthesizer-play-btn\"\n className={cn(\n speechSynthesizerBtnVariants({ appearance, size }),\n isPaused && speechSynthesizerBtnActiveClasses,\n )}\n onClick={isPaused ? resumeFn : speak}\n aria-label={isPaused ? \"Resume\" : \"Play\"}\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n >\n {renderPlay ? (\n renderPlay({ isSpeaking, isPaused, state })\n ) : (\n <DefaultPlayIcon />\n )}\n </motion.button>\n )}\n {showPause && (\n <motion.button\n type=\"button\"\n data-slot=\"speech-synthesizer-pause-btn\"\n className={speechSynthesizerBtnVariants({ appearance, size })}\n onClick={pauseFn}\n aria-label=\"Pause\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n >\n {renderPause ? (\n renderPause({ isSpeaking, isPaused, state })\n ) : (\n <DefaultPauseIcon />\n )}\n </motion.button>\n )}\n {(isSpeaking || isPaused) && (\n <motion.button\n type=\"button\"\n data-slot=\"speech-synthesizer-stop-btn\"\n className={speechSynthesizerBtnVariants({ appearance, size })}\n onClick={stop}\n aria-label=\"Stop\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n >\n {renderStop ? (\n renderStop({ isSpeaking, isPaused, state })\n ) : (\n <DefaultStopIcon />\n )}\n </motion.button>\n )}\n </motion.div>\n {children}\n </motion.div>\n );\n}\n\nSpeechSynthesizerAnimated.displayName = \"SpeechSynthesizerAnimated\";\n"]}
|
|
@@ -0,0 +1,266 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { speechSynthesizerTextClasses, speechSynthesizerProgressClasses, speechSynthesizerProgressBarClasses, speechSynthesizerControlsClasses, speechSynthesizerBtnVariants, speechSynthesizerBtnActiveClasses, speechSynthesizerVariants } from '../../chunk-V5EE5ATH.mjs';
|
|
3
|
+
import '../../chunk-K2VCZK4I.mjs';
|
|
4
|
+
import { cn } from '../../chunk-4D54YOL6.mjs';
|
|
5
|
+
import '../../chunk-J5LGTIGS.mjs';
|
|
6
|
+
import { motion } from 'framer-motion';
|
|
7
|
+
import { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react';
|
|
8
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
// src/ui/speech-synthesizer/animated/animations.ts
|
|
11
|
+
var speechSynthesizerAnimationPresets = {
|
|
12
|
+
none: {
|
|
13
|
+
transition: { duration: 0 },
|
|
14
|
+
variants: {
|
|
15
|
+
initial: { scale: 1 },
|
|
16
|
+
animate: { scale: 1 }
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
pulse: {
|
|
20
|
+
transition: {
|
|
21
|
+
duration: 1,
|
|
22
|
+
repeat: Infinity,
|
|
23
|
+
repeatType: "reverse",
|
|
24
|
+
ease: "easeInOut"
|
|
25
|
+
},
|
|
26
|
+
variants: {
|
|
27
|
+
initial: { scale: 1, opacity: 0.7 },
|
|
28
|
+
animate: { scale: 1.15, opacity: 1 }
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
wave: {
|
|
32
|
+
transition: {
|
|
33
|
+
duration: 0.8,
|
|
34
|
+
repeat: Infinity,
|
|
35
|
+
repeatType: "reverse",
|
|
36
|
+
ease: "easeInOut"
|
|
37
|
+
},
|
|
38
|
+
variants: {
|
|
39
|
+
initial: { scale: 1, rotate: 0 },
|
|
40
|
+
animate: { scale: 1.1, rotate: -5 }
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
glow: {
|
|
44
|
+
transition: {
|
|
45
|
+
duration: 1.5,
|
|
46
|
+
repeat: Infinity,
|
|
47
|
+
repeatType: "reverse",
|
|
48
|
+
ease: "easeInOut"
|
|
49
|
+
},
|
|
50
|
+
variants: {
|
|
51
|
+
initial: {
|
|
52
|
+
boxShadow: "0 0 0px rgba(59,130,246,0)"
|
|
53
|
+
},
|
|
54
|
+
animate: {
|
|
55
|
+
boxShadow: "0 0 20px rgba(59,130,246,0.5)"
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
function DefaultPlayIcon() {
|
|
61
|
+
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
|
|
62
|
+
}
|
|
63
|
+
function DefaultPauseIcon() {
|
|
64
|
+
return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: [
|
|
65
|
+
/* @__PURE__ */ jsx("rect", { x: "6", y: "4", width: "4", height: "16" }),
|
|
66
|
+
/* @__PURE__ */ jsx("rect", { x: "14", y: "4", width: "4", height: "16" })
|
|
67
|
+
] });
|
|
68
|
+
}
|
|
69
|
+
function DefaultStopIcon() {
|
|
70
|
+
return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "size-5", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12" }) });
|
|
71
|
+
}
|
|
72
|
+
function SpeechSynthesizerAnimated({
|
|
73
|
+
appearance,
|
|
74
|
+
size,
|
|
75
|
+
text,
|
|
76
|
+
lang,
|
|
77
|
+
rate = 1,
|
|
78
|
+
pitch = 1,
|
|
79
|
+
volume = 1,
|
|
80
|
+
autoSpeak = false,
|
|
81
|
+
onStart,
|
|
82
|
+
onEnd,
|
|
83
|
+
onError,
|
|
84
|
+
onStateChange,
|
|
85
|
+
renderPlay,
|
|
86
|
+
renderPause,
|
|
87
|
+
renderStop,
|
|
88
|
+
showProgress = false,
|
|
89
|
+
animation = "pulse",
|
|
90
|
+
className,
|
|
91
|
+
children,
|
|
92
|
+
...rest
|
|
93
|
+
}) {
|
|
94
|
+
const [state, setState] = useState("idle");
|
|
95
|
+
const utteranceRef = useRef(null);
|
|
96
|
+
const stateRef = useRef("idle");
|
|
97
|
+
const preset = speechSynthesizerAnimationPresets[animation];
|
|
98
|
+
const setStateSafe = useCallback(
|
|
99
|
+
(newState) => {
|
|
100
|
+
stateRef.current = newState;
|
|
101
|
+
setState(newState);
|
|
102
|
+
onStateChange?.(newState);
|
|
103
|
+
},
|
|
104
|
+
[onStateChange]
|
|
105
|
+
);
|
|
106
|
+
const speak = useCallback(() => {
|
|
107
|
+
if (!text || typeof window === "undefined") return;
|
|
108
|
+
window.speechSynthesis.cancel();
|
|
109
|
+
const utterance = new SpeechSynthesisUtterance(text);
|
|
110
|
+
if (lang) utterance.lang = lang;
|
|
111
|
+
utterance.rate = rate;
|
|
112
|
+
utterance.pitch = pitch;
|
|
113
|
+
utterance.volume = volume;
|
|
114
|
+
utterance.onstart = () => {
|
|
115
|
+
setStateSafe("speaking");
|
|
116
|
+
onStart?.();
|
|
117
|
+
};
|
|
118
|
+
utterance.onend = () => {
|
|
119
|
+
setStateSafe("idle");
|
|
120
|
+
onEnd?.();
|
|
121
|
+
};
|
|
122
|
+
utterance.onerror = (event) => {
|
|
123
|
+
setStateSafe("idle");
|
|
124
|
+
onError?.(event.error);
|
|
125
|
+
};
|
|
126
|
+
utterance.onpause = () => setStateSafe("paused");
|
|
127
|
+
utterance.onresume = () => setStateSafe("speaking");
|
|
128
|
+
utteranceRef.current = utterance;
|
|
129
|
+
window.speechSynthesis.speak(utterance);
|
|
130
|
+
}, [text, lang, rate, pitch, volume, onStart, onEnd, onError, setStateSafe]);
|
|
131
|
+
const pauseFn = useCallback(() => {
|
|
132
|
+
if (typeof window !== "undefined") window.speechSynthesis.pause();
|
|
133
|
+
}, []);
|
|
134
|
+
const resumeFn = useCallback(() => {
|
|
135
|
+
if (typeof window !== "undefined") window.speechSynthesis.resume();
|
|
136
|
+
}, []);
|
|
137
|
+
const stop = useCallback(() => {
|
|
138
|
+
if (typeof window !== "undefined") window.speechSynthesis.cancel();
|
|
139
|
+
setStateSafe("idle");
|
|
140
|
+
}, [setStateSafe]);
|
|
141
|
+
const imperativeHandle = {
|
|
142
|
+
speak,
|
|
143
|
+
pause: pauseFn,
|
|
144
|
+
resume: resumeFn,
|
|
145
|
+
stop,
|
|
146
|
+
get state() {
|
|
147
|
+
return stateRef.current;
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
useImperativeHandle(rest.ref, () => imperativeHandle, [
|
|
151
|
+
speak,
|
|
152
|
+
pauseFn,
|
|
153
|
+
resumeFn,
|
|
154
|
+
stop
|
|
155
|
+
]);
|
|
156
|
+
useEffect(() => {
|
|
157
|
+
if (autoSpeak && text) speak();
|
|
158
|
+
return () => {
|
|
159
|
+
if (typeof window !== "undefined") window.speechSynthesis.cancel();
|
|
160
|
+
};
|
|
161
|
+
}, []);
|
|
162
|
+
const isSpeaking = state === "speaking";
|
|
163
|
+
const isPaused = state === "paused";
|
|
164
|
+
const showPlay = state === "idle" || state === "paused";
|
|
165
|
+
const showPause = state === "speaking";
|
|
166
|
+
return /* @__PURE__ */ jsxs(
|
|
167
|
+
motion.div,
|
|
168
|
+
{
|
|
169
|
+
"data-slot": "speech-synthesizer",
|
|
170
|
+
className: cn(speechSynthesizerVariants({ size }), className),
|
|
171
|
+
...rest,
|
|
172
|
+
children: [
|
|
173
|
+
text && /* @__PURE__ */ jsx(
|
|
174
|
+
motion.p,
|
|
175
|
+
{
|
|
176
|
+
"data-slot": "speech-synthesizer-text",
|
|
177
|
+
className: speechSynthesizerTextClasses,
|
|
178
|
+
initial: "initial",
|
|
179
|
+
animate: isSpeaking ? "animate" : "initial",
|
|
180
|
+
variants: preset.variants,
|
|
181
|
+
transition: preset.transition,
|
|
182
|
+
children: text
|
|
183
|
+
}
|
|
184
|
+
),
|
|
185
|
+
showProgress && isSpeaking && /* @__PURE__ */ jsx(
|
|
186
|
+
motion.div,
|
|
187
|
+
{
|
|
188
|
+
"data-slot": "speech-synthesizer-progress",
|
|
189
|
+
className: speechSynthesizerProgressClasses,
|
|
190
|
+
initial: { scaleX: 0 },
|
|
191
|
+
animate: { scaleX: 1 },
|
|
192
|
+
transition: { duration: 0.3 },
|
|
193
|
+
style: { originX: 0 },
|
|
194
|
+
children: /* @__PURE__ */ jsx(
|
|
195
|
+
"div",
|
|
196
|
+
{
|
|
197
|
+
"data-slot": "speech-synthesizer-progress-bar",
|
|
198
|
+
className: cn(
|
|
199
|
+
speechSynthesizerProgressBarClasses,
|
|
200
|
+
"w-full animate-pulse"
|
|
201
|
+
)
|
|
202
|
+
}
|
|
203
|
+
)
|
|
204
|
+
}
|
|
205
|
+
),
|
|
206
|
+
/* @__PURE__ */ jsxs(
|
|
207
|
+
motion.div,
|
|
208
|
+
{
|
|
209
|
+
"data-slot": "speech-synthesizer-controls",
|
|
210
|
+
className: speechSynthesizerControlsClasses,
|
|
211
|
+
children: [
|
|
212
|
+
showPlay && /* @__PURE__ */ jsx(
|
|
213
|
+
motion.button,
|
|
214
|
+
{
|
|
215
|
+
type: "button",
|
|
216
|
+
"data-slot": "speech-synthesizer-play-btn",
|
|
217
|
+
className: cn(
|
|
218
|
+
speechSynthesizerBtnVariants({ appearance, size }),
|
|
219
|
+
isPaused && speechSynthesizerBtnActiveClasses
|
|
220
|
+
),
|
|
221
|
+
onClick: isPaused ? resumeFn : speak,
|
|
222
|
+
"aria-label": isPaused ? "Resume" : "Play",
|
|
223
|
+
whileHover: { scale: 1.1 },
|
|
224
|
+
whileTap: { scale: 0.9 },
|
|
225
|
+
children: renderPlay ? renderPlay({ isSpeaking, isPaused, state }) : /* @__PURE__ */ jsx(DefaultPlayIcon, {})
|
|
226
|
+
}
|
|
227
|
+
),
|
|
228
|
+
showPause && /* @__PURE__ */ jsx(
|
|
229
|
+
motion.button,
|
|
230
|
+
{
|
|
231
|
+
type: "button",
|
|
232
|
+
"data-slot": "speech-synthesizer-pause-btn",
|
|
233
|
+
className: speechSynthesizerBtnVariants({ appearance, size }),
|
|
234
|
+
onClick: pauseFn,
|
|
235
|
+
"aria-label": "Pause",
|
|
236
|
+
whileHover: { scale: 1.1 },
|
|
237
|
+
whileTap: { scale: 0.9 },
|
|
238
|
+
children: renderPause ? renderPause({ isSpeaking, isPaused, state }) : /* @__PURE__ */ jsx(DefaultPauseIcon, {})
|
|
239
|
+
}
|
|
240
|
+
),
|
|
241
|
+
(isSpeaking || isPaused) && /* @__PURE__ */ jsx(
|
|
242
|
+
motion.button,
|
|
243
|
+
{
|
|
244
|
+
type: "button",
|
|
245
|
+
"data-slot": "speech-synthesizer-stop-btn",
|
|
246
|
+
className: speechSynthesizerBtnVariants({ appearance, size }),
|
|
247
|
+
onClick: stop,
|
|
248
|
+
"aria-label": "Stop",
|
|
249
|
+
whileHover: { scale: 1.1 },
|
|
250
|
+
whileTap: { scale: 0.9 },
|
|
251
|
+
children: renderStop ? renderStop({ isSpeaking, isPaused, state }) : /* @__PURE__ */ jsx(DefaultStopIcon, {})
|
|
252
|
+
}
|
|
253
|
+
)
|
|
254
|
+
]
|
|
255
|
+
}
|
|
256
|
+
),
|
|
257
|
+
children
|
|
258
|
+
]
|
|
259
|
+
}
|
|
260
|
+
);
|
|
261
|
+
}
|
|
262
|
+
SpeechSynthesizerAnimated.displayName = "SpeechSynthesizerAnimated";
|
|
263
|
+
|
|
264
|
+
export { SpeechSynthesizerAnimated, speechSynthesizerAnimationPresets };
|
|
265
|
+
//# sourceMappingURL=animated.mjs.map
|
|
266
|
+
//# sourceMappingURL=animated.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/ui/speech-synthesizer/animated/animations.ts","../../../src/ui/speech-synthesizer/animated/speech-synthesizer-animated.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import type { Transition, Variants } from \"framer-motion\";\n\nexport type SpeechSynthesizerAnimation = \"none\" | \"pulse\" | \"wave\" | \"glow\";\n\nexport type SpeechSynthesizerAnimationPresets = Record<\n SpeechSynthesizerAnimation,\n {\n transition: Transition;\n variants: Variants;\n }\n>;\n\nexport const speechSynthesizerAnimationPresets: SpeechSynthesizerAnimationPresets =\n {\n none: {\n transition: { duration: 0 },\n variants: {\n initial: { scale: 1 },\n animate: { scale: 1 },\n },\n },\n pulse: {\n transition: {\n duration: 1,\n repeat: Infinity,\n repeatType: \"reverse\",\n ease: \"easeInOut\",\n },\n variants: {\n initial: { scale: 1, opacity: 0.7 },\n animate: { scale: 1.15, opacity: 1 },\n },\n },\n wave: {\n transition: {\n duration: 0.8,\n repeat: Infinity,\n repeatType: \"reverse\",\n ease: \"easeInOut\",\n },\n variants: {\n initial: { scale: 1, rotate: 0 },\n animate: { scale: 1.1, rotate: -5 },\n },\n },\n glow: {\n transition: {\n duration: 1.5,\n repeat: Infinity,\n repeatType: \"reverse\",\n ease: \"easeInOut\",\n },\n variants: {\n initial: {\n boxShadow: \"0 0 0px rgba(59,130,246,0)\",\n },\n animate: {\n boxShadow: \"0 0 20px rgba(59,130,246,0.5)\",\n },\n },\n },\n };\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport {\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from \"react\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpeechSynthesizerRef, SpeechSynthesizerState } from \"../types\";\nimport {\n speechSynthesizerBtnActiveClasses,\n speechSynthesizerBtnVariants,\n speechSynthesizerControlsClasses,\n speechSynthesizerProgressBarClasses,\n speechSynthesizerProgressClasses,\n speechSynthesizerTextClasses,\n speechSynthesizerVariants,\n} from \"../variants\";\n\nimport { speechSynthesizerAnimationPresets } from \"./animations\";\nimport type { SpeechSynthesizerAnimatedProps } from \"./types\";\n\nfunction DefaultPlayIcon() {\n return (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-5\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n );\n}\n\nfunction DefaultPauseIcon() {\n return (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-5\">\n <rect x=\"6\" y=\"4\" width=\"4\" height=\"16\" />\n <rect x=\"14\" y=\"4\" width=\"4\" height=\"16\" />\n </svg>\n );\n}\n\nfunction DefaultStopIcon() {\n return (\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-5\">\n <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" />\n </svg>\n );\n}\n\nexport function SpeechSynthesizerAnimated({\n appearance,\n size,\n text,\n lang,\n rate = 1,\n pitch = 1,\n volume = 1,\n autoSpeak = false,\n onStart,\n onEnd,\n onError,\n onStateChange,\n renderPlay,\n renderPause,\n renderStop,\n showProgress = false,\n animation = \"pulse\",\n className,\n children,\n ...rest\n}: SpeechSynthesizerAnimatedProps) {\n const [state, setState] = useState<SpeechSynthesizerState>(\"idle\");\n const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);\n const stateRef = useRef<SpeechSynthesizerState>(\"idle\");\n const preset = speechSynthesizerAnimationPresets[animation];\n\n const setStateSafe = useCallback(\n (newState: SpeechSynthesizerState) => {\n stateRef.current = newState;\n setState(newState);\n onStateChange?.(newState);\n },\n [onStateChange],\n );\n\n const speak = useCallback(() => {\n if (!text || typeof window === \"undefined\") return;\n window.speechSynthesis.cancel();\n\n const utterance = new SpeechSynthesisUtterance(text);\n if (lang) utterance.lang = lang;\n utterance.rate = rate;\n utterance.pitch = pitch;\n utterance.volume = volume;\n\n utterance.onstart = () => {\n setStateSafe(\"speaking\");\n onStart?.();\n };\n utterance.onend = () => {\n setStateSafe(\"idle\");\n onEnd?.();\n };\n utterance.onerror = (event) => {\n setStateSafe(\"idle\");\n onError?.(event.error);\n };\n utterance.onpause = () => setStateSafe(\"paused\");\n utterance.onresume = () => setStateSafe(\"speaking\");\n\n utteranceRef.current = utterance;\n window.speechSynthesis.speak(utterance);\n }, [text, lang, rate, pitch, volume, onStart, onEnd, onError, setStateSafe]);\n\n const pauseFn = useCallback(() => {\n if (typeof window !== \"undefined\") window.speechSynthesis.pause();\n }, []);\n\n const resumeFn = useCallback(() => {\n if (typeof window !== \"undefined\") window.speechSynthesis.resume();\n }, []);\n\n const stop = useCallback(() => {\n if (typeof window !== \"undefined\") window.speechSynthesis.cancel();\n setStateSafe(\"idle\");\n }, [setStateSafe]);\n\n const imperativeHandle: SpeechSynthesizerRef = {\n speak,\n pause: pauseFn,\n resume: resumeFn,\n stop,\n get state() {\n return stateRef.current;\n },\n };\n\n useImperativeHandle((rest as any).ref, () => imperativeHandle, [\n speak,\n pauseFn,\n resumeFn,\n stop,\n ]);\n\n useEffect(() => {\n if (autoSpeak && text) speak();\n return () => {\n if (typeof window !== \"undefined\") window.speechSynthesis.cancel();\n };\n }, []);\n\n const isSpeaking = state === \"speaking\";\n const isPaused = state === \"paused\";\n const showPlay = state === \"idle\" || state === \"paused\";\n const showPause = state === \"speaking\";\n\n return (\n <motion.div\n data-slot=\"speech-synthesizer\"\n className={cn(speechSynthesizerVariants({ size }), className)}\n {...(rest as any)}\n >\n {text && (\n <motion.p\n data-slot=\"speech-synthesizer-text\"\n className={speechSynthesizerTextClasses}\n initial=\"initial\"\n animate={isSpeaking ? \"animate\" : \"initial\"}\n variants={preset.variants}\n transition={preset.transition}\n >\n {text}\n </motion.p>\n )}\n {showProgress && isSpeaking && (\n <motion.div\n data-slot=\"speech-synthesizer-progress\"\n className={speechSynthesizerProgressClasses}\n initial={{ scaleX: 0 }}\n animate={{ scaleX: 1 }}\n transition={{ duration: 0.3 }}\n style={{ originX: 0 }}\n >\n <div\n data-slot=\"speech-synthesizer-progress-bar\"\n className={cn(\n speechSynthesizerProgressBarClasses,\n \"w-full animate-pulse\",\n )}\n />\n </motion.div>\n )}\n <motion.div\n data-slot=\"speech-synthesizer-controls\"\n className={speechSynthesizerControlsClasses}\n >\n {showPlay && (\n <motion.button\n type=\"button\"\n data-slot=\"speech-synthesizer-play-btn\"\n className={cn(\n speechSynthesizerBtnVariants({ appearance, size }),\n isPaused && speechSynthesizerBtnActiveClasses,\n )}\n onClick={isPaused ? resumeFn : speak}\n aria-label={isPaused ? \"Resume\" : \"Play\"}\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n >\n {renderPlay ? (\n renderPlay({ isSpeaking, isPaused, state })\n ) : (\n <DefaultPlayIcon />\n )}\n </motion.button>\n )}\n {showPause && (\n <motion.button\n type=\"button\"\n data-slot=\"speech-synthesizer-pause-btn\"\n className={speechSynthesizerBtnVariants({ appearance, size })}\n onClick={pauseFn}\n aria-label=\"Pause\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n >\n {renderPause ? (\n renderPause({ isSpeaking, isPaused, state })\n ) : (\n <DefaultPauseIcon />\n )}\n </motion.button>\n )}\n {(isSpeaking || isPaused) && (\n <motion.button\n type=\"button\"\n data-slot=\"speech-synthesizer-stop-btn\"\n className={speechSynthesizerBtnVariants({ appearance, size })}\n onClick={stop}\n aria-label=\"Stop\"\n whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 0.9 }}\n >\n {renderStop ? (\n renderStop({ isSpeaking, isPaused, state })\n ) : (\n <DefaultStopIcon />\n )}\n </motion.button>\n )}\n </motion.div>\n {children}\n </motion.div>\n );\n}\n\nSpeechSynthesizerAnimated.displayName = \"SpeechSynthesizerAnimated\";\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { SpeechSynthesizer } from "./speech-synthesizer";
|
|
2
|
+
export type { SpeechSynthesizerBaseProps, SpeechSynthesizerProps, SpeechSynthesizerRef, SpeechSynthesizerState, SpeechSynthesizerVariantProps, } from "./types";
|
|
3
|
+
export { speechSynthesizerBtnVariants, speechSynthesizerVariants, } from "./variants";
|
|
4
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/speech-synthesizer/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EACV,0BAA0B,EAC1B,sBAAsB,EACtB,oBAAoB,EACpB,sBAAsB,EACtB,6BAA6B,GAC9B,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { SpeechSynthesizerBaseProps } from "./types";
|
|
2
|
+
export declare function SpeechSynthesizerBase({ appearance, size, text, lang, rate, pitch, volume, autoSpeak, onStart, onEnd, onError, onStateChange, renderPlay, renderPause, renderStop, showProgress, className, children, ...rest }: SpeechSynthesizerBaseProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare namespace SpeechSynthesizerBase {
|
|
4
|
+
var displayName: string;
|
|
5
|
+
}
|
|
6
|
+
//# sourceMappingURL=speech-synthesizer-base.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"speech-synthesizer-base.d.ts","sourceRoot":"","sources":["../../../src/ui/speech-synthesizer/speech-synthesizer-base.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,0BAA0B,EAG3B,MAAM,SAAS,CAAC;AAoCjB,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAQ,EACR,KAAS,EACT,MAAU,EACV,SAAiB,EACjB,OAAO,EACP,KAAK,EACL,OAAO,EACP,aAAa,EACb,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,0BAA0B,2CAoL5B;yBAxMe,qBAAqB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"speech-synthesizer.d.ts","sourceRoot":"","sources":["../../../src/ui/speech-synthesizer/speech-synthesizer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAC"}
|