@ttoss/ui 5.2.1 → 5.3.1

package/dist/esm/index.js

@@ -615,44 +615,54 @@ InputPassword.displayName = "InputPassword";
 
 // src/components/Label.tsx
 import { Icon as Icon6 } from "@ttoss/react-icons";
+import * as React10 from "react";
 import { Label as LabelUi } from "theme-ui";
 import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
   children,
-  onTooltipClick,
   tooltip,
+  onTooltipClick,
   sx,
   ...props
 }) => {
+  const id = React10.useId();
+  const tooltipId = `${id}-tooltip`;
   return /* @__PURE__ */jsxs6(LabelUi, {
+    "data-tooltip-id": tooltipId,
     sx: {
       alignItems: "center",
       fontSize: "sm",
       lineHeight: "normal",
+      width: "fit-content",
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */jsx14(Text, {
+    children: [children, tooltip && /* @__PURE__ */jsxs6(Text, {
       sx: {
         color: "currentcolor",
-        cursor: onTooltipClick ? "pointer" : void 0
+        cursor: "pointer"
       },
-      onClick: onTooltipClick,
       "aria-label": TOOLTIP_LABEL,
-      children: /* @__PURE__ */jsx14(Icon6, {
+      onClick: onTooltipClick,
+      children: [/* @__PURE__ */jsx14(Icon6, {
         inline: true,
-        icon: "info"
-      })
+        icon: "fluent:info-24-regular"
+      }), /* @__PURE__ */jsx14(Tooltip, {
+        id: tooltipId,
+        clickable: onTooltipClick ? true : false,
+        place: "top",
+        children: tooltip
+      })]
     })]
   });
 };
 
 // src/components/Link.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Link as LinkUi } from "theme-ui";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var Link = React10.forwardRef(({
+var Link = React11.forwardRef(({
   quiet,
   className,
   ...props
@@ -673,7 +683,7 @@ import { Radio } from "theme-ui";
 
 // src/components/Select.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React11 from "react";
+import * as React12 from "react";
 import ReactSelect, { components } from "react-select";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var Control = props => {
@@ -831,7 +841,7 @@ var ValueContainer = ({
     })]
   });
 };
-var Select = React11.forwardRef(({
+var Select = React12.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -899,13 +909,13 @@ var Switch = props => {
     sx: {
       backgroundColor: "input.background.muted.disabled",
       "input:checked ~ &": {
-        backgroundColor: "input.background.secondary.default"
+        backgroundColor: "input.background.accent.default"
       },
       "input ~ & > div": {
         backgroundColor: "input.background.primary.default"
       },
       "input:checked ~ & > div": {
-        backgroundColor: "input.background.accent.default"
+        backgroundColor: "input.text.primary.default"
       },
       "input:focus ~ &": {
         outline: "md",
@@ -918,10 +928,10 @@ var Switch = props => {
 
 // src/components/Textarea.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import * as React13 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
 import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
-var Textarea = React12.forwardRef(({
+var Textarea = React13.forwardRef(({
   trailingIcon,
   className,
   sx,
@@ -962,20 +972,54 @@ var Textarea = React12.forwardRef(({
 });
 Textarea.displayName = "Textarea";
 
+// src/components/Tooltip.tsx
+import { Tooltip as TooltipReact } from "react-tooltip";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Tooltip = props => {
+  const className = "tooltip-component";
+  return /* @__PURE__ */jsx20(Box, {
+    sx: ({
+      colors,
+      fonts
+    }) => {
+      const themeColors = colors;
+      return {
+        ".tooltip-component": {
+          fontFamily: fonts?.body,
+          backgroundColor: themeColors?.feedback?.background?.primary?.default,
+          paddingY: "2",
+          paddingX: "3",
+          color: themeColors?.feedback?.text?.secondary?.default,
+          border: "sm",
+          borderRadius: "xl",
+          borderColor: themeColors?.feedback?.border?.primary?.default,
+          zIndex: "tooltip",
+          opacity: "1"
+        }
+      };
+    },
+    children: /* @__PURE__ */jsx20(TooltipReact, {
+      className,
+      ...props,
+      children: props.children
+    })
+  });
+};
+
 // src/theme/ThemeProvider.tsx
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
 import { Global, css } from "@emotion/react";
 import { ThemeUIProvider } from "theme-ui";
-import { Fragment, jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx20(Fragment, {
+  return /* @__PURE__ */jsx21(Fragment, {
     children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
       theme,
-      children: [/* @__PURE__ */jsx20(Global, {
+      children: [/* @__PURE__ */jsx21(Global, {
         styles: css`
             ${fonts.map(url => {
           return `@import url('${url}');`;
@@ -994,4 +1038,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, Select, Slider, Spinner, Stack, Switch, Text, Textarea, ThemeProvider, 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, Select, Slider, Spinner, Stack, Switch, Text, Textarea, ThemeProvider, Tooltip, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -5,6 +5,7 @@ import * as theme_ui from 'theme-ui';
 import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, TextProps, IconButtonProps, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SxProp, FlexProps, SwitchProps, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
 export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, 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';
 export { Keyframes, keyframes } from '@emotion/react';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 
@@ -79,10 +80,10 @@ type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick
 declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 type LabelProps = LabelProps$1 & {
-    tooltip?: boolean;
+    tooltip?: string | React.ReactNode;
     onTooltipClick?: () => void;
 };
-declare const Label: ({ children, onTooltipClick, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
+declare const Label: ({ children, tooltip, onTooltipClick, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
 
 type LinkProps = LinkProps$1 & {
     quiet?: boolean;
@@ -136,6 +137,8 @@ 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;
+
 type ThemeProviderProps = {
     children?: React.ReactNode;
     theme?: Theme;
@@ -148,4 +151,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, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.2.1",
+  "version": "5.3.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -26,8 +26,9 @@
   "dependencies": {
     "@theme-ui/match-media": "^0.17.1",
     "react-select": "^5.9.0",
+    "react-tooltip": "^5.28.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.2.1"
+    "@ttoss/theme": "^2.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",