The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 5 |
| 6 | import { liquidMenuSurfaceClasses } from "./liquid-menu-surface"; |
| 7 | import { cn } from "../lib/utils"; |
| 8 |
| 9 | function TooltipProvider({ |
| 10 | delayDuration = 0, |
| 11 | ...props |
| 12 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) { |
| 13 | return ( |
| 14 | <TooltipPrimitive.Provider |
| 15 | data-slot="tooltip-provider" |
| 16 | delayDuration={delayDuration} |
| 17 | {...props} |
| 18 | /> |
| 19 | ); |
| 20 | } |
| 21 |
| 22 | function Tooltip({ |
| 23 | ...props |
| 24 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) { |
| 25 | return <TooltipPrimitive.Root data-slot="tooltip" {...props} />; |
| 26 | } |
| 27 |
| 28 | function TooltipTrigger({ |
| 29 | ...props |
| 30 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) { |
| 31 | return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />; |
| 32 | } |
| 33 |
| 34 | function TooltipContent({ |
| 35 | className, |
| 36 | sideOffset = 0, |
| 37 | children, |
| 38 | ...props |
| 39 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) { |
| 40 | return ( |
| 41 | <TooltipPrimitive.Portal> |
| 42 | <TooltipPrimitive.Content |
| 43 | data-slot="tooltip-content" |
| 44 | sideOffset={sideOffset} |
| 45 | className={cn( |
| 46 | "relative z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) overflow-hidden px-3 py-1.5 text-xs duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]", |
| 47 | liquidMenuSurfaceClasses, |
| 48 | "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 **:data-[slot=kbd]:rounded-4xl data-[state$=-open]:animate-in data-[state$=-open]:fade-in-0 data-[state$=-open]:zoom-in-95", |
| 49 | className, |
| 50 | )} |
| 51 | {...props} |
| 52 | > |
| 53 | {children} |
| 54 | </TooltipPrimitive.Content> |
| 55 | </TooltipPrimitive.Portal> |
| 56 | ); |
| 57 | } |
| 58 |
| 59 | export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }; |
| 60 |
