fix: UI Alignments (#1010)

Author: azhur

modules/web/packages/ui/src/components/ui/badge.tsx

@@ -1,23 +1,23 @@
+import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
 import * as React from 'react'
 
 import { cn } from '@ui/lib'
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-md border text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 rounded-md border text-xs font-semibold gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 [&>svg]:size-3 [&>svg]:pointer-events-none',
   {
     variants: {
       variant: {
         default: 'border-transparent bg-brand text-brand-foreground shadow hover:bg-brand/80',
-        brand: 'border-transparent bg-brand text-brand-foreground shadow hover:bg-brand/80',
         warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80',
         success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80',
-        primary: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
           'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
         outline: 'text-foreground',
+        ghost: 'border-dashed border-muted-foreground/50 text-muted-foreground bg-transparent',
       },
       size: {
         sm: 'px-1.5 py-0 text-xs',
@@ -32,11 +32,16 @@ const badgeVariants = cva(
 )
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof badgeVariants> {
+  asChild?: boolean
+}
 
-function Badge({ className, variant, size, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant, size }), className)} {...props} />
+function Badge({ className, variant, size, asChild = false, ...props }: BadgeProps) {
+  const Comp = asChild ? Slot : 'span'
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant, size }), className)} {...props} />
+  )
 }
 
 export { Badge, badgeVariants }