@catalystsoftware/ui 1.0.2 → 1.0.5

package/dist/components/catalyst-ui/x/badge-x.tsx

@@ -0,0 +1,670 @@
+import { Badge, cn, badgeVariants } from "~/components/catalyst-ui";
+import { useState, useId } from "react";
+
+/**
+* ★ ━━━━ ☆ ━━━━ BadgeX ━━━━ ☆ ━━━━ ★
+* type BadgeXType = 
+*   | 'Closable' | 'Selectable' | 'BadgeLink'                      // Interactive
+*   | 'InProgress' | 'BadgeCompleted' | 'BadgePending' | 'BadgeFailed' | 'BadgeSuccessful' | 'BadgeBlocked'  // Status
+*   | 'Dot' | 'BadgeWithIcon' | 'BadgeGradient' | 'BadgeGradientOutline' | 'BadgeRounded' | 'BadgeAnimated'  // Visual Styles
+*   | 'BadgeSmall' | 'BadgeLarge'                                  // Sizes
+*   | 'BadgeNumber' | 'BadgeAvatar' | 'BadgeCart'                  // Specialized
+* 
+* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
+* 
+* ★ ━━━━━━━━━ Interactive Badges ━━━━━━━━━ ★
+* ```jsx
+* // Closable - Click X to close
+* <BadgeX badge="Closable" text="Click to close" />
+* 
+* // Selectable - Click to toggle selection
+* <BadgeX 
+*   badge="Selectable" 
+*   text="Select me"
+*   selectedText="Selected!"
+* />
+* 
+* // Link - Clickable badge
+* <BadgeX badge="BadgeLink" text="View details" />
+* ```
+* 
+* ★ ━━━━━━━━━ Status Indicators ━━━━━━━━━ ★
+* ```jsx
+* <BadgeX badge="InProgress" />
+* <BadgeX badge="BadgeCompleted" />
+* <BadgeX badge="BadgePending" />
+* <BadgeX badge="BadgeFailed" />
+* <BadgeX badge="BadgeSuccessful" />
+* <BadgeX badge="BadgeBlocked" />
+* ```
+* 
+* ★ ━━━━━━━━━ Visual Styles ━━━━━━━━━ ★
+* ```jsx
+* // Dot Indicator
+* <BadgeX badge="Dot" />
+* 
+* // With Icon
+* <BadgeX 
+*   badge="BadgeWithIcon" 
+*   text="Premium"
+*   icon="★"
+* />
+* 
+* // Gradient
+* <BadgeX badge="BadgeGradient" text="Premium" />
+* 
+* // Gradient Outline
+* <BadgeX badge="BadgeGradientOutline" text="Special Offer" />
+* 
+* // Rounded
+* <BadgeX badge="BadgeRounded" text="Rounded Style" />
+* 
+* // Animated
+* <BadgeX 
+*   badge="BadgeAnimated" 
+*   text="🎉 Check out our new features! 🚀"
+*   subText="New"
+* />
+* ```
+* 
+* ★ ━━━━━━━━━ Size Variants ━━━━━━━━━ ★
+* ```jsx
+* <BadgeX badge="BadgeSmall" text="Small" />
+* <BadgeX text="Default Size" />
+* <BadgeX badge="BadgeLarge" text="Large" />
+* ```
+* 
+* ★ ━━━━━━━━━ Specialized Badges ━━━━━━━━━ ★
+* ```jsx
+* // Number Badge
+* <BadgeX badge="BadgeNumber" text="99+" />
+* 
+* // Avatar Badge
+* <BadgeX 
+*   badge="BadgeAvatar" 
+*   text="John Doe"
+*   src="https://api.dicebear.com/7.x/avataaars/svg?seed=John"
+* />
+* 
+* // Cart Notification (used with button)
+* <div className="relative">
+*   <button className="p-2 border rounded-lg hover:bg-muted">
+*     🛒 Cart
+*     <BadgeX 
+*       badge="BadgeCart" 
+*       text="3"
+*       className="absolute -top-1 -right-1"
+*     />
+*   </button>
+* </div>
+* ```
+* 
+* ★ ━━━━━━━━━ Custom Usage Example ━━━━━━━━━ ★
+* ```jsx
+* // Project Status Board
+* <div className="space-y-3">
+*   <div className="flex items-center gap-2">
+*     <BadgeX badge="BadgeCompleted" />
+*     <span>Authentication Module</span>
+*   </div>
+*   <div className="flex items-center gap-2">
+*     <BadgeX badge="InProgress" text="In Development" />
+*     <span>Dashboard Analytics</span>
+*   </div>
+*   <div className="flex items-center gap-2">
+*     <BadgeX badge="BadgePending" />
+*     <span>API Integration</span>
+*   </div>
+* </div>
+* 
+* // Team Members Display
+* <div className="flex flex-wrap gap-3">
+*   <BadgeX badge="BadgeAvatar" text="Alex Chen" />
+*   <BadgeX badge="BadgeAvatar" text="Maria Garcia" />
+*   <BadgeX 
+*     badge="BadgeWithIcon" 
+*     text="Admin"
+*     icon="👑"
+*   />
+*   <BadgeX badge="BadgeLink" text="Add Member" />
+* </div>
+* ```
+* 
+* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
+* 
+* BadgeX Props:
+* - `badge`: BadgeXType - Specifies which variant to use
+* - `text`: string - Custom text content (overrides children)
+* - `selectedText`: string - Text to show when selected (for Selectable badge)
+* - `icon`: string | ReactNode - Icon to display (for BadgeWithIcon)
+* - `src`: string - Image source URL (for BadgeAvatar)
+* - `subText`: string - Secondary text (for BadgeAnimated)
+* - `className`: string - Additional CSS classes
+* - `variant`: 'default' | 'secondary' | 'destructive' | 'outline' - Underlying Catalyst UI variant
+* - `onClose`: () => void - Callback when closable badge is closed
+* - `onClick`: () => void - Click handler for interactive badges
+* - All other props are passed to the underlying Badge component
+* 
+* ★ ━━━━━━━━━ Basic Usage ━━━━━━━━━ ★
+* ```javascript
+* import { BadgeX } from "./BadgeX";
+* 
+* // Default badge
+* <BadgeX>Default</BadgeX>
+* 
+* // Specific variant
+* <BadgeX badge="BadgeCompleted">Completed</BadgeX>
+* 
+* // With custom text
+* <BadgeX badge="InProgress" text="Processing" />
+* ```
+* 
+*/
+
+export function BadgeX({ badge = 'default', children, ...props }: any) {
+    switch (badge) {
+        case 'Closable':
+            return <BadgeClosable  {...props}  >{children}</BadgeClosable>;
+        case 'Selectable':
+            return <BadgeSelectable {...props}  >{children}</BadgeSelectable>;
+        case 'InProgress':
+            return <BadgeInProgress  {...props}>{children}</BadgeInProgress>;
+        case 'Dot':
+            return <BadgeDot {...props}>{children}</BadgeDot>;
+        case 'BadgeBlocked':
+            return <BadgeBlocked  {...props}>{children}</BadgeBlocked>;
+        case 'BadgeCompleted':
+            return <BadgeCompleted {...props}>{children}</BadgeCompleted>;
+        case 'BadgeStatusOnline':
+            return <BadgeStatusOnline {...props}>{children}</BadgeStatusOnline>;
+        case 'BadgeGradientOutline':
+            return <BadgeGradientOutline {...props}>{children}</BadgeGradientOutline>;
+        case 'BadgeLink':
+            return <BadgeLink {...props}>{children}</BadgeLink>;
+        case 'BadgeRounded':
+            return <BadgeRounded {...props}>{children}</BadgeRounded>;
+        case 'BadgeNumber':
+            return <BadgeNumber {...props}>{children}</BadgeNumber>;
+        case 'BadgeLarge':
+            return <BadgeLarge {...props}>{children}</BadgeLarge>;
+        case 'BadgeSmall':
+            return <BadgeSmall {...props}>{children}</BadgeSmall>;
+        case 'BadgeWithIcon':
+            return <BadgeWithIcon {...props}>{children}</BadgeWithIcon>;
+        case 'BadgeGradient':
+            return <BadgeGradient {...props}>{children}</BadgeGradient>;
+        case 'BadgePending':
+            return <BadgePending {...props}>{children}</BadgePending>;
+        case 'BadgeFailed':
+            return <BadgeFailed {...props}>{children}</BadgeFailed>;
+        case 'BadgeSuccessful':
+            return <BadgeSuccessful {...props}>{children}</BadgeSuccessful>;
+        case 'BadgeAvatar':
+            return <BadgeAvatar {...props}>{children}</BadgeAvatar>;
+        case 'BadgeCart':
+            return <BadgeCart {...props}>{children}</BadgeCart>;
+        case 'BadgeAnimated':
+            return <BadgeAnimated {...props}>{children}</BadgeAnimated>;
+        default:
+            return <Badge  {...props}>{children}</Badge>;
+    }
+}
+
+
+const BadgeClosable = ({ text = "closeable", className, variant = 'closable', children, ...props }) => {
+    const [isActive, setIsActive] = useState(true)
+
+    if (!isActive) return null
+
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            {children ? children : text}
+            <button
+                className='focus-visible:border-ring focus-visible:ring-ring/50 text-primary-foreground/60 hover:text-primary-foreground -my-px -ms-px -me-1.5 inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[inherit] p-0 transition-[color,box-shadow] outline-none focus-visible:ring-[3px]'
+                aria-label='Close'
+                onClick={() => setIsActive(false)}
+            >
+                <span className='size-3' aria-hidden='true'>✗</span>
+            </button>
+        </Badge>
+    )
+}
+const BadgeSelectable = ({ text = "Selectable", selectedText = "Selected", className, variant = 'selectable', children, ...props }) => {
+    const [selected, setSelected] = useState(false)
+    const id = useId()
+    const badgeText = selected ? selectedText : text
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))} {...props}>
+            <input
+                type="checkbox"
+                id={id}
+                className='peer sr-only'
+                checked={selected}
+                onChange={(e) => setSelected(e.target.checked)}
+            />
+            <span
+                className='hidden size-3 text-green-600 peer-checked:block dark:text-green-400'
+                aria-hidden='true'
+            >
+                ✓
+            </span>
+            <label htmlFor={id} className='cursor-pointer select-none'>
+                {children ? children : badgeText}
+            </label>
+        </Badge>
+    )
+}
+const BadgeInProgress = ({ text = "In Progress", className, variant = 'in-progress', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))} {...props}>
+            <span className='size-1.5 rounded-full bg-amber-600 dark:bg-amber-400' aria-hidden='true' />
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeDot = ({ text = "Dot Badge", className, variant = 'dot', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <span className='bg-primary size-2 rounded-full' aria-hidden='true' />
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeBlocked = ({ text = "Blocked", className, variant = 'blocked', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <span className='bg-destructive size-1.5 rounded-full' aria-hidden='true' />
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeCompleted = ({ text = "Completed", className, variant = 'completed', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <span className='size-1.5 rounded-full bg-green-600 dark:bg-green-400' aria-hidden='true' />
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeStatusOnline = ({ text = "Online", className, variant = 'status-online', children, ...props }) => {
+    return (
+        <div className='relative w-fit' className={cn(badgeVariants({ variant, className }))}  {...props}>
+            {/* Your Avatar component here */}
+            <Badge >
+                <span className='sr-only'>
+                    {children ? children : text}
+                </span>
+            </Badge>
+        </div>
+    )
+}
+const BadgeGradientOutline = ({ text = "Gradient Outline", className, variant = 'gradient-outline', children, ...props }) => {
+    return (
+        <div className='flex items-center justify-center rounded-full bg-gradient-to-r from-indigo-500 to-pink-500 p-0.5'>
+            <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+                {children ? children : text}
+            </Badge>
+        </div>
+    )
+}
+const BadgeLink = ({ text = "Link", className, variant = 'link', children, ...props }) => {
+    return (
+        <Badge asChild className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <a href='#'>
+                {children ? children : text} <span className='size-3' aria-hidden='true'>→</span>
+            </a>
+        </Badge>
+    )
+}
+const BadgeRounded = ({ text = "Rounded", className, variant = 'rounded', children, ...props }) => {
+    return <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+        {children ? children : text}
+    </Badge>
+}
+const BadgeNumber = ({ text = "8", className, variant = 'number', children, ...props }) => {
+    return <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+        {children ? children : text}
+    </Badge>
+}
+const BadgeLarge = ({ text = "Large", className, variant = 'large', children, ...props }) => {
+    return <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+        {children ? children : text}
+    </Badge>
+}
+const BadgeSmall = ({ text = "Small", className, variant = 'small', children, ...props }) => {
+    return <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+        {children ? children : text}
+    </Badge>
+}
+const BadgeWithIcon = ({ text = "With Icon", icon, className, variant = 'with-icon', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <span className='size-3' aria-hidden='true'>{icon ? icon : '★'}</span>
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeGradient = ({ text = "Gradient", className, variant = 'gradient', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgePending = ({ text = "Pending", className, variant = 'pending', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <span className='size-3' aria-hidden='true'>⚠</span>
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeFailed = ({ text = "Failed", className, variant = 'failed', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <span className='size-3' aria-hidden='true'>⊘</span>
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeSuccessful = ({ text = "Successful", className, variant = 'successful', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}   {...props}>
+            <span className='size-3' aria-hidden='true'>✓</span>
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeAvatar = ({ text = "Blocked", src = "https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png", className, variant = 'avatar', children, ...props }) => {
+    return (
+        <Badge className={cn(badgeVariants({ variant, className }))}  {...props}>
+            <img
+                src={src}
+                alt='Avatar'
+                className='size-6 rounded-full'
+            />
+            {children ? children : text}
+        </Badge>
+    )
+}
+const BadgeCart = ({ text = "Cart", className, variant = 'cart', children, ...props }) => {
+    return (
+        <div className='relative w-fit' >
+            {/* Your cart icon/avatar here */}
+            <Badge className={cn(badgeVariants({ variant, className }))} {...props} >
+                {children ? children : text}
+            </Badge>
+        </div>
+    )
+}
+const BadgeAnimated = ({ text = "🎉 Amazing Features! 🪄", subText = 'New', className, variant = 'animated', children, ...props }) => {
+    return (
+        <Badge showBeam className={cn(badgeVariants({ variant, className }))}   {...props}>
+            <span className="bg-primary text-primary-foreground rounded-full px-1.5">
+                {subText}
+            </span>
+            <span className="text-sm text-wrap">
+                {children ? children : text}
+            </span>
+        </Badge>
+    )
+}
+
+
+export  function BadgeXDemo() {
+  const [selectedBadges, setSelectedBadges] = useState({});
+
+  return (
+    <div className="p-8 max-w-7xl mx-auto bg-background">
+      <header className="mb-12">
+        <h1 className="text-4xl font-bold mb-2">BadgeX Demo</h1>
+        <p className="text-muted-foreground">
+          A comprehensive collection of badge variants built with Catalyst UI
+        </p>
+      </header>
+
+      <div className="space-y-12">
+        {/* Section 1: Interactive Badges */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Interactive Badges</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Closable</h3>
+              <p className="text-sm text-muted-foreground mb-2">Click the X to close</p>
+              <BadgeX badge="Closable" text="Click to close" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Selectable</h3>
+              <p className="text-sm text-muted-foreground mb-2">Click to toggle selection</p>
+              <BadgeX 
+                badge="Selectable" 
+                text="Select me"
+                selectedText="Selected!"
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Link</h3>
+              <p className="text-sm text-muted-foreground mb-2">Clickable badge link</p>
+              <BadgeX badge="BadgeLink" text="View details" />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 2: Status Badges */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Status Indicators</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">In Progress</h3>
+              <BadgeX badge="InProgress" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Completed</h3>
+              <BadgeX badge="BadgeCompleted" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Pending</h3>
+              <BadgeX badge="BadgePending" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Failed</h3>
+              <BadgeX badge="BadgeFailed" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Successful</h3>
+              <BadgeX badge="BadgeSuccessful" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Blocked</h3>
+              <BadgeX badge="BadgeBlocked" />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 3: Visual Styles */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Visual Styles</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Dot Indicator</h3>
+              <BadgeX badge="Dot" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">With Icon</h3>
+              <BadgeX 
+                badge="BadgeWithIcon" 
+                text="Premium"
+                icon="★"
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Gradient</h3>
+              <BadgeX badge="BadgeGradient" text="Premium" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Gradient Outline</h3>
+              <BadgeX badge="BadgeGradientOutline" text="Special Offer" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Rounded</h3>
+              <BadgeX badge="BadgeRounded" text="Rounded Style" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Animated</h3>
+              <BadgeX 
+                badge="BadgeAnimated" 
+                text="🎉 Check out our new features! 🚀"
+                subText="New"
+              />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 4: Sizes */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Size Variants</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Small</h3>
+              <BadgeX badge="BadgeSmall" text="Small" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Default</h3>
+              <BadgeX text="Default Size" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Large</h3>
+              <BadgeX badge="BadgeLarge" text="Large" />
+            </div>
+          </div>
+        </section>
+
+        {/* Section 5: Specialized Badges */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Specialized</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Number</h3>
+              <BadgeX badge="BadgeNumber" text="99+" />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Avatar</h3>
+              <BadgeX 
+                badge="BadgeAvatar" 
+                text="John Doe"
+                src="https://api.dicebear.com/7.x/avataaars/svg?seed=John"
+              />
+            </div>
+
+            <div className="space-y-4 p-4 border rounded-lg">
+              <h3 className="font-medium">Cart Notification</h3>
+              <div className="relative">
+                <button className="p-2 border rounded-lg hover:bg-muted">
+                  🛒 Cart
+                  <BadgeX 
+                    badge="BadgeCart" 
+                    text="3"
+                    className="absolute -top-1 -right-1"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Section 6: Custom Example */}
+        <section>
+          <h2 className="text-2xl font-semibold mb-6 pb-2 border-b">Custom Usage Example</h2>
+          <div className="p-6 border rounded-lg bg-card">
+            <div className="mb-6">
+              <h3 className="font-medium mb-4">Project Status Board</h3>
+              <div className="space-y-3">
+                <div className="flex items-center gap-2">
+                  <BadgeX badge="BadgeCompleted" />
+                  <span>Authentication Module</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <BadgeX badge="InProgress" text="In Development" />
+                  <span>Dashboard Analytics</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <BadgeX badge="BadgePending" />
+                  <span>API Integration</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <BadgeX badge="BadgeBlocked" />
+                  <span>Payment Gateway</span>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="font-medium mb-4">Team Members</h3>
+              <div className="flex flex-wrap gap-3">
+                <BadgeX badge="BadgeAvatar" text="Alex Chen" />
+                <BadgeX badge="BadgeAvatar" text="Maria Garcia" />
+                <BadgeX 
+                  badge="BadgeWithIcon" 
+                  text="Admin"
+                  icon="👑"
+                />
+                <BadgeX 
+                  badge="BadgeLink" 
+                  text="Add Member"
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Usage Instructions */}
+        <section className="mt-12 p-6 border rounded-lg bg-muted/30">
+          <h2 className="text-2xl font-semibold mb-4">Usage</h2>
+          <div className="space-y-4">
+            <div>
+              <h3 className="font-medium mb-2">Basic Usage</h3>
+              <pre className="bg-muted p-3 rounded text-sm overflow-x-auto">
+{`import { BadgeX } from "./BadgeX";
+
+// Default badge
+<BadgeX>Default</BadgeX>
+
+// Specific variant
+<BadgeX badge="BadgeCompleted">Completed</BadgeX>
+
+// With custom text
+<BadgeX badge="InProgress" text="Processing" />`}
+              </pre>
+            </div>
+            
+            <div>
+              <h3 className="font-medium mb-2">Props</h3>
+              <ul className="list-disc pl-5 space-y-1 text-sm">
+                <li><code>badge</code>: Specifies which variant to use</li>
+                <li><code>text</code>: Custom text content (overrides children)</li>
+                <li><code>className</code>: Additional CSS classes</li>
+                <li><code>variant</code>: Underlying Catalyst UI variant</li>
+                <li>All other props are passed to the underlying Badge component</li>
+              </ul>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}