@stackshift-ui/badge 6.0.11 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/badge",
   "description": "",
-  "version": "6.0.11",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,21 +29,22 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10",
-    "@stackshift-ui/typescript-config": "6.0.10"
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/system": "6.0.11",
-    "@stackshift-ui/flex": "6.0.11"
+    "@stackshift-ui/scripts": "6.1.0-beta.0",
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/flex": "7.0.0-beta.0"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.0",
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
-    "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "react-dom": "16.8 - 19"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/badge.test.tsx

@@ -6,12 +6,38 @@ describe.concurrent("badge", () => {
   afterEach(cleanup);
 
   test("Common: Badge - test if renders without errors", ({ expect }) => {
-    const clx = "badge-class";
-    render(<Badge className={clx} />);
+    const { unmount } = render(<Badge data-testid="default-badge" />);
 
-    const elements = screen.getAllByTestId("div");
+    const elements = screen.getAllByTestId("default-badge");
     elements.forEach(element => {
       expect(element.classList).toBeDefined();
     });
+    unmount();
+  });
+
+  test("Common: Badge - test if renders with correct variant", ({ expect }) => {
+    const { unmount } = render(<Badge data-testid="badge-secondary" variant="secondary" />);
+
+    const elements = screen.getAllByTestId("badge-secondary");
+    elements.forEach(element => {
+      expect(element.classList).toContain("bg-secondary");
+    });
+    unmount();
+  });
+
+  test("Common: Badge - test if renders with correct text", ({ expect }) => {
+    const { unmount } = render(
+      <>
+        <Badge data-testid="default-badge-2">Test</Badge>
+        <Badge data-testid="destructive-badge" variant="destructive">
+          Destructive
+        </Badge>
+        ,
+      </>,
+    );
+
+    expect(screen.getByTestId("default-badge-2").textContent).toBe("Test");
+    expect(screen.getByTestId("destructive-badge").textContent).toBe("Destructive");
+    unmount();
   });
 });

package/src/badge.tsx

@@ -1,27 +1,39 @@
-import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
-import type { ElementType, HTMLProps, ReactNode } from "react";
-import { Flex } from "@stackshift-ui/flex";
-import cn from "classnames";
-
-export interface BadgeProps extends Omit<HTMLProps<HTMLElement>, "as"> {
-  children?: ReactNode;
-  className?: string;
-  as?: ElementType;
-}
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn, DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
 
 const displayName = "Badge";
 
-export const Badge: React.FC<BadgeProps> = ({ children, className, as, ...props }) => {
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
   const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
-  const defaultClass = "px-3 py-1 text-sm font-bold uppercase rounded-full";
 
-  return (
-    <Component className={className} {...props} data-testid={displayName}>
-      <Flex>
-        <div className={cn(defaultClass, className)}>{children}</div>
-      </Flex>
-    </Component>
-  );
-};
+  return <Component className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
 
 Badge.displayName = displayName;
+
+export { Badge, badgeVariants };