@ttoss/ui 5.7.0 → 5.8.1

package/dist/esm/index.js

@@ -1132,11 +1132,66 @@ var Switch = props => {
   });
 };
 
+// src/components/Tag.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Tag = ({
+  children
+}) => {
+  if (Array.isArray(children)) {
+    return /* @__PURE__ */jsx20(Box, {
+      as: "span",
+      sx: {
+        ml: 2,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: children.map((child, i) => {
+        return /* @__PURE__ */jsx20(Box, {
+          as: "span",
+          sx: {
+            px: 2,
+            py: 0,
+            fontSize: "xs",
+            borderRadius: "full",
+            backgroundColor: "display.background.secondary.default",
+            color: "text.secondary",
+            border: "1px solid",
+            borderColor: "border.default",
+            fontWeight: "medium",
+            lineHeight: 1.5
+          },
+          children: child
+        }, i);
+      })
+    });
+  }
+  return /* @__PURE__ */jsx20(Box, {
+    as: "span",
+    sx: {
+      ml: 2,
+      px: 2,
+      py: 0,
+      fontSize: "xs",
+      borderRadius: "full",
+      backgroundColor: "display.background.secondary.default",
+      color: "text.secondary",
+      border: "1px solid",
+      borderColor: "border.default",
+      fontWeight: "medium",
+      lineHeight: 1.5,
+      display: "inline-flex",
+      alignItems: "center"
+    },
+    children
+  });
+};
+
 // src/components/Textarea.tsx
 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 jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var Textarea = React13.forwardRef(({
   trailingIcon,
   className,
@@ -1151,7 +1206,7 @@ var Textarea = React13.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [/* @__PURE__ */jsx20(TextareaUI, {
+    children: [/* @__PURE__ */jsx21(TextareaUI, {
       ref,
       sx: {
         fontFamily: "body",
@@ -1163,13 +1218,13 @@ var Textarea = React13.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */jsx20(Text, {
+    }), trailingIcon && /* @__PURE__ */jsx21(Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
         top: "0.75rem"
       },
-      children: /* @__PURE__ */jsx20(Icon8, {
+      children: /* @__PURE__ */jsx21(Icon8, {
         inline: true,
         icon: trailingIcon
       })
@@ -1180,9 +1235,10 @@ Textarea.displayName = "Textarea";
 
 // src/components/Tooltip.tsx
 import { Tooltip as TooltipReact } from "react-tooltip";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Tooltip = ({
   variant = "info",
+  sx,
   ...props
 }) => {
   const className = `tooltip-component tooltip-${variant}`;
@@ -1211,7 +1267,7 @@ var Tooltip = ({
     };
     return variants[variantType] || variants.info;
   };
-  return /* @__PURE__ */jsx21(Box, {
+  return /* @__PURE__ */jsx22(Box, {
     sx: ({
       fonts
     }) => {
@@ -1236,12 +1292,13 @@ var Tooltip = ({
             textDecorationLine: "underline",
             lineHeight: "normal"
           },
-          ...variantStyles
+          ...variantStyles,
+          ...sx
         },
         [`&.tooltip-${variant}`]: variantStyles
       };
     },
-    children: /* @__PURE__ */jsx21(TooltipReact, {
+    children: /* @__PURE__ */jsx22(TooltipReact, {
       className,
       ...props,
       classNameArrow: "example-arrow",
@@ -1254,16 +1311,16 @@ var Tooltip = ({
 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 jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = BruttalTheme,
   fonts = BruttalFonts
 }) => {
-  return /* @__PURE__ */jsx22(Fragment2, {
+  return /* @__PURE__ */jsx23(Fragment2, {
     children: /* @__PURE__ */jsxs9(ThemeUIProvider, {
       theme,
-      children: [/* @__PURE__ */jsx22(Global, {
+      children: [/* @__PURE__ */jsx23(Global, {
         styles: css`
             ${fonts.map(url => {
           return `@import url('${url}');`;
@@ -1282,4 +1339,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, 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, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -159,12 +159,17 @@ declare const Stack: (props: StackProps) => react_jsx_runtime.JSX.Element;
 
 declare const Switch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
 
+type TagProps = {
+    children: React.ReactNode | React.ReactNode[];
+};
+declare const Tag: ({ children }: TagProps) => react_jsx_runtime.JSX.Element;
+
 interface TextareaProps extends TextareaProps$1 {
     trailingIcon?: IconType;
 }
 declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 
-declare const Tooltip: ({ variant, ...props }: ITooltip) => react_jsx_runtime.JSX.Element;
+declare const Tooltip: ({ variant, sx, ...props }: ITooltip & SxProp) => react_jsx_runtime.JSX.Element;
 
 type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -178,4 +183,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, 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, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.7.0",
+  "version": "5.8.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -44,8 +44,8 @@
     "jest": "^29.7.0",
     "react": "^19.0.0",
     "tsup": "^8.3.5",
-    "@ttoss/react-icons": "^0.4.11",
     "@ttoss/config": "^1.35.3",
+    "@ttoss/react-icons": "^0.4.11",
     "@ttoss/test-utils": "^2.1.23"
   },
   "keywords": [