@envive-ai/react-toolkit-v3 0.3.21 → 0.3.23

package/dist/TextField/TextField.js

@@ -1,10 +1,13 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
 import { resolveTheme } from "../utils/resolveTheme.js";
 import { TextFieldComponents } from "./components/index.js";
+import { useGetMicButtonContainerProperties } from "./hooks/useGetMicButtonContainerProperties.js";
 import { useGetSkeletonProperties } from "./hooks/useGetSkeletonProperties.js";
 import { useTextFieldFocus } from "./hooks/useTextFieldFocus.js";
 import { useTextFieldSubmit } from "./hooks/useTextFieldSubmit.js";
 import { useTextFieldValue } from "./hooks/useTextFieldValue.js";
+import { useVoiceInput } from "./hooks/useVoiceInput.js";
+import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 
@@ -13,13 +16,27 @@ import classNames from "classnames";
 * Renders a text input field with a send icon.
 * Supports three visual themes: Standard, Modern, and Minimal.
 */
-const TextField = ({ theme = Theme.GLOBAL_CUSTOM, placeholder, value: controlledValue, onChange, onSubmit, onFocus, disabled = false, id, testId, className, style, ariaLabel, isLoading = false }) => {
+const TextField = ({ theme = Theme.GLOBAL_CUSTOM, placeholder, value: controlledValue, onChange, onSubmit, onFocus, disabled = false, id, testId, className, inputClassName, style, ariaLabel, isLoading = false, enableVoiceInput = false, onTranscriptionStarted, onTranscriptionCompleted }) => {
 	const { currentValue, hasValue, handleChange, resetValue } = useTextFieldValue(controlledValue, onChange);
 	const { isFocused, handleFocus, handleBlur } = useTextFieldFocus();
 	const { handleSubmit, handleKeyDown } = useTextFieldSubmit(onSubmit, hasValue, disabled, isLoading, currentValue, resetValue);
+	const { isListening, handleToggleListening, handleAbortListening, browserSupportsSpeechRecognition } = useVoiceInput({
+		onTranscriptionStarted,
+		onTranscriptionCompleted: useCallback((transcript) => {
+			resetValue();
+			handleChange(transcript);
+			onTranscriptionCompleted?.(transcript);
+		}, [
+			handleChange,
+			resetValue,
+			onTranscriptionCompleted
+		]),
+		disabled
+	});
 	const handleInternalFocus = () => {
 		handleFocus();
 		onFocus?.();
+		handleAbortListening();
 	};
 	const { skeletonClass } = useGetSkeletonProperties(isLoading);
 	const resolvedTheme = resolveTheme(theme);
@@ -32,7 +49,8 @@ const TextField = ({ theme = Theme.GLOBAL_CUSTOM, placeholder, value: controlled
 		onFocus: handleInternalFocus,
 		onBlur: handleBlur,
 		disabled: disabled || isLoading,
-		ariaLabel
+		ariaLabel,
+		className: inputClassName
 	});
 	const sendIcon = !isLoading ? /* @__PURE__ */ jsx(TextFieldComponents.SendIcon, {
 		theme: resolvedTheme,
@@ -41,10 +59,24 @@ const TextField = ({ theme = Theme.GLOBAL_CUSTOM, placeholder, value: controlled
 		onClick: handleSubmit,
 		ariaLabel
 	}) : null;
+	const { micButtonContainerClasses } = useGetMicButtonContainerProperties({
+		theme: resolvedTheme,
+		isListening
+	});
+	const voiceInputButtonClassName = classNames(micButtonContainerClasses, skeletonClass);
+	const voiceInputButton = enableVoiceInput && browserSupportsSpeechRecognition ? /* @__PURE__ */ jsx(TextFieldComponents.VoiceInputButton, {
+		theme: resolvedTheme,
+		isListening,
+		onToggleListening: handleToggleListening,
+		ariaLabel,
+		isLoading,
+		className: voiceInputButtonClassName
+	}) : null;
 	return /* @__PURE__ */ jsx(TextFieldComponents.Layout, {
 		theme: resolvedTheme,
 		input,
 		sendIcon,
+		voiceInputButton,
 		isFocused,
 		hasValue,
 		disabled,

package/dist/TextField/components/Layout.cjs

@@ -6,15 +6,18 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/components/TextField/components/Layout.tsx
-const Layout = ({ theme, input, sendIcon, isFocused, hasValue, disabled = false, id, testId, className, style }) => {
+const Layout = ({ theme, input, sendIcon, voiceInputButton, isFocused, hasValue, disabled = false, id, testId, className, style }) => {
 	const { containerLayoutClasses, containerDefaultClasses, containerBorderClasses, containerBorderActiveClasses, containerFocusClasses, containerHoverClasses, containerDisabledClasses } = require_useGetContainerProperties.useGetContainerProperties({ theme });
-	const { isActive, shouldShowFocus, shouldShowHover } = require_getLayoutStateProperties.getLayoutStateProperties(hasValue, isFocused, disabled);
+	const { isActive, shouldShowFocus, shouldShowHover, containerClasses } = require_getLayoutStateProperties.getLayoutStateProperties(theme, hasValue, isFocused, disabled);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		id,
-		"data-testid": testId,
-		className: (0, classnames.default)(containerLayoutClasses, containerDefaultClasses, isActive ? containerBorderActiveClasses : containerBorderClasses, shouldShowFocus && containerFocusClasses, shouldShowHover && containerHoverClasses, disabled && containerDisabledClasses, className),
-		style,
-		children: [input, sendIcon]
+		className: containerClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			id,
+			"data-testid": testId,
+			className: (0, classnames.default)("envive-tw-flex-1", containerLayoutClasses, containerDefaultClasses, isActive ? containerBorderActiveClasses : containerBorderClasses, shouldShowFocus && containerFocusClasses, shouldShowHover && containerHoverClasses, disabled && containerDisabledClasses, className),
+			style,
+			children: [input, sendIcon]
+		}), voiceInputButton]
 	});
 };
 

package/dist/TextField/components/Layout.js

@@ -4,15 +4,18 @@ import { jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 
 //#region src/components/TextField/components/Layout.tsx
-const Layout = ({ theme, input, sendIcon, isFocused, hasValue, disabled = false, id, testId, className, style }) => {
+const Layout = ({ theme, input, sendIcon, voiceInputButton, isFocused, hasValue, disabled = false, id, testId, className, style }) => {
 	const { containerLayoutClasses, containerDefaultClasses, containerBorderClasses, containerBorderActiveClasses, containerFocusClasses, containerHoverClasses, containerDisabledClasses } = useGetContainerProperties({ theme });
-	const { isActive, shouldShowFocus, shouldShowHover } = getLayoutStateProperties(hasValue, isFocused, disabled);
+	const { isActive, shouldShowFocus, shouldShowHover, containerClasses } = getLayoutStateProperties(theme, hasValue, isFocused, disabled);
 	return /* @__PURE__ */ jsxs("div", {
-		id,
-		"data-testid": testId,
-		className: classNames(containerLayoutClasses, containerDefaultClasses, isActive ? containerBorderActiveClasses : containerBorderClasses, shouldShowFocus && containerFocusClasses, shouldShowHover && containerHoverClasses, disabled && containerDisabledClasses, className),
-		style,
-		children: [input, sendIcon]
+		className: containerClasses,
+		children: [/* @__PURE__ */ jsxs("div", {
+			id,
+			"data-testid": testId,
+			className: classNames("envive-tw-flex-1", containerLayoutClasses, containerDefaultClasses, isActive ? containerBorderActiveClasses : containerBorderClasses, shouldShowFocus && containerFocusClasses, shouldShowHover && containerHoverClasses, disabled && containerDisabledClasses, className),
+			style,
+			children: [input, sendIcon]
+		}), voiceInputButton]
 	});
 };
 

package/dist/TextField/components/VoiceInputButton.cjs

@@ -0,0 +1,45 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_icons_Mic = require("@envive-ai/react-icons/Mic");
+__envive_ai_react_icons_Mic = require_rolldown_runtime.__toESM(__envive_ai_react_icons_Mic);
+let __envive_ai_react_icons_MicThin = require("@envive-ai/react-icons/MicThin");
+__envive_ai_react_icons_MicThin = require_rolldown_runtime.__toESM(__envive_ai_react_icons_MicThin);
+let __envive_ai_react_icons_Stop = require("@envive-ai/react-icons/Stop");
+__envive_ai_react_icons_Stop = require_rolldown_runtime.__toESM(__envive_ai_react_icons_Stop);
+let __envive_ai_react_icons_StopSharp = require("@envive-ai/react-icons/StopSharp");
+__envive_ai_react_icons_StopSharp = require_rolldown_runtime.__toESM(__envive_ai_react_icons_StopSharp);
+let __envive_ai_react_icons_StopThin = require("@envive-ai/react-icons/StopThin");
+__envive_ai_react_icons_StopThin = require_rolldown_runtime.__toESM(__envive_ai_react_icons_StopThin);
+
+//#region src/components/TextField/components/VoiceInputButton.tsx
+const VoiceInputButton = ({ theme, isListening, onToggleListening, disabled = false, className, style, ariaLabel, isLoading = false }) => {
+	const getMicIcon = (iconTheme) => {
+		switch (iconTheme) {
+			case require_theme.Theme.MODERN: return __envive_ai_react_icons_MicThin.default;
+			default: return __envive_ai_react_icons_Mic.default;
+		}
+	};
+	const getStopIcon = (iconTheme) => {
+		switch (iconTheme) {
+			case require_theme.Theme.MODERN: return __envive_ai_react_icons_StopThin.default;
+			case require_theme.Theme.MINIMAL: return __envive_ai_react_icons_StopSharp.default;
+			default: return __envive_ai_react_icons_Stop.default;
+		}
+	};
+	const MicIcon = getMicIcon(theme);
+	const StopIcon = getStopIcon(theme);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: onToggleListening,
+		disabled: disabled || isLoading,
+		className,
+		style,
+		"aria-label": ariaLabel,
+		tabIndex: disabled || isLoading ? -1 : 0,
+		children: isListening ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StopIcon, { className: "envive-tw-h-[24px]" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MicIcon, { className: "envive-tw-h-[24px]" })
+	});
+};
+
+//#endregion
+exports.VoiceInputButton = VoiceInputButton;

package/dist/TextField/components/VoiceInputButton.js

@@ -0,0 +1,39 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { jsx } from "react/jsx-runtime";
+import Mic from "@envive-ai/react-icons/Mic";
+import MicThin from "@envive-ai/react-icons/MicThin";
+import Stop from "@envive-ai/react-icons/Stop";
+import StopSharp from "@envive-ai/react-icons/StopSharp";
+import StopThin from "@envive-ai/react-icons/StopThin";
+
+//#region src/components/TextField/components/VoiceInputButton.tsx
+const VoiceInputButton = ({ theme, isListening, onToggleListening, disabled = false, className, style, ariaLabel, isLoading = false }) => {
+	const getMicIcon = (iconTheme) => {
+		switch (iconTheme) {
+			case Theme.MODERN: return MicThin;
+			default: return Mic;
+		}
+	};
+	const getStopIcon = (iconTheme) => {
+		switch (iconTheme) {
+			case Theme.MODERN: return StopThin;
+			case Theme.MINIMAL: return StopSharp;
+			default: return Stop;
+		}
+	};
+	const MicIcon = getMicIcon(theme);
+	const StopIcon = getStopIcon(theme);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: onToggleListening,
+		disabled: disabled || isLoading,
+		className,
+		style,
+		"aria-label": ariaLabel,
+		tabIndex: disabled || isLoading ? -1 : 0,
+		children: isListening ? /* @__PURE__ */ jsx(StopIcon, { className: "envive-tw-h-[24px]" }) : /* @__PURE__ */ jsx(MicIcon, { className: "envive-tw-h-[24px]" })
+	});
+};
+
+//#endregion
+export { VoiceInputButton };

package/dist/TextField/components/index.cjs

@@ -1,12 +1,14 @@
 const require_Layout = require('./Layout.cjs');
 const require_Input = require('./Input.cjs');
 const require_SendIcon = require('./SendIcon.cjs');
+const require_VoiceInputButton = require('./VoiceInputButton.cjs');
 
 //#region src/components/TextField/components/index.ts
 const TextFieldComponents = {
 	Layout: require_Layout.Layout,
 	Input: require_Input.Input,
-	SendIcon: require_SendIcon.SendIcon
+	SendIcon: require_SendIcon.SendIcon,
+	VoiceInputButton: require_VoiceInputButton.VoiceInputButton
 };
 
 //#endregion

package/dist/TextField/components/index.js

@@ -1,12 +1,14 @@
 import { Layout } from "./Layout.js";
 import { Input } from "./Input.js";
 import { SendIcon } from "./SendIcon.js";
+import { VoiceInputButton } from "./VoiceInputButton.js";
 
 //#region src/components/TextField/components/index.ts
 const TextFieldComponents = {
 	Layout,
 	Input,
-	SendIcon
+	SendIcon,
+	VoiceInputButton
 };
 
 //#endregion

package/dist/TextField/hooks/useGetMicButtonContainerProperties.cjs

@@ -0,0 +1,20 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+let react = require("react");
+
+//#region src/components/TextField/hooks/useGetMicButtonContainerProperties.ts
+const useGetMicButtonContainerProperties = ({ theme, isListening = false }) => {
+	return { micButtonContainerClasses: (0, react.useMemo)(() => {
+		const micButtonContainerClassesMap = {
+			[require_theme.Theme.STANDARD]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark",
+			[require_theme.Theme.MODERN]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-[4px] envive-tw-border-border-light hover:envive-tw-border-border-dark",
+			[require_theme.Theme.MINIMAL]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border-b envive-tw-border-solid  envive-tw-border-b-border-medium hover:envive-tw-border-b-border-dark",
+			[require_theme.Theme.GLOBAL_CUSTOM]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark"
+		};
+		const baseClasses = micButtonContainerClassesMap[theme] ?? micButtonContainerClassesMap[require_theme.Theme.STANDARD];
+		return isListening ? `${baseClasses} envive-tw-bg-[--envive-colors-text-accent]` : `${baseClasses} envive-tw-bg-background-light`;
+	}, [theme, isListening]) };
+};
+
+//#endregion
+exports.useGetMicButtonContainerProperties = useGetMicButtonContainerProperties;

package/dist/TextField/hooks/useGetMicButtonContainerProperties.js

@@ -0,0 +1,19 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { useMemo } from "react";
+
+//#region src/components/TextField/hooks/useGetMicButtonContainerProperties.ts
+const useGetMicButtonContainerProperties = ({ theme, isListening = false }) => {
+	return { micButtonContainerClasses: useMemo(() => {
+		const micButtonContainerClassesMap = {
+			[Theme.STANDARD]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark",
+			[Theme.MODERN]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-[4px] envive-tw-border-border-light hover:envive-tw-border-border-dark",
+			[Theme.MINIMAL]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border-b envive-tw-border-solid  envive-tw-border-b-border-medium hover:envive-tw-border-b-border-dark",
+			[Theme.GLOBAL_CUSTOM]: "envive-tw-flex envive-tw-h-[40px] envive-tw-w-[40px] envive-tw-py-2 envive-tw-px-2 envive-tw-justify-center envive-tw-items-center envive-tw-flex-shrink-0 envive-tw-border envive-tw-border-solid  envive-tw-rounded-global-custom envive-tw-border-border-light hover:envive-tw-border-border-dark"
+		};
+		const baseClasses = micButtonContainerClassesMap[theme] ?? micButtonContainerClassesMap[Theme.STANDARD];
+		return isListening ? `${baseClasses} envive-tw-bg-[--envive-colors-text-accent]` : `${baseClasses} envive-tw-bg-background-light`;
+	}, [theme, isListening]) };
+};
+
+//#endregion
+export { useGetMicButtonContainerProperties };

package/dist/TextField/hooks/useGetSkeletonProperties.cjs

@@ -5,7 +5,7 @@ let react = require("react");
 const useGetSkeletonProperties = (isLoading) => {
 	return { skeletonClass: (0, react.useMemo)(() => {
 		if (!isLoading) return void 0;
-		return "envive-tw-animate-pulse";
+		return "envive-tw-animate-pulse envive-tw-h-[40px]";
 	}, [isLoading]) };
 };
 

package/dist/TextField/hooks/useGetSkeletonProperties.js

@@ -4,7 +4,7 @@ import { useMemo } from "react";
 const useGetSkeletonProperties = (isLoading) => {
 	return { skeletonClass: useMemo(() => {
 		if (!isLoading) return void 0;
-		return "envive-tw-animate-pulse";
+		return "envive-tw-animate-pulse envive-tw-h-[40px]";
 	}, [isLoading]) };
 };
 

package/dist/TextField/hooks/useVoiceInput.cjs

@@ -0,0 +1,59 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_react = require('../../node_modules/jotai/esm/react.cjs');
+let react = require("react");
+let __envive_ai_react_hooks_atoms_chat = require("@envive-ai/react-hooks/atoms/chat");
+let react_speech_recognition = require("react-speech-recognition");
+react_speech_recognition = require_rolldown_runtime.__toESM(react_speech_recognition);
+
+//#region src/components/TextField/hooks/useVoiceInput.ts
+const useVoiceInput = ({ onTranscriptionCompleted, onTranscriptionStarted, disabled = false }) => {
+	const [listeningToSpeech, setListeningToSpeech] = require_react.useAtom(__envive_ai_react_hooks_atoms_chat.listeningToSpeechAtom);
+	const { transcript, browserSupportsSpeechRecognition, resetTranscript, isMicrophoneAvailable } = (0, react_speech_recognition.useSpeechRecognition)();
+	const handleStartListening = async () => {
+		try {
+			resetTranscript();
+			await react_speech_recognition.default.startListening({
+				continuous: true,
+				language: "en-US"
+			});
+			onTranscriptionStarted?.();
+		} catch (error) {
+			console.log("Microphone permission denied or error:", error);
+			setListeningToSpeech(false);
+		}
+	};
+	const handleStopListening = async () => {
+		await react_speech_recognition.default.stopListening();
+		onTranscriptionCompleted?.(transcript);
+	};
+	const handleAbortListening = async () => {
+		await react_speech_recognition.default.abortListening();
+		resetTranscript();
+	};
+	const handleToggleListening = () => {
+		if (disabled || !isMicrophoneAvailable || !browserSupportsSpeechRecognition) return;
+		if (!listeningToSpeech) {
+			handleStartListening();
+			setListeningToSpeech(true);
+		} else {
+			handleStopListening();
+			setListeningToSpeech(false);
+		}
+	};
+	(0, react.useEffect)(() => {
+		if (listeningToSpeech) handleStartListening();
+		return () => {
+			resetTranscript();
+			setListeningToSpeech(false);
+		};
+	}, []);
+	return {
+		isListening: listeningToSpeech,
+		handleToggleListening,
+		handleAbortListening,
+		browserSupportsSpeechRecognition
+	};
+};
+
+//#endregion
+exports.useVoiceInput = useVoiceInput;

package/dist/TextField/hooks/useVoiceInput.js

@@ -0,0 +1,57 @@
+import { useAtom } from "../../node_modules/jotai/esm/react.js";
+import { useEffect } from "react";
+import { listeningToSpeechAtom } from "@envive-ai/react-hooks/atoms/chat";
+import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
+
+//#region src/components/TextField/hooks/useVoiceInput.ts
+const useVoiceInput = ({ onTranscriptionCompleted, onTranscriptionStarted, disabled = false }) => {
+	const [listeningToSpeech, setListeningToSpeech] = useAtom(listeningToSpeechAtom);
+	const { transcript, browserSupportsSpeechRecognition, resetTranscript, isMicrophoneAvailable } = useSpeechRecognition();
+	const handleStartListening = async () => {
+		try {
+			resetTranscript();
+			await SpeechRecognition.startListening({
+				continuous: true,
+				language: "en-US"
+			});
+			onTranscriptionStarted?.();
+		} catch (error) {
+			console.log("Microphone permission denied or error:", error);
+			setListeningToSpeech(false);
+		}
+	};
+	const handleStopListening = async () => {
+		await SpeechRecognition.stopListening();
+		onTranscriptionCompleted?.(transcript);
+	};
+	const handleAbortListening = async () => {
+		await SpeechRecognition.abortListening();
+		resetTranscript();
+	};
+	const handleToggleListening = () => {
+		if (disabled || !isMicrophoneAvailable || !browserSupportsSpeechRecognition) return;
+		if (!listeningToSpeech) {
+			handleStartListening();
+			setListeningToSpeech(true);
+		} else {
+			handleStopListening();
+			setListeningToSpeech(false);
+		}
+	};
+	useEffect(() => {
+		if (listeningToSpeech) handleStartListening();
+		return () => {
+			resetTranscript();
+			setListeningToSpeech(false);
+		};
+	}, []);
+	return {
+		isListening: listeningToSpeech,
+		handleToggleListening,
+		handleAbortListening,
+		browserSupportsSpeechRecognition
+	};
+};
+
+//#endregion
+export { useVoiceInput };

package/dist/TextField/types/index.d.cts

@@ -35,6 +35,10 @@ type TextFieldProps = {
    * Additional class names appended to the computed classes.
    */
   className?: string;
+  /**
+   * Additional class names applied directly to the input element (e.g. placeholder styling).
+   */
+  inputClassName?: string;
   /**
    * Inline styles forwarded to the rendered element.
    */
@@ -44,6 +48,13 @@ type TextFieldProps = {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * Enable voice input button
+   * @default false
+   */
+  enableVoiceInput?: boolean;
+  onTranscriptionStarted?: () => void;
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 //#endregion
 export { TextFieldProps };

package/dist/TextField/types/index.d.ts

@@ -35,6 +35,10 @@ type TextFieldProps = {
    * Additional class names appended to the computed classes.
    */
   className?: string;
+  /**
+   * Additional class names applied directly to the input element (e.g. placeholder styling).
+   */
+  inputClassName?: string;
   /**
    * Inline styles forwarded to the rendered element.
    */
@@ -44,6 +48,13 @@ type TextFieldProps = {
    * @default false
    */
   isLoading?: boolean;
+  /**
+   * Enable voice input button
+   * @default false
+   */
+  enableVoiceInput?: boolean;
+  onTranscriptionStarted?: () => void;
+  onTranscriptionCompleted?: (transcript: string) => void;
 };
 //#endregion
 export { TextFieldProps };

package/dist/TextField/utils/getLayoutStateProperties.cjs

@@ -1,10 +1,18 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
 
 //#region src/components/TextField/utils/getLayoutStateProperties.ts
 /**
 * Calculates state properties based on the layout state.
 */
-const getLayoutStateProperties = (hasValue, isFocused, disabled) => {
+const getLayoutStateProperties = (theme, hasValue, isFocused, disabled) => {
 	return {
+		containerClasses: (0, classnames.default)({
+			"envive-tw-gap-4": theme !== require_theme.Theme.MINIMAL,
+			"envive-tw-flex": true
+		}),
 		isActive: (hasValue || isFocused) && !disabled,
 		shouldShowFocus: isFocused && !disabled,
 		shouldShowHover: !disabled

package/dist/TextField/utils/getLayoutStateProperties.js

@@ -1,9 +1,16 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import classNames from "classnames";
+
 //#region src/components/TextField/utils/getLayoutStateProperties.ts
 /**
 * Calculates state properties based on the layout state.
 */
-const getLayoutStateProperties = (hasValue, isFocused, disabled) => {
+const getLayoutStateProperties = (theme, hasValue, isFocused, disabled) => {
 	return {
+		containerClasses: classNames({
+			"envive-tw-gap-4": theme !== Theme.MINIMAL,
+			"envive-tw-flex": true
+		}),
 		isActive: (hasValue || isFocused) && !disabled,
 		shouldShowFocus: isFocused && !disabled,
 		shouldShowHover: !disabled

package/dist/TitledPromptCarousel/TitledPromptCarousel.cjs

@@ -1,11 +1,11 @@
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-require('../Tokens/index.cjs');
 const require_Stack = require('../Stack/Stack.cjs');
 require('../Stack/index.cjs');
 const require_index = require('../Typography/types/index.cjs');
 const require_Typography = require('../Typography/Typography.cjs');
 require('../Typography/index.cjs');
+require('../Tokens/index.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 require('../PromptButton/index.cjs');
 const require_PromptCarousel_types_types = require('../PromptCarousel/types/types.cjs');

package/dist/TitledPromptCarousel/TitledPromptCarousel.d.cts

@@ -1,5 +1,5 @@
 import { TitledPromptCarouselProps } from "./types/index.cjs";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/components/TitledPromptCarousel/TitledPromptCarousel.d.ts
 declare const TitledPromptCarousel: ({
@@ -21,6 +21,6 @@ declare const TitledPromptCarousel: ({
   handleButtonTouchEnd,
   promptButtonTexts,
   promptCarouselAriaLabel
-}: TitledPromptCarouselProps) => react_jsx_runtime12.JSX.Element;
+}: TitledPromptCarouselProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { TitledPromptCarousel };

package/dist/TitledPromptCarousel/TitledPromptCarousel.d.ts

@@ -1,5 +1,5 @@
 import { TitledPromptCarouselProps } from "./types/index.js";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/components/TitledPromptCarousel/TitledPromptCarousel.d.ts
 declare const TitledPromptCarousel: ({
@@ -21,6 +21,6 @@ declare const TitledPromptCarousel: ({
   handleButtonTouchEnd,
   promptButtonTexts,
   promptCarouselAriaLabel
-}: TitledPromptCarouselProps) => react_jsx_runtime14.JSX.Element;
+}: TitledPromptCarouselProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 export { TitledPromptCarousel };

package/dist/TitledPromptCarousel/TitledPromptCarousel.js

@@ -1,10 +1,10 @@
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import "../Tokens/index.js";
 import { Stack } from "../Stack/Stack.js";
 import "../Stack/index.js";
 import { TypographyVariant } from "../Typography/types/index.js";
 import { Typography } from "../Typography/Typography.js";
 import "../Typography/index.js";
+import "../Tokens/index.js";
 import { PromptButtonVariant } from "../PromptButton/types/index.js";
 import "../PromptButton/index.js";
 import { AnimationSpeed, PromptCarouselRows } from "../PromptCarousel/types/types.js";

package/dist/Tokens/index.cjs

@@ -7,8 +7,8 @@ const require_fontFamily = require('../packages/components-v3/tokens/typography/
 const require_radius = require('../packages/components-v3/tokens/radius/radius.cjs');
 const require_aspectRatio = require('../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-const require_typography = require('../packages/components-v3/tokens/typography/typography.cjs');
 const require_breakpoints = require('../packages/components-v3/tokens/breakpoints/breakpoints.cjs');
+const require_typography = require('../packages/components-v3/tokens/typography/typography.cjs');
 const require_spacing = require('../packages/components-v3/tokens/spacing/spacing.cjs');
 const require_motion = require('../packages/components-v3/tokens/montion/motion.cjs');
 

package/dist/Tokens/index.js

@@ -7,8 +7,8 @@ import { FontFamily, fontFamilyVariables } from "../packages/components-v3/token
 import { borderRadiusVariables } from "../packages/components-v3/tokens/radius/radius.js";
 import { aspectRatioVariables } from "../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
 import { Theme } from "../packages/components-v3/tokens/theme/theme.js";
-import { createTypographyComponents } from "../packages/components-v3/tokens/typography/typography.js";
 import { screensBreakpointsVariables, tailwindScreens } from "../packages/components-v3/tokens/breakpoints/breakpoints.js";
+import { createTypographyComponents } from "../packages/components-v3/tokens/typography/typography.js";
 import { spacingVariables } from "../packages/components-v3/tokens/spacing/spacing.js";
 import { animationsVariables, keyFramesVariables } from "../packages/components-v3/tokens/montion/motion.js";
 

package/dist/TypingAnimation/TypingAnimation.cjs

@@ -2,12 +2,12 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_AnimatedText = require('../AnimatedText/AnimatedText.cjs');
 require('../AnimatedText/index.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
-require('../Tokens/index.cjs');
 const require_Stack = require('../Stack/Stack.cjs');
 require('../Stack/index.cjs');
 const require_index = require('../Typography/types/index.cjs');
 const require_Typography = require('../Typography/Typography.cjs');
 require('../Typography/index.cjs');
+require('../Tokens/index.cjs');
 const require_PromptButton_types_index = require('../PromptButton/types/index.cjs');
 const require_PromptCarousel_types_types = require('../PromptCarousel/types/types.cjs');
 const require_PromptCarousel = require('../PromptCarousel/PromptCarousel.cjs');
@@ -26,9 +26,9 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/TypingAnimation/TypingAnimation.tsx
 const TypingAnimation = ({ baseProps, widgetContentProps, widgetStyleProps, widgetEventProps }) => {
 	const { id, testId, className, style } = baseProps || {};
-	const { titleLabel, headlineText, animatedTextSequence, promptButtonTexts, hintText, textFieldAriaLabel, logoSrc, hideLogo } = widgetContentProps || {};
+	const { titleLabel, headlineText, animatedTextSequence, promptButtonTexts, hintText, textFieldAriaLabel, logoSrc, hideLogo, voiceInputEnabled } = widgetContentProps || {};
 	const { widgetVariant = require_types.WidgetWrapperVariant.CARD_WITH_BORDER, cardColor, promptButtonType = require_PromptButton_types_index.PromptButtonVariant.LIGHT, promptCarouselRows = require_PromptCarousel_types_types.PromptCarouselRows.ALWAYS_ONE, showTextField = true, theme = require_theme.Theme.GLOBAL_CUSTOM, isLoading = false } = widgetStyleProps || {};
-	const { handleButtonClick, handleButtonDrag, handleButtonHover, handleButtonMouseDown, handleButtonMouseUp, handleButtonTouchStart, handleButtonTouchEnd, handleTextFieldClick } = widgetEventProps || {};
+	const { handleButtonClick, handleButtonDrag, handleButtonHover, handleButtonMouseDown, handleButtonMouseUp, handleButtonTouchStart, handleButtonTouchEnd, handleTextFieldClick, onTranscriptionStarted, onTranscriptionCompleted } = widgetEventProps || {};
 	const typographyVariant = require_useGetTypographyVariant.useGetTypographyVariant(theme);
 	const { measuringRef, minHeight } = require_useAnimatedTextMinHeight.useAnimatedTextMinHeight(animatedTextSequence ?? []);
 	const biggestAnimatedText = (0, react.useMemo)(() => {
@@ -131,7 +131,11 @@ const TypingAnimation = ({ baseProps, widgetContentProps, widgetStyleProps, widg
 					ariaLabel: textFieldAriaLabel,
 					theme,
 					isLoading,
-					className: "envive-tw-mt-2 envive-tw-overflow-hidden envive-tw-text-ellipsis envive-tw-whitespace-nowrap"
+					className: "envive-tw-mt-2 envive-tw-overflow-hidden envive-tw-text-ellipsis envive-tw-whitespace-nowrap",
+					voiceInputClassName: "envive-tw-mt-2",
+					enableVoiceInput: voiceInputEnabled,
+					onTranscriptionStarted,
+					onTranscriptionCompleted
 				})
 			]
 		})