Pixelact Tooltip

1import type * as React from "react";
2import { type VariantProps, cva } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4import {
5  Tooltip as ShadcnTooltip,
6  TooltipProvider as ShadcnTooltipProvider,
7  TooltipTrigger as ShadcnTooltipTrigger,
8} from "@/components/ui/tooltip";
9import * as TooltipPrimitive from "@radix-ui/react-tooltip";
10 
11import "@/components/ui/pixelact-ui/styles/styles.css";
12 
13export const tooltipVariants = cva(
14  "bg-background text-foreground shadow-(--pixel-box-shadow) box-shadow-margin rounded-none",
15  {
16    variants: {
17      font: {
18        normal: "",
19        pixel: "pixel-font",
20      },
21    },
22    defaultVariants: {
23      font: "pixel",
24    },
25  }
26);
27 
28export interface TooltipContentProps
29  extends React.ComponentProps<typeof TooltipPrimitive.Content>,
30    VariantProps<typeof tooltipVariants> {
31  font?: "normal" | "pixel";
32}
33 
34function TooltipContent({
35  className,
36  children,
37  sideOffset = 10,
38  font,
39  ...props
40}: TooltipContentProps) {
41  return (
42    <TooltipPrimitive.Portal>
43      <TooltipPrimitive.Content
44        data-slot="tooltip-content"
45        sideOffset={sideOffset}
46        className={cn(
47          "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) px-3 py-2 text-xs text-balance",
48          tooltipVariants({ font }),
49          className
50        )}
51        {...props}
52      >
53        {children}
54      </TooltipPrimitive.Content>
55    </TooltipPrimitive.Portal>
56  );
57}
58 
59export interface TooltipProps
60  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltip>,
61    VariantProps<typeof tooltipVariants> {}
62 
63function Tooltip({ children, ...props }: TooltipProps) {
64  return (
65    <ShadcnTooltip data-slot="tooltip" {...props}>
66      {children}
67    </ShadcnTooltip>
68  );
69}
70 
71export interface TooltipProviderProps
72  extends React.ComponentPropsWithoutRef<typeof ShadcnTooltipProvider> {
73  delayDuration?: number;
74}
75 
76function TooltipProvider({
77  children,
78  delayDuration = 0,
79  ...props
80}: TooltipProviderProps) {
81  return (
82    <ShadcnTooltipProvider delayDuration={delayDuration} {...props}>
83      {children}
84    </ShadcnTooltipProvider>
85  );
86}
87 
88function TooltipTrigger({
89  children,
90  asChild = true,
91  ...props
92// … truncated