refactor: add buttonicon and do not remove the asicon attribute of the button

Author: Ohh-889

packages/ui/src/components/button/Button.tsx

@@ -7,30 +7,30 @@ import { cn } from '@/lib/utils';
 import { buttonVariants } from './button-variants';
 import type { ButtonProps } from './types';
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
     asChild = false,
-    asIconButton,
     children,
     className,
-    color = asIconButton ? 'carbon' : 'primary',
+    color,
     disabled,
     fitContent,
     leading,
     loading,
     shadow,
-    shape = asIconButton ? 'square' : 'auto',
+    shape,
     size,
     trailing,
-    variant = asIconButton ? 'ghost' : 'solid',
+    variant,
     ...rest
   } = props;
 
   const isDisabled = loading || disabled;
 
   const Comp = asChild ? Slot : 'button';
 
-  const mergedCls = cn(buttonVariants({ color, fitContent, shadow, shape, size, variant }), className);
+  // eslint-disable-next-line sort/object-properties
+  const mergedCls = cn(buttonVariants({ color, fitContent, shadow, size, shape, variant }), className);
 
   if (asChild) {
     return (
@@ -58,4 +58,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     </Comp>
   );
 });
+
 Button.displayName = 'Button';
+
+export default Button;

packages/ui/src/components/button/ButtonGroup.tsx

@@ -5,7 +5,7 @@ import { cn } from '@/lib/utils';
 import { buttonGroupVariants } from './button-group-variants';
 import type { ButtonGroupProps } from './types';
 
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
+const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
   const { children, className, orientation, ...rest } = props;
 
   const mergedCls = cn(buttonGroupVariants({ orientation }), className);
@@ -22,3 +22,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props,
 });
 
 ButtonGroup.displayName = 'ButtonGroup';
+
+export default ButtonGroup;

packages/ui/src/components/button/ButtonIcon.tsx

@@ -0,0 +1,41 @@
+import { forwardRef } from 'react';
+
+import { Icon } from '../icon';
+
+import Button from './Button';
+import type { ButtonIconProps } from './types';
+
+const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>((props, ref) => {
+  const {
+    children,
+    color = 'accent',
+    fitContent = true,
+    icon,
+    iconProps,
+    shape = 'square',
+    variant = 'ghost',
+    ...rest
+  } = props;
+
+  return (
+    <Button
+      color={color}
+      fitContent={fitContent}
+      ref={ref}
+      shape={shape}
+      variant={variant}
+      {...rest}
+    >
+      {children || (
+        <Icon
+          icon={String(icon)}
+          {...iconProps}
+        />
+      )}
+    </Button>
+  );
+});
+
+ButtonIcon.displayName = 'ButtonIcon';
+
+export default ButtonIcon;