@skdx/react 0.26.0

package/dist/toolbar/types.d.ts

@@ -0,0 +1,80 @@
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Layout axis of a {@link Toolbar}, driving `aria-orientation` and the arrow keys used for roving-tabindex navigation. */
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+/** @internal Shared state distributed from {@link Toolbar} to its parts via context. Not part of the public API. */
+export interface ToolbarContextValue {
+    orientation: ToolbarOrientation;
+    currentTabStopId: string | null;
+    setCurrentTabStopId: (id: string) => void;
+}
+/** Props for the {@link Toolbar} root. */
+export interface ToolbarProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Layout axis, exposed as `aria-orientation`/`data-orientation` and used to
+     * pick Arrow Left/Right vs. Arrow Up/Down for roving-tabindex navigation.
+     * @default 'horizontal'
+     */
+    orientation?: ToolbarOrientation;
+    /**
+     * Whether arrow-key navigation wraps from the last item back to the first
+     * (and vice versa).
+     * @default true
+     */
+    loop?: boolean;
+}
+/** Props for {@link ToolbarButton}, a plain action button in the toolbar. */
+export interface ToolbarButtonProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link ToolbarLink}, a plain navigable link in the toolbar. */
+export interface ToolbarLinkProps extends PrimitivePropsWithRef<'a'> {
+}
+/** Props for {@link ToolbarSeparator}, a visual divider between toolbar controls. */
+export interface ToolbarSeparatorProps extends PrimitivePropsWithRef<'div'> {
+}
+/** Whether a {@link ToolbarToggleGroup} allows one pressed item (`'single'`) or several (`'multiple'`). */
+export type ToolbarToggleGroupType = 'single' | 'multiple';
+/** @internal Shared state distributed from {@link ToolbarToggleGroup} to its `ToolbarToggleItem`s via context. Not part of the public API. */
+export interface ToolbarToggleGroupContextValue {
+    type: ToolbarToggleGroupType;
+    value: string[];
+    disabled: boolean;
+    onItemActivate: (value: string) => void;
+    onItemDeactivate: (value: string) => void;
+}
+/** Props shared by both {@link ToolbarToggleGroupSingleProps} and {@link ToolbarToggleGroupMultipleProps}. */
+export interface ToolbarToggleGroupBaseProps extends PrimitivePropsWithRef<'div'> {
+    /**
+     * Disables every `ToolbarToggleItem` in the group.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/** Props for a {@link ToolbarToggleGroup} where at most one item can be pressed at a time. */
+export interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {
+    /** Restricts the group to at most one pressed item. */
+    type: 'single';
+    /** Pressed item's value, for controlled usage. Pair with `onValueChange`. */
+    value?: string;
+    /** Initially pressed item's value, for uncontrolled usage. */
+    defaultValue?: string;
+    /** Fires with the new value whenever the pressed item changes, controlled or not. */
+    onValueChange?: (value: string) => void;
+}
+/** Props for a {@link ToolbarToggleGroup} where any number of items can be pressed at once. */
+export interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {
+    /** Allows any number of items to be pressed at once. */
+    type: 'multiple';
+    /** Pressed items' values, for controlled usage. Pair with `onValueChange`. */
+    value?: string[];
+    /** Initially pressed items' values, for uncontrolled usage. */
+    defaultValue?: string[];
+    /** Fires with the new values whenever the pressed set changes, controlled or not. */
+    onValueChange?: (value: string[]) => void;
+}
+/** Props for the {@link ToolbarToggleGroup} root — discriminated on `type` between single and multiple selection. */
+export type ToolbarToggleGroupProps = ToolbarToggleGroupSingleProps | ToolbarToggleGroupMultipleProps;
+/** Props for a single {@link ToolbarToggleItem} within a `ToolbarToggleGroup`. */
+export interface ToolbarToggleItemProps extends PrimitivePropsWithRef<'button'> {
+    /** Unique identifier tracked in the group's pressed value(s). */
+    value: string;
+}

package/dist/tooltip/Tooltip.cjs

@@ -0,0 +1 @@
+"use strict";var to=Object.create;var T=Object.defineProperty;var ro=Object.getOwnPropertyDescriptor;var no=Object.getOwnPropertyNames;var io=Object.getPrototypeOf,lo=Object.prototype.hasOwnProperty;var po=(o,t)=>{for(var e in t)T(o,e,{get:t[e],enumerable:!0})},k=(o,t,e,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of no(t))!lo.call(o,l)&&l!==e&&T(o,l,{get:()=>t[l],enumerable:!(r=ro(t,l))||r.enumerable});return o};var P=(o,t,e)=>(e=o!=null?to(io(o)):{},k(t||!o||!o.__esModule?T(e,"default",{value:o,enumerable:!0}):e,o)),ao=o=>k(T({},"__esModule",{value:!0}),o);var mo={};po(mo,{Tooltip:()=>F,TooltipArrow:()=>W,TooltipContent:()=>O,TooltipPortal:()=>x,TooltipProvider:()=>w,TooltipRootProvider:()=>K,TooltipTrigger:()=>b,useTooltipContext:()=>m});module.exports=ao(mo);var n=P(require("react"),1),I=require("../utils/createContext.cjs"),V=require("../utils/part.cjs"),R=require("../utils/popper.cjs"),B=require("../utils/useControllableState.cjs"),M=require("../utils/useDismiss.cjs"),S=require("../utils/useOpenChangeComplete.cjs");var c=P(require("react"),1),N=require("../utils/createContext.cjs"),A=require("react/jsx-runtime"),[so,L]=(0,N.createSafeContext)("TooltipProvider",{delayDuration:700,skipDelayDuration:300,disableHoverableContent:!0,isOpenDelayedRef:{current:!0},onOpen:()=>{},onClose:()=>{}});function w({children:o,delayDuration:t=700,skipDelayDuration:e=300,disableHoverableContent:r=!0}){let l=c.useRef(!0),i=c.useRef(0);c.useEffect(()=>()=>window.clearTimeout(i.current),[]);let u=c.useCallback(()=>{window.clearTimeout(i.current),l.current=!1},[]),p=c.useCallback(()=>{window.clearTimeout(i.current),i.current=window.setTimeout(()=>{l.current=!0},e)},[e]);return(0,A.jsx)(so,{delayDuration:t,skipDelayDuration:e,disableHoverableContent:r,isOpenDelayedRef:l,onOpen:u,onClose:p,children:o})}w.displayName="TooltipProvider";var C=require("react/jsx-runtime"),[K,m]=(0,I.createSafeContext)("Tooltip"),co=150;function F({children:o,open:t,defaultOpen:e=!1,onOpenChange:r,onOpenChangeComplete:l,delayDuration:i,disableHoverableContent:u}){let p=L("Tooltip"),g=i??p.delayDuration,$=u??p.disableHoverableContent,E=n.useRef(null),d=n.useRef(0),f=n.useRef(0),[y=!1,a]=(0,B.useControllableState)({prop:t,defaultProp:e,onChange:h=>{h?p.onOpen():p.onClose(),r?.(h)}});(0,S.useOpenChangeComplete)(y,E,l),n.useEffect(()=>()=>{window.clearTimeout(d.current),window.clearTimeout(f.current)},[]);let j=n.useCallback(()=>{window.clearTimeout(d.current),window.clearTimeout(f.current),a(!0)},[a]),oo=n.useCallback(()=>{window.clearTimeout(d.current),p.isOpenDelayedRef.current?d.current=window.setTimeout(()=>a(!0),g):a(!0)},[a,g,p.isOpenDelayedRef]),H=n.useCallback(()=>{window.clearTimeout(d.current),window.clearTimeout(f.current),a(!1)},[a]),eo=n.useCallback(()=>{window.clearTimeout(d.current),window.clearTimeout(f.current),f.current=window.setTimeout(()=>a(!1),co)},[a]);return(0,M.useDismiss)({enabled:y,onEscapeKeyDown:H},[]),(0,C.jsx)(R.PopperRoot,{children:(0,C.jsx)(K,{contentRef:E,contentId:n.useId(),open:y,disableHoverableContent:$,onOpen:j,onDelayedOpen:oo,onClose:H,onDelayedClose:eo,children:o})})}F.displayName="Tooltip";var W=n.forwardRef((o,t)=>(0,C.jsx)(R.PopperArrow,{...o,...(0,V.skdxPart)("tooltip","arrow",o.className),ref:t}));W.displayName="TooltipArrow";var _=P(require("react"),1),G=require("../utils/part.cjs"),U=require("../utils/popper.cjs"),s=require("../utils/primitive.cjs");var v=require("react/jsx-runtime"),b=_.forwardRef((o,t)=>{let e=m("TooltipTrigger");return(0,v.jsx)(U.PopperAnchor,{asChild:!0,children:(0,v.jsx)(s.Primitive.button,{type:"button","aria-describedby":e.open?e.contentId:void 0,"data-state":e.open?"open":"closed",...o,...(0,G.skdxPart)("tooltip","trigger",o.className),ref:t,onPointerEnter:(0,s.composeEventHandlers)(o.onPointerEnter,r=>{r.pointerType!=="touch"&&e.onDelayedOpen()}),onPointerLeave:(0,s.composeEventHandlers)(o.onPointerLeave,e.disableHoverableContent?e.onClose:e.onDelayedClose),onFocus:(0,s.composeEventHandlers)(o.onFocus,e.onOpen),onBlur:(0,s.composeEventHandlers)(o.onBlur,e.onClose),onClick:(0,s.composeEventHandlers)(o.onClick,e.onClose),onKeyDown:(0,s.composeEventHandlers)(o.onKeyDown,r=>{r.key==="Escape"&&e.onClose()})})})});b.displayName="TooltipTrigger";var q=require("../utils/portal.cjs");var z=require("react/jsx-runtime"),x=({forceMount:o,children:t,...e})=>{let r=m("TooltipPortal");return o||r.open?(0,z.jsx)(q.Portal,{...e,children:t}):null};x.displayName="TooltipPortal";var J=P(require("react"),1),Q=require("../utils/composeRefs.cjs"),X=require("../utils/part.cjs"),Y=require("../utils/popper.cjs"),D=require("../utils/primitive.cjs");var Z=require("react/jsx-runtime"),O=J.forwardRef(({forceMount:o,side:t="top",sideOffset:e=4,...r},l)=>{let i=m("TooltipContent"),u=(0,Q.useComposedRefs)(l,i.contentRef),p=!i.disableHoverableContent;return o||i.open?(0,Z.jsx)(Y.PopperContent,{component:"tooltip",role:"tooltip",id:i.contentId,"data-state":i.open?"open":"closed",side:t,sideOffset:e,...r,...(0,X.skdxPart)("tooltip","content",r.className),ref:u,onPointerEnter:(0,D.composeEventHandlers)(r.onPointerEnter,p?i.onOpen:void 0),onPointerLeave:(0,D.composeEventHandlers)(r.onPointerLeave,p?i.onClose:void 0),style:{pointerEvents:p?"auto":"none",...r.style}}):null});O.displayName="TooltipContent";0&&(module.exports={Tooltip,TooltipArrow,TooltipContent,TooltipPortal,TooltipProvider,TooltipRootProvider,TooltipTrigger,useTooltipContext});

package/dist/tooltip/Tooltip.d.cts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+import type { TooltipContextValue, TooltipProps } from './types.cjs';
+export declare const TooltipRootProvider: {
+    (props: TooltipContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useTooltipContext: (consumerName: string) => TooltipContextValue;
+/**
+ * Root of a single hover/focus tooltip: owns open state (with hover-in delay
+ * and instant-close) and hands it down to `TooltipTrigger` / `TooltipPortal` /
+ * `TooltipContent` / `TooltipArrow` via context. Wraps children in the shared
+ * popper positioning root. Renders no DOM element itself.
+ *
+ * Opens on pointer-enter (after `delayDuration`) or focus, closes on
+ * pointer-leave, blur, click, or Escape. Escape is listened for on the
+ * document while open, so a tooltip opened by hover is dismissable even when
+ * keyboard focus is elsewhere (WCAG 2.2 SC 1.4.13). With `disableHoverableContent={false}`
+ * the pointer may instead travel from the trigger into the bubble and keep it
+ * open. Nest under a single `TooltipProvider`
+ * to share hover-delay timing across multiple tooltips. Works controlled
+ * (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *   <Tooltip>
+ *     <TooltipTrigger>Hover me</TooltipTrigger>
+ *     <TooltipPortal>
+ *       <TooltipContent>
+ *         Helpful hint
+ *         <TooltipArrow />
+ *       </TooltipContent>
+ *     </TooltipPortal>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare function Tooltip({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, delayDuration: delayDurationProp, disableHoverableContent: disableHoverableContentProp, }: TooltipProps): React.JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+/**
+ * Optional visual arrow pointing from `TooltipContent` back at the trigger.
+ * Must be rendered inside `TooltipContent`; self-positions based on the
+ * resolved `side`.
+ *
+ * @example
+ * ```tsx
+ * <TooltipContent>
+ *   Helpful hint
+ *   <TooltipArrow />
+ * </TooltipContent>
+ * ```
+ */
+export declare const TooltipArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type { TooltipContextValue, TooltipProps } from './types.js';
+export declare const TooltipRootProvider: {
+    (props: TooltipContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useTooltipContext: (consumerName: string) => TooltipContextValue;
+/**
+ * Root of a single hover/focus tooltip: owns open state (with hover-in delay
+ * and instant-close) and hands it down to `TooltipTrigger` / `TooltipPortal` /
+ * `TooltipContent` / `TooltipArrow` via context. Wraps children in the shared
+ * popper positioning root. Renders no DOM element itself.
+ *
+ * Opens on pointer-enter (after `delayDuration`) or focus, closes on
+ * pointer-leave, blur, click, or Escape. Escape is listened for on the
+ * document while open, so a tooltip opened by hover is dismissable even when
+ * keyboard focus is elsewhere (WCAG 2.2 SC 1.4.13). With `disableHoverableContent={false}`
+ * the pointer may instead travel from the trigger into the bubble and keep it
+ * open. Nest under a single `TooltipProvider`
+ * to share hover-delay timing across multiple tooltips. Works controlled
+ * (`open` + `onOpenChange`) or uncontrolled (`defaultOpen`).
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *   <Tooltip>
+ *     <TooltipTrigger>Hover me</TooltipTrigger>
+ *     <TooltipPortal>
+ *       <TooltipContent>
+ *         Helpful hint
+ *         <TooltipArrow />
+ *       </TooltipContent>
+ *     </TooltipPortal>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare function Tooltip({ children, open: openProp, defaultOpen, onOpenChange, onOpenChangeComplete, delayDuration: delayDurationProp, disableHoverableContent: disableHoverableContentProp, }: TooltipProps): React.JSX.Element;
+export declare namespace Tooltip {
+    var displayName: string;
+}
+/**
+ * Optional visual arrow pointing from `TooltipContent` back at the trigger.
+ * Must be rendered inside `TooltipContent`; self-positions based on the
+ * resolved `side`.
+ *
+ * @example
+ * ```tsx
+ * <TooltipContent>
+ *   Helpful hint
+ *   <TooltipArrow />
+ * </TooltipContent>
+ * ```
+ */
+export declare const TooltipArrow: React.ForwardRefExoticComponent<Omit<PrimitivePropsWithRef<"span">, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1 @@
+import*as r from"react";import{createSafeContext as M}from"../utils/createContext.js";import{skdxPart as S}from"../utils/part.js";import{PopperArrow as K,PopperRoot as F}from"../utils/popper.js";import{useControllableState as W}from"../utils/useControllableState.js";import{useDismiss as _}from"../utils/useDismiss.js";import{useOpenChangeComplete as G}from"../utils/useOpenChangeComplete.js";import*as a from"react";import{createSafeContext as I}from"../utils/createContext.js";import{jsx as B}from"react/jsx-runtime";var[V,v]=I("TooltipProvider",{delayDuration:700,skipDelayDuration:300,disableHoverableContent:!0,isOpenDelayedRef:{current:!0},onOpen:()=>{},onClose:()=>{}});function b({children:e,delayDuration:l=700,skipDelayDuration:o=300,disableHoverableContent:t=!0}){let s=a.useRef(!0),n=a.useRef(0);a.useEffect(()=>()=>window.clearTimeout(n.current),[]);let u=a.useCallback(()=>{window.clearTimeout(n.current),s.current=!1},[]),i=a.useCallback(()=>{window.clearTimeout(n.current),n.current=window.setTimeout(()=>{s.current=!0},o)},[o]);return B(V,{delayDuration:l,skipDelayDuration:o,disableHoverableContent:t,isOpenDelayedRef:s,onOpen:u,onClose:i,children:e})}b.displayName="TooltipProvider";import{jsx as P}from"react/jsx-runtime";var[U,m]=M("Tooltip"),q=150;function z({children:e,open:l,defaultOpen:o=!1,onOpenChange:t,onOpenChangeComplete:s,delayDuration:n,disableHoverableContent:u}){let i=v("Tooltip"),C=n??i.delayDuration,k=u??i.disableHoverableContent,R=r.useRef(null),c=r.useRef(0),f=r.useRef(0),[T=!1,p]=W({prop:l,defaultProp:o,onChange:w=>{w?i.onOpen():i.onClose(),t?.(w)}});G(T,R,s),r.useEffect(()=>()=>{window.clearTimeout(c.current),window.clearTimeout(f.current)},[]);let N=r.useCallback(()=>{window.clearTimeout(c.current),window.clearTimeout(f.current),p(!0)},[p]),L=r.useCallback(()=>{window.clearTimeout(c.current),i.isOpenDelayedRef.current?c.current=window.setTimeout(()=>p(!0),C):p(!0)},[p,C,i.isOpenDelayedRef]),y=r.useCallback(()=>{window.clearTimeout(c.current),window.clearTimeout(f.current),p(!1)},[p]),A=r.useCallback(()=>{window.clearTimeout(c.current),window.clearTimeout(f.current),f.current=window.setTimeout(()=>p(!1),q)},[p]);return _({enabled:T,onEscapeKeyDown:y},[]),P(F,{children:P(U,{contentRef:R,contentId:r.useId(),open:T,disableHoverableContent:k,onOpen:N,onDelayedOpen:L,onClose:y,onDelayedClose:A,children:e})})}z.displayName="Tooltip";var J=r.forwardRef((e,l)=>P(K,{...e,...S("tooltip","arrow",e.className),ref:l}));J.displayName="TooltipArrow";import*as D from"react";import{skdxPart as Q}from"../utils/part.js";import{PopperAnchor as X}from"../utils/popper.js";import{composeEventHandlers as d,Primitive as Y}from"../utils/primitive.js";import{jsx as x}from"react/jsx-runtime";var O=D.forwardRef((e,l)=>{let o=m("TooltipTrigger");return x(X,{asChild:!0,children:x(Y.button,{type:"button","aria-describedby":o.open?o.contentId:void 0,"data-state":o.open?"open":"closed",...e,...Q("tooltip","trigger",e.className),ref:l,onPointerEnter:d(e.onPointerEnter,t=>{t.pointerType!=="touch"&&o.onDelayedOpen()}),onPointerLeave:d(e.onPointerLeave,o.disableHoverableContent?o.onClose:o.onDelayedClose),onFocus:d(e.onFocus,o.onOpen),onBlur:d(e.onBlur,o.onClose),onClick:d(e.onClick,o.onClose),onKeyDown:d(e.onKeyDown,t=>{t.key==="Escape"&&o.onClose()})})})});O.displayName="TooltipTrigger";import{Portal as Z}from"../utils/portal.js";import{jsx as $}from"react/jsx-runtime";var g=({forceMount:e,children:l,...o})=>{let t=m("TooltipPortal");return e||t.open?$(Z,{...o,children:l}):null};g.displayName="TooltipPortal";import*as H from"react";import{useComposedRefs as j}from"../utils/composeRefs.js";import{skdxPart as oo}from"../utils/part.js";import{PopperContent as eo}from"../utils/popper.js";import{composeEventHandlers as E}from"../utils/primitive.js";import{jsx as to}from"react/jsx-runtime";var h=H.forwardRef(({forceMount:e,side:l="top",sideOffset:o=4,...t},s)=>{let n=m("TooltipContent"),u=j(s,n.contentRef),i=!n.disableHoverableContent;return e||n.open?to(eo,{component:"tooltip",role:"tooltip",id:n.contentId,"data-state":n.open?"open":"closed",side:l,sideOffset:o,...t,...oo("tooltip","content",t.className),ref:u,onPointerEnter:E(t.onPointerEnter,i?n.onOpen:void 0),onPointerLeave:E(t.onPointerLeave,i?n.onClose:void 0),style:{pointerEvents:i?"auto":"none",...t.style}}):null});h.displayName="TooltipContent";export{z as Tooltip,J as TooltipArrow,h as TooltipContent,g as TooltipPortal,b as TooltipProvider,U as TooltipRootProvider,O as TooltipTrigger,m as useTooltipContext};

package/dist/tooltip/TooltipContent.d.cts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { TooltipContentProps } from './types.cjs';
+/**
+ * The tooltip's floating bubble: `role="tooltip"` with `data-state`
+ * (`open`/`closed`), positioned via the shared popper layer against the
+ * trigger using `side` (defaults to `'top'`, overriding the popper default
+ * of `'bottom'`) / `align` / `sideOffset` (defaults to `4`) / `alignOffset`,
+ * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
+ * `false`. Also exposes `data-side`/`data-align` reflecting the resolved
+ * placement, and the measurement custom properties
+ * `--skdx-tooltip-available-width` / `-available-height` / `-trigger-width` /
+ * `-transform-origin`. Ignores pointer events so it never steals hover from
+ * the page, unless the tooltip was given `disableHoverableContent={false}` —
+ * then it accepts the pointer and stays open while hovered. Mounts only while
+ * open unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <TooltipPortal>
+ *   <TooltipContent side="bottom" sideOffset={8}>
+ *     Helpful hint
+ *     <TooltipArrow />
+ *   </TooltipContent>
+ * </TooltipPortal>
+ * ```
+ */
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tooltip/TooltipContent.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import type { TooltipContentProps } from './types.js';
+/**
+ * The tooltip's floating bubble: `role="tooltip"` with `data-state`
+ * (`open`/`closed`), positioned via the shared popper layer against the
+ * trigger using `side` (defaults to `'top'`, overriding the popper default
+ * of `'bottom'`) / `align` / `sideOffset` (defaults to `4`) / `alignOffset`,
+ * flipping/shifting to avoid viewport collisions unless `avoidCollisions` is
+ * `false`. Also exposes `data-side`/`data-align` reflecting the resolved
+ * placement, and the measurement custom properties
+ * `--skdx-tooltip-available-width` / `-available-height` / `-trigger-width` /
+ * `-transform-origin`. Ignores pointer events so it never steals hover from
+ * the page, unless the tooltip was given `disableHoverableContent={false}` —
+ * then it accepts the pointer and stays open while hovered. Mounts only while
+ * open unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <TooltipPortal>
+ *   <TooltipContent side="bottom" sideOffset={8}>
+ *     Helpful hint
+ *     <TooltipArrow />
+ *   </TooltipContent>
+ * </TooltipPortal>
+ * ```
+ */
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/tooltip/TooltipPortal.d.cts

@@ -0,0 +1,20 @@
+import type { TooltipPortalProps } from './types.cjs';
+/**
+ * Teleports `TooltipContent` to `document.body` (or a custom `container`),
+ * so the tooltip escapes any clipping/`overflow` ancestors. Mounts only
+ * while open unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipPortal>
+ *     <TooltipContent>Helpful hint</TooltipContent>
+ *   </TooltipPortal>
+ * </Tooltip>
+ * ```
+ */
+export declare const TooltipPortal: {
+    ({ forceMount, children, ...props }: TooltipPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/tooltip/TooltipPortal.d.ts

@@ -0,0 +1,20 @@
+import type { TooltipPortalProps } from './types.js';
+/**
+ * Teleports `TooltipContent` to `document.body` (or a custom `container`),
+ * so the tooltip escapes any clipping/`overflow` ancestors. Mounts only
+ * while open unless `forceMount` is set.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipPortal>
+ *     <TooltipContent>Helpful hint</TooltipContent>
+ *   </TooltipPortal>
+ * </Tooltip>
+ * ```
+ */
+export declare const TooltipPortal: {
+    ({ forceMount, children, ...props }: TooltipPortalProps): import("react").JSX.Element | null;
+    displayName: string;
+};

package/dist/tooltip/TooltipProvider.d.cts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { TooltipProviderContextValue, TooltipProviderProps } from './types.cjs';
+export declare const TooltipProviderContext: {
+    (props: TooltipProviderContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useTooltipProviderContext: (consumerName: string) => TooltipProviderContextValue;
+/**
+ * Optional ancestor that coordinates hover-delay timing across multiple
+ * `Tooltip`s: after any tooltip closes, sibling tooltips open instantly
+ * (skipping `delayDuration`) for `skipDelayDuration` ms, matching how OS
+ * tooltips behave when the pointer sweeps between adjacent triggers. Also sets
+ * the default for `disableHoverableContent`, which decides whether the pointer
+ * can travel from a trigger into the bubble without closing it. Renders no DOM
+ * element itself; wrap it once near the root of your app or a toolbar.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={500}>
+ *   <Tooltip>
+ *     <TooltipTrigger>A</TooltipTrigger>
+ *     <TooltipPortal><TooltipContent>Tooltip A</TooltipContent></TooltipPortal>
+ *   </Tooltip>
+ *   <Tooltip>
+ *     <TooltipTrigger>B</TooltipTrigger>
+ *     <TooltipPortal><TooltipContent>Tooltip B</TooltipContent></TooltipPortal>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare function TooltipProvider({ children, delayDuration, skipDelayDuration, disableHoverableContent, }: TooltipProviderProps): React.JSX.Element;
+export declare namespace TooltipProvider {
+    var displayName: string;
+}

package/dist/tooltip/TooltipProvider.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import type { TooltipProviderContextValue, TooltipProviderProps } from './types.js';
+export declare const TooltipProviderContext: {
+    (props: TooltipProviderContextValue & {
+        children: React.ReactNode;
+    }): React.JSX.Element;
+    displayName: string;
+}, useTooltipProviderContext: (consumerName: string) => TooltipProviderContextValue;
+/**
+ * Optional ancestor that coordinates hover-delay timing across multiple
+ * `Tooltip`s: after any tooltip closes, sibling tooltips open instantly
+ * (skipping `delayDuration`) for `skipDelayDuration` ms, matching how OS
+ * tooltips behave when the pointer sweeps between adjacent triggers. Also sets
+ * the default for `disableHoverableContent`, which decides whether the pointer
+ * can travel from a trigger into the bubble without closing it. Renders no DOM
+ * element itself; wrap it once near the root of your app or a toolbar.
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={500}>
+ *   <Tooltip>
+ *     <TooltipTrigger>A</TooltipTrigger>
+ *     <TooltipPortal><TooltipContent>Tooltip A</TooltipContent></TooltipPortal>
+ *   </Tooltip>
+ *   <Tooltip>
+ *     <TooltipTrigger>B</TooltipTrigger>
+ *     <TooltipPortal><TooltipContent>Tooltip B</TooltipContent></TooltipPortal>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+export declare function TooltipProvider({ children, delayDuration, skipDelayDuration, disableHoverableContent, }: TooltipProviderProps): React.JSX.Element;
+export declare namespace TooltipProvider {
+    var displayName: string;
+}

package/dist/tooltip/TooltipTrigger.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { TooltipTriggerProps } from './types.cjs';
+/**
+ * Element that reveals the tooltip on hover (after the configured delay,
+ * ignored for touch pointers) or focus, and doubles as the positioning
+ * anchor for `TooltipContent`. Sets `aria-describedby` (only while open)
+ * and `data-state` (`open`/`closed`). Closes on pointer-leave, blur, click,
+ * or Escape — pointer-leave after a short grace period when the tooltip's
+ * content is hoverable, so the pointer can cross into the bubble instead.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipPortal>
+ *     <TooltipContent>Helpful hint</TooltipContent>
+ *   </TooltipPortal>
+ * </Tooltip>
+ * ```
+ */
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { TooltipTriggerProps } from './types.js';
+/**
+ * Element that reveals the tooltip on hover (after the configured delay,
+ * ignored for touch pointers) or focus, and doubles as the positioning
+ * anchor for `TooltipContent`. Sets `aria-describedby` (only while open)
+ * and `data-state` (`open`/`closed`). Closes on pointer-leave, blur, click,
+ * or Escape — pointer-leave after a short grace period when the tooltip's
+ * content is hoverable, so the pointer can cross into the bubble instead.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipPortal>
+ *     <TooltipContent>Helpful hint</TooltipContent>
+ *   </TooltipPortal>
+ * </Tooltip>
+ * ```
+ */
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/tooltip/index.d.cts

@@ -0,0 +1,6 @@
+export * from './Tooltip.cjs';
+export { TooltipProvider } from './TooltipProvider.cjs';
+export { TooltipTrigger } from './TooltipTrigger.cjs';
+export { TooltipPortal } from './TooltipPortal.cjs';
+export { TooltipContent } from './TooltipContent.cjs';
+export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipPortalProps, TooltipContentProps, } from './types.cjs';

package/dist/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Tooltip.js';
+export { TooltipProvider } from './TooltipProvider.js';
+export { TooltipTrigger } from './TooltipTrigger.js';
+export { TooltipPortal } from './TooltipPortal.js';
+export { TooltipContent } from './TooltipContent.js';
+export type { TooltipProviderProps, TooltipProps, TooltipTriggerProps, TooltipPortalProps, TooltipContentProps, } from './types.js';

package/dist/tooltip/types.d.cts

@@ -0,0 +1,129 @@
+import type * as React from 'react';
+import type { PopperContentProps } from '../utils/popper.cjs';
+import type { PortalProps } from '../utils/portal.cjs';
+import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** @internal Shared delay/skip-delay state distributed from {@link TooltipProvider} to descendant `Tooltip`s via context. Not part of the public API. */
+export interface TooltipProviderContextValue {
+    delayDuration: number;
+    skipDelayDuration: number;
+    disableHoverableContent: boolean;
+    isOpenDelayedRef: React.RefObject<boolean>;
+    onOpen: () => void;
+    onClose: () => void;
+}
+/** Props for {@link TooltipProvider}, an optional ancestor that coordinates hover-delay timing across multiple tooltips. */
+export interface TooltipProviderProps {
+    /**
+     * One or more `Tooltip` trees that share this provider's open/skip-delay timing.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Delay before a tooltip opens on hover (ms). Individual `Tooltip`s can
+     * override this via their own `delayDuration` prop.
+     * @default 700
+     */
+    delayDuration?: number;
+    /**
+     * Window after closing during which sibling tooltips open instantly (ms),
+     * skipping their open delay — mirrors how OS tooltips behave when you
+     * sweep the pointer between adjacent triggers.
+     * @default 300
+     */
+    skipDelayDuration?: number;
+    /**
+     * Whether `TooltipContent` ignores the pointer entirely, so moving off the
+     * trigger closes the tooltip even if the pointer lands on the bubble.
+     *
+     * Set it `false` to let the pointer travel into the content and keep the
+     * tooltip open — a short grace period covers the gap between the two. The
+     * default differs from Radix's: a tooltip here is a pass-through hint unless
+     * it is explicitly made hoverable, and nothing inside one is reachable by
+     * keyboard anyway. Individual `Tooltip`s can override it.
+     * @default true
+     */
+    disableHoverableContent?: boolean;
+}
+/** @internal Shared state distributed from {@link Tooltip} to its parts via context. Not part of the public API. */
+export interface TooltipContextValue {
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    contentId: string;
+    open: boolean;
+    disableHoverableContent: boolean;
+    onOpen: () => void;
+    onDelayedOpen: () => void;
+    onClose: () => void;
+    onDelayedClose: () => void;
+}
+/** Props for the {@link Tooltip} root. */
+export interface TooltipProps {
+    /**
+     * Must contain exactly one `TooltipTrigger` (and, elsewhere in the tree, a
+     * `TooltipPortal`/`TooltipContent` pair) — this is the anchor Tooltip positions against.
+     * @default undefined — renders nothing if omitted.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the tooltip is open, for controlled usage. Pair with `onOpenChange`.
+     * @default undefined — uncontrolled, tracks its own open state internally.
+     */
+    open?: boolean;
+    /**
+     * Whether the tooltip is initially open, for uncontrolled usage.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Fires with the new open state whenever the tooltip opens or closes, controlled or not.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Fires with the new open state once the change has finished on screen —
+     * after `TooltipContent`'s enter or exit animation ends, or as soon as it has
+     * settled when the bubble declares no animation.
+     * @default undefined — no-op if omitted.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /**
+     * Whether `TooltipContent` ignores the pointer, so moving off the trigger
+     * closes this tooltip even if the pointer lands on the bubble. Overrides the
+     * ancestor `TooltipProvider`'s setting.
+     * @default undefined — falls back to the ancestor `TooltipProvider`'s `disableHoverableContent`, or `true` if there is none.
+     */
+    disableHoverableContent?: boolean;
+    /**
+     * Delay before this tooltip opens on hover (ms). Overrides the ancestor
+     * `TooltipProvider`'s `delayDuration` when set; otherwise falls back to it
+     * (or `700` if there is no provider).
+     * @default undefined — falls back to the ancestor `TooltipProvider`'s `delayDuration`, or `700` if there is none.
+     */
+    delayDuration?: number;
+}
+/** Props for {@link TooltipTrigger}, the element that reveals the tooltip on hover/focus and anchors its position. */
+export interface TooltipTriggerProps extends PrimitivePropsWithRef<'button'> {
+}
+/** Props for {@link TooltipPortal}, which teleports its children to `document.body`. */
+export interface TooltipPortalProps extends PortalProps {
+    /**
+     * Render the portal even while the tooltip is closed, instead of
+     * unmounting it. Useful for animation libraries that need the outgoing
+     * content present in the DOM during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}
+/**
+ * Props for {@link TooltipContent}, the floating bubble. Extends the shared
+ * popper positioning props (`side`, `align`, `sideOffset`, `alignOffset`,
+ * `avoidCollisions`, `collisionPadding`, `collisionBoundary`).
+ */
+export interface TooltipContentProps extends PopperContentProps {
+    /**
+     * Keep this bubble mounted even while the tooltip is closed. Useful for
+     * animation libraries that need the outgoing content present in the DOM
+     * during an exit transition.
+     * @default false
+     */
+    forceMount?: boolean;
+}