@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/tooltip/Tooltip.d.ts

@@ -1,55 +1,75 @@
-import type { PropsWithChildren } from "react";
-/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
-export declare enum TooltipPosition {
-    TOP = "top",
-    BOTTOM = "bottom",
-    LEFT = "left",
-    RIGHT = "right",
-    TOP_START = "top-start",
-    TOP_END = "top-end",
-    BOTTOM_START = "bottom-start",
-    BOTTOM_END = "bottom-end",
-    RIGHT_START = "right-start",
-    RIGHT_END = "right-end",
-    LEFT_START = "left-start",
-    LEFT_END = "left-end",
-    AUTO = "auto",
-    AUTO_START = "auto-start",
-    AUTO_END = "auto-end"
-}
-/** Surface treatment of the tooltip bubble. */
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode } from "react";
+import { Placement } from "../theme/enums.js";
+/**
+ * Bubble fill: a surface step (Constitution V-A surface set), resolved **inside the inverse
+ * scope**, so every step is the opposite theme's (dark on a light UI, light on a dark one).
+ */
 export declare enum TooltipVariant {
+    /** The opposite theme's canvas fill, `background.base`: the high-contrast bubble. The default. */
     BASE = "BASE",
+    /** The opposite theme's panel fill, `background.primary`. */
     PRIMARY = "PRIMARY",
+    /** The opposite theme's raised fill, `background.secondary`. */
     SECONDARY = "SECONDARY",
+    /** The opposite theme's most elevated fill, `background.tertiary`. */
     TERTIARY = "TERTIARY"
 }
-export interface TooltipProps {
-    /** Tooltip content. A string is wrapped in `Text`; a node renders as-is. */
-    body: string | React.ReactNode;
-    /** @default TooltipVariant.SECONDARY */
+export interface TooltipProps extends AriaAttributes {
+    /**
+     * The trigger: one element that forwards its `ref` and spreads props to a DOM element. Tooltip
+     * clones it and does not wrap it.
+     */
+    children: ReactElement;
+    /**
+     * Hint content. A string or number renders as `Text` `BODY_SM`; a node renders as it is. An
+     * empty value never opens. Keep it short and non-interactive.
+     */
+    body: ReactNode;
+    /**
+     * Shortcut for the trigger's action, shown as a trailing `Kbd` (`useHotkey` grammar). Display
+     * only: the host binds it.
+     */
+    hotKeys?: string[];
+    /**
+     * Bubble fill: a surface step of the opposite theme (the bubble is always inverted).
+     * @default TooltipVariant.BASE
+     */
     variant?: TooltipVariant;
-    /** @default TooltipPosition.TOP */
-    position?: TooltipPosition;
-    /** Milliseconds to hover before it appears. @default 0 */
+    /**
+     * Preferred side and alignment. The bubble flips and shifts to stay in the viewport; `AUTO*`
+     * picks the side with the most room.
+     * @default Placement.TOP
+     */
+    placement?: Placement;
+    /**
+     * Milliseconds the pointer must rest on the trigger before the bubble opens. Skipped while
+     * another tooltip is open or has just closed; keyboard focus opens without a delay.
+     * @default 0
+     */
     delay?: number;
-    /** `[skidding, distance]` in px from the trigger. @default [0, 4] */
-    offset?: [number, number];
-    /** Keep it open while the pointer is over it, so links inside stay reachable. */
-    isInteractive?: boolean;
-    /** Drop the 8px inset — for tooltips that host their own layout. */
-    noPadding?: boolean;
-    /** Drop the hairline border. */
-    noBorder?: boolean;
-    /** Render children bare, with no tooltip at all. */
+    /** Controlled open state. When set, Tooltip calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested open state on hover, focus, blur, Escape, trigger press, and when another tooltip opens. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Never opens and adds no `aria-describedby`. The trigger renders exactly as when enabled.
+     * @default false
+     */
     isDisabled?: boolean;
+    /** DOM id on the bubble; the trigger's `aria-describedby` target. @default a `useId()` value */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the bubble. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the bubble. */
+    className?: string;
+    /** Inline style on the bubble; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * Wraps a trigger and shows `body` on hover or keyboard focus. Children are the
- * trigger, wrapped in an inline-block span.
- *
- * Sits at z-index 10000, above modals and drawers. Set `isInteractive` if the
- * body contains anything clickable.
- */
-declare const Tooltip: ({ children, variant, body, position, delay, offset, isInteractive, noPadding, noBorder, isDisabled, }: PropsWithChildren<TooltipProps>) => string | number | boolean | Iterable<import("react").ReactNode> | import("react").JSX.Element | null | undefined;
+/** A short, non-interactive hint for one trigger, shown on hover or keyboard focus. */
+declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Tooltip;

package/dist/tooltip/Tooltip.js

@@ -1,90 +1,297 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize } from "../text/Text.js";
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { SPACE } from "../theme/tokens/scales.js";
+import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import { ThemeScopeContext } from "../theme/useGalaxyTheme.js";
+import Portal from "../layout/Portal.js";
+import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
+import Kbd, { KbdSize, KbdVariant } from "../text/Kbd.js";
+import { useInverseScope } from "../theme/useInverseScope.js";
 /* empty css                  */
 import { styled } from "@linaria/react";
-import { match } from "ts-pattern";
-import { jsx } from "react/jsx-runtime";
-import Tippy from "@tippyjs/react";
+import { cloneElement, forwardRef, useCallback, useEffect, useId, useReducer, useRef, version } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { autoPlacement, autoUpdate, flip, hide, offset, safePolygon, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
 //#region src/tooltip/Tooltip.tsx
-/** Placement relative to the trigger. The `AUTO_*` values pick a side that fits. */
-var TooltipPosition = /* @__PURE__ */ function(TooltipPosition) {
-	TooltipPosition["TOP"] = "top";
-	TooltipPosition["BOTTOM"] = "bottom";
-	TooltipPosition["LEFT"] = "left";
-	TooltipPosition["RIGHT"] = "right";
-	TooltipPosition["TOP_START"] = "top-start";
-	TooltipPosition["TOP_END"] = "top-end";
-	TooltipPosition["BOTTOM_START"] = "bottom-start";
-	TooltipPosition["BOTTOM_END"] = "bottom-end";
-	TooltipPosition["RIGHT_START"] = "right-start";
-	TooltipPosition["RIGHT_END"] = "right-end";
-	TooltipPosition["LEFT_START"] = "left-start";
-	TooltipPosition["LEFT_END"] = "left-end";
-	TooltipPosition["AUTO"] = "auto";
-	TooltipPosition["AUTO_START"] = "auto-start";
-	TooltipPosition["AUTO_END"] = "auto-end";
-	return TooltipPosition;
-}({});
-/** Surface treatment of the tooltip bubble. */
+/**
+* A short, non-interactive hint beside one trigger element, shown while the pointer rests on it or
+* it has keyboard focus. The trigger is the single child: Tooltip clones it (adding the event
+* handlers, the `ref` and `aria-describedby`) instead of wrapping it, so the trigger's box and
+* HTML do not change. The bubble renders in a `Portal` only while open. Tooltip is the engine
+* behind every `tooltip` shortcut prop in the library.
+*
+* Positioning and interactions come from `@floating-ui/react`. The computed `x`/`y` are written
+* as the `--gx-tooltip-x` / `--gx-tooltip-y` custom properties, read by a static transform.
+*
+* The bubble is always an inverse scope (the opposite theme on its subtree, `useInverseScope`):
+* dark on a light UI, light on a dark one. `variant` picks the surface step inside that scope.
+*
+* Text, Tooltip and Kbd import each other (Text → Tooltip → Kbd → Text). None of them reads
+* another's exports at module scope, so any load order works: the one cross-cycle map here,
+* `TOOLTIP_VARIANT_TO_KBD_VARIANT_MAP`, is built when called at render.
+*/
+/**
+* Bubble fill: a surface step (Constitution V-A surface set), resolved **inside the inverse
+* scope**, so every step is the opposite theme's (dark on a light UI, light on a dark one).
+*/
 var TooltipVariant = /* @__PURE__ */ function(TooltipVariant) {
+	/** The opposite theme's canvas fill, `background.base`: the high-contrast bubble. The default. */
 	TooltipVariant["BASE"] = "BASE";
+	/** The opposite theme's panel fill, `background.primary`. */
 	TooltipVariant["PRIMARY"] = "PRIMARY";
+	/** The opposite theme's raised fill, `background.secondary`. */
 	TooltipVariant["SECONDARY"] = "SECONDARY";
+	/** The opposite theme's most elevated fill, `background.tertiary`. */
 	TooltipVariant["TERTIARY"] = "TERTIARY";
 	return TooltipVariant;
 }({});
-var TooltipWrapper = /*#__PURE__*/ styled("span")({
-	name: "TooltipWrapper",
-	class: "tbnx4ok",
-	propsAsIs: false
-});
-var _exp = () => ({ $noPadding }) => $noPadding ? "0" : "8px";
-var _exp2 = () => ({ $variant, theme }) => {
-	return match($variant).with("BASE", () => theme.color.background.base).with("PRIMARY", () => theme.color.background.primary).with("SECONDARY", () => theme.color.background.secondary).with("TERTIARY", () => theme.color.background.tertiary).exhaustive();
+/** The bubble's width cap. A module constant because no width token exists. */
+/** Distance from the trigger and the viewport inset, resolved to numbers for the engine. */
+var TOOLTIP_OFFSET_PX = Number.parseFloat(SPACE[4]);
+var TOOLTIP_SHIFT_PADDING_PX = Number.parseFloat(SPACE[8]);
+/** A hover within this many ms of a tooltip closing opens at once (delay grouping). */
+var TOOLTIP_SKIP_DELAY_MS = 300;
+/**
+* Delay grouping, shared by every Tooltip. Plain JS: never touched at import time, only in event
+* handlers and effects. `close` closes the tooltip that opened last from hover or focus.
+*/
+var TOOLTIP_GROUP = {
+	close: null,
+	lastClosedAt: Number.NEGATIVE_INFINITY
 };
-var _exp3 = () => ({ $noBorder, $variant, theme }) => {
-	if ($noBorder) return "none";
-	return match($variant).with("BASE", () => `0.5px solid ${theme.color.border.secondary}`).with("PRIMARY", () => `0.5px solid ${theme.color.border.secondary}`).with("SECONDARY", () => `0.5px solid ${theme.color.border.secondary}`).with("TERTIARY", () => `0.5px solid ${theme.color.border.secondary}`).exhaustive();
+/** `true` while a grouped tooltip is open or one closed less than `TOOLTIP_SKIP_DELAY_MS` ago. */
+function isTooltipGroupWarm() {
+	return TOOLTIP_GROUP.close !== null || Date.now() - TOOLTIP_GROUP.lastClosedAt < TOOLTIP_SKIP_DELAY_MS;
+}
+/** `Placement` → the engine: 12 sided placements, and `AUTO*` as `autoPlacement` (replacing `flip`). */
+var TOOLTIP_PLACEMENT_TO_FLOATING_PLACEMENT_MAP = {
+	[Placement.TOP]: { placement: "top" },
+	[Placement.BOTTOM]: { placement: "bottom" },
+	[Placement.LEFT]: { placement: "left" },
+	[Placement.RIGHT]: { placement: "right" },
+	[Placement.TOP_START]: { placement: "top-start" },
+	[Placement.TOP_END]: { placement: "top-end" },
+	[Placement.BOTTOM_START]: { placement: "bottom-start" },
+	[Placement.BOTTOM_END]: { placement: "bottom-end" },
+	[Placement.LEFT_START]: { placement: "left-start" },
+	[Placement.LEFT_END]: { placement: "left-end" },
+	[Placement.RIGHT_START]: { placement: "right-start" },
+	[Placement.RIGHT_END]: { placement: "right-end" },
+	[Placement.AUTO]: { autoAlignment: void 0 },
+	[Placement.AUTO_START]: { autoAlignment: "start" },
+	[Placement.AUTO_END]: { autoAlignment: "end" }
 };
-var TooltipContent = withTheme(/*#__PURE__*/ styled("span")({
-	name: "TooltipContent",
-	class: "tjda4tq",
-	propsAsIs: false,
-	vars: {
-		"tjda4tq-0": [_exp()],
-		"tjda4tq-1": [_exp2()],
-		"tjda4tq-2": [_exp3()]
-	}
-}));
 /**
-* Wraps a trigger and shows `body` on hover or keyboard focus. Children are the
-* trigger, wrapped in an inline-block span.
-*
-* Sits at z-index 10000, above modals and drawers. Set `isInteractive` if the
-* body contains anything clickable.
+* The shortcut caps sit one surface step above the bubble (inside the same inverse scope); the top
+* step has nothing above it, so it steps down. Built when called at render (Text ↔ Tooltip ↔ Kbd
+* cycle: no load-time reads of `KbdVariant`).
 */
-var Tooltip = ({ children, variant = "SECONDARY", body, position = "top", delay = 0, offset = [0, 4], isInteractive = false, noPadding = false, noBorder = false, isDisabled = false }) => {
-	if (isDisabled) return children;
-	return /* @__PURE__ */ jsx(Tippy, {
-		content: /* @__PURE__ */ jsx(TooltipContent, {
-			$variant: variant,
-			$noPadding: noPadding,
-			$noBorder: noBorder,
-			children: typeof body === "string" ? /* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				children: body
-			}) : body
+var TOOLTIP_VARIANT_TO_KBD_VARIANT_MAP = () => ({
+	["BASE"]: KbdVariant.PRIMARY,
+	["PRIMARY"]: KbdVariant.SECONDARY,
+	["SECONDARY"]: KbdVariant.TERTIARY,
+	["TERTIARY"]: KbdVariant.SECONDARY
+});
+var Bubble = /*#__PURE__*/ styled("div")({
+	name: "Bubble",
+	class: "gx-Tooltip-Bubble-bbnx4ok",
+	propsAsIs: false
+});
+/**
+* Bubble fill per surface step, resolved in the inverse scope. The hairline keeps its 0.5px but
+* takes the fill's color on every step: an inverted bubble always contrasts with the page, and a
+* visible hairline would only draw an opposite-theme rim around it.
+*/
+var TOOLTIP_VARIANT_TO_CSS_MAP = {
+	["BASE"]: "gx-Tooltip-BASE-bjda4tq",
+	["PRIMARY"]: "gx-Tooltip-PRIMARY-pvbsl8",
+	["SECONDARY"]: "gx-Tooltip-SECONDARY-sxdjaj",
+	["TERTIARY"]: "gx-Tooltip-TERTIARY-tfsg8kc"
+};
+/** The trigger scrolled fully out of view (or the first position is not computed yet). */
+var REFERENCE_HIDDEN_CSS = "gx-Tooltip-REFERENCE_HIDDEN_CSS-r1itzgix";
+/** React 19 moved an element's `ref` into `props`; React 18 keeps it on the element. */
+var IS_REACT_19 = Number.parseInt(version, 10) >= 19;
+/** The child's own ref, read where the running React version keeps it, so neither version warns. */
+function getElementRef(element) {
+	return (IS_REACT_19 ? element.props : element).ref;
+}
+/** `undefined`, `null`, `false` and `""` are empty: the tooltip never opens. */
+function isEmptyBody(body) {
+	return body === void 0 || body === null || body === false || body === "";
+}
+/** Rounds to the device pixel grid so the translated bubble's text stays sharp. */
+function roundToDevicePixel(value) {
+	const ratio = typeof window === "undefined" ? 1 : window.devicePixelRatio || 1;
+	return Math.round(value * ratio) / ratio;
+}
+/** Opens from user interaction; only these take part in "one open at a time". */
+var INTERACTION_OPEN_REASONS = new Set(["hover", "focus"]);
+/** The open bubble: the engine's floating props, the passthrough, the position and the content. */
+function TooltipBubble({ floatingProps, passthrough, bubbleRef, id, body, hotKeys, variant, x, y, isHidden, className, style }) {
+	const { tabIndex: _tabIndex, ...engineProps } = floatingProps;
+	const inverse = useInverseScope();
+	const content = typeof body === "string" || typeof body === "number" ? /* @__PURE__ */ jsx(Text, {
+		size: TextSize.BODY_SM,
+		variant: TextVariant.PRIMARY,
+		children: body
+	}) : body;
+	const inner = hotKeys !== void 0 && hotKeys.length > 0 ? /* @__PURE__ */ jsxs(Flex, {
+		alignItems: AlignItems.CENTER,
+		gap: 8,
+		children: [content, /* @__PURE__ */ jsx(Kbd, {
+			hotKeys,
+			size: KbdSize.SMALL,
+			variant: TOOLTIP_VARIANT_TO_KBD_VARIANT_MAP()[variant]
+		})]
+	}) : content;
+	const position = {
+		"--gx-tooltip-x": `${roundToDevicePixel(x)}px`,
+		"--gx-tooltip-y": `${roundToDevicePixel(y)}px`
+	};
+	return /* @__PURE__ */ jsx(Bubble, {
+		...engineProps,
+		...passthrough,
+		...inverse.attributes,
+		ref: bubbleRef,
+		id,
+		className: cx(TOOLTIP_VARIANT_TO_CSS_MAP[variant], isHidden && REFERENCE_HIDDEN_CSS, className),
+		style: {
+			...position,
+			...style
+		},
+		children: /* @__PURE__ */ jsx(ThemeScopeContext.Provider, {
+			value: inverse.scope,
+			children: inner
+		})
+	});
+}
+/** A short, non-interactive hint for one trigger, shown on hover or keyboard focus. */
+var Tooltip = forwardRef(function Tooltip({ children, body, hotKeys, variant = "BASE", placement = Placement.TOP, delay = 0, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, isDisabled = false, id, className, style, ...rest }, ref) {
+	const generatedId = useId();
+	const bubbleId = id ?? generatedId;
+	const isDecorative = rest["aria-hidden"] === true || rest["aria-hidden"] === "true";
+	const isEnabled = !isDisabled && !isEmptyBody(body);
+	const { isOpen, setOpen } = useControlledOpenState({
+		isOpen: isOpenProp,
+		defaultIsOpen,
+		onOpenChange
+	});
+	const isShown = isOpen && isEnabled;
+	const isShownRef = useRef(isShown);
+	isShownRef.current = isShown;
+	const setOpenRef = useRef(setOpen);
+	setOpenRef.current = setOpen;
+	const delayRef = useRef(delay);
+	delayRef.current = delay;
+	/** Stable identity: the group compares it to know which tooltip it holds. */
+	const close = useCallback(() => setOpenRef.current(false), []);
+	/** Re-renders this tooltip, so `isShownRef` is reset to the real state after every request. */
+	const [, rerender] = useReducer((count) => count + 1, 0);
+	const handleOpenChange = useCallback((nextIsOpen, _event, reason) => {
+		if (nextIsOpen === isShownRef.current) return;
+		if (nextIsOpen && INTERACTION_OPEN_REASONS.has(reason)) {
+			const previousClose = TOOLTIP_GROUP.close;
+			TOOLTIP_GROUP.close = close;
+			if (previousClose !== null && previousClose !== close) previousClose();
+		}
+		isShownRef.current = nextIsOpen;
+		setOpenRef.current(nextIsOpen);
+		rerender();
+	}, [close]);
+	const wasShownRef = useRef(isShown);
+	useEffect(() => {
+		if (wasShownRef.current && !isShown) {
+			TOOLTIP_GROUP.lastClosedAt = Date.now();
+			if (TOOLTIP_GROUP.close === close) TOOLTIP_GROUP.close = null;
+		}
+		wasShownRef.current = isShown;
+	}, [isShown, close]);
+	useEffect(() => () => {
+		if (TOOLTIP_GROUP.close === close) TOOLTIP_GROUP.close = null;
+	}, [close]);
+	const target = TOOLTIP_PLACEMENT_TO_FLOATING_PLACEMENT_MAP[placement];
+	const { refs, context, x, y, middlewareData, isPositioned } = useFloating({
+		open: isShown,
+		onOpenChange: handleOpenChange,
+		placement: "placement" in target ? target.placement : "top",
+		strategy: "absolute",
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(TOOLTIP_OFFSET_PX),
+			"placement" in target ? flip() : autoPlacement({ alignment: target.autoAlignment }),
+			shift({ padding: TOOLTIP_SHIFT_PADDING_PX }),
+			hide()
+		]
+	});
+	const hover = useHover(context, {
+		enabled: isEnabled,
+		mouseOnly: true,
+		move: false,
+		delay: () => ({
+			open: isTooltipGroupWarm() ? 0 : delayRef.current,
+			close: 0
 		}),
-		placement: position,
-		delay,
-		duration: 0,
-		offset,
-		interactive: isInteractive,
-		appendTo: () => document.body,
-		maxWidth: "none",
-		zIndex: 1e4,
-		children: /* @__PURE__ */ jsx(TooltipWrapper, { children })
+		handleClose: safePolygon()
 	});
-};
+	const focus = useFocus(context, {
+		enabled: isEnabled,
+		visibleOnly: true
+	});
+	useOverlay({
+		isOpen: isShown,
+		layer: OverlayLayer.TOOLTIP,
+		onEscape: close
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		hover,
+		focus,
+		useDismiss(context, {
+			enabled: isEnabled,
+			escapeKey: false,
+			referencePress: true,
+			outsidePress: false
+		}),
+		useRole(context, {
+			enabled: isEnabled,
+			role: "tooltip"
+		})
+	]);
+	const childProps = children.props;
+	const triggerRef = useMergeRefs([refs.setReference, getElementRef(children)]);
+	const bubbleRef = useMergeRefs([refs.setFloating, ref]);
+	const triggerProps = {};
+	for (const [key, value] of Object.entries(getReferenceProps())) {
+		if (key === "aria-describedby") continue;
+		const own = childProps[key];
+		triggerProps[key] = typeof value === "function" && typeof own === "function" ? (...args) => {
+			own(...args);
+			value(...args);
+		} : value;
+	}
+	const ownDescribedBy = childProps["aria-describedby"];
+	const describedBy = isShown && !isDecorative ? [typeof ownDescribedBy === "string" ? ownDescribedBy : void 0, bubbleId].filter(Boolean).join(" ") : ownDescribedBy;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [cloneElement(children, {
+		...triggerProps,
+		ref: triggerRef,
+		"aria-describedby": describedBy
+	}), isShown && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(TooltipBubble, {
+		floatingProps: getFloatingProps(),
+		passthrough: rest,
+		bubbleRef,
+		id: bubbleId,
+		body,
+		hotKeys,
+		variant,
+		x,
+		y,
+		isHidden: middlewareData.hide?.referenceHidden === true || !isPositioned,
+		className,
+		style
+	}) })] });
+});
+Tooltip.displayName = "Tooltip";
 //#endregion
-export { TooltipPosition, TooltipVariant, Tooltip as default };
+export { TooltipVariant, Tooltip as default };

package/dist/tooltip/internal/LazyTooltip.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipProps } from "../Tooltip.js";
+/** @internal `Tooltip` behind `import()`: the trigger renders alone until the module has loaded. */
+declare function LazyTooltip({ children, ...props }: TooltipProps): import("react").JSX.Element;
+declare namespace LazyTooltip {
+    var displayName: string;
+}
+export default LazyTooltip;

package/dist/tooltip/internal/LazyTooltip.js

@@ -0,0 +1,53 @@
+import { useIsClient } from "../../hooks/internal/useIsClient.js";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/tooltip/internal/LazyTooltip.tsx
+/**
+* @internal `Tooltip` loaded on first use. `Text` and `Icon` are in every app and almost never
+* show a tooltip, but a static import would pull `Tooltip` (and with it floating-ui, `Portal`,
+* the overlay store, `Flex` and `Kbd`) into every bundle that renders text, and would make `Text`
+* ↔ `Tooltip` an import cycle.
+*
+* The module is fetched with `import()` once, after the first client render that needs it, and
+* cached for every later instance. Until it has landed the trigger renders alone: on the server,
+* during hydration (so the markup matches) and for the one tick the import takes in an app whose
+* bundle already holds `Tooltip`. No `Suspense` boundary is involved, so `renderToString` emits
+* plain markup and hydration never falls back to client rendering.
+*
+* Only `Text` and `Icon` use it. A component whose tooltip is part of its job (`Button`, `Chip`,
+* `Field`) imports `Tooltip` directly.
+*/
+/** The loaded `Tooltip`, shared by every instance once the import has resolved. */
+var loadedTooltip = null;
+/** The in-flight import, so concurrent first renders share one request. */
+var loading = null;
+/** Starts (or joins) the import; resolves once `loadedTooltip` is set. */
+function loadTooltip() {
+	loading ??= import("../Tooltip.js").then((module) => {
+		loadedTooltip = module.default;
+	});
+	return loading;
+}
+/** @internal `Tooltip` behind `import()`: the trigger renders alone until the module has loaded. */
+function LazyTooltip({ children, ...props }) {
+	const isClient = useIsClient();
+	const [Tooltip, setTooltip] = useState(() => loadedTooltip);
+	useEffect(() => {
+		if (!isClient || Tooltip !== null) return;
+		let isMounted = true;
+		loadTooltip().then(() => {
+			if (isMounted) setTooltip(() => loadedTooltip);
+		});
+		return () => {
+			isMounted = false;
+		};
+	}, [isClient, Tooltip]);
+	if (!isClient || Tooltip === null) return children;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		...props,
+		children
+	});
+}
+LazyTooltip.displayName = "LazyTooltip";
+//#endregion
+export { LazyTooltip as default };

package/dist/transform/Fade.d.ts

@@ -1,13 +1,35 @@
-import type { PropsWithChildren } from "react";
-export interface FadeProps {
-    /** Seconds to wait before starting. @default 0 */
-    delay?: number;
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface FadeProps extends AriaAttributes {
+    /** The content to fade in and out. */
+    children?: ReactNode;
+    /**
+     * Whether the content is shown. Changing it fades the content in or out. Controlled only; the
+     * host owns the state.
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Keep the content mounted while closed (transparent, `visibility: hidden`) so its state
+     * survives and it keeps its space in the layout. By default it unmounts after the fade-out.
+     * @default false
+     */
+    shouldKeepMounted?: boolean;
+    /**
+     * Fade in when the component mounts already open (a message that appears with its row). By
+     * default a Fade that mounts open renders at rest. The server renders it transparent, so don't
+     * use it for server-rendered content that must be readable before JavaScript runs.
+     * @default false
+     */
+    shouldAnimateOnMount?: boolean;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. Must not set `opacity`, `transform` or `visibility`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/**
- * Fades children in on mount and out on unmount, over 200ms.
- *
- * The exit half only runs inside a framer-motion `AnimatePresence`. Fills its
- * parent (100% × 100%).
- */
-declare const Fade: ({ children, delay }: PropsWithChildren<FadeProps>) => import("react").JSX.Element;
+/** Fades its content in and out; unmounts it when closed by default. */
+declare const Fade: import("react").ForwardRefExoticComponent<FadeProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Fade;