@envive-ai/react-toolkit-v3 0.3.15-beta.1 → 0.3.16

package/dist/TypingAnimation/TypingAnimation.cjs

@@ -0,0 +1,142 @@
+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');
+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');
+require('../PromptCarousel/index.cjs');
+const require_WidgetTextField = require('../WidgetTextField/WidgetTextField.cjs');
+require('../WidgetTextField/index.cjs');
+const require_types = require('../WidgetWrapper/types/types.cjs');
+require('../WidgetWrapper/index.cjs');
+const require_WidgetWrapperWithTitle = require('../WidgetWrapperWithTitle/WidgetWrapperWithTitle.cjs');
+const require_useAnimatedTextMinHeight = require('../utils/useAnimatedTextMinHeight.cjs');
+require('../WidgetWrapperWithTitle/index.cjs');
+const require_useGetTypographyVariant = require('./hooks/useGetTypographyVariant.cjs');
+let react = require("react");
+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 { 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 typographyVariant = require_useGetTypographyVariant.useGetTypographyVariant(theme);
+	const { measuringRef, minHeight } = require_useAnimatedTextMinHeight.useAnimatedTextMinHeight(animatedTextSequence ?? []);
+	const biggestAnimatedText = (0, react.useMemo)(() => {
+		if (!animatedTextSequence || animatedTextSequence.length === 0) return "";
+		return animatedTextSequence.reduce((maxText, currText) => currText.length > maxText.length ? currText : maxText, "");
+	}, [animatedTextSequence]);
+	const getAnimatedTextWrapper = (0, react.useCallback)((text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+		variant: typographyVariant,
+		color: require_index.TypographyColor.TEXT_ACCENT,
+		as: "span",
+		children: text
+	}), [typographyVariant]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetWrapperWithTitle.WidgetWrapperWithTitle, {
+		id,
+		testId,
+		variant: widgetVariant,
+		className,
+		style,
+		titleLabel,
+		logoSrc,
+		hideLogo,
+		hexCardColor: cardColor,
+		fullIsLoading: isLoading,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
+			direction: "column",
+			gap: "4",
+			children: [
+				(headlineText || animatedTextSequence && animatedTextSequence.length > 0) && !isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: { position: "relative" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: measuringRef,
+						"aria-hidden": "true",
+						style: {
+							position: "absolute",
+							visibility: "hidden",
+							pointerEvents: "none",
+							width: "100%"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: "envive-tw-max-w-[90ch]",
+							style: { textAlign: "left" },
+							children: [
+								headlineText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+									variant: typographyVariant,
+									color: require_index.TypographyColor.TEXT_PRIMARY,
+									as: "span",
+									children: headlineText
+								}),
+								" ",
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+									variant: typographyVariant,
+									color: require_index.TypographyColor.TEXT_ACCENT,
+									as: "span",
+									children: biggestAnimatedText
+								})
+							]
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { minHeight },
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							"data-testid": "typing-animation-headline-text",
+							className: "envive-tw-max-w-[90ch]",
+							style: { textAlign: "left" },
+							children: [
+								headlineText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+									variant: typographyVariant,
+									color: require_index.TypographyColor.TEXT_PRIMARY,
+									as: "span",
+									children: headlineText
+								}),
+								" ",
+								animatedTextSequence && animatedTextSequence.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AnimatedText.AnimatedText, {
+									sequence: animatedTextSequence,
+									loop: true,
+									getNodeWrapper: getAnimatedTextWrapper
+								}) : null
+							]
+						})
+					})]
+				}),
+				promptButtonTexts && promptButtonTexts.length > 0 && handleButtonClick && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_PromptCarousel.PromptCarousel, {
+					id,
+					theme,
+					isLoading,
+					boldFirstButton: false,
+					promptButtonType,
+					promptCarouselRows,
+					handleButtonClick,
+					handleButtonDrag,
+					handleButtonHover,
+					handleButtonMouseDown,
+					handleButtonMouseUp,
+					handleButtonTouchStart,
+					handleButtonTouchEnd,
+					promptButtonTexts
+				}),
+				showTextField && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_WidgetTextField.WidgetTextField, {
+					placeholder: hintText,
+					onClick: handleTextFieldClick,
+					ariaLabel: textFieldAriaLabel,
+					theme,
+					isLoading,
+					className: "envive-tw-mt-2 envive-tw-overflow-hidden envive-tw-text-ellipsis envive-tw-whitespace-nowrap"
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+exports.TypingAnimation = TypingAnimation;

package/dist/TypingAnimation/TypingAnimation.d.cts

@@ -0,0 +1,12 @@
+import { TypingAnimationProps } from "./types/index.cjs";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/components/TypingAnimation/TypingAnimation.d.ts
+declare const TypingAnimation: ({
+  baseProps,
+  widgetContentProps,
+  widgetStyleProps,
+  widgetEventProps
+}: TypingAnimationProps) => react_jsx_runtime13.JSX.Element;
+//#endregion
+export { TypingAnimation };

package/dist/TypingAnimation/TypingAnimation.d.ts

@@ -0,0 +1,12 @@
+import { TypingAnimationProps } from "./types/index.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/components/TypingAnimation/TypingAnimation.d.ts
+declare const TypingAnimation: ({
+  baseProps,
+  widgetContentProps,
+  widgetStyleProps,
+  widgetEventProps
+}: TypingAnimationProps) => react_jsx_runtime2.JSX.Element;
+//#endregion
+export { TypingAnimation };

package/dist/TypingAnimation/TypingAnimation.js

@@ -0,0 +1,141 @@
+import { AnimatedText } from "../AnimatedText/AnimatedText.js";
+import "../AnimatedText/index.js";
+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 { TypographyColor } from "../Typography/types/index.js";
+import { Typography } from "../Typography/Typography.js";
+import "../Typography/index.js";
+import { PromptButtonVariant } from "../PromptButton/types/index.js";
+import { PromptCarouselRows } from "../PromptCarousel/types/types.js";
+import { PromptCarousel } from "../PromptCarousel/PromptCarousel.js";
+import "../PromptCarousel/index.js";
+import { WidgetTextField } from "../WidgetTextField/WidgetTextField.js";
+import "../WidgetTextField/index.js";
+import { WidgetWrapperVariant } from "../WidgetWrapper/types/types.js";
+import "../WidgetWrapper/index.js";
+import { WidgetWrapperWithTitle } from "../WidgetWrapperWithTitle/WidgetWrapperWithTitle.js";
+import { useAnimatedTextMinHeight } from "../utils/useAnimatedTextMinHeight.js";
+import "../WidgetWrapperWithTitle/index.js";
+import { useGetTypographyVariant } from "./hooks/useGetTypographyVariant.js";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "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 { widgetVariant = WidgetWrapperVariant.CARD_WITH_BORDER, cardColor, promptButtonType = PromptButtonVariant.LIGHT, promptCarouselRows = PromptCarouselRows.ALWAYS_ONE, showTextField = true, theme = Theme.GLOBAL_CUSTOM, isLoading = false } = widgetStyleProps || {};
+	const { handleButtonClick, handleButtonDrag, handleButtonHover, handleButtonMouseDown, handleButtonMouseUp, handleButtonTouchStart, handleButtonTouchEnd, handleTextFieldClick } = widgetEventProps || {};
+	const typographyVariant = useGetTypographyVariant(theme);
+	const { measuringRef, minHeight } = useAnimatedTextMinHeight(animatedTextSequence ?? []);
+	const biggestAnimatedText = useMemo(() => {
+		if (!animatedTextSequence || animatedTextSequence.length === 0) return "";
+		return animatedTextSequence.reduce((maxText, currText) => currText.length > maxText.length ? currText : maxText, "");
+	}, [animatedTextSequence]);
+	const getAnimatedTextWrapper = useCallback((text) => /* @__PURE__ */ jsx(Typography, {
+		variant: typographyVariant,
+		color: TypographyColor.TEXT_ACCENT,
+		as: "span",
+		children: text
+	}), [typographyVariant]);
+	return /* @__PURE__ */ jsx(WidgetWrapperWithTitle, {
+		id,
+		testId,
+		variant: widgetVariant,
+		className,
+		style,
+		titleLabel,
+		logoSrc,
+		hideLogo,
+		hexCardColor: cardColor,
+		fullIsLoading: isLoading,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			gap: "4",
+			children: [
+				(headlineText || animatedTextSequence && animatedTextSequence.length > 0) && !isLoading && /* @__PURE__ */ jsxs("div", {
+					style: { position: "relative" },
+					children: [/* @__PURE__ */ jsx("div", {
+						ref: measuringRef,
+						"aria-hidden": "true",
+						style: {
+							position: "absolute",
+							visibility: "hidden",
+							pointerEvents: "none",
+							width: "100%"
+						},
+						children: /* @__PURE__ */ jsxs("p", {
+							className: "envive-tw-max-w-[90ch]",
+							style: { textAlign: "left" },
+							children: [
+								headlineText && /* @__PURE__ */ jsx(Typography, {
+									variant: typographyVariant,
+									color: TypographyColor.TEXT_PRIMARY,
+									as: "span",
+									children: headlineText
+								}),
+								" ",
+								/* @__PURE__ */ jsx(Typography, {
+									variant: typographyVariant,
+									color: TypographyColor.TEXT_ACCENT,
+									as: "span",
+									children: biggestAnimatedText
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						style: { minHeight },
+						children: /* @__PURE__ */ jsxs("p", {
+							"data-testid": "typing-animation-headline-text",
+							className: "envive-tw-max-w-[90ch]",
+							style: { textAlign: "left" },
+							children: [
+								headlineText && /* @__PURE__ */ jsx(Typography, {
+									variant: typographyVariant,
+									color: TypographyColor.TEXT_PRIMARY,
+									as: "span",
+									children: headlineText
+								}),
+								" ",
+								animatedTextSequence && animatedTextSequence.length > 0 ? /* @__PURE__ */ jsx(AnimatedText, {
+									sequence: animatedTextSequence,
+									loop: true,
+									getNodeWrapper: getAnimatedTextWrapper
+								}) : null
+							]
+						})
+					})]
+				}),
+				promptButtonTexts && promptButtonTexts.length > 0 && handleButtonClick && /* @__PURE__ */ jsx(PromptCarousel, {
+					id,
+					theme,
+					isLoading,
+					boldFirstButton: false,
+					promptButtonType,
+					promptCarouselRows,
+					handleButtonClick,
+					handleButtonDrag,
+					handleButtonHover,
+					handleButtonMouseDown,
+					handleButtonMouseUp,
+					handleButtonTouchStart,
+					handleButtonTouchEnd,
+					promptButtonTexts
+				}),
+				showTextField && /* @__PURE__ */ jsx(WidgetTextField, {
+					placeholder: hintText,
+					onClick: handleTextFieldClick,
+					ariaLabel: textFieldAriaLabel,
+					theme,
+					isLoading,
+					className: "envive-tw-mt-2 envive-tw-overflow-hidden envive-tw-text-ellipsis envive-tw-whitespace-nowrap"
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { TypingAnimation };

package/dist/TypingAnimation/hooks/useGetTypographyVariant.cjs

@@ -0,0 +1,12 @@
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
+require('../../Tokens/index.cjs');
+const require_index = require('../../Typography/types/index.cjs');
+require('../../Typography/index.cjs');
+
+//#region src/components/TypingAnimation/hooks/useGetTypographyVariant.tsx
+const useGetTypographyVariant = (theme) => {
+	return theme === require_theme.Theme.STANDARD ? require_index.TypographyVariant.B1_MD : require_index.TypographyVariant.B2_MD;
+};
+
+//#endregion
+exports.useGetTypographyVariant = useGetTypographyVariant;

package/dist/TypingAnimation/hooks/useGetTypographyVariant.js

@@ -0,0 +1,12 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import "../../Tokens/index.js";
+import { TypographyVariant } from "../../Typography/types/index.js";
+import "../../Typography/index.js";
+
+//#region src/components/TypingAnimation/hooks/useGetTypographyVariant.tsx
+const useGetTypographyVariant = (theme) => {
+	return theme === Theme.STANDARD ? TypographyVariant.B1_MD : TypographyVariant.B2_MD;
+};
+
+//#endregion
+export { useGetTypographyVariant };

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

@@ -0,0 +1,173 @@
+import { Theme } from "../../tokens/theme/theme.cjs";
+import { WidgetWrapperVariant } from "../../WidgetWrapper/types/types.cjs";
+import { PromptButtonVariant } from "../../PromptButton/types/index.cjs";
+import { PromptCarouselRows } from "../../PromptCarousel/types/types.cjs";
+
+//#region src/components/TypingAnimation/types/index.d.ts
+
+/**
+ * Base props for the TypingAnimation component container.
+ * These props control basic HTML attributes and styling of the root element.
+ */
+type BaseProps = {
+  /**
+   * Unique identifier for the typing animation container element.
+   */
+  id?: string;
+  /**
+   * Test identifier for automated testing purposes.
+   */
+  testId?: string;
+  /**
+   * Additional CSS classes to apply to the container.
+   */
+  className?: string;
+  /**
+   * Inline styles to apply to the container.
+   */
+  style?: React.CSSProperties;
+};
+/**
+ * Content props for the TypingAnimation component.
+ */
+type WidgetContentProps = {
+  /**
+   * Text label displayed as the title above the typing animation.
+   */
+  titleLabel?: string;
+  /**
+   * Static headline text displayed before the animated text.
+   */
+  headlineText?: string;
+  /**
+   * Array of phrases that animate with typing animation, right after the headline text.
+   * The animation will cycle through each phrase in the sequence.
+   */
+  animatedTextSequence?: string[];
+  /**
+   * Array of text labels for the prompt buttons in the carousel.
+   */
+  promptButtonTexts?: string[];
+  /**
+   * Placeholder text for the TextField.
+   */
+  hintText?: string;
+  /**
+   * Accessibility: Provides an accessible name for the TextField.
+   */
+  textFieldAriaLabel?: string;
+  /**
+   * Source URL of the logo image displayed in the widget title.
+   */
+  logoSrc?: string;
+  /**
+   * When `true`, hides the logo in the title even if logoSrc is provided.
+   */
+  hideLogo?: boolean;
+};
+/**
+ * Props to control the visual appearance, layout, and behavior of the widget.
+ */
+type WidgetStyleProps = {
+  /**
+   * Visual variant that determines the styling applied to the wrapper.
+   * @default WidgetWrapperVariant.CARD_WITH_BORDER
+   */
+  widgetVariant?: WidgetWrapperVariant;
+  /**
+   * Hex color value for card background (only applies to Card variants).
+   */
+  cardColor?: string;
+  /**
+   * Visual variant/style of the prompt buttons.
+   * @default PromptButtonVariant.LIGHT
+   */
+  promptButtonType?: PromptButtonVariant;
+  /**
+   * Number of rows to display in the carousel.
+   * Controls the layout behavior (always one row, always two rows, or responsive).
+   * @default PromptCarouselRows.ALWAYS_ONE
+   */
+  promptCarouselRows?: PromptCarouselRows;
+  /**
+   * Whether to show the TextField component.
+   * @default true
+   */
+  showTextField?: boolean;
+  /**
+   * Visual theme for the PromptCarousel and WidgetTextField components.
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+  /**
+   * Whether the component is in a loading state.
+   * @default false
+   */
+  isLoading?: boolean;
+};
+/**
+ * Event handler props for the TypingAnimation component.
+ */
+type WidgetEventProps = {
+  /**
+   * Callback function invoked when a prompt button is clicked.
+   *
+   * @param text - The text label of the clicked button
+   */
+  handleButtonClick?: (text: string) => void;
+  /**
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handleButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handleButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handleButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handleButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handleButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handleButtonTouchEnd?: () => void;
+  /**
+   * Callback function invoked when the TextField is clicked.
+   */
+  handleTextFieldClick?: () => void;
+};
+/**
+ * Props for the TypingAnimation component.
+ */
+type TypingAnimationProps = {
+  /**
+   * Base props for the container element (id, testId, className, style).
+   */
+  baseProps?: BaseProps;
+  /**
+   * Content props defining the text labels, animated text sequences, and placeholder text.
+   */
+  widgetContentProps?: WidgetContentProps;
+  /**
+   * Style props controlling visual appearance, layout, and behavior.
+   */
+  widgetStyleProps?: WidgetStyleProps;
+  /**
+   * Event handler props for user interactions (button clicks, text field clicks).
+   */
+  widgetEventProps?: WidgetEventProps;
+};
+//#endregion
+export { TypingAnimationProps };

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

@@ -0,0 +1,173 @@
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
+import { WidgetWrapperVariant } from "../../WidgetWrapper/types/types.js";
+import { PromptButtonVariant } from "../../PromptButton/types/index.js";
+import { PromptCarouselRows } from "../../PromptCarousel/types/types.js";
+
+//#region src/components/TypingAnimation/types/index.d.ts
+
+/**
+ * Base props for the TypingAnimation component container.
+ * These props control basic HTML attributes and styling of the root element.
+ */
+type BaseProps = {
+  /**
+   * Unique identifier for the typing animation container element.
+   */
+  id?: string;
+  /**
+   * Test identifier for automated testing purposes.
+   */
+  testId?: string;
+  /**
+   * Additional CSS classes to apply to the container.
+   */
+  className?: string;
+  /**
+   * Inline styles to apply to the container.
+   */
+  style?: React.CSSProperties;
+};
+/**
+ * Content props for the TypingAnimation component.
+ */
+type WidgetContentProps = {
+  /**
+   * Text label displayed as the title above the typing animation.
+   */
+  titleLabel?: string;
+  /**
+   * Static headline text displayed before the animated text.
+   */
+  headlineText?: string;
+  /**
+   * Array of phrases that animate with typing animation, right after the headline text.
+   * The animation will cycle through each phrase in the sequence.
+   */
+  animatedTextSequence?: string[];
+  /**
+   * Array of text labels for the prompt buttons in the carousel.
+   */
+  promptButtonTexts?: string[];
+  /**
+   * Placeholder text for the TextField.
+   */
+  hintText?: string;
+  /**
+   * Accessibility: Provides an accessible name for the TextField.
+   */
+  textFieldAriaLabel?: string;
+  /**
+   * Source URL of the logo image displayed in the widget title.
+   */
+  logoSrc?: string;
+  /**
+   * When `true`, hides the logo in the title even if logoSrc is provided.
+   */
+  hideLogo?: boolean;
+};
+/**
+ * Props to control the visual appearance, layout, and behavior of the widget.
+ */
+type WidgetStyleProps = {
+  /**
+   * Visual variant that determines the styling applied to the wrapper.
+   * @default WidgetWrapperVariant.CARD_WITH_BORDER
+   */
+  widgetVariant?: WidgetWrapperVariant;
+  /**
+   * Hex color value for card background (only applies to Card variants).
+   */
+  cardColor?: string;
+  /**
+   * Visual variant/style of the prompt buttons.
+   * @default PromptButtonVariant.LIGHT
+   */
+  promptButtonType?: PromptButtonVariant;
+  /**
+   * Number of rows to display in the carousel.
+   * Controls the layout behavior (always one row, always two rows, or responsive).
+   * @default PromptCarouselRows.ALWAYS_ONE
+   */
+  promptCarouselRows?: PromptCarouselRows;
+  /**
+   * Whether to show the TextField component.
+   * @default true
+   */
+  showTextField?: boolean;
+  /**
+   * Visual theme for the PromptCarousel and WidgetTextField components.
+   * @default Theme.GLOBAL_CUSTOM
+   */
+  theme?: Theme;
+  /**
+   * Whether the component is in a loading state.
+   * @default false
+   */
+  isLoading?: boolean;
+};
+/**
+ * Event handler props for the TypingAnimation component.
+ */
+type WidgetEventProps = {
+  /**
+   * Callback function invoked when a prompt button is clicked.
+   *
+   * @param text - The text label of the clicked button
+   */
+  handleButtonClick?: (text: string) => void;
+  /**
+   * Callback function invoked when the prompt buttons carousel is dragged.
+   * Useful for tracking drag-to-scroll interactions.
+   */
+  handleButtonDrag?: () => void;
+  /**
+   * Callback function invoked when the user hovers over a prompt button.
+   * Receives the hovered button's text as a parameter.
+   */
+  handleButtonHover?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is pressed down on a prompt button.
+   * Receives the pressed button's text as a parameter.
+   */
+  handleButtonMouseDown?: (text: string) => void;
+  /**
+   * Callback function invoked when the mouse button is released after pressing a prompt button.
+   */
+  handleButtonMouseUp?: () => void;
+  /**
+   * Callback function invoked when a touch interaction starts on a prompt button.
+   * Receives the touched button's text as a parameter.
+   */
+  handleButtonTouchStart?: (text: string) => void;
+  /**
+   * Callback function invoked when a touch interaction ends after touching a prompt button.
+   */
+  handleButtonTouchEnd?: () => void;
+  /**
+   * Callback function invoked when the TextField is clicked.
+   */
+  handleTextFieldClick?: () => void;
+};
+/**
+ * Props for the TypingAnimation component.
+ */
+type TypingAnimationProps = {
+  /**
+   * Base props for the container element (id, testId, className, style).
+   */
+  baseProps?: BaseProps;
+  /**
+   * Content props defining the text labels, animated text sequences, and placeholder text.
+   */
+  widgetContentProps?: WidgetContentProps;
+  /**
+   * Style props controlling visual appearance, layout, and behavior.
+   */
+  widgetStyleProps?: WidgetStyleProps;
+  /**
+   * Event handler props for user interactions (button clicks, text field clicks).
+   */
+  widgetEventProps?: WidgetEventProps;
+};
+//#endregion
+export { TypingAnimationProps };