@stackshift-ui/button 6.0.11-beta.2 → 6.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackshift-ui/button",
-  "version": "6.0.11-beta.2",
+  "version": "6.1.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -27,15 +27,17 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10-beta.2",
-    "@stackshift-ui/typescript-config": "6.0.10-beta.2"
+    "@stackshift-ui/eslint-config": "6.0.10",
+    "@stackshift-ui/typescript-config": "6.0.10"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
     "react-icons": "^5.3.0",
-    "@stackshift-ui/link": "6.0.11-beta.2",
-    "@stackshift-ui/scripts": "6.0.10-beta.2",
-    "@stackshift-ui/system": "6.0.11-beta.2"
+    "@stackshift-ui/link": "6.0.12-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/button.test.tsx

@@ -7,7 +7,37 @@ describe.concurrent("button", () => {
 
   test("Common: Button - test if renders without errors", ({ expect }) => {
     const clx = "button-class";
-    render(<Button className={clx} />);
-    expect(screen.getByTestId("button").classList).toContain(clx);
+
+    const { unmount } = render(<Button className={clx}>Test Button</Button>);
+
+    const button = screen.getByRole("button", { name: "Test Button" });
+    expect(button.classList).toContain(clx);
+    expect(button.textContent).toBe("Test Button");
+    unmount();
+  });
+
+  test("Common: Button - test if renders as child", ({ expect }) => {
+    const { unmount } = render(
+      <Button asChild>
+        <a href="#" target="_blank" rel="noopener noreferrer">
+          External Link
+        </a>
+      </Button>,
+    );
+
+    const link = screen.getByRole("link", { name: "External Link" });
+    expect(link.tagName.toLowerCase()).toBe("a");
+    expect(link.getAttribute("href")).toBe("#");
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toBe("noopener noreferrer");
+    unmount();
+  });
+
+  test("Common: Button - test if renders with correct variant", ({ expect }) => {
+    const { unmount } = render(<Button variant="destructive">Destructive Button</Button>);
+
+    const button = screen.getByRole("button", { name: "Destructive Button" });
+    expect(button.classList).toContain("bg-destructive");
+    unmount();
   });
 });

package/src/button.tsx

@@ -1,135 +1,61 @@
-import { Link } from "@stackshift-ui/link";
-import { useStackShiftUIComponents } from "@stackshift-ui/system";
-import cn from "classnames";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
-import { FaSpinner } from "react-icons/fa";
-import { extractLink } from "./helper";
-import { type LabeledRoute, type StyleVariants } from "./types";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
-type Variant =
-  | "outline"
-  | "ghost"
-  | "link"
-  | "custom"
-  | "solid"
-  | "addToWishlist"
-  | "unstyled"
-  | "swiper_pagination"
-  | "tab";
-type TextSize = "xs" | "sm" | "md" | "lg";
-type RadiusSize = "none" | "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "full";
-
-interface BaseType {
-  children?: ReactNode;
-  variant?: Variant;
-  radius?: RadiusSize;
-  size?: TextSize;
-  ariaLabel?: string;
-  isActive?: boolean;
-}
-
-interface LinkProps extends BaseType, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type"> {
-  link: LabeledRoute;
-  as: "link";
-}
-
-interface ButtonProps extends BaseType, ButtonHTMLAttributes<HTMLButtonElement> {
-  as?: "button";
-  loading?: boolean;
-  disabled?: boolean;
-  loadingComponent?: React.ReactNode;
-}
-
-type Props = ButtonProps | LinkProps;
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Button";
 
-export function Button({ children, ...props }: Props) {
-  const { [displayName]: Component = "button" } = useStackShiftUIComponents();
-
-  const sizes = {
-    xs: "py-1 px-3 text-xs",
-    sm: "py-2 px-4 text-sm",
-    default: "py-3 px-6 text-default",
-    md: "py-3 px-6 text-base",
-    lg: "py-4 px-7 text-lg",
-  };
-
-  const borderRadiusMap = {
-    none: "rounded-none",
-    sm: "rounded-sm",
-    md: "rounded-md",
-    base: "rounded-base",
-    lg: "rounded-lg",
-    xl: "rounded-xl",
-    "2xl": "rounded-2xl",
-    full: "rounded-full",
-    global: "rounded-global",
-  };
-
-  const { radius, size, variant, ariaLabel, className, isActive } = props;
-
-  const buttonRadius = radius ? borderRadiusMap[radius] : "rounded-global";
-  const buttonSize = sizes[size ?? "default"];
-
-  const commonStyles = "inline-block font-default text-default transition duration-200";
-  const solid = `${commonStyles} ${buttonSize} ${buttonRadius} bg-primary hover:bg-primary/50 text-gray-50`;
-  const custom = `inline-block bg-primary hover:bg-primary/50 ${buttonSize} ${buttonRadius} text-gray-50 font-bold transition duration-200`;
-  const outline = `${commonStyles} ${buttonSize} ${buttonRadius} bg-white hover:bg-primary/50 outline outline-1 text-primary outline-primary`;
-  const ghost = `${commonStyles} ${buttonRadius} ${buttonSize} bg-transparent hover:bg-primary/50 text-primary`;
-  const linkType = `transition-200 text-primary hover:text-primary/50 underline ${buttonRadius} ${cn(buttonSize, "px-0 py-0")}`;
-  const unstyled = ``;
-  const swiper_pagination = `mr-1 ${isActive ? "bg-primary" : "bg-gray-200"} rounded-full p-1 focus:outline-none`;
-  const tab = `mx-auto mb-1 w-auto px-4 py-2 rounded duration-200 transition focus:outline-none font-bold ${
-    isActive
-      ? "bg-gray-50 text-primary shadow"
-      : "text-gray-700 hover:bg-secondary/50 hover:text-primary hover:shadow"
-  }`;
-  const addToWishlist = `${commonStyles} ${buttonRadius} ${buttonSize} ml-auto sm:ml-0 flex-shrink-0 inline-flex items-center justify-center w-full rounded-md border hover:border-primary`;
-
-  const variants: StyleVariants<Variant> = {
-    outline,
-    ghost,
-    link: linkType,
-    custom,
-    solid,
-    addToWishlist,
-    unstyled,
-    swiper_pagination,
-    tab,
-  };
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        unstyled:
+          "bg-transparent p-0 border-none shadow-none hover:bg-transparent ring-0 outline-none text-inherit",
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
 
-  const variantClass = variants[variant ?? "solid"];
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
 
-  if (props.as === "link") {
-    const { link, ...rest } = props as LinkProps;
+    const Comp = asChild ? Slot : "button";
 
     return (
-      <Link
-        className={cn(variantClass, className)}
-        aria-label={ariaLabel}
-        href={extractLink(link)}
-        target={link.linkTarget}
-        rel={link.linkTarget === "_blank" ? "noopener noreferrer" : ""}
-        {...rest}>
-        {children}
-      </Link>
+      <Component
+        as={Comp}
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
     );
-  }
-
-  const { loadingComponent, onClick, loading, disabled, type } = props;
+  },
+);
+Button.displayName = displayName;
 
-  const Loader = loadingComponent ?? <FaSpinner className="animate-spin" size={30} />;
-
-  return (
-    <Component
-      onClick={onClick}
-      disabled={disabled ?? loading}
-      className={cn(variantClass, className)}
-      aria-label={ariaLabel}
-      data-testid={displayName.toLowerCase()}
-      type={type}>
-      {loading ? Loader : children}
-    </Component>
-  );
-}
+export { Button, buttonVariants };

package/src/index.ts

@@ -2,3 +2,4 @@
 
 // component exports
 export * from "./button";
+