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

package/dist/badge.d.ts

@@ -1,7 +1,12 @@
-import type { ElementType, HTMLProps, ReactNode } from "react";
-export interface BadgeProps extends Omit<HTMLProps<HTMLElement>, "as"> {
-    children?: ReactNode;
-    className?: string;
-    as?: ElementType;
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-export declare const Badge: React.FC<BadgeProps>;
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Badge {
+    var displayName: string;
+}
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -1 +1 @@
-"use strict";var f=Object.create;var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of C(t))!y.call(e,a)&&a!==o&&p(e,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return e};var g=(e,t,o)=>(o=e!=null?f(x(e)):{},d(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),T=e=>d(p({},"__esModule",{value:!0}),e);var B={};N(B,{Badge:()=>i});module.exports=T(B);var m=require("@stackshift-ui/system"),l=require("@stackshift-ui/flex"),c=g(require("classnames")),n=require("react/jsx-runtime"),r="Badge",i=({children:e,className:t,as:o,...s})=>{let{[r]:a=m.DefaultComponent}=(0,m.useStackShiftUIComponents)();return(0,n.jsx)(a,{className:t,...s,"data-testid":r,children:(0,n.jsx)(l.Flex,{children:(0,n.jsx)("div",{className:(0,c.default)("px-3 py-1 text-sm font-bold uppercase rounded-full",t),children:e})})})};i.displayName=r;0&&(module.exports={Badge});
+"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var l=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},b=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of g(e))!m.call(r,n)&&n!==t&&s(r,n,{get:()=>e[n],enumerable:!(a=u(e,n))||a.enumerable});return r};var v=r=>b(s({},"__esModule",{value:!0}),r);var y={};l(y,{Badge:()=>f,badgeVariants:()=>c});module.exports=v(y);var i=require("class-variance-authority"),o=require("@stackshift-ui/system"),p=require("react/jsx-runtime"),d="Badge",c=(0,i.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"}});function f({className:r,variant:e,...t}){let{[d]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,p.jsx)(a,{className:(0,o.cn)(c({variant:e}),r),...t})}f.displayName=d;0&&(module.exports={Badge,badgeVariants});

package/dist/badge.mjs

@@ -1 +1 @@
-import{a}from"./chunk-53FTCUE2.mjs";export{a as Badge};
+import{a,b}from"./chunk-QPNE64XN.mjs";export{b as Badge,a as badgeVariants};

package/dist/chunk-QPNE64XN.mjs

@@ -0,0 +1 @@
+import{cva as a}from"class-variance-authority";import{cn as s,DefaultComponent as i,useStackShiftUIComponents as d}from"@stackshift-ui/system";import{jsx as p}from"react/jsx-runtime";var e="Badge",c=a("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"}});function f({className:r,variant:t,...o}){let{[e]:n=i}=d();return p(n,{className:s(c({variant:t}),r),...o})}f.displayName=e;export{c as a,f as b};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var f=Object.create;var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of x(t))!y.call(e,a)&&a!==o&&p(e,a,{get:()=>t[a],enumerable:!(s=u(t,a))||s.enumerable});return e};var g=(e,t,o)=>(o=e!=null?f(C(e)):{},d(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),T=e=>d(p({},"__esModule",{value:!0}),e);var B={};N(B,{Badge:()=>i});module.exports=T(B);var r=require("@stackshift-ui/system"),l=require("@stackshift-ui/flex"),c=g(require("classnames")),n=require("react/jsx-runtime"),m="Badge",i=({children:e,className:t,as:o,...s})=>{let{[m]:a=r.DefaultComponent}=(0,r.useStackShiftUIComponents)();return(0,n.jsx)(a,{className:t,...s,"data-testid":m,children:(0,n.jsx)(l.Flex,{children:(0,n.jsx)("div",{className:(0,c.default)("px-3 py-1 text-sm font-bold uppercase rounded-full",t),children:e})})})};i.displayName=m;0&&(module.exports={Badge});
+"use strict";var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var l=(r,e)=>{for(var t in e)s(r,t,{get:e[t],enumerable:!0})},b=(r,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of g(e))!m.call(r,n)&&n!==t&&s(r,n,{get:()=>e[n],enumerable:!(a=u(e,n))||a.enumerable});return r};var v=r=>b(s({},"__esModule",{value:!0}),r);var y={};l(y,{Badge:()=>f,badgeVariants:()=>c});module.exports=v(y);var i=require("class-variance-authority"),o=require("@stackshift-ui/system"),p=require("react/jsx-runtime"),d="Badge",c=(0,i.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"}});function f({className:r,variant:e,...t}){let{[d]:a=o.DefaultComponent}=(0,o.useStackShiftUIComponents)();return(0,p.jsx)(a,{className:(0,o.cn)(c({variant:e}),r),...t})}f.displayName=d;0&&(module.exports={Badge,badgeVariants});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-53FTCUE2.mjs";export{e as Badge};
+"use strict";import{a as e,b as o}from"./chunk-QPNE64XN.mjs";export{o as Badge,e as badgeVariants};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/badge",
   "description": "",
-  "version": "6.0.11",
+  "version": "7.0.0-beta.1",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -33,17 +33,18 @@
     "@stackshift-ui/typescript-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/flex": "7.0.0-beta.1",
+    "@stackshift-ui/system": "6.1.0-beta.1"
   },
   "peerDependencies": {
+    "@stackshift-ui/system": ">=6.1.0-beta.1",
     "@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 };

package/dist/chunk-53FTCUE2.mjs

@@ -1 +0,0 @@
-import{DefaultComponent as n,useStackShiftUIComponents as m}from"@stackshift-ui/system";import{Flex as r}from"@stackshift-ui/flex";import d from"classnames";import{jsx as e}from"react/jsx-runtime";var t="Badge",l=({children:a,className:o,as:c,...s})=>{let{[t]:p=n}=m();return e(p,{className:o,...s,"data-testid":t,children:e(r,{children:e("div",{className:d("px-3 py-1 text-sm font-bold uppercase rounded-full",o),children:a})})})};l.displayName=t;export{l as a};