@ttoss/ui 1.36.7 → 1.36.9

package/dist/esm/index.js

@@ -90,6 +90,7 @@ var Button = /*#__PURE__*/React2.forwardRef((props, ref) => {
     children,
     leftIcon,
     rightIcon,
+    loading,
     ...restProps
   } = props;
   return /* @__PURE__ */jsxs3(ButtonUi, {
@@ -106,7 +107,10 @@ var Button = /*#__PURE__*/React2.forwardRef((props, ref) => {
       gap: "lg",
       ...restProps.sx
     },
-    children: [leftIcon && /* @__PURE__ */jsx4(Icon, {
+    children: [loading && /* @__PURE__ */jsx4(Icon, {
+      inline: true,
+      icon: "three-dots-loading"
+    }), !loading && leftIcon && /* @__PURE__ */jsx4(Icon, {
       inline: true,
       icon: leftIcon
     }), children, rightIcon && /* @__PURE__ */jsx4(Icon, {
@@ -463,9 +467,14 @@ var CloseButton = /*#__PURE__*/React9.forwardRef(({
       display: "inline-flex",
       alignItems: "center",
       cursor: "pointer",
+      lineHeight: "normal",
       gap: "sm",
       padding: "sm",
       width: "fit-content",
+      transition: "all 0.2s",
+      "& > iconify-icon": {
+        fontSize: "base"
+      },
       ...sx
     },
     ...props,

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { Theme, BadgeProps as BadgeProps$1, ButtonProps as ButtonProps$1, InputP
 export { BaseStyles, Box, BoxProps, Card, CardProps, Checkbox, CheckboxProps, Container, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButtonProps, Image, ImageProps, Progress as LinearProgress, ProgressProps as LinearProgressProps, Paragraph, ParagraphProps, Radio, RadioProps, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, SxProp, Text, TextProps, Theme } from 'theme-ui';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 export { Keyframes, keyframes } from '@emotion/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { IconifyIconProps, IconifyIconHTMLElement } from '@iconify-icon/react';
 import { IconifyIcon } from '@iconify/types';
@@ -15,7 +16,7 @@ type ThemeProviderProps = {
      */
     fonts?: string[];
 };
-declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => JSX.Element;
+declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
@@ -26,11 +27,12 @@ declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttribu
 type BadgeProps = BadgeProps$1 & {
     icon?: IconType;
 };
-declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => JSX.Element;
+declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;
     rightIcon?: IconType;
+    loading?: boolean;
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
@@ -46,7 +48,7 @@ type LabelProps = LabelProps$1 & {
     tooltip?: boolean;
     onTooltipClick?: () => void;
 };
-declare const Label: ({ children, onTooltipClick, tooltip, sx, ...props }: LabelProps) => JSX.Element;
+declare const Label: ({ children, onTooltipClick, tooltip, sx, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
 
 type LinkProps = LinkProps$1 & {
     quiet?: boolean;
@@ -57,7 +59,7 @@ declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> &
 
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
-declare const InfiniteLinearProgress: () => JSX.Element;
+declare const InfiniteLinearProgress: () => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps extends TextareaProps$1 {
     trailingIcon?: IconType;
@@ -68,7 +70,7 @@ type HelpTextProps = Omit<TextProps, 'variant'> & {
     disabled?: boolean;
     negative?: boolean;
 };
-declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => JSX.Element;
+declare const HelpText: ({ sx, disabled, negative, ...props }: HelpTextProps) => react_jsx_runtime.JSX.Element;
 
 type CloseButtonProps = ButtonProps$1 & {
     label?: string;

package/dist/index.js

@@ -166,6 +166,7 @@ var Button = React2.forwardRef((props, ref) => {
     children,
     leftIcon,
     rightIcon,
+    loading,
     ...restProps
   } = props;
   return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_theme_ui5.Button, {
@@ -182,7 +183,10 @@ var Button = React2.forwardRef((props, ref) => {
       gap: "lg",
       ...restProps.sx
     },
-    children: [leftIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+    children: [loading && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
+      inline: true,
+      icon: "three-dots-loading"
+    }), !loading && leftIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
       inline: true,
       icon: leftIcon
     }), children, rightIcon && /* @__PURE__ */(0, import_jsx_runtime4.jsx)(Icon, {
@@ -539,9 +543,14 @@ var CloseButton = React9.forwardRef(({
       display: "inline-flex",
       alignItems: "center",
       cursor: "pointer",
+      lineHeight: "normal",
       gap: "sm",
       padding: "sm",
       width: "fit-content",
+      transition: "all 0.2s",
+      "& > iconify-icon": {
+        fontSize: "base"
+      },
       ...sx
     },
     ...props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.36.7",
+  "version": "1.36.9",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "author": "ttoss",
   "contributors": [
@@ -19,7 +19,7 @@
     "@iconify-icon/react": "^1.0.7",
     "@theme-ui/match-media": "^0.15.7",
     "theme-ui": "^0.15.7",
-    "@ttoss/theme": "^1.4.34"
+    "@ttoss/theme": "^1.4.36"
   },
   "peerDependencies": {
     "react": ">=16.8.0"
@@ -28,12 +28,12 @@
     "@iconify-icons/mdi-light": "^1.2.5",
     "@iconify/types": "^2.0.0",
     "@types/jest": "^29.5.1",
-    "@types/react": "^18.2.5",
+    "@types/react": "^18.2.6",
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "tsup": "^6.7.0",
     "@ttoss/config": "^1.30.0",
-    "@ttoss/test-utils": "^1.23.0"
+    "@ttoss/test-utils": "^1.23.1"
   },
   "keywords": [
     "React",

package/src/components/Button.tsx

@@ -8,11 +8,12 @@ import { Icon, IconType } from './Icon';
 export type ButtonProps = ButtonPropsUi & {
   leftIcon?: IconType;
   rightIcon?: IconType;
+  loading?: boolean;
 };
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
-    const { children, leftIcon, rightIcon, ...restProps } = props;
+    const { children, leftIcon, rightIcon, loading, ...restProps } = props;
 
     return (
       <ButtonUi
@@ -30,7 +31,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           ...restProps.sx,
         }}
       >
-        {leftIcon && <Icon inline icon={leftIcon} />}
+        {loading && <Icon inline icon="three-dots-loading" />}
+        {!loading && leftIcon && <Icon inline icon={leftIcon} />}
         {children}
         {rightIcon && <Icon inline icon={rightIcon} />}
       </ButtonUi>

package/src/components/CloseButton.tsx

@@ -26,9 +26,14 @@ export const CloseButton = React.forwardRef<
         display: 'inline-flex',
         alignItems: 'center',
         cursor: 'pointer',
+        lineHeight: 'normal',
         gap: 'sm',
         padding: 'sm',
         width: 'fit-content',
+        transition: 'all 0.2s',
+        '& > iconify-icon': {
+          fontSize: 'base',
+        },
         ...sx,
       }}
       {...props}