@ttoss/ui 1.36.10 → 1.36.11

package/dist/esm/index.js

@@ -682,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,
@@ -758,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.10",
+  "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.37"
+    "@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/index.ts

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