@astryxdesign/core 0.7.7-canary.c0929c8 → 0.7.7-canary.c19ca12

package/dist/Tooltip/useTooltip.d.ts

@@ -2,6 +2,8 @@
  * @file useTooltip.tsx
  * @input Uses useLayer, usePressPin, React hooks
  * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
+ *   and imperative show() and hide() for an app-built toggle trigger,
+ *   and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
  * SYNC: When modified, update:
@@ -10,6 +12,7 @@
 import { type ReactNode, type RefCallback } from 'react';
 import { type ContextRenderProps, type LayerAlignment, type LayerPlacement } from '../Layer/useLayer.js';
 import type { LayerTouchTrigger } from '../Layer/useTouchTrigger.js';
+import { type LayerTriggerBehavior } from '../Layer/usePressPin.js';
 /**
  * Focus trigger behavior for tooltips
  */
@@ -18,13 +21,6 @@ export type TooltipFocusTrigger = 'auto' | 'always' | 'never';
  * Touch trigger behavior for tooltips
  */
 export type TooltipTouchTrigger = LayerTouchTrigger;
-/**
- * How the trigger opens the tooltip. `adaptive`, the default, previews it on
- * hover and focus, and a tap opens it unless the trigger acts. `hover`
- * previews it on hover and focus, and no touch or pen tap opens it. `toggle`
- * pins it on a click, tap, Enter, or Space on a button trigger.
- */
-export type TooltipTriggerBehavior = 'adaptive' | 'hover' | 'toggle';
 export interface TooltipOptions {
     /**
      * Position placement relative to anchor
@@ -64,30 +60,9 @@ export interface TooltipOptions {
      * - `tap`: tap always opens the tooltip, even on a trigger that acts
      * - `none`: touch never opens the tooltip
      *
-     * It decides only under `triggerBehavior="adaptive"`, the default.
-     *
      * @default 'auto'
      */
     touchTrigger?: TooltipTouchTrigger;
-    /**
-     * How the trigger opens the tooltip:
-     * - `adaptive` (the default): hover and focus preview it. A tap opens it
-     *   unless the trigger performs an action of its own. While `touchTrigger`
-     *   remains, it decides those taps.
-     * - `hover`: hover and focus preview it; no touch or pen tap opens it.
-     * - `toggle`: on a button trigger, a click, a tap, Enter, or Space pins the
-     *   tooltip open, and the same press closes it. Hover and keyboard focus
-     *   still preview it. A pinned tooltip stays until Escape, a second press,
-     *   a press outside, or focus leaving. Astryx clickable rows and cards
-     *   ignore the pinning press, except an Item row on a trigger that is not
-     *   a native button. The `Tooltip` component also stops it at a child
-     *   trigger. A hook caller stops a plain `onClick` ancestor itself. The
-     *   trigger reports `aria-expanded` and `aria-controls`, and the tooltip's
-     *   text is announced once when it pins. `touchTrigger` is ignored.
-     *
-     * @default 'adaptive'
-     */
-    triggerBehavior?: TooltipTriggerBehavior;
     /**
      * Whether the tooltip is enabled.
      * When false, hover/focus triggers are disabled.
@@ -159,6 +134,23 @@ export interface TooltipReturn {
      * silent no-op.
      */
     renderTooltip: (children: ReactNode, props?: Omit<ContextRenderProps, 'positioning'>) => ReactNode;
+    /**
+     * Opens the tooltip now and keeps it open until `hide()`, Escape, a press
+     * outside, or focus leaving its trigger, as a pinned tooltip does. Its text
+     * is announced once. Reports through `onShow`. Under a controlled `isOpen`,
+     * it calls `onShow` and does not change `isOpen`. Does nothing while
+     * `isEnabled` is false.
+     *
+     * Use `show()` and `hide()` to build a toggle-style trigger: your own button
+     * calls them, sets `aria-describedby` and `aria-controls` to `describedBy`
+     * and `aria-expanded` (true while shown), and keeps its own accessible name.
+     */
+    show: () => void;
+    /**
+     * Closes the tooltip now. Reports through `onHide`. Under a controlled
+     * `isOpen`, it calls `onHide` and does not change `isOpen`.
+     */
+    hide: () => void;
 }
 /**
  * Hook for tooltip behavior with hover/focus triggers.
@@ -185,4 +177,29 @@ export interface TooltipReturn {
  * ```
  */
 export declare function useTooltip(options?: TooltipOptions): TooltipReturn;
+/**
+ * Module-only options for `useTooltipWithTriggerBehavior`. Not exported from
+ * the package.
+ */
+export interface TooltipWithTriggerBehaviorOptions extends TooltipOptions {
+    /**
+     * How the trigger opens the tooltip:
+     * - `adaptive` (the default): hover and focus preview it. `touchTrigger`
+     *   decides taps.
+     * - `toggle`: on a button trigger, a click, a tap, Enter, or Space pins the
+     *   tooltip open, and the same press closes it. Hover and keyboard focus
+     *   still preview it. A pinned tooltip stays until Escape, a second press,
+     *   a press outside, or focus leaving. The trigger reports `aria-expanded`
+     *   and `aria-controls`, and the tooltip's text is announced once when it
+     *   pins. `touchTrigger` is ignored. InfoTip uses it.
+     *
+     * @default 'adaptive'
+     */
+    triggerBehavior?: LayerTriggerBehavior;
+}
+/**
+ * `useTooltip` with a trigger behavior. Module-only: InfoTip's press-to-pin
+ * goes through it, and the package does not export it.
+ */
+export declare function useTooltipWithTriggerBehavior(options?: TooltipWithTriggerBehaviorOptions): TooltipReturn;
 //# sourceMappingURL=useTooltip.d.ts.map

package/dist/Tooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AA+ChE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;;;;;;;;;OAiBG;IACH,eAAe,CAAC,EAAE,sBAAsB,CAAC;IAEzC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;CAChB;AAyBD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAqdtE"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,0BAA0B,CAAC;AAKhE,OAAO,EAAc,KAAK,oBAAoB,EAAC,MAAM,sBAAsB,CAAC;AA0C5E;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;;;;;OASG;IACH,YAAY,CAAC,EAAE,mBAAmB,CAAC;IAEnC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;;OAOG;IACH,aAAa,EAAE,CACb,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;;;;;;;;;OAUG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;;OAGG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,wBAAgB,UAAU,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAOtE;AAED;;;GAGG;AACH,MAAM,WAAW,iCAAkC,SAAQ,cAAc;IACvE;;;;;;;;;;;;OAYG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,6BAA6B,CAC3C,OAAO,GAAE,iCAAsC,GAC9C,aAAa,CA2df"}

package/dist/Tooltip/useTooltip.js

@@ -6,12 +6,15 @@
  * @file useTooltip.tsx
  * @input Uses useLayer, usePressPin, React hooks
  * @output Exports useTooltip hook with stable trigger refs for hover/focus/tap tooltips
+ *   and imperative show() and hide() for an app-built toggle trigger,
+ *   and the module-only useTooltipWithTriggerBehavior that InfoTip's press-to-pin uses
  * @position Layer hook; builds on useLayer for tooltip behavior
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Tooltip/index.ts
  */
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createTriggerFocusGate } from "../utils/triggerFocus.js";
 import * as stylex from '@stylexjs/stylex';
 import { useLayerInternal } from "../Layer/useLayer.js";
 import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
@@ -51,35 +54,6 @@ const styles = {
  * Touch trigger behavior for tooltips
  */
 
-/**
- * How the trigger opens the tooltip. `adaptive`, the default, previews it on
- * hover and focus, and a tap opens it unless the trigger acts. `hover`
- * previews it on hover and focus, and no touch or pen tap opens it. `toggle`
- * pins it on a click, tap, Enter, or Space on a button trigger.
- */
-
-/**
- * Check if an element is naturally focusable
- */
-function isFocusable(element) {
-  // Elements with explicit tabindex
-  if (element.hasAttribute('tabindex')) {
-    return element.tabIndex >= 0;
-  }
-
-  // Naturally focusable elements
-  const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
-  if (focusableTags.includes(element.tagName)) {
-    return !element.disabled;
-  }
-
-  // Elements with contenteditable
-  if (element.isContentEditable) {
-    return true;
-  }
-  return false;
-}
-
 /**
  * Hook for tooltip behavior with hover/focus triggers.
  *
@@ -106,6 +80,24 @@ function isFocusable(element) {
  */
 
 export function useTooltip(options = {}) {
+  // The option is fixed to `adaptive`, so an options object that carries it at
+  // runtime cannot reach the press-to-pin path.
+  return useTooltipWithTriggerBehavior({
+    ...options,
+    triggerBehavior: 'adaptive'
+  });
+}
+
+/**
+ * Module-only options for `useTooltipWithTriggerBehavior`. Not exported from
+ * the package.
+ */
+
+/**
+ * `useTooltip` with a trigger behavior. Module-only: InfoTip's press-to-pin
+ * goes through it, and the package does not export it.
+ */
+export function useTooltipWithTriggerBehavior(options = {}) {
   const {
     placement = 'above',
     alignment = 'center',
@@ -175,6 +167,9 @@ export function useTooltip(options = {}) {
     isHeldOpen: isPressHeldOpen,
     attach: attachPressPin,
     unpin: unpinPress,
+    hold: holdPress,
+    release: releasePress,
+    isAppHeld,
     isPinShown,
     touch: {
       isTouchPointerRef,
@@ -277,25 +272,11 @@ export function useTooltip(options = {}) {
     scheduleHide();
   }, [isTouchPointerRef, layerId, scheduleHide]);
 
-  // Under `auto`, whether focus counts is decided when it arrives, not when
-  // the listeners attach: a roving-tabindex member that was `tabindex="-1"`
-  // then can be the tab stop now. A trigger that receives focus is focusable
-  // by definition; focus inside it counts only while the trigger is
-  // focusable too, so a plain wrapper still ignores its children's focus.
-  const isFocusForTrigger = useCallback(e => {
-    if (focusTrigger === 'always') {
-      return true;
-    }
-    const triggerEl = e.currentTarget;
-    return triggerEl != null && (e.target === triggerEl || isFocusable(triggerEl));
-  }, [focusTrigger]);
-
-  // Whether the trigger's current focus counted when it arrived, so its blur
-  // hides the tooltip even if the trigger has since left the tab order.
-  const focusCountedRef = useRef(false);
+  // Under `auto`, whether focus counts is decided when it arrives, and a
+  // focus that counted still hides on blur (utils/triggerFocus.ts).
+  const [focusGate] = useState(createTriggerFocusGate);
   const handleFocusIn = useCallback(e => {
-    focusCountedRef.current = isFocusForTrigger(e);
-    if (!isEnabled || !focusCountedRef.current) {
+    if (!focusGate.focusIn(e, focusTrigger) || !isEnabled) {
       return;
     }
     // A tap focuses the trigger it activates, and `:focus-visible` does not
@@ -314,18 +295,17 @@ export function useTooltip(options = {}) {
     }
     clearTimeouts();
     showLayer();
-  }, [isEnabled, isFocusForTrigger, isTouchInteraction, clearTimeouts, showLayer]);
+  }, [focusGate, focusTrigger, isEnabled, isTouchInteraction, clearTimeouts, showLayer]);
 
   // A pinned tooltip's focus-leave close is the pin's own: it listens on the
   // trigger whatever `focusTrigger` is. This schedules the unpinned hide,
   // which a held tooltip skips.
   const handleFocusOut = useCallback(e => {
-    if (!focusCountedRef.current && !isFocusForTrigger(e)) {
+    if (!focusGate.focusOut(e, focusTrigger)) {
       return;
     }
-    focusCountedRef.current = false;
     scheduleHide();
-  }, [isFocusForTrigger, scheduleHide]);
+  }, [focusGate, focusTrigger, scheduleHide]);
 
   // Pressing the trigger hides its own tooltip: once the control is activated
   // the hint has served its purpose, and a tooltip lingering over a
@@ -335,9 +315,10 @@ export function useTooltip(options = {}) {
   // A touch press is a different gesture (it may be the only way to open the
   // tooltip at all), so the touch path answers it first.
   const handlePointerDown = useCallback(event => {
-    // A press on a toggle trigger pins or closes through its click. It
-    // neither hides the preview here nor waits for a tap verdict.
-    if (isToggleTrigger(triggerRef.current)) {
+    // A toggle trigger's press pins or closes through its click. The app's
+    // hide() closes a held tooltip. Neither path hides here or waits for a
+    // tap verdict.
+    if (isToggleTrigger(triggerRef.current) || isAppHeld()) {
       return;
     }
     if (handleTouchPointerDown(event)) {
@@ -348,7 +329,7 @@ export function useTooltip(options = {}) {
     }
     clearTimeouts();
     hideLayer();
-  }, [isToggleTrigger, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
+  }, [isToggleTrigger, isAppHeld, handleTouchPointerDown, isOpen, clearTimeouts, hideLayer]);
 
   // Interaction ref that handles event listeners only
   const interactionRef = useCallback(el => {
@@ -372,7 +353,7 @@ export function useTooltip(options = {}) {
       el.addEventListener('pointerdown', handlePointerDown);
 
       // Focus listeners unless focus never opens the tooltip; `auto` decides
-      // per event (isFocusForTrigger).
+      // per event (utils/triggerFocus.ts).
       if (focusTrigger !== 'never') {
         el.addEventListener('focusin', handleFocusIn);
         el.addEventListener('focusout', handleFocusOut);
@@ -413,9 +394,11 @@ export function useTooltip(options = {}) {
       showLayer();
     } else {
       clearTimeouts();
+      // A pin or app hold ends when the consumer closes the tooltip.
+      unpinPress();
       hideLayer();
     }
-  }, [isOpen, clearTimeouts, showLayer, hideLayer]);
+  }, [isOpen, clearTimeouts, showLayer, hideLayer, unpinPress]);
 
   // Dismiss on Escape (WCAG 1.4.13 — dismissible) through the shared layer
   // stack. A visible tip is the top-most layer, so it takes the press and
@@ -495,12 +478,22 @@ export function useTooltip(options = {}) {
       children: children
     }), renderProps);
   }, [renderLayer, placement, alignment, popoverXstyle, cancelHide, scheduleHide, contentRefs]);
+  const show = useCallback(() => {
+    clearTimeouts();
+    holdPress();
+  }, [clearTimeouts, holdPress]);
+  const hide = useCallback(() => {
+    clearTimeouts();
+    releasePress();
+  }, [clearTimeouts, releasePress]);
   return {
     ref,
     positionRef: layerRef,
     interactionRef,
     anchorId: layerAnchorId,
     describedBy: layerId,
-    renderTooltip
+    renderTooltip,
+    show,
+    hide
   };
 }

package/dist/TopNav/TopNavItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavItem.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA2DhF,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAWD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EACL,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,IAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAkGjB;yBAnHe,UAAU"}
+{"version":3,"file":"TopNavItem.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAY5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA2DhF,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yBAAyB;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC;IACnD;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAWD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,IAAI,EACJ,MAAM,EACN,OAAO,EACP,KAAK,EACL,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,QAAQ,EACR,IAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,eAAe,+BAmGjB;yBApHe,UAAU"}

package/dist/TopNav/TopNavItem.js

@@ -22,7 +22,7 @@ import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { useTopNavRenderMode } from "./TopNavRenderContext.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { mergeProps } from "../utils/index.js";
-import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
+import { useCloseMobileDrawerOnActivate } from "../AppShell/useCloseMobileDrawerOnActivate.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
@@ -112,9 +112,7 @@ export function TopNavItem({
   const pressable = usePressFeedback();
   const LinkComponent = useLinkComponent(as);
   const renderMode = useTopNavRenderMode();
-  const {
-    closeMobileNav
-  } = useAppShellMobile();
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(renderMode === 'drawer');
 
   // A disabled item renders as a plain <a> with no href: an href-less anchor
   // is not focusable and exposes no link affordance, so programmatic focus +
@@ -129,14 +127,13 @@ export function TopNavItem({
   // Drawer mode — render as a SideNavItem-style vertical list element
   // =========================================================================
   if (renderMode === 'drawer') {
+    const activate = closeDrawerAfter(onClick);
     const handleDrawerClick = e => {
       if (isDisabled) {
         preventDefaultClick(e);
         return;
       }
-      // Forward the original onClick if present
-      onClick?.(e);
-      closeMobileNav();
+      activate?.(e);
     };
     return /*#__PURE__*/_jsxs(Root, {
       ref: ref,

package/dist/TopNav/TopNavMegaMenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMegaMenuItem.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsG5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,KAAK,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,EAAE,EACF,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAsFzB;yBAnGe,kBAAkB"}
+{"version":3,"file":"TopNavMegaMenuItem.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMegaMenuItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa5C,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsG5C,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,SAAS,CAAC,WAAW,CAAC,EACtB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,KAAK,EACL,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,EAAE,EACF,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,SAAS,EACb,EAAE,uBAAuB,qBAuFzB;yBApGe,kBAAkB"}

package/dist/TopNav/TopNavMegaMenuItem.js

@@ -22,7 +22,7 @@ import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { useTopNavRenderMode } from "./TopNavRenderContext.js";
 import { mergeProps } from "../utils/index.js";
-import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
+import { useCloseMobileDrawerOnActivate } from "../AppShell/useCloseMobileDrawerOnActivate.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
@@ -112,9 +112,7 @@ export function TopNavMegaMenuItem({
   const pressable = usePressFeedback();
   const renderMode = useTopNavRenderMode();
   const LinkComponent = useLinkComponent(as);
-  const {
-    closeMobileNav
-  } = useAppShellMobile();
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(renderMode === 'drawer');
 
   // =========================================================================
   // Drawer mode — matches SideNavItem / TopNavMenu drawer appearance
@@ -124,10 +122,9 @@ export function TopNavMegaMenuItem({
     const elementProps = Element === 'button' ? {
       type: 'button'
     } : {};
-    const handleDrawerClick = () => {
+    const handleDrawerClick = closeDrawerAfter(() => {
       onClick?.();
-      closeMobileNav();
-    };
+    });
     return /*#__PURE__*/_jsxs(Element, {
       ...restProps,
       ref: ref,

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqN5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,IAAI,EACR,EAAE,eAAe,4BAsSjB;yBAnTe,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAaf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqN5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,EACf,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,GAAG,IAAI,EACR,EAAE,eAAe,4BAuSjB;yBApTe,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -31,7 +31,7 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import { navItemStyles } from "../NavItem/navItemStyles.stylex.js";
 import { useTopNavSlot } from "./TopNavContext.js";
 import { useTopNavRenderMode } from "./TopNavRenderContext.js";
-import { useAppShellMobile } from "../AppShell/AppShellMobileContext.js";
+import { useCloseMobileDrawerOnActivate } from "../AppShell/useCloseMobileDrawerOnActivate.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { isSafeUrl } from "../utils/safeUrl.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -212,9 +212,7 @@ export function TopNavMenu({
 }) {
   const pressable = usePressFeedback();
   const renderMode = useTopNavRenderMode();
-  const {
-    closeMobileNav
-  } = useAppShellMobile();
+  const closeDrawerAfter = useCloseMobileDrawerOnActivate(renderMode === 'drawer');
   const LinkComponent = useLinkComponent();
   const [drawerExpanded, setDrawerExpanded] = useState(false);
   const menuId = useId();
@@ -351,10 +349,9 @@ export function TopNavMenu({
           children: items.map(item => /*#__PURE__*/_jsxs(LinkComponent, {
             href: item.href,
             ...pressable,
-            onClick: _e => {
+            onClick: closeDrawerAfter(_e => {
               item.onClick?.();
-              closeMobileNav();
-            },
+            }),
             ...focusOutlineProps.focusVisible(navItemStyles.item, interactionOverlayStyles.backgroundColor, drawerStyles.item),
             children: [isRenderable(item.icon) && /*#__PURE__*/_jsx("span", {
               ...{

package/dist/Typeahead/TypeaheadItem.d.ts

@@ -31,7 +31,8 @@ export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> e
      */
     isDisabled?: boolean;
     /**
-     * Group label for grouping items visually.
+     * This prop has no effect. Set `item.auxiliaryData.group` on search-source
+     * items to group results in Typeahead or BaseTypeahead.
      */
     group?: string;
 }

package/dist/Typeahead/TypeaheadItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAyBvB;yBApCe,aAAa"}
+{"version":3,"file":"TypeaheadItem.d.ts","sourceRoot":"","sources":["../../src/Typeahead/TypeaheadItem.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,UAAkB,EAClB,KAAK,EAAE,MAAM,EACb,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAyBvB;yBApCe,aAAa"}

package/dist/animator/createAnimator.d.ts

@@ -0,0 +1,98 @@
+/**
+ * A channel the animator drives. `x` and `y` translate the element (px).
+ * `scale` scales it about its transform origin (1 is its size). `rotate`
+ * turns it (degrees, clockwise), and `opacity` fades it (0 to 1).
+ */
+export type AnimatorChannel = 'x' | 'y' | 'scale' | 'rotate' | 'opacity';
+/**
+ * Values by channel. A velocity uses the same keys, in units per second:
+ * px/s, scale per second, deg/s, opacity per second.
+ */
+export type AnimatorValues = Partial<Record<AnimatorChannel, number>>;
+/** Every channel's value (or velocity), as `get` and `getVelocity` read it. */
+export type AnimatorSnapshot = Readonly<Record<AnimatorChannel, number>>;
+/** Options of `AnimatorHandle.animate`. */
+export interface AnimatorAnimateOptions {
+    /**
+     * Each channel's velocity at the start, such as a drag's release velocity.
+     * A channel without one keeps the
+     * velocity it has on screen, so an `animate` that interrupts another
+     * carries on smoothly.
+     */
+    velocity?: AnimatorValues;
+}
+/**
+ * A release velocity for `AnimatorHandle.decay`, per channel, in its units
+ * per second. That is px/s for `x` and `y`, and degrees per second for
+ * `rotate`. `scale` and `opacity` take their units per second.
+ */
+export type AnimatorDecayVelocity = AnimatorValues;
+/**
+ * Animates one element. Each method acts on the channels it is given and
+ * leaves the others where they are.
+ */
+export interface AnimatorHandle {
+    /**
+     * Springs the given channels to `target` on the `springs.stateChange`
+     * motion role, from wherever they are on screen. The promise resolves when
+     * they arrive, or as soon as a later `animate`, `decay`, `set` or `stop`
+     * takes any of them over.
+     */
+    animate(target: AnimatorValues, options?: AnimatorAnimateOptions): Promise<void>;
+    /**
+     * Coasts the given channels from a release velocity, slowing as a scroll
+     * view's momentum does. It resolves when they stop, or when another call
+     * takes them over. The distance follows from the velocity alone: there are
+     * no bounds, except that opacity stops at 0 or 1.
+     */
+    decay(velocity: AnimatorDecayVelocity): Promise<void>;
+    /**
+     * Puts the given channels at these values at once, ending their motion:
+     * the per-frame write of a drag.
+     */
+    set(values: AnimatorValues): void;
+    /** Every channel's value on screen now. */
+    get(): AnimatorSnapshot;
+    /** Every channel's velocity on screen now, in units per second. */
+    getVelocity(): AnimatorSnapshot;
+    /** Halts every channel where it is on screen. */
+    stop(): void;
+}
+/** What `createAnimator` returns: the handle, and `destroy`. */
+export interface Animator extends AnimatorHandle {
+    /**
+     * Stops every motion and lets go of the element; the element keeps the
+     * values it shows. The animator does nothing after this.
+     */
+    destroy(): void;
+}
+/**
+ * An animator whose element is attached later, through `attach`. It is the
+ * one construction `createAnimator` and `useAnimator` share, so the hook has
+ * no behavior of its own. Not exported from the package.
+ */
+export declare function createAttachableAnimator(): {
+    readonly animator: Animator;
+    readonly attach: (element: HTMLElement | null) => void;
+};
+/**
+ * Animates `element` with the motion Core uses. `animate` springs channels to
+ * a target on the state-change motion, and `decay` coasts them from a release
+ * velocity. `set` jumps them, `get` and `getVelocity` read them, `stop` halts
+ * them, and `destroy` lets the element go. Under Reduce Motion every call is
+ * planned. A move becomes a short cross-fade on a touch screen, and it lands
+ * at once with a mouse.
+ *
+ * Use one animator per element: two on one element overwrite each other.
+ *
+ * @example
+ * ```
+ * const card = document.querySelector('.card');
+ * const animator = createAnimator(card);
+ * await animator.animate({x: 0, rotate: 0}, {velocity: {x: -900}});
+ * animator.decay({x: 2400});
+ * animator.destroy();
+ * ```
+ */
+export declare function createAnimator(element: HTMLElement): Animator;
+//# sourceMappingURL=createAnimator.d.ts.map

package/dist/animator/createAnimator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAnimator.d.ts","sourceRoot":"","sources":["../../src/animator/createAnimator.ts"],"names":[],"mappings":"AA+BA;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzE;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAEtE,+EAA+E;AAC/E,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;AAEzE,2CAA2C;AAC3C,MAAM,WAAW,sBAAsB;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B;;;;;OAKG;IACH,OAAO,CACL,MAAM,EAAE,cAAc,EACtB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,QAAQ,EAAE,qBAAqB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtD;;;OAGG;IACH,GAAG,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAClC,2CAA2C;IAC3C,GAAG,IAAI,gBAAgB,CAAC;IACxB,mEAAmE;IACnE,WAAW,IAAI,gBAAgB,CAAC;IAChC,iDAAiD;IACjD,IAAI,IAAI,IAAI,CAAC;CACd;AAED,gEAAgE;AAChE,MAAM,WAAW,QAAS,SAAQ,cAAc;IAC9C;;;OAGG;IACH,OAAO,IAAI,IAAI,CAAC;CACjB;AAqFD;;;;GAIG;AACH,wBAAgB,wBAAwB,IAAI;IAC1C,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;CACxD,CA+FA;AAKD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,QAAQ,CAI7D"}