@ttoss/ui 1.3.0 → 1.6.0

package/README.md

@@ -4,7 +4,7 @@
 
 <strong> @ttoss/ui</strong> is a easiest way to use Ui components in your React application.
 
-## 🚀 Get Started
+## 🚀 Getting Started
 
 ### Install @ttoss/ui
 
@@ -37,6 +37,18 @@ const App = () => {
 export default App;
 ```
 
-```tsx
+### Loading Fonts
+
+You can pass fonts URLs to `ThemeProvider` component thought `fonts` prop.
 
+```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>
 ```

package/dist/esm/index.js

@@ -26,11 +26,8 @@ import * as color from "@theme-ui/color";
 import { Themed } from "@theme-ui/mdx";
 
 // src/theme/ThemeProvider.tsx
-import { Global } from "@emotion/react";
-import {
-  ThemeProvider as ThemeUiProvider,
-  merge
-} from "@theme-ui/core";
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "@theme-ui/core";
 import * as React2 from "react";
 
 // src/theme/defaultTheme.ts
@@ -48,6 +45,10 @@ var defaultTheme = {
       color: "primary",
       textDecoration: "underline",
       cursor: "pointer"
+    },
+    progress: {
+      color: "primary",
+      backgroundColor: "background"
     }
   },
   buttons: {
@@ -76,7 +77,11 @@ var defaultTheme = {
 };
 
 // src/theme/ThemeProvider.tsx
-var ThemeProvider = ({ children, theme = {} }) => {
+var ThemeProvider = ({
+  children,
+  theme = {},
+  fonts = []
+}) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
       return theme;
@@ -85,7 +90,12 @@ var ThemeProvider = ({ children, theme = {} }) => {
   }, [theme]);
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ThemeUiProvider, {
     theme: mergedTheme
-  }, /* @__PURE__ */ React2.createElement(Global, {
+  }, fonts.map((url) => /* @__PURE__ */ React2.createElement(Global, {
+    key: url,
+    styles: css`
+              @import url('${url}');
+            `
+  })), /* @__PURE__ */ React2.createElement(Global, {
     styles: {
       "*": {
         margin: 0
@@ -157,6 +167,10 @@ import { Input } from "@theme-ui/components";
 
 // src/components/Link/Link.tsx
 import { Link } from "@theme-ui/components";
+
+// src/components/LinearProgress/LinearProgress.tsx
+import { Progress } from "@theme-ui/components";
+var LinearProgress = Progress;
 export {
   Box,
   Button_default as Button,
@@ -165,6 +179,7 @@ export {
   FormField_default as FormField,
   Image,
   Input,
+  LinearProgress,
   Link,
   Text,
   ThemeProvider_default as ThemeProvider,

package/dist/index.d.ts

@@ -1,17 +1,23 @@
 import * as color from '@theme-ui/color';
 export { color };
 import * as _theme_ui_core from '@theme-ui/core';
-import { ThemeProviderProps as ThemeProviderProps$1 } from '@theme-ui/core';
+import { Theme } from '@theme-ui/core';
 export { Theme } from '@theme-ui/core';
 export { Themed } from '@theme-ui/mdx';
 import * as React from 'react';
-import { ButtonProps } from '@theme-ui/components';
+import * as _theme_ui_components from '@theme-ui/components';
+import { ButtonProps, ProgressProps } from '@theme-ui/components';
 export { Box, BoxProps, ButtonProps, Card, CardProps, Flex, FlexProps, Image, ImageProps, Input, InputProps, Link, LinkProps, Text, TextProps } from '@theme-ui/components';
 
-declare type ThemeProviderProps = ThemeProviderProps$1 & {
+declare type ThemeProviderProps = {
     children?: React.ReactNode;
+    theme?: Theme;
+    /**
+     * Fonts URLs.
+     */
+    fonts?: string[];
 };
-declare const ThemeProvider: ({ children, theme }: ThemeProviderProps) => JSX.Element;
+declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => JSX.Element;
 
 declare const useTheme: () => _theme_ui_core.ThemeUIContextValue;
 
@@ -24,4 +30,7 @@ declare type FormFieldProps = {
 };
 declare const FormField: ({ children, label, error }: FormFieldProps) => JSX.Element;
 
-export { Button, FormField, FormFieldProps, ThemeProvider, ThemeProviderProps, useTheme };
+declare type LinearProgressProps = ProgressProps;
+declare const LinearProgress: _theme_ui_components.ForwardRef<HTMLProgressElement, ProgressProps>;
+
+export { Button, FormField, FormFieldProps, LinearProgress, LinearProgressProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -53,6 +53,7 @@ __export(src_exports, {
   FormField: () => FormField_default,
   Image: () => import_components7.Image,
   Input: () => import_components8.Input,
+  LinearProgress: () => LinearProgress,
   Link: () => import_components9.Link,
   Text: () => import_components6.Text,
   ThemeProvider: () => ThemeProvider_default,
@@ -88,6 +89,10 @@ var defaultTheme = {
       color: "primary",
       textDecoration: "underline",
       cursor: "pointer"
+    },
+    progress: {
+      color: "primary",
+      backgroundColor: "background"
     }
   },
   buttons: {
@@ -116,7 +121,11 @@ var defaultTheme = {
 };
 
 // src/theme/ThemeProvider.tsx
-var ThemeProvider = ({ children, theme = {} }) => {
+var ThemeProvider = ({
+  children,
+  theme = {},
+  fonts = []
+}) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
       return theme;
@@ -125,7 +134,12 @@ var ThemeProvider = ({ children, theme = {} }) => {
   }, [theme]);
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_core.ThemeProvider, {
     theme: mergedTheme
-  }, /* @__PURE__ */ React2.createElement(import_react.Global, {
+  }, fonts.map((url) => /* @__PURE__ */ React2.createElement(import_react.Global, {
+    key: url,
+    styles: import_react.css`
+              @import url('${url}');
+            `
+  })), /* @__PURE__ */ React2.createElement(import_react.Global, {
     styles: {
       "*": {
         margin: 0
@@ -197,6 +211,10 @@ var import_components8 = require("@theme-ui/components");
 
 // src/components/Link/Link.tsx
 var import_components9 = require("@theme-ui/components");
+
+// src/components/LinearProgress/LinearProgress.tsx
+var import_components10 = require("@theme-ui/components");
+var LinearProgress = import_components10.Progress;
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -207,6 +225,7 @@ module.exports = __toCommonJS(src_exports);
   FormField,
   Image,
   Input,
+  LinearProgress,
   Link,
   Text,
   ThemeProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.3.0",
+  "version": "1.6.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -43,8 +43,8 @@
     "react": ">=17.0.2"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.3.0",
-    "@ttoss/test-utils": "^1.3.0"
+    "@ttoss/config": "^1.6.0",
+    "@ttoss/test-utils": "^1.6.0"
   },
-  "gitHead": "c709beaea1ad270f740d860e91b1a42641ebccda"
+  "gitHead": "692ebb7d1938b9b9e04453b47ed36beb9b9c8a69"
 }

package/src/components/LinearProgress/LinearProgress.tsx

@@ -0,0 +1,5 @@
+import { Progress, ProgressProps } from '@theme-ui/components';
+
+export type LinearProgressProps = ProgressProps;
+
+export const LinearProgress = Progress;

package/src/index.ts

@@ -20,4 +20,8 @@ export {
 export { default as Image, ImageProps } from './components/Image/Image';
 export { default as Input, InputProps } from './components/Input/Input';
 export { default as Link, LinkProps } from './components/Link/Link';
+export {
+  LinearProgress,
+  LinearProgressProps,
+} from './components/LinearProgress/LinearProgress';
 export { default as Text, TextProps } from './components/Text/Text';

package/src/theme/ThemeProvider.tsx

@@ -1,18 +1,23 @@
-import { Global } from '@emotion/react';
-import {
-  ThemeProvider as ThemeUiProvider,
-  ThemeProviderProps as ThemeUiProviderProps,
-  merge,
-} from '@theme-ui/core';
+import { Global, css } from '@emotion/react';
+import { ThemeProvider as ThemeUiProvider, Theme, merge } from '@theme-ui/core';
 import * as React from 'react';
 
 import { defaultTheme } from './defaultTheme';
 
-export type ThemeProviderProps = ThemeUiProviderProps & {
+export type ThemeProviderProps = {
   children?: React.ReactNode;
+  theme?: Theme;
+  /**
+   * Fonts URLs.
+   */
+  fonts?: string[];
 };
 
-const ThemeProvider = ({ children, theme = {} }: ThemeProviderProps) => {
+const ThemeProvider = ({
+  children,
+  theme = {},
+  fonts = [],
+}: ThemeProviderProps) => {
   const mergedTheme = React.useMemo(() => {
     if (typeof theme === 'function') {
       return theme;
@@ -24,6 +29,14 @@ const ThemeProvider = ({ children, theme = {} }: ThemeProviderProps) => {
   return (
     <>
       <ThemeUiProvider theme={mergedTheme}>
+        {fonts.map((url) => (
+          <Global
+            key={url}
+            styles={css`
+              @import url('${url}');
+            `}
+          />
+        ))}
         <Global
           styles={{
             '*': {

package/src/theme/defaultTheme.ts

@@ -15,6 +15,10 @@ export const defaultTheme: Theme = {
       textDecoration: 'underline',
       cursor: 'pointer',
     },
+    progress: {
+      color: 'primary',
+      backgroundColor: 'background',
+    },
   },
   buttons: {
     primary: {