@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,515 +0,0 @@
-import React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
-import { CheckIcon, HomeIcon, PlusCircleIcon, BadgeCheckIcon, PlusIcon } from 'lucide-react'
-import { cn } from '~/components/catalyst-ui'
-import {
-    Avatar,
-    AvatarImage,
-    AvatarFallback,
-    AvatarGroup,
-    avatarVariants
-} from '~/components/catalyst-ui'
-import { Badge } from '~/components/catalyst-ui'
-import {
-    Tooltip,
-    TooltipTrigger,
-    TooltipContent
-} from '~/components/catalyst-ui'
-import {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem
-} from '~/components/catalyst-ui'
-import type { LucideIcon } from 'lucide-react'
-
-// 1. Type Definition
-type AvatarType =
-    | 'default'
-    | 'ring'
-    | 'rounded'
-    | 'statusBusy'
-    | 'statusRing'
-    | 'statusAway'
-    | 'plus'
-    | 'notificationBadge'
-    | 'verified'
-    | 'icon'
-
-// 2. Context Creation
-const AvatarXContext = React.createContext<AvatarType>('default')
-
-// 3. Parent Wrapper
-export function AvatarX({ avatar = 'default', ...props }: any) {
-    return (
-        <AvatarXContext.Provider value={avatar}>
-            <Avatar {...props} />
-        </AvatarXContext.Provider>
-    )
-}
-
-// 4. Image and Fallback Passthroughs
-export function AvatarXImage({ ...props }: any) {
-    const avatarType = React.useContext(AvatarXContext)
-     switch (avatarType) {
-        default:
-            return <AvatarImage {...props} />
-    }
-
-}
-
-export function AvatarXFallback({ ...props }: any) {
-    const avatarType = React.useContext(AvatarXContext)
-    switch (avatarType) {
-        default:
-            return <AvatarFallback {...props} />
-    }
-
-}
-
-// 5. Main Structural Variant Component
-export function AvatarXWrapper({ children, ...props }: any) {
-    const avatarType = React.useContext(AvatarXContext)
-    const Icon = props.icon
-    const badgeCount = props.badgeCount || 8
-    const statusIcon = props.statusIcon || CheckIcon
-    const StatusIconComponent = statusIcon
-
-    switch (avatarType) {
-        case 'ring':
-            return (
-                <Avatar className={cn('ring-ring ring-2', props.className)} {...props}>
-                    {children}
-                </Avatar>
-            )
-
-        case 'rounded':
-            return (
-                <Avatar className={cn('rounded-sm', props.className)} {...props}>
-                    {React.Children.map(children, child => {
-                        if (React.isValidElement(child) && child.type === AvatarXImage) {
-                            return React.cloneElement(child as React.ReactElement<any>, {
-                                className: cn('rounded-sm', child.props.className)
-                            })
-                        }
-                        return child
-                    })}
-                </Avatar>
-            )
-
-        case 'statusBusy':
-            return (
-                <div className='relative w-fit'>
-                    <Avatar className={props.className} {...props}>
-                        {children}
-                    </Avatar>
-                    <span className='border-background bg-destructive absolute -right-0.5 -bottom-0.5 size-3 rounded-full border-2'>
-                        <span className='sr-only'>Busy</span>
-                    </span>
-                </div>
-            )
-
-        case 'statusRing':
-            return (
-                <div className='relative w-fit'>
-                    <Avatar className={cn('ring-offset-background ring-2 ring-green-600 ring-offset-2 dark:ring-green-400', props.className)} {...props}>
-                        {children}
-                    </Avatar>
-                    <span className='absolute -right-1.5 -bottom-1.5 inline-flex size-4 items-center justify-center rounded-full bg-green-600 dark:bg-green-400'>
-                        <StatusIconComponent className='size-3 text-white' />
-                    </span>
-                </div>
-            )
-
-        case 'statusAway':
-            return (
-                <div className='relative w-fit'>
-                    <Avatar className={cn('rounded-sm', props.className)} {...props}>
-                        {React.Children.map(children, child => {
-                            if (React.isValidElement(child) && child.type === AvatarXImage) {
-                                return React.cloneElement(child as React.ReactElement<any>, {
-                                    className: cn('rounded-sm', child.props.className)
-                                })
-                            }
-                            return child
-                        })}
-                    </Avatar>
-                    <span className='border-background absolute -top-1.5 -right-1.5 size-3 rounded-full border-2 bg-amber-600 dark:bg-amber-400'>
-                        <span className='sr-only'>Away</span>
-                    </span>
-                </div>
-            )
-
-        case 'plus':
-            return (
-                <div className='relative w-fit'>
-                    <Avatar className={cn('size-10', props.className)} {...props}>
-                        {children}
-                    </Avatar>
-                    <button className='focus-visible:ring-ring/50 absolute -right-1 -bottom-1 inline-flex cursor-pointer items-center justify-center rounded-full focus-visible:ring-[3px] focus-visible:outline-none'>
-                        <PlusCircleIcon className='text-background size-5 fill-slate-400' />
-                        <span className='sr-only'>Add</span>
-                    </button>
-                </div>
-            )
-
-        case 'notificationBadge':
-            return (
-                <div className='relative w-fit'>
-                    <Avatar className={cn('size-10 rounded-sm', props.className)} {...props}>
-                        {React.Children.map(children, child => {
-                            if (React.isValidElement(child) && child.type === AvatarXImage) {
-                                return React.cloneElement(child as React.ReactElement<any>, {
-                                    className: cn('rounded-sm', child.props.className)
-                                })
-                            }
-                            return child
-                        })}
-                    </Avatar>
-                    <Badge className='absolute -top-2.5 -right-2.5 h-5 min-w-5 bg-indigo-500 px-1 tabular-nums'>
-                        {badgeCount}
-                    </Badge>
-                </div>
-            )
-
-        case 'verified':
-            return (
-                <div className='relative w-fit'>
-                    <Avatar className={cn('size-10', props.className)} {...props}>
-                        {children}
-                    </Avatar>
-                    <span className='absolute -top-1.5 -right-1.5'>
-                        <span className='sr-only'>Verified</span>
-                        <BadgeCheckIcon className='text-background size-5 fill-sky-500' />
-                    </span>
-                </div>
-            )
-
-        case 'icon':
-            return (
-                <Avatar className={props.className} {...props}>
-                    <AvatarFallback className='bg-indigo-500/10 text-indigo-500'>
-                        {Icon && <Icon className='size-4' />}
-                    </AvatarFallback>
-                </Avatar>
-            )
-
-        default:
-            return (
-                <Avatar className={props.className} {...props}>
-                    {children}
-                </Avatar>
-            )
-    }
-}
-
-// 6. Group Component Types
-type AvatarGroupType =
-    | 'default'
-    | 'max'
-    | 'tooltip'
-    | 'transition'
-    | 'tooltipTransition'
-    | 'dropdown'
-    | 'outline'
-    | 'popularity'
-
-const AvatarGroupXContext = React.createContext<AvatarGroupType>('default')
-
-export function AvatarGroupX({ avatarGroup = 'default', children, ...props }: any) {
-    const avatarGroupType = avatarGroup
-    const avatars = props.avatars || []
-    const maxVisible = props.maxVisible || 3
-
-    switch (avatarGroupType) {
-        case 'max':
-            return (
-                <div className='flex -space-x-2'>
-                    {avatars.map((avatar: any, index: number) => (
-                        <Avatar key={index} className='ring-background ring-2'>
-                            <AvatarImage src={avatar.src} alt={avatar.name} />
-                            <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                        </Avatar>
-                    ))}
-                    <Avatar className='ring-background ring-2'>
-                        <AvatarFallback className='text-xs'>+{props.remainingCount || 9}</AvatarFallback>
-                    </Avatar>
-                </div>
-            )
-
-        case 'tooltip':
-            return (
-                <div className='flex -space-x-2'>
-                    {avatars.map((avatar: any, index: number) => (
-                        <Tooltip key={index}>
-                            <TooltipTrigger asChild>
-                                <Avatar className='ring-background ring-2 transition-all duration-300 ease-in-out hover:z-1 hover:-translate-y-1 hover:shadow-md'>
-                                    <AvatarImage src={avatar.src} alt={avatar.name} />
-                                    <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                                </Avatar>
-                            </TooltipTrigger>
-                            <TooltipContent>{avatar.name}</TooltipContent>
-                        </Tooltip>
-                    ))}
-                </div>
-            )
-
-        case 'transition':
-            return (
-                <div className='flex -space-x-2 hover:space-x-1'>
-                    {avatars.map((avatar: any, index: number) => (
-                        <Avatar key={index} className='ring-background ring-2 transition-all duration-300 ease-in-out'>
-                            <AvatarImage src={avatar.src} alt={avatar.name} />
-                            <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                        </Avatar>
-                    ))}
-                </div>
-            )
-
-        case 'tooltipTransition':
-            return (
-                <div className='flex -space-x-2 hover:space-x-1'>
-                    {avatars.map((avatar: any, index: number) => (
-                        <Tooltip key={index}>
-                            <TooltipTrigger asChild>
-                                <Avatar className='ring-background ring-2 transition-all duration-300 ease-in-out'>
-                                    <AvatarImage src={avatar.src} alt={avatar.name} />
-                                    <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                                </Avatar>
-                            </TooltipTrigger>
-                            <TooltipContent>{avatar.name}</TooltipContent>
-                        </Tooltip>
-                    ))}
-                </div>
-            )
-
-        case 'dropdown':
-            return (
-                <div className='flex -space-x-2'>
-                    {avatars.slice(0, maxVisible).map((avatar: any, index: number) => (
-                        <Avatar key={index} className='ring-background ring-2'>
-                            <AvatarImage src={avatar.src} alt={avatar.name} />
-                            <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                        </Avatar>
-                    ))}
-                    <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                            <button className='bg-muted has-focus-visible:ring-ring/50 ring-background flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full ring-2'>
-                                <PlusIcon className='size-4' />
-                                <span className='sr-only'>Add</span>
-                            </button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                            {avatars.slice(maxVisible).map((avatar: any, index: number) => (
-                                <DropdownMenuItem key={index}>
-                                    <Avatar>
-                                        <AvatarImage src={avatar.src} alt={avatar.name} />
-                                        <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                                    </Avatar>
-                                    <span>{avatar.name}</span>
-                                </DropdownMenuItem>
-                            ))}
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            )
-
-        case 'outline':
-            return (
-                <div className='bg-background flex items-center rounded-full border p-1 shadow-sm'>
-                    <div className='flex -space-x-2'>
-                        {avatars.map((avatar: any, index: number) => (
-                            <Avatar key={index} className='ring-background ring-2'>
-                                <AvatarImage src={avatar.src} alt={avatar.name} />
-                                <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                            </Avatar>
-                        ))}
-                    </div>
-                    <span className='text-muted-foreground hover:text-foreground flex items-center justify-center rounded-full bg-transparent px-2 text-xs shadow-none hover:bg-transparent'>
-                        +{props.remainingCount || 3}
-                    </span>
-                </div>
-            )
-
-        case 'popularity':
-            return (
-                <div className='bg-background flex flex-wrap items-center justify-center rounded-full border p-1 shadow-sm'>
-                    <div className='flex -space-x-1'>
-                        {avatars.map((avatar: any, index: number) => (
-                            <Avatar key={index} className='ring-background size-6 ring-2'>
-                                <AvatarImage src={avatar.src} alt={avatar.name} />
-                                <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                            </Avatar>
-                        ))}
-                    </div>
-                    <p className='text-muted-foreground px-2 text-xs'>
-                        Loved by <strong className='text-foreground font-medium'>{props.lovedByCount || '10K+'}</strong> developers.
-                    </p>
-                </div>
-            )
-
-        default:
-            return (
-                <div className='flex -space-x-2'>
-                    {avatars.map((avatar: any, index: number) => (
-                        <Avatar key={index} className='ring-background ring-2'>
-                            <AvatarImage src={avatar.src} alt={avatar.name} />
-                            <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                        </Avatar>
-                    ))}
-                </div>
-            )
-    }
-}
-
-// 7. Demo Component
-export function AvatarXDemo() {
-    const avatars = [
-        { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png', name: 'Alice Johnson', fallback: 'AJ' },
-        { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', name: 'Bob Smith', fallback: 'BS' },
-        { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', name: 'Charlie Brown', fallback: 'CB' },
-        { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-4.png', name: 'Diana Prince', fallback: 'DP' },
-        { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png', name: 'Hallie Richards', fallback: 'HR' },
-    ]
-
-    return (
-        <div className="space-y-12 p-6 max-w-4xl mx-auto">
-            {/* Single Avatar Variants */}
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Default Avatar</h3>
-                <AvatarXWrapper>
-                    <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                    <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                </AvatarXWrapper>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Ring Avatar</h3>
-                <AvatarX avatar="ring">
-                    <AvatarXWrapper>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Rounded Avatar</h3>
-                <AvatarX avatar="rounded">
-                    <AvatarXWrapper>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Status Busy Avatar</h3>
-                <AvatarX avatar="statusBusy">
-                    <AvatarXWrapper>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Status Ring Avatar</h3>
-                <AvatarX avatar="statusRing">
-                    <AvatarXWrapper statusIcon={CheckIcon}>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Status Away Avatar</h3>
-                <AvatarX avatar="statusAway">
-                    <AvatarXWrapper>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Plus Avatar</h3>
-                <AvatarX avatar="plus">
-                    <AvatarXWrapper>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Notification Badge Avatar</h3>
-                <AvatarX avatar="notificationBadge">
-                    <AvatarXWrapper badgeCount={8}>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Verified Avatar</h3>
-                <AvatarX avatar="verified">
-                    <AvatarXWrapper>
-                        <AvatarXImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-                        <AvatarXFallback className='text-xs'>HR</AvatarXFallback>
-                    </AvatarXWrapper>
-                </AvatarX>
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Icon Avatar</h3>
-                <AvatarX avatar="icon">
-                    <AvatarXWrapper icon={HomeIcon} />
-                </AvatarX>
-            </div>
-
-            {/* Avatar Group Variants */}
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Default Avatar Group</h3>
-                <AvatarGroupX avatars={avatars} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Max Count</h3>
-                <AvatarGroupX avatarGroup="max" avatars={avatars} remainingCount={9} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Tooltips</h3>
-                <AvatarGroupX avatarGroup="tooltip" avatars={avatars} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Transition</h3>
-                <AvatarGroupX avatarGroup="transition" avatars={avatars} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Tooltip & Transition</h3>
-                <AvatarGroupX avatarGroup="tooltipTransition" avatars={avatars} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Dropdown</h3>
-                <AvatarGroupX avatarGroup="dropdown" avatars={avatars} maxVisible={3} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Outline</h3>
-                <AvatarGroupX avatarGroup="outline" avatars={avatars} remainingCount={3} />
-            </div>
-
-            <div>
-                <h3 className="text-lg font-semibold mb-4">Avatar Group with Popularity Indicator</h3>
-                <AvatarGroupX avatarGroup="popularity" avatars={avatars} lovedByCount="10K+" />
-            </div>
-        </div>
-    )
-}