Merge pull request #65 from getpingback/fix/add-badge-size

Fix/add badge size

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.341](https://github.com/getpingback/ui/compare/v0.0.340...v0.0.341) (2025-02-19)
+
+
+### Bug Fixes
+
+* add size props to badge component ([cc5fe2b](https://github.com/getpingback/ui/commits/cc5fe2b5237552f85d518228aa5e8e0ddbf6f008))
+
 ### [0.0.338](https://github.com/getpingback/ui/compare/v0.0.337...v0.0.338) (2025-02-10)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@getpingback/ui",
   "author": "Pingback Team",
-  "version": "0.0.340",
+  "version": "0.0.342",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/components/badge/badge.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 
 import { cn } from '@/lib/utils';
 
-const badgeVariants = cva('inline-flex items-center px-2.5 py-0.5 text-xs font-semibold w-fit', {
+const badgeVariants = cva('inline-flex items-center px-2.5 py-0.5 font-semibold w-fit', {
   variants: {
     type: {
       green: 'bg-badge-green text-badge-green-foreground',
@@ -24,8 +24,13 @@ const badgeVariants = cva('inline-flex items-center px-2.5 py-0.5 text-xs font-s
     },
     transform: {
       uppercase: 'uppercase'
+    },
+    size: {
+      default: 'text-xs',
+      small: 'text-[10px] max-h-[20px]'
     }
   },
+
   compoundVariants: [
     {
       variant: 'outline',
@@ -61,14 +66,15 @@ const badgeVariants = cva('inline-flex items-center px-2.5 py-0.5 text-xs font-s
   defaultVariants: {
     type: 'purple',
     radius: 'full',
-    variant: 'ghost'
+    variant: 'ghost',
+    size: 'default'
   }
 });
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, type, radius, transform, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant, type, radius, transform }), className)} {...props} />;
+function Badge({ className, variant, type, radius, transform, size, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant, type, radius, transform, size }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };