@ttoss/ui 1.36.9 → 1.36.11

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
@@ -220,6 +221,7 @@ var Label = ({
       fontFamily: "caption",
       alignItems: "center",
       fontSize: "sm",
+      lineHeight: "base",
       ...sx
     },
     ...props,
@@ -281,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"
@@ -296,7 +299,8 @@ var Select = /*#__PURE__*/React5.forwardRef(({
           },
           alignSelf: "center",
           pointerEvents: "none",
-          lineHeight: 0
+          lineHeight: 0,
+          fontSize: "base"
         },
         children: /* @__PURE__ */jsx8(Icon, {
           icon: "error"
@@ -435,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,
@@ -677,4 +682,34 @@ var InputPassword = /*#__PURE__*/React13.forwardRef(({
   });
 });
 InputPassword.displayName = "InputPassword";
-export { Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+
+// src/components/ActionButton.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var ActionButton = ({
+  icon,
+  variant = "default",
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx17(Button, {
+    variant: `buttons.actionButton.${variant}`,
+    leftIcon: icon,
+    sx: {
+      padding: "sm",
+      gap: "xs",
+      fontFamily: "caption",
+      borderRadius: "action",
+      outlineColor: "transparent",
+      ":disabled": props.disabled ? {
+        backgroundColor: "muted",
+        color: "onMuted",
+        cursor: "not-allowed",
+        border: "muted",
+        borderColor: "onMuted"
+      } : void 0,
+      ...sx
+    },
+    ...props
+  });
+};
+export { ActionButton, Badge, BaseStyles, Box, Button, Card, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, Icon, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, Select, Slider, Spinner, Stack, Text, Textarea, ThemeProvider, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -97,4 +97,10 @@ type InputPasswordProps = Omit<InputProps, 'trailingIcon' | 'onTrailingIconClick
 };
 declare const InputPassword: React.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
-export { Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };
+type ActionButtonProps = Omit<ButtonProps, 'rightIcon' | 'leftIcon' | 'variant'> & {
+    icon: ButtonProps['leftIcon'];
+    variant?: 'default' | 'accent' | 'quiet';
+};
+declare const ActionButton: ({ icon, variant, sx, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { ActionButton, ActionButtonProps, Badge, BadgeProps, Button, ButtonProps, CloseButton, CloseButtonProps, HelpText, HelpTextProps, Icon, IconButton, IconProps, IconType, InfiniteLinearProgress, Input, InputNumber, InputNumberProps, InputPassword, InputPasswordProps, InputProps, Label, LabelProps, Link, LinkProps, Select, Stack, StackProps, Textarea, TextareaProps, ThemeProvider, ThemeProviderProps, useTheme };

package/dist/index.js

@@ -38,6 +38,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ActionButton: () => ActionButton,
   Badge: () => Badge,
   BaseStyles: () => import_theme_ui28.BaseStyles,
   Box: () => import_theme_ui4.Box,
@@ -140,8 +141,9 @@ var Badge = ({
       fontFamily: "caption",
       fontWeight: "normal",
       lineHeight: "base",
-      fontSize: "xs",
+      fontSize: "sm",
       paddingX: "xs",
+      borderRadius: "informative",
       paddingY: "2xs",
       gap: "xs",
       ...sx
@@ -296,6 +298,7 @@ var Label = ({
       fontFamily: "caption",
       alignItems: "center",
       fontSize: "sm",
+      lineHeight: "base",
       ...sx
     },
     ...props,
@@ -357,7 +360,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"
@@ -372,7 +376,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"
@@ -511,8 +516,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,
@@ -753,8 +759,39 @@ var InputPassword = React13.forwardRef(({
   });
 });
 InputPassword.displayName = "InputPassword";
+
+// src/components/ActionButton.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var ActionButton = ({
+  icon,
+  variant = "default",
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(Button, {
+    variant: `buttons.actionButton.${variant}`,
+    leftIcon: icon,
+    sx: {
+      padding: "sm",
+      gap: "xs",
+      fontFamily: "caption",
+      borderRadius: "action",
+      outlineColor: "transparent",
+      ":disabled": props.disabled ? {
+        backgroundColor: "muted",
+        color: "onMuted",
+        cursor: "not-allowed",
+        border: "muted",
+        borderColor: "onMuted"
+      } : void 0,
+      ...sx
+    },
+    ...props
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActionButton,
   Badge,
   BaseStyles,
   Box,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "1.36.9",
+  "version": "1.36.11",
   "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.36"
+    "@ttoss/theme": "^1.4.38"
   },
   "peerDependencies": {
     "react": ">=16.8.0"

package/src/components/ActionButton.tsx

@@ -0,0 +1,41 @@
+import { Button, type ButtonProps } from './Button';
+
+export type ActionButtonProps = Omit<
+  ButtonProps,
+  'rightIcon' | 'leftIcon' | 'variant'
+> & {
+  icon: ButtonProps['leftIcon'];
+  variant?: 'default' | 'accent' | 'quiet';
+};
+
+export const ActionButton = ({
+  icon,
+  variant = 'default',
+  sx,
+  ...props
+}: ActionButtonProps) => {
+  return (
+    <Button
+      variant={`buttons.actionButton.${variant}`}
+      leftIcon={icon}
+      sx={{
+        padding: 'sm',
+        gap: 'xs',
+        fontFamily: 'caption',
+        borderRadius: 'action',
+        outlineColor: 'transparent',
+        ':disabled': props.disabled
+          ? {
+              backgroundColor: 'muted',
+              color: 'onMuted',
+              cursor: 'not-allowed',
+              border: 'muted',
+              borderColor: 'onMuted',
+            }
+          : undefined,
+        ...sx,
+      }}
+      {...props}
+    />
+  );
+};

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/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" />

package/src/index.ts

@@ -42,3 +42,7 @@ export {
   InputPassword,
   type InputPasswordProps,
 } from './components/InputPassword/InputPassword';
+export {
+  ActionButton,
+  type ActionButtonProps,
+} from './components/ActionButton';