"use client";
import { Info } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/atoms/forms/_shared/FieldTooltip.tsx
/**
* Lightweight CSS-only tooltip for field hints.
* Uses Tailwind group-hover instead of floating-ui to avoid pulling
* the heavy @floating-ui chain into every smart form component.
*/
function FieldTooltip({ content }) {
	const tooltipId = React.useId();
	return /* @__PURE__ */ jsxs("span", {
		"data-slot": "field-tooltip",
		className: "relative inline-flex align-middle ms-1 group/tooltip",
		children: [/* @__PURE__ */ jsx("button", {
			type: "button",
			"aria-describedby": tooltipId,
			className: "rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
			children: /* @__PURE__ */ jsx(Info, { className: "size-4" })
		}), /* @__PURE__ */ jsx("span", {
			id: tooltipId,
			role: "tooltip",
			className: "invisible opacity-0 group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-focus-within/tooltip:visible group-focus-within/tooltip:opacity-100 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 text-xs rounded-lg bg-popover text-popover-foreground shadow-md border border-border whitespace-normal max-w-xs z-(--z-tooltip) transition-opacity duration-150 pointer-events-none",
			children: content
		})]
	});
}
FieldTooltip.displayName = "FieldTooltip";
//#endregion
export { FieldTooltip };

//# sourceMappingURL=index19.js.map