@ttoss/ui 5.11.0 → 6.0.0

package/dist/esm/index.js

@@ -384,7 +384,6 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
 }, "InfiniteLinearProgress");
 
 // src/components/Input.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
 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);
@@ -425,24 +424,17 @@ var Input = /* @__PURE__ */__name(({
       padding: 0,
       border: "none"
     }
-  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
+  }, normalizedLeadingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
+    ...normalizedLeadingIcon,
     "data-testid": "input-leading-icon",
-    "data-tooltip-id": normalizedLeadingIcon.tooltip ? "input-leading-icon-tooltip" : 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__ */React.createElement(Icon4, {
-    inline: true,
-    icon: normalizedLeadingIcon.icon
-  })), normalizedLeadingIcon.tooltip && /* @__PURE__ */React.createElement(Tooltip, {
-    id: "input-leading-icon-tooltip",
-    ...normalizedLeadingIcon.tooltipProps
-  }, normalizedLeadingIcon.tooltip)), /* @__PURE__ */React.createElement(InputUI, {
+      ...normalizedLeadingIcon.sx
+    }
+  }), /* @__PURE__ */React.createElement(InputUI, {
     sx: {
       fontFamily: "body",
       paddingY: "3",
@@ -454,30 +446,23 @@ var Input = /* @__PURE__ */__name(({
     },
     className,
     ...inputProps
-  }), trailingIcon && /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React.createElement(TooltipIcon, {
+    ...trailingIcon,
     "data-testid": "input-trailing-icon",
-    "data-tooltip-id": trailingIcon.tooltip ? "input-trailing-icon-tooltip" : 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__ */React.createElement(Icon4, {
-    inline: true,
-    icon: trailingIcon.icon
-  })), trailingIcon.tooltip && /* @__PURE__ */React.createElement(Tooltip, {
-    id: "input-trailing-icon-tooltip",
-    ...trailingIcon.tooltipProps
-  }, trailingIcon.tooltip)));
+      fontSize: "xl",
+      ...trailingIcon.sx
+    }
+  }));
 }, "Input");
 
 // src/components/InputNumber.tsx
-import { Icon as Icon5 } from "@ttoss/react-icons";
+import { Icon as Icon4 } from "@ttoss/react-icons";
 import * as React7 from "react";
 import { Input as Input2 } from "theme-ui";
 var InputNumber = /* @__PURE__ */React7.forwardRef(({
@@ -569,7 +554,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeUp
-  }, /* @__PURE__ */React7.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     icon: "picker-down"
   })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
     sx: {
@@ -580,7 +565,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: onClickInfoIcon ? "pointer" : "default"
     },
     onClick: onClickInfoIcon
-  }, /* @__PURE__ */React7.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     icon: "info"
   })), /* @__PURE__ */React7.createElement(Text, {
     sx: {
@@ -591,7 +576,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeDown
-  }, /* @__PURE__ */React7.createElement(Icon5, {
+  }, /* @__PURE__ */React7.createElement(Icon4, {
     icon: "picker-up"
   })));
 });
@@ -629,9 +614,82 @@ var InputPassword = /* @__PURE__ */__name(({
 }, "InputPassword");
 
 // src/components/Label.tsx
-import { Icon as Icon6 } from "@ttoss/react-icons";
+import { Icon as Icon5 } from "@ttoss/react-icons";
 import * as React9 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,
@@ -642,7 +700,6 @@ var Label = /* @__PURE__ */__name(({
   const id = React9.useId();
   const tooltipId = `${id}-tooltip`;
   return /* @__PURE__ */React9.createElement(LabelUi, {
-    "data-tooltip-id": tooltipId,
     sx: {
       alignItems: "center",
       fontSize: "sm",
@@ -653,27 +710,19 @@ var Label = /* @__PURE__ */__name(({
     },
     ...props
   }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
+    "data-tooltip-id": tooltipId,
     sx: {
       color: "currentcolor",
-      cursor: "pointer"
+      cursor: "pointer",
+      marginLeft: "1"
     },
     "aria-label": TOOLTIP_LABEL
-  }, tooltip.icon ? /* @__PURE__ */React9.createElement(Icon6, {
-    inline: true,
-    icon: tooltip.icon
-  }) : /* @__PURE__ */React9.createElement(Icon6, {
-    inline: true,
-    icon: "fluent:info-24-regular"
+  }, /* @__PURE__ */React9.createElement(Icon5, {
+    icon: "info"
   }), /* @__PURE__ */React9.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)));
+    ...tooltip,
+    id: tooltipId
+  })));
 }, "Label");
 
 // src/components/Link.tsx
@@ -867,7 +916,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
 }, "SegmentedControl");
 
 // src/components/Select.tsx
-import { Icon as Icon7 } from "@ttoss/react-icons";
+import { Icon as Icon6 } from "@ttoss/react-icons";
 import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
 var Control = /* @__PURE__ */__name(props => {
@@ -915,7 +964,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */React12.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon6, {
     icon: "picker-down"
   }));
 }, "DropdownIndicator");
@@ -991,7 +1040,7 @@ var ValueContainer = /* @__PURE__ */__name(({
       lineHeight: 0,
       fontSize: "md"
     }
-  }, /* @__PURE__ */React12.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon6, {
     icon: finalLeadingIcon
   })), /* @__PURE__ */React12.createElement(Flex, {
     sx: {
@@ -1007,7 +1056,7 @@ var ValueContainer = /* @__PURE__ */__name(({
       fontSize: "md",
       color: trailingIconColor
     }
-  }, /* @__PURE__ */React12.createElement(Icon7, {
+  }, /* @__PURE__ */React12.createElement(Icon6, {
     icon: hasError ? "warning-alt" : trailingIcon
   })));
 }, "ValueContainer");
@@ -1193,7 +1242,7 @@ var Tag = /* @__PURE__ */__name(({
 }, "Tag");
 
 // src/components/Textarea.tsx
-import { Icon as Icon8 } from "@ttoss/react-icons";
+import { Icon as Icon7 } from "@ttoss/react-icons";
 import * as React14 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
 var Textarea = /* @__PURE__ */React14.forwardRef(({
@@ -1228,97 +1277,59 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
       right: "1.25rem",
       top: "0.75rem"
     }
-  }, /* @__PURE__ */React14.createElement(Icon8, {
+  }, /* @__PURE__ */React14.createElement(Icon7, {
     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
+// src/components/TooltipIcon.tsx
+import { Icon as Icon8 } from "@ttoss/react-icons";
+import * as React15 from "react";
+var TooltipIcon = /* @__PURE__ */__name(({
+  icon,
+  onClick,
+  tooltip,
+  tooltipProps,
+  "data-testid": dataTestId,
+  variant,
+  sx
 }) => {
-  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");
+  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,
+    ...tooltipProps,
+    variant
+  }, tooltip));
+}, "TooltipIcon");
 
 // src/theme/ThemeProvider.tsx
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
-import * as React15 from "react";
+import * as React16 from "react";
 import { ThemeUIProvider } from "theme-ui";
 var ThemeProvider = /* @__PURE__ */__name(({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(ThemeUIProvider, {
+  return /* @__PURE__ */React16.createElement(React16.Fragment, null, /* @__PURE__ */React16.createElement(ThemeUIProvider, {
     theme
-  }, /* @__PURE__ */React15.createElement(Global, {
+  }, /* @__PURE__ */React16.createElement(Global, {
     styles: css`
             ${fonts.map(url => {
       return `@import url('${url}');`;
@@ -1335,4 +1346,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,72 @@ 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;
+    /**
+     * Optional tooltip text to display when hovering over the icon.
+     */
     tooltip?: string;
-    tooltipProps?: Omit<TooltipProps, 'children' | 'anchorSelect'>;
+    /**
+     * Additional props to pass to the Tooltip component.
+     * Excludes 'children', 'anchorSelect', and 'variant' which are managed internally.
+     */
+    tooltipProps?: Omit<TooltipProps, 'children' | 'anchorSelect' | '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="Additional information"
+ *   variant="info"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <TooltipIcon
+ *   icon="warning-alt"
+ *   tooltip="Warning message"
+ *   variant="warning"
+ *   onClick={() => console.log('Clicked')}
+ * />
+ * ```
+ */
+declare const TooltipIcon: ({ icon, onClick, tooltip, tooltipProps, "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;
 
@@ -90,17 +147,7 @@ type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'type'> & {
 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;
 
@@ -191,4 +238,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, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.11.0",
+  "version": "6.0.0",
   "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",
@@ -44,9 +44,9 @@
     "jest": "^30.2.0",
     "react": "^19.2.0",
     "tsup": "^8.5.1",
-    "@ttoss/test-utils": "^3.0.4",
-    "@ttoss/react-icons": "^0.5.3",
-    "@ttoss/config": "^1.35.12"
+    "@ttoss/config": "^1.35.12",
+    "@ttoss/react-icons": "^0.5.4",
+    "@ttoss/test-utils": "^4.0.0"
   },
   "keywords": [
     "React",