@ttoss/ui 5.6.0 → 5.7.0

package/dist/esm/index.js

@@ -264,44 +264,16 @@ var Checkbox = React2.forwardRef(({
 Checkbox.displayName = "Checkbox";
 
 // src/components/CloseButton.tsx
-import { Icon as Icon3 } from "@ttoss/react-icons";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Close as CloseUI } from "theme-ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var CloseButton = props => {
-  return /* @__PURE__ */jsxs3(Button, {
+  return /* @__PURE__ */jsx6(CloseUI, {
     type: "button",
+    "aria-label": props.ariaLabel,
     sx: {
-      fontFamily: "body",
-      display: "flex",
-      alignItems: "center",
-      cursor: "pointer",
-      lineHeight: "normal",
-      padding: "2",
-      backgroundColor: "action.background.primary.active",
-      color: "action.text.primary.default",
-      border: "sm",
-      borderColor: "action.border.primary.default",
-      borderRadius: "sm",
-      gap: 2,
-      ":disabled": {
-        border: "sm",
-        backgroundColor: "action.background.muted.default",
-        borderColor: "action.border.muted.default",
-        color: "action.text.muted.default",
-        cursor: "not-allowed"
-      },
-      ":is(:focus-within, :hover):not(:disabled)": {
-        color: "action.text.secondary.active",
-        backgroundColor: "action.background.secondary.active",
-        borderColor: "action.border.secondary.active"
-      },
       ...props.sx
     },
-    ...props,
-    children: [props.label && /* @__PURE__ */jsx6("span", {
-      children: props.label
-    }), /* @__PURE__ */jsx6(Icon3, {
-      icon: "close"
-    })]
+    ...props
   });
 };
 
@@ -352,7 +324,7 @@ var HelpText = ({
 };
 
 // src/components/IconButton.tsx
-import { Icon as Icon4 } from "@ttoss/react-icons";
+import { Icon as Icon3 } from "@ttoss/react-icons";
 import { IconButton as IconButtonUi } from "theme-ui";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var IconButton = props => {
@@ -372,7 +344,7 @@ var IconButton = props => {
       },
       ...restProps.sx
     },
-    children: icon ? /* @__PURE__ */jsx9(Icon4, {
+    children: icon ? /* @__PURE__ */jsx9(Icon3, {
       inline: true,
       icon
     }) : children
@@ -422,10 +394,10 @@ var InfiniteLinearProgress = () => {
 };
 
 // src/components/Input.tsx
-import { Icon as Icon5 } from "@ttoss/react-icons";
+import { Icon as Icon4 } from "@ttoss/react-icons";
 import * as React5 from "react";
 import { Input as InputUI } from "theme-ui";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var Input = React5.forwardRef(({
   leadingIcon,
   trailingIcon: trailingIconProp,
@@ -437,7 +409,7 @@ var Input = React5.forwardRef(({
 }, ref) => {
   const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
   const isWarning = !inputProps["aria-invalid"] && trailingIcon === "warning-alt";
-  return /* @__PURE__ */jsxs4(Flex, {
+  return /* @__PURE__ */jsxs3(Flex, {
     className: `${className} ${isWarning ? "is-warning" : ""}`,
     sx: {
       ...sx,
@@ -454,7 +426,7 @@ var Input = React5.forwardRef(({
       },
       onClick: onLeadingIconClick,
       variant: "leading-icon",
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx11(Icon4, {
         inline: true,
         icon: leadingIcon
       })
@@ -482,7 +454,7 @@ var Input = React5.forwardRef(({
       },
       variant: "trailing-icon",
       onClick: onTrailingIconClick,
-      children: /* @__PURE__ */jsx11(Icon5, {
+      children: /* @__PURE__ */jsx11(Icon4, {
         inline: true,
         icon: trailingIcon
       })
@@ -492,10 +464,10 @@ var Input = React5.forwardRef(({
 Input.displayName = "Input";
 
 // src/components/InputNumber.tsx
-import { Icon as Icon6 } from "@ttoss/react-icons";
+import { Icon as Icon5 } from "@ttoss/react-icons";
 import * as React6 from "react";
 import { Input as Input2 } from "theme-ui";
-import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 var InputNumber = React6.forwardRef(({
   sx,
   value,
@@ -556,7 +528,7 @@ var InputNumber = React6.forwardRef(({
     }
     onChange(value + 1);
   };
-  return /* @__PURE__ */jsxs5(Flex, {
+  return /* @__PURE__ */jsxs4(Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -585,7 +557,7 @@ var InputNumber = React6.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeUp,
-      children: /* @__PURE__ */jsx12(Icon6, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "picker-down"
       })
     }), infoIcon && /* @__PURE__ */jsx12(Text, {
@@ -597,7 +569,7 @@ var InputNumber = React6.forwardRef(({
         cursor: onClickInfoIcon ? "pointer" : "default"
       },
       onClick: onClickInfoIcon,
-      children: /* @__PURE__ */jsx12(Icon6, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "info"
       })
     }), /* @__PURE__ */jsx12(Text, {
@@ -609,7 +581,7 @@ var InputNumber = React6.forwardRef(({
         cursor: "pointer"
       },
       onClick: handleChangeDown,
-      children: /* @__PURE__ */jsx12(Icon6, {
+      children: /* @__PURE__ */jsx12(Icon5, {
         icon: "picker-up"
       })
     })]
@@ -667,10 +639,10 @@ var InputPassword = React8.forwardRef(({
 InputPassword.displayName = "InputPassword";
 
 // src/components/Label.tsx
-import { Icon as Icon7 } from "@ttoss/react-icons";
+import { Icon as Icon6 } from "@ttoss/react-icons";
 import * as React9 from "react";
 import { Label as LabelUi } from "theme-ui";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
@@ -680,7 +652,7 @@ var Label = ({
 }) => {
   const id = React9.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */jsxs6(LabelUi, {
+  return /* @__PURE__ */jsxs5(LabelUi, {
     "data-tooltip-id": tooltipId,
     sx: {
       alignItems: "center",
@@ -691,13 +663,16 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */jsxs6(Text, {
+    children: [children, tooltip && /* @__PURE__ */jsxs5(Text, {
       sx: {
         color: "currentcolor",
         cursor: "pointer"
       },
       "aria-label": TOOLTIP_LABEL,
-      children: [/* @__PURE__ */jsx14(Icon7, {
+      children: [tooltip.icon ? /* @__PURE__ */jsx14(Icon6, {
+        inline: true,
+        icon: tooltip.icon
+      }) : /* @__PURE__ */jsx14(Icon6, {
         inline: true,
         icon: "fluent:info-24-regular"
       }), /* @__PURE__ */jsx14(Tooltip, {
@@ -705,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
       })]
     })]
@@ -737,7 +716,7 @@ import { Radio } from "theme-ui";
 // src/components/SegmentedControl.tsx
 import * as React11 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var SegmentedControl = ({
   options,
   value: propValue,
@@ -852,15 +831,15 @@ var SegmentedControl = ({
     ...rest,
     children: /* @__PURE__ */jsx16("div", {
       className: "rc-segmented",
-      children: /* @__PURE__ */jsxs7(Flex2, {
+      children: /* @__PURE__ */jsxs6(Flex2, {
         className: "rc-segmented-group custom-segmented-group",
         children: [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__ */jsxs7(React11.Fragment, {
-            children: [/* @__PURE__ */jsxs7(Box3, {
+          return /* @__PURE__ */jsxs6(React11.Fragment, {
+            children: [/* @__PURE__ */jsxs6(Box3, {
               as: "label",
               className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
               onClick: () => {
@@ -909,10 +888,10 @@ var SegmentedControl = ({
 };
 
 // src/components/Select.tsx
-import { Icon as Icon8 } from "@ttoss/react-icons";
+import { Icon as Icon7 } from "@ttoss/react-icons";
 import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
   const isDisabled = props.selectProps.isDisabled;
   const hasError = props.selectProps["aria-invalid"] === "true";
@@ -961,7 +940,7 @@ var DropdownIndicator = props => {
       display: "flex",
       alignItems: "center"
     },
-    children: /* @__PURE__ */jsx17(Icon8, {
+    children: /* @__PURE__ */jsx17(Icon7, {
       icon: "picker-down"
     })
   });
@@ -1032,7 +1011,7 @@ var ValueContainer = ({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */jsxs8(Flex, {
+  return /* @__PURE__ */jsxs7(Flex, {
     sx: {
       gap: "4",
       flex: 1
@@ -1044,7 +1023,7 @@ var ValueContainer = ({
         lineHeight: 0,
         fontSize: "md"
       },
-      children: /* @__PURE__ */jsx17(Icon8, {
+      children: /* @__PURE__ */jsx17(Icon7, {
         icon: finalLeadingIcon
       })
     }), /* @__PURE__ */jsx17(Flex, {
@@ -1062,7 +1041,7 @@ var ValueContainer = ({
         fontSize: "md",
         color: trailingIconColor
       },
-      children: /* @__PURE__ */jsx17(Icon8, {
+      children: /* @__PURE__ */jsx17(Icon7, {
         icon: hasError ? "warning-alt" : trailingIcon
       })
     })]
@@ -1154,17 +1133,17 @@ var Switch = props => {
 };
 
 // src/components/Textarea.tsx
-import { Icon as Icon9 } from "@ttoss/react-icons";
+import { Icon as Icon8 } from "@ttoss/react-icons";
 import * as React13 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 var Textarea = React13.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */jsxs9(Flex, {
+  return /* @__PURE__ */jsxs8(Flex, {
     className,
     sx: {
       ...sx,
@@ -1190,7 +1169,7 @@ var Textarea = React13.forwardRef(({
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx20(Icon9, {
+      children: /* @__PURE__ */jsx20(Icon8, {
         inline: true,
         icon: trailingIcon
       })
@@ -1202,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",
@@ -1227,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
     })
   });
@@ -1243,14 +1254,14 @@ var Tooltip = props => {
 import { css, Global } from "@emotion/react";
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
 import { ThemeUIProvider } from "theme-ui";
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
   return /* @__PURE__ */jsx22(Fragment2, {
-    children: /* @__PURE__ */jsxs10(ThemeUIProvider, {
+    children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
       theme,
       children: [/* @__PURE__ */jsx22(Global, {
         styles: css`

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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, TextProps, IconButtonProps as IconButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SxProp, SwitchProps, 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, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SxProp, SwitchProps, 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';
@@ -41,8 +41,8 @@ interface CheckboxProps extends CheckboxProps$1 {
 }
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-type CloseButtonProps = ButtonProps & {
-    label?: string;
+type CloseButtonProps = CloseProps & {
+    ariaLabel?: string;
 };
 declare const CloseButton: (props: CloseButtonProps) => react_jsx_runtime.JSX.Element;
 
@@ -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.0",
+  "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.7"
+    "@ttoss/theme": "^2.6.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -45,8 +45,8 @@
     "react": "^19.0.0",
     "tsup": "^8.3.5",
     "@ttoss/react-icons": "^0.4.11",
-    "@ttoss/test-utils": "^2.1.23",
-    "@ttoss/config": "^1.35.3"
+    "@ttoss/config": "^1.35.3",
+    "@ttoss/test-utils": "^2.1.23"
   },
   "keywords": [
     "React",