"use client";
import { cn, extractText } from "./index3.js";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tooltip } from "@base-ui/react/tooltip";
//#region src/components/organisms/overlays/Tooltip/Tooltip.tsx
var tooltipVariants = cva("data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:animate-none z-50 w-fit max-w-xs origin-(--transform-origin) px-3 py-1.5 text-xs shadow-[0_4px_12px_-4px_rgba(0,0,0,0.12)]", {
	variants: {
		variant: {
			primary: "bg-foreground text-background",
			secondary: "bg-secondary text-secondary-foreground border border-border shadow-sm",
			info: "bg-info text-info-foreground",
			success: "bg-success text-success-foreground",
			warning: "bg-warning text-warning-foreground",
			destructive: "bg-destructive text-destructive-foreground"
		},
		shape: {
			default: "rounded-md",
			rounded: "rounded-full"
		}
	},
	defaultVariants: {
		variant: "primary",
		shape: "default"
	}
});
var arrowVariants = cva("size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5", {
	variants: { variant: {
		primary: "bg-foreground fill-foreground",
		secondary: "bg-secondary fill-secondary",
		info: "bg-info fill-info",
		success: "bg-success fill-success",
		warning: "bg-warning fill-warning",
		destructive: "bg-destructive fill-destructive"
	} },
	defaultVariants: { variant: "primary" }
});
function TooltipProvider({ delay = 0, ...props }) {
	return /* @__PURE__ */ jsx(Tooltip.Provider, {
		"data-slot": "tooltip-provider",
		delay,
		...props
	});
}
function TooltipRoot(props) {
	return /* @__PURE__ */ jsx(Tooltip.Root, {
		"data-slot": "tooltip",
		...props
	});
}
function TooltipTrigger(props) {
	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
		"data-slot": "tooltip-trigger",
		...props
	});
}
function TooltipPopup({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, variant = "primary", shape = "default", hideArrow = false, children, ...props }) {
	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
		align,
		alignOffset,
		side,
		sideOffset,
		className: "isolate z-50",
		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
			"data-slot": "tooltip-popup",
			className: cn(tooltipVariants({
				variant,
				shape
			}), className),
			...props,
			children: [children, !hideArrow && /* @__PURE__ */ jsx(Tooltip.Arrow, { className: arrowVariants({ variant }) })]
		})
	}) });
}
function TooltipIcon({ children, className }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "tooltip-icon",
		className: cn("shrink-0 [&>svg]:size-4", className),
		children
	});
}
TooltipIcon.displayName = "Tooltip.Icon";
function TooltipAvatar({ src, alt, children, className }) {
	if (children) return /* @__PURE__ */ jsx("span", {
		"data-slot": "tooltip-avatar",
		className: cn("shrink-0", className),
		children
	});
	return /* @__PURE__ */ jsx("img", {
		"data-slot": "tooltip-avatar",
		src,
		alt,
		className: cn("size-4 shrink-0 rounded-full object-cover", className)
	});
}
TooltipAvatar.displayName = "Tooltip.Avatar";
function TooltipContent({ children, className }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "tooltip-content",
		className: cn("flex flex-col gap-0.5", className),
		children
	});
}
TooltipContent.displayName = "Tooltip.Content";
function TooltipTitle({ children, className }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "tooltip-title",
		className: cn("text-xs font-semibold leading-4", className),
		children
	});
}
TooltipTitle.displayName = "Tooltip.Title";
function TooltipSubtitle({ children, className, variant = "primary" }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "tooltip-subtitle",
		className: cn("text-xs font-medium leading-4", variant === "secondary" ? "text-muted-foreground" : "text-inherit opacity-70", className),
		children
	});
}
TooltipSubtitle.displayName = "Tooltip.Subtitle";
function TooltipBadge({ children, className }) {
	return /* @__PURE__ */ jsx("span", {
		"data-slot": "tooltip-badge",
		className: cn("shrink-0", className),
		children
	});
}
TooltipBadge.displayName = "Tooltip.Badge";
function TooltipImage({ src, alt, layout = "vertical", className }) {
	return /* @__PURE__ */ jsx("img", {
		"data-slot": "tooltip-image",
		src,
		alt,
		className: cn("rounded-md object-cover", layout === "vertical" ? "w-full h-20" : "w-20 h-14 shrink-0", className)
	});
}
TooltipImage.displayName = "Tooltip.Image";
var Tooltip$1 = ({ trigger, content, variant = "primary", shape = "default", position = "top", align = "center", delayDuration, sideOffset = 6, icon, avatar, subtitle, badge, image, imageLayout, children }) => {
	const hasRichContent = icon || avatar || subtitle || badge || image;
	const resolvedImageLayout = imageLayout ?? "vertical";
	const contentAlt = extractText(content);
	const subtitleElement = subtitle && /* @__PURE__ */ jsx(TooltipSubtitle, {
		variant,
		children: subtitle
	});
	const renderContent = () => {
		if (children) return children;
		if (image) return /* @__PURE__ */ jsxs("div", {
			className: cn("flex gap-1.5 delight-tooltip-stagger", resolvedImageLayout === "vertical" ? "flex-col" : "flex-row items-center"),
			children: [/* @__PURE__ */ jsx(TooltipImage, {
				src: image,
				alt: contentAlt,
				layout: resolvedImageLayout,
				className: "delight-tooltip-image"
			}), /* @__PURE__ */ jsxs(TooltipContent, { children: [/* @__PURE__ */ jsx(TooltipTitle, { children: content }), subtitleElement] })]
		});
		if (!hasRichContent) return content;
		return /* @__PURE__ */ jsxs("div", {
			className: "flex items-center gap-1.5 delight-tooltip-stagger",
			children: [
				avatar && (typeof avatar === "string" ? /* @__PURE__ */ jsx(TooltipAvatar, {
					src: avatar,
					alt: contentAlt
				}) : /* @__PURE__ */ jsx(TooltipAvatar, {
					alt: contentAlt,
					children: avatar
				})),
				icon && /* @__PURE__ */ jsx(TooltipIcon, { children: icon }),
				/* @__PURE__ */ jsxs(TooltipContent, { children: [/* @__PURE__ */ jsx(TooltipTitle, { children: content }), subtitleElement] }),
				badge && /* @__PURE__ */ jsx(TooltipBadge, { children: badge })
			]
		});
	};
	return /* @__PURE__ */ jsx(TooltipProvider, {
		delay: delayDuration,
		children: /* @__PURE__ */ jsxs(TooltipRoot, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipPopup, {
			side: position === "none" ? "top" : position,
			align,
			sideOffset,
			variant,
			shape,
			hideArrow: position === "none",
			className: cn(hasRichContent && "p-2"),
			children: renderContent()
		})] })
	});
};
Tooltip$1.displayName = "Tooltip";
TooltipProvider.displayName = "Tooltip.Provider";
TooltipRoot.displayName = "Tooltip.Root";
TooltipTrigger.displayName = "Tooltip.Trigger";
TooltipPopup.displayName = "Tooltip.Popup";
/**
* Tooltip component with dot notation for compound parts.
*
* @example
* ```tsx
* // Simple usage (recommended for most cases)
* <Tooltip trigger={<Button>Hover me</Button>} content="Tooltip text" />
*
* // With variants
* <Tooltip trigger={<Button>Save</Button>} content="Saved!" variant="success" shape="rounded" />
*
* // With rich content
* <Tooltip trigger={<Button>Info</Button>} content="Title" icon={<InfoIcon />} subtitle="Description" />
*
* // Advanced usage with dot notation
* <Tooltip.Root>
*   <Tooltip.Trigger render={<Button>Hover me</Button>} />
*   <Tooltip.Popup variant="info">
*     <Tooltip.Icon><InfoIcon /></Tooltip.Icon>
*     <Tooltip.Content>
*       <Tooltip.Title>Title</Tooltip.Title>
*       <Tooltip.Subtitle>Description</Tooltip.Subtitle>
*     </Tooltip.Content>
*   </Tooltip.Popup>
* </Tooltip.Root>
* ```
*/
var TooltipCompound = Object.assign(Tooltip$1, {
	Root: TooltipRoot,
	Provider: TooltipProvider,
	Trigger: TooltipTrigger,
	Popup: TooltipPopup,
	Icon: TooltipIcon,
	Avatar: TooltipAvatar,
	Content: TooltipContent,
	Title: TooltipTitle,
	Subtitle: TooltipSubtitle,
	Badge: TooltipBadge,
	Image: TooltipImage
});
//#endregion
export { TooltipAvatar, TooltipBadge, TooltipCompound, TooltipContent, TooltipIcon, TooltipImage, TooltipPopup, TooltipProvider, TooltipRoot, TooltipSubtitle, TooltipTitle, TooltipTrigger, arrowVariants, tooltipVariants };

//# sourceMappingURL=index391.js.map