@envive-ai/react-toolkit-v3 0.3.22 → 0.3.24

package/dist/Stack/Stack.d.ts

@@ -1,10 +1,10 @@
 import { StackProps } from "./types/index.js";
-import * as react8 from "react";
+import * as react5 from "react";
 
 //#region src/components/Stack/Stack.d.ts
 /**
  * Stack component for laying out children in a flexible container with gap.
  */
-declare const Stack: react8.ForwardRefExoticComponent<StackProps & react8.RefAttributes<HTMLDivElement>>;
+declare const Stack: react5.ForwardRefExoticComponent<StackProps & react5.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Stack };

package/dist/TextField/TextField.cjs

@@ -2,26 +2,43 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_theme = require('../packages/components-v3/tokens/theme/theme.cjs');
 const require_resolveTheme = require('../utils/resolveTheme.cjs');
 const require_index = require('./components/index.cjs');
+const require_useGetMicButtonContainerProperties = require('./hooks/useGetMicButtonContainerProperties.cjs');
 const require_useGetSkeletonProperties = require('./hooks/useGetSkeletonProperties.cjs');
 const require_useTextFieldFocus = require('./hooks/useTextFieldFocus.cjs');
 const require_useTextFieldSubmit = require('./hooks/useTextFieldSubmit.cjs');
 const require_useTextFieldValue = require('./hooks/useTextFieldValue.cjs');
+const require_useVoiceInput = require('./hooks/useVoiceInput.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/TextField/TextField.tsx
 /**
 * Renders a text input field with a send icon.
 * Supports three visual themes: Standard, Modern, and Minimal.
 */
-const TextField = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, placeholder, value: controlledValue, onChange, onSubmit, onFocus, disabled = false, id, testId, className, style, ariaLabel, isLoading = false }) => {
+const TextField = ({ theme = require_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 } = require_useTextFieldValue.useTextFieldValue(controlledValue, onChange);
 	const { isFocused, handleFocus, handleBlur } = require_useTextFieldFocus.useTextFieldFocus();
 	const { handleSubmit, handleKeyDown } = require_useTextFieldSubmit.useTextFieldSubmit(onSubmit, hasValue, disabled, isLoading, currentValue, resetValue);
+	const { isListening, handleToggleListening, handleAbortListening, browserSupportsSpeechRecognition } = require_useVoiceInput.useVoiceInput({
+		onTranscriptionStarted,
+		onTranscriptionCompleted: (0, react.useCallback)((transcript) => {
+			resetValue();
+			handleChange(transcript);
+			onTranscriptionCompleted?.(transcript);
+		}, [
+			handleChange,
+			resetValue,
+			onTranscriptionCompleted
+		]),
+		disabled
+	});
 	const handleInternalFocus = () => {
 		handleFocus();
 		onFocus?.();
+		handleAbortListening();
 	};
 	const { skeletonClass } = require_useGetSkeletonProperties.useGetSkeletonProperties(isLoading);
 	const resolvedTheme = require_resolveTheme.resolveTheme(theme);
@@ -34,7 +51,8 @@ const TextField = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, placeholder, val
 		onFocus: handleInternalFocus,
 		onBlur: handleBlur,
 		disabled: disabled || isLoading,
-		ariaLabel
+		ariaLabel,
+		className: inputClassName
 	});
 	const sendIcon = !isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.TextFieldComponents.SendIcon, {
 		theme: resolvedTheme,
@@ -43,10 +61,24 @@ const TextField = ({ theme = require_theme.Theme.GLOBAL_CUSTOM, placeholder, val
 		onClick: handleSubmit,
 		ariaLabel
 	}) : null;
+	const { micButtonContainerClasses } = require_useGetMicButtonContainerProperties.useGetMicButtonContainerProperties({
+		theme: resolvedTheme,
+		isListening
+	});
+	const voiceInputButtonClassName = (0, classnames.default)(micButtonContainerClasses, skeletonClass);
+	const voiceInputButton = enableVoiceInput && browserSupportsSpeechRecognition ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.TextFieldComponents.VoiceInputButton, {
+		theme: resolvedTheme,
+		isListening,
+		onToggleListening: handleToggleListening,
+		ariaLabel,
+		isLoading,
+		className: voiceInputButtonClassName
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.TextFieldComponents.Layout, {
 		theme: resolvedTheme,
 		input,
 		sendIcon,
+		voiceInputButton,
 		isFocused,
 		hasValue,
 		disabled,

package/dist/TextField/TextField.d.cts

@@ -17,9 +17,13 @@ declare const TextField: ({
   id,
   testId,
   className,
+  inputClassName,
   style,
   ariaLabel,
-  isLoading
+  isLoading,
+  enableVoiceInput,
+  onTranscriptionStarted,
+  onTranscriptionCompleted
 }: TextFieldProps) => JSX.Element;
 //#endregion
 export { TextField };

package/dist/TextField/TextField.d.ts

@@ -17,9 +17,13 @@ declare const TextField: ({
   id,
   testId,
   className,
+  inputClassName,
   style,
   ariaLabel,
-  isLoading
+  isLoading,
+  enableVoiceInput,
+  onTranscriptionStarted,
+  onTranscriptionCompleted
 }: TextFieldProps) => JSX.Element;
 //#endregion
 export { TextField };

package/dist/TextField/TextField.js

@@ -1,25 +1,42 @@
 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 classNames from "classnames";
+import { useVoiceInput } from "./hooks/useVoiceInput.js";
+import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/TextField/TextField.tsx
 /**
 * 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/Input.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_getInputClasses = require('../utils/getInputClasses.cjs');
 const require_createInputChangeHandler = require('../utils/createInputChangeHandler.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/TextField/components/Input.tsx
 const Input = ({ theme, placeholder, value, onChange, onKeyDown, onFocus, onBlur, disabled = false, id, testId, className, style, ariaLabel }) => {

package/dist/TextField/components/Input.js

@@ -1,7 +1,7 @@
 import { getInputClasses } from "../utils/getInputClasses.js";
 import { createInputChangeHandler } from "../utils/createInputChangeHandler.js";
-import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/TextField/components/Input.tsx
 const Input = ({ theme, placeholder, value, onChange, onKeyDown, onFocus, onBlur, disabled = false, id, testId, className, style, ariaLabel }) => {

package/dist/TextField/components/Layout.cjs

@@ -1,20 +1,23 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');
 const require_getLayoutStateProperties = require('../utils/getLayoutStateProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#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

@@ -1,18 +1,21 @@
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";
 import { getLayoutStateProperties } from "../utils/getLayoutStateProperties.js";
-import classNames from "classnames";
 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/SendIcon.cjs

@@ -1,9 +1,9 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_getSendIconElement = require('../utils/getSendIconElement.cjs');
 const require_useSendIconHandlers = require('../hooks/useSendIconHandlers.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/TextField/components/SendIcon.tsx
 const SendIcon = ({ theme, hasValue, disabled = false, onClick, className, style, ariaLabel }) => {

package/dist/TextField/components/SendIcon.js

@@ -1,7 +1,7 @@
 import { getSendIconElement } from "../utils/getSendIconElement.js";
 import { useSendIconHandlers } from "../hooks/useSendIconHandlers.js";
-import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/TextField/components/SendIcon.tsx
 const SendIcon = ({ theme, hasValue, disabled = false, onClick, className, style, ariaLabel }) => {

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,52 @@
+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("abort");
+		}
+	};
+	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 !== "start") setListeningToSpeech("start");
+		else setListeningToSpeech("stop");
+	};
+	(0, react.useEffect)(() => {
+		if (listeningToSpeech === "start") handleStartListening();
+		else if (listeningToSpeech === "stop") handleStopListening();
+		else if (listeningToSpeech === "abort") handleAbortListening();
+	}, [listeningToSpeech]);
+	return {
+		isListening: listeningToSpeech === "start",
+		handleToggleListening,
+		handleAbortListening,
+		browserSupportsSpeechRecognition
+	};
+};
+
+//#endregion
+exports.useVoiceInput = useVoiceInput;

package/dist/TextField/hooks/useVoiceInput.js

@@ -0,0 +1,50 @@
+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("abort");
+		}
+	};
+	const handleStopListening = async () => {
+		await SpeechRecognition.stopListening();
+		onTranscriptionCompleted?.(transcript);
+	};
+	const handleAbortListening = async () => {
+		await SpeechRecognition.abortListening();
+		resetTranscript();
+	};
+	const handleToggleListening = () => {
+		if (disabled || !isMicrophoneAvailable || !browserSupportsSpeechRecognition) return;
+		if (listeningToSpeech !== "start") setListeningToSpeech("start");
+		else setListeningToSpeech("stop");
+	};
+	useEffect(() => {
+		if (listeningToSpeech === "start") handleStartListening();
+		else if (listeningToSpeech === "stop") handleStopListening();
+		else if (listeningToSpeech === "abort") handleAbortListening();
+	}, [listeningToSpeech]);
+	return {
+		isListening: listeningToSpeech === "start",
+		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 };