chore(Badge): upade to 5.0.0

Author: benjitrosch

src/Badge/Badge.stories.tsx

@@ -37,7 +37,7 @@ export const BrandColors: Story<BadgeProps> = (args) => {
   )
 }
 
-export const Outline: Story<BadgeProps> = (args) => {
+export const SoftStyle: Story<BadgeProps> = (args) => {
   return (
     <div className="flex gap-2 items-center">
       <Badge {...args}>default</Badge>
@@ -53,10 +53,50 @@ export const Outline: Story<BadgeProps> = (args) => {
     </div>
   )
 }
-Outline.args = {
+SoftStyle.args = {
+  variant: 'soft',
+}
+
+export const OutlineStyle: Story<BadgeProps> = (args) => {
+  return (
+    <div className="flex gap-2 items-center">
+      <Badge {...args}>default</Badge>
+      <Badge {...args} color="primary">
+        primary
+      </Badge>
+      <Badge {...args} color="secondary">
+        secondary
+      </Badge>
+      <Badge {...args} color="accent">
+        accent
+      </Badge>
+    </div>
+  )
+}
+OutlineStyle.args = {
   variant: 'outline',
 }
 
+export const DashStyle: Story<BadgeProps> = (args) => {
+  return (
+    <div className="flex gap-2 items-center">
+      <Badge {...args}>default</Badge>
+      <Badge {...args} color="primary">
+        primary
+      </Badge>
+      <Badge {...args} color="secondary">
+        secondary
+      </Badge>
+      <Badge {...args} color="accent">
+        accent
+      </Badge>
+    </div>
+  )
+}
+DashStyle.args = {
+  variant: 'dash',
+}
+
 export const Sizes: Story<BadgeProps> = (args) => {
   return (
     <div className="flex gap-2 items-center">

src/Badge/Badge.tsx

@@ -2,25 +2,28 @@ import React, { forwardRef, ReactNode } from 'react'
 import clsx from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
-import { IComponentBaseProps, ComponentColor, ComponentSize } from '../types'
+import {
+  IComponentBaseProps,
+  ComponentColor,
+  ComponentSize,
+  ComponentVariant,
+} from '../types'
 
 export type BadgeProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'color'> &
   IComponentBaseProps & {
-    variant?: 'outline'
-    outline?: boolean
     size?: ComponentSize
     color?: ComponentColor
+    variant?: ComponentVariant
     responsive?: boolean
   }
 
 const Badge = forwardRef<HTMLDivElement, BadgeProps>(
   (
     {
       children,
-      variant,
-      outline,
       size,
       color,
+      variant,
       responsive,
       dataTheme,
       className,
@@ -36,7 +39,9 @@ const Badge = forwardRef<HTMLDivElement, BadgeProps>(
         'badge-md': size === 'md',
         'badge-sm': size === 'sm',
         'badge-xs': size === 'xs',
-        'badge-outline': variant === 'outline' || outline,
+        'badge-soft': variant === 'soft',
+        'badge-dash': variant === 'dash',
+        'badge-outline': variant === 'outline',
         'badge-neutral': color === 'neutral',
         'badge-primary': color === 'primary',
         'badge-secondary': color === 'secondary',