@ttoss/ui 1.32.7 → 1.33.0

package/README.md

@@ -5,7 +5,7 @@
 ## Installation
 
 ```shell
-yarn add @ttoss/ui
+pnpm add @ttoss/ui
 ```
 
 ## Quick start
@@ -62,10 +62,33 @@ export const Component = () => {
 
 :::note Note
 
-You don't need to use the custom /\*\* @jsxImportSource theme-ui \*/ pragma if you use the `sx` prop directly on the components of the library.
+You don't need to use the custom `/** @jsxImportSource theme-ui */` pragma if you use the `sx` prop directly on the components of the library.
 
 :::
 
 ## Components
 
 You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/ui).
+
+### Global
+
+Wrapper around the Emotion Global component, made Theme UI theme-aware.
+
+```tsx
+import { Global } from '@ttoss/ui';
+
+export const Provider = (props) => {
+  return (
+    <Global
+      styles={{
+        button: {
+          m: 0,
+          bg: 'primary',
+          color: 'background',
+          border: 0,
+        },
+      }}
+    />
+  );
+};
+```

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
 // src/index.ts
-import { BaseStyles } from "theme-ui";
+import { BaseStyles, Global as Global2 } from "theme-ui";
 import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
 
 // src/theme/ThemeProvider.tsx
@@ -563,4 +563,4 @@ var Stack = /*#__PURE__*/React12.forwardRef((props, ref) => {
   });
 });
 Stack.displayName = "Stack";
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };
+export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, Label, Progress as LinearProgress, Link, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as theme_ui from 'theme-ui';
 import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, SelectProps, IconButtonProps, TextareaProps as TextareaProps$1, TextProps, FlexProps } from 'theme-ui';
-export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, Theme } from 'theme-ui';
+export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, Text, TextProps, 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

@@ -48,6 +48,7 @@ __export(src_exports, {
   Container: () => import_theme_ui24.Container,
   Divider: () => import_theme_ui7.Divider,
   Flex: () => import_theme_ui8.Flex,
+  Global: () => import_theme_ui27.Global,
   Grid: () => import_theme_ui9.Grid,
   Heading: () => import_theme_ui10.Heading,
   HelpText: () => HelpText,
@@ -647,6 +648,7 @@ Stack.displayName = "Stack";
   Container,
   Divider,
   Flex,
+  Global,
   Grid,
   Heading,
   HelpText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.32.7",
+  "version": "1.33.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -23,7 +23,7 @@
     "@emotion/react": "^11.10.6",
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
-    "@ttoss/theme": "^1.4.22",
+    "@ttoss/theme": "^1.4.23",
     "theme-ui": "^0.15.7"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f30779a5ea50d60cf3099e5fde712e1ef7b7882c"
+  "gitHead": "0e907d5340ddbdebfa3f81c736542db198ca8a07"
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-export { BaseStyles, type Theme } from 'theme-ui';
+export { BaseStyles, type Theme, Global } from 'theme-ui';
 export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
 
 export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';