@ttoss/ui 5.10.8 → 5.11.1

package/README.md

@@ -89,7 +89,7 @@ export const customTheme: Theme = {
 - `ActionButton` - Action-specific buttons
 - `IconButton` - Icon-only buttons
 - `CloseButton` - Close/dismiss buttons
-- `Input` - Text input fields
+- `Input` - Text input fields with icon support
 - `InputNumber` - Numeric input fields
 - `InputPassword` - Password input with reveal
 - `Textarea` - Multi-line text input
@@ -100,6 +100,115 @@ export const customTheme: Theme = {
 - `Slider` - Range slider controls
 - `SegmentedControl` - Multi-option selector
 
+#### Input Component Features
+
+The `Input` component supports leading and trailing icons with tooltips:
+
+```tsx
+import { Input } from '@ttoss/ui';
+
+// Simplified syntax - icon as string
+<Input
+  placeholder="Search..."
+  leadingIcon="ant-design:search-outlined"
+  trailingIcon="ant-design:info-circle-outlined"
+/>
+
+// Full syntax with tooltip and click handler
+<Input
+  placeholder="Search..."
+  leadingIcon={{
+    icon: 'ant-design:search-outlined',
+    onClick: () => console.log('Search clicked'),
+    tooltip: 'Click to search'
+  }}
+  trailingIcon={{
+    icon: 'ant-design:info-circle-outlined',
+    tooltip: 'Additional information',
+    tooltipProps: { place: 'right' }
+  }}
+/>
+
+// SVG icons from @iconify
+import searchIcon from '@iconify/icons-mdi/search';
+
+<Input
+  placeholder="Email"
+  leadingIcon={searchIcon}
+/>
+```
+
+**Testing Input Icons:**
+
+Use `data-testid` to identify icons in tests. The Input component provides test IDs for icon containers, and each icon has its own `data-testid="iconify-icon"`:
+
+```tsx
+import { render, screen } from '@testing-library/react';
+
+test('should render input with icons', () => {
+  render(
+    <Input placeholder="Search" leadingIcon="search" trailingIcon="info" />
+  );
+
+  // Get icon containers (for clicking and tooltip checks)
+  const leadingIconContainer = screen.getByTestId('input-leading-icon');
+  const trailingIconContainer = screen.getByTestId('input-trailing-icon');
+
+  expect(leadingIconContainer).toBeInTheDocument();
+  expect(trailingIconContainer).toBeInTheDocument();
+
+  // Get the actual icon elements (for checking icon properties)
+  const iconElement = leadingIconContainer.querySelector(
+    '[data-testid="iconify-icon"]'
+  );
+  expect(iconElement).toHaveAttribute('icon', 'search');
+});
+
+// Test icon clicks (click on container, where onClick is attached)
+test('should call onClick when icon is clicked', async () => {
+  const handleClick = jest.fn();
+
+  render(
+    <Input
+      placeholder="Search"
+      leadingIcon={{ icon: 'search', onClick: handleClick }}
+    />
+  );
+
+  const leadingIcon = screen.getByTestId('input-leading-icon');
+  await userEvent.click(leadingIcon);
+  expect(handleClick).toHaveBeenCalled();
+});
+
+// Test tooltips (check container for tooltip attributes)
+test('should render tooltip', () => {
+  render(
+    <Input
+      placeholder="Search"
+      leadingIcon={{ icon: 'search', tooltip: 'Search here' }}
+    />
+  );
+
+  const iconContainer = screen.getByTestId('input-leading-icon');
+  expect(iconContainer).toHaveAttribute(
+    'data-tooltip-id',
+    'input-leading-icon-tooltip'
+  );
+});
+
+// Alternative: Query all icons and differentiate by position
+test('should render both icons using iconify-icon testid', () => {
+  render(<Input leadingIcon="search" trailingIcon="info" />);
+
+  const icons = screen.getAllByTestId('iconify-icon');
+  expect(icons).toHaveLength(2);
+  expect(icons[0]).toHaveAttribute('icon', 'search'); // leading
+  expect(icons[1]).toHaveAttribute('icon', 'info'); // trailing
+});
+```
+
+````
+
 ### Feedback & Status
 
 - `Badge` - Status indicators and labels
@@ -134,7 +243,7 @@ export const AppStyles = () => (
     }}
   />
 );
-```
+````
 
 #### Animations
 

package/dist/esm/index.js

@@ -387,39 +387,66 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
 import { Icon as Icon4 } from "@ttoss/react-icons";
 import * as React7 from "react";
 import { Input as InputUI } from "theme-ui";
-var Input = /* @__PURE__ */React7.forwardRef(({
+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);
+}, "isInputIconConfig");
+var normalizeIcon = /* @__PURE__ */__name(icon => {
+  if (!icon) {
+    return void 0;
+  }
+  if (isInputIconConfig(icon)) {
+    return icon;
+  }
+  return {
+    icon
+  };
+}, "normalizeIcon");
+var Input = /* @__PURE__ */__name(({
   leadingIcon,
   trailingIcon: trailingIconProp,
-  onLeadingIconClick,
-  onTrailingIconClick,
   className,
   sx,
   ...inputProps
-}, ref) => {
-  const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
-  const isWarning = !inputProps["aria-invalid"] && trailingIcon === "warning-alt";
+}) => {
+  const normalizedLeadingIcon = normalizeIcon(leadingIcon);
+  const normalizedTrailingIconProp = normalizeIcon(trailingIconProp);
+  const ariaInvalid = inputProps["aria-invalid"];
+  const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+  const trailingIcon = isInvalid ? {
+    ...normalizedTrailingIconProp,
+    icon: "warning-alt"
+  } : 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, {
-    className: `${className} ${isWarning ? "is-warning" : ""}`,
+    className: wrapperClassName,
     sx: {
       ...sx,
       position: "relative",
       padding: 0,
       border: "none"
     }
-  }, leadingIcon && /* @__PURE__ */React7.createElement(Text, {
+  }, normalizedLeadingIcon && /* @__PURE__ */React7.createElement(React7.Fragment, null, /* @__PURE__ */React7.createElement(Text, {
+    "data-testid": "input-leading-icon",
+    "data-tooltip-id": normalizedLeadingIcon.tooltip ? leadingTooltipId : void 0,
     sx: {
       position: "absolute",
       alignSelf: "center",
       left: "1rem",
-      cursor: onLeadingIconClick ? "pointer" : "default"
+      cursor: normalizedLeadingIcon.onClick ? "pointer" : "default"
     },
-    onClick: onLeadingIconClick,
+    onClick: normalizedLeadingIcon.onClick,
     variant: "leading-icon"
   }, /* @__PURE__ */React7.createElement(Icon4, {
     inline: true,
-    icon: leadingIcon
-  })), /* @__PURE__ */React7.createElement(InputUI, {
-    ref,
+    icon: normalizedLeadingIcon.icon
+  })), normalizedLeadingIcon.tooltip && /* @__PURE__ */React7.createElement(Tooltip, {
+    id: leadingTooltipId,
+    ...normalizedLeadingIcon.tooltipProps
+  }, normalizedLeadingIcon.tooltip)), /* @__PURE__ */React7.createElement(InputUI, {
     sx: {
       fontFamily: "body",
       paddingY: "3",
@@ -431,23 +458,27 @@ var Input = /* @__PURE__ */React7.forwardRef(({
     },
     className,
     ...inputProps
-  }), trailingIcon && /* @__PURE__ */React7.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React7.createElement(React7.Fragment, null, /* @__PURE__ */React7.createElement(Text, {
+    "data-testid": "input-trailing-icon",
+    "data-tooltip-id": trailingIcon.tooltip ? trailingTooltipId : void 0,
     sx: {
       position: "absolute",
       right: "1rem",
       alignSelf: "center",
       color: isWarning ? "feedback.text.caution.default" : void 0,
-      cursor: onTrailingIconClick ? "pointer" : "default",
+      cursor: trailingIcon.onClick ? "pointer" : "default",
       fontSize: "xl"
     },
     variant: "trailing-icon",
-    onClick: onTrailingIconClick
+    onClick: trailingIcon.onClick
   }, /* @__PURE__ */React7.createElement(Icon4, {
     inline: true,
-    icon: trailingIcon
-  })));
-});
-Input.displayName = "Input";
+    icon: trailingIcon.icon
+  })), trailingIcon.tooltip && /* @__PURE__ */React7.createElement(Tooltip, {
+    id: trailingTooltipId,
+    ...trailingIcon.tooltipProps
+  }, trailingIcon.tooltip)));
+}, "Input");
 
 // src/components/InputNumber.tsx
 import { Icon as Icon5 } from "@ttoss/react-icons";
@@ -570,13 +601,13 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
 });
 InputNumber.displayName = "InputNumber";
 
-// src/components/InputPassword/InputPassword.tsx
-import * as React10 from "react";
-
-// src/components/InputPassword/useHidePassInput.ts
+// src/components/InputPassword.tsx
 import * as React9 from "react";
-var useHidePassInput = /* @__PURE__ */__name((defaultValue = true) => {
-  const [hidePass, setHidePass] = React9.useState(Boolean(defaultValue));
+var InputPassword = /* @__PURE__ */__name(({
+  showPasswordByDefault = false,
+  ...inputPasswordProps
+}) => {
+  const [hidePass, setHidePass] = React9.useState(Boolean(!showPasswordByDefault));
   const {
     icon,
     inputType
@@ -591,37 +622,93 @@ var useHidePassInput = /* @__PURE__ */__name((defaultValue = true) => {
       return !prev;
     });
   }, "handleClick");
-  return {
-    handleClick,
-    icon,
-    inputType
-  };
-}, "useHidePassInput");
-
-// src/components/InputPassword/InputPassword.tsx
-var InputPassword = /* @__PURE__ */React10.forwardRef(({
-  showPasswordByDefault,
-  ...inputPasswordProps
-}, ref) => {
-  const {
-    handleClick,
-    icon,
-    inputType
-  } = useHidePassInput(!showPasswordByDefault);
-  return /* @__PURE__ */React10.createElement(Input, {
-    ref,
+  return /* @__PURE__ */React9.createElement(Input, {
     ...inputPasswordProps,
-    trailingIcon: icon,
-    onTrailingIconClick: handleClick,
+    trailingIcon: {
+      icon,
+      onClick: handleClick
+    },
     type: inputType
   });
-});
-InputPassword.displayName = "InputPassword";
+}, "InputPassword");
 
 // src/components/Label.tsx
 import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React11 from "react";
+import * as React10 from "react";
 import { Label as LabelUi } from "theme-ui";
+
+// src/components/Tooltip.tsx
+import { Tooltip as TooltipReact } from "react-tooltip";
+var Tooltip = /* @__PURE__ */__name(({
+  variant = "info",
+  sx,
+  ...props
+}) => {
+  const className = `tooltip-component tooltip-${variant}`;
+  const getVariantStyles = /* @__PURE__ */__name(variantType => {
+    const variants = {
+      info: {
+        backgroundColor: "input.background.secondary.default",
+        color: "feedback.text.secondary.default",
+        borderColor: "feedback.border.secondary.default"
+      },
+      success: {
+        backgroundColor: "feedback.background.positive.default",
+        color: "feedback.text.positive.default",
+        borderColor: "feedback.border.positive.default"
+      },
+      warning: {
+        backgroundColor: "feedback.background.caution.default",
+        color: "feedback.text.caution.default",
+        borderColor: "feedback.border.caution.default"
+      },
+      error: {
+        backgroundColor: "feedback.background.negative.default",
+        color: "feedback.text.negative.default",
+        borderColor: "feedback.border.negative.default"
+      }
+    };
+    return variants[variantType] || variants.info;
+  }, "getVariantStyles");
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: /* @__PURE__ */__name(({
+      fonts
+    }) => {
+      const variantStyles = getVariantStyles(variant);
+      return {
+        ".example-arrow": {
+          display: "none"
+        },
+        ".tooltip-component": {
+          fontFamily: fonts?.body,
+          paddingY: "2",
+          paddingX: "3",
+          border: "sm",
+          borderRadius: "xl",
+          zIndex: "tooltip",
+          opacity: "1",
+          lineHeight: "shorter",
+          letterSpacing: "wide",
+          a: {
+            color: "feedback.text.secondary.default",
+            fontFamily: "body",
+            textDecorationLine: "underline",
+            lineHeight: "normal"
+          },
+          ...variantStyles,
+          ...sx
+        },
+        [`&.tooltip-${variant}`]: variantStyles
+      };
+    }, "sx")
+  }, /* @__PURE__ */React.createElement(TooltipReact, {
+    className,
+    ...props,
+    classNameArrow: "example-arrow"
+  }, props.children));
+}, "Tooltip");
+
+// src/components/Label.tsx
 var TOOLTIP_LABEL = "tooltip";
 var Label = /* @__PURE__ */__name(({
   children,
@@ -629,10 +716,9 @@ var Label = /* @__PURE__ */__name(({
   sx,
   ...props
 }) => {
-  const id = React11.useId();
+  const id = React10.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React11.createElement(LabelUi, {
-    "data-tooltip-id": tooltipId,
+  return /* @__PURE__ */React10.createElement(LabelUi, {
     sx: {
       alignItems: "center",
       fontSize: "sm",
@@ -642,39 +728,31 @@ var Label = /* @__PURE__ */__name(({
       ...sx
     },
     ...props
-  }, children, tooltip && /* @__PURE__ */React11.createElement(Text, {
+  }, children, tooltip && /* @__PURE__ */React10.createElement(Text, {
+    "data-tooltip-id": tooltipId,
     sx: {
       color: "currentcolor",
-      cursor: "pointer"
+      cursor: "pointer",
+      marginLeft: "1"
     },
     "aria-label": TOOLTIP_LABEL
-  }, tooltip.icon ? /* @__PURE__ */React11.createElement(Icon6, {
-    inline: true,
-    icon: tooltip.icon
-  }) : /* @__PURE__ */React11.createElement(Icon6, {
-    inline: true,
-    icon: "fluent:info-24-regular"
-  }), /* @__PURE__ */React11.createElement(Tooltip, {
-    id: tooltipId,
-    openOnClick: tooltip.openOnClick,
-    clickable: tooltip.clickable,
-    place: tooltip.place,
-    hidden: tooltip.hidden,
-    variant: tooltip.variant,
-    setIsOpen: tooltip.setIsOpen,
-    isOpen: tooltip.isOpen
-  }, tooltip.render)));
+  }, /* @__PURE__ */React10.createElement(Icon6, {
+    icon: "info"
+  }), /* @__PURE__ */React10.createElement(Tooltip, {
+    ...tooltip,
+    id: tooltipId
+  })));
 }, "Label");
 
 // src/components/Link.tsx
-import * as React12 from "react";
+import * as React11 from "react";
 import { Link as LinkUi } from "theme-ui";
-var Link = /* @__PURE__ */React12.forwardRef(({
+var Link = /* @__PURE__ */React11.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */React12.createElement(LinkUi, {
+  return /* @__PURE__ */React11.createElement(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -689,7 +767,7 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/SegmentedControl.tsx
-import * as React13 from "react";
+import * as React12 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
 var SegmentedControl = /* @__PURE__ */__name(({
   options,
@@ -701,8 +779,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
   sx,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React13.useState(propValue || defaultValue);
-  React13.useEffect(() => {
+  const [internalValue, setInternalValue] = React12.useState(propValue || defaultValue);
+  React12.useEffect(() => {
     if (propValue !== void 0) {
       setInternalValue(propValue);
     }
@@ -720,7 +798,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
     } : option;
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
-  return /* @__PURE__ */React13.createElement(Flex2, {
+  return /* @__PURE__ */React12.createElement(Flex2, {
     className,
     sx: {
       width: "100%",
@@ -803,18 +881,18 @@ var SegmentedControl = /* @__PURE__ */__name(({
       ...sx
     },
     ...rest
-  }, /* @__PURE__ */React13.createElement("div", {
+  }, /* @__PURE__ */React12.createElement("div", {
     className: "rc-segmented"
-  }, /* @__PURE__ */React13.createElement(Flex2, {
+  }, /* @__PURE__ */React12.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__ */React13.createElement(React13.Fragment, {
+    return /* @__PURE__ */React12.createElement(React12.Fragment, {
       key: `${index}-${option.value}`
-    }, /* @__PURE__ */React13.createElement(Box3, {
+    }, /* @__PURE__ */React12.createElement(Box3, {
       as: "label",
       className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
       onClick: /* @__PURE__ */__name(() => {
@@ -822,7 +900,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onClick")
-    }, /* @__PURE__ */React13.createElement("input", {
+    }, /* @__PURE__ */React12.createElement("input", {
       type: "radio",
       value: option.value,
       checked: isSelected,
@@ -832,9 +910,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onChange")
-    }), /* @__PURE__ */React13.createElement("div", {
+    }), /* @__PURE__ */React12.createElement("div", {
       className: "rc-segmented-item-label"
-    }, option.label)), showDivider && /* @__PURE__ */React13.createElement(Box3, {
+    }, option.label)), showDivider && /* @__PURE__ */React12.createElement(Box3, {
       className: "segmented-divider",
       sx: {
         height: "60%",
@@ -845,7 +923,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
         zIndex: 3
       }
     }));
-  }), currentValue !== void 0 && /* @__PURE__ */React13.createElement("div", {
+  }), currentValue !== void 0 && /* @__PURE__ */React12.createElement("div", {
     className: "rc-segmented-thumb",
     style: {
       width: `${100 / normalizedOptions.length}%`,
@@ -858,7 +936,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
 
 // src/components/Select.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React14 from "react";
+import * as React13 from "react";
 import ReactSelect, { components } from "react-select";
 var Control = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -878,7 +956,7 @@ var Control = /* @__PURE__ */__name(props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */React14.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -887,7 +965,7 @@ var Control = /* @__PURE__ */__name(props => {
         paddingY: "3"
       }
     }
-  }, /* @__PURE__ */React14.createElement(components.Control, props));
+  }, /* @__PURE__ */React13.createElement(components.Control, props));
 }, "Control");
 var DropdownIndicator = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -897,7 +975,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */React14.createElement(Text, {
+  return /* @__PURE__ */React13.createElement(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -905,14 +983,14 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React13.createElement(Icon7, {
     icon: "picker-down"
   }));
 }, "DropdownIndicator");
 var IndicatorsContainer = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React14.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -922,7 +1000,7 @@ var IndicatorsContainer = /* @__PURE__ */__name(({
 var Placeholder = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React14.createElement(Text, {
+  return /* @__PURE__ */React13.createElement(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -940,10 +1018,10 @@ var SelectContainer = /* @__PURE__ */__name(({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    React14.createElement(Box, {
+    React13.createElement(Box, {
       sx,
       css: css2
-    }, /* @__PURE__ */React14.createElement(components.SelectContainer, props, children))
+    }, /* @__PURE__ */React13.createElement(components.SelectContainer, props, children))
   );
 }, "SelectContainer");
 var ValueContainer = /* @__PURE__ */__name(({
@@ -969,26 +1047,26 @@ var ValueContainer = /* @__PURE__ */__name(({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */React14.createElement(Flex, {
+  return /* @__PURE__ */React13.createElement(Flex, {
     sx: {
       gap: "4",
       flex: 1
     }
-  }, finalLeadingIcon && /* @__PURE__ */React14.createElement(Text, {
+  }, finalLeadingIcon && /* @__PURE__ */React13.createElement(Text, {
     sx: {
       alignSelf: "center",
       pointerEvents: "none",
       lineHeight: 0,
       fontSize: "md"
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React13.createElement(Icon7, {
     icon: finalLeadingIcon
-  })), /* @__PURE__ */React14.createElement(Flex, {
+  })), /* @__PURE__ */React13.createElement(Flex, {
     sx: {
       flex: 1,
       alignItems: "center"
     }
-  }, children), (trailingIcon || hasError) && /* @__PURE__ */React14.createElement(Text, {
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React13.createElement(Text, {
     className: hasError ? "error-icon" : "",
     sx: {
       alignSelf: "center",
@@ -997,11 +1075,11 @@ var ValueContainer = /* @__PURE__ */__name(({
       fontSize: "md",
       color: trailingIconColor
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React13.createElement(Icon7, {
     icon: hasError ? "warning-alt" : trailingIcon
   })));
 }, "ValueContainer");
-var Select = /* @__PURE__ */React14.forwardRef(({
+var Select = /* @__PURE__ */React13.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -1010,7 +1088,7 @@ var Select = /* @__PURE__ */React14.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */React14.createElement(ReactSelect, {
+  return /* @__PURE__ */React13.createElement(ReactSelect, {
     ref,
     /**
      * https://react-select.com/components
@@ -1092,7 +1170,7 @@ var Switch = /* @__PURE__ */__name(props => {
 }, "Switch");
 
 // src/components/Tag.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 var tagVariantMap = {
   positive: {
     bg: "feedback.background.positive.default",
@@ -1149,7 +1227,7 @@ var Tag = /* @__PURE__ */__name(({
     alignItems: "center"
   };
   if (Array.isArray(children)) {
-    return /* @__PURE__ */React15.createElement(Box, {
+    return /* @__PURE__ */React14.createElement(Box, {
       as: "span",
       sx: {
         ml: 2,
@@ -1159,7 +1237,7 @@ var Tag = /* @__PURE__ */__name(({
         ...sx
       }
     }, children.map((child, i) => {
-      return /* @__PURE__ */React15.createElement(Box, {
+      return /* @__PURE__ */React14.createElement(Box, {
         key: i,
         as: "span",
         sx: {
@@ -1173,7 +1251,7 @@ var Tag = /* @__PURE__ */__name(({
       }, child);
     }));
   }
-  return /* @__PURE__ */React15.createElement(Box, {
+  return /* @__PURE__ */React14.createElement(Box, {
     as: "span",
     sx: {
       ...baseStyles,
@@ -1184,15 +1262,15 @@ var Tag = /* @__PURE__ */__name(({
 
 // src/components/Textarea.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React16 from "react";
+import * as React15 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-var Textarea = /* @__PURE__ */React16.forwardRef(({
+var Textarea = /* @__PURE__ */React15.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */React16.createElement(Flex, {
+  return /* @__PURE__ */React15.createElement(Flex, {
     className,
     sx: {
       ...sx,
@@ -1200,7 +1278,7 @@ var Textarea = /* @__PURE__ */React16.forwardRef(({
       padding: 0,
       border: "none"
     }
-  }, /* @__PURE__ */React16.createElement(TextareaUI, {
+  }, /* @__PURE__ */React15.createElement(TextareaUI, {
     ref,
     sx: {
       fontFamily: "body",
@@ -1212,103 +1290,32 @@ var Textarea = /* @__PURE__ */React16.forwardRef(({
     },
     className,
     ...textareaProps
-  }), trailingIcon && /* @__PURE__ */React16.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React15.createElement(Text, {
     sx: {
       position: "absolute",
       right: "1.25rem",
       top: "0.75rem"
     }
-  }, /* @__PURE__ */React16.createElement(Icon8, {
+  }, /* @__PURE__ */React15.createElement(Icon8, {
     inline: true,
     icon: trailingIcon
   })));
 });
 Textarea.displayName = "Textarea";
 
-// src/components/Tooltip.tsx
-import { Tooltip as TooltipReact } from "react-tooltip";
-var Tooltip = /* @__PURE__ */__name(({
-  variant = "info",
-  sx,
-  ...props
-}) => {
-  const className = `tooltip-component tooltip-${variant}`;
-  const getVariantStyles = /* @__PURE__ */__name(variantType => {
-    const variants = {
-      info: {
-        backgroundColor: "input.background.secondary.default",
-        color: "feedback.text.secondary.default",
-        borderColor: "feedback.border.secondary.default"
-      },
-      success: {
-        backgroundColor: "feedback.background.positive.default",
-        color: "feedback.text.positive.default",
-        borderColor: "feedback.border.positive.default"
-      },
-      warning: {
-        backgroundColor: "feedback.background.caution.default",
-        color: "feedback.text.caution.default",
-        borderColor: "feedback.border.caution.default"
-      },
-      error: {
-        backgroundColor: "feedback.background.negative.default",
-        color: "feedback.text.negative.default",
-        borderColor: "feedback.border.negative.default"
-      }
-    };
-    return variants[variantType] || variants.info;
-  }, "getVariantStyles");
-  return /* @__PURE__ */React.createElement(Box, {
-    sx: /* @__PURE__ */__name(({
-      fonts
-    }) => {
-      const variantStyles = getVariantStyles(variant);
-      return {
-        ".example-arrow": {
-          display: "none"
-        },
-        ".tooltip-component": {
-          fontFamily: fonts?.body,
-          paddingY: "2",
-          paddingX: "3",
-          border: "sm",
-          borderRadius: "xl",
-          zIndex: "tooltip",
-          opacity: "1",
-          lineHeight: "shorter",
-          letterSpacing: "wide",
-          a: {
-            color: "feedback.text.secondary.default",
-            fontFamily: "body",
-            textDecorationLine: "underline",
-            lineHeight: "normal"
-          },
-          ...variantStyles,
-          ...sx
-        },
-        [`&.tooltip-${variant}`]: variantStyles
-      };
-    }, "sx")
-  }, /* @__PURE__ */React.createElement(TooltipReact, {
-    className,
-    ...props,
-    classNameArrow: "example-arrow"
-  }, props.children));
-}, "Tooltip");
-
 // src/theme/ThemeProvider.tsx
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
-import * as React17 from "react";
+import * as React16 from "react";
 import { ThemeUIProvider } from "theme-ui";
 var ThemeProvider = /* @__PURE__ */__name(({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */React17.createElement(React17.Fragment, null, /* @__PURE__ */React17.createElement(ThemeUIProvider, {
+  return /* @__PURE__ */React16.createElement(React16.Fragment, null, /* @__PURE__ */React16.createElement(ThemeUIProvider, {
     theme
-  }, /* @__PURE__ */React17.createElement(Global, {
+  }, /* @__PURE__ */React16.createElement(Global, {
     styles: css`
             ${fonts.map(url => {
       return `@import url('${url}');`;

package/dist/index.d.ts

@@ -2,10 +2,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconType } from '@ttoss/react-icons';
 import * as React from 'react';
 import * as theme_ui from 'theme-ui';
-import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SxProp, SwitchProps, ThemeUIStyleObject, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
+import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, SxProp, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SwitchProps, ThemeUIStyleObject, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
 export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, Slider, SliderProps, Spinner, SpinnerProps, SwitchProps, SxProp, Text, TextProps, Theme, ThemeUIStyleObject } from 'theme-ui';
-import { Props } from 'react-select';
 import { ITooltip } from 'react-tooltip';
+import { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 
@@ -61,13 +61,20 @@ declare const IconButton: (props: IconButtonProps) => react_jsx_runtime.JSX.Elem
 
 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 {
+    icon: IconType;
+    onClick?: () => void;
+    tooltip?: string;
+    tooltipProps?: Omit<TooltipProps, 'children' | 'anchorSelect'>;
+}
 interface InputProps extends InputProps$1 {
-    leadingIcon?: IconType;
-    onLeadingIconClick?: () => void;
-    trailingIcon?: IconType;
-    onTrailingIconClick?: () => void;
+    leadingIcon?: InputIconConfig | IconType;
+    trailingIcon?: InputIconConfig | IconType;
 }
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const Input: ({ leadingIcon, trailingIcon: trailingIconProp, className, sx, ...inputProps }: InputProps) => react_jsx_runtime.JSX.Element;
 
 type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
     onChange: (value: number) => void;
@@ -77,23 +84,13 @@ type InputNumberProps = Omit<InputProps$1, 'type' | 'variant' | 'onChange'> & {
 };
 declare const InputNumber: React.ForwardRefExoticComponent<Omit<InputNumberProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick' | 'type'> & {
+type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'type'> & {
     showPasswordByDefault?: boolean;
 };
-declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputPassword: ({ showPasswordByDefault, ...inputPasswordProps }: InputPasswordProps) => react_jsx_runtime.JSX.Element;
 
 type LabelProps = LabelProps$1 & {
-    tooltip?: {
-        render: string | React.ReactNode;
-        place: 'top' | 'right' | 'bottom' | 'left';
-        openOnClick?: boolean;
-        clickable?: boolean;
-        variant?: 'dark' | 'light' | 'success' | 'warning' | 'error' | 'info';
-        hidden?: boolean;
-        setIsOpen?: (value: boolean) => void;
-        isOpen?: boolean;
-        icon?: string;
-    };
+    tooltip?: TooltipProps;
 };
 declare const Label: ({ children, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
 
@@ -172,8 +169,6 @@ interface TextareaProps extends TextareaProps$1 {
 }
 declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 
-declare const Tooltip: ({ variant, sx, ...props }: ITooltip & SxProp) => react_jsx_runtime.JSX.Element;
-
 type ThemeProviderProps = {
     children?: React.ReactNode;
     theme?: Theme;
@@ -186,4 +181,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, 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, type TooltipProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.10.8",
+  "version": "5.11.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -24,12 +24,12 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@theme-ui/match-media": "^0.17.1",
+    "@theme-ui/match-media": "^0.17.2",
     "rc-segmented": "^2.7.0",
-    "react-select": "^5.9.0",
-    "react-tooltip": "^5.28.0",
-    "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.6.11"
+    "react-select": "^5.10.2",
+    "react-tooltip": "^5.30.0",
+    "theme-ui": "^0.17.2",
+    "@ttoss/theme": "^2.7.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -45,8 +45,8 @@
     "react": "^19.2.0",
     "tsup": "^8.5.1",
     "@ttoss/config": "^1.35.12",
-    "@ttoss/react-icons": "^0.5.3",
-    "@ttoss/test-utils": "^3.0.4"
+    "@ttoss/test-utils": "^3.0.4",
+    "@ttoss/react-icons": "^0.5.3"
   },
   "keywords": [
     "React",