@envive-ai/react-toolkit-v3 0.3.7 → 0.3.8

package/src/components/WidgetTextField/WidgetTextField.tsx

@@ -1,7 +1,7 @@
 import { Theme } from '../../../tokens/theme/theme';
 import { resolveTheme } from '../utils/resolveTheme';
 import { WidgetTextFieldComponents } from './components';
-import { type WidgetTextFieldProps } from './types/types';
+import { IconVariant, type WidgetTextFieldProps } from './types/types';
 
 export const WidgetTextField = ({
   id,
@@ -9,6 +9,7 @@ export const WidgetTextField = ({
   style,
   className,
   theme = Theme.GLOBAL_CUSTOM,
+  iconVariant = IconVariant.DEFAULT,
   placeholder,
   ariaLabel,
   disabled,
@@ -31,7 +32,12 @@ export const WidgetTextField = ({
       theme={resolvedTheme}
       disabled={disabled}
       ariaLabel={ariaLabel}
-      icon={<WidgetTextFieldComponents.Icon theme={resolvedTheme} />}
+      icon={
+        <WidgetTextFieldComponents.Icon
+          variant={iconVariant}
+          theme={resolvedTheme}
+        />
+      }
       text={<WidgetTextFieldComponents.FakeTextInput placeholder={placeholder} />}
     />
   );

package/src/components/WidgetTextField/__tests__/WidgetTextField.test.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { WidgetTextField } from '../WidgetTextField';
 import { Theme } from '../../../../tokens/theme/theme';
+import { IconVariant } from '../types/types';
 
 describe('WidgetTextField', () => {
   describe('Basic rendering', () => {
@@ -292,6 +293,59 @@ describe('WidgetTextField', () => {
     });
   });
 
+  describe('Icon variants', () => {
+    it('should render with DEFAULT icon variant', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          iconVariant={IconVariant.DEFAULT}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should render with SEARCH icon variant', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+          iconVariant={IconVariant.SEARCH}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should default to DEFAULT icon variant when not provided', () => {
+      const { container } = render(
+        <WidgetTextField
+          placeholder="Test"
+          theme={Theme.STANDARD}
+        />,
+      );
+      const svg = container.querySelector('svg');
+      expect(svg).toBeInTheDocument();
+    });
+
+    it('should work with iconVariant across different themes', () => {
+      const themes = [Theme.STANDARD, Theme.MODERN, Theme.MINIMAL, Theme.GLOBAL_CUSTOM];
+      themes.forEach(theme => {
+        const { container, unmount } = render(
+          <WidgetTextField
+            placeholder="Test"
+            theme={theme}
+            iconVariant={IconVariant.SEARCH}
+          />,
+        );
+        const svg = container.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
   describe('Component structure', () => {
     it('should render Container with correct props', () => {
       const { container } = render(

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

@@ -58,8 +58,8 @@ export const Container = ({
         justify="between"
         gap="2"
       >
-        {text}
-        {icon}
+        <div className="envive-tw-min-w-0 envive-tw-flex-1 envive-tw-overflow-hidden">{text}</div>
+        <div className="envive-tw-flex-shrink-0">{icon}</div>
       </Stack>
     </ContainerComponent>
   );

package/src/components/WidgetTextField/components/Icon.tsx

@@ -1,45 +1,88 @@
+import SvgSendStandard from '@envive-ai/react-icons/MagnifyingGlass';
+import SvgSendModern from '@envive-ai/react-icons/MagnifyingThin';
+import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
 import SendModern from '@envive-ai/react-icons/SendModern';
 import SendStandard from '@envive-ai/react-icons/SendStandard';
-import SendMinimalist from '@envive-ai/react-icons/SendMinimalist';
 import { Theme } from '../../../../tokens/theme/theme';
 import { CustomIcon } from '../../utils/CustomIcon';
+import { IconVariant } from '../types/types';
 
 type IconProps = {
   theme: Theme;
+  variant: IconVariant;
 };
 
-export const Icon = ({ theme }: IconProps) => {
+export const Icon = ({ variant, theme }: IconProps) => {
   if (theme === Theme.STANDARD) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendStandard />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          fill="var(--envive-colors-border-medium)"
+        />
+      );
+    }
     return (
       <CustomIcon
-        IconComponent={<SendStandard />}
+        IconComponent={<SvgSendStandard />}
         className="envive-tw-h-6 envive-tw-w-6"
         fill="var(--envive-colors-border-medium)"
       />
     );
   }
+
   if (theme === Theme.MODERN) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendModern />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          fill="var(--envive-colors-border-medium)"
+        />
+      );
+    }
     return (
       <CustomIcon
-        IconComponent={<SendModern />}
+        IconComponent={<SvgSendModern />}
         className="envive-tw-h-6 envive-tw-w-6"
-        fill="var(--envive-colors-border-medium)"
+        stroke="var(--envive-colors-border-medium)"
       />
     );
   }
+
   if (theme === Theme.MINIMAL) {
+    if (variant === IconVariant.DEFAULT) {
+      return (
+        <CustomIcon
+          IconComponent={<SendMinimalist />}
+          className="envive-tw-h-6 envive-tw-w-6"
+          stroke="var(--envive-colors-text-secondary)"
+        />
+      );
+    }
     return (
       <CustomIcon
         IconComponent={<SendMinimalist />}
         className="envive-tw-h-6 envive-tw-w-6"
-        stroke="var(--envive-colors-text-secondary)"
+        stroke="var(--envive-colors-text-light)"
+      />
+    );
+  }
+
+  if (variant === IconVariant.DEFAULT) {
+    return (
+      <CustomIcon
+        IconComponent={<SendStandard />}
+        className="envive-tw-h-6 envive-tw-w-6"
+        fill="var(--envive-colors-border-medium)"
       />
     );
   }
 
   return (
     <CustomIcon
-      IconComponent={<SendStandard />}
+      IconComponent={<SvgSendStandard />}
       className="envive-tw-h-6 envive-tw-w-6"
       fill="var(--envive-colors-border-medium)"
     />

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

@@ -7,12 +7,14 @@ export type UseGetContainerPropertiesProps = {
 
 export const useGetContainerProperties = ({ theme }: UseGetContainerPropertiesProps) => {
   const baseClassName =
-    'envive-tw-cursor-text envive-tw-border-[1px] envive-tw-border-solid envive-tw-border-border-light envive-tw-px-4 envive-tw-py-2';
+    'envive-tw-cursor-text envive-tw-border-solid envive-tw-px-4 envive-tw-py-2';
 
   const themeContainerClassName = useMemo(() => {
     const themeCotainerMap = {
-      [Theme.STANDARD]: 'envive-tw-rounded-global-custom',
-      [Theme.MODERN]: 'envive-tw-rounded-4',
+      [Theme.STANDARD]:
+        'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-global-custom',
+      [Theme.MODERN]: 'envive-tw-border-[1px] envive-tw-border-border-light envive-tw-rounded-4',
+      [Theme.MINIMAL]: 'envive-tw-border-b-[1px] envive-tw-border-text-light',
     };
     return themeCotainerMap[theme] ?? '';
   }, [theme]);

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

@@ -35,8 +35,18 @@ export type WidgetTextFieldProps = {
   ariaLabel?: string;
   /** Whether the text field is disabled. */
   disabled?: boolean;
+  /**
+   * Icon variant to choose whether to render an arrow or a search icon.
+   * @default IconVariant.DEFAULT
+   */
+  iconVariant?: IconVariant;
   /** Whether the text field is in a loading state. When true, displays a skeleton placeholder. */
   isLoading?: boolean;
   /** Callback function invoked when the text field is clicked or activated via keyboard. */
   onClick?: () => void;
 };
+
+export enum IconVariant {
+  DEFAULT = 'default',
+  SEARCH = 'search',
+}

package/dist/tokens/utils.cjs

@@ -1,6 +0,0 @@
-
-//#region tokens/utils.ts
-const addVar = (varName) => `var(--${varName})`;
-
-//#endregion
-exports.addVar = addVar;

package/dist/tokens/utils.js

@@ -1,5 +0,0 @@
-//#region tokens/utils.ts
-const addVar = (varName) => `var(--${varName})`;
-
-//#endregion
-export { addVar };