// Tremor Raw Tooltip [v0.0.0]
import React from "react"import * as TooltipPrimitives from "@radix-ui/react-tooltip"
import { cx } from "@/lib/utils"
interface TooltipProps  extends Omit<TooltipPrimitives.TooltipContentProps, "content" | "onClick">,    Pick<      TooltipPrimitives.TooltipProps,      "open" | "defaultOpen" | "onOpenChange" | "delayDuration"    > {  content: React.ReactNode  onClick?: React.MouseEventHandler<HTMLButtonElement>  side?: "bottom" | "left" | "top" | "right"  showArrow?: boolean  triggerAsChild?: boolean}
const Tooltip = React.forwardRef<  React.ElementRef<typeof TooltipPrimitives.Content>,  TooltipProps>(  (    {      children,      className,      content,      delayDuration,      defaultOpen,      open,      onClick,      onOpenChange,      showArrow = true,      side,      sideOffset = 10,      triggerAsChild = false,      ...props    }: TooltipProps,    forwardedRef,  ) => {    return (      <TooltipPrimitives.Provider delayDuration={150}>        <TooltipPrimitives.Root          open={open}          defaultOpen={defaultOpen}          onOpenChange={onOpenChange}          delayDuration={delayDuration}        >          <TooltipPrimitives.Trigger onClick={onClick} asChild={triggerAsChild}>            {children}          </TooltipPrimitives.Trigger>          <TooltipPrimitives.Portal>            <TooltipPrimitives.Content              ref={forwardedRef}              side={side}              sideOffset={sideOffset}              align="center"              className={cx(                // base                "max-w-60 select-none rounded-md px-2.5 py-1.5 text-sm leading-5 shadow-md",                // text color                "text-gray-50 dark:text-gray-900",                // background color                "bg-gray-900 dark:bg-gray-50",                // transition                "will-change-[transform,opacity]",                "data-[side=bottom]:animate-slideDownAndFade data-[side=left]:animate-slideLeftAndFade data-[side=right]:animate-slideRightAndFade data-[side=top]:animate-slideUpAndFade data-[state=closed]:animate-hide",                className,              )}              {...props}            >              {content}              {showArrow ? (                <TooltipPrimitives.Arrow                  className="border-none fill-gray-900 dark:fill-gray-50"                  width={12}                  height={7}                  aria-hidden="true"                />              ) : null}            </TooltipPrimitives.Content>          </TooltipPrimitives.Portal>        </TooltipPrimitives.Root>      </TooltipPrimitives.Provider>    )  },)
export { Tooltip, type TooltipProps }

import type { Config } from 'tailwindcss';export default {  // ...  theme: {    extend: {      keyframes: {        hide: {          from: { opacity: "1" },          to: { opacity: "0" },        },        slideDownAndFade: {          from: { opacity: "0", transform: "translateY(-6px)" },          to: { opacity: "1", transform: "translateY(0)" },        },        slideLeftAndFade: {          from: { opacity: "0", transform: "translateX(6px)" },          to: { opacity: "1", transform: "translateX(0)" },        },        slideUpAndFade: {          from: { opacity: "0", transform: "translateY(6px)" },          to: { opacity: "1", transform: "translateY(0)" },        },        slideRightAndFade: {          from: { opacity: "0", transform: "translateX(-6px)" },          to: { opacity: "1", transform: "translateX(0)" },        },      },      animation: {        hide: "hide 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideDownAndFade:          "slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideLeftAndFade:          "slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideUpAndFade: "slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideRightAndFade:          "slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      },    },  },  // ...} satisfies Config;