Tooltip

export * from "./tooltip";
export * as Tooltip from "./namespace";
export * from "./styles";

export {
  TooltipRoot as Root,
  TooltipContent as Content,
  TooltipArrow as Arrow,
} from "./tooltip";

import { cva } from "~/lib/cva";
 
export const TooltipStyles = {
  Content: cva({
    base: [
      "group motion-duration-150 rounded-lg border bg-popover px-3 py-1.5 text-popover-fg text-sm will-change-transform dark:shadow-none",
      "entering:placement-left:motion-translate-x-in-[0.5rem]",
      "entering:placement-right:motion-translate-x-in-[-0.5rem]",
      "entering:placement-top:motion-translate-y-in-[0.5rem]",
      "entering:placement-bottom:motion-translate-y-in-[-0.5rem]",
      "entering:motion-opacity-in",
      "exiting:motion-opacity-out",
    ],
  }),
  Arrow: cva({
    base: [
      "group-placement-left:-rotate-90 fill-popover stroke-border group-placement-bottom:rotate-180 group-placement-right:rotate-90",
    ],
  }),
};

"use client";
 
import {
  OverlayArrow,
  Tooltip as TooltipPrimitive,
  TooltipTrigger,
} from "react-aria-components";
import { TooltipStyles } from "./styles";
 
export interface TooltipRootProps
  extends React.ComponentProps<typeof TooltipTrigger> {}
export const TooltipRoot = TooltipTrigger;
 
export interface TooltipContentProps
  extends React.ComponentProps<typeof TooltipPrimitive> {}
 
export function TooltipContent({
  className,
  offset = 10,
  ...props
}: TooltipContentProps) {
  return (
    <TooltipPrimitive
      {...props}
      offset={offset}
      className={(values) =>
        TooltipStyles.Content({
          className:
            typeof className === "function" ? className(values) : className,
        })
      }
    />
  );
}
 
export interface TooltipArrowProps
  extends React.ComponentProps<typeof OverlayArrow> {}
 
export function TooltipArrow({ className, ...props }: TooltipArrowProps) {
  return (
    <OverlayArrow {...props}>
      <svg
        aria-hidden="true"
        width={12}
        height={12}
        viewBox="0 0 12 12"
        className={TooltipStyles.Arrow({ className })}
      >
        <path d="M0 0 L6 6 L12 0" />
      </svg>
    </OverlayArrow>
  );
}