@voiceinput/react 0.1.0-beta.1

package/dist/index.cjs

@@ -0,0 +1,701 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let _voiceinput_core = require("@voiceinput/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/coordinator.ts
+var VoiceInputCoordinator = class {
+	#active;
+	#requested;
+	#generation = 0;
+	#queue = Promise.resolve();
+	activate(session) {
+		const generation = ++this.#generation;
+		this.#requested = session;
+		const activation = this.#queue.then(async () => {
+			if (!this.#isCurrentRequest(session, generation)) return false;
+			const previous = this.#active;
+			if (previous !== void 0 && previous !== session) {
+				try {
+					await previous.stop("replaced");
+				} catch (error) {
+					reportUnhandledError(error);
+				}
+				if (this.#active === previous) this.#active = void 0;
+			}
+			if (!this.#isCurrentRequest(session, generation)) return false;
+			this.#active = session;
+			return true;
+		});
+		this.#queue = activation.then(() => {}, () => {});
+		return activation;
+	}
+	release(session) {
+		this.cancel(session);
+		if (this.#active === session) this.#active = void 0;
+	}
+	cancel(session) {
+		if (this.#requested === session) {
+			this.#requested = void 0;
+			this.#generation += 1;
+		}
+	}
+	#isCurrentRequest(session, generation) {
+		return this.#requested === session && this.#generation === generation;
+	}
+};
+function reportUnhandledError(error) {
+	const reportError = globalThis.reportError;
+	reportError?.(error);
+}
+//#endregion
+//#region src/context.tsx
+const VoiceInputContext = (0, react.createContext)(null);
+function VoiceInputProvider({ provider, audioSource, children }) {
+	const browserAudioSource = (0, react.useMemo)(() => (0, _voiceinput_core.createBrowserAudioSource)(), []);
+	const resolvedAudioSource = audioSource ?? browserAudioSource;
+	const coordinator = (0, react.useMemo)(() => new VoiceInputCoordinator(), []);
+	const value = (0, react.useMemo)(() => ({
+		provider,
+		audioSource: resolvedAudioSource,
+		coordinator
+	}), [
+		coordinator,
+		provider,
+		resolvedAudioSource
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceInputContext.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/use-voice-input.ts
+const ACTIVE_KEYS = /* @__PURE__ */ new Set(["Enter", " "]);
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function useVoiceInput(options = {}) {
+	return useVoiceInputInternal(options);
+}
+function useVoiceInputInternal(options = {}, dispatchInput = false) {
+	const context = (0, react.useContext)(VoiceInputContext);
+	const provider = options.provider ?? context?.provider;
+	if (provider === void 0) throw new _voiceinput_core.VoiceInputError({
+		code: "invalid-configuration",
+		message: "useVoiceInput requires a provider option or a parent VoiceInputProvider."
+	});
+	const controlled = options.value !== void 0 || options.onValueChange !== void 0;
+	if (controlled && (typeof options.value !== "string" || typeof options.onValueChange !== "function")) throw new _voiceinput_core.VoiceInputError({
+		code: "invalid-configuration",
+		message: "Controlled voice input requires both value and onValueChange options."
+	});
+	if ((0, react.useRef)(controlled).current !== controlled) throw new _voiceinput_core.VoiceInputError({
+		code: "invalid-configuration",
+		message: "A voice field cannot switch between controlled and uncontrolled modes. Remount it with a new key."
+	});
+	const latest = (0, react.useRef)(options);
+	latest.current = options;
+	const disabled = options.disabled ?? false;
+	const disabledRef = (0, react.useRef)(disabled);
+	disabledRef.current = disabled;
+	const disposedRef = (0, react.useRef)(false);
+	const selectionCapturedRef = (0, react.useRef)(false);
+	const heldPointerRef = (0, react.useRef)(null);
+	const heldKeyRef = (0, react.useRef)(null);
+	const targetNodeRef = (0, react.useRef)(null);
+	const browserAudioSource = (0, react.useMemo)(() => (0, _voiceinput_core.createBrowserAudioSource)(), []);
+	const audioSource = options.audioSource ?? context?.audioSource ?? browserAudioSource;
+	const standaloneCoordinator = (0, react.useMemo)(() => new VoiceInputCoordinator(), []);
+	const coordinator = context?.coordinator ?? standaloneCoordinator;
+	const vocabularyKey = JSON.stringify(options.vocabulary ?? null);
+	const vocabulary = (0, react.useMemo)(() => options.vocabulary === void 0 ? void 0 : [...options.vocabulary], [vocabularyKey]);
+	const endpointingKey = JSON.stringify(options.endpointing ?? null);
+	const endpointing = (0, react.useMemo)(() => typeof options.endpointing === "object" ? { ...options.endpointing } : options.endpointing, [endpointingKey]);
+	const hasTransform = options.transformTranscript !== void 0;
+	const [textEngine] = (0, react.useState)(() => {
+		return (0, _voiceinput_core.createVoiceInputTextEngine)({
+			...controlled ? { controlled: {
+				getValue: () => latest.current.value ?? "",
+				dispatchInput,
+				onValueChange: (value) => latest.current.onValueChange?.(value)
+			} } : {},
+			...options.interimBehavior === void 0 ? {} : { interimBehavior: options.interimBehavior },
+			...!hasTransform ? {} : { transformTranscript: (text) => {
+				const transform = latest.current.transformTranscript;
+				if (transform === void 0) throw new TypeError("transformTranscript is unavailable.");
+				return transform(text);
+			} },
+			...options.transformTimeoutMs === void 0 ? {} : { transformTimeoutMs: options.transformTimeoutMs }
+		});
+	});
+	const [session] = (0, react.useState)(() => (0, _voiceinput_core.createVoiceInputSession)({
+		provider,
+		audioSource,
+		textEngine
+	}));
+	useIsomorphicLayoutEffect(() => {
+		textEngine.updateOptions({
+			...options.interimBehavior === void 0 ? {} : { interimBehavior: options.interimBehavior },
+			...options.transformTranscript === void 0 ? {} : { transformTranscript: options.transformTranscript },
+			...options.transformTimeoutMs === void 0 ? {} : { transformTimeoutMs: options.transformTimeoutMs }
+		});
+		session.updateOptions({
+			provider,
+			audioSource,
+			...options.language === void 0 ? {} : { language: options.language },
+			...vocabulary === void 0 ? {} : { vocabulary },
+			...endpointing === void 0 ? {} : { endpointing },
+			...options.maxDurationMs === void 0 ? {} : { maxDurationMs: options.maxDurationMs },
+			...options.connectionTimeoutMs === void 0 ? {} : { connectionTimeoutMs: options.connectionTimeoutMs }
+		});
+	}, [
+		session,
+		provider,
+		audioSource,
+		textEngine,
+		options.language,
+		vocabulary,
+		endpointing,
+		options.maxDurationMs,
+		options.connectionTimeoutMs,
+		options.interimBehavior,
+		options.transformTranscript,
+		options.transformTimeoutMs
+	]);
+	const currentTextEngineRef = (0, react.useRef)(textEngine);
+	currentTextEngineRef.current = textEngine;
+	const undo = (0, react.useCallback)(() => textEngine.undo(), [textEngine]);
+	const redo = (0, react.useCallback)(() => textEngine.redo(), [textEngine]);
+	const getTextSnapshot = (0, react.useCallback)(() => textEngine.getSnapshot(), [textEngine]);
+	(0, react.useEffect)(() => () => {
+		queueMicrotask(() => {
+			if (disposedRef.current || currentTextEngineRef.current !== textEngine) textEngine.destroy();
+		});
+	}, [textEngine]);
+	const coordinatedSession = (0, react.useMemo)(() => ({ stop: (reason) => session.stop(reason) }), [session]);
+	const subscribe = (0, react.useCallback)((listener) => session.subscribe(() => listener()), [session]);
+	const getSnapshot = (0, react.useCallback)(() => session.getSnapshot(), [session]);
+	const snapshot = (0, react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+	const [isSupported, setIsSupported] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		setIsSupported((0, _voiceinput_core.getBrowserVoiceInputSupport)().isSupported);
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		if (controlled) textEngine.reconcileControlledValue(latest.current.value ?? "");
+	}, [
+		controlled,
+		options.value,
+		textEngine
+	]);
+	(0, react.useEffect)(() => {
+		return session.subscribe((event) => {
+			dispatchCallback(latest.current, event);
+			if (event.type === "status-change" && event.status === "error" || event.type === "stop" || event.type === "cancel") coordinator.release(coordinatedSession);
+		});
+	}, [
+		coordinatedSession,
+		coordinator,
+		session
+	]);
+	const captureSelection = (0, react.useCallback)(() => {
+		selectionCapturedRef.current = textEngine.captureSelection() !== null;
+	}, [textEngine]);
+	const startInternal = (0, react.useCallback)(async (capture = true) => {
+		if (disabledRef.current || disposedRef.current || targetNodeRef.current !== null && !textEngine.isWritable()) return;
+		if (capture && !selectionCapturedRef.current) captureSelection();
+		selectionCapturedRef.current = false;
+		if (!await coordinator.activate(coordinatedSession)) return;
+		if (disabledRef.current || disposedRef.current || targetNodeRef.current !== null && !textEngine.isWritable()) {
+			coordinator.release(coordinatedSession);
+			return;
+		}
+		await session.start();
+		const status = session.getSnapshot().status;
+		if (status === "idle" || status === "error") coordinator.release(coordinatedSession);
+	}, [
+		captureSelection,
+		coordinatedSession,
+		coordinator,
+		session,
+		textEngine
+	]);
+	const start = (0, react.useCallback)(() => startInternal(true), [startInternal]);
+	const stop = (0, react.useCallback)(async (reason = "user") => {
+		await session.stop(reason);
+		coordinator.release(coordinatedSession);
+	}, [
+		coordinatedSession,
+		coordinator,
+		session
+	]);
+	const cancel = (0, react.useCallback)(async () => {
+		await session.cancel();
+		coordinator.release(coordinatedSession);
+	}, [
+		coordinatedSession,
+		coordinator,
+		session
+	]);
+	const toggle = (0, react.useCallback)(async () => {
+		const status = session.getSnapshot().status;
+		if (status === "idle" || status === "error") await startInternal(true);
+		else await stop();
+	}, [
+		session,
+		startInternal,
+		stop
+	]);
+	const targetRef = (0, react.useCallback)((target) => {
+		const previousTarget = targetNodeRef.current;
+		targetNodeRef.current = target;
+		if (target === null && previousTarget !== null) stop("replaced");
+		textEngine.setTarget(target);
+	}, [stop, textEngine]);
+	(0, react.useEffect)(() => {
+		disposedRef.current = false;
+		return () => {
+			disposedRef.current = true;
+			coordinator.cancel(coordinatedSession);
+			session.stop("replaced").then(() => coordinator.release(coordinatedSession), () => coordinator.release(coordinatedSession));
+		};
+	}, [
+		coordinatedSession,
+		coordinator,
+		session
+	]);
+	const releaseHold = (0, react.useCallback)(() => {
+		if (heldPointerRef.current === null && heldKeyRef.current === null) return;
+		heldPointerRef.current = null;
+		heldKeyRef.current = null;
+		stop();
+	}, [stop]);
+	(0, react.useEffect)(() => {
+		if (disabled) releaseHold();
+	}, [disabled, releaseHold]);
+	(0, react.useEffect)(() => {
+		window.addEventListener("blur", releaseHold);
+		return () => window.removeEventListener("blur", releaseHold);
+	}, [releaseHold]);
+	const [targetWritable, setTargetWritable] = (0, react.useState)(true);
+	useIsomorphicLayoutEffect(() => {
+		const target = targetNodeRef.current;
+		const update = () => setTargetWritable(target === null || textEngine.isWritable());
+		update();
+		if (target === null) return;
+		const observer = new MutationObserver(update);
+		observer.observe(target, {
+			attributes: true,
+			attributeFilter: [
+				"disabled",
+				"readonly",
+				"type"
+			]
+		});
+		for (let ancestor = target.parentElement; ancestor; ancestor = ancestor.parentElement) observer.observe(ancestor, {
+			attributes: true,
+			attributeFilter: ["disabled"]
+		});
+		return () => observer.disconnect();
+	});
+	(0, react.useEffect)(() => {
+		if (disabled || !targetWritable) stop("target-unavailable");
+	}, [
+		disabled,
+		targetWritable,
+		stop
+	]);
+	const resolvedDisabled = disabled || !targetWritable || !isSupported;
+	const active = snapshot.status !== "idle" && snapshot.status !== "error";
+	const activationMode = options.activationMode ?? "toggle";
+	const triggerProps = (0, react.useMemo)(() => ({
+		type: "button",
+		disabled: resolvedDisabled,
+		"aria-pressed": active,
+		onPointerDown(event) {
+			if (resolvedDisabled || event.button !== 0) return;
+			event.preventDefault();
+			if (isStartable(session.getSnapshot().status)) captureSelection();
+			if (activationMode === "hold") {
+				heldPointerRef.current = event.pointerId;
+				try {
+					event.currentTarget.setPointerCapture?.(event.pointerId);
+				} catch {}
+				startInternal(false);
+			}
+		},
+		onPointerUp(event) {
+			if (activationMode === "hold" && heldPointerRef.current === event.pointerId) {
+				heldPointerRef.current = null;
+				try {
+					event.currentTarget.releasePointerCapture?.(event.pointerId);
+				} catch {}
+				stop();
+			}
+		},
+		onPointerCancel(event) {
+			if (activationMode === "hold" && heldPointerRef.current === event.pointerId) {
+				heldPointerRef.current = null;
+				stop();
+			}
+		},
+		onLostPointerCapture() {
+			releaseHold();
+		},
+		onBlur() {
+			if (heldKeyRef.current !== null) releaseHold();
+		},
+		onClick(event) {
+			if (resolvedDisabled || activationMode === "hold") {
+				event.preventDefault();
+				return;
+			}
+			toggle();
+		},
+		onKeyDown(event) {
+			if (resolvedDisabled || !ACTIVE_KEYS.has(event.key) || event.repeat) return;
+			if (isStartable(session.getSnapshot().status)) captureSelection();
+			if (activationMode === "hold") {
+				event.preventDefault();
+				heldKeyRef.current = event.key;
+				startInternal(false);
+			}
+		},
+		onKeyUp(event) {
+			if (activationMode === "hold" && heldKeyRef.current === event.key) {
+				event.preventDefault();
+				heldKeyRef.current = null;
+				stop();
+			}
+		}
+	}), [
+		activationMode,
+		active,
+		captureSelection,
+		releaseHold,
+		resolvedDisabled,
+		session,
+		startInternal,
+		stop,
+		toggle
+	]);
+	const getTriggerProps = (0, react.useCallback)((props = {}) => composeTriggerProps(triggerProps, props), [triggerProps]);
+	return (0, react.useMemo)(() => ({
+		...snapshot,
+		targetRef,
+		triggerProps,
+		getTriggerProps,
+		isSupported,
+		getTextSnapshot,
+		undo,
+		redo,
+		start,
+		stop,
+		cancel,
+		toggle
+	}), [
+		cancel,
+		getTriggerProps,
+		getTextSnapshot,
+		undo,
+		redo,
+		isSupported,
+		snapshot,
+		start,
+		stop,
+		targetRef,
+		toggle,
+		triggerProps
+	]);
+}
+function composeTriggerProps(trigger, props) {
+	return {
+		...props,
+		type: props.type ?? trigger.type,
+		disabled: props.disabled === true || trigger.disabled,
+		"aria-pressed": trigger["aria-pressed"],
+		onBlur: composeEventHandlers$1(props.onBlur, trigger.onBlur),
+		onClick: composeEventHandlers$1(props.onClick, trigger.onClick),
+		onKeyDown: composeEventHandlers$1(props.onKeyDown, trigger.onKeyDown),
+		onKeyUp: composeEventHandlers$1(props.onKeyUp, trigger.onKeyUp),
+		onLostPointerCapture: composeEventHandlers$1(props.onLostPointerCapture, trigger.onLostPointerCapture),
+		onPointerCancel: composeEventHandlers$1(props.onPointerCancel, trigger.onPointerCancel),
+		onPointerDown: composeEventHandlers$1(props.onPointerDown, trigger.onPointerDown),
+		onPointerUp: composeEventHandlers$1(props.onPointerUp, trigger.onPointerUp)
+	};
+}
+function composeEventHandlers$1(consumer, internal) {
+	return (event) => {
+		consumer?.(event);
+		if (!event.defaultPrevented) internal(event);
+	};
+}
+function isStartable(status) {
+	return status === "idle" || status === "error";
+}
+function dispatchCallback(callbacks, event) {
+	callbacks.onEvent?.(event);
+	switch (event.type) {
+		case "status-change":
+			callbacks.onStatusChange?.(event.status, event.previousStatus);
+			break;
+		case "interim":
+			callbacks.onInterimTranscript?.(event.text);
+			if (event.transcriptChanged) callbacks.onTranscriptChange?.(event.transcript);
+			break;
+		case "final":
+			callbacks.onFinalTranscriptPart?.(event.text);
+			if (event.finalTranscriptChanged) callbacks.onFinalTranscript?.(event.transcript);
+			if (event.transcriptChanged) callbacks.onTranscriptChange?.(event.transcript);
+			break;
+		case "text-limit":
+			callbacks.onTextLimit?.(event);
+			break;
+		case "duration-warning":
+			callbacks.onDurationWarning?.(event.remainingMs, event.maxDurationMs);
+			break;
+		case "stop":
+			callbacks.onStop?.(event.reason);
+			break;
+		case "error": callbacks.onError?.(event.error);
+	}
+}
+//#endregion
+//#region src/components.tsx
+const visuallyHiddenStyle = {
+	border: 0,
+	clip: "rect(0 0 0 0)",
+	clipPath: "inset(50%)",
+	height: 1,
+	margin: -1,
+	overflow: "hidden",
+	padding: 0,
+	position: "absolute",
+	whiteSpace: "nowrap",
+	width: 1
+};
+const VoiceButton = /* @__PURE__ */ (0, react.forwardRef)(function VoiceButton({ voice: options, ...props }, forwardedRef) {
+	const voice = useVoiceInput({
+		...options,
+		disabled: props.disabled === true || options?.disabled === true
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceButtonElement, {
+		...props,
+		ref: forwardedRef,
+		voice
+	});
+});
+const VoiceInput = /* @__PURE__ */ (0, react.forwardRef)(function VoiceInput({ className, containerClassName, disabled, readOnly, onChange, onValueChange, type = "text", value, voice: options, voiceButtonProps, ...props }, forwardedRef) {
+	const voice = useVoiceField({
+		disabled: disabled === true || readOnly === true || voiceButtonProps?.disabled === true,
+		onValueChange,
+		options,
+		value
+	});
+	const targetRef = useComposedTargetRef(voice, forwardedRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: joinClassNames("voiceinput-field", containerClassName),
+		...voiceDataAttributes(voice),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			...props,
+			ref: targetRef,
+			className: joinClassNames("voiceinput-field__input", className),
+			disabled,
+			readOnly,
+			onChange: (event) => {
+				onValueChange?.(event.currentTarget.value);
+				onChange?.(event);
+			},
+			type,
+			value
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceButtonElement, {
+			...voiceButtonProps,
+			className: joinClassNames("voiceinput-field__button", voiceButtonProps?.className),
+			voice
+		})]
+	});
+});
+const VoiceTextarea = /* @__PURE__ */ (0, react.forwardRef)(function VoiceTextarea({ className, containerClassName, disabled, readOnly, onChange, onValueChange, value, voice: options, voiceButtonProps, ...props }, forwardedRef) {
+	const voice = useVoiceField({
+		disabled: disabled === true || readOnly === true || voiceButtonProps?.disabled === true,
+		onValueChange,
+		options,
+		value
+	});
+	const targetRef = useComposedTargetRef(voice, forwardedRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: joinClassNames("voiceinput-field voiceinput-field--textarea", containerClassName),
+		...voiceDataAttributes(voice),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			...props,
+			ref: targetRef,
+			className: joinClassNames("voiceinput-field__input", className),
+			disabled,
+			readOnly,
+			onChange: (event) => {
+				onValueChange?.(event.currentTarget.value);
+				onChange?.(event);
+			},
+			value
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VoiceButtonElement, {
+			...voiceButtonProps,
+			className: joinClassNames("voiceinput-field__button", voiceButtonProps?.className),
+			voice
+		})]
+	});
+});
+const VoiceButtonElement = /* @__PURE__ */ (0, react.forwardRef)(function VoiceButtonElement({ announce = true, children, className, disabled, getAnnouncement = defaultAnnouncement, onBlur, onClick, onKeyDown, onKeyUp, onLostPointerCapture, onPointerCancel, onPointerDown, onPointerUp, type, voice, ...props }, forwardedRef) {
+	const announcementId = (0, react.useId)();
+	const active = isActive(voice);
+	const label = defaultButtonLabel(voice);
+	const describedBy = [props["aria-describedby"], announce && announcementId].filter(Boolean).join(" ");
+	const trigger = voice.triggerProps;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...props,
+		...voiceDataAttributes(voice),
+		ref: forwardedRef,
+		"aria-describedby": describedBy || void 0,
+		"aria-label": props["aria-label"] ?? label,
+		"aria-pressed": trigger["aria-pressed"],
+		className: joinClassNames("voiceinput-button", className),
+		disabled: disabled === true || trigger.disabled,
+		type: type ?? trigger.type,
+		onBlur: composeEventHandlers(onBlur, trigger.onBlur),
+		onClick: composeEventHandlers(onClick, trigger.onClick),
+		onKeyDown: composeEventHandlers(onKeyDown, trigger.onKeyDown),
+		onKeyUp: composeEventHandlers(onKeyUp, trigger.onKeyUp),
+		onLostPointerCapture: composeEventHandlers(onLostPointerCapture, trigger.onLostPointerCapture),
+		onPointerCancel: composeEventHandlers(onPointerCancel, trigger.onPointerCancel),
+		onPointerDown: composeEventHandlers(onPointerDown, trigger.onPointerDown),
+		onPointerUp: composeEventHandlers(onPointerUp, trigger.onPointerUp),
+		children: typeof children === "function" ? children(voice) : children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultButtonContent, {
+			active,
+			label
+		})
+	}), announce ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		id: announcementId,
+		"aria-live": voice.error === null ? "polite" : "assertive",
+		className: "voiceinput-sr-only",
+		role: voice.error === null ? "status" : "alert",
+		style: visuallyHiddenStyle,
+		children: getAnnouncement(voice)
+	}) : null] });
+});
+function DefaultButtonContent({ active, label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"aria-hidden": "true",
+		className: "voiceinput-button__icon",
+		children: active ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MicrophoneIcon, {})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "voiceinput-button__label",
+		children: label
+	})] });
+}
+function MicrophoneIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		viewBox: "0 0 24 24",
+		width: "18",
+		height: "18",
+		fill: "none",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M12 3a3 3 0 0 0-3 3v6a3 3 0 1 0 6 0V6a3 3 0 0 0-3-3Z",
+			fill: "currentColor"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M6.5 11.5a5.5 5.5 0 0 0 11 0M12 17v4m-3 0h6",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function StopIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		viewBox: "0 0 24 24",
+		width: "18",
+		height: "18",
+		fill: "none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			x: "6",
+			y: "6",
+			width: "12",
+			height: "12",
+			rx: "2",
+			fill: "currentColor"
+		})
+	});
+}
+function useVoiceField(options) {
+	const controlled = options.value !== void 0 || options.onValueChange !== void 0;
+	return useVoiceInputInternal({
+		...options.options,
+		disabled: options.disabled === true || options.options?.disabled === true,
+		...controlled && options.value !== void 0 ? { value: options.value } : {},
+		...controlled && options.onValueChange !== void 0 ? { onValueChange: options.onValueChange } : {}
+	}, true);
+}
+function useComposedTargetRef(voice, forwardedRef) {
+	const { targetRef } = voice;
+	const nodeRef = (0, react.useRef)(null);
+	(0, react.useImperativeHandle)(forwardedRef, () => nodeRef.current, []);
+	return (0, react.useCallback)((node) => {
+		nodeRef.current = node;
+		targetRef(node);
+	}, [targetRef]);
+}
+function voiceDataAttributes(voice) {
+	return {
+		"data-voiceinput-active": String(isActive(voice)),
+		"data-voiceinput-error": voice.error?.code ?? "",
+		"data-voiceinput-status": voice.status,
+		"data-voiceinput-supported": String(voice.isSupported)
+	};
+}
+function isActive(voice) {
+	return voice.status !== "error" && voice.status !== "idle";
+}
+function defaultButtonLabel(voice) {
+	if (!voice.isSupported) return "Voice input unavailable";
+	switch (voice.status) {
+		case "requesting-permission": return "Requesting access";
+		case "connecting": return "Connecting";
+		case "listening": return "Stop voice input";
+		case "stopping": return "Finishing";
+		case "processing": return "Processing";
+		case "error":
+		case "idle": return "Start voice input";
+	}
+}
+function defaultAnnouncement(voice) {
+	if (!voice.isSupported) return "Voice input is unavailable in this browser.";
+	if (voice.error !== null) return `Voice input error: ${voice.error.message}`;
+	switch (voice.status) {
+		case "idle": return "Voice input ready.";
+		case "requesting-permission": return "Requesting microphone permission.";
+		case "connecting": return "Connecting voice input.";
+		case "listening": return "Voice input is listening.";
+		case "stopping": return "Finishing voice input.";
+		case "processing": return "Processing the transcript.";
+		case "error": return "Voice input stopped with an error.";
+	}
+}
+function composeEventHandlers(consumer, internal) {
+	return (event) => {
+		consumer?.(event);
+		if (!event.defaultPrevented) internal(event);
+	};
+}
+function joinClassNames(...values) {
+	return values.filter(Boolean).join(" ");
+}
+//#endregion
+exports.VoiceButton = VoiceButton;
+exports.VoiceInput = VoiceInput;
+Object.defineProperty(exports, "VoiceInputError", {
+	enumerable: true,
+	get: function() {
+		return _voiceinput_core.VoiceInputError;
+	}
+});
+exports.VoiceInputProvider = VoiceInputProvider;
+exports.VoiceTextarea = VoiceTextarea;
+exports.useVoiceInput = useVoiceInput;
+
+//# sourceMappingURL=index.cjs.map