@catalystsoftware/ui 1.0.5 → 1.0.7

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

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