Spaces:
Build error
Build error
File size: 2,722 Bytes
0bfe2e3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
'use client';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { cva } from 'class-variance-authority';
import * as React from 'react';
import { cn, defineStyleAnatomy } from '../core/styling';
/* -------------------------------------------------------------------------------------------------
* Anatomy
* -----------------------------------------------------------------------------------------------*/
export const TooltipAnatomy = defineStyleAnatomy({
root: cva([
'UI-Tooltip__root',
'z-50 overflow-hidden rounded-[--radius] px-3 py-1.5 text-sm shadow-md animate-in fade-in-50',
'bg-gray-800 text-white',
'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1',
'data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
]),
});
/* -------------------------------------------------------------------------------------------------
* Tooltip
* -----------------------------------------------------------------------------------------------*/
export type TooltipProps = React.ComponentPropsWithoutRef<
typeof TooltipPrimitive.Content
> &
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & {
/**
* The trigger that toggles the tooltip.
* - Passed props: `data-state` ("closed" | "delayed-open" | "instant-open")
*/
trigger: React.ReactElement;
};
export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
(props, ref) => {
const {
children,
className,
trigger,
// Root
delayDuration = 50,
disableHoverableContent,
defaultOpen,
open,
onOpenChange,
...rest
} = props;
return (
<TooltipProvider>
<TooltipPrimitive.Root
delayDuration={delayDuration}
disableHoverableContent={disableHoverableContent}
defaultOpen={defaultOpen}
open={open}
onOpenChange={onOpenChange}
>
<TooltipPrimitive.Trigger asChild>{trigger}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
ref={ref}
className={cn(TooltipAnatomy.root(), className)}
{...rest}
>
{children}
</TooltipPrimitive.Content>
</TooltipPrimitive.Root>
</TooltipProvider>
);
}
);
Tooltip.displayName = 'Tooltip';
/* -------------------------------------------------------------------------------------------------
* TooltipProvider
* -----------------------------------------------------------------------------------------------*/
/**
* Wraps your app to provide global functionality to your tooltips.
*/
export const TooltipProvider = TooltipPrimitive.Provider;
|