@ttoss/ui 5.6.1 → 5.7.0

package/dist/esm/index.js

@@ -669,7 +669,10 @@ var Label = ({
         cursor: "pointer"
       },
       "aria-label": TOOLTIP_LABEL,
-      children: [/* @__PURE__ */jsx14(Icon6, {
+      children: [tooltip.icon ? /* @__PURE__ */jsx14(Icon6, {
+        inline: true,
+        icon: tooltip.icon
+      }) : /* @__PURE__ */jsx14(Icon6, {
         inline: true,
         icon: "fluent:info-24-regular"
       }), /* @__PURE__ */jsx14(Tooltip, {
@@ -677,6 +680,10 @@ var Label = ({
         openOnClick: tooltip.openOnClick,
         clickable: tooltip.clickable,
         place: tooltip.place,
+        hidden: tooltip.hidden,
+        variant: tooltip.variant,
+        setIsOpen: tooltip.setIsOpen,
+        isOpen: tooltip.isOpen,
         children: tooltip.render
       })]
     })]
@@ -1174,22 +1181,51 @@ Textarea.displayName = "Textarea";
 // src/components/Tooltip.tsx
 import { Tooltip as TooltipReact } from "react-tooltip";
 import { jsx as jsx21 } from "react/jsx-runtime";
-var Tooltip = props => {
-  const className = "tooltip-component";
+var Tooltip = ({
+  variant = "info",
+  ...props
+}) => {
+  const className = `tooltip-component tooltip-${variant}`;
+  const getVariantStyles = 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;
+  };
   return /* @__PURE__ */jsx21(Box, {
     sx: ({
       fonts
     }) => {
+      const variantStyles = getVariantStyles(variant);
       return {
+        ".example-arrow": {
+          display: "none"
+        },
         ".tooltip-component": {
           fontFamily: fonts?.body,
-          backgroundColor: "input.background.secondary.default",
           paddingY: "2",
           paddingX: "3",
-          color: "feedback.text.secondary.default",
           border: "sm",
           borderRadius: "xl",
-          borderColor: "feedback.border.secondary.default",
           zIndex: "tooltip",
           opacity: "1",
           lineHeight: "shorter",
@@ -1199,13 +1235,16 @@ var Tooltip = props => {
             fontFamily: "body",
             textDecorationLine: "underline",
             lineHeight: "normal"
-          }
-        }
+          },
+          ...variantStyles
+        },
+        [`&.tooltip-${variant}`]: variantStyles
       };
     },
     children: /* @__PURE__ */jsx21(TooltipReact, {
       className,
       ...props,
+      classNameArrow: "example-arrow",
       children: props.children
     })
   });

package/dist/index.d.ts

@@ -88,6 +88,11 @@ type LabelProps = LabelProps$1 & {
         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;
     };
 };
 declare const Label: ({ children, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
@@ -159,7 +164,7 @@ interface TextareaProps extends TextareaProps$1 {
 }
 declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 
-declare const Tooltip: (props: ITooltip) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ variant, ...props }: ITooltip) => react_jsx_runtime.JSX.Element;
 
 type ThemeProviderProps = {
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -29,7 +29,7 @@
     "react-select": "^5.9.0",
     "react-tooltip": "^5.28.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.5.8"
+    "@ttoss/theme": "^2.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -44,8 +44,8 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/config": "^1.35.3",
     "@ttoss/react-icons": "^0.4.11",
+    "@ttoss/config": "^1.35.3",
     "@ttoss/test-utils": "^2.1.23"
   },
   "keywords": [