feat: add button-group component

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -3,5 +3,6 @@ export * from './shared';
 export * from './types';
 
 export * from './variants/button';
-
+export * from './variants/button-group';
 export * from './variants/card';
+export * from './variants/tabs';

packages/ui-variants/src/variants/button-group.ts

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+export const buttonGroupVariants = tv({
+  base: `*:relative focus-visible:*:z-2 *:not-first:not-last:rounded-none`,
+
+  // eslint-disable-next-line sort/object-properties
+  variants: {
+    orientation: {
+      horizontal: `inline-flex *:not-last:border-r-0 *:first:rounded-r-none *:last:rounded-l-none`,
+      vertical: `flex flex-col *:not-last:border-b-0 *:first:rounded-b-none *:last:rounded-t-none`
+    }
+  },
+  defaultVariants: {
+    orientation: 'horizontal'
+  }
+});

packages/ui/src/components/button/index.ts

@@ -0,0 +1,4 @@
+export * from './source/Button';
+export * from './source/ButtonGroup';
+
+export * from './type';

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

@@ -0,0 +1,59 @@
+import { Slot } from '@radix-ui/react-slot';
+import { buttonVariants, cn } from '@skyroc-ui/variants';
+import { Loader2 } from 'lucide-react';
+import { forwardRef } from 'react';
+
+import type { ButtonProps } from '../type';
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    asChild = false,
+    asIconButton,
+    children,
+    className,
+    color = asIconButton ? 'carbon' : 'primary',
+    disabled,
+    fitContent,
+    leading,
+    loading,
+    shadow,
+    shape = asIconButton ? 'square' : 'auto',
+    size,
+    trailing,
+    variant = asIconButton ? 'ghost' : 'solid',
+    ...rest
+  } = props;
+
+  const isDisabled = loading || disabled;
+
+  const Comp = asChild ? Slot : 'button';
+
+  const mergedCls = cn(buttonVariants({ color, fitContent, shadow, shape, size, variant }), className);
+
+  if (asChild) {
+    return (
+      <Comp
+        className={mergedCls}
+        disabled={isDisabled}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Comp>
+    );
+  }
+
+  return (
+    <Comp
+      className={mergedCls}
+      disabled={isDisabled}
+      ref={ref}
+      {...rest}
+    >
+      {loading ? leading || <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : leading}
+      {children}
+      {trailing}
+    </Comp>
+  );
+});
+Button.displayName = 'Button';

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

@@ -0,0 +1,22 @@
+import { buttonGroupVariants, cn } from '@skyroc-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ButtonGroupProps } from '../type';
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
+  const { children, className, orientation, ...rest } = props;
+
+  const mergedCls = cn(buttonGroupVariants({ orientation }), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    >
+      {children}
+    </div>
+  );
+});
+
+ButtonGroup.displayName = 'ButtonGroup';