@slithy/base-ui 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @slithy/base-ui
+
+## 0.2.0
+
+### Minor Changes
+
+- Singleton architecture rewrite for Tooltip and Dropdown.
+
+  - Tooltip and Dropdown rewritten as singleton implementations (one renderer per app)
+  - `TooltipStore` / `DropdownStore` + renderer pattern replaces per-instance components
+  - `useSafePolygon` hook for hover bridging between trigger and popup
+  - `useCloseCleanup` hook for defensive renderer cleanup on unmount
+  - Dropdown: `side`, `sideOffset`, `align`, `alignOffset`, `collisionPadding` positioning props
+  - Dropdown: `loopFocus`, `highlightItemOnHover`, `orientation`, `modal`, `openOn` props
+  - Dropdown: auto-dismiss when trigger scrolls out of view; controlled `open` / `defaultOpen`
+  - Dropdown.Trigger: `tooltip` prop (shows tooltip when dropdown is closed)
+  - Tooltip: `hoverable` prop with safe polygon bridging; disabled on touch devices
+  - Tooltip: controlled `open` / `defaultOpen`

package/README.md

@@ -1,47 +1,70 @@
 # @slithy/base-ui
 
-Compound UI components built on [Base UI](https://base-ui.com/). Provides accessible, unstyled primitives with sensible defaults, deferred rendering for performance, and full compatibility with animation libraries.
+Compound UI components built on [Base UI](https://base-ui.com/). Both Tooltip and Dropdown use a **global singleton architecture**: each trigger is a plain `<button>` with zero Base UI overhead, and a single renderer mounted at the app root owns the positioning and rendering.
 
-## Components
+## Setup
 
-### Tooltip
+Mount both renderers once at the app root:
+
+```tsx
+import { DropdownRenderer, TooltipRenderer } from "@slithy/base-ui";
+
+function App() {
+  return (
+    <>
+      <DropdownRenderer />
+      <TooltipRenderer />
+      {/* rest of your app */}
+    </>
+  );
+}
+```
+
+## Tooltip
 
 ```tsx
 import { Tooltip } from "@slithy/base-ui";
 
-<Tooltip.Provider>
-  <Tooltip.Root>
-    <Tooltip.Trigger>Hover me</Tooltip.Trigger>
-    <Tooltip.Portal>
-      <Tooltip.Positioner sideOffset={8}>
-        <Tooltip.Popup>
-          <Tooltip.Arrow />
-          Tooltip content
-        </Tooltip.Popup>
-      </Tooltip.Positioner>
-    </Tooltip.Portal>
-  </Tooltip.Root>
-</Tooltip.Provider>
+<Tooltip.Root>
+  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
+  <Tooltip.Portal>
+    <Tooltip.Popup>
+      <Tooltip.Arrow />
+      Tooltip content
+    </Tooltip.Popup>
+  </Tooltip.Portal>
+</Tooltip.Root>
 ```
 
-**Parts:** `Provider`, `Root`, `Trigger`, `Portal`, `Positioner`, `Popup`, `Arrow`
+**Parts:** `Root`, `Trigger`, `Portal`, `Popup`, `Arrow`
 
-#### Props
+### Props
 
-**`Root`** accepts all Base UI Tooltip.Root props, plus:
+**`Root`**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `open` | `boolean` | — | Controlled open state. |
+| `defaultOpen` | `boolean` | — | Open on first render (uncontrolled). |
+| `disabled` | `boolean` | `false` | Prevent the tooltip from opening. |
 | `touchDisabled` | `boolean` | `true` | Block activation from touch interactions. Mouse/keyboard still work on hybrid devices. |
-| `unmountOnClose` | `boolean` | `false` | Unmount Base UI after close animation completes, returning to the lightweight pre-activation state. Useful for pages with many tooltips where accumulated mounted instances add up. |
-
-**`Trigger`** accepts all Base UI Tooltip.Trigger props, plus:
+| `hoverable` | `boolean` | `false` | Allow hovering into the popup without closing (hover card behavior). |
+| `delay` | `number` | `600` | Delay before opening in ms. |
+| `closeDelay` | `number` | `300` | Delay before closing in ms. |
+| `warmUpDelay` | `number` | `300` | If a tooltip closed within this window (ms), the next one opens instantly. |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Which side of the trigger to place the popup. |
+| `sideOffset` | `number` | `6` | Distance between trigger and popup in pixels. |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment relative to the trigger. |
+| `alignOffset` | `number` | `0` | Offset along the alignment axis in pixels. |
+| `collisionPadding` | `number \| Partial<Record<Side, number>>` | `5` | Padding from viewport edges for collision detection. |
+
+**`Trigger`**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `render` | `ReactElement \| (props, state) => ReactElement` | — | Replace the default `<button>` with a custom element. Works in both pre- and post-activation states. See [Custom trigger element](#custom-trigger-element). |
+| `render` | `ReactElement \| (props) => ReactElement` | — | Replace the default `<button>` with a custom element. See [Custom trigger element](#custom-trigger-element). |
 
-### Dropdown
+## Dropdown
 
 ```tsx
 import { Dropdown } from "@slithy/base-ui";
@@ -49,74 +72,88 @@ import { Dropdown } from "@slithy/base-ui";
 <Dropdown.Root>
   <Dropdown.Trigger>Open menu</Dropdown.Trigger>
   <Dropdown.Portal>
-    <Dropdown.Positioner sideOffset={4}>
-      <Dropdown.Popup>
-        <Dropdown.Item onClick={handleEdit}>Edit</Dropdown.Item>
-        <Dropdown.Item onClick={handleDuplicate}>Duplicate</Dropdown.Item>
-        <Dropdown.Separator />
-        <Dropdown.Item onClick={handleDelete}>Delete</Dropdown.Item>
-      </Dropdown.Popup>
-    </Dropdown.Positioner>
+    <Dropdown.Popup>
+      <Dropdown.Item onClick={handleEdit}>Edit</Dropdown.Item>
+      <Dropdown.Item onClick={handleDuplicate}>Duplicate</Dropdown.Item>
+      <Dropdown.Separator />
+      <Dropdown.Item onClick={handleDelete}>Delete</Dropdown.Item>
+    </Dropdown.Popup>
   </Dropdown.Portal>
 </Dropdown.Root>
 ```
 
-**Parts:** `Root`, `Trigger`, `Portal`, `Positioner`, `Popup`, `Arrow`, `Item`, `Separator`, `Group`, `GroupLabel`, `CheckboxItem`, `CheckboxItemIndicator`, `RadioGroup`, `RadioItem`, `RadioItemIndicator`
+**Parts:** `Root`, `Trigger`, `Portal`, `Popup`, `Arrow`, `Item`, `Separator`, `Group`, `GroupLabel`, `CheckboxItem`, `CheckboxItemIndicator`, `RadioGroup`, `RadioItem`, `RadioItemIndicator`
 
-#### Disabling the dropdown
+### Tooltip on trigger
 
-Set `disabled` on `Root` to prevent the dropdown from opening while keeping the trigger interactive. This is useful when you want alternate behavior for the same trigger — for example, opening a modal on mobile instead of a dropdown:
+`Dropdown.Trigger` can show a tooltip on hover/focus that is automatically dismissed when the dropdown opens:
 
 ```tsx
-const isMobile = useIsMobile();
-const [modalOpen, setModalOpen] = useState(false);
+<Dropdown.Trigger tooltip="Edit, duplicate, or delete">
+  Actions
+</Dropdown.Trigger>
+```
+
+Requires `TooltipRenderer` to be mounted. Touch interactions do not trigger tooltips.
+
+### Disabling the dropdown
+
+Set `disabled` on `Root` to prevent the dropdown from opening while keeping the trigger interactive:
 
+```tsx
 <Dropdown.Root disabled={isMobile}>
   <Dropdown.Trigger onClick={isMobile ? () => setModalOpen(true) : undefined}>
     Options
   </Dropdown.Trigger>
   <Dropdown.Portal>
-    <Dropdown.Positioner sideOffset={4}>
-      <Dropdown.Popup>
-        <Dropdown.Item onClick={handleEdit}>Edit</Dropdown.Item>
-        <Dropdown.Item onClick={handleDelete}>Delete</Dropdown.Item>
-      </Dropdown.Popup>
-    </Dropdown.Positioner>
+    <Dropdown.Popup>
+      <Dropdown.Item onClick={handleEdit}>Edit</Dropdown.Item>
+    </Dropdown.Popup>
   </Dropdown.Portal>
 </Dropdown.Root>
 ```
 
-Event handlers on `Trigger` (`onClick`, `onPointerDown`, `onKeyDown`) always fire, regardless of the `disabled` state — only the dropdown activation is suppressed.
-
-#### Props
+### Props
 
-**`Root`** accepts all Base UI Menu.Root props, plus:
+**`Root`**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `disabled` | `boolean` | `false` | Prevent the dropdown from opening. The trigger button remains interactive so consumers can attach alternate behavior (e.g. opening a modal on mobile) via event handlers on `Trigger`. |
-| `unmountOnClose` | `boolean` | `false` | Unmount Base UI after close animation completes, returning to the lightweight pre-activation state. Useful for pages with many dropdowns where accumulated mounted instances add up. |
-
-**`Trigger`** accepts all Base UI Menu.Trigger props, plus:
+| `open` | `boolean` | — | Controlled open state. |
+| `defaultOpen` | `boolean` | — | Open on first render (uncontrolled). |
+| `disabled` | `boolean` | `false` | Prevent the dropdown from opening. The trigger remains interactive. |
+| `modal` | `boolean` | `true` | Whether the menu is modal (locks scroll, inerts page). When `false`, the popup auto-dismisses when the trigger scrolls out of view. |
+| `openOn` | `"click" \| "pointerdown"` | `"click"` | Open on full click (mouseup) or on pointerdown (mousedown) for snappier response. |
+| `side` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Which side of the trigger to place the popup. |
+| `sideOffset` | `number` | `4` | Distance between trigger and popup in pixels. |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Alignment relative to the trigger. |
+| `alignOffset` | `number` | `0` | Offset along the alignment axis in pixels. |
+| `collisionPadding` | `number \| Partial<Record<Side, number>>` | `5` | Padding from viewport edges for collision detection. |
+| `loopFocus` | `boolean` | `true` | Wrap keyboard focus from last item back to first (and vice versa). |
+| `highlightItemOnHover` | `boolean` | `true` | Highlight items on pointer hover. Set to `false` to differentiate CSS `:hover` from keyboard `data-highlighted`. |
+| `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | Arrow key direction for navigation. |
+| `onOpenChange` | `(open: boolean) => void` | — | Called when the menu opens or closes. |
+| `onOpenChangeComplete` | `(open: boolean) => void` | — | Called after open/close animation completes. |
+
+**`Trigger`**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `tooltip` | `ReactNode` | — | Show a tooltip on hover. The tooltip is deferred (not mounted until first hover) and automatically dismissed when the dropdown menu opens. |
-| `render` | `ReactElement \| (props, state) => ReactElement` | — | Replace the default `<button>` with a custom element. Works in both pre- and post-activation states. See [Custom trigger element](#custom-trigger-element). |
-
-## Deferred rendering
+| `render` | `ReactElement \| (props) => ReactElement` | — | Replace the default `<button>` with a custom element. See [Custom trigger element](#custom-trigger-element). |
+| `tooltip` | `ReactNode` | — | Tooltip content shown on hover/focus. Dismissed when the dropdown opens. Requires `TooltipRenderer`. |
+| `tooltipDelay` | `number` | `600` | Delay before opening the tooltip in ms. |
 
-Both components use a deferred rendering pattern that avoids mounting Base UI's hooks and floating-ui positioning until the user first interacts with the trigger. Before activation, the trigger renders as a plain `<button>` and portal content is not mounted. This keeps initial JS overhead minimal when rendering many tooltips or dropdowns on a page.
+## Architecture
 
-The activation latch is one-way by default: once triggered, it stays active so that leave animations can play. Controlled `open` or `defaultOpen` bypass the latch entirely.
+Both Tooltip and Dropdown use a **global singleton** pattern. Each trigger is a plain `<button>` with ARIA attributes — no Base UI hooks, no floating-ui, no portal. A single renderer (`TooltipRenderer` / `DropdownRenderer`) mounted at the app root subscribes to a global store and renders the active popup anchored to whichever trigger activated it.
 
-Set `unmountOnClose` on Root to reset the latch after the close animation completes. This returns the component to its lightweight pre-activation state, freeing Base UI hooks and floating-ui listeners. Useful for long-lived pages with many tooltips or dropdowns where accumulated mounted instances add up.
+Only one tooltip and one dropdown can be open at a time. 200 triggers on a page have the same overhead as 1.
 
 ## Custom trigger element
 
-Both `Tooltip.Trigger` and `Dropdown.Trigger` accept a `render` prop to replace the default `<button>` with a custom element. This works across both pre- and post-activation states — the deferred rendering layer applies the same prop to whichever element is currently rendered.
+Both `Tooltip.Trigger` and `Dropdown.Trigger` accept a `render` prop to replace the default `<button>` with a custom element.
 
-**Element form** — pass a React element. All required event handlers, `ref`, `className`, `style`, and `disabled` are merged in via `cloneElement`. Existing props on the element are preserved for any key that isn't overridden:
+**Element form** — pass a React element:
 
 ```tsx
 <Dropdown.Trigger render={<MyButton variant="ghost" />}>
@@ -124,27 +161,15 @@ Both `Tooltip.Trigger` and `Dropdown.Trigger` accept a `render` prop to replace
 </Dropdown.Trigger>
 ```
 
-**Function form** — receive the full props object and spread it onto your element. Use this form when you need to compose your own handlers alongside the trigger's, or when your component needs additional logic:
+**Function form** — receive the full props object:
 
 ```tsx
-<Tooltip.Trigger
-  render={(props) => (
-    <MyButton
-      {...props}
-      onFocus={(e) => {
-        props.onFocus?.(e);
-        trackFocusEvent();
-      }}
-    />
-  )}
->
-  Hover me
-</Tooltip.Trigger>
+<Dropdown.Trigger render={(props) => <MyButton {...props} />}>
+  Open menu
+</Dropdown.Trigger>
 ```
 
-> **Note:** For the element form, event handlers defined on the render element (e.g. `<MyButton onClick={...} />`) are overridden by the trigger's activation handlers. Use the function form if you need to run your own handlers alongside them.
-
-Your custom component must forward `ref` to its underlying DOM element so that focus restoration and synthetic event dispatch work correctly after activation.
+Your custom component must forward `ref` to its underlying DOM element.
 
 ## Styling
 
@@ -175,56 +200,6 @@ Each component applies default class names (`slithy-tooltip-*`, `slithy-dropdown
 --slithy-dropdown-group-label-color
 ```
 
-## Positioning
-
-Both components pass all props through to Base UI's Positioner, which wraps floating-ui internally. Common positioning props:
-
-```tsx
-<Tooltip.Positioner
-  side="bottom"       // "top" | "bottom" | "left" | "right"
-  sideOffset={8}      // distance from trigger (px)
-  align="center"      // "start" | "center" | "end"
-  alignOffset={0}     // alignment offset (px)
-  collisionPadding={5} // viewport edge padding (px)
-/>
-```
-
 ## Custom animations
 
-The `Popup` and `Positioner` components accept a `render` prop (from Base UI) that lets you replace the rendered element. (The `Trigger` `render` prop is documented separately under [Custom trigger element](#custom-trigger-element).) This makes it straightforward to use animation libraries like react-spring:
-
-```tsx
-import { useTransition, animated } from "@react-spring/web";
-
-function AnimatedTooltip({ children }: { children: React.ReactNode }) {
-  return (
-    <Tooltip.Provider>
-      <Tooltip.Root>
-        <Tooltip.Trigger>Hover me</Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Positioner sideOffset={8}>
-            <Tooltip.Popup
-              render={(props) => (
-                <animated.div
-                  {...props}
-                  style={{
-                    ...props.style,
-                    opacity: /* your spring value */,
-                    transform: /* your spring value */,
-                  }}
-                />
-              )}
-            >
-              {children}
-            </Tooltip.Popup>
-          </Tooltip.Positioner>
-        </Tooltip.Portal>
-      </Tooltip.Root>
-    </Tooltip.Provider>
-  );
-}
-```
-
-Base UI exposes `data-open`, `data-starting-style`, and `data-ending-style` attributes on popup elements, and `onOpenChangeComplete` on Root, so you can drive enter/leave animations from open state and signal completion.
-
-The deferred rendering layer does not interfere with animations -- by the time they run, the activation latch has flipped and Base UI is fully mounted.
+Base UI exposes `data-open`, `data-starting-style`, and `data-ending-style` attributes on popup elements, so you can drive enter/leave animations from open state. The default styles use CSS transitions with these attributes.

package/dist/index.d.ts

@@ -1,30 +1,63 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Menu } from '@base-ui/react/menu';
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import * as _base_ui_react from '@base-ui/react';
+import { ReactNode, ReactElement, ComponentPropsWithoutRef } from 'react';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 
-type RootProps$1 = ComponentPropsWithoutRef<typeof Menu.Root> & {
+type DropdownPositionConfig = {
+    side?: "top" | "bottom" | "left" | "right" | "inline-end" | "inline-start";
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+    collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+};
+
+type RootProps$1 = {
     children?: ReactNode;
-    /** When `true`, the dropdown will not open. The trigger button remains
-     *  interactive so consumers can attach alternate behavior (e.g. opening
-     *  a modal on mobile) via event handlers on `Dropdown.Trigger`. */
+    /** Controlled open state. */
+    open?: boolean;
+    /** Open on first render (uncontrolled). */
+    defaultOpen?: boolean;
     disabled?: boolean;
-    /** Unmount Base UI after close animation completes, returning to the
-     *  lightweight pre-activation state. Defaults to `false`. */
-    unmountOnClose?: boolean;
+    /** Whether the menu is modal (locks scroll, inerts page). @default true */
+    modal?: boolean;
+    /** Fire the open/close toggle on `"click"` (mouseup) or `"pointerdown"` (mousedown). @default "click" */
+    openOn?: "click" | "pointerdown";
+    /** Wrap keyboard focus from last item back to first (and vice versa). @default true */
+    loopFocus?: boolean;
+    /** Highlight items on pointer hover (`data-highlighted`). @default true */
+    highlightItemOnHover?: boolean;
+    /** Arrow key direction: `"vertical"` (up/down) or `"horizontal"` (left/right). @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** Which side of the trigger to place the popup. @default "bottom" */
+    side?: DropdownPositionConfig["side"];
+    /** Distance between trigger and popup in pixels. @default 4 */
+    sideOffset?: number;
+    /** Alignment relative to the trigger. @default "center" */
+    align?: DropdownPositionConfig["align"];
+    /** Offset along the alignment axis in pixels. @default 0 */
+    alignOffset?: number;
+    /** Padding from viewport edges for collision detection. @default 5 */
+    collisionPadding?: DropdownPositionConfig["collisionPadding"];
+    onOpenChange?: (open: boolean) => void;
+    onOpenChangeComplete?: (open: boolean) => void;
 };
-declare function Root$1({ children, open, defaultOpen, disabled, unmountOnClose, onOpenChangeComplete, ...props }: RootProps$1): react_jsx_runtime.JSX.Element;
-type TriggerProps$1 = ComponentPropsWithoutRef<typeof Menu.Trigger> & {
-    /** Show a tooltip on hover. Accepts any ReactNode content. */
+declare function Root$1({ children, open, defaultOpen, disabled, modal, openOn, loopFocus, highlightItemOnHover, orientation, side, sideOffset, align, alignOffset, collisionPadding, onOpenChange, onOpenChangeComplete }: RootProps$1): react_jsx_runtime.JSX.Element;
+type TriggerProps$1 = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: ReactNode;
+    /** Replace the default `<button>` with a custom element. */
+    render?: ReactElement | ((props: Record<string, unknown>) => ReactElement);
+    /** Tooltip content shown on hover/focus. Dismissed when the dropdown opens. */
     tooltip?: ReactNode;
+    /** Delay before opening the tooltip in ms. @default 600 */
+    tooltipDelay?: number;
+};
+declare function Trigger$1({ children, onClick, onPointerDown, onPointerEnter, onPointerLeave, onFocus, onBlur, onKeyDown, render, tooltip, tooltipDelay, ...props }: TriggerProps$1): react_jsx_runtime.JSX.Element;
+type PortalProps$1 = {
+    children?: ReactNode;
 };
-declare function Trigger$1({ children, className, style, disabled, tooltip, ...rest }: TriggerProps$1): react_jsx_runtime.JSX.Element;
-type PortalProps$1 = ComponentPropsWithoutRef<typeof Menu.Portal>;
-declare function Portal$1(props: PortalProps$1): react_jsx_runtime.JSX.Element | null;
-type PositionerProps$1 = ComponentPropsWithoutRef<typeof Menu.Positioner>;
-declare function Positioner$1({ className, ...props }: PositionerProps$1): react_jsx_runtime.JSX.Element;
+declare function Portal$1({ children }: PortalProps$1): null;
+type PositionerProps = ComponentPropsWithoutRef<typeof Menu.Positioner>;
+declare function Positioner({ className, ...props }: PositionerProps): react_jsx_runtime.JSX.Element;
 type PopupProps$1 = ComponentPropsWithoutRef<typeof Menu.Popup>;
 declare function Popup$1({ className, ...props }: PopupProps$1): react_jsx_runtime.JSX.Element;
 type ArrowProps$1 = ComponentPropsWithoutRef<typeof Menu.Arrow>;
@@ -51,7 +84,7 @@ declare const Dropdown: {
     Root: typeof Root$1;
     Trigger: typeof Trigger$1;
     Portal: typeof Portal$1;
-    Positioner: typeof Positioner$1;
+    Positioner: typeof Positioner;
     Popup: typeof Popup$1;
     Arrow: typeof Arrow$1;
     Item: typeof Item;
@@ -65,33 +98,83 @@ declare const Dropdown: {
     RadioItemIndicator: typeof RadioItemIndicator;
 };
 
-type RootProps = ComponentPropsWithoutRef<typeof Tooltip$1.Root> & {
+/**
+ * Singleton renderer — mount once at the app root.
+ * Subscribes to the global DropdownStore and renders the active dropdown
+ * using Base UI's Menu.Root + Menu.Positioner.
+ *
+ * Menu.Root stays mounted so CSS transitions can play on both open and close.
+ * Content and anchor are swapped when a new dropdown opens.
+ */
+declare function DropdownRenderer(): react_jsx_runtime.JSX.Element | null;
+
+type TooltipPositionConfig = {
+    side?: "top" | "bottom" | "left" | "right" | "inline-end" | "inline-start";
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+    collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+};
+
+type RootProps = {
     children?: ReactNode;
-    /** Block activation from touch interactions. Defaults to `true`. */
+    /** Controlled open state. */
+    open?: boolean;
+    /** Open on first render (uncontrolled). */
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    /** Block activation from touch interactions. @default true */
     touchDisabled?: boolean;
-    /** Unmount Base UI after close animation completes, returning to the
-     *  lightweight pre-activation state. Defaults to `false`. */
-    unmountOnClose?: boolean;
+    /** Allow hovering into the popup without closing (hover card behavior). @default false */
+    hoverable?: boolean;
+    /** Delay before opening in ms. @default 600 */
+    delay?: number;
+    /** Delay before closing in ms. @default 300 */
+    closeDelay?: number;
+    /** Warm-up window in ms. If a tooltip closed within this window,
+     *  the next one opens instantly. @default 300 */
+    warmUpDelay?: number;
+    /** Which side of the trigger to place the popup. @default "top" */
+    side?: TooltipPositionConfig["side"];
+    /** Distance between trigger and popup in pixels. @default 6 */
+    sideOffset?: number;
+    /** Alignment relative to the trigger. @default "center" */
+    align?: TooltipPositionConfig["align"];
+    /** Offset along the alignment axis in pixels. @default 0 */
+    alignOffset?: number;
+    /** Padding from viewport edges for collision detection. @default 5 */
+    collisionPadding?: TooltipPositionConfig["collisionPadding"];
 };
-declare function Root({ children, open, defaultOpen, disabled, touchDisabled, unmountOnClose, onOpenChangeComplete, ...props }: RootProps): react_jsx_runtime.JSX.Element;
-type TriggerProps = ComponentPropsWithoutRef<typeof Tooltip$1.Trigger>;
-declare function Trigger({ children, className, style, disabled, ...rest }: TriggerProps): react_jsx_runtime.JSX.Element;
-type PortalProps = ComponentPropsWithoutRef<typeof Tooltip$1.Portal>;
-declare function Portal(props: PortalProps): react_jsx_runtime.JSX.Element | null;
-type PositionerProps = ComponentPropsWithoutRef<typeof Tooltip$1.Positioner>;
-declare function Positioner({ className, ...props }: PositionerProps): react_jsx_runtime.JSX.Element;
+declare function Root({ children, open, defaultOpen, disabled, touchDisabled, hoverable, delay, closeDelay, warmUpDelay, side, sideOffset, align, alignOffset, collisionPadding, }: RootProps): react_jsx_runtime.JSX.Element;
+type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: ReactNode;
+    /** Replace the default `<button>` with a custom element. */
+    render?: ReactElement | ((props: Record<string, unknown>) => ReactElement);
+};
+declare function Trigger({ children, render, ...props }: TriggerProps): react_jsx_runtime.JSX.Element;
+type PortalProps = {
+    children?: ReactNode;
+};
+declare function Portal({ children }: PortalProps): null;
 type PopupProps = ComponentPropsWithoutRef<typeof Tooltip$1.Popup>;
-declare function Popup({ className, ...props }: PopupProps): react_jsx_runtime.JSX.Element;
+declare function Popup({ className, id, ...props }: PopupProps): react_jsx_runtime.JSX.Element;
 type ArrowProps = ComponentPropsWithoutRef<typeof Tooltip$1.Arrow>;
 declare function Arrow({ className, ...props }: ArrowProps): react_jsx_runtime.JSX.Element;
 declare const Tooltip: {
-    Provider: react.FC<_base_ui_react.TooltipProviderProps>;
     Root: typeof Root;
     Trigger: typeof Trigger;
     Portal: typeof Portal;
-    Positioner: typeof Positioner;
     Popup: typeof Popup;
     Arrow: typeof Arrow;
 };
 
-export { Dropdown, Tooltip };
+/**
+ * Singleton renderer — mount once at the app root.
+ * Subscribes to the global TooltipStore and renders the active tooltip
+ * using Base UI's Tooltip.Root + Tooltip.Positioner.
+ *
+ * Tooltip.Root stays mounted so CSS transitions can play on both open and close.
+ */
+declare function TooltipRenderer(): react_jsx_runtime.JSX.Element | null;
+
+export { Dropdown, DropdownRenderer, Tooltip, TooltipRenderer };