@ttoss/ui 4.1.0 → 4.1.1

package/dist/esm/index.js

@@ -36,11 +36,18 @@ var useTheme = useThemeUI;
 // src/components/Badge.tsx
 import { Badge as BadgeUi } from "theme-ui";
 import { Icon } from "@ttoss/react-icons";
+
+// src/components/Text.tsx
+import { Text } from "theme-ui";
+
+// src/components/Badge.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Badge = ({
   icon,
   children,
   sx,
+  chip,
+  onDelete,
   ...props
 }) => {
   return /* @__PURE__ */jsxs2(BadgeUi, {
@@ -61,7 +68,19 @@ var Badge = ({
     children: [icon && /* @__PURE__ */jsx2(Icon, {
       inline: true,
       icon
-    }), children]
+    }), children, chip && /* @__PURE__ */jsx2(Text, {
+      sx: {
+        cursor: "pointer",
+        lineHeight: 0,
+        color: "currentcolor",
+        alignSelf: "center"
+      },
+      children: /* @__PURE__ */jsx2(Icon, {
+        onClick: onDelete,
+        inline: true,
+        icon: "close"
+      })
+    })]
   });
 };
 
@@ -250,9 +269,6 @@ Link.displayName = "Link";
 // src/components/LinearProgress.tsx
 import { Progress } from "theme-ui";
 
-// src/components/Text.tsx
-import { Text } from "theme-ui";
-
 // src/components/Select.tsx
 import * as React4 from "react";
 import { Icon as Icon5 } from "@ttoss/react-icons";

package/dist/index.d.mts

@@ -22,8 +22,10 @@ declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconType;
+    chip?: boolean;
+    onDelete?: () => void;
 };
-declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;

package/dist/index.d.ts

@@ -22,8 +22,10 @@ declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
 type BadgeProps = BadgeProps$1 & {
     icon?: IconType;
+    chip?: boolean;
+    onDelete?: () => void;
 };
-declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+declare const Badge: ({ icon, children, sx, chip, onDelete, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;

package/dist/index.js

@@ -41,26 +41,26 @@ __export(src_exports, {
   ActionButton: () => ActionButton,
   Badge: () => Badge,
   BaseStyles: () => import_theme_ui26.BaseStyles,
-  Box: () => import_theme_ui4.Box,
+  Box: () => import_theme_ui5.Box,
   Button: () => Button,
-  Card: () => import_theme_ui6.Card,
+  Card: () => import_theme_ui7.Card,
   Checkbox: () => import_theme_ui21.Checkbox,
   CloseButton: () => CloseButton,
   Container: () => Container,
-  Divider: () => import_theme_ui7.Divider,
-  Flex: () => import_theme_ui8.Flex,
+  Divider: () => import_theme_ui8.Divider,
+  Flex: () => import_theme_ui9.Flex,
   Global: () => import_theme_ui26.Global,
-  Grid: () => import_theme_ui9.Grid,
-  Heading: () => import_theme_ui10.Heading,
+  Grid: () => import_theme_ui10.Grid,
+  Heading: () => import_theme_ui11.Heading,
   HelpText: () => HelpText,
   IconButton: () => IconButton,
-  Image: () => import_theme_ui11.Image,
+  Image: () => import_theme_ui12.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
   InputNumber: () => InputNumber,
   InputPassword: () => InputPassword,
   Label: () => Label,
-  LinearProgress: () => import_theme_ui15.Progress,
+  LinearProgress: () => import_theme_ui16.Progress,
   Link: () => Link,
   Paragraph: () => import_theme_ui25.Paragraph,
   Radio: () => import_theme_ui18.Radio,
@@ -68,7 +68,7 @@ __export(src_exports, {
   Slider: () => import_theme_ui20.Slider,
   Spinner: () => import_theme_ui17.Spinner,
   Stack: () => Stack,
-  Text: () => import_theme_ui16.Text,
+  Text: () => import_theme_ui3.Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
   keyframes: () => import_react2.keyframes,
@@ -110,16 +110,23 @@ var import_theme_ui2 = require("theme-ui");
 var useTheme = import_theme_ui2.useThemeUI;
 
 // src/components/Badge.tsx
-var import_theme_ui3 = require("theme-ui");
+var import_theme_ui4 = require("theme-ui");
 var import_react_icons = require("@ttoss/react-icons");
+
+// src/components/Text.tsx
+var import_theme_ui3 = require("theme-ui");
+
+// src/components/Badge.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Badge = ({
   icon,
   children,
   sx,
+  chip,
+  onDelete,
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_theme_ui3.Badge, {
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsxs)(import_theme_ui4.Badge, {
     sx: {
       display: "flex",
       alignItems: "center",
@@ -137,16 +144,28 @@ var Badge = ({
     children: [icon && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
       inline: true,
       icon
-    }), children]
+    }), children, chip && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_theme_ui3.Text, {
+      sx: {
+        cursor: "pointer",
+        lineHeight: 0,
+        color: "currentcolor",
+        alignSelf: "center"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_icons.Icon, {
+        onClick: onDelete,
+        inline: true,
+        icon: "close"
+      })
+    })]
   });
 };
 
 // src/components/Box.tsx
-var import_theme_ui4 = require("theme-ui");
+var import_theme_ui5 = require("theme-ui");
 
 // src/components/Button.tsx
 var React = __toESM(require("react"));
-var import_theme_ui5 = require("theme-ui");
+var import_theme_ui6 = require("theme-ui");
 var import_react_icons2 = require("@ttoss/react-icons");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Button = React.forwardRef((props, ref) => {
@@ -157,7 +176,7 @@ var Button = React.forwardRef((props, ref) => {
     loading,
     ...restProps
   } = props;
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui5.Button, {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_theme_ui6.Button, {
     type: "button",
     ...restProps,
     ref,
@@ -186,27 +205,27 @@ var Button = React.forwardRef((props, ref) => {
 Button.displayName = "Button";
 
 // src/components/Card.tsx
-var import_theme_ui6 = require("theme-ui");
+var import_theme_ui7 = require("theme-ui");
 
 // src/components/Divider.tsx
-var import_theme_ui7 = require("theme-ui");
+var import_theme_ui8 = require("theme-ui");
 
 // src/components/Flex.tsx
-var import_theme_ui8 = require("theme-ui");
+var import_theme_ui9 = require("theme-ui");
 
 // src/components/Grid.tsx
-var import_theme_ui9 = require("theme-ui");
+var import_theme_ui10 = require("theme-ui");
 
 // src/components/Heading.tsx
-var import_theme_ui10 = require("theme-ui");
+var import_theme_ui11 = require("theme-ui");
 
 // src/components/Image.tsx
-var import_theme_ui11 = require("theme-ui");
+var import_theme_ui12 = require("theme-ui");
 
 // src/components/Input.tsx
 var React2 = __toESM(require("react"));
 var import_react_icons3 = require("@ttoss/react-icons");
-var import_theme_ui12 = require("theme-ui");
+var import_theme_ui13 = require("theme-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Input = React2.forwardRef(({
   leadingIcon,
@@ -218,7 +237,7 @@ var Input = React2.forwardRef(({
   ...inputProps
 }, ref) => {
   const trailingIcon = inputProps["aria-invalid"] ? "warning-alt" : trailingIconProp;
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui9.Flex, {
     className,
     sx: {
       ...sx,
@@ -226,7 +245,7 @@ var Input = React2.forwardRef(({
       padding: 0,
       border: "none"
     },
-    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
+    children: [leadingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -239,7 +258,7 @@ var Input = React2.forwardRef(({
         inline: true,
         icon: leadingIcon
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui12.Input, {
+    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui13.Input, {
       ref,
       sx: {
         fontFamily: "body",
@@ -252,7 +271,7 @@ var Input = React2.forwardRef(({
       },
       className,
       ...inputProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui16.Text, {
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         right: "1rem",
@@ -272,7 +291,7 @@ Input.displayName = "Input";
 
 // src/components/Label.tsx
 var import_react_icons4 = require("@ttoss/react-icons");
-var import_theme_ui13 = require("theme-ui");
+var import_theme_ui14 = require("theme-ui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var TOOLTIP_LABEL = "tooltip";
 var Label = ({
@@ -282,7 +301,7 @@ var Label = ({
   sx,
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui13.Label, {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_theme_ui14.Label, {
     sx: {
       fontFamily: "caption",
       alignItems: "center",
@@ -291,7 +310,7 @@ var Label = ({
       ...sx
     },
     ...props,
-    children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui16.Text, {
+    children: [children, tooltip && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_theme_ui3.Text, {
       sx: {
         color: "currentcolor",
         cursor: onTooltipClick ? "pointer" : void 0
@@ -308,14 +327,14 @@ var Label = ({
 
 // src/components/Link.tsx
 var React3 = __toESM(require("react"));
-var import_theme_ui14 = require("theme-ui");
+var import_theme_ui15 = require("theme-ui");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Link = React3.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui14.Link, {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_theme_ui15.Link, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -324,9 +343,6 @@ var Link = React3.forwardRef(({
 Link.displayName = "Link";
 
 // src/components/LinearProgress.tsx
-var import_theme_ui15 = require("theme-ui");
-
-// src/components/Text.tsx
 var import_theme_ui16 = require("theme-ui");
 
 // src/components/Select.tsx
@@ -352,7 +368,7 @@ var Control = props => {
     }
     return "surface";
   })();
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
     sx: {
       ".react-select__control": {
         border,
@@ -375,7 +391,7 @@ var DropdownIndicator = props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
     sx: {
       fontSize: "base",
       color,
@@ -393,7 +409,7 @@ var IndicatorsContainer = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...props
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
     sx: {
       marginLeft: "lg",
       border: "none"
@@ -404,7 +420,7 @@ var IndicatorsContainer = ({
 var Placeholder = ({
   children
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -420,7 +436,7 @@ var SelectContainer = ({
     sx,
     css: css2
   } = props.selectProps;
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui4.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui5.Box, {
     sx,
     css: css2,
     children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_select.components.SelectContainer, {
@@ -452,12 +468,12 @@ var ValueContainer = ({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_theme_ui9.Flex, {
     sx: {
       gap: "lg",
       flex: 1
     },
-    children: [finalLeadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+    children: [finalLeadingIcon && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
       sx: {
         alignSelf: "center",
         pointerEvents: "none",
@@ -467,13 +483,13 @@ var ValueContainer = ({
       children: /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_icons5.Icon, {
         icon: finalLeadingIcon
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui8.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui9.Flex, {
       sx: {
         flex: 1,
         alignItems: "center"
       },
       children
-    }), (trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui16.Text, {
+    }), (trailingIcon || hasError) && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_theme_ui3.Text, {
       className: hasError ? "error-icon" : "",
       sx: {
         alignSelf: "center",
@@ -578,7 +594,7 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui15.Progress, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_theme_ui16.Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -596,7 +612,7 @@ var Textarea = React7.forwardRef(({
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_theme_ui9.Flex, {
     className,
     sx: {
       ...sx,
@@ -616,7 +632,7 @@ var Textarea = React7.forwardRef(({
       },
       className,
       ...textareaProps
-    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui16.Text, {
+    }), trailingIcon && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         right: "1.25rem",
@@ -652,7 +668,7 @@ var HelpText = ({
   ...props
 }) => {
   const variant = ["text.help", negative ? "negative" : void 0].filter(Boolean).join(".");
-  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui16.Text, {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui3.Text, {
     variant,
     sx: {
       fontSize: "sm",
@@ -772,7 +788,7 @@ var InputNumber = React10.forwardRef(({
     }
     onChange(value + 1);
   };
-  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_theme_ui9.Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -792,7 +808,7 @@ var InputNumber = React10.forwardRef(({
       },
       value,
       ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -804,7 +820,7 @@ var InputNumber = React10.forwardRef(({
       children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
         icon: "picker-down"
       })
-    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
+    }), infoIcon && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -816,7 +832,7 @@ var InputNumber = React10.forwardRef(({
       children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_react_icons8.Icon, {
         icon: "info"
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui16.Text, {
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_theme_ui3.Text, {
       sx: {
         position: "absolute",
         alignSelf: "center",
@@ -837,7 +853,7 @@ InputNumber.displayName = "InputNumber";
 var React11 = __toESM(require("react"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Stack = React11.forwardRef((props, ref) => {
-  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui8.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_theme_ui9.Flex, {
     ref,
     ...props,
     sx: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -38,9 +38,9 @@
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "tsup": "^8.0.1",
+    "@ttoss/test-utils": "^2.1.0",
     "@ttoss/config": "^1.31.4",
-    "@ttoss/react-icons": "^0.3.0",
-    "@ttoss/test-utils": "^2.1.0"
+    "@ttoss/react-icons": "^0.3.0"
   },
   "keywords": [
     "React",

package/src/components/Badge.tsx

@@ -1,11 +1,21 @@
 import { type BadgeProps as BadgePropsUi, Badge as BadgeUi } from 'theme-ui';
 import { Icon, IconType } from '@ttoss/react-icons';
+import { Text } from '../components/Text';
 
 export type BadgeProps = BadgePropsUi & {
   icon?: IconType;
+  chip?: boolean;
+  onDelete?: () => void;
 };
 
-export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
+export const Badge = ({
+  icon,
+  children,
+  sx,
+  chip,
+  onDelete,
+  ...props
+}: BadgeProps) => {
   return (
     <BadgeUi
       sx={{
@@ -24,7 +34,21 @@ export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
       {...props}
     >
       {icon && <Icon inline icon={icon} />}
+
       {children}
+
+      {chip && (
+        <Text
+          sx={{
+            cursor: 'pointer',
+            lineHeight: 0,
+            color: 'currentcolor',
+            alignSelf: 'center',
+          }}
+        >
+          <Icon onClick={onDelete} inline icon="close" />
+        </Text>
+      )}
     </BadgeUi>
   );
 };