feat: redesign tooltips

app/components/Card.tsx

@@ -12,7 +12,7 @@ function Card({ variant = 'raised', ...props }: Props) {
 		<div
 			{...props}
 			className={cn(
-				'w-full max-w-md overflow-hidden rounded-3xl p-5',
+				'w-full max-w-md rounded-3xl p-5',
 				variant === 'flat'
 					? 'bg-transparent shadow-none'
 					: 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-sm',

app/components/Chip.tsx

@@ -1,21 +1,32 @@
+import React from 'react';
 import cn from '~/utils/cn';
 
 export interface ChipProps {
 	text: string;
 	className?: string;
+	leftIcon?: React.ReactNode;
+	rightIcon?: React.ReactNode;
 }
 
-export default function Chip({ text, className }: ChipProps) {
+export default function Chip({
+	text,
+	className,
+	leftIcon,
+	rightIcon,
+}: ChipProps) {
 	return (
 		<span
 			className={cn(
 				'text-xs px-2 py-0.5 rounded-full',
 				'text-headplane-700 dark:text-headplane-100',
 				'bg-headplane-100 dark:bg-headplane-700',
+				leftIcon || rightIcon ? 'inline-flex items-center gap-x-1' : '',
 				className,
 			)}
 		>
+			{leftIcon}
 			{text}
+			{rightIcon}
 		</span>
 	);
 }

app/components/Dialog.tsx

@@ -156,7 +156,7 @@ function DModal(props: DModalProps) {
 				{...underlayProps}
 				aria-hidden="true"
 				className={cn(
-					'fixed inset-0 h-screen w-screen z-50',
+					'fixed inset-0 h-screen w-screen z-20',
 					'flex items-center justify-center',
 					'bg-headplane-900/15 dark:bg-headplane-900/30',
 					'entering:animate-in exiting:animate-out',
@@ -167,7 +167,7 @@ function DModal(props: DModalProps) {
 			<div
 				{...modalProps}
 				className={cn(
-					'fixed inset-0 h-screen w-screen z-50',
+					'fixed inset-0 h-screen w-screen z-20',
 					'flex items-center justify-center',
 				)}
 			>

app/components/Footer.tsx

@@ -1,5 +1,4 @@
 import Link from '~/components/Link';
-import Tooltip from '~/components/Tooltip';
 import cn from '~/utils/cn';
 
 declare global {

app/components/Popover.tsx

@@ -34,7 +34,7 @@ export default function Popover(props: PopoverProps) {
 				{...popoverProps}
 				ref={ref}
 				className={cn(
-					'z-10 shadow-sm rounded-xl overflow-hidden',
+					'z-10 shadow-sm rounded-xl',
 					'bg-white dark:bg-headplane-900',
 					'border border-headplane-200 dark:border-headplane-800',
 					className,

app/components/Tooltip.tsx

@@ -1,37 +1,80 @@
-import type { ReactNode } from 'react';
+import React, { cloneElement, useRef } from 'react';
 import {
-	Button as AriaButton,
-	Tooltip as AriaTooltip,
-	TooltipTrigger,
-} from 'react-aria-components';
+	AriaTooltipProps,
+	mergeProps,
+	useTooltip,
+	useTooltipTrigger,
+} from 'react-aria';
+import { TooltipTriggerState, useTooltipTriggerState } from 'react-stately';
 import cn from '~/utils/cn';
 
-interface Props {
-	children: ReactNode;
-	className?: string;
+export interface TooltipProps extends AriaTooltipProps {
+	children: [React.ReactElement, React.ReactElement<TooltipBodyProps>];
 }
 
-function Tooltip({ children }: Props) {
-	return <TooltipTrigger delay={0}>{children}</TooltipTrigger>;
-}
+function Tooltip(props: TooltipProps) {
+	const state = useTooltipTriggerState({
+		...props,
+		delay: 0,
+		closeDelay: 0,
+	});
 
-function Button(props: Parameters<typeof AriaButton>[0]) {
-	return <AriaButton {...props} />;
-}
+	const ref = useRef<HTMLButtonElement | null>(null);
+	const { triggerProps, tooltipProps } = useTooltipTrigger(
+		{
+			...props,
+			delay: 0,
+			closeDelay: 0,
+		},
+		state,
+		ref,
+	);
 
-function Body({ children, className }: Props) {
+	const [component, body] = props.children;
 	return (
-		<AriaTooltip
-			className={cn(
-				'text-sm max-w-xs p-2 rounded-lg mb-2',
-				'bg-white dark:bg-ui-900 drop-shadow-sm',
-				'border border-gray-200 dark:border-zinc-700',
-				className,
-			)}
-		>
-			{children}
-		</AriaTooltip>
+		<span className="relative">
+			<button
+				ref={ref}
+				{...triggerProps}
+				className="flex items-center justify-center"
+			>
+				{component}
+			</button>
+			{state.isOpen &&
+				cloneElement(body, {
+					...tooltipProps,
+					state,
+				})}
+		</span>
 	);
 }
 
-export default Object.assign(Tooltip, { Button, Body });
+interface TooltipBodyProps extends AriaTooltipProps {
+	children: React.ReactNode;
+	state?: TooltipTriggerState;
+	className?: string;
+}
+
+function Body({ state, className, ...props }: TooltipBodyProps) {
+	const { tooltipProps } = useTooltip(props, state);
+	return (
+		<span
+			{...mergeProps(props, tooltipProps)}
+			className={cn(
+				'absolute z-50 p-3 top-full mt-1',
+				'outline-none rounded-3xl text-sm w-48',
+				'bg-white dark:bg-headplane-950',
+				'text-black dark:text-white',
+				'shadow-lg dark:shadow-md rounded-xl',
+				'border border-headplane-100 dark:border-headplane-800',
+				className,
+			)}
+		>
+			{props.children}
+		</span>
+	);
+}
+
+export default Object.assign(Tooltip, {
+	Body,
+});