@ttoss/ui 1.32.8 → 1.34.0

package/README.md

@@ -5,7 +5,7 @@
 ## Installation
 
 ```shell
-yarn add @ttoss/ui
+pnpm add @ttoss/ui
 ```
 
 ## Quick start
@@ -62,10 +62,47 @@ 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,
+        },
+      }}
+    />
+  );
+};
+```
+
+## Misc
+
+### keyframes
+
+```tsx
+import { Box, keyframes } from '@ttoss/ui';
+
+const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
+
+export const Component = (props) => {
+  return <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />;
+};
+```

package/dist/esm/index.js

@@ -1,8 +1,9 @@
 /** 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";
+import { keyframes } from "@emotion/react";
 
 // src/theme/ThemeProvider.tsx
 import { BruttalFonts, BruttalTheme } from "@ttoss/theme/Bruttal";
@@ -563,4 +564,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, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 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, SxProp, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
+export { Keyframes, keyframes } from '@emotion/react';
 import * as React from 'react';
 import React__default from 'react';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/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,
@@ -68,6 +69,7 @@ __export(src_exports, {
   Text: () => import_theme_ui16.Text,
   Textarea: () => Textarea,
   ThemeProvider: () => ThemeProvider,
+  keyframes: () => import_react9.keyframes,
   useBreakpointIndex: () => import_match_media.useBreakpointIndex,
   useResponsiveValue: () => import_match_media.useResponsiveValue,
   useTheme: () => useTheme
@@ -75,6 +77,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 var import_theme_ui27 = require("theme-ui");
 var import_match_media = require("@theme-ui/match-media");
+var import_react9 = require("@emotion/react");
 
 // src/theme/ThemeProvider.tsx
 var import_Bruttal = require("@ttoss/theme/Bruttal");
@@ -647,6 +650,7 @@ Stack.displayName = "Stack";
   Container,
   Divider,
   Flex,
+  Global,
   Grid,
   Heading,
   HelpText,
@@ -667,6 +671,7 @@ Stack.displayName = "Stack";
   Text,
   Textarea,
   ThemeProvider,
+  keyframes,
   useBreakpointIndex,
   useResponsiveValue,
   useTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.32.8",
+  "version": "1.34.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -48,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b40f78fe1adc22d91e947b4d4453d0e51669a358"
+  "gitHead": "c759e6382b5adf6e9d19e98509c2e089246e553d"
 }

package/src/index.ts

@@ -1,5 +1,6 @@
-export { BaseStyles, type Theme } from 'theme-ui';
+export { BaseStyles, type Theme, Global, type SxProp } from 'theme-ui';
 export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
+export { keyframes, type Keyframes } from '@emotion/react';
 
 export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';