@ttoss/ui 1.4.1 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +14 -2
  2. package/dist/esm/index.js +12 -3
  3. package/dist/index.d.ts +5 -1
  4. package/dist/index.js +11 -2
  5. package/package.json +4 -4
  6. package/src/theme/ThemeProvider.tsx +18 -2
package/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  <strong> @ttoss/ui</strong> is a easiest way to use Ui components in your React application.
6
6
 
7
- ## 🚀 Get Started
7
+ ## 🚀 Getting Started
8
8
 
9
9
  ### Install @ttoss/ui
10
10
 
@@ -37,6 +37,18 @@ const App = () => {
37
37
  export default App;
38
38
  ```
39
39
 
40
- ```tsx
40
+ ### Loading Fonts
41
+
42
+ You can pass fonts URLs to `ThemeProvider` component thought `fonts` prop.
41
43
 
44
+ ```tsx
45
+ <ThemeProvider
46
+ fonts={[
47
+ 'https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap',
48
+ ,
49
+ 'https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap',
50
+ ]}
51
+ >
52
+ <App />
53
+ </ThemeProvider>
42
54
  ```
package/dist/esm/index.js CHANGED
@@ -26,7 +26,7 @@ import * as color from "@theme-ui/color";
26
26
  import { Themed } from "@theme-ui/mdx";
27
27
 
28
28
  // src/theme/ThemeProvider.tsx
29
- import { Global } from "@emotion/react";
29
+ import { Global, css } from "@emotion/react";
30
30
  import { ThemeProvider as ThemeUiProvider, merge } from "@theme-ui/core";
31
31
  import * as React2 from "react";
32
32
 
@@ -77,7 +77,11 @@ var defaultTheme = {
77
77
  };
78
78
 
79
79
  // src/theme/ThemeProvider.tsx
80
- var ThemeProvider = ({ children, theme = {} }) => {
80
+ var ThemeProvider = ({
81
+ children,
82
+ theme = {},
83
+ fonts = []
84
+ }) => {
81
85
  const mergedTheme = React2.useMemo(() => {
82
86
  if (typeof theme === "function") {
83
87
  return theme;
@@ -86,7 +90,12 @@ var ThemeProvider = ({ children, theme = {} }) => {
86
90
  }, [theme]);
87
91
  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ThemeUiProvider, {
88
92
  theme: mergedTheme
89
- }, /* @__PURE__ */ React2.createElement(Global, {
93
+ }, fonts.map((url) => /* @__PURE__ */ React2.createElement(Global, {
94
+ key: url,
95
+ styles: css`
96
+ @import url('${url}');
97
+ `
98
+ })), /* @__PURE__ */ React2.createElement(Global, {
90
99
  styles: {
91
100
  "*": {
92
101
  margin: 0
package/dist/index.d.ts CHANGED
@@ -12,8 +12,12 @@ export { Box, BoxProps, ButtonProps, Card, CardProps, Flex, FlexProps, Image, Im
12
12
  declare type ThemeProviderProps = {
13
13
  children?: React.ReactNode;
14
14
  theme?: Theme;
15
+ /**
16
+ * Fonts URLs.
17
+ */
18
+ fonts?: string[];
15
19
  };
16
- declare const ThemeProvider: ({ children, theme }: ThemeProviderProps) => JSX.Element;
20
+ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => JSX.Element;
17
21
 
18
22
  declare const useTheme: () => _theme_ui_core.ThemeUIContextValue;
19
23
 
package/dist/index.js CHANGED
@@ -121,7 +121,11 @@ var defaultTheme = {
121
121
  };
122
122
 
123
123
  // src/theme/ThemeProvider.tsx
124
- var ThemeProvider = ({ children, theme = {} }) => {
124
+ var ThemeProvider = ({
125
+ children,
126
+ theme = {},
127
+ fonts = []
128
+ }) => {
125
129
  const mergedTheme = React2.useMemo(() => {
126
130
  if (typeof theme === "function") {
127
131
  return theme;
@@ -130,7 +134,12 @@ var ThemeProvider = ({ children, theme = {} }) => {
130
134
  }, [theme]);
131
135
  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_core.ThemeProvider, {
132
136
  theme: mergedTheme
133
- }, /* @__PURE__ */ React2.createElement(import_react.Global, {
137
+ }, fonts.map((url) => /* @__PURE__ */ React2.createElement(import_react.Global, {
138
+ key: url,
139
+ styles: import_react.css`
140
+ @import url('${url}');
141
+ `
142
+ })), /* @__PURE__ */ React2.createElement(import_react.Global, {
134
143
  styles: {
135
144
  "*": {
136
145
  margin: 0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/ui",
3
- "version": "1.4.1",
3
+ "version": "1.7.1",
4
4
  "description": "Primitive layout, typographic, and other components for styling applications.",
5
5
  "license": "UNLICENSED",
6
6
  "publishConfig": {
@@ -43,8 +43,8 @@
43
43
  "react": ">=17.0.2"
44
44
  },
45
45
  "devDependencies": {
46
- "@ttoss/config": "^1.4.1",
47
- "@ttoss/test-utils": "^1.4.1"
46
+ "@ttoss/config": "^1.7.1",
47
+ "@ttoss/test-utils": "^1.7.1"
48
48
  },
49
- "gitHead": "c5a8ea6093886fc6e500e22db72687e011cdb5bc"
49
+ "gitHead": "3d168d15caa27a7a87018a36d4512189ccf3fab7"
50
50
  }
package/src/theme/ThemeProvider.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { Global } from '@emotion/react';
1
+ import { Global, css } from '@emotion/react';
2
2
  import { ThemeProvider as ThemeUiProvider, Theme, merge } from '@theme-ui/core';
3
3
  import * as React from 'react';
4
4
 
@@ -7,9 +7,17 @@ import { defaultTheme } from './defaultTheme';
7
7
  export type ThemeProviderProps = {
8
8
  children?: React.ReactNode;
9
9
  theme?: Theme;
10
+ /**
11
+ * Fonts URLs.
12
+ */
13
+ fonts?: string[];
10
14
  };
11
15
 
12
- const ThemeProvider = ({ children, theme = {} }: ThemeProviderProps) => {
16
+ const ThemeProvider = ({
17
+ children,
18
+ theme = {},
19
+ fonts = [],
20
+ }: ThemeProviderProps) => {
13
21
  const mergedTheme = React.useMemo(() => {
14
22
  if (typeof theme === 'function') {
15
23
  return theme;
@@ -21,6 +29,14 @@ const ThemeProvider = ({ children, theme = {} }: ThemeProviderProps) => {
21
29
  return (
22
30
  <>
23
31
  <ThemeUiProvider theme={mergedTheme}>
32
+ {fonts.map((url) => (
33
+ <Global
34
+ key={url}
35
+ styles={css`
36
+ @import url('${url}');
37
+ `}
38
+ />
39
+ ))}
24
40
  <Global
25
41
  styles={{
26
42
  '*': {