@envive-ai/react-toolkit-v3 0.3.5

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

@@ -0,0 +1,137 @@
+import { Theme } from "../../components-v3/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;
+};
+/**
+ * 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 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,137 @@
+import { Theme } from "../../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;
+};
+/**
+ * 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 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/Typography/Typography.cjs

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_index = require('./types/index.cjs');
+const require_useGetVariantProperties = require('./hooks/useGetVariantProperties.cjs');
+const require_useGetColorProperties = require('./hooks/useGetColorProperties.cjs');
+const require_useGetAlignProperties = require('./hooks/useGetAlignProperties.cjs');
+const require_useGetNoWrapProperties = require('./hooks/useGetNoWrapProperties.cjs');
+const require_useGetNumberOfLinesProperties = require('./hooks/useGetNumberOfLinesProperties.cjs');
+const require_useGetAccessibilityAttributes = require('./hooks/useGetAccessibilityAttributes.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+
+//#region src/components/Typography/Typography.tsx
+/**
+* Renders Envive typography tokens with consistent styling and accessibility helpers.
+*/
+const Typography = ({ id, testId, children, className, style, numberOfLines, variant, color = require_index.TypographyColor.TEXT_PRIMARY, align = require_index.TypographyAlign.LEFT, noWrap = false, as, "aria-label": ariaLabel }) => {
+	const { variantClass, variantTag } = require_useGetVariantProperties.useGetVariantProperties(variant);
+	const elementTag = as ?? variantTag;
+	const { colorVarClass } = require_useGetColorProperties.useGetColorProperties(color);
+	const { alignClass } = require_useGetAlignProperties.useGetAlignProperties(align);
+	const { noWrapClass } = require_useGetNoWrapProperties.useGetNoWrapProperties(noWrap);
+	const { numberOfLinesClass } = require_useGetNumberOfLinesProperties.useGetNumberOfLinesProperties(numberOfLines);
+	const accessibilityAttributes = require_useGetAccessibilityAttributes.useGetAccessibilityAttributes({
+		tag: elementTag,
+		numberOfLines,
+		noWrap,
+		children
+	});
+	const finalAriaLabel = ariaLabel ?? accessibilityAttributes["aria-label"];
+	return (0, react.createElement)(elementTag, {
+		className: (0, classnames.default)(variantClass, colorVarClass, align && alignClass, noWrap && noWrapClass, numberOfLines && numberOfLinesClass, className),
+		style,
+		id,
+		"data-testid": testId,
+		...accessibilityAttributes,
+		"aria-label": finalAriaLabel
+	}, children);
+};
+
+//#endregion
+exports.Typography = Typography;

package/dist/Typography/Typography.d.cts

@@ -0,0 +1,32 @@
+import { TypographyProps } from "./types/index.cjs";
+import * as react177 from "react";
+
+//#region src/components/Typography/Typography.d.ts
+/**
+ * Renders Envive typography tokens with consistent styling and accessibility helpers.
+ */
+declare const Typography: ({
+  id,
+  testId,
+  children,
+  className,
+  style,
+  numberOfLines,
+  variant,
+  color,
+  align,
+  noWrap,
+  as,
+  "aria-label": ariaLabel
+}: TypographyProps) => react177.DetailedReactHTMLElement<{
+  'aria-label': string;
+  'aria-level'?: number;
+  role?: react177.AriaRole;
+  title?: string;
+  className: string;
+  style: react177.CSSProperties;
+  id: string;
+  'data-testid': string;
+}, HTMLElement>;
+//#endregion
+export { Typography };

package/dist/Typography/Typography.d.ts

@@ -0,0 +1,32 @@
+import { TypographyProps } from "./types/index.js";
+import * as react1 from "react";
+
+//#region src/components/Typography/Typography.d.ts
+/**
+ * Renders Envive typography tokens with consistent styling and accessibility helpers.
+ */
+declare const Typography: ({
+  id,
+  testId,
+  children,
+  className,
+  style,
+  numberOfLines,
+  variant,
+  color,
+  align,
+  noWrap,
+  as,
+  "aria-label": ariaLabel
+}: TypographyProps) => react1.DetailedReactHTMLElement<{
+  'aria-label': string;
+  'aria-level'?: number;
+  role?: react1.AriaRole;
+  title?: string;
+  className: string;
+  style: react1.CSSProperties;
+  id: string;
+  'data-testid': string;
+}, HTMLElement>;
+//#endregion
+export { Typography };

package/dist/Typography/Typography.js

@@ -0,0 +1,40 @@
+import { TypographyAlign, TypographyColor } from "./types/index.js";
+import { useGetVariantProperties } from "./hooks/useGetVariantProperties.js";
+import { useGetColorProperties } from "./hooks/useGetColorProperties.js";
+import { useGetAlignProperties } from "./hooks/useGetAlignProperties.js";
+import { useGetNoWrapProperties } from "./hooks/useGetNoWrapProperties.js";
+import { useGetNumberOfLinesProperties } from "./hooks/useGetNumberOfLinesProperties.js";
+import { useGetAccessibilityAttributes } from "./hooks/useGetAccessibilityAttributes.js";
+import { createElement } from "react";
+import classNames from "classnames";
+
+//#region src/components/Typography/Typography.tsx
+/**
+* Renders Envive typography tokens with consistent styling and accessibility helpers.
+*/
+const Typography = ({ id, testId, children, className, style, numberOfLines, variant, color = TypographyColor.TEXT_PRIMARY, align = TypographyAlign.LEFT, noWrap = false, as, "aria-label": ariaLabel }) => {
+	const { variantClass, variantTag } = useGetVariantProperties(variant);
+	const elementTag = as ?? variantTag;
+	const { colorVarClass } = useGetColorProperties(color);
+	const { alignClass } = useGetAlignProperties(align);
+	const { noWrapClass } = useGetNoWrapProperties(noWrap);
+	const { numberOfLinesClass } = useGetNumberOfLinesProperties(numberOfLines);
+	const accessibilityAttributes = useGetAccessibilityAttributes({
+		tag: elementTag,
+		numberOfLines,
+		noWrap,
+		children
+	});
+	const finalAriaLabel = ariaLabel ?? accessibilityAttributes["aria-label"];
+	return createElement(elementTag, {
+		className: classNames(variantClass, colorVarClass, align && alignClass, noWrap && noWrapClass, numberOfLines && numberOfLinesClass, className),
+		style,
+		id,
+		"data-testid": testId,
+		...accessibilityAttributes,
+		"aria-label": finalAriaLabel
+	}, children);
+};
+
+//#endregion
+export { Typography };

package/dist/Typography/hooks/useGetAccessibilityAttributes.cjs

@@ -0,0 +1,30 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils = require('../utils/utils.cjs');
+let react = require("react");
+
+//#region src/components/Typography/hooks/useGetAccessibilityAttributes.ts
+const useGetAccessibilityAttributes = ({ tag, numberOfLines, noWrap, children }) => {
+	return (0, react.useMemo)(() => {
+		const accessibilityAttributes = {};
+		if (require_utils.isHeadingTag(tag)) {
+			const headingLevel = require_utils.getHeadingLevelFromTag(tag);
+			accessibilityAttributes.role = "heading";
+			accessibilityAttributes["aria-level"] = headingLevel;
+		}
+		if (Boolean(noWrap || numberOfLines && numberOfLines > 0) && (typeof children === "string" || typeof children === "number")) {
+			const label = String(children);
+			accessibilityAttributes.title = label;
+			accessibilityAttributes["aria-label"] = label;
+			if (!require_utils.isHeadingTag(tag)) accessibilityAttributes.role = "text";
+		}
+		return accessibilityAttributes;
+	}, [
+		tag,
+		numberOfLines,
+		noWrap,
+		children
+	]);
+};
+
+//#endregion
+exports.useGetAccessibilityAttributes = useGetAccessibilityAttributes;

package/dist/Typography/hooks/useGetAccessibilityAttributes.js

@@ -0,0 +1,29 @@
+import { getHeadingLevelFromTag, isHeadingTag } from "../utils/utils.js";
+import { useMemo } from "react";
+
+//#region src/components/Typography/hooks/useGetAccessibilityAttributes.ts
+const useGetAccessibilityAttributes = ({ tag, numberOfLines, noWrap, children }) => {
+	return useMemo(() => {
+		const accessibilityAttributes = {};
+		if (isHeadingTag(tag)) {
+			const headingLevel = getHeadingLevelFromTag(tag);
+			accessibilityAttributes.role = "heading";
+			accessibilityAttributes["aria-level"] = headingLevel;
+		}
+		if (Boolean(noWrap || numberOfLines && numberOfLines > 0) && (typeof children === "string" || typeof children === "number")) {
+			const label = String(children);
+			accessibilityAttributes.title = label;
+			accessibilityAttributes["aria-label"] = label;
+			if (!isHeadingTag(tag)) accessibilityAttributes.role = "text";
+		}
+		return accessibilityAttributes;
+	}, [
+		tag,
+		numberOfLines,
+		noWrap,
+		children
+	]);
+};
+
+//#endregion
+export { useGetAccessibilityAttributes };

package/dist/Typography/hooks/useGetAlignProperties.cjs

@@ -0,0 +1,19 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../types/index.cjs');
+let react = require("react");
+
+//#region src/components/Typography/hooks/useGetAlignProperties.ts
+const useGetAlignProperties = (align) => {
+	return { alignClass: (0, react.useMemo)(() => {
+		const alignClassMap = {
+			left: "envive-tw-text-left",
+			center: "envive-tw-text-center",
+			right: "envive-tw-text-right",
+			justify: "envive-tw-text-justify"
+		};
+		return alignClassMap[align] || alignClassMap[require_index.TypographyAlign.LEFT];
+	}, [align]) };
+};
+
+//#endregion
+exports.useGetAlignProperties = useGetAlignProperties;

package/dist/Typography/hooks/useGetAlignProperties.js

@@ -0,0 +1,18 @@
+import { TypographyAlign } from "../types/index.js";
+import { useMemo } from "react";
+
+//#region src/components/Typography/hooks/useGetAlignProperties.ts
+const useGetAlignProperties = (align) => {
+	return { alignClass: useMemo(() => {
+		const alignClassMap = {
+			left: "envive-tw-text-left",
+			center: "envive-tw-text-center",
+			right: "envive-tw-text-right",
+			justify: "envive-tw-text-justify"
+		};
+		return alignClassMap[align] || alignClassMap[TypographyAlign.LEFT];
+	}, [align]) };
+};
+
+//#endregion
+export { useGetAlignProperties };

package/dist/Typography/hooks/useGetColorProperties.cjs

@@ -0,0 +1,20 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_index = require('../types/index.cjs');
+let react = require("react");
+
+//#region src/components/Typography/hooks/useGetColorProperties.ts
+const useGetColorProperties = (color) => {
+	return { colorVarClass: (0, react.useMemo)(() => {
+		const colorClassMap = {
+			"text-primary": "envive-tw-text-[--envive-colors-text-primary]",
+			"text-secondary": "envive-tw-text-[--envive-colors-text-secondary]",
+			"text-accent": "envive-tw-text-[--envive-colors-text-accent]",
+			"text-link": "envive-tw-text-[--envive-colors-text-link]",
+			"text-light": "envive-tw-text-[--envive-colors-text-light]"
+		};
+		return colorClassMap[color] || colorClassMap[require_index.TypographyColor.TEXT_PRIMARY];
+	}, [color]) };
+};
+
+//#endregion
+exports.useGetColorProperties = useGetColorProperties;

package/dist/Typography/hooks/useGetColorProperties.js

@@ -0,0 +1,19 @@
+import { TypographyColor } from "../types/index.js";
+import { useMemo } from "react";
+
+//#region src/components/Typography/hooks/useGetColorProperties.ts
+const useGetColorProperties = (color) => {
+	return { colorVarClass: useMemo(() => {
+		const colorClassMap = {
+			"text-primary": "envive-tw-text-[--envive-colors-text-primary]",
+			"text-secondary": "envive-tw-text-[--envive-colors-text-secondary]",
+			"text-accent": "envive-tw-text-[--envive-colors-text-accent]",
+			"text-link": "envive-tw-text-[--envive-colors-text-link]",
+			"text-light": "envive-tw-text-[--envive-colors-text-light]"
+		};
+		return colorClassMap[color] || colorClassMap[TypographyColor.TEXT_PRIMARY];
+	}, [color]) };
+};
+
+//#endregion
+export { useGetColorProperties };

package/dist/Typography/hooks/useGetNoWrapProperties.cjs

@@ -0,0 +1,12 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Typography/hooks/useGetNoWrapProperties.ts
+const useGetNoWrapProperties = (noWrap) => {
+	return { noWrapClass: (0, react.useMemo)(() => {
+		return noWrap ? "envive-tw-whitespace-nowrap envive-tw-overflow-hidden envive-tw-text-ellipsis" : void 0;
+	}, [noWrap]) };
+};
+
+//#endregion
+exports.useGetNoWrapProperties = useGetNoWrapProperties;

package/dist/Typography/hooks/useGetNoWrapProperties.js

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+
+//#region src/components/Typography/hooks/useGetNoWrapProperties.ts
+const useGetNoWrapProperties = (noWrap) => {
+	return { noWrapClass: useMemo(() => {
+		return noWrap ? "envive-tw-whitespace-nowrap envive-tw-overflow-hidden envive-tw-text-ellipsis" : void 0;
+	}, [noWrap]) };
+};
+
+//#endregion
+export { useGetNoWrapProperties };

package/dist/Typography/hooks/useGetNumberOfLinesProperties.cjs

@@ -0,0 +1,21 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/Typography/hooks/useGetNumberOfLinesProperties.ts
+const useGetNumberOfLinesProperties = (numberOfLines) => {
+	return { numberOfLinesClass: (0, react.useMemo)(() => {
+		if (!numberOfLines) return "";
+		return {
+			1: "envive-tw-line-clamp-1",
+			2: "envive-tw-line-clamp-2",
+			3: "envive-tw-line-clamp-3",
+			4: "envive-tw-line-clamp-4",
+			5: "envive-tw-line-clamp-5",
+			6: "envive-tw-line-clamp-6",
+			7: "envive-tw-line-clamp-[7]"
+		}[numberOfLines] || "";
+	}, [numberOfLines]) };
+};
+
+//#endregion
+exports.useGetNumberOfLinesProperties = useGetNumberOfLinesProperties;

package/dist/Typography/hooks/useGetNumberOfLinesProperties.js

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+
+//#region src/components/Typography/hooks/useGetNumberOfLinesProperties.ts
+const useGetNumberOfLinesProperties = (numberOfLines) => {
+	return { numberOfLinesClass: useMemo(() => {
+		if (!numberOfLines) return "";
+		return {
+			1: "envive-tw-line-clamp-1",
+			2: "envive-tw-line-clamp-2",
+			3: "envive-tw-line-clamp-3",
+			4: "envive-tw-line-clamp-4",
+			5: "envive-tw-line-clamp-5",
+			6: "envive-tw-line-clamp-6",
+			7: "envive-tw-line-clamp-[7]"
+		}[numberOfLines] || "";
+	}, [numberOfLines]) };
+};
+
+//#endregion
+export { useGetNumberOfLinesProperties };