@ttoss/ui 1.20.1 → 1.20.2

package/README.md

@@ -1,53 +1,71 @@
 # @ttoss/ui
 
-## 📚 About
+**@ttoss/ui** is a library of React low level components for building user interfaces and defining the design system of your application. It is built on top of [Theme UI: The Design Graph Framework](https://theme-ui.com/), so that you'll be able to consult the [Theme UI documentation](https://theme-ui.com/getting-started) to learn more about the design system and the components.
 
-<strong> @ttoss/ui</strong> is a easiest way to use Ui components in your React application.
+## Installation
 
-## 🚀 Getting Started
+```shell
+yarn add @ttoss/ui @emotion/react
+```
 
-### Install @ttoss/ui
+## Quick start
 
-```shell
-$ yarn add @ttoss/ui
-# or
-$ npm install @ttoss/ui
+Create a theme object to define the design tokens of your application.
+
+```ts
+import type { Theme } from '@ttoss/ui';
+
+export const theme: Theme = {
+  colors: {
+    text: '#000',
+    background: '#fff',
+    primary: '#33e',
+  },
+};
+```
+
+Pass your theme to the `ThemeProvider` component at the root of your application.
+
+```tsx
+import { Heading, ThemeProvider } from '@ttoss/ui';
+import { theme } from './theme';
+
+export const App = () => (
+  <ThemeProvider theme={theme}>
+    <Heading as="h1" sx={{ color: 'primary' }}>
+      Hello
+    </Heading>
+  </ThemeProvider>
+);
 ```
 
-## 📄 Examples of use
+Now, you can use the components of the library in your application and access the [design tokens](/docs/design/design-tokens) defined in your theme through the [`sx` prop](https://theme-ui.com/getting-started#sx-prop).
 
 ```tsx
-import { Flex, Text, Box, Button } from "@ttoss/ui";
+import { Flex, Text, Box, Button } from '@ttoss/ui';
 
-const App = () => {
+export const Component = () => {
   return (
-    <ThemeProvider>
-      <Flex sx={{ flexDirection: "column" }}>
-        <Text>Text Value</Text>
-        <Box>
-          <Text>Text Value</Text>
-
-          <Button>Button Primary</Button>
-        </Box>
-      </Flex>
-    </ThemeProvider>
+    <Flex sx={{ flexDirection: 'column' }}>
+      <Text>Text Value</Text>
+      <Button
+        sx={{
+          backgroundColor: 'primary',
+        }}
+      >
+        Button Primary
+      </Button>
+    </Flex>
   );
 };
-
-export default App;
 ```
 
-### Loading Fonts
+:::note Note
 
-You can pass fonts URLs to `ThemeProvider` component thought `fonts` prop.
+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.
 
-```tsx
-<ThemeProvider
-  fonts={[
-    "https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap",
-    "https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap",
-  ]}
->
-  <App />
-</ThemeProvider>
-```
+:::
+
+## Components
+
+You can check all the components of the library `@ttoss/ui` on the [Storybook](https://storybook.ttoss.dev/?path=/story/ui).

package/dist/esm/index.js

@@ -1,5 +1,3 @@
-"use strict";
-
 // tsup.inject.js
 import * as React from "react";
 
@@ -96,6 +94,7 @@ var defaultTheme = {
 };
 
 // src/theme/ThemeProvider.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = {},
@@ -107,14 +106,19 @@ var ThemeProvider = ({
     }
     return merge(defaultTheme, theme);
   }, [theme]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ThemeUiProvider, {
-    theme: mergedTheme
-  }, fonts.map((url) => /* @__PURE__ */ React2.createElement(Global, {
-    key: url,
-    styles: css`
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(ThemeUiProvider, {
+      theme: mergedTheme,
+      children: [
+        fonts.map((url) => /* @__PURE__ */ jsx(Global, {
+          styles: css`
               @import url('${url}');
             `
-  })), children));
+        }, url)),
+        children
+      ]
+    })
+  });
 };
 var ThemeProvider_default = ThemeProvider;
 
@@ -127,8 +131,9 @@ import { Box } from "theme-ui";
 
 // src/components/Button/Button.tsx
 import { Button as ButtonUi } from "theme-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var Button = (props) => {
-  return /* @__PURE__ */ React.createElement(ButtonUi, {
+  return /* @__PURE__ */ jsx2(ButtonUi, {
     ...props,
     sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
   });

package/dist/index.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -141,6 +144,7 @@ var defaultTheme = {
 };
 
 // src/theme/ThemeProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var ThemeProvider = ({
   children,
   theme = {},
@@ -152,14 +156,19 @@ var ThemeProvider = ({
     }
     return (0, import_theme_ui.merge)(defaultTheme, theme);
   }, [theme]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_theme_ui.ThemeProvider, {
-    theme: mergedTheme
-  }, fonts.map((url) => /* @__PURE__ */ React2.createElement(import_react.Global, {
-    key: url,
-    styles: import_react.css`
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, {
+      theme: mergedTheme,
+      children: [
+        fonts.map((url) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Global, {
+          styles: import_react.css`
               @import url('${url}');
             `
-  })), children));
+        }, url)),
+        children
+      ]
+    })
+  });
 };
 var ThemeProvider_default = ThemeProvider;
 
@@ -172,8 +181,9 @@ var import_theme_ui3 = require("theme-ui");
 
 // src/components/Button/Button.tsx
 var import_theme_ui4 = require("theme-ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Button = (props) => {
-  return /* @__PURE__ */ React.createElement(import_theme_ui4.Button, {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_theme_ui4.Button, {
     ...props,
     sx: { cursor: "pointer", fontFamily: "body", ...props.sx }
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.20.1",
+  "version": "1.20.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -20,20 +20,20 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
-    "@emotion/react": "^11",
-    "@mdx-js/react": "^1",
-    "@theme-ui/match-media": "^0.14.3",
-    "theme-ui": "^0.14.6"
+    "@theme-ui/match-media": "^0.15.1",
+    "theme-ui": "^0.15.1"
   },
   "peerDependencies": {
+    "@emotion/react": "^11",
     "react": ">=18.0.0"
   },
   "devDependencies": {
+    "@emotion/react": "^11.10.4",
     "@ttoss/config": "^1.18.1",
     "@ttoss/test-utils": "^1.16.8",
-    "@types/jest": "^28.1.3",
-    "jest": "^28.1.1",
-    "tsup": "^6.1.2"
+    "@types/jest": "^29.1.1",
+    "jest": "^29.1.2",
+    "tsup": "^6.2.3"
   },
   "keywords": [
     "React",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5624791e118681b8ecbe2372bbc61806442df71b"
+  "gitHead": "0759c1ec512f6cb0a613c209beba1fcf6af7e232"
 }