@ttoss/ui 1.30.10 → 1.30.12

package/dist/esm/index.js

@@ -314,12 +314,24 @@ var BruttalTheme = {
   styles: {
     root: {
       fontFamily: "body",
-      fontWeight: "normal"
+      fontWeight: "normal",
+      fontSize: "base",
+      margin: 0,
+      padding: 0
     }
   },
   /**
    * Components
    */
+  badges: {
+    primary: {
+      color: "onPrimary",
+      bg: "primary",
+      fontSize: "sm",
+      paddingX: "sm",
+      borderRadius: "default"
+    }
+  },
   buttons: {
     accent: {
       backgroundColor: "accent",
@@ -542,6 +554,10 @@ init_tsup_inject();
 import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
+// src/components/Badge.tsx
+init_tsup_inject();
+import { Badge } from "theme-ui";
+
 // src/components/Box.tsx
 init_tsup_inject();
 import { Box } from "theme-ui";
@@ -2765,6 +2781,7 @@ import { Textarea } from "theme-ui";
 init_tsup_inject();
 import { Container } from "theme-ui";
 export {
+  Badge,
   BaseStyles,
   Box,
   Button,

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as theme_ui from 'theme-ui';
 import { Theme, ButtonProps as ButtonProps$1, InputProps as InputProps$1 } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
+export { Badge, BadgeProps, BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Textarea, TextareaProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
 import React__default from 'react';

package/dist/index.js

@@ -155,29 +155,30 @@ var require_cjs = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BaseStyles: () => import_theme_ui23.BaseStyles,
-  Box: () => import_theme_ui3.Box,
+  Badge: () => import_theme_ui3.Badge,
+  BaseStyles: () => import_theme_ui24.BaseStyles,
+  Box: () => import_theme_ui4.Box,
   Button: () => Button,
-  Card: () => import_theme_ui5.Card,
-  Checkbox: () => import_theme_ui20.Checkbox,
-  Container: () => import_theme_ui22.Container,
-  Divider: () => import_theme_ui6.Divider,
-  Flex: () => import_theme_ui7.Flex,
-  Grid: () => import_theme_ui8.Grid,
-  Heading: () => import_theme_ui9.Heading,
+  Card: () => import_theme_ui6.Card,
+  Checkbox: () => import_theme_ui21.Checkbox,
+  Container: () => import_theme_ui23.Container,
+  Divider: () => import_theme_ui7.Divider,
+  Flex: () => import_theme_ui8.Flex,
+  Grid: () => import_theme_ui9.Grid,
+  Heading: () => import_theme_ui10.Heading,
   Icon: () => Icon2,
-  Image: () => import_theme_ui10.Image,
+  Image: () => import_theme_ui11.Image,
   InfiniteLinearProgress: () => InfiniteLinearProgress,
   Input: () => Input,
-  Label: () => import_theme_ui12.Label,
-  LinearProgress: () => import_theme_ui14.Progress,
-  Link: () => import_theme_ui13.Link,
-  Radio: () => import_theme_ui18.Radio,
-  Select: () => import_theme_ui16.Select,
-  Slider: () => import_theme_ui19.Slider,
-  Spinner: () => import_theme_ui17.Spinner,
-  Text: () => import_theme_ui15.Text,
-  Textarea: () => import_theme_ui21.Textarea,
+  Label: () => import_theme_ui13.Label,
+  LinearProgress: () => import_theme_ui15.Progress,
+  Link: () => import_theme_ui14.Link,
+  Radio: () => import_theme_ui19.Radio,
+  Select: () => import_theme_ui17.Select,
+  Slider: () => import_theme_ui20.Slider,
+  Spinner: () => import_theme_ui18.Spinner,
+  Text: () => import_theme_ui16.Text,
+  Textarea: () => import_theme_ui22.Textarea,
   ThemeProvider: () => ThemeProvider,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
@@ -185,7 +186,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 init_tsup_inject();
-var import_theme_ui23 = require("theme-ui");
+var import_theme_ui24 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
@@ -352,12 +353,24 @@ var BruttalTheme = {
   styles: {
     root: {
       fontFamily: "body",
-      fontWeight: "normal"
+      fontWeight: "normal",
+      fontSize: "base",
+      margin: 0,
+      padding: 0
     }
   },
   /**
    * Components
    */
+  badges: {
+    primary: {
+      color: "onPrimary",
+      bg: "primary",
+      fontSize: "sm",
+      paddingX: "sm",
+      borderRadius: "default"
+    }
+  },
   buttons: {
     accent: {
       backgroundColor: "accent",
@@ -580,14 +593,18 @@ init_tsup_inject();
 var import_theme_ui2 = require("theme-ui");
 var useTheme = import_theme_ui2.useThemeUI;
 
-// src/components/Box.tsx
+// src/components/Badge.tsx
 init_tsup_inject();
 var import_theme_ui3 = require("theme-ui");
 
+// src/components/Box.tsx
+init_tsup_inject();
+var import_theme_ui4 = require("theme-ui");
+
 // src/components/Button.tsx
 init_tsup_inject();
 var React4 = __toESM(require("react"));
-var import_theme_ui4 = require("theme-ui");
+var import_theme_ui5 = require("theme-ui");
 
 // src/components/Icon.tsx
 init_tsup_inject();
@@ -2623,7 +2640,7 @@ var Button = React4.forwardRef(
   (props, ref) => {
     const { children, leftIcon, rightIcon, ...restProps } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-      import_theme_ui4.Button,
+      import_theme_ui5.Button,
       {
         ref,
         ...restProps,
@@ -2649,38 +2666,38 @@ Button.displayName = "Button";
 
 // src/components/Card.tsx
 init_tsup_inject();
-var import_theme_ui5 = require("theme-ui");
+var import_theme_ui6 = require("theme-ui");
 
 // src/components/Divider.tsx
 init_tsup_inject();
-var import_theme_ui6 = require("theme-ui");
+var import_theme_ui7 = require("theme-ui");
 
 // src/components/Flex.tsx
 init_tsup_inject();
-var import_theme_ui7 = require("theme-ui");
+var import_theme_ui8 = require("theme-ui");
 
 // src/components/Grid.tsx
 init_tsup_inject();
-var import_theme_ui8 = require("theme-ui");
+var import_theme_ui9 = require("theme-ui");
 
 // src/components/Heading.tsx
 init_tsup_inject();
-var import_theme_ui9 = require("theme-ui");
+var import_theme_ui10 = require("theme-ui");
 
 // src/components/Image.tsx
 init_tsup_inject();
-var import_theme_ui10 = require("theme-ui");
+var import_theme_ui11 = require("theme-ui");
 
 // src/components/Input.tsx
 init_tsup_inject();
 var import_react4 = __toESM(require("react"));
-var import_theme_ui11 = require("theme-ui");
+var import_theme_ui12 = require("theme-ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Input = import_react4.default.forwardRef(
   ({ leadingIcon, trailingIcon, sx, ...inputProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_theme_ui7.Flex, { sx: { position: "relative" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_theme_ui8.Flex, { sx: { position: "relative" }, children: [
       leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui15.Text,
+        import_theme_ui16.Text,
         {
           sx: {
             position: "absolute",
@@ -2694,7 +2711,7 @@ var Input = import_react4.default.forwardRef(
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui11.Input,
+        import_theme_ui12.Input,
         {
           ref,
           sx: {
@@ -2706,7 +2723,7 @@ var Input = import_react4.default.forwardRef(
         }
       ),
       trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_theme_ui15.Text,
+        import_theme_ui16.Text,
         {
           sx: {
             position: "absolute",
@@ -2726,39 +2743,39 @@ Input.displayName = "Input";
 
 // src/components/Label.tsx
 init_tsup_inject();
-var import_theme_ui12 = require("theme-ui");
+var import_theme_ui13 = require("theme-ui");
 
 // src/components/Link.tsx
 init_tsup_inject();
-var import_theme_ui13 = require("theme-ui");
+var import_theme_ui14 = require("theme-ui");
 
 // src/components/LinearProgress.tsx
 init_tsup_inject();
-var import_theme_ui14 = require("theme-ui");
+var import_theme_ui15 = require("theme-ui");
 
 // src/components/Text.tsx
 init_tsup_inject();
-var import_theme_ui15 = require("theme-ui");
+var import_theme_ui16 = require("theme-ui");
 
 // src/components/Select.tsx
 init_tsup_inject();
-var import_theme_ui16 = require("theme-ui");
+var import_theme_ui17 = require("theme-ui");
 
 // src/components/Spinner.tsx
 init_tsup_inject();
-var import_theme_ui17 = require("theme-ui");
+var import_theme_ui18 = require("theme-ui");
 
 // src/components/Radio.tsx
 init_tsup_inject();
-var import_theme_ui18 = require("theme-ui");
+var import_theme_ui19 = require("theme-ui");
 
 // src/components/Slider.tsx
 init_tsup_inject();
-var import_theme_ui19 = require("theme-ui");
+var import_theme_ui20 = require("theme-ui");
 
 // src/components/Checkbox.tsx
 init_tsup_inject();
-var import_theme_ui20 = require("theme-ui");
+var import_theme_ui21 = require("theme-ui");
 
 // src/components/InfiniteLinearProgress.tsx
 init_tsup_inject();
@@ -2788,18 +2805,19 @@ var InfiniteLinearProgress = () => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_theme_ui14.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_theme_ui15.Progress, { max: MAX_PROGRESS, value: progress, role: "progressbar" });
 };
 
 // src/components/Textarea.tsx
 init_tsup_inject();
-var import_theme_ui21 = require("theme-ui");
+var import_theme_ui22 = require("theme-ui");
 
 // src/components/Container.tsx
 init_tsup_inject();
-var import_theme_ui22 = require("theme-ui");
+var import_theme_ui23 = require("theme-ui");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Badge,
   BaseStyles,
   Box,
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.30.10",
+  "version": "1.30.12",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -21,7 +21,7 @@
   "sideEffects": false,
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@emotion/react": "^11.10.5",
+    "@emotion/react": "^11.10.6",
     "@theme-ui/match-media": "^0.15.5",
     "theme-ui": "^0.15.5"
   },
@@ -29,11 +29,11 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@iconify-icon/react": "^1.0.5",
-    "@ttoss/config": "^1.28.3",
-    "@ttoss/test-utils": "^1.20.5",
-    "@ttoss/theme": "^1.2.9",
-    "@types/jest": "^29.4.0",
+    "@iconify-icon/react": "^1.0.7",
+    "@ttoss/config": "^1.28.4",
+    "@ttoss/test-utils": "^1.20.6",
+    "@ttoss/theme": "^1.3.0",
+    "@types/jest": "^29.4.4",
     "jest": "^29.5.0",
     "tsup": "^6.6.3"
   },
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5a7f5a875b4474af9c78bbec65355cde6e6a7c81"
+  "gitHead": "9606dd531340e86f6e0a2c90e69a3526e74583b2"
 }

package/src/components/Badge.tsx

@@ -0,0 +1 @@
+export { Badge, type BadgeProps } from 'theme-ui';

package/src/index.ts

@@ -5,6 +5,7 @@ export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';
 
 export { useTheme } from './theme/useTheme';
 
+export { Badge, type BadgeProps } from './components/Badge';
 export { Box, type BoxProps } from './components/Box';
 export { Button, type ButtonProps } from './components/Button';
 export { Card, type CardProps } from './components/Card';