@envive-ai/react-toolkit-v3 0.3.32 → 0.3.33

package/src/components/ProductCard/types/index.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import { Theme } from '../../../../tokens/theme/theme';
 import { PromptButtonVariant } from '../../PromptButton';
 
+export enum ProductCardVariant {
+  DARK = 'dark',
+  LIGHT = 'light',
+}
+
 /**
  * Props for the Carousel component.
  */
@@ -70,6 +75,8 @@ export interface HeaderProps {
   textTransition?: number;
   /** Whether the animation should loop continuously. */
   loop?: boolean;
+  /** Controls text color: dark uses text-light (white), light uses text-primary. */
+  variant?: ProductCardVariant;
 }
 
 /**
@@ -82,6 +89,8 @@ export interface PosterProps {
   imageSrc: string;
   /** Fallback background color to display if the image fails to load. */
   fallbackColor?: string;
+  /** Controls overlay color on the image: dark uses black overlay, light uses white overlay. */
+  variant?: ProductCardVariant;
 }
 
 /**
@@ -116,4 +125,7 @@ export interface InputIconProps {
  * Excludes the 'children' prop from PosterProps.
  */
 export interface ProductCardProps
-  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {}
+  extends InputProps, CarouselProps, HeaderProps, Omit<PosterProps, 'children'> {
+  /** Controls text color: dark uses text-light (white), light uses text-primary. Defaults to dark. */
+  variant?: ProductCardVariant;
+}

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -19,6 +19,7 @@ export const WidgetTextField = ({
   voiceInputClassName,
   theme = Theme.GLOBAL_CUSTOM,
   minimalFrame = 'full',
+  minimalBorderVariant,
   iconVariant = IconVariant.DEFAULT,
   textColor = TypographyColor.TEXT_SECONDARY,
   placeholder,
@@ -80,6 +81,7 @@ export const WidgetTextField = ({
       className={className}
       theme={resolvedTheme}
       minimalFrame={minimalFrame}
+      minimalBorderVariant={minimalBorderVariant}
       disabled={disabled}
       ariaLabel={ariaLabel}
       icon={

package/src/components/WidgetTextField/components/Container.tsx

@@ -12,6 +12,7 @@ type ContainerProps = {
   className?: string;
   theme: Theme;
   minimalFrame?: 'full' | 'bottom-only';
+  minimalBorderVariant?: 'light' | 'primary';
   ariaLabel?: string;
   icon: React.ReactNode;
   text: React.ReactNode;
@@ -27,6 +28,7 @@ export const Container = ({
   className,
   theme,
   minimalFrame,
+  minimalBorderVariant,
   ariaLabel,
   icon,
   text,
@@ -38,6 +40,7 @@ export const Container = ({
     useGetContainerProperties({
       theme,
       minimalFrame,
+      minimalBorderVariant,
     });
 
   const { handleKeyDown } = useHandleKeyboard({ onClick });

package/src/components/WidgetTextField/hooks/useGetContainerProperties.ts

@@ -4,19 +4,25 @@ import { Theme } from '../../../../tokens/theme/theme';
 export type UseGetContainerPropertiesProps = {
   theme: Theme;
   minimalFrame?: 'full' | 'bottom-only';
+  minimalBorderVariant?: 'light' | 'primary';
 };
 
 export const useGetContainerProperties = ({
   theme,
   minimalFrame = 'full',
+  minimalBorderVariant = 'light',
 }: UseGetContainerPropertiesProps) => {
   const baseClassName =
     'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2 envive-tw-bg-[--envive-colors-background-light]';
 
   const themeContainerClassName = useMemo(() => {
+    const borderColorClass =
+      minimalBorderVariant === 'primary'
+        ? 'envive-tw-border-text-primary'
+        : 'envive-tw-border-text-light';
     const minimalBorderClass =
       minimalFrame === 'bottom-only'
-        ? 'envive-tw-border-b-[1px] envive-tw-border-text-light'
+        ? `envive-tw-border-b-[1px] ${borderColorClass}`
         : 'envive-tw-border-[1px] envive-tw-border-border-light';
 
     const themeCotainerMap = {
@@ -27,7 +33,7 @@ export const useGetContainerProperties = ({
       [Theme.GLOBAL_CUSTOM]: '',
     };
     return themeCotainerMap[theme] ?? '';
-  }, [theme, minimalFrame]);
+  }, [theme, minimalFrame, minimalBorderVariant]);
 
   const containerWrapperClassName =
     'envive-tw-gap-4 envive-tw-flex envive-tw-w-full envive-tw-flex-row';

package/src/components/WidgetTextField/types/types.ts

@@ -36,6 +36,8 @@ export type WidgetTextFieldProps = {
    * @default 'full'
    */
   minimalFrame?: 'full' | 'bottom-only';
+  /** Border color for the bottom-only minimal frame. `light` = text-light (white), `primary` = text-primary. @default 'light' */
+  minimalBorderVariant?: 'light' | 'primary';
   /** Placeholder text displayed in the text field. */
   placeholder?: string;
   /** Accessible label for screen readers. If not provided, the placeholder will be used. */