@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/components/catalyst-ui/x/hover-card-x.tsx

@@ -0,0 +1,375 @@
+import React from 'react'
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "~/components/catalyst-ui"
+import { Avatar, AvatarImage, AvatarFallback, Badge, Button } from "~/components/catalyst-ui"
+import { InfoIcon, CalendarIcon, FileQuestionIcon, ChevronRightIcon } from "lucide-react"
+
+const hoverCardContentVariants = cva(
+  "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-popover text-popover-foreground",
+        light: "bg-neutral-200 text-neutral-950 dark:bg-neutral-50",
+        error: "bg-destructive text-white border-destructive",
+        dark: "bg-neutral-900 text-white dark:bg-neutral-950 border-neutral-800",
+      },
+      rounded: {
+        default: "rounded-md",
+        full: "rounded-full",
+        none: "rounded-none",
+      },
+      arrow: {
+        true: "",
+        false: "[&_svg]:invisible",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      rounded: "default",
+      arrow: true,
+    },
+  }
+)
+
+type HoverCardType = 'default' | 'media' | 'stats' | 'project' | 'alert' | 'tasks'
+
+type HoverCardVariantContextValue = VariantProps<typeof hoverCardContentVariants> & {
+  align?: 'start' | 'center' | 'end'
+  sideOffset?: number
+}
+
+const HoverCardXContext = React.createContext<HoverCardType>('default')
+const HoverCardVariantContext = React.createContext<HoverCardVariantContextValue>({})
+
+export function HoverCardX({
+  children,
+  hovercard = 'default',
+  variant,
+  rounded,
+  arrow,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: HoverCardPrimitive.HoverCardProps & { hovercard?: HoverCardType } & HoverCardVariantContextValue) {
+  return (
+    <HoverCardXContext.Provider value={hovercard}>
+      <HoverCardVariantContext.Provider value={{ variant, rounded, arrow, align, sideOffset }}>
+        <HoverCardPrimitive.Root {...props}>
+          {children}
+        </HoverCardPrimitive.Root>
+      </HoverCardVariantContext.Provider>
+    </HoverCardXContext.Provider>
+  )
+}
+
+export function HoverCardXTrigger({ children, ...props }: any) {
+  const hovercardType = React.useContext(HoverCardXContext)
+
+  switch (hovercardType) {
+    default:
+      return (
+        <HoverCardPrimitive.Trigger {...props}>
+          {children}
+        </HoverCardPrimitive.Trigger>
+      )
+  }
+}
+
+export function HoverCardXContent({ children, className, ...props }: any) {
+  const hovercardType = React.useContext(HoverCardXContext)
+  const { variant, rounded, arrow, align, sideOffset } = React.useContext(HoverCardVariantContext)
+
+  switch (hovercardType) {
+    case 'media':
+      return (
+        <HoverCardPrimitive.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            hoverCardContentVariants({ variant, rounded, arrow }),
+            className
+          )}
+          {...props}
+        >
+          <div className='space-y-2'>
+            <img
+              src={props.image}
+              alt={props.imageAlt || 'Content image'}
+              className='w-full rounded'
+            />
+            <div className='space-y-1'>
+              <p className='text-sm font-medium'>{props.title}</p>
+              <p className='text-muted-foreground text-xs'>
+                {children}
+                {props.link && (
+                  <a
+                    href={props.link}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='hover:text-foreground flex w-fit underline'
+                  >
+                    Read more
+                    <ChevronRightIcon className='size-4' />
+                  </a>
+                )}
+              </p>
+            </div>
+          </div>
+        </HoverCardPrimitive.Content>
+      )
+
+    case 'stats':
+      return (
+        <HoverCardPrimitive.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            hoverCardContentVariants({ variant, rounded, arrow }),
+            'w-fit',
+            className
+          )}
+          {...props}
+        >
+          <div className='flex items-center gap-1.5'>
+            <div className='flex flex-col gap-1'>
+              <div className='text-sm font-medium'>{props.label}</div>
+              <div className='text-xl font-semibold'>{props.value}</div>
+              <div className='text-muted-foreground text-xs'>{props.subtitle}</div>
+            </div>
+            {props.avatar && (
+              <Avatar className='size-10'>
+                <AvatarImage src={props.avatar} alt={props.avatarAlt} />
+                <AvatarFallback className='text-xs'>{props.avatarFallback}</AvatarFallback>
+              </Avatar>
+            )}
+          </div>
+        </HoverCardPrimitive.Content>
+      )
+
+    case 'project':
+      return (
+        <HoverCardPrimitive.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            hoverCardContentVariants({ variant, rounded, arrow }),
+            className
+          )}
+          {...props}
+        >
+          <div className='space-y-3'>
+            <div className='flex items-center justify-between gap-2 text-sm font-semibold'>
+              <span>{props.title}</span>
+              <span>{props.progress}%</span>
+            </div>
+            <div className='bg-secondary relative h-2 w-full overflow-hidden rounded-full'>
+              <div
+                className='bg-primary h-full transition-all'
+                style={{ width: `${props.progress}%` }}
+              />
+            </div>
+            <p className='text-sm'>{children}</p>
+            {props.startDate && (
+              <div className='text-muted-foreground flex items-center gap-2 text-xs'>
+                <CalendarIcon className='size-4' />
+                <span>{props.startDate}</span>
+              </div>
+            )}
+            {props.avatars && props.avatars.length > 0 && (
+              <div className='flex -space-x-2'>
+                {props.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>
+                ))}
+                {props.moreCount && (
+                  <Avatar className='ring-background ring-2'>
+                    <AvatarFallback className='text-xs'>+{props.moreCount}</AvatarFallback>
+                  </Avatar>
+                )}
+              </div>
+            )}
+          </div>
+        </HoverCardPrimitive.Content>
+      )
+
+    case 'alert':
+      return (
+        <HoverCardPrimitive.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            hoverCardContentVariants({ variant, rounded, arrow }),
+            'w-72',
+            className
+          )}
+          {...props}
+        >
+          <div className='flex flex-col items-center text-center'>
+            <span className='bg-destructive/10 mb-2.5 flex size-12 items-center justify-center rounded-full'>
+              <FileQuestionIcon className='text-destructive size-6' />
+            </span>
+            <div className='mb-1 text-lg font-medium'>{props.title}</div>
+            <p className='text-sm'>{children}</p>
+          </div>
+        </HoverCardPrimitive.Content>
+      )
+
+    case 'tasks':
+      return (
+        <HoverCardPrimitive.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            hoverCardContentVariants({ variant, rounded, arrow }),
+            'w-72',
+            className
+          )}
+          {...props}
+        >
+          <div className='space-y-4'>
+            <p className='text-lg font-semibold'>{props.title}</p>
+            <ul className='space-y-2.5'>
+              {props.tasks && props.tasks.map((task: any, index: number) => (
+                <li key={index} className='flex items-start gap-4'>
+                  <Avatar>
+                    <AvatarImage src={task.image} alt={task.name} />
+                    <AvatarFallback>{task.fallback}</AvatarFallback>
+                  </Avatar>
+                  <div className='flex flex-1 flex-col'>
+                    <div className='text-sm font-medium'>{task.name}</div>
+                    <p className='text-muted-foreground text-xs'>{task.designation}</p>
+                  </div>
+                  <span className='text-muted-foreground text-sm'>{task.percentage}%</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </HoverCardPrimitive.Content>
+      )
+
+    default:
+      return (
+        <HoverCardPrimitive.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            hoverCardContentVariants({ variant, rounded, arrow }),
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </HoverCardPrimitive.Content>
+      )
+  }
+}
+
+export function HoverCardXDemo() {
+  const avatars = [
+    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png', name: 'John Doe', fallback: 'JD' },
+    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', name: 'Jane Smith', fallback: 'JS' },
+    { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', name: 'Bob Johnson', fallback: 'BJ' }
+  ]
+
+  const tasks = [
+    { name: 'John Doe', designation: 'Frontend Developer', image: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png', fallback: 'JD', percentage: 85 },
+    { name: 'Jane Smith', designation: 'Backend Developer', image: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-2.png', fallback: 'JS', percentage: 92 },
+    { name: 'Bob Johnson', designation: 'UI Designer', image: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', fallback: 'BJ', percentage: 78 }
+  ]
+
+  return (
+    <div className='space-y-12 p-6 max-w-3xl mx-auto'>
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Default</h3>
+        <HoverCardX openDelay={0} closeDelay={0}>
+          <HoverCardXTrigger asChild>
+            <Button variant='link'>Hover Card Default</Button>
+          </HoverCardXTrigger>
+          <HoverCardXContent>
+            <p>This is a default hover card with simple content.</p>
+          </HoverCardXContent>
+        </HoverCardX>
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Media</h3>
+        <HoverCardX hovercard='media' openDelay={0} closeDelay={0}>
+          <HoverCardXTrigger asChild>
+            <Button variant='link'>Hover Card Media</Button>
+          </HoverCardXTrigger>
+          <HoverCardXContent
+            image='https://lp-cms-production.imgix.net/2021-01/GettyRF_450207051.jpg?width=232'
+            title='About Himalayas'
+            link='https://en.wikipedia.org/wiki/Himalayas'
+          >
+            The Great Himalayan mountain ranges in the Indian sub-continent region.
+          </HoverCardXContent>
+        </HoverCardX>
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Stats</h3>
+        <HoverCardX hovercard='stats' openDelay={0} closeDelay={0}>
+          <HoverCardXTrigger asChild>
+            <Button variant='link'>Hover Card Stats</Button>
+          </HoverCardXTrigger>
+          <HoverCardXContent
+            label='Total page views'
+            value='89,400'
+            subtitle='21% ↗︎ than last month'
+            avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png'
+            avatarAlt='Hallie Richards'
+            avatarFallback='HR'
+          />
+        </HoverCardX>
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Project</h3>
+        <HoverCardX hovercard='project' openDelay={0} closeDelay={0}>
+          <HoverCardXTrigger asChild>
+            <Button variant='link'>Hover Card Project</Button>
+          </HoverCardXTrigger>
+          <HoverCardXContent
+            title='Resume project completion'
+            progress={25}
+            startDate='Started in December 2024'
+            avatars={avatars}
+            moreCount={6}
+          >
+            Developing platform where ai will generate resume automatically Ai
+          </HoverCardXContent>
+        </HoverCardX>
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Alert</h3>
+        <HoverCardX hovercard='alert' openDelay={0} closeDelay={0}>
+          <HoverCardXTrigger asChild>
+            <Button variant='link'>Hover Card Alert</Button>
+          </HoverCardXTrigger>
+          <HoverCardXContent title='File is corrupted'>
+            It might have some virus or something that might be harmful for your device.
+          </HoverCardXContent>
+        </HoverCardX>
+      </div>
+
+      <div>
+        <h3 className='text-lg font-semibold mb-4'>Tasks</h3>
+        <HoverCardX hovercard='tasks' openDelay={0} closeDelay={0}>
+          <HoverCardXTrigger asChild>
+            <Button variant='link'>Hover Card Tasks</Button>
+          </HoverCardXTrigger>
+          <HoverCardXContent
+            title="Today's task completion"
+            tasks={tasks}
+          />
+        </HoverCardX>
+      </div>
+    </div>
+  )
+}