Tooltip component

- Issue: https://git.chen.so/tina-next-ts/i/79e6f1e7778843269ef7ec34437c97b32e34f621

Author: yumin-chen

app/components/Tooltip/index.tsx

@@ -0,0 +1 @@
+export * from "./tooltip";

app/components/Tooltip/recipes/tooltip.ts

@@ -0,0 +1,27 @@
+import { tooltipAnatomy } from "@ark-ui/anatomy";
+import { defineSlotRecipe } from "@pandacss/dev";
+
+export const tooltip = defineSlotRecipe({
+	className: "tooltip",
+	slots: tooltipAnatomy.keys(),
+	base: {
+		content: {
+			background: "gray.a12",
+			borderRadius: "l2",
+			boxShadow: "sm",
+			color: "bg.default",
+			fontWeight: "semibold",
+			px: "3",
+			py: "2",
+			textStyle: "xs",
+			maxWidth: "2xs",
+			zIndex: "tooltip",
+			_open: {
+				animation: "fadeIn 0.25s ease-out",
+			},
+			_closed: {
+				animation: "fadeOut 0.2s ease-out",
+			},
+		},
+	},
+});

app/components/Tooltip/styled/tooltip.tsx

@@ -0,0 +1,45 @@
+"use client";
+import type { Assign } from "@ark-ui/react";
+import { Tooltip } from "@ark-ui/react/tooltip";
+import { type TooltipVariantProps, tooltip } from "styled-system/recipes";
+import type { ComponentProps, HTMLStyledProps } from "styled-system/types";
+import { createStyleContext } from "./utils/create-style-context";
+
+const { withRootProvider, withContext } = createStyleContext(tooltip);
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>;
+export const RootProvider = withRootProvider<
+	Assign<Tooltip.RootProviderProps, TooltipVariantProps>
+>(Tooltip.RootProvider);
+
+export type RootProps = ComponentProps<typeof Root>;
+export const Root = withRootProvider<
+	Assign<Tooltip.RootProps, TooltipVariantProps>
+>(Tooltip.Root);
+
+export const Arrow = withContext<
+	HTMLDivElement,
+	Assign<HTMLStyledProps<"div">, Tooltip.ArrowBaseProps>
+>(Tooltip.Arrow, "arrow");
+
+export const ArrowTip = withContext<
+	HTMLDivElement,
+	Assign<HTMLStyledProps<"div">, Tooltip.ArrowTipBaseProps>
+>(Tooltip.ArrowTip, "arrowTip");
+
+export const Content = withContext<
+	HTMLDivElement,
+	Assign<HTMLStyledProps<"div">, Tooltip.ContentBaseProps>
+>(Tooltip.Content, "content");
+
+export const Positioner = withContext<
+	HTMLDivElement,
+	Assign<HTMLStyledProps<"div">, Tooltip.PositionerBaseProps>
+>(Tooltip.Positioner, "positioner");
+
+export const Trigger = withContext<
+	HTMLButtonElement,
+	Assign<HTMLStyledProps<"button">, Tooltip.TriggerBaseProps>
+>(Tooltip.Trigger, "trigger");
+
+export { TooltipContext as Context } from "@ark-ui/react/tooltip";

app/components/Tooltip/styled/utils/create-style-context.tsx

@@ -0,0 +1,105 @@
+import {
+	type ElementType,
+	type ForwardRefExoticComponent,
+	type PropsWithoutRef,
+	type RefAttributes,
+	createContext,
+	forwardRef,
+	useContext,
+} from "react";
+import { cx } from "styled-system/css";
+import { type StyledComponent, isCssProperty, styled } from "styled-system/jsx";
+
+type Props = Record<string, unknown>;
+type Recipe = {
+	(props?: Props): Props;
+	splitVariantProps: (props: Props) => [Props, Props];
+};
+type Slot<R extends Recipe> = keyof ReturnType<R>;
+type Options = { forwardProps?: string[] };
+
+const shouldForwardProp = (
+	prop: string,
+	variantKeys: string[],
+	options: Options = {},
+) =>
+	options.forwardProps?.includes(prop) ||
+	(!variantKeys.includes(prop) && !isCssProperty(prop));
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+	const StyleContext = createContext<Record<Slot<R>, string> | null>(null);
+
+	const withRootProvider = <P extends {}>(Component: ElementType) => {
+		const StyledComponent = (props: P) => {
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const slotStyles = recipe(variantProps) as Record<Slot<R>, string>;
+
+			return (
+				<StyleContext.Provider value={slotStyles}>
+					<Component {...otherProps} />
+				</StyleContext.Provider>
+			);
+		};
+		return StyledComponent;
+	};
+
+	const withProvider = <T, P extends { className?: string | undefined }>(
+		Component: ElementType,
+		slot: Slot<R>,
+		options?: Options,
+	): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+		const StyledComponent = styled(
+			Component,
+			{},
+			{
+				shouldForwardProp: (prop, variantKeys) =>
+					shouldForwardProp(prop, variantKeys, options),
+			},
+		) as StyledComponent<ElementType>;
+		const StyledSlotProvider = forwardRef<T, P>((props, ref) => {
+			const [variantProps, otherProps] = recipe.splitVariantProps(props);
+			const slotStyles = recipe(variantProps) as Record<Slot<R>, string>;
+
+			return (
+				<StyleContext.Provider value={slotStyles}>
+					<StyledComponent
+						{...otherProps}
+						ref={ref}
+						className={cx(slotStyles?.[slot], props.className)}
+					/>
+				</StyleContext.Provider>
+			);
+		});
+
+		StyledSlotProvider.displayName = Component.displayName || Component.name;
+
+		return StyledSlotProvider;
+	};
+
+	const withContext = <T, P extends { className?: string | undefined }>(
+		Component: ElementType,
+		slot: Slot<R>,
+	): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> => {
+		const StyledComponent = styled(Component);
+		const StyledSlotComponent = forwardRef<T, P>((props, ref) => {
+			const slotStyles = useContext(StyleContext);
+			return (
+				<StyledComponent
+					{...props}
+					ref={ref}
+					className={cx(slotStyles?.[slot], props.className)}
+				/>
+			);
+		});
+
+		StyledSlotComponent.displayName = Component.displayName || Component.name;
+
+		return StyledSlotComponent;
+	};
+
+	return {
+		withRootProvider,
+		withProvider,
+		withContext,
+	};
+};

app/components/Tooltip/tooltip.tsx

@@ -0,0 +1 @@
+export * as Tooltip from "./styled/tooltip";