From ea03290f84d0f84267a188282afe7249bff73caf Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 9 Mar 2025 15:04:08 +0100
Subject: [PATCH] refactor(ui): Improve Badge component styling and variants

- Change Badge component from div to span for semantic correctness
- Add whitespace-nowrap to prevent text wrapping
- Remove unnecessary shadow classes from default and destructive variants
- Enhance outline variant with border and hover states
- Update variant prop handling in Badge component
---
 src/components/ui/badge/Badge.vue | 4 ++--
 src/components/ui/badge/index.ts  | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
index 9ed8039..da77d71 100644
--- a/src/components/ui/badge/Badge.vue
+++ b/src/components/ui/badge/Badge.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn(badgeVariants({ variant }), props.class)">
+  <span :class="cn(badgeVariants({ variant: props.variant }), props.class)">
     <slot />
-  </div>
+  </span>
 </template>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
index c2ba5fb..9ad9d56 100644
--- a/src/components/ui/badge/index.ts
+++ b/src/components/ui/badge/index.ts
@@ -3,17 +3,17 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  'inline-flex items-center rounded-md 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',
+  'inline-flex items-center whitespace-nowrap rounded-md 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 shadow hover:bg-primary/80',
+          '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 shadow hover:bg-destructive/80',
-        outline: 'text-foreground',
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'border-border text-foreground hover:bg-accent hover:text-accent-foreground',
       },
     },
     defaultVariants: {