@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,670 +0,0 @@
-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>
-  );
-}