@catalystsoftware/ui 1.0.0

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

@@ -0,0 +1,396 @@
+import React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn, Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, tooltipContentVariants, Avatar, AvatarImage, AvatarFallback, Badge, Button, TsxSection } from '~/components/catalyst-ui'
+import { InfoIcon, ChevronRightIcon, CalendarIcon, FileQuestionIcon } from 'lucide-react'
+
+
+type TooltipXType = {
+  tooltip?: 'default' | 'light' | 'noArrow' | 'error' | 'icon' | 'rounded' | 'content' | 'avatar' | 'badge'
+  variant?: string
+}
+
+const TooltipXContext = React.createContext<TooltipXType>({
+  tooltip: "default",
+  variant: "default",
+})
+
+const useTooltipXContext = () => {
+  const context = React.useContext(AccordionContext)
+  if (!context) {
+    throw new Error("Accordion components must be used within Accordion")
+  }
+  return context
+}
+
+export function TooltipX({ tooltip = 'default', variant, arrow, rounded, ...props }: any) {
+  return (
+    <TooltipXContext.Provider value={{ variant, arrow, rounded }}>
+      <Tooltip {...props} />
+    </TooltipXContext.Provider>
+  )
+}
+
+export function TooltipXTrigger({ ...props }: any) {
+  const { variant, arrow, rounded, tooltip } = useTooltipXContext()
+
+  switch (tooltip) {
+    default:
+      return <TooltipTrigger {...props} />
+  }
+}
+
+export function TooltipXContent({ children, ...props }: any) {
+  const { variant, arrow, rounded, tooltip } = useTooltipXContext()
+
+  switch (tooltip) {
+    case 'light':
+      return (
+        <TooltipContent
+          className={cn(tooltipContentVariants({ variant, arrow, rounded }), 'bg-neutral-200 text-neutral-950 dark:bg-neutral-50 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200 dark:[&_svg]:bg-neutral-50 dark:[&_svg]:fill-neutral-50', props.className)}
+          {...props}
+        >
+          {children}
+        </TooltipContent>
+      )
+
+    case 'noArrow':
+      return (
+        <TooltipContent
+          className={cn(tooltipContentVariants({ variant, arrow, rounded }), '[&_svg]:invisible', props.className)}
+          {...props}
+        >
+          {children}
+        </TooltipContent>
+      )
+
+    case 'error':
+      return (
+        <TooltipContent
+          className={cn(tooltipContentVariants({ variant, arrow, rounded }), 'bg-destructive [&_svg]:bg-destructive [&_svg]:fill-destructive text-white', props.className)}
+          {...props}
+        >
+          {children}
+        </TooltipContent>
+      )
+
+    case 'icon':
+      return (
+        <TooltipContent
+          className={cn(tooltipContentVariants({ variant, arrow, rounded }), 'max-w-64 text-pretty', props.className)}
+          {...props}
+        >
+          <div className='flex items-center gap-1.5'>
+            <InfoIcon className='size-4' />
+            <p>{children}</p>
+          </div>
+        </TooltipContent>
+      )
+
+    case 'rounded':
+      return (
+        <TooltipContent
+          className={cn(tooltipContentVariants({ variant, arrow, rounded }), 'rounded-full', props.className)}
+          {...props}
+        >
+          {children}
+        </TooltipContent>
+      )
+
+    case 'content':
+      return (
+        <TooltipContent
+          className={cn(tooltipContentVariants({ variant, arrow, rounded }), 'max-w-64 py-3 text-pretty', props.className)}
+          {...props}
+        >
+          <div className='space-y-1'>
+            <div className='flex items-center gap-2'>
+              <InfoIcon className='size-4' />
+              <p className='text-sm font-medium'>{props.title}</p>
+            </div>
+            <p className='text-background/80'>{children}</p>
+          </div>
+        </TooltipContent>
+      )
+
+    case 'avatar':
+      return (
+        <TooltipContent className={cn(tooltipContentVariants({ variant, arrow, rounded }), props.className)} {...props}>
+          <div className='flex items-center gap-1.5'>
+            <Avatar className='size-5'>
+              <AvatarImage src={props.avatar} alt={props.name} />
+              <AvatarFallback className='text-xs'>{props.name?.[0]}</AvatarFallback>
+            </Avatar>
+            <p className='font-medium'>{props.name}</p>
+          </div>
+        </TooltipContent>
+      )
+
+    case 'badge':
+      return (
+        <TooltipContent className={cn(tooltipContentVariants({ variant, arrow, rounded }), props.className)} {...props}>
+          <div className='flex items-center gap-2'>
+            <p>{children}</p>
+            <Badge variant='secondary' className='px-1.5 py-px'>
+              {props.badgeText}
+            </Badge>
+          </div>
+        </TooltipContent>
+      )
+
+    default:
+      return <TooltipContent className={cn(tooltipContentVariants({ variant, arrow, rounded }), props.className)} {...props}>{children}</TooltipContent>
+  }
+}
+
+export function TooltipXDemo() {
+  return (
+    <TooltipProvider>
+      <div className="space-y-12 p-6 max-w-3xl mx-auto">
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Default</h3>
+          <TooltipX>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Default</Button>
+            </TooltipXTrigger>
+            <TooltipXContent>
+              <p>This is a simple tooltip</p>
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Default"
+            code={`<TooltipX>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Default</Button>
+  </TooltipXTrigger>
+  <TooltipXContent>
+    <p>This is a simple tooltip</p>
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Light</h3>
+          <TooltipX tooltip='light'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Light</Button>
+            </TooltipXTrigger>
+            <TooltipXContent>
+              <p>This tooltip will be always light</p>
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Light"
+            code={`<TooltipX tooltip='light'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Light</Button>
+  </TooltipXTrigger>
+  <TooltipXContent>
+    <p>This tooltip will be always light</p>
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">No Arrow</h3>
+          <TooltipX tooltip='noArrow'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>No arrow</Button>
+            </TooltipXTrigger>
+            <TooltipXContent>
+              <p>This tooltip don&apos;t have arrow</p>
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX No Arrow"
+            code={`<TooltipX tooltip='noArrow'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>No arrow</Button>
+  </TooltipXTrigger>
+  <TooltipXContent>
+    <p>This tooltip don't have arrow</p>
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Error</h3>
+          <TooltipX tooltip='error'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Error</Button>
+            </TooltipXTrigger>
+            <TooltipXContent>
+              <p>This is an error tooltip</p>
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Error"
+            code={`<TooltipX tooltip='error'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Error</Button>
+  </TooltipXTrigger>
+  <TooltipXContent>
+    <p>This is an error tooltip</p>
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Icon</h3>
+          <TooltipX tooltip='icon'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Icon</Button>
+            </TooltipXTrigger>
+            <TooltipXContent>
+              This tooltip has an icon
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Icon"
+            code={`<TooltipX tooltip='icon'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Icon</Button>
+  </TooltipXTrigger>
+  <TooltipXContent>
+    This tooltip has an icon
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Rounded</h3>
+          <TooltipX tooltip='rounded'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Rounded</Button>
+            </TooltipXTrigger>
+            <TooltipXContent>
+              <p>This tooltip is rounded</p>
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Rounded"
+            code={`<TooltipX tooltip='rounded'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Rounded</Button>
+  </TooltipXTrigger>
+  <TooltipXContent>
+    <p>This tooltip is rounded</p>
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Content</h3>
+          <TooltipX tooltip='content'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Content</Button>
+            </TooltipXTrigger>
+            <TooltipXContent title='Accessibility First'>
+              Tooltips should supplement the UI, not hide critical information. Ensure all important content is visible without requiring tooltip interaction.
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Content"
+            code={`<TooltipX tooltip='content'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Content</Button>
+  </TooltipXTrigger>
+  <TooltipXContent title='Accessibility First'>
+    Tooltips should supplement the UI, not hide critical information.
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Avatar</h3>
+          <TooltipX tooltip='avatar'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Avatar</Button>
+            </TooltipXTrigger>
+            <TooltipXContent avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' name='Hallie Richards' />
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Avatar"
+            code={`<TooltipX tooltip='avatar'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Avatar</Button>
+  </TooltipXTrigger>
+  <TooltipXContent 
+    avatar='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' 
+    name='Hallie Richards' 
+  />
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Badge</h3>
+          <TooltipX tooltip='badge'>
+            <TooltipXTrigger asChild>
+              <Button variant='outline' size='sm'>Badge</Button>
+            </TooltipXTrigger>
+            <TooltipXContent badgeText='Trending'>
+              Team plan: $99/month per user.
+            </TooltipXContent>
+          </TooltipX>
+          <TsxSection
+            title="TooltipX Badge"
+            code={`<TooltipX tooltip='badge'>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Badge</Button>
+  </TooltipXTrigger>
+  <TooltipXContent badgeText='Trending'>
+    Team plan: $99/month per user.
+  </TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-4">Directions</h3>
+          <div className='flex flex-wrap gap-2'>
+            <TooltipX>
+              <TooltipXTrigger asChild>
+                <Button variant='outline' size='sm'>Left</Button>
+              </TooltipXTrigger>
+              <TooltipXContent side='left'>Tooltip on left</TooltipXContent>
+            </TooltipX>
+            <TooltipX>
+              <TooltipXTrigger asChild>
+                <Button variant='outline' size='sm'>Top</Button>
+              </TooltipXTrigger>
+              <TooltipXContent side='top'>Tooltip on top</TooltipXContent>
+            </TooltipX>
+            <TooltipX>
+              <TooltipXTrigger asChild>
+                <Button variant='outline' size='sm'>Bottom</Button>
+              </TooltipXTrigger>
+              <TooltipXContent side='bottom'>Tooltip on bottom</TooltipXContent>
+            </TooltipX>
+            <TooltipX>
+              <TooltipXTrigger asChild>
+                <Button variant='outline' size='sm'>Right</Button>
+              </TooltipXTrigger>
+              <TooltipXContent side='right'>Tooltip on right</TooltipXContent>
+            </TooltipX>
+          </div>
+          <TsxSection
+            title="TooltipX Directions"
+            code={`<TooltipX>
+  <TooltipXTrigger asChild>
+    <Button variant='outline' size='sm'>Left</Button>
+  </TooltipXTrigger>
+  <TooltipXContent side='left'>Tooltip on left</TooltipXContent>
+</TooltipX>`}
+          />
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}