@ttoss/ui 1.36.8 → 1.36.10

package/dist/esm/index.js

@@ -64,8 +64,9 @@ var Badge = ({
       fontFamily: "caption",
       fontWeight: "normal",
       lineHeight: "base",
-      fontSize: "xs",
+      fontSize: "sm",
       paddingX: "xs",
+      borderRadius: "informative",
       paddingY: "2xs",
       gap: "xs",
       ...sx
@@ -90,6 +91,7 @@ var Button = /*#__PURE__*/React2.forwardRef((props, ref) => {
     children,
     leftIcon,
     rightIcon,
+    loading,
     ...restProps
   } = props;
   return /* @__PURE__ */jsxs3(ButtonUi, {
@@ -106,7 +108,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, {
@@ -216,6 +221,7 @@ var Label = ({
       fontFamily: "caption",
       alignItems: "center",
       fontSize: "sm",
+      lineHeight: "base",
       ...sx
     },
     ...props,
@@ -277,7 +283,8 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           },
           alignSelf: "center",
           pointerEvents: "none",
-          lineHeight: 0
+          lineHeight: 0,
+          fontSize: "base"
         },
         children: /* @__PURE__ */jsx8(Icon, {
           icon: "picker-down"
@@ -292,7 +299,8 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           },
           alignSelf: "center",
           pointerEvents: "none",
-          lineHeight: 0
+          lineHeight: 0,
+          fontSize: "base"
         },
         children: /* @__PURE__ */jsx8(Icon, {
           icon: "error"
@@ -431,8 +439,9 @@ var HelpText = ({
   return /* @__PURE__ */jsx12(Text, {
     variant,
     sx: {
-      fontSize: "xs",
+      fontSize: "sm",
       fontFamily: "caption",
+      lineHeight: "base",
       ...sx
     },
     "aria-disabled": disabled ? "true" : void 0,
@@ -463,9 +472,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

@@ -32,6 +32,7 @@ declare const Badge: ({ icon, children, sx, ...props }: BadgeProps) => react_jsx
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;
     rightIcon?: IconType;
+    loading?: boolean;
 };
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 

package/dist/index.js

@@ -140,8 +140,9 @@ var Badge = ({
       fontFamily: "caption",
       fontWeight: "normal",
       lineHeight: "base",
-      fontSize: "xs",
+      fontSize: "sm",
       paddingX: "xs",
+      borderRadius: "informative",
       paddingY: "2xs",
       gap: "xs",
       ...sx
@@ -166,6 +167,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 +184,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, {
@@ -292,6 +297,7 @@ var Label = ({
       fontFamily: "caption",
       alignItems: "center",
       fontSize: "sm",
+      lineHeight: "base",
       ...sx
     },
     ...props,
@@ -353,7 +359,8 @@ var Select = React5.forwardRef(({
           },
           alignSelf: "center",
           pointerEvents: "none",
-          lineHeight: 0
+          lineHeight: 0,
+          fontSize: "base"
         },
         children: /* @__PURE__ */(0, import_jsx_runtime8.jsx)(Icon, {
           icon: "picker-down"
@@ -368,7 +375,8 @@ var Select = React5.forwardRef(({
           },
           alignSelf: "center",
           pointerEvents: "none",
-          lineHeight: 0
+          lineHeight: 0,
+          fontSize: "base"
         },
         children: /* @__PURE__ */(0, import_jsx_runtime8.jsx)(Icon, {
           icon: "error"
@@ -507,8 +515,9 @@ var HelpText = ({
   return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_theme_ui16.Text, {
     variant,
     sx: {
-      fontSize: "xs",
+      fontSize: "sm",
       fontFamily: "caption",
+      lineHeight: "base",
       ...sx
     },
     "aria-disabled": disabled ? "true" : void 0,
@@ -539,9 +548,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.8",
+  "version": "1.36.10",
   "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.35"
+    "@ttoss/theme": "^1.4.37"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/src/components/Badge.tsx

@@ -15,8 +15,9 @@ export const Badge = ({ icon, children, sx, ...props }: BadgeProps) => {
         fontFamily: 'caption',
         fontWeight: 'normal',
         lineHeight: 'base',
-        fontSize: 'xs',
+        fontSize: 'sm',
         paddingX: 'xs',
+        borderRadius: 'informative',
         paddingY: '2xs',
         gap: 'xs',
         ...sx,

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}

package/src/components/HelpText.tsx

@@ -19,8 +19,9 @@ export const HelpText = ({
     <Text
       variant={variant}
       sx={{
-        fontSize: 'xs',
+        fontSize: 'sm',
         fontFamily: 'caption',
+        lineHeight: 'base',
         ...sx,
       }}
       aria-disabled={disabled ? 'true' : undefined}

package/src/components/Label.tsx

@@ -21,6 +21,7 @@ export const Label = ({
         fontFamily: 'caption',
         alignItems: 'center',
         fontSize: 'sm',
+        lineHeight: 'base',
         ...sx,
       }}
       {...props}

package/src/components/Select.tsx

@@ -20,6 +20,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
                   alignSelf: 'center',
                   pointerEvents: 'none',
                   lineHeight: 0,
+                  fontSize: 'base',
                 }}
               >
                 <Icon icon="picker-down" />
@@ -38,6 +39,7 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
                   alignSelf: 'center',
                   pointerEvents: 'none',
                   lineHeight: 0,
+                  fontSize: 'base',
                 }}
               >
                 <Icon icon="error" />