@ttoss/ui 5.10.8 → 5.11.0

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

@@ -385,41 +385,64 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
 
 // 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 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";
-  return /* @__PURE__ */React7.createElement(Flex, {
-    className: `${className} ${isWarning ? "is-warning" : ""}`,
+}) => {
+  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(" ");
+  return /* @__PURE__ */React.createElement(Flex, {
+    className: wrapperClassName,
     sx: {
       ...sx,
       position: "relative",
       padding: 0,
       border: "none"
     }
-  }, leadingIcon && /* @__PURE__ */React7.createElement(Text, {
+  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
+    "data-testid": "input-leading-icon",
+    "data-tooltip-id": normalizedLeadingIcon.tooltip ? "input-leading-icon-tooltip" : 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, {
+  }, /* @__PURE__ */React.createElement(Icon4, {
     inline: true,
-    icon: leadingIcon
-  })), /* @__PURE__ */React7.createElement(InputUI, {
-    ref,
+    icon: normalizedLeadingIcon.icon
+  })), normalizedLeadingIcon.tooltip && /* @__PURE__ */React.createElement(Tooltip, {
+    id: "input-leading-icon-tooltip",
+    ...normalizedLeadingIcon.tooltipProps
+  }, normalizedLeadingIcon.tooltip)), /* @__PURE__ */React.createElement(InputUI, {
     sx: {
       fontFamily: "body",
       paddingY: "3",
@@ -431,29 +454,33 @@ var Input = /* @__PURE__ */React7.forwardRef(({
     },
     className,
     ...inputProps
-  }), trailingIcon && /* @__PURE__ */React7.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
+    "data-testid": "input-trailing-icon",
+    "data-tooltip-id": trailingIcon.tooltip ? "input-trailing-icon-tooltip" : 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
-  }, /* @__PURE__ */React7.createElement(Icon4, {
+    onClick: trailingIcon.onClick
+  }, /* @__PURE__ */React.createElement(Icon4, {
     inline: true,
-    icon: trailingIcon
-  })));
-});
-Input.displayName = "Input";
+    icon: trailingIcon.icon
+  })), trailingIcon.tooltip && /* @__PURE__ */React.createElement(Tooltip, {
+    id: "input-trailing-icon-tooltip",
+    ...trailingIcon.tooltipProps
+  }, trailingIcon.tooltip)));
+}, "Input");
 
 // src/components/InputNumber.tsx
 import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React8 from "react";
+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,
@@ -461,7 +488,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 {
@@ -513,7 +540,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,
@@ -523,7 +550,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,
@@ -533,7 +560,7 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
     }, "onChange"),
     value,
     ...inputProps
-  }), /* @__PURE__ */React8.createElement(Text, {
+  }), /* @__PURE__ */React7.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -542,9 +569,9 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeUp
-  }, /* @__PURE__ */React8.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon5, {
     icon: "picker-down"
-  })), infoIcon && /* @__PURE__ */React8.createElement(Text, {
+  })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -553,9 +580,9 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
       cursor: onClickInfoIcon ? "pointer" : "default"
     },
     onClick: onClickInfoIcon
-  }, /* @__PURE__ */React8.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon5, {
     icon: "info"
-  })), /* @__PURE__ */React8.createElement(Text, {
+  })), /* @__PURE__ */React7.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -564,23 +591,23 @@ var InputNumber = /* @__PURE__ */React8.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeDown
-  }, /* @__PURE__ */React8.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon5, {
     icon: "picker-up"
   })));
 });
 InputNumber.displayName = "InputNumber";
 
-// src/components/InputPassword/InputPassword.tsx
-import * as React10 from "react";
-
-// src/components/InputPassword/useHidePassInput.ts
-import * as React9 from "react";
-var useHidePassInput = /* @__PURE__ */__name((defaultValue = true) => {
-  const [hidePass, setHidePass] = React9.useState(Boolean(defaultValue));
+// src/components/InputPassword.tsx
+import * as React8 from "react";
+var InputPassword = /* @__PURE__ */__name(({
+  showPasswordByDefault = false,
+  ...inputPasswordProps
+}) => {
+  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"
@@ -591,36 +618,19 @@ 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__ */React8.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 React9 from "react";
 import { Label as LabelUi } from "theme-ui";
 var TOOLTIP_LABEL = "tooltip";
 var Label = /* @__PURE__ */__name(({
@@ -629,9 +639,9 @@ var Label = /* @__PURE__ */__name(({
   sx,
   ...props
 }) => {
-  const id = React11.useId();
+  const id = React9.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React11.createElement(LabelUi, {
+  return /* @__PURE__ */React9.createElement(LabelUi, {
     "data-tooltip-id": tooltipId,
     sx: {
       alignItems: "center",
@@ -642,19 +652,19 @@ var Label = /* @__PURE__ */__name(({
       ...sx
     },
     ...props
-  }, children, tooltip && /* @__PURE__ */React11.createElement(Text, {
+  }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
     sx: {
       color: "currentcolor",
       cursor: "pointer"
     },
     "aria-label": TOOLTIP_LABEL
-  }, tooltip.icon ? /* @__PURE__ */React11.createElement(Icon6, {
+  }, tooltip.icon ? /* @__PURE__ */React9.createElement(Icon6, {
     inline: true,
     icon: tooltip.icon
-  }) : /* @__PURE__ */React11.createElement(Icon6, {
+  }) : /* @__PURE__ */React9.createElement(Icon6, {
     inline: true,
     icon: "fluent:info-24-regular"
-  }), /* @__PURE__ */React11.createElement(Tooltip, {
+  }), /* @__PURE__ */React9.createElement(Tooltip, {
     id: tooltipId,
     openOnClick: tooltip.openOnClick,
     clickable: tooltip.clickable,
@@ -667,14 +677,14 @@ var Label = /* @__PURE__ */__name(({
 }, "Label");
 
 // src/components/Link.tsx
-import * as React12 from "react";
+import * as React10 from "react";
 import { Link as LinkUi } from "theme-ui";
-var Link = /* @__PURE__ */React12.forwardRef(({
+var Link = /* @__PURE__ */React10.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */React12.createElement(LinkUi, {
+  return /* @__PURE__ */React10.createElement(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -689,7 +699,7 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/SegmentedControl.tsx
-import * as React13 from "react";
+import * as React11 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
 var SegmentedControl = /* @__PURE__ */__name(({
   options,
@@ -701,8 +711,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
   sx,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React13.useState(propValue || defaultValue);
-  React13.useEffect(() => {
+  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
+  React11.useEffect(() => {
     if (propValue !== void 0) {
       setInternalValue(propValue);
     }
@@ -720,7 +730,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
     } : option;
   });
   const currentValue = propValue !== void 0 ? propValue : internalValue;
-  return /* @__PURE__ */React13.createElement(Flex2, {
+  return /* @__PURE__ */React11.createElement(Flex2, {
     className,
     sx: {
       width: "100%",
@@ -803,18 +813,18 @@ var SegmentedControl = /* @__PURE__ */__name(({
       ...sx
     },
     ...rest
-  }, /* @__PURE__ */React13.createElement("div", {
+  }, /* @__PURE__ */React11.createElement("div", {
     className: "rc-segmented"
-  }, /* @__PURE__ */React13.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__ */React13.createElement(React13.Fragment, {
+    return /* @__PURE__ */React11.createElement(React11.Fragment, {
       key: `${index}-${option.value}`
-    }, /* @__PURE__ */React13.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(() => {
@@ -822,7 +832,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onClick")
-    }, /* @__PURE__ */React13.createElement("input", {
+    }, /* @__PURE__ */React11.createElement("input", {
       type: "radio",
       value: option.value,
       checked: isSelected,
@@ -832,9 +842,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onChange")
-    }), /* @__PURE__ */React13.createElement("div", {
+    }), /* @__PURE__ */React11.createElement("div", {
       className: "rc-segmented-item-label"
-    }, option.label)), showDivider && /* @__PURE__ */React13.createElement(Box3, {
+    }, option.label)), showDivider && /* @__PURE__ */React11.createElement(Box3, {
       className: "segmented-divider",
       sx: {
         height: "60%",
@@ -845,7 +855,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
         zIndex: 3
       }
     }));
-  }), currentValue !== void 0 && /* @__PURE__ */React13.createElement("div", {
+  }), currentValue !== void 0 && /* @__PURE__ */React11.createElement("div", {
     className: "rc-segmented-thumb",
     style: {
       width: `${100 / normalizedOptions.length}%`,
@@ -858,7 +868,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
 
 // src/components/Select.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React14 from "react";
+import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
 var Control = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -878,7 +888,7 @@ var Control = /* @__PURE__ */__name(props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */React14.createElement(Box, {
+  return /* @__PURE__ */React12.createElement(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -887,7 +897,7 @@ var Control = /* @__PURE__ */__name(props => {
         paddingY: "3"
       }
     }
-  }, /* @__PURE__ */React14.createElement(components.Control, props));
+  }, /* @__PURE__ */React12.createElement(components.Control, props));
 }, "Control");
 var DropdownIndicator = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -897,7 +907,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */React14.createElement(Text, {
+  return /* @__PURE__ */React12.createElement(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -905,14 +915,14 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon7, {
     icon: "picker-down"
   }));
 }, "DropdownIndicator");
 var IndicatorsContainer = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React14.createElement(Box, {
+  return /* @__PURE__ */React12.createElement(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -922,7 +932,7 @@ var IndicatorsContainer = /* @__PURE__ */__name(({
 var Placeholder = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React14.createElement(Text, {
+  return /* @__PURE__ */React12.createElement(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -940,10 +950,10 @@ var SelectContainer = /* @__PURE__ */__name(({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    React14.createElement(Box, {
+    React12.createElement(Box, {
       sx,
       css: css2
-    }, /* @__PURE__ */React14.createElement(components.SelectContainer, props, children))
+    }, /* @__PURE__ */React12.createElement(components.SelectContainer, props, children))
   );
 }, "SelectContainer");
 var ValueContainer = /* @__PURE__ */__name(({
@@ -969,26 +979,26 @@ var ValueContainer = /* @__PURE__ */__name(({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */React14.createElement(Flex, {
+  return /* @__PURE__ */React12.createElement(Flex, {
     sx: {
       gap: "4",
       flex: 1
     }
-  }, finalLeadingIcon && /* @__PURE__ */React14.createElement(Text, {
+  }, finalLeadingIcon && /* @__PURE__ */React12.createElement(Text, {
     sx: {
       alignSelf: "center",
       pointerEvents: "none",
       lineHeight: 0,
       fontSize: "md"
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon7, {
     icon: finalLeadingIcon
-  })), /* @__PURE__ */React14.createElement(Flex, {
+  })), /* @__PURE__ */React12.createElement(Flex, {
     sx: {
       flex: 1,
       alignItems: "center"
     }
-  }, children), (trailingIcon || hasError) && /* @__PURE__ */React14.createElement(Text, {
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React12.createElement(Text, {
     className: hasError ? "error-icon" : "",
     sx: {
       alignSelf: "center",
@@ -997,11 +1007,11 @@ var ValueContainer = /* @__PURE__ */__name(({
       fontSize: "md",
       color: trailingIconColor
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon7, {
     icon: hasError ? "warning-alt" : trailingIcon
   })));
 }, "ValueContainer");
-var Select = /* @__PURE__ */React14.forwardRef(({
+var Select = /* @__PURE__ */React12.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -1010,7 +1020,7 @@ var Select = /* @__PURE__ */React14.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */React14.createElement(ReactSelect, {
+  return /* @__PURE__ */React12.createElement(ReactSelect, {
     ref,
     /**
      * https://react-select.com/components
@@ -1092,7 +1102,7 @@ var Switch = /* @__PURE__ */__name(props => {
 }, "Switch");
 
 // src/components/Tag.tsx
-import * as React15 from "react";
+import * as React13 from "react";
 var tagVariantMap = {
   positive: {
     bg: "feedback.background.positive.default",
@@ -1149,7 +1159,7 @@ var Tag = /* @__PURE__ */__name(({
     alignItems: "center"
   };
   if (Array.isArray(children)) {
-    return /* @__PURE__ */React15.createElement(Box, {
+    return /* @__PURE__ */React13.createElement(Box, {
       as: "span",
       sx: {
         ml: 2,
@@ -1159,7 +1169,7 @@ var Tag = /* @__PURE__ */__name(({
         ...sx
       }
     }, children.map((child, i) => {
-      return /* @__PURE__ */React15.createElement(Box, {
+      return /* @__PURE__ */React13.createElement(Box, {
         key: i,
         as: "span",
         sx: {
@@ -1173,7 +1183,7 @@ var Tag = /* @__PURE__ */__name(({
       }, child);
     }));
   }
-  return /* @__PURE__ */React15.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     as: "span",
     sx: {
       ...baseStyles,
@@ -1184,15 +1194,15 @@ var Tag = /* @__PURE__ */__name(({
 
 // src/components/Textarea.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React16 from "react";
+import * as React14 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-var Textarea = /* @__PURE__ */React16.forwardRef(({
+var Textarea = /* @__PURE__ */React14.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */React16.createElement(Flex, {
+  return /* @__PURE__ */React14.createElement(Flex, {
     className,
     sx: {
       ...sx,
@@ -1200,7 +1210,7 @@ var Textarea = /* @__PURE__ */React16.forwardRef(({
       padding: 0,
       border: "none"
     }
-  }, /* @__PURE__ */React16.createElement(TextareaUI, {
+  }, /* @__PURE__ */React14.createElement(TextareaUI, {
     ref,
     sx: {
       fontFamily: "body",
@@ -1212,13 +1222,13 @@ var Textarea = /* @__PURE__ */React16.forwardRef(({
     },
     className,
     ...textareaProps
-  }), trailingIcon && /* @__PURE__ */React16.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React14.createElement(Text, {
     sx: {
       position: "absolute",
       right: "1.25rem",
       top: "0.75rem"
     }
-  }, /* @__PURE__ */React16.createElement(Icon8, {
+  }, /* @__PURE__ */React14.createElement(Icon8, {
     inline: true,
     icon: trailingIcon
   })));
@@ -1299,16 +1309,16 @@ var Tooltip = /* @__PURE__ */__name(({
 // src/theme/ThemeProvider.tsx
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
-import * as React17 from "react";
+import * as React15 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__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(ThemeUIProvider, {
     theme
-  }, /* @__PURE__ */React17.createElement(Global, {
+  }, /* @__PURE__ */React15.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,10 +84,10 @@ 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?: {
@@ -172,8 +179,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.10.8",
+  "version": "5.11.0",
   "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",
@@ -44,9 +44,9 @@
     "jest": "^30.2.0",
     "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/test-utils": "^3.0.4"
+    "@ttoss/config": "^1.35.12"
   },
   "keywords": [
     "React",