@ultraviolet/ui 1.31.7 → 1.32.1

package/dist/index.d.ts

@@ -1605,12 +1605,19 @@ type DateInputProps = Pick<ReactDatePickerProps<string, boolean>, 'locale' | 'on
     startDate?: Date | null;
     endDate?: Date | null;
     excludeDates?: Date[];
+    id?: string;
+    labelDescription?: ReactNode;
+    success?: string | boolean;
+    helper?: string;
+    size?: 'small' | 'medium' | 'large';
+    readOnly?: boolean;
+    tooltip?: string;
 };
 /**
  * DateInput is a wrapper around react-datepicker that provides a consistent look and feel with the rest of the Ultraviolet UI.
  * See https://reactdatepicker.com/ for more information.
  */
-declare const DateInput: ({ autoFocus, disabled, error, format, label, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, onFocus, required, excludeDates, value, selectsRange, className, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const DateInput: ({ autoFocus, disabled, error, format, label, labelDescription, locale, maxDate, minDate, startDate, endDate, name, onBlur, onChange, onFocus, required, excludeDates, value, selectsRange, className, id, success, helper, size, readOnly, tooltip, "data-testid": dataTestId, }: DateInputProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 declare const CONTAINER_SIZES: {
     readonly small: 720;
@@ -2058,7 +2065,7 @@ declare const NumberInputV2: react.ForwardRefExoticComponent<{
      */
     labelDescription?: ReactNode;
     error?: string | undefined;
-    success?: string | undefined;
+    success?: string | boolean | undefined;
     helper?: ReactNode;
     value?: string | number | undefined;
 } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "aria-label" | "onFocus" | "onBlur" | "onChange" | "max" | "min" | "name" | "disabled" | "step" | "placeholder" | "readOnly" | "required"> & react.RefAttributes<HTMLInputElement>>;
@@ -2957,7 +2964,7 @@ type StyledInputProps = {
     rightComponentLength: number;
 } & (InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>);
 type InputProps = Omit<Exclude<StyledInputProps, TextareaHTMLAttributes<HTMLTextAreaElement>>, 'inputSize'>;
-type TextInputProps$1 = {
+type TextInputProps = {
     'data-testid'?: string;
     ariaControls?: string;
     autoComplete?: string;
@@ -3003,50 +3010,32 @@ type TextInputProps$1 = {
  * TextInput component allows users to input text, with options for customization and validation.
  * It supports various input types and should be appropriately sized with clear labeling.
  */
-declare const TextInput$1: react.ForwardRefExoticComponent<TextInputProps$1 & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
 
-declare const TEXTINPUT_SIZE_HEIGHT: {
-    readonly large: 48;
-    readonly medium: 40;
-    readonly small: 32;
-};
-type TextInputSize = keyof typeof TEXTINPUT_SIZE_HEIGHT;
-type TextInputProps = {
-    autoFocus?: boolean;
-    className?: string;
-    clearable?: boolean;
-    'data-testid'?: string;
-    disabled?: boolean;
-    error?: string;
-    helper?: ReactNode;
-    iconName?: ComponentProps<typeof Icon>['name'];
-    id?: string;
-    label: string;
-    labelDescription?: ReactNode;
-    loading?: boolean;
-    minLength?: number;
-    maxLength?: number;
-    name?: string;
-    onBlur?: DOMAttributes<HTMLInputElement>['onBlur'];
-    onChange: (newValue: string) => void;
-    onFocus?: DOMAttributes<HTMLInputElement>['onFocus'];
-    onRandomize?: () => void;
-    placeholder?: string;
-    prefix?: string;
-    readOnly?: boolean;
-    required?: boolean;
-    size?: TextInputSize;
-    success?: string;
-    suffix?: string;
-    tabIndex?: number;
-    tooltip?: string;
-    type?: 'text' | 'password' | 'url' | 'email';
-    value?: string;
-};
 /**
  * This component offers an extended input HTML
  */
-declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
+declare const TextInputV2: react.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    clearable?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    error?: string | undefined;
+    helper?: ReactNode;
+    label?: string | undefined;
+    labelDescription?: ReactNode;
+    loading?: boolean | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+    onRandomize?: (() => void) | undefined;
+    onChange?: ((newValue: string) => void) | undefined;
+    prefix?: ReactNode;
+    size?: "large" | "small" | "medium" | undefined;
+    success?: string | boolean | undefined;
+    suffix?: ReactNode;
+    tooltip?: string | undefined;
+    type?: "text" | "email" | "password" | "url" | undefined;
+    value?: string | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "tabIndex" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "name" | "disabled" | "placeholder" | "readOnly" | "required"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const schedules: {
     half: readonly ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"];
@@ -3330,4 +3319,4 @@ declare const down: (size: ScreenSize, rules: string) => string;
 
 declare const normalize: () => string;
 
-export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput$1 as TextInput, TextInput as TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };
+export { ActionBar, Alert, Avatar, Badge, Banner, BarChart, BarStack, Breadcrumbs, Breakpoint, Bullet, Button, Card, Carousel, Checkbox, CheckboxGroup, CheckboxGroupCheckbox, CopyButton, DateInput, EmptyState, Expandable, GlobalAlert, LineChart, Link, List, Loader, Menu, MenuV2, Meter, Modal, Notice, NumberInput, NumberInputV2, Pagination, PasswordCheck, PasswordStrengthMeter, PieChart, Popover, Popup, ProgressBar, Radio, RadioGroup, Row, type SCWUITheme, SelectInput, SelectableCard, Separator, Skeleton, Snippet, Stack, Status, StepList, Stepper, SwitchButton, Table, Tabs, Tag, TagInput, TagList, Text, TextArea, TextInput, TextInputV2, TimeInput, ToastContainer, Toggle, ToggleGroup, Tooltip, type UltravioletUITheme, VerificationCode, bounce, down, extendTheme, fadeIn, fadeOut, flash, getUUID, normalize, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, toast, unfoldIn, unfoldOut, up, zoomIn, zoomOut };

package/dist/src/components/Breadcrumbs/index.js

@@ -13,11 +13,11 @@ const contractString = str => {
 const StyledOl = /*#__PURE__*/_styled("ol", {
   target: "ej0p0s41"
 })(process.env.NODE_ENV === "production" ? {
-  name: "v28fi1",
-  styles: "list-style:none;margin:0;padding:0;display:flex"
+  name: "55j7or",
+  styles: "list-style:none;margin:0;padding:0;display:flex;align-items:center"
 } : {
-  name: "v28fi1",
-  styles: "list-style:none;margin:0;padding:0;display:flex",
+  name: "55j7or",
+  styles: "list-style:none;margin:0;padding:0;display:flex;align-items:center",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const ItemContainer = /*#__PURE__*/_styled("li", {

package/dist/src/components/Checkbox/index.js

@@ -295,14 +295,14 @@ const Checkbox = /*#__PURE__*/forwardRef(({
             })
           }) : null]
         }), helper ? jsx(Text, {
-          variant: "bodySmall",
-          as: "p",
+          variant: "caption",
+          as: "span",
           prominence: "weak",
           sentiment: "neutral",
           children: helper
         }) : null, error ? jsx(ErrorText, {
-          variant: "bodySmall",
-          as: "p",
+          variant: "caption",
+          as: "span",
           sentiment: "danger",
           children: error
         }) : null]

package/dist/src/components/DateInput/index.js

@@ -1,24 +1,19 @@
 import _styled from '@emotion/styled/base';
 import { Global } from '@emotion/react';
 import { Icon } from '@ultraviolet/icons';
+import { useId } from 'react';
 import DatePicker, { registerLocale } from 'react-datepicker';
 import css_248z from '../../../react-datepicker/dist/react-datepicker.min.css.js';
 import { Button } from '../Button/index.js';
-import { Separator } from '../Separator/index.js';
 import { Stack } from '../Stack/index.js';
 import { Text } from '../Text/index.js';
-import { TextInput } from '../TextInput/index.js';
+import { TextInputV2 } from '../TextInputV2/index.js';
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
 
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const PREFIX = '.react-datepicker';
-const StyledSeparator = /*#__PURE__*/_styled(Separator, {
-  target: "e1bm75lk3"
-})("margin:0 ", ({
-  theme
-}) => theme.space['1'], ";height:100%;");
 const StyledWrapper = /*#__PURE__*/_styled("div", {
-  target: "e1bm75lk2"
+  target: "e1bm75lk1"
 })("width:100%;div", PREFIX, "-wrapper{display:block;}div", PREFIX, "__input-container{display:block;}div", PREFIX, "__triangle{display:none;}div", PREFIX, "__month-container{padding:16px;}", PREFIX, "-popper{z-index:1000;}.calendar{font-family:", ({
   theme
 }) => theme.typography.body.fontFamily, ";border-color:", ({
@@ -43,9 +38,17 @@ const StyledWrapper = /*#__PURE__*/_styled("div", {
   theme
 }) => theme.typography.bodySmallStrong.lineHeight, ";text-align:center;margin:3px;text-transform:capitalize;}", PREFIX, "__day{color:", ({
   theme
-}) => theme.colors.neutral.textWeak, ";font-size:", ({
+}) => theme.colors.neutral.textWeak, ";font-weight:", ({
+  theme
+}) => theme.typography.bodyStrong.weight, ";font-size:", ({
+  theme
+}) => theme.typography.bodyStrong.fontSize, ";width:26px;height:26px;margin-left:3px;margin-right:3px;}", PREFIX, "__day--outside-month{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";font-weight:", ({
   theme
-}) => theme.typography.body.fontSize, ";width:1.7rem;height:1.7rem;margin-left:3px;margin-right:3px;}", PREFIX, "__day--selected{color:", ({
+}) => theme.typography.bodyStrong.weight, ";font-size:", ({
+  theme
+}) => theme.typography.bodyStrong.fontSize, ";}", PREFIX, "__day--selected{color:", ({
   theme
 }) => theme.colors.primary.textStrong, ";background-color:", ({
   theme
@@ -98,11 +101,6 @@ const StyledWrapper = /*#__PURE__*/_styled("div", {
 }) => theme.colors.neutral.textDisabled, ";}", PREFIX, "__day--disabled:hover{color:", ({
   theme
 }) => theme.colors.neutral.textDisabled, ";background-color:transparent;}}");
-const StyledIconContainer = /*#__PURE__*/_styled("div", {
-  target: "e1bm75lk1"
-})("padding:", ({
-  theme
-}) => theme.space['1'], ";position:absolute;display:flex;align-items:center;right:0;top:0;height:48px;");
 const StyledText = /*#__PURE__*/_styled(Text, {
   target: "e1bm75lk0"
 })(process.env.NODE_ENV === "production" ? {
@@ -125,6 +123,7 @@ const DateInput = ({
   error,
   format = DEFAULT_FORMAT,
   label,
+  labelDescription,
   locale,
   maxDate,
   minDate,
@@ -139,8 +138,17 @@ const DateInput = ({
   value,
   selectsRange,
   className,
+  id,
+  success,
+  helper,
+  size = 'large',
+  readOnly = false,
+  tooltip,
   'data-testid': dataTestId
 }) => {
+  const uniqueId = useId();
+  const localId = id ?? uniqueId;
+
   // Linked to: https://github.com/Hacker0x01/react-datepicker/issues/3834
   const ReactDatePicker = DatePicker.default ?? DatePicker;
   const localeCode = (typeof locale === 'string' ? locale : locale?.code) ?? 'en-GB';
@@ -155,6 +163,7 @@ const DateInput = ({
       styles: css_248z
     }), jsx(StyledWrapper, {
       children: jsx(ReactDatePicker, {
+        required: required,
         "data-testid": dataTestId,
         className: className,
         autoFocus: autoFocus,
@@ -167,26 +176,23 @@ const DateInput = ({
         selected: value && !selectsRange ? new Date(value) : undefined,
         selectsRange: selectsRange,
         excludeDates: excludeDates,
-        customInput: jsxs("div", {
-          children: [jsx(TextInput, {
-            error: error ? `${error}` : undefined,
-            id: `date-input${name ? `-${name}` : ''}`,
-            label: label,
-            value: valueFormat || '',
+        customInput: jsx(TextInputV2, {
+          error: error,
+          success: success,
+          helper: helper,
+          id: localId,
+          label: label,
+          labelDescription: labelDescription,
+          value: valueFormat || '',
+          disabled: disabled,
+          size: size,
+          suffix: jsx(Icon, {
+            name: "calendar-range",
+            color: "neutral",
             disabled: disabled
-          }), jsxs(StyledIconContainer, {
-            children: [required ? jsx(Icon, {
-              name: "asterisk",
-              color: "danger",
-              size: 8
-            }) : null, jsx(StyledSeparator, {
-              direction: "vertical"
-            }), jsx(Icon, {
-              name: "calendar-range",
-              color: error ? 'danger' : 'neutral',
-              size: 24
-            })]
-          })]
+          }),
+          readOnly: readOnly,
+          tooltip: tooltip
         }),
         disabled: disabled,
         calendarClassName: "calendar",

package/dist/src/components/MenuV2/Item.js

@@ -75,35 +75,39 @@ const Item = /*#__PURE__*/forwardRef(({
   'data-testid': dataTestId
 }, ref) => {
   if (href && !disabled) {
-    return jsx(Tooltip, {
+    return jsx("div", {
+      children: jsx(Tooltip, {
+        text: tooltip,
+        children: jsx(StyledLinkItem, {
+          borderless: true,
+          href: href,
+          ref: ref,
+          onClick: disabled ? undefined : onClick,
+          role: "menuitem",
+          disabled: disabled,
+          sentiment: sentiment,
+          className: className,
+          "data-testid": dataTestId,
+          children: children
+        })
+      })
+    });
+  }
+  return jsx("div", {
+    children: jsx(Tooltip, {
       text: tooltip,
-      children: jsx(StyledLinkItem, {
-        borderless: true,
-        href: href,
+      children: jsx(StyledItem, {
+        type: "button",
         ref: ref,
-        onClick: disabled ? undefined : onClick,
         role: "menuitem",
         disabled: disabled,
+        onClick: onClick,
+        borderless: borderless,
         sentiment: sentiment,
         className: className,
         "data-testid": dataTestId,
         children: children
       })
-    });
-  }
-  return jsx(Tooltip, {
-    text: tooltip,
-    children: jsx(StyledItem, {
-      type: "button",
-      ref: ref,
-      role: "menuitem",
-      disabled: disabled,
-      onClick: onClick,
-      borderless: borderless,
-      sentiment: sentiment,
-      className: className,
-      "data-testid": dataTestId,
-      children: children
     })
   });
 });

package/dist/src/components/NumberInputV2/index.js

@@ -285,14 +285,14 @@ const NumberInputV2 = /*#__PURE__*/forwardRef(({
           })]
         })
       })
-    }), error || success || helper ? jsx(Text, {
+    }), error || typeof success === 'string' || typeof helper === 'string' ? jsx(Text, {
       variant: "caption",
       as: "span",
       prominence: !error && !success ? 'weak' : undefined,
       sentiment: helperSentiment,
       disabled: disabled || readOnly,
       children: error || success || helper
-    }) : null]
+    }) : null, !error && !success && typeof helper !== 'string' && helper ? helper : null]
   });
 });
 

package/dist/src/components/Radio/index.js

@@ -144,9 +144,10 @@ const Radio = /*#__PURE__*/forwardRef(({
           children: label
         }) : null]
       }), helper ? jsx(MargedText, {
-        as: "p",
-        variant: "bodySmall",
+        as: "span",
+        variant: "caption",
         prominence: "weak",
+        sentiment: "neutral",
         children: helper
       }) : null]
     })

package/dist/src/components/TextInput/index.js

@@ -410,6 +410,7 @@ const TextInput = /*#__PURE__*/forwardRef(({
         wrap: wrap,
         min: min,
         max: max,
+        required: required,
         ...inputProps
       }), hasLabel && jsx(StyledLabel, {
         edit: !!edit,

package/dist/src/components/TextInputV2/index.js

@@ -82,7 +82,7 @@ const StyledInputWrapper = /*#__PURE__*/_styled('div', {
 /**
  * This component offers an extended input HTML
  */
-const TextInput = /*#__PURE__*/forwardRef(({
+const TextInputV2 = /*#__PURE__*/forwardRef(({
   id,
   className,
   tabIndex,
@@ -107,12 +107,13 @@ const TextInput = /*#__PURE__*/forwardRef(({
   type = 'text',
   prefix,
   suffix,
-  iconName,
   size = 'large',
   loading,
   onRandomize,
   minLength,
-  maxLength
+  maxLength,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-label': ariaLabel
 }, ref) => {
   const localId = useId();
   const [hasFocus, setHasFocus] = useState(false);
@@ -151,124 +152,125 @@ const TextInput = /*#__PURE__*/forwardRef(({
           size: 8
         }) : null]
       }), labelDescription ?? null]
-    }), jsx(Tooltip, {
-      text: tooltip,
-      children: jsxs(StyledInputWrapper, {
-        hasFocus: hasFocus,
-        "data-disabled": disabled,
-        "data-readOnly": readOnly,
-        "data-success": !!success,
-        "data-error": !!error,
-        size: size,
-        children: [prefix ? jsx(BasicPrefixStack, {
-          direction: "row",
-          alignItems: "center",
-          children: jsx(Text, {
-            as: "span",
-            sentiment: "neutral",
-            variant: "bodySmall",
+    }), jsx("div", {
+      children: jsx(Tooltip, {
+        text: tooltip,
+        children: jsxs(StyledInputWrapper, {
+          hasFocus: hasFocus,
+          "data-disabled": disabled,
+          "data-readOnly": readOnly,
+          "data-success": !!success,
+          "data-error": !!error,
+          size: size,
+          children: [prefix ? jsx(BasicPrefixStack, {
+            direction: "row",
+            alignItems: "center",
+            children: typeof prefix === 'string' ? jsx(Text, {
+              as: "span",
+              sentiment: "neutral",
+              variant: "bodySmall",
+              disabled: disabled,
+              children: prefix
+            }) : prefix
+          }) : null, jsx(StyledInput, {
+            type: computedType,
+            "aria-invalid": !!error,
+            id: id ?? localId,
+            tabIndex: tabIndex,
+            autoFocus: autoFocus,
             disabled: disabled,
-            children: prefix
-          })
-        }) : null, iconName ? jsx(Icon, {
-          name: iconName,
-          size: 16
-        }) : null, jsx(StyledInput, {
-          type: computedType,
-          "aria-invalid": !!error,
-          id: id ?? localId,
-          tabIndex: tabIndex,
-          autoFocus: autoFocus,
-          disabled: disabled,
-          ref: ref,
-          value: value === null ? '' : value,
-          onChange: event => {
-            onChange(event.currentTarget.value);
-          },
-          isSuccess: !!success,
-          isError: !!error,
-          isClearable: !!computedClearable,
-          placeholder: placeholder,
-          "data-testid": dataTestId,
-          name: name,
-          onFocus: event => {
-            setHasFocus(true);
-            onFocus?.(event);
-          },
-          onBlur: event => {
-            setHasFocus(false);
-            onBlur?.(event);
-          },
-          readOnly: readOnly,
-          minLength: minLength,
-          maxLength: maxLength
-        }), success || error || loading || computedClearable ? jsxs(StateStack, {
-          direction: "row",
-          gap: 1,
-          alignItems: "center",
-          children: [computedClearable ? jsx(Button, {
-            "aria-label": "clear value",
-            disabled: disabled || !value,
-            variant: "ghost",
-            size: size === 'small' ? 'xsmall' : 'small',
-            icon: "close",
-            onClick: () => {
-              onChange('');
+            ref: ref,
+            value: value === null || value === undefined ? '' : value,
+            onChange: event => {
+              onChange?.(event.currentTarget.value);
             },
-            sentiment: "neutral"
-          }) : null, success ? jsx(Icon, {
-            name: "checkbox-circle-outline",
-            color: "success",
-            size: 16,
-            disabled: disabled
-          }) : null, error ? jsx(Icon, {
-            name: "alert",
-            color: "danger",
-            size: 16,
-            disabled: disabled
-          }) : null, loading && !disabled ? jsx(Loader, {
-            active: true,
-            size: 16
-          }) : null]
-        }) : null, suffix ? jsx(BasicSuffixStack, {
-          direction: "row",
-          alignItems: "center",
-          children: jsx(Text, {
-            as: "span",
-            sentiment: "neutral",
-            variant: "bodySmall",
-            disabled: disabled,
-            children: suffix
-          })
-        }) : null, type === 'password' ? jsx(CTASuffixStack, {
-          direction: "row",
-          alignItems: "center",
-          children: jsx(Button, {
-            disabled: disabled,
-            "data-testid": dataTestId ? `${dataTestId}-visibility-button` : undefined,
-            "aria-label": isPasswordVisible ? 'hide' : 'show',
-            onClick: () => {
-              setIsPasswordVisible(!isPasswordVisible);
+            isSuccess: !!success,
+            isError: !!error,
+            isClearable: !!computedClearable,
+            placeholder: placeholder,
+            "data-testid": dataTestId,
+            name: name,
+            onFocus: event => {
+              setHasFocus(true);
+              onFocus?.(event);
             },
-            variant: "ghost",
-            sentiment: "neutral",
-            icon: isPasswordVisible ? 'eye-off' : 'eye',
-            size: size === 'small' ? 'xsmall' : 'small'
-          })
-        }) : null, onRandomize ? jsx(CTASuffixStack, {
-          direction: "row",
-          alignItems: "center",
-          children: jsx(Button, {
-            disabled: disabled,
-            icon: "auto-fix",
-            size: size === 'small' ? 'xsmall' : 'small',
-            variant: "ghost",
-            sentiment: "neutral",
-            onClick: onRandomize
-          })
-        }) : null]
+            onBlur: event => {
+              setHasFocus(false);
+              onBlur?.(event);
+            },
+            readOnly: readOnly,
+            minLength: minLength,
+            maxLength: maxLength,
+            "aria-labelledby": ariaLabelledBy,
+            "aria-label": ariaLabel
+          }), success || error || loading || computedClearable ? jsxs(StateStack, {
+            direction: "row",
+            gap: 1,
+            alignItems: "center",
+            children: [computedClearable ? jsx(Button, {
+              "aria-label": "clear value",
+              disabled: disabled || !value,
+              variant: "ghost",
+              size: size === 'small' ? 'xsmall' : 'small',
+              icon: "close",
+              onClick: () => {
+                onChange?.('');
+              },
+              sentiment: "neutral"
+            }) : null, success ? jsx(Icon, {
+              name: "checkbox-circle-outline",
+              color: "success",
+              size: 16,
+              disabled: disabled
+            }) : null, error ? jsx(Icon, {
+              name: "alert",
+              color: "danger",
+              size: 16,
+              disabled: disabled
+            }) : null, loading && !disabled ? jsx(Loader, {
+              active: true,
+              size: 16
+            }) : null]
+          }) : null, suffix ? jsx(BasicSuffixStack, {
+            direction: "row",
+            alignItems: "center",
+            children: typeof suffix === 'string' ? jsx(Text, {
+              as: "span",
+              sentiment: "neutral",
+              variant: "bodySmall",
+              disabled: disabled,
+              children: suffix
+            }) : suffix
+          }) : null, type === 'password' ? jsx(CTASuffixStack, {
+            direction: "row",
+            alignItems: "center",
+            children: jsx(Button, {
+              disabled: disabled,
+              "data-testid": dataTestId ? `${dataTestId}-visibility-button` : undefined,
+              "aria-label": isPasswordVisible ? 'hide' : 'show',
+              onClick: () => {
+                setIsPasswordVisible(!isPasswordVisible);
+              },
+              variant: "ghost",
+              sentiment: "neutral",
+              icon: isPasswordVisible ? 'eye-off' : 'eye',
+              size: size === 'small' ? 'xsmall' : 'small'
+            })
+          }) : null, onRandomize ? jsx(CTASuffixStack, {
+            direction: "row",
+            alignItems: "center",
+            children: jsx(Button, {
+              disabled: disabled,
+              icon: "auto-fix",
+              size: size === 'small' ? 'xsmall' : 'small',
+              variant: "ghost",
+              sentiment: "neutral",
+              onClick: onRandomize
+            })
+          }) : null]
+        })
       })
-    }), error || success || typeof helper === 'string' ? jsx(Text, {
+    }), error || typeof success === 'string' || typeof helper === 'string' ? jsx(Text, {
       as: "p",
       variant: "caption",
       sentiment: sentiment,
@@ -279,4 +281,4 @@ const TextInput = /*#__PURE__*/forwardRef(({
   });
 });
 
-export { TEXTINPUT_SIZE_HEIGHT, TextInput };
+export { TEXTINPUT_SIZE_HEIGHT, TextInputV2 };

package/dist/src/index.js

@@ -60,7 +60,7 @@ export { TagList } from './components/TagList/index.js';
 export { Text } from './components/Text/index.js';
 export { TextArea } from './components/TextArea/index.js';
 export { TextInput } from './components/TextInput/index.js';
-export { TextInput as TextInputV2 } from './components/TextInputV2/index.js';
+export { TextInputV2 } from './components/TextInputV2/index.js';
 export { TimeInput } from './components/TimeInput/index.js';
 export { ToastContainer, toast } from './components/Toaster/index.js';
 export { Toggle } from './components/Toggle/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.31.7",
+  "version": "1.32.1",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -43,7 +43,7 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.48",
+    "@types/react": "18.2.52",
     "@types/react-datepicker": "4.19.5",
     "@types/react-dom": "18.2.18",
     "react": "18.2.0",
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.8.0",
-    "@ultraviolet/icons": "2.8.3"
+    "@ultraviolet/icons": "2.8.4"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",