@ttoss/ui 5.10.3 → 5.10.5

package/dist/esm/index.js

@@ -1093,9 +1093,61 @@ var Switch = /* @__PURE__ */__name(props => {
 
 // src/components/Tag.tsx
 import * as React15 from "react";
+var tagVariantMap = {
+  positive: {
+    bg: "feedback.background.positive.default",
+    color: "feedback.text.positive.default"
+  },
+  accent: {
+    bg: "action.background.accent.default",
+    color: "action.text.accent.default"
+  },
+  caution: {
+    bg: "feedback.background.caution.default",
+    color: "feedback.text.caution.default"
+  },
+  muted: {
+    bg: "display.background.muted.default",
+    color: "display.text.muted.default"
+  },
+  negative: {
+    bg: "feedback.background.negative.default",
+    color: "feedback.text.negative.default"
+  },
+  primary: {
+    bg: "action.background.primary.default",
+    color: "action.text.primary.default"
+  },
+  secondary: {
+    bg: "action.background.secondary.default",
+    color: "action.text.secondary.default"
+  },
+  default: {
+    bg: "action.background.muted.default",
+    color: "action.text.muted.default"
+  }
+};
 var Tag = /* @__PURE__ */__name(({
-  children
+  children,
+  variant = "default",
+  sx
 }) => {
+  const colors = tagVariantMap[variant];
+  const baseStyles = {
+    ml: 2,
+    px: 2,
+    py: 0,
+    fontSize: "xs",
+    borderRadius: "full",
+    backgroundColor: colors.bg,
+    color: colors.color,
+    border: "1px solid",
+    borderColor: "border.default",
+    fontWeight: "medium",
+    lineHeight: 1.5,
+    display: "inline-flex",
+    alignItems: "center"
+  };
   if (Array.isArray(children)) {
     return /* @__PURE__ */React15.createElement(Box, {
       as: "span",
@@ -1103,23 +1155,20 @@ var Tag = /* @__PURE__ */__name(({
         ml: 2,
         display: "inline-flex",
         alignItems: "center",
-        gap: 1
+        gap: 1,
+        ...sx
       }
     }, children.map((child, i) => {
       return /* @__PURE__ */React15.createElement(Box, {
         key: i,
         as: "span",
         sx: {
+          ...baseStyles,
           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
+          backgroundColor: colors.bg,
+          color: colors.color
         }
       }, child);
     }));
@@ -1127,19 +1176,8 @@ var Tag = /* @__PURE__ */__name(({
   return /* @__PURE__ */React15.createElement(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"
+      ...baseStyles,
+      ...sx
     }
   }, children);
 }, "Tag");

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, 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';
+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, ThemeUIStyleObject, 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';
@@ -159,10 +159,13 @@ declare const Stack: (props: StackProps) => react_jsx_runtime.JSX.Element;
 
 declare const Switch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
 
+type TagVariant = 'accent' | 'positive' | 'caution' | 'muted' | 'negative' | 'primary' | 'secondary' | 'default';
 type TagProps = {
     children: React.ReactNode | React.ReactNode[];
+    variant?: TagVariant;
+    sx?: ThemeUIStyleObject;
 };
-declare const Tag: ({ children }: TagProps) => react_jsx_runtime.JSX.Element;
+declare const Tag: ({ children, variant, sx }: TagProps) => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends TextareaProps$1 {
     trailingIcon?: IconType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "5.10.3",
+  "version": "5.10.5",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -29,12 +29,12 @@
     "react-select": "^5.9.0",
     "react-tooltip": "^5.28.0",
     "theme-ui": "^0.17.1",
-    "@ttoss/theme": "^2.6.7"
+    "@ttoss/theme": "^2.6.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.4.18"
+    "@ttoss/react-icons": "^0.5.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -45,7 +45,7 @@
     "react": "^19.2.0",
     "tsup": "^8.5.0",
     "@ttoss/config": "^1.35.9",
-    "@ttoss/react-icons": "^0.4.18",
+    "@ttoss/react-icons": "^0.5.0",
     "@ttoss/test-utils": "^3.0.1"
   },
   "keywords": [