@financedistrict/apps-ui 0.1.0

package/dist/tooltip.cjs

@@ -0,0 +1,384 @@
+'use strict';
+
+var React = require('react');
+var reactDom = require('react-dom');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/tooltip/Tooltip.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var tooltipVariants = classVarianceAuthority.cva([
+  "pointer-events-none max-w-[244px] rounded-sm bg-card-reversed-background px-1.5 py-1",
+  "body-04 text-center text-card-reversed-foreground shadow-xs"
+]);
+var TOOLTIP_OFFSET = 6;
+var VIEWPORT_MARGIN = 8;
+var OPPOSITE_SIDE = {
+  top: "bottom",
+  bottom: "top",
+  left: "right",
+  right: "left"
+};
+function sideFits(trigger, content, side, viewport) {
+  switch (side) {
+    case "top":
+      return trigger.top - TOOLTIP_OFFSET - content.height >= 0;
+    case "bottom":
+      return trigger.top + trigger.height + TOOLTIP_OFFSET + content.height <= viewport.height;
+    case "left":
+      return trigger.left - TOOLTIP_OFFSET - content.width >= 0;
+    case "right":
+      return trigger.left + trigger.width + TOOLTIP_OFFSET + content.width <= viewport.width;
+  }
+}
+function alignCoord(anchorStart, anchorSize, contentSize, align) {
+  switch (align) {
+    case "start":
+      return anchorStart;
+    case "center":
+      return anchorStart + anchorSize / 2 - contentSize / 2;
+    case "end":
+      return anchorStart + anchorSize - contentSize;
+  }
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, Math.max(min, max)));
+}
+function computeTooltipPosition(trigger, content, side, align, viewport) {
+  const resolvedSide = sideFits(trigger, content, side, viewport) || !sideFits(trigger, content, OPPOSITE_SIDE[side], viewport) ? side : OPPOSITE_SIDE[side];
+  const vertical = resolvedSide === "top" || resolvedSide === "bottom";
+  let top;
+  let left;
+  if (vertical) {
+    top = resolvedSide === "top" ? trigger.top - TOOLTIP_OFFSET - content.height : trigger.top + trigger.height + TOOLTIP_OFFSET;
+    left = alignCoord(trigger.left, trigger.width, content.width, align);
+    left = clamp(
+      left,
+      VIEWPORT_MARGIN,
+      viewport.width - content.width - VIEWPORT_MARGIN
+    );
+  } else {
+    left = resolvedSide === "left" ? trigger.left - TOOLTIP_OFFSET - content.width : trigger.left + trigger.width + TOOLTIP_OFFSET;
+    top = alignCoord(trigger.top, trigger.height, content.height, align);
+    top = clamp(
+      top,
+      VIEWPORT_MARGIN,
+      viewport.height - content.height - VIEWPORT_MARGIN
+    );
+  }
+  return { top, left, side: resolvedSide };
+}
+var TooltipContext = React__namespace.createContext(null);
+function useTooltipContext(part) {
+  const context = React__namespace.useContext(TooltipContext);
+  if (context === null) {
+    throw new Error(`${part} must be used within <Tooltip.Root>`);
+  }
+  return context;
+}
+function setRef(ref, node) {
+  if (typeof ref === "function") ref(node);
+  else if (ref) ref.current = node;
+}
+function TooltipRoot({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  delayDuration = 600,
+  side = "top",
+  align = "center",
+  disabled = false,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React__namespace.useState(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const rawOpen = isControlled ? openProp : uncontrolledOpen;
+  const open = disabled ? false : rawOpen;
+  const reactId = React__namespace.useId();
+  const contentId = `${reactId}-tooltip`;
+  const anchorRef = React__namespace.useRef(null);
+  const [anchorRect, setAnchorRect] = React__namespace.useState(null);
+  const timerRef = React__namespace.useRef(null);
+  const setOpen = React__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const clearTimer = React__namespace.useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  React__namespace.useEffect(() => clearTimer, [clearTimer]);
+  const onTriggerPointerEnter = () => {
+    if (disabled) return;
+    clearTimer();
+    timerRef.current = setTimeout(() => setOpen(true), delayDuration);
+  };
+  const onTriggerPointerLeave = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  const onTriggerFocus = () => {
+    if (disabled) return;
+    clearTimer();
+    setOpen(true);
+  };
+  const onTriggerBlur = () => {
+    clearTimer();
+    setOpen(false);
+  };
+  React__namespace.useLayoutEffect(() => {
+    if (!open) {
+      setAnchorRect(null);
+      return;
+    }
+    const measure = () => {
+      const node = anchorRef.current;
+      if (node) setAnchorRect(node.getBoundingClientRect());
+    };
+    measure();
+    window.addEventListener("scroll", measure, true);
+    window.addEventListener("resize", measure);
+    return () => {
+      window.removeEventListener("scroll", measure, true);
+      window.removeEventListener("resize", measure);
+    };
+  }, [open]);
+  React__namespace.useEffect(() => {
+    if (!open) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        clearTimer();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open, setOpen, clearTimer]);
+  const value = {
+    open,
+    setOpen,
+    disabled,
+    contentId,
+    side,
+    align,
+    anchorRef,
+    anchorRect,
+    onTriggerPointerEnter,
+    onTriggerPointerLeave,
+    onTriggerFocus,
+    onTriggerBlur
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipContext.Provider, { value, children });
+}
+function TooltipTrigger({
+  asChild = false,
+  className,
+  children,
+  ref,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ...props
+}) {
+  const {
+    open,
+    disabled,
+    contentId,
+    anchorRef,
+    onTriggerPointerEnter,
+    onTriggerPointerLeave,
+    onTriggerFocus,
+    onTriggerBlur
+  } = useTooltipContext("Tooltip.Trigger");
+  const describedBy = !disabled && open ? contentId : void 0;
+  const handlePointerEnter = (event) => {
+    onPointerEnter?.(event);
+    onTriggerPointerEnter();
+  };
+  const handlePointerLeave = (event) => {
+    onPointerLeave?.(event);
+    onTriggerPointerLeave();
+  };
+  const handleFocus = (event) => {
+    onFocus?.(event);
+    onTriggerFocus();
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    onTriggerBlur();
+  };
+  if (asChild) {
+    if (!React__namespace.isValidElement(children)) {
+      throw new Error(
+        "Tooltip.Trigger: `asChild` requires a single React element child"
+      );
+    }
+    const child = children;
+    const childProps = child.props;
+    const childHandlers = childProps;
+    return React__namespace.cloneElement(
+      child,
+      {
+        ...props,
+        ...childProps,
+        "data-slot": "tooltip-trigger",
+        "aria-describedby": describedBy,
+        onPointerEnter: (event) => {
+          childHandlers.onPointerEnter?.(event);
+          onPointerEnter?.(event);
+          onTriggerPointerEnter();
+        },
+        onPointerLeave: (event) => {
+          childHandlers.onPointerLeave?.(event);
+          onPointerLeave?.(event);
+          onTriggerPointerLeave();
+        },
+        onFocus: (event) => {
+          childHandlers.onFocus?.(event);
+          onFocus?.(event);
+          onTriggerFocus();
+        },
+        onBlur: (event) => {
+          childHandlers.onBlur?.(event);
+          onBlur?.(event);
+          onTriggerBlur();
+        },
+        className: cn(className, childHandlers.className),
+        ref: (node) => {
+          anchorRef.current = node;
+          setRef(ref, node);
+          setRef(childHandlers.ref, node);
+        }
+      },
+      childProps.children
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      type: props.type ?? "button",
+      "data-slot": "tooltip-trigger",
+      "aria-describedby": describedBy,
+      className,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      ref: (node) => {
+        anchorRef.current = node;
+        setRef(ref, node);
+      },
+      children
+    }
+  );
+}
+function TooltipContent({
+  className,
+  children,
+  style,
+  ref,
+  ...props
+}) {
+  const { open, contentId, side, align, anchorRect } = useTooltipContext("Tooltip.Content");
+  const contentRef = React__namespace.useRef(null);
+  const [placement, setPlacement] = React__namespace.useState(null);
+  React__namespace.useLayoutEffect(() => {
+    if (!open || anchorRect == null) {
+      setPlacement(null);
+      return;
+    }
+    const node = contentRef.current;
+    if (!node) return;
+    const rect = node.getBoundingClientRect();
+    setPlacement(
+      computeTooltipPosition(
+        anchorRect,
+        { width: rect.width, height: rect.height },
+        side,
+        align,
+        { width: window.innerWidth, height: window.innerHeight }
+      )
+    );
+  }, [open, anchorRect, side, align]);
+  if (!open) return null;
+  const positioned = placement !== null;
+  const positionStyle = positioned ? {
+    position: "absolute",
+    top: placement.top + window.scrollY,
+    left: placement.left + window.scrollX,
+    zIndex: 50,
+    ...style
+  } : {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    visibility: "hidden",
+    zIndex: 50,
+    ...style
+  };
+  const setContentRef = (node) => {
+    contentRef.current = node;
+    setRef(ref, node);
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...props,
+        ref: setContentRef,
+        role: "tooltip",
+        id: contentId,
+        "data-slot": "tooltip-content",
+        "data-side": positioned ? placement.side : side,
+        "data-align": align,
+        className: cn(tooltipVariants(), className),
+        style: positionStyle,
+        children
+      }
+    ),
+    document.body
+  );
+}
+var Tooltip = {
+  Root: TooltipRoot,
+  Trigger: TooltipTrigger,
+  Content: TooltipContent
+};
+
+exports.Tooltip = Tooltip;
+exports.TooltipContent = TooltipContent;
+exports.TooltipRoot = TooltipRoot;
+exports.TooltipTrigger = TooltipTrigger;
+exports.computeTooltipPosition = computeTooltipPosition;
+exports.tooltipVariants = tooltipVariants;

package/dist/tooltip.d.cts

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/** Preferred side of the trigger the bubble is placed on. */
+type TooltipSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the bubble along the trigger's edge. */
+type TooltipAlign = "start" | "center" | "end";
+/** The minimal rect shape the placement math needs (a `DOMRect` satisfies it). */
+interface TooltipRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * Pure placement math for the portaled bubble. Given the trigger rect, the
+ * measured bubble size, the preferred `side`/`align`, and the viewport, returns
+ * the viewport-relative `top`/`left` and the RESOLVED `side` (after flip). The
+ * caller offsets by `scrollX`/`scrollY` for absolute document coordinates.
+ *
+ * Rules: place on the preferred `side`; **flip** to the opposite side only when
+ * the preferred side overflows the viewport AND the opposite side has room
+ * (otherwise keep the preferred side); then clamp the CROSS axis into the
+ * viewport so the bubble never bleeds off-screen. The main axis is owned by the
+ * side/flip, so only the cross axis is clamped. Kept free of the DOM/React so
+ * every branch is unit-testable.
+ */
+declare function computeTooltipPosition(trigger: TooltipRect, content: {
+    width: number;
+    height: number;
+}, side: TooltipSide, align: TooltipAlign, viewport: {
+    width: number;
+    height: number;
+}): {
+    top: number;
+    left: number;
+    side: TooltipSide;
+};
+interface TooltipRootProps {
+    /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Ignored if `open` is provided. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called with the next open state from hover/focus/leave/blur/Escape. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Milliseconds a pointer must hover the trigger before the tooltip opens.
+     * Default `600`. Keyboard focus opens immediately (no delay).
+     */
+    delayDuration?: number;
+    /** Preferred side of the trigger to place the bubble on. Default `"top"`. */
+    side?: TooltipSide;
+    /** Alignment of the bubble along the trigger's edge. Default `"center"`. */
+    align?: TooltipAlign;
+    /**
+     * When `true` the tooltip never opens: the trigger still renders, but no
+     * `aria-describedby` is wired and no hover/focus fires an open.
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * State owner + context provider for the compound `Tooltip`. Renders no DOM of
+ * its own (a fragment) — it only coordinates the trigger and the portaled
+ * bubble. Owns the open state (controlled via `open`/`onOpenChange`, or
+ * uncontrolled via `defaultOpen`), the hover-open timer, the anchor rect + its
+ * reposition listeners, and the Escape-to-close listener.
+ */
+declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, delayDuration, side, align, disabled, children, }: TooltipRootProps): React.JSX.Element;
+interface TooltipTriggerProps extends React.ComponentProps<"button"> {
+    /**
+     * Render the single child element as the trigger instead of a `<button>`, so
+     * an existing control (an `IconButton`, `Button`, anchor…) becomes the anchor.
+     * The clone pattern: merge `ref`, compose event handlers, merge `className`.
+     */
+    asChild?: boolean;
+}
+/**
+ * The anchor the tooltip describes. Renders a native `<button type="button">`
+ * by default (focusable, correct semantics), or projects its props/ref onto the
+ * single child when `asChild`. Binds the pointer/focus handlers that drive
+ * open/close (composed with any consumer handler of the same name) and, while
+ * open and not `disabled`, wires `aria-describedby` to the bubble. Registers the
+ * anchor node for positioning. Forwards `ref` to the trigger element.
+ */
+declare function TooltipTrigger({ asChild, className, children, ref, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: TooltipTriggerProps): React.JSX.Element;
+interface TooltipContentProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The bubble. Portaled to `document.body` via `createPortal` (escaping
+ * `overflow`/stacking ancestors, like `SelectListbox`/`DialogContent`), rendered
+ * **only while open** — closed, it is removed from the DOM and the a11y tree.
+ * Absolutely positioned from the trigger rect via {@link computeTooltipPosition}
+ * (preferred side, flips when it would overflow, clamps the cross-axis).
+ * `role="tooltip"`; `data-side`/`data-align` reflect the RESOLVED placement.
+ *
+ * **Content must be non-interactive** — the WAI-ARIA tooltip pattern forbids
+ * focusable/interactive content inside a tooltip (there is no accessible way to
+ * reach it, and the bubble is `pointer-events-none`). Pass text or decorative
+ * `ReactNode` only. Forwards `ref` to the bubble.
+ */
+declare function TooltipContent({ className, children, style, ref, ...props }: TooltipContentProps): React.ReactPortal | null;
+/**
+ * Compound tooltip — a small floating label shown on hover (after
+ * `delayDuration`) or keyboard focus (immediately), describing its trigger.
+ * Assemble from its namespaced parts:
+ *
+ * ```tsx
+ * <Tooltip.Root side="top">
+ *   <Tooltip.Trigger asChild>
+ *     <IconButton aria-label="Info" />
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Content>Explanatory text</Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare const Tooltip: {
+    Root: typeof TooltipRoot;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
+};
+
+/**
+ * Tooltip bubble styling — the Figma `Tooltip` (node `5153:4063`). Binds ONLY to
+ * the semantic token layer (never primitives); theme switching is automatic via
+ * `.dark`, so no `dark:` variants.
+ *
+ * The surface is the fixed dark "reversed" card — the SAME utilities
+ * `toastVariants.ts` binds (`bg-card-reversed-background` /
+ * `text-card-reversed-foreground`) — so the two dark surfaces stay in lock-step.
+ * There is no `variation`/`size` axis (the Figma frame shows a single bubble),
+ * and no arrow/caret element (absent from Figma).
+ *
+ * `max-w-[244px]` is the one allowed arbitrary value: it is the Figma-exact wrap
+ * boundary (long text wraps; the sample's single-word `whitespace-nowrap` is a
+ * content artifact and is intentionally NOT carried over). `pointer-events-none`
+ * is intrinsic — the bubble is descriptive, never interactive, so it can never
+ * steal the pointer or cause a hover-leave flicker.
+ */
+declare const tooltipVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Tooltip, type TooltipAlign, TooltipContent, type TooltipContentProps, type TooltipRect, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, computeTooltipPosition, tooltipVariants };

package/dist/tooltip.d.ts

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+/** Preferred side of the trigger the bubble is placed on. */
+type TooltipSide = "top" | "bottom" | "left" | "right";
+/** Alignment of the bubble along the trigger's edge. */
+type TooltipAlign = "start" | "center" | "end";
+/** The minimal rect shape the placement math needs (a `DOMRect` satisfies it). */
+interface TooltipRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+/**
+ * Pure placement math for the portaled bubble. Given the trigger rect, the
+ * measured bubble size, the preferred `side`/`align`, and the viewport, returns
+ * the viewport-relative `top`/`left` and the RESOLVED `side` (after flip). The
+ * caller offsets by `scrollX`/`scrollY` for absolute document coordinates.
+ *
+ * Rules: place on the preferred `side`; **flip** to the opposite side only when
+ * the preferred side overflows the viewport AND the opposite side has room
+ * (otherwise keep the preferred side); then clamp the CROSS axis into the
+ * viewport so the bubble never bleeds off-screen. The main axis is owned by the
+ * side/flip, so only the cross axis is clamped. Kept free of the DOM/React so
+ * every branch is unit-testable.
+ */
+declare function computeTooltipPosition(trigger: TooltipRect, content: {
+    width: number;
+    height: number;
+}, side: TooltipSide, align: TooltipAlign, viewport: {
+    width: number;
+    height: number;
+}): {
+    top: number;
+    left: number;
+    side: TooltipSide;
+};
+interface TooltipRootProps {
+    /** Controlled open state. Pair with `onOpenChange`. Omit for uncontrolled. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. Ignored if `open` is provided. Default `false`. */
+    defaultOpen?: boolean;
+    /** Called with the next open state from hover/focus/leave/blur/Escape. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Milliseconds a pointer must hover the trigger before the tooltip opens.
+     * Default `600`. Keyboard focus opens immediately (no delay).
+     */
+    delayDuration?: number;
+    /** Preferred side of the trigger to place the bubble on. Default `"top"`. */
+    side?: TooltipSide;
+    /** Alignment of the bubble along the trigger's edge. Default `"center"`. */
+    align?: TooltipAlign;
+    /**
+     * When `true` the tooltip never opens: the trigger still renders, but no
+     * `aria-describedby` is wired and no hover/focus fires an open.
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * State owner + context provider for the compound `Tooltip`. Renders no DOM of
+ * its own (a fragment) — it only coordinates the trigger and the portaled
+ * bubble. Owns the open state (controlled via `open`/`onOpenChange`, or
+ * uncontrolled via `defaultOpen`), the hover-open timer, the anchor rect + its
+ * reposition listeners, and the Escape-to-close listener.
+ */
+declare function TooltipRoot({ open: openProp, defaultOpen, onOpenChange, delayDuration, side, align, disabled, children, }: TooltipRootProps): React.JSX.Element;
+interface TooltipTriggerProps extends React.ComponentProps<"button"> {
+    /**
+     * Render the single child element as the trigger instead of a `<button>`, so
+     * an existing control (an `IconButton`, `Button`, anchor…) becomes the anchor.
+     * The clone pattern: merge `ref`, compose event handlers, merge `className`.
+     */
+    asChild?: boolean;
+}
+/**
+ * The anchor the tooltip describes. Renders a native `<button type="button">`
+ * by default (focusable, correct semantics), or projects its props/ref onto the
+ * single child when `asChild`. Binds the pointer/focus handlers that drive
+ * open/close (composed with any consumer handler of the same name) and, while
+ * open and not `disabled`, wires `aria-describedby` to the bubble. Registers the
+ * anchor node for positioning. Forwards `ref` to the trigger element.
+ */
+declare function TooltipTrigger({ asChild, className, children, ref, onPointerEnter, onPointerLeave, onFocus, onBlur, ...props }: TooltipTriggerProps): React.JSX.Element;
+interface TooltipContentProps extends React.ComponentProps<"div"> {
+}
+/**
+ * The bubble. Portaled to `document.body` via `createPortal` (escaping
+ * `overflow`/stacking ancestors, like `SelectListbox`/`DialogContent`), rendered
+ * **only while open** — closed, it is removed from the DOM and the a11y tree.
+ * Absolutely positioned from the trigger rect via {@link computeTooltipPosition}
+ * (preferred side, flips when it would overflow, clamps the cross-axis).
+ * `role="tooltip"`; `data-side`/`data-align` reflect the RESOLVED placement.
+ *
+ * **Content must be non-interactive** — the WAI-ARIA tooltip pattern forbids
+ * focusable/interactive content inside a tooltip (there is no accessible way to
+ * reach it, and the bubble is `pointer-events-none`). Pass text or decorative
+ * `ReactNode` only. Forwards `ref` to the bubble.
+ */
+declare function TooltipContent({ className, children, style, ref, ...props }: TooltipContentProps): React.ReactPortal | null;
+/**
+ * Compound tooltip — a small floating label shown on hover (after
+ * `delayDuration`) or keyboard focus (immediately), describing its trigger.
+ * Assemble from its namespaced parts:
+ *
+ * ```tsx
+ * <Tooltip.Root side="top">
+ *   <Tooltip.Trigger asChild>
+ *     <IconButton aria-label="Info" />
+ *   </Tooltip.Trigger>
+ *   <Tooltip.Content>Explanatory text</Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare const Tooltip: {
+    Root: typeof TooltipRoot;
+    Trigger: typeof TooltipTrigger;
+    Content: typeof TooltipContent;
+};
+
+/**
+ * Tooltip bubble styling — the Figma `Tooltip` (node `5153:4063`). Binds ONLY to
+ * the semantic token layer (never primitives); theme switching is automatic via
+ * `.dark`, so no `dark:` variants.
+ *
+ * The surface is the fixed dark "reversed" card — the SAME utilities
+ * `toastVariants.ts` binds (`bg-card-reversed-background` /
+ * `text-card-reversed-foreground`) — so the two dark surfaces stay in lock-step.
+ * There is no `variation`/`size` axis (the Figma frame shows a single bubble),
+ * and no arrow/caret element (absent from Figma).
+ *
+ * `max-w-[244px]` is the one allowed arbitrary value: it is the Figma-exact wrap
+ * boundary (long text wraps; the sample's single-word `whitespace-nowrap` is a
+ * content artifact and is intentionally NOT carried over). `pointer-events-none`
+ * is intrinsic — the bubble is descriptive, never interactive, so it can never
+ * steal the pointer or cause a hover-leave flicker.
+ */
+declare const tooltipVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+
+export { Tooltip, type TooltipAlign, TooltipContent, type TooltipContentProps, type TooltipRect, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, computeTooltipPosition, tooltipVariants };

package/dist/tooltip.js

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipContent, TooltipRoot, TooltipTrigger, computeTooltipPosition, tooltipVariants } from './chunk-IRS3T6LF.js';
+import './chunk-7EOSDFS3.js';