@ttoss/ui 1.21.0 → 1.21.2

package/dist/esm/index.js

@@ -8,19 +8,9 @@ import { useResponsiveValue, useBreakpointIndex } from "@theme-ui/match-media";
 
 // src/theme/ThemeProvider.tsx
 import * as React2 from "react";
-import { Global, css } from "@emotion/react";
-import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
-
-// src/theme/defaultFonts.ts
-var defaultFonts = [
-  "https://fonts.googleapis.com/css?family=Asap",
-  "https://fonts.googleapis.com/css?family=Overpass",
-  "https://fonts.googleapis.com/css?family=Overpass+Mono",
-  "https://fonts.googleapis.com/css?family=Flamenco"
-];
 
-// src/theme/defaultTheme.ts
-var defaultTheme = {
+// ../theme/dist/esm/index.js
+var DefaultTheme = {
   colors: {
     text: "#000",
     background: "#fff",
@@ -94,19 +84,27 @@ var defaultTheme = {
     }
   }
 };
+var DefaultFonts = [
+  "https://fonts.googleapis.com/css?family=Asap",
+  "https://fonts.googleapis.com/css?family=Overpass",
+  "https://fonts.googleapis.com/css?family=Overpass+Mono",
+  "https://fonts.googleapis.com/css?family=Flamenco"
+];
 
 // src/theme/ThemeProvider.tsx
+import { Global, css } from "@emotion/react";
+import { ThemeProvider as ThemeUiProvider, merge } from "theme-ui";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts
+  fonts = DefaultFonts
 }) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
       return theme;
     }
-    return merge(defaultTheme, theme);
+    return merge(DefaultTheme, theme);
   }, [theme]);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs(ThemeUiProvider, {
@@ -184,6 +182,18 @@ import { Spinner } from "theme-ui";
 
 // src/components/Radio/Radio.tsx
 import { Radio } from "theme-ui";
+
+// src/components/Icon/Icon.tsx
+import { Icon as IconUI } from "@iconify/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Icon = ({ icon, sx }) => {
+  return /* @__PURE__ */ jsx3(Text, {
+    sx,
+    children: /* @__PURE__ */ jsx3(IconUI, {
+      icon
+    })
+  });
+};
 export {
   Box,
   Button,
@@ -192,6 +202,7 @@ export {
   Flex,
   Grid,
   Heading,
+  Icon,
   Image,
   Input,
   Label,

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as theme_ui from 'theme-ui';
-import { Theme, ButtonProps } from 'theme-ui';
+import { Theme, ButtonProps, TextProps } from 'theme-ui';
 export { Box, BoxProps, ButtonProps, Card, CardProps, Divider, DividerProps, Flex, FlexProps, Grid, GridProps, Heading, HeadingProps, Image, ImageProps, Input, InputProps, Label, LabelProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Link, LinkProps, Radio, RadioProps, Select, SelectProps, Spinner, SpinnerProps, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 import * as React from 'react';
+import { IconProps as IconProps$1 } from '@iconify/react';
 
 declare type ThemeProviderProps = {
     children?: React.ReactNode;
@@ -18,4 +19,10 @@ declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
 declare const Button: (props: ButtonProps) => JSX.Element;
 
-export { Button, ThemeProvider, ThemeProviderProps, useTheme };
+declare type IconProps = {
+    icon: IconProps$1['icon'];
+    sx?: TextProps['sx'];
+};
+declare const Icon: ({ icon, sx }: IconProps) => JSX.Element;
+
+export { Button, Icon, IconProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   Flex: () => import_theme_ui7.Flex,
   Grid: () => import_theme_ui8.Grid,
   Heading: () => import_theme_ui9.Heading,
+  Icon: () => Icon,
   Image: () => import_theme_ui10.Image,
   Input: () => import_theme_ui11.Input,
   Label: () => import_theme_ui12.Label,
@@ -58,19 +59,9 @@ var import_match_media = require("@theme-ui/match-media");
 
 // src/theme/ThemeProvider.tsx
 var React2 = __toESM(require("react"));
-var import_react = require("@emotion/react");
-var import_theme_ui = require("theme-ui");
-
-// src/theme/defaultFonts.ts
-var defaultFonts = [
-  "https://fonts.googleapis.com/css?family=Asap",
-  "https://fonts.googleapis.com/css?family=Overpass",
-  "https://fonts.googleapis.com/css?family=Overpass+Mono",
-  "https://fonts.googleapis.com/css?family=Flamenco"
-];
 
-// src/theme/defaultTheme.ts
-var defaultTheme = {
+// ../theme/dist/esm/index.js
+var DefaultTheme = {
   colors: {
     text: "#000",
     background: "#fff",
@@ -144,19 +135,27 @@ var defaultTheme = {
     }
   }
 };
+var DefaultFonts = [
+  "https://fonts.googleapis.com/css?family=Asap",
+  "https://fonts.googleapis.com/css?family=Overpass",
+  "https://fonts.googleapis.com/css?family=Overpass+Mono",
+  "https://fonts.googleapis.com/css?family=Flamenco"
+];
 
 // src/theme/ThemeProvider.tsx
+var import_react = require("@emotion/react");
+var import_theme_ui = require("theme-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts
+  fonts = DefaultFonts
 }) => {
   const mergedTheme = React2.useMemo(() => {
     if (typeof theme === "function") {
       return theme;
     }
-    return (0, import_theme_ui.merge)(defaultTheme, theme);
+    return (0, import_theme_ui.merge)(DefaultTheme, theme);
   }, [theme]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_theme_ui.ThemeProvider, {
@@ -232,6 +231,18 @@ var import_theme_ui17 = require("theme-ui");
 
 // src/components/Radio/Radio.tsx
 var import_theme_ui18 = require("theme-ui");
+
+// src/components/Icon/Icon.tsx
+var import_react2 = require("@iconify/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Icon = ({ icon, sx }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_theme_ui15.Text, {
+    sx,
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.Icon, {
+      icon
+    })
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -241,6 +252,7 @@ var import_theme_ui18 = require("theme-ui");
   Flex,
   Grid,
   Heading,
+  Icon,
   Image,
   Input,
   Label,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.21.0",
+  "version": "1.21.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -20,6 +20,7 @@
   },
   "typings": "dist/index.d.ts",
   "dependencies": {
+    "@iconify/react": "^4.0.0",
     "@theme-ui/match-media": "^0.15.1",
     "theme-ui": "^0.15.1"
   },
@@ -31,6 +32,7 @@
     "@emotion/react": "^11.10.4",
     "@ttoss/config": "^1.18.3",
     "@ttoss/test-utils": "^1.16.10",
+    "@ttoss/theme": "^1.0.2",
     "@types/jest": "^29.1.1",
     "jest": "^29.1.2",
     "tsup": "^6.2.3"
@@ -43,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8407ac0199e566fb6695f0caddb9f6bed4bf6578"
+  "gitHead": "b939e6a717618f4cc06605df922e37f89b877561"
 }

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,15 @@
+import { IconProps as IconPropsUI, Icon as IconUI } from '@iconify/react';
+import { Text, TextProps } from '../Text/Text';
+
+export type IconProps = {
+  icon: IconPropsUI['icon'];
+  sx?: TextProps['sx'];
+};
+
+export const Icon = ({ icon, sx }: IconProps) => {
+  return (
+    <Text sx={sx}>
+      <IconUI icon={icon} />
+    </Text>
+  );
+};

package/src/index.ts

@@ -27,3 +27,4 @@ export { Text, type TextProps } from './components/Text/Text';
 export { Select, type SelectProps } from './components/Select/Select';
 export { Spinner, type SpinnerProps } from './components/Spinner/Spinner';
 export { Radio, type RadioProps } from './components/Radio/Radio';
+export { Icon, type IconProps } from './components/Icon/Icon';

package/src/theme/ThemeProvider.spec.tsx

@@ -1,4 +1,4 @@
-import { defaultTheme } from './defaultTheme';
+import { DefaultTheme } from '@ttoss/theme';
 import { renderHook } from '@ttoss/test-utils';
 import { useTheme } from './useTheme';
 import ThemeProvider from './ThemeProvider';
@@ -9,7 +9,7 @@ test('should return default theme colors', () => {
     initialProps: { theme: {} },
   });
 
-  expect(result.current.theme.rawColors).toEqual(defaultTheme.colors);
+  expect(result.current.theme.rawColors).toEqual(DefaultTheme.colors);
 });
 
 test('should return new theme colors', () => {

package/src/theme/ThemeProvider.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
+import { DefaultFonts, DefaultTheme } from '@ttoss/theme';
 import { Global, css } from '@emotion/react';
 import { Theme, ThemeProvider as ThemeUiProvider, merge } from 'theme-ui';
-import { defaultFonts } from './defaultFonts';
-import { defaultTheme } from './defaultTheme';
 
 export type ThemeProviderProps = {
   children?: React.ReactNode;
@@ -16,14 +15,14 @@ export type ThemeProviderProps = {
 const ThemeProvider = ({
   children,
   theme = {},
-  fonts = defaultFonts,
+  fonts = DefaultFonts,
 }: ThemeProviderProps) => {
   const mergedTheme = React.useMemo(() => {
     if (typeof theme === 'function') {
       return theme;
     }
 
-    return merge(defaultTheme, theme);
+    return merge(DefaultTheme, theme);
   }, [theme]);
 
   return (

package/src/theme/defaultFonts.ts

@@ -1,6 +0,0 @@
-export const defaultFonts = [
-  'https://fonts.googleapis.com/css?family=Asap',
-  'https://fonts.googleapis.com/css?family=Overpass',
-  'https://fonts.googleapis.com/css?family=Overpass+Mono',
-  'https://fonts.googleapis.com/css?family=Flamenco',
-];

package/src/theme/defaultTheme.ts

@@ -1,76 +0,0 @@
-import { Theme } from 'theme-ui';
-
-export const defaultTheme: Theme = {
-  colors: {
-    text: '#000',
-    background: '#fff',
-    primary: '#07c',
-    secondary: '#639',
-    gray: '#555',
-    muted: '#f6f6f6',
-    danger: 'red',
-  },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
-  fonts: {
-    body: '"Asap", sans-serif',
-    heading: '"Overpass", sans-serif',
-    monospace: '"Overpass Mono", sans-serif',
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      fontWeight: 'body',
-    },
-    a: {
-      color: 'primary',
-      textDecoration: 'underline',
-      cursor: 'pointer',
-      fontFamily: 'body',
-    },
-    progress: {
-      color: 'primary',
-      backgroundColor: 'background',
-    },
-  },
-  buttons: {
-    cta: {
-      color: 'white',
-      backgroundColor: 'primary',
-    },
-    muted: {
-      color: 'text',
-      backgroundColor: 'muted',
-    },
-    danger: {
-      color: 'white',
-      backgroundColor: 'danger',
-    },
-  },
-  cards: {
-    primary: {
-      backgroundColor: 'background',
-      border: '1px solid black',
-      padding: [4, 5],
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 'fit-content',
-    },
-  },
-  forms: {
-    input: {
-      fontFamily: 'body',
-    },
-  },
-  text: {
-    default: {
-      color: 'text',
-      fontFamily: 'body',
-    },
-    title: {
-      fontFamily: 'heading',
-      fontSize: 4,
-      lineSpace: '3.5',
-    },
-  },
-};