@ttoss/ui 5.11.1 → 6.0.1

package/dist/esm/index.js

@@ -384,8 +384,6 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
 }, "InfiniteLinearProgress");
 
 // src/components/Input.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
-import * as React7 from "react";
 import { Input as InputUI } from "theme-ui";
 var isInputIconConfig = /* @__PURE__ */__name(icon => {
   return icon !== void 0 && typeof icon === "object" && "icon" in icon && (typeof icon.icon === "string" || typeof icon.icon === "object" && "body" in icon.icon);
@@ -418,10 +416,7 @@ var Input = /* @__PURE__ */__name(({
   } : normalizedTrailingIconProp;
   const isWarning = !isInvalid && trailingIcon?.icon === "warning-alt";
   const wrapperClassName = [className, isWarning && "is-warning"].filter(Boolean).join(" ");
-  const id = React7.useId();
-  const leadingTooltipId = `${id}-leading-tooltip`;
-  const trailingTooltipId = `${id}-trailing-tooltip`;
-  return /* @__PURE__ */React7.createElement(Flex, {
+  return /* @__PURE__ */React.createElement(Flex, {
     className: wrapperClassName,
     sx: {
       ...sx,
@@ -429,24 +424,17 @@ var Input = /* @__PURE__ */__name(({
       padding: 0,
       border: "none"
     }
-  }, normalizedLeadingIcon && /* @__PURE__ */React7.createElement(React7.Fragment, null, /* @__PURE__ */React7.createElement(Text, {
+  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
+    ...normalizedLeadingIcon,
     "data-testid": "input-leading-icon",
-    "data-tooltip-id": normalizedLeadingIcon.tooltip ? leadingTooltipId : void 0,
+    variant: normalizedLeadingIcon.variant ?? "info",
     sx: {
       position: "absolute",
       alignSelf: "center",
       left: "1rem",
-      cursor: normalizedLeadingIcon.onClick ? "pointer" : "default"
-    },
-    onClick: normalizedLeadingIcon.onClick,
-    variant: "leading-icon"
-  }, /* @__PURE__ */React7.createElement(Icon4, {
-    inline: true,
-    icon: normalizedLeadingIcon.icon
-  })), normalizedLeadingIcon.tooltip && /* @__PURE__ */React7.createElement(Tooltip, {
-    id: leadingTooltipId,
-    ...normalizedLeadingIcon.tooltipProps
-  }, normalizedLeadingIcon.tooltip)), /* @__PURE__ */React7.createElement(InputUI, {
+      ...normalizedLeadingIcon.sx
+    }
+  }), /* @__PURE__ */React.createElement(InputUI, {
     sx: {
       fontFamily: "body",
       paddingY: "3",
@@ -458,33 +446,26 @@ var Input = /* @__PURE__ */__name(({
     },
     className,
     ...inputProps
-  }), trailingIcon && /* @__PURE__ */React7.createElement(React7.Fragment, null, /* @__PURE__ */React7.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
+    ...trailingIcon,
     "data-testid": "input-trailing-icon",
-    "data-tooltip-id": trailingIcon.tooltip ? trailingTooltipId : void 0,
+    variant: trailingIcon.variant ?? "info",
     sx: {
       position: "absolute",
       right: "1rem",
       alignSelf: "center",
       color: isWarning ? "feedback.text.caution.default" : void 0,
-      cursor: trailingIcon.onClick ? "pointer" : "default",
-      fontSize: "xl"
-    },
-    variant: "trailing-icon",
-    onClick: trailingIcon.onClick
-  }, /* @__PURE__ */React7.createElement(Icon4, {
-    inline: true,
-    icon: trailingIcon.icon
-  })), trailingIcon.tooltip && /* @__PURE__ */React7.createElement(Tooltip, {
-    id: trailingTooltipId,
-    ...trailingIcon.tooltipProps
-  }, trailingIcon.tooltip)));
+      fontSize: "xl",
+      ...trailingIcon.sx
+    }
+  }));
 }, "Input");
 
 // src/components/InputNumber.tsx
-import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React8 from "react";
+import { Icon as Icon4 } from "@ttoss/react-icons";
+import * as React7 from "react";
 import { Input as Input2 } from "theme-ui";
-var InputNumber = /* @__PURE__ */React8.forwardRef(({
+var InputNumber = /* @__PURE__ */React7.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -492,7 +473,7 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React8.useMemo(() => {
+  const sxProps = React7.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -544,7 +525,7 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
     }
     onChange(value + 1);
   }, "handleChangeDown");
-  return /* @__PURE__ */React8.createElement(Flex, {
+  return /* @__PURE__ */React7.createElement(Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -554,7 +535,7 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"]
-  }, /* @__PURE__ */React8.createElement(Input2, {
+  }, /* @__PURE__ */React7.createElement(Input2, {
     ref,
     variant: "forms.inputNumber",
     sx: sxProps,
@@ -564,7 +545,7 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
     }, "onChange"),
     value,
     ...inputProps
-  }), /* @__PURE__ */React8.createElement(Text, {
+  }), /* @__PURE__ */React7.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -573,9 +554,9 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeUp
-  }, /* @__PURE__ */React8.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     icon: "picker-down"
-  })), infoIcon && /* @__PURE__ */React8.createElement(Text, {
+  })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -584,9 +565,9 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
       cursor: onClickInfoIcon ? "pointer" : "default"
     },
     onClick: onClickInfoIcon
-  }, /* @__PURE__ */React8.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     icon: "info"
-  })), /* @__PURE__ */React8.createElement(Text, {
+  })), /* @__PURE__ */React7.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -595,23 +576,23 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeDown
-  }, /* @__PURE__ */React8.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     icon: "picker-up"
   })));
 });
 InputNumber.displayName = "InputNumber";
 
 // src/components/InputPassword.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 var InputPassword = /* @__PURE__ */__name(({
   showPasswordByDefault = false,
   ...inputPasswordProps
 }) => {
-  const [hidePass, setHidePass] = React9.useState(Boolean(!showPasswordByDefault));
+  const [hidePass, setHidePass] = React8.useState(Boolean(!showPasswordByDefault));
   const {
     icon,
     inputType
-  } = React9.useMemo(() => {
+  } = React8.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -622,7 +603,7 @@ var InputPassword = /* @__PURE__ */__name(({
       return !prev;
     });
   }, "handleClick");
-  return /* @__PURE__ */React9.createElement(Input, {
+  return /* @__PURE__ */React8.createElement(Input, {
     ...inputPasswordProps,
     trailingIcon: {
       icon,
@@ -633,8 +614,8 @@ var InputPassword = /* @__PURE__ */__name(({
 }, "InputPassword");
 
 // src/components/Label.tsx
-import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React10 from "react";
+import { Icon as Icon5 } from "@ttoss/react-icons";
+import * as React9 from "react";
 import { Label as LabelUi } from "theme-ui";
 
 // src/components/Tooltip.tsx
@@ -716,9 +697,9 @@ var Label = /* @__PURE__ */__name(({
   sx,
   ...props
 }) => {
-  const id = React10.useId();
+  const id = React9.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React10.createElement(LabelUi, {
+  return /* @__PURE__ */React9.createElement(LabelUi, {
     sx: {
       alignItems: "center",
       fontSize: "sm",
@@ -728,7 +709,7 @@ var Label = /* @__PURE__ */__name(({
       ...sx
     },
     ...props
-  }, children, tooltip && /* @__PURE__ */React10.createElement(Text, {
+  }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
     "data-tooltip-id": tooltipId,
     sx: {
       color: "currentcolor",
@@ -736,23 +717,23 @@ var Label = /* @__PURE__ */__name(({
       marginLeft: "1"
     },
     "aria-label": TOOLTIP_LABEL
-  }, /* @__PURE__ */React10.createElement(Icon6, {
+  }, /* @__PURE__ */React9.createElement(Icon5, {
     icon: "info"
-  }), /* @__PURE__ */React10.createElement(Tooltip, {
-    ...tooltip,
-    id: tooltipId
+  }), /* @__PURE__ */React9.createElement(Tooltip, {
+    id: tooltipId,
+    ...tooltip
   })));
 }, "Label");
 
 // src/components/Link.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 import { Link as LinkUi } from "theme-ui";
-var Link = /* @__PURE__ */React11.forwardRef(({
+var Link = /* @__PURE__ */React10.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */React11.createElement(LinkUi, {
+  return /* @__PURE__ */React10.createElement(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -767,7 +748,7 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/SegmentedControl.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
 var SegmentedControl = /* @__PURE__ */__name(({
   options,
@@ -779,8 +760,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
   sx,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React12.useState(propValue || defaultValue);
-  React12.useEffect(() => {
+  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
+  React11.useEffect(() => {
     if (propValue !== void 0) {
       setInternalValue(propValue);
     }
@@ -798,7 +779,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
     } : option;
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
-  return /* @__PURE__ */React12.createElement(Flex2, {
+  return /* @__PURE__ */React11.createElement(Flex2, {
     className,
     sx: {
       width: "100%",
@@ -881,18 +862,18 @@ var SegmentedControl = /* @__PURE__ */__name(({
       ...sx
     },
     ...rest
-  }, /* @__PURE__ */React12.createElement("div", {
+  }, /* @__PURE__ */React11.createElement("div", {
     className: "rc-segmented"
-  }, /* @__PURE__ */React12.createElement(Flex2, {
+  }, /* @__PURE__ */React11.createElement(Flex2, {
     className: "rc-segmented-group custom-segmented-group"
   }, normalizedOptions.map((option, index) => {
     const isSelected = option.value === currentValue;
     const isLastItem = index === normalizedOptions.length - 1;
     const isItemDisabled = disabled || option.disabled;
     const showDivider = !isLastItem && option.value !== currentValue && normalizedOptions[index + 1].value !== currentValue;
-    return /* @__PURE__ */React12.createElement(React12.Fragment, {
+    return /* @__PURE__ */React11.createElement(React11.Fragment, {
       key: `${index}-${option.value}`
-    }, /* @__PURE__ */React12.createElement(Box3, {
+    }, /* @__PURE__ */React11.createElement(Box3, {
       as: "label",
       className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
       onClick: /* @__PURE__ */__name(() => {
@@ -900,7 +881,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onClick")
-    }, /* @__PURE__ */React12.createElement("input", {
+    }, /* @__PURE__ */React11.createElement("input", {
       type: "radio",
       value: option.value,
       checked: isSelected,
@@ -910,9 +891,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onChange")
-    }), /* @__PURE__ */React12.createElement("div", {
+    }), /* @__PURE__ */React11.createElement("div", {
       className: "rc-segmented-item-label"
-    }, option.label)), showDivider && /* @__PURE__ */React12.createElement(Box3, {
+    }, option.label)), showDivider && /* @__PURE__ */React11.createElement(Box3, {
       className: "segmented-divider",
       sx: {
         height: "60%",
@@ -923,7 +904,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
         zIndex: 3
       }
     }));
-  }), currentValue !== void 0 && /* @__PURE__ */React12.createElement("div", {
+  }), currentValue !== void 0 && /* @__PURE__ */React11.createElement("div", {
     className: "rc-segmented-thumb",
     style: {
       width: `${100 / normalizedOptions.length}%`,
@@ -935,8 +916,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
 }, "SegmentedControl");
 
 // src/components/Select.tsx
-import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React13 from "react";
+import { Icon as Icon6 } from "@ttoss/react-icons";
+import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
 var Control = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -956,7 +937,7 @@ var Control = /* @__PURE__ */__name(props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */React13.createElement(Box, {
+  return /* @__PURE__ */React12.createElement(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -965,7 +946,7 @@ var Control = /* @__PURE__ */__name(props => {
         paddingY: "3"
       }
     }
-  }, /* @__PURE__ */React13.createElement(components.Control, props));
+  }, /* @__PURE__ */React12.createElement(components.Control, props));
 }, "Control");
 var DropdownIndicator = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -975,7 +956,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */React13.createElement(Text, {
+  return /* @__PURE__ */React12.createElement(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -983,14 +964,14 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */React13.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon6, {
     icon: "picker-down"
   }));
 }, "DropdownIndicator");
 var IndicatorsContainer = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React13.createElement(Box, {
+  return /* @__PURE__ */React12.createElement(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -1000,7 +981,7 @@ var IndicatorsContainer = /* @__PURE__ */__name(({
 var Placeholder = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React13.createElement(Text, {
+  return /* @__PURE__ */React12.createElement(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -1018,10 +999,10 @@ var SelectContainer = /* @__PURE__ */__name(({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    React13.createElement(Box, {
+    React12.createElement(Box, {
       sx,
       css: css2
-    }, /* @__PURE__ */React13.createElement(components.SelectContainer, props, children))
+    }, /* @__PURE__ */React12.createElement(components.SelectContainer, props, children))
   );
 }, "SelectContainer");
 var ValueContainer = /* @__PURE__ */__name(({
@@ -1047,26 +1028,26 @@ var ValueContainer = /* @__PURE__ */__name(({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */React13.createElement(Flex, {
+  return /* @__PURE__ */React12.createElement(Flex, {
     sx: {
       gap: "4",
       flex: 1
     }
-  }, finalLeadingIcon && /* @__PURE__ */React13.createElement(Text, {
+  }, finalLeadingIcon && /* @__PURE__ */React12.createElement(Text, {
     sx: {
       alignSelf: "center",
       pointerEvents: "none",
       lineHeight: 0,
       fontSize: "md"
     }
-  }, /* @__PURE__ */React13.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon6, {
     icon: finalLeadingIcon
-  })), /* @__PURE__ */React13.createElement(Flex, {
+  })), /* @__PURE__ */React12.createElement(Flex, {
     sx: {
       flex: 1,
       alignItems: "center"
     }
-  }, children), (trailingIcon || hasError) && /* @__PURE__ */React13.createElement(Text, {
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React12.createElement(Text, {
     className: hasError ? "error-icon" : "",
     sx: {
       alignSelf: "center",
@@ -1075,11 +1056,11 @@ var ValueContainer = /* @__PURE__ */__name(({
       fontSize: "md",
       color: trailingIconColor
     }
-  }, /* @__PURE__ */React13.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon6, {
     icon: hasError ? "warning-alt" : trailingIcon
   })));
 }, "ValueContainer");
-var Select = /* @__PURE__ */React13.forwardRef(({
+var Select = /* @__PURE__ */React12.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -1088,7 +1069,7 @@ var Select = /* @__PURE__ */React13.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */React13.createElement(ReactSelect, {
+  return /* @__PURE__ */React12.createElement(ReactSelect, {
     ref,
     /**
      * https://react-select.com/components
@@ -1170,7 +1151,7 @@ var Switch = /* @__PURE__ */__name(props => {
 }, "Switch");
 
 // src/components/Tag.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 var tagVariantMap = {
   positive: {
     bg: "feedback.background.positive.default",
@@ -1227,7 +1208,7 @@ var Tag = /* @__PURE__ */__name(({
     alignItems: "center"
   };
   if (Array.isArray(children)) {
-    return /* @__PURE__ */React14.createElement(Box, {
+    return /* @__PURE__ */React13.createElement(Box, {
       as: "span",
       sx: {
         ml: 2,
@@ -1237,7 +1218,7 @@ var Tag = /* @__PURE__ */__name(({
         ...sx
       }
     }, children.map((child, i) => {
-      return /* @__PURE__ */React14.createElement(Box, {
+      return /* @__PURE__ */React13.createElement(Box, {
         key: i,
         as: "span",
         sx: {
@@ -1251,7 +1232,7 @@ var Tag = /* @__PURE__ */__name(({
       }, child);
     }));
   }
-  return /* @__PURE__ */React14.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     as: "span",
     sx: {
       ...baseStyles,
@@ -1261,16 +1242,16 @@ var Tag = /* @__PURE__ */__name(({
 }, "Tag");
 
 // src/components/Textarea.tsx
-import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React15 from "react";
+import { Icon as Icon7 } from "@ttoss/react-icons";
+import * as React14 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-var Textarea = /* @__PURE__ */React15.forwardRef(({
+var Textarea = /* @__PURE__ */React14.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */React15.createElement(Flex, {
+  return /* @__PURE__ */React14.createElement(Flex, {
     className,
     sx: {
       ...sx,
@@ -1278,7 +1259,7 @@ var Textarea = /* @__PURE__ */React15.forwardRef(({
       padding: 0,
       border: "none"
     }
-  }, /* @__PURE__ */React15.createElement(TextareaUI, {
+  }, /* @__PURE__ */React14.createElement(TextareaUI, {
     ref,
     sx: {
       fontFamily: "body",
@@ -1290,19 +1271,51 @@ var Textarea = /* @__PURE__ */React15.forwardRef(({
     },
     className,
     ...textareaProps
-  }), trailingIcon && /* @__PURE__ */React15.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React14.createElement(Text, {
     sx: {
       position: "absolute",
       right: "1.25rem",
       top: "0.75rem"
     }
-  }, /* @__PURE__ */React15.createElement(Icon8, {
+  }, /* @__PURE__ */React14.createElement(Icon7, {
     inline: true,
     icon: trailingIcon
   })));
 });
 Textarea.displayName = "Textarea";
 
+// src/components/TooltipIcon.tsx
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import * as React15 from "react";
+var TooltipIcon = /* @__PURE__ */__name(({
+  icon,
+  onClick,
+  tooltip,
+  "data-testid": dataTestId,
+  variant,
+  sx
+}) => {
+  const id = React15.useId();
+  const tooltipId = `${id}-tooltip`;
+  return /* @__PURE__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(Text, {
+    "data-testid": dataTestId,
+    "data-tooltip-id": tooltip ? tooltipId : void 0,
+    sx: {
+      cursor: onClick ? "pointer" : "default",
+      ...sx
+    },
+    onClick,
+    variant
+  }, /* @__PURE__ */React15.createElement(Icon8, {
+    inline: true,
+    icon
+  })), tooltip && /* @__PURE__ */React15.createElement(Tooltip, {
+    id: tooltipId,
+    ...tooltip,
+    variant
+  }));
+}, "TooltipIcon");
+
 // src/theme/ThemeProvider.tsx
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
@@ -1332,4 +1345,4 @@ var useTheme = useThemeUI;
 import { keyframes } from "@emotion/react";
 import { useBreakpointIndex, useResponsiveValue } from "@theme-ui/match-media";
 import { BaseStyles, Global as Global2 } from "theme-ui";
-export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -64,15 +64,69 @@ declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 type TooltipProps = ITooltip & SxProp;
 declare const Tooltip: ({ variant, sx, ...props }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
-interface InputIconConfig {
+/**
+ * Props for the TooltipIcon component.
+ */
+interface TooltipIconProps {
+    /**
+     * The icon to display. Can be a string identifier or an icon object from @ttoss/react-icons.
+     */
     icon: IconType;
+    /**
+     * Optional click handler for the icon.
+     */
     onClick?: () => void;
-    tooltip?: string;
-    tooltipProps?: Omit<TooltipProps, 'children' | 'anchorSelect'>;
+    /**
+     * Optional tooltip configuration.
+     * Pass tooltip props to display a tooltip when hovering over the icon.
+     * The 'variant' prop is excluded as it's controlled by the component's variant prop.
+     */
+    tooltip?: Omit<TooltipProps, 'variant'>;
+    /**
+     * Test ID for testing purposes.
+     */
+    'data-testid'?: string;
+    /**
+     * Visual variant for both the text wrapper and tooltip.
+     * @default 'info'
+     */
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Additional styles to apply to the Text wrapper component.
+     */
+    sx?: Record<string, unknown>;
 }
+/**
+ * TooltipIcon component renders an icon with an optional tooltip.
+ *
+ * This component is useful for displaying icons with explanatory tooltips,
+ * especially in contexts where space is limited or additional information
+ * should be revealed on hover.
+ *
+ * @example
+ * ```tsx
+ * <TooltipIcon
+ *   icon="info-circle"
+ *   tooltip={{ children: 'Additional information' }}
+ *   variant="info"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <TooltipIcon
+ *   icon="warning-alt"
+ *   tooltip={{ children: 'Warning message', place: 'top' }}
+ *   variant="warning"
+ *   onClick={() => console.log('Clicked')}
+ * />
+ * ```
+ */
+declare const TooltipIcon: ({ icon, onClick, tooltip, "data-testid": dataTestId, variant, sx, }: TooltipIconProps) => react_jsx_runtime.JSX.Element;
+
 interface InputProps extends InputProps$1 {
-    leadingIcon?: InputIconConfig | IconType;
-    trailingIcon?: InputIconConfig | IconType;
+    leadingIcon?: TooltipIconProps | IconType;
+    trailingIcon?: TooltipIconProps | IconType;
 }
 declare const Input: ({ leadingIcon, trailingIcon: trailingIconProp, className, sx, ...inputProps }: InputProps) => react_jsx_runtime.JSX.Element;
 
@@ -181,4 +235,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipProps, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.11.1",
+  "version": "6.0.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -29,12 +29,12 @@
     "react-select": "^5.10.2",
     "react-tooltip": "^5.30.0",
     "theme-ui": "^0.17.2",
-    "@ttoss/theme": "^2.7.0"
+    "@ttoss/theme": "^2.7.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.5.3"
+    "@ttoss/react-icons": "^0.5.4"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -45,8 +45,8 @@
     "react": "^19.2.0",
     "tsup": "^8.5.1",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/test-utils": "^3.0.4",
-    "@ttoss/react-icons": "^0.5.3"
+    "@ttoss/react-icons": "^0.5.4",
+    "@ttoss/test-utils": "^4.0.0"
   },
   "keywords": [
     "React",