@ttoss/ui 1.30.1 → 1.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.30.1",
+  "version": "1.30.2",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "UNLICENSED",
   "author": "ttoss",
@@ -22,20 +22,20 @@
   "typings": "dist/index.d.ts",
   "dependencies": {
     "@emotion/react": "^11.10.5",
-    "@theme-ui/match-media": "^0.15.4",
-    "theme-ui": "^0.15.4"
+    "@theme-ui/match-media": "^0.15.5",
+    "theme-ui": "^0.15.5"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@iconify-icon/react": "^1.0.3",
-    "@ttoss/config": "^1.28.0",
-    "@ttoss/test-utils": "^1.20.2",
-    "@ttoss/theme": "^1.2.3",
+    "@iconify-icon/react": "^1.0.5",
+    "@ttoss/config": "^1.28.1",
+    "@ttoss/test-utils": "^1.20.3",
+    "@ttoss/theme": "^1.2.4",
     "@types/jest": "^29.4.0",
-    "jest": "^29.4.1",
-    "tsup": "^6.5.0"
+    "jest": "^29.4.2",
+    "tsup": "^6.6.3"
   },
   "keywords": [
     "React",
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a0c650bebb4029e9757d2f4a606ba7f25558f7a2"
+  "gitHead": "d4df96176c1d3fce4ebf7842de5847a618a33d9e"
 }

package/src/components/Button.tsx

@@ -1,12 +1,57 @@
-import { type ButtonProps, Button as ButtonUi } from 'theme-ui';
+import * as React from 'react';
+import {
+  type ButtonProps as ButtonPropsUi,
+  Button as ButtonUi,
+} from 'theme-ui';
+import { Icon } from './Icon';
 
-export type { ButtonProps };
+export type ButtonProps = ButtonPropsUi & {
+  leftIcon?: React.ReactNode | string;
+  rightIcon?: React.ReactNode | string;
+};
+
+const RenderIcon = ({ icon }: { icon: React.ReactNode | string }) => {
+  if (!icon) {
+    return null;
+  }
 
-export const Button = (props: ButtonProps) => {
-  return (
-    <ButtonUi
-      {...props}
-      sx={{ cursor: 'pointer', fontFamily: 'body', ...props.sx }}
-    />
-  );
+  if (typeof icon === 'string') {
+    return (
+      <>
+        <Icon icon={icon} />
+      </>
+    );
+  }
+
+  return <>{icon}</>;
 };
+
+const MemoizedRenderIcon = React.memo(RenderIcon);
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { children, leftIcon, rightIcon, ...restProps } = props;
+
+    return (
+      <ButtonUi
+        ref={ref}
+        {...restProps}
+        sx={{
+          cursor: 'pointer',
+          paddingX: 'lg',
+          paddingY: 'md',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 'lg',
+          ...restProps.sx,
+        }}
+      >
+        <MemoizedRenderIcon icon={leftIcon} />
+        {children}
+        <MemoizedRenderIcon icon={rightIcon} />
+      </ButtonUi>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/index.ts

@@ -1,10 +1,7 @@
-export type { Theme } from 'theme-ui';
+export { BaseStyles, type Theme } from 'theme-ui';
 export { useResponsiveValue, useBreakpointIndex } from '@theme-ui/match-media';
 
-export {
-  default as ThemeProvider,
-  type ThemeProviderProps,
-} from './theme/ThemeProvider';
+export { ThemeProvider, type ThemeProviderProps } from './theme/ThemeProvider';
 
 export { useTheme } from './theme/useTheme';
 

package/src/theme/ThemeProvider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BruttalFonts, BruttalTheme } from '@ttoss/theme';
 import { Global, css } from '@emotion/react';
-import { Theme, ThemeProvider as ThemeUiProvider, merge } from 'theme-ui';
+import { Theme, ThemeProvider as ThemeUiProvider } from 'theme-ui';
 
 export type ThemeProviderProps = {
   children?: React.ReactNode;
@@ -12,36 +12,25 @@ export type ThemeProviderProps = {
   fonts?: string[];
 };
 
-const ThemeProvider = ({
+export const ThemeProvider = ({
   children,
-  theme = {},
+  theme = BruttalTheme,
   fonts = BruttalFonts,
 }: ThemeProviderProps) => {
-  const mergedTheme = React.useMemo(() => {
-    if (typeof theme === 'function') {
-      return theme;
-    }
-
-    return merge(BruttalTheme, theme);
-  }, [theme]);
-
   return (
     <>
-      <ThemeUiProvider theme={mergedTheme}>
-        {fonts.map((url) => {
-          return (
-            <Global
-              key={url}
-              styles={css`
-                @import url('${url}');
-              `}
-            />
-          );
-        })}
+      <ThemeUiProvider theme={theme}>
+        <Global
+          styles={css`
+            ${fonts
+              .map((url) => {
+                return `@import url('${url}');`;
+              })
+              .join('\n')}
+          `}
+        />
         {children}
       </ThemeUiProvider>
     </>
   );
 };
-
-export default ThemeProvider;