@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.58c5b8a

package/dist/Drawer/Drawer.js

@@ -70,13 +70,15 @@ import { layerTextReset } from "../Layer/layerTextReset.stylex.js";
 import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
 import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
 import { useModalOutlet } from "../Layer/modalOutlet.js";
+import { useBackdropPress } from "../Layer/useBackdropPress.js";
 import { layerClickBoundary } from "../Layer/layerClickBoundary.js";
 import { ModalAnnounceProvider } from "../hooks/ModalAnnounceProvider.js";
 import { composeEventHandlers, mergeProps, themeProps } from "../utils/index.js";
+import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { container, overlayPaddingReset } from "../Layout/index.js";
 import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
 import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // =============================================================================
 // Styles
 // =============================================================================
@@ -84,7 +86,6 @@ import { useDrawerDialogPresence } from "./useDrawerDialogPresence.js";
 // Below this viewport width the drawer preserves a fixed reveal of the page
 // behind instead of growing proportionally with the viewport. 640px is the
 // repo's mobile breakpoint.
-import { jsx as _jsx } from "react/jsx-runtime";
 const MOBILE_BREAKPOINT = 640;
 
 // Material's established mobile drawer pattern leaves a 56dp reveal. Using
@@ -155,7 +156,6 @@ const styles = {
   },
   scrim: {
     kGyWv1: "xnixb3f",
-    kba3nw: "x1abwkk1",
     k5sjJv: "xph5o2a",
     kND0Po: "x167zut7",
     k9an0g: "xft5bk6",
@@ -347,13 +347,12 @@ export function Drawer({
     }
   }, [allowEscape, handleDismiss, shouldDismissOnCloseRequest]);
 
-  // Clicks on the ::backdrop target the <dialog> element itself; clicks on
-  // drawer content always target a child (the content area fills the panel).
-  const handleClick = useCallback(event => {
-    if (event.target === event.currentTarget && hasScrim && allowScrimClick) {
-      onOpenChange(false);
-    }
-  }, [allowScrimClick, hasScrim, onOpenChange]);
+  // A press on the ::backdrop targets the <dialog> itself (the content area
+  // fills the panel). The press must start and end there.
+  const handleScrimPress = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+  const scrimPress = useBackdropPress(handleScrimPress, hasScrim && allowScrimClick);
   const widthValue = typeof width === 'number' ? `${width}px` : width;
   const isFullWidthOnMobile = experimental?.isFullWidthOnMobile ?? false;
   const mobileWidth = isFullWidthOnMobile ? MOBILE_WIDTH_FULL : `min(${widthValue}, calc(100dvw - ${MOBILE_PAGE_REVEAL}px))`;
@@ -391,8 +390,13 @@ export function Drawer({
     } : undefined),
     ...layerClickBoundary({
       ...safeProps,
-      onClick: composeEventHandlers(onClickProp, handleClick)
+      onClick: composeEventHandlers(onClickProp, scrimPress.onClick)
     }),
+    // The hook records where the press started first. The caller's capture
+    // handler then runs, also when a child prevented default.
+    onPointerDownCapture: chainEventHandlers(scrimPress.onPointerDownCapture, safeProps.onPointerDownCapture),
+    onPointerUpCapture: chainEventHandlers(scrimPress.onPointerUpCapture, safeProps.onPointerUpCapture),
+    onPointerCancelCapture: chainEventHandlers(scrimPress.onPointerCancelCapture, safeProps.onPointerCancelCapture),
     onKeyDown: onKeyDownProp,
     onCancel: handleCancel,
     children: /*#__PURE__*/_jsx(ModalAnnounceProvider, {

package/dist/Drawer/useDrawerDialogPresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAaf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AAuDF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}
+{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAef,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AA6DF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}

package/dist/Drawer/useDrawerDialogPresence.js

@@ -25,6 +25,8 @@
  */
 import { useEffect, useRef } from 'react';
 import { flushSync } from 'react-dom';
+import { notifyTopLayerEntry } from "../Layer/modalOutlet.js";
+import { runPopoverOperation } from "../Layer/popoverOperations.js";
 
 /** Slack past the computed transition before the backstop gives up waiting. */
 const EXIT_BACKSTOP_BUFFER_MS = 50;
@@ -50,7 +52,13 @@ function showDrawerHost(dialog, isModal) {
   if (isModal) {
     dialog.showModal();
   } else if (typeof dialog.showPopover === 'function') {
-    dialog.showPopover();
+    // The dialog's show focuses its first control. A tooltip on that control
+    // then asks to show. The browser refuses a show inside another show.
+    // Counting this show makes the tooltip wait until it ends.
+    runPopoverOperation(dialog.ownerDocument, () => dialog.showPopover());
+    // The drawer is now the newest top-layer entry: global hosts shown before
+    // it (the toast viewport) re-enter above it, as they do above a modal.
+    notifyTopLayerEntry();
   } else {
     // Reduced fallback for browsers below the Popover API support floor.
     dialog.show();

package/dist/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -279,6 +279,15 @@ function holdInvokerThroughPress(control, popoverId) {
   doc.addEventListener('pointerup', onPressEnd, true);
   doc.addEventListener('pointercancel', onPressEnd, true);
 }
+
+/**
+ * The name of a menu opened from a custom trigger: the caller's `aria-label`
+ * when it is a non-empty string, else the trigger's own accessible name. The
+ * popover and the bottom sheet both name the menu through this.
+ */
+function resolveCustomTriggerMenuName(callerLabel, triggerName) {
+  return typeof callerLabel === 'string' && callerLabel.trim() !== '' ? callerLabel : triggerName;
+}
 function DropdownMenuBottomSheet({
   button: buttonFromProps,
   renderTrigger,
@@ -340,10 +349,18 @@ function DropdownMenuBottomSheet({
   useEffect(() => {
     void preloadMenuBottomSheetActionList();
   }, []);
+  // The control's name is only readable from the DOM once it is rendered.
+  const [triggerName, setTriggerName] = useState(undefined);
+  useIsomorphicLayoutEffect(() => {
+    if (renderTrigger != null && isOpen) {
+      setTriggerName(readAccessibleName(buttonRef.current));
+    }
+  }, [renderTrigger, isOpen]);
+  const rootTitle = (renderTrigger != null ? resolveCustomTriggerMenuName(rest['aria-label'], triggerName) : undefined) ?? button.label;
   const currentSubmenu = submenuPath.at(-1);
   const currentItems = currentSubmenu?.items ?? items;
-  const currentTitle = currentSubmenu?.label ?? button.label;
-  const sheetLabel = typeof currentTitle === 'string' ? currentTitle : button.label;
+  const currentTitle = currentSubmenu?.label ?? rootTitle;
+  const sheetLabel = typeof currentTitle === 'string' ? currentTitle : rootTitle;
   const setOpen = useCallback(nextIsOpen => {
     if (!nextIsOpen) {
       setSubmenuPath([]);
@@ -734,8 +751,7 @@ function DropdownMenuPopover({
   // The design system's button names the menu by its label. A custom trigger
   // names it by reference (or the caller's `aria-label` does), so that name
   // is read off the control as the menu opens.
-  const callerMenuLabel = rest['aria-label'];
-  const menuLabel = renderTrigger != null ? typeof callerMenuLabel === 'string' && callerMenuLabel.trim() !== '' ? callerMenuLabel : triggerName : typeof button.label === 'string' ? button.label : undefined;
+  const menuLabel = renderTrigger != null ? resolveCustomTriggerMenuName(rest['aria-label'], triggerName) : typeof button.label === 'string' ? button.label : undefined;
   const popover = usePopover({
     onHide: handleLayerHide,
     onShow: handleLayerShow,

package/dist/Field/Field.js

@@ -22,11 +22,11 @@ import { FieldStatus } from "../FieldStatus/FieldStatus.js";
 import { useFieldStatusAnnouncement } from "../FieldStatus/useFieldStatusAnnouncement.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, borderVars, sizeVars } from "../theme/tokens.stylex.js";
-import { mergeProps } from "../utils/index.js";
+import { mergeProps } from "../utils/mergeProps.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { FormLayoutContext } from "../FormLayout/FormLayoutContext.js";
 import { Text } from "../Text/Text.js";
-import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const styles = {

package/dist/Field/PanelSearchInput.d.ts

@@ -72,6 +72,14 @@ export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>,
      * the field to the same height as its rows.
      */
     fieldXstyle?: StyleXStyles;
+    /**
+     * Draw the field as the shared input box — the input border, accent while
+     * focused, surface and radius — instead of the borderless panel row. A
+     * touch sheet is a full-width surface, not a bordered panel, so its field
+     * reads as a form input.
+     * @default false
+     */
+    hasInputBox?: boolean;
 }
 /**
  * Search row for the top of a dropdown panel: magnifier, borderless input, and
@@ -82,7 +90,7 @@ export interface PanelSearchInputProps extends Omit<BaseProps<HTMLInputElement>,
  * option list's inline padding); every other prop (`role`, `aria-*`, `id`, …)
  * passes through to the `<input>`, so the caller owns the combobox wiring.
  */
-export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, fieldXstyle, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
+export declare function PanelSearchInput({ ref, label, clearLabel, placeholder, value, onValueChange, onKeyDown, onFocus, onBlur, onContainerKeyDown, fieldXstyle, hasInputBox, xstyle, className, style, ...props }: PanelSearchInputProps): import("react").JSX.Element;
 export declare namespace PanelSearchInput {
     var displayName: string;
 }

package/dist/Field/PanelSearchInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiF5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAEhE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAmFvB;yBAnGe,gBAAgB"}
+{"version":3,"file":"PanelSearchInput.d.ts","sourceRoot":"","sources":["../../src/Field/PanelSearchInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAAwB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAenD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkF5C,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CACjD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAE5B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,6EAA6E;IAC7E,UAAU,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,wCAAwC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IAEzD,0EAA0E;IAC1E,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEpD,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAEnD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,cAAc,CAAC,CAAC;IAEhE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,UAAU,EACV,WAAW,EACX,KAAK,EACL,aAAa,EACb,SAAS,EACT,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,WAAW,EACX,WAAmB,EACnB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAoFvB;yBArGe,gBAAgB"}

package/dist/Field/PanelSearchInput.js

@@ -48,6 +48,7 @@ import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, durationVars, easeVars, radiusVars, spacingVars, typeScaleVars, typographyVars } from "../theme/tokens.stylex.js";
 import { textEntryTraitAttributes } from "./textEntryTraits.js";
+import { inputWrapperStyles } from "./inputStyles.stylex.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
   wrapper: {
@@ -101,6 +102,7 @@ export function PanelSearchInput({
   onBlur,
   onContainerKeyDown,
   fieldXstyle,
+  hasInputBox = false,
   xstyle,
   className,
   style,
@@ -146,7 +148,7 @@ export function PanelSearchInput({
     ...mergeProps(stylex.props(styles.wrapper, xstyle), className, style),
     children: /*#__PURE__*/_jsxs("div", {
       "data-keyboard-focus": isKeyboardFocus ? 'true' : undefined,
-      ...stylex.props(styles.field, isKeyboardFocus && styles.fieldKeyboardFocus, fieldXstyle),
+      ...stylex.props(styles.field, isKeyboardFocus && styles.fieldKeyboardFocus, hasInputBox && inputWrapperStyles.base, fieldXstyle),
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "search",
         size: "sm",

package/dist/HoverCard/HoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAG7E,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;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;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CAoL/B;yBAtMe,SAAS"}
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/HoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACtE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,YAAY,EACV,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,gBAAgB,CAAC;AA6ExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;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;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAEtC;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAiBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,SAAmB,EACnB,SAAoB,EACpB,KAAW,EACX,SAAe,EACf,YAAqB,EACrB,YAAqB,EACrB,SAAgB,EAChB,KAAK,EACL,YAAY,EACZ,kBAA2B,EAC3B,MAAM,EACN,aAAa,EACb,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,cAAc,GAAG,YAAY,CA2M/B;yBA7Ne,SAAS"}

package/dist/HoverCard/HoverCard.js

@@ -15,7 +15,8 @@
  * - /apps/storybook/stories/HoverCard.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/HoverCard/ (showcase blocks)
  */
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { observeMutations } from "../utils/sharedMutationObserver.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import * as stylex from '@stylexjs/stylex';
 import { useHoverCard } from "./useHoverCard.js";
@@ -138,6 +139,30 @@ export function HoverCard({
     onHide: handleHide
   });
 
+  // The wrapper's first element is the trigger, and it can be replaced after
+  // mount: by new children, or by a child component that swaps its own root
+  // without a render here. Syncs with the DOM: on a replacement the wiring
+  // below re-runs, so the old element is released before the new one is wired.
+  const [triggerReplacements, setTriggerReplacements] = useState(0);
+  const observedTriggerRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (textOnly || wrapper == null) {
+      return;
+    }
+    observedTriggerRef.current = wrapper.firstElementChild;
+    return observeMutations(wrapper, {
+      childList: true
+    }, () => {
+      const trigger = wrapper.firstElementChild;
+      if (trigger === observedTriggerRef.current) {
+        return;
+      }
+      observedTriggerRef.current = trigger;
+      setTriggerReplacements(count => count + 1);
+    });
+  }, [textOnly]);
+
   // For element children with display:contents, attach ref to first child
   useIsomorphicLayoutEffect(() => {
     if (textOnly) {
@@ -224,7 +249,7 @@ export function HoverCard({
         firstChild.removeAttribute('aria-describedby');
       }
     };
-  }, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy]);
+  }, [textOnly, label, hoverCard.ref, hoverCard.id, hoverCard.isOpen, hoverCard.describedBy, triggerReplacements]);
 
   // While closed, useLayer leaves only an inert <template> marker at this JSX
   // position. When the card needs to open, it uses that marker to keep the

package/dist/Icon/Icon.d.ts

@@ -105,7 +105,11 @@ export type IconType = ComponentType<SVGProps<SVGSVGElement>>;
  * Extends SVGProps to allow passing additional SVG attributes (used when icon is a component).
  */
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'color'> {
-    /** Ref forwarded to the root element */
+    /**
+     * Ref to the rendered SVG element when `icon` is an icon component. A
+     * semantic or namespaced name renders inside an internal wrapper, and the
+     * ref is not attached.
+     */
     ref?: React.Ref<SVGSVGElement>;
     /**
      * Icon to render. Can be:

package/dist/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAyBD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAoDX;yBA/De,IAAI;;;AA2IpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,EAAC,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAC3C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAInD,OAAO,KAAK,EAAC,QAAQ,EAAE,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AACvE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAC;AAIzC,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAEhE,YAAY,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAiDhD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8Df,CAAC;AAMH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,QAAQ,CAAC,aAAa,CAAC,EACvB,KAAK,GAAG,OAAO,CAChB;IACC;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,kBAAkB,CAAC;IAC/C;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;;;;;;;;;OAeG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AA6BD;;;;;;;GAOG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAiB,EACjB,IAAI,EAAE,QAAQ,EACd,OAAO,EACP,KAAK,EACL,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,qBAoDX;yBA/De,IAAI;;;AA2IpB;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,QAAQ,EAChC,KAAK,CAAC,EAAE;IAAC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,SAAS,CAAA;CAAC,GAC3C,KAAK,CAAC,SAAS,CAYjB"}

package/dist/Icon/Icon.js

@@ -193,7 +193,9 @@ const colorStyles = {
  *
  * - Non-empty `label` → meaningful image: `role="img"` + `aria-label`, and no
  *   `aria-hidden` (an `aria-hidden` element is removed from the accessibility
- *   tree, so its accessible name would be ignored).
+ *   tree, so its accessible name would be ignored). Icon passes
+ *   `aria-hidden: undefined`. Many icon components, such as Heroicons, write
+ *   `aria-hidden="true"` unless a prop replaces it.
  * - Omitted or empty `label` → decorative default: `aria-hidden="true"`.
  *
  * The result is spread BEFORE `{...props}` in both render modes so an explicit
@@ -202,7 +204,8 @@ const colorStyles = {
 function getIconA11yProps(label) {
   return label != null && label !== '' ? {
     role: 'img',
-    'aria-label': label
+    'aria-label': label,
+    'aria-hidden': undefined
   } : {
     'aria-hidden': 'true'
   };

package/dist/InfoTip/InfoTip.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, StyleX, Tooltip, Icon, useComponentTranslator, the shared
+ *   touch hit area, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Core implementation; consumed by index.ts, tested by
+ *   InfoTip.test.tsx; `@astryxdesign/lab` re-exports it, deprecated
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
+ * - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/InfoTip/index.ts (exports if types change)
+ */
+import { type ReactNode, type Ref } from 'react';
+import type { BaseProps } from '../BaseProps.js';
+import { type IconSize } from '../Icon/Icon.js';
+/**
+ * Size of the info icon. Maps 1:1 to Icon sizes
+ * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
+ */
+export type InfoTipSize = IconSize;
+export interface InfoTipProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+    /** Ref forwarded to the info button. */
+    ref?: Ref<HTMLButtonElement>;
+    /**
+     * The help the button reveals. Short, noninteractive text; for links or
+     * buttons, use HoverCard.
+     */
+    content: ReactNode;
+    /**
+     * Accessible name of the button.
+     * @default A translated "More information"
+     */
+    label?: string;
+    /**
+     * Size of the info icon.
+     * @default 'sm'
+     */
+    size?: InfoTipSize;
+}
+/**
+ * An info icon that reveals help: a small "i" button. Hover and keyboard
+ * focus preview the help. A click, tap, Enter, or Space pins it open until
+ * Escape, a second press, a press outside, or focus leaving. Use it next to
+ * labels, values, and metrics for permission notes, metric definitions, and
+ * field help.
+ *
+ * InfoTip is a press-to-pin Tooltip on a named button: Tooltip opens, pins,
+ * announces, and closes the help. The info icon resolves from
+ * the icon registry, so themes can replace it.
+ *
+ * @example
+ * ```
+ * <InfoTip content="Editors can change this field; viewers cannot." />
+ * <InfoTip content="30-day rolling average." label="About this metric" />
+ * ```
+ */
+export declare function InfoTip({ content, label, size, ref, xstyle, className, style, }: InfoTipProps): ReactNode;
+export declare namespace InfoTip {
+    var displayName: string;
+}
+//# sourceMappingURL=InfoTip.d.ts.map

package/dist/InfoTip/InfoTip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoTip.d.ts","sourceRoot":"","sources":["../../src/InfoTip/InfoTip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAG5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,cAAc,CAAC;AAoBjD;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC7B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AA8CD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAAK,EACL,IAAW,EACX,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,YAAY,GAAG,SAAS,CAyC1B;yBAjDe,OAAO"}

package/dist/InfoTip/InfoTip.js

@@ -0,0 +1,126 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, StyleX, Tooltip, Icon, useComponentTranslator, the shared
+ *   touch hit area, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Core implementation; consumed by index.ts, tested by
+ *   InfoTip.test.tsx; `@astryxdesign/lab` re-exports it, deprecated
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /docs/specs/components/InfoTip/InfoTip.spec.md (contract)
+ * - /packages/core/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/InfoTip/index.ts (exports if types change)
+ */
+import { useCallback } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { Icon } from "../Icon/Icon.js";
+import { TooltipWithTriggerBehavior } from "../Tooltip/Tooltip.js";
+import { registerEnglishFallback, useComponentTranslator } from "../i18n/useComponentTranslator.js";
+import english from "../i18n/generated-english/InfoTip/InfoTip.generated.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from "../theme/tokens.stylex.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { mergeProps } from "../utils/mergeProps.js";
+import { watchHitArea, writeHitInsets } from "../utils/hitArea.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+registerEnglishFallback(english);
+
+/**
+ * Size of the info icon. Maps 1:1 to Icon sizes
+ * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
+ */
+
+const styles = {
+  trigger: {
+    kVAEAm: "x1n2onr6",
+    k1xSpc: "x3nfvp2",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kXLuUW: "xxymvpz",
+    kmVPX3: "x12nba7r",
+    kogj98: "x1ghz6dp",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kaIpWk: "xjspbzw",
+    kkrTdU: "x1ypdohk x16khyan",
+    kMwMTN: "xv9yike x10ue8fs",
+    k1ekBW: "xt3l3uh",
+    kIyJzY: "xuedmi6",
+    kAMwcw: "xlr8y92",
+    $$css: true
+  },
+  hitArea: {
+    k5JduY: "x1s928wv",
+    kwXMNM: "x1j6awrg",
+    kv0HGH: "xzdy5ak",
+    $$css: true
+  }
+};
+
+/**
+ * An info icon that reveals help: a small "i" button. Hover and keyboard
+ * focus preview the help. A click, tap, Enter, or Space pins it open until
+ * Escape, a second press, a press outside, or focus leaving. Use it next to
+ * labels, values, and metrics for permission notes, metric definitions, and
+ * field help.
+ *
+ * InfoTip is a press-to-pin Tooltip on a named button: Tooltip opens, pins,
+ * announces, and closes the help. The info icon resolves from
+ * the icon registry, so themes can replace it.
+ *
+ * @example
+ * ```
+ * <InfoTip content="Editors can change this field; viewers cannot." />
+ * <InfoTip content="30-day rolling average." label="About this metric" />
+ * ```
+ */
+export function InfoTip({
+  content,
+  label,
+  size = 'sm',
+  ref,
+  xstyle,
+  className,
+  style
+}) {
+  const t = useComponentTranslator();
+  // Under a coarse pointer the button takes taps out toward 44 px. The watch
+  // lives as long as the button is attached: the ref's cleanup stops it, and a
+  // replaced button starts its own.
+  const watchButtonHitArea = useCallback(button => {
+    if (button == null) {
+      return;
+    }
+    return watchHitArea(button, insets => writeHitInsets(button, insets));
+  }, []);
+  const mergedRef = useMergedRefs(ref, watchButtonHitArea);
+
+  // No Escape handler of its own. Tooltip's entry in the shared dismissal
+  // stack takes Escape, so one press never closes both the help and an
+  // enclosing Dialog.
+  return /*#__PURE__*/_jsx(TooltipWithTriggerBehavior, {
+    content: content
+    // The tooltip is the button's only purpose. A click, a tap, Enter, or
+    // Space pins it open, and the press stops at the button. So an InfoTip's
+    // content is reachable on a phone and from the keyboard alike.
+    ,
+    triggerBehavior: "toggle",
+    children: /*#__PURE__*/_jsx("button", {
+      ref: mergedRef,
+      type: "button",
+      "aria-label": label ?? t('@astryx.infoTip.label'),
+      ...mergeProps(stylex.props(focusOutlineStyles.focusVisible, styles.trigger, styles.hitArea, xstyle), className, style),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "info",
+        size: size
+      })
+    })
+  });
+}
+InfoTip.displayName = 'InfoTip';

package/dist/InfoTip/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @file InfoTip component barrel export
+ * @input InfoTip.tsx
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize
+ * @position Barrel; consumed by packages/core/src/index.ts and the
+ *   `@astryxdesign/core/InfoTip` entry
+ */
+export { InfoTip } from './InfoTip.js';
+export type { InfoTipProps, InfoTipSize } from './InfoTip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/InfoTip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InfoTip/index.ts"],"names":[],"mappings":"AAIA;;;;;;GAMG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,WAAW,CAAC"}

package/dist/InfoTip/index.js

@@ -0,0 +1,12 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip component barrel export
+ * @input InfoTip.tsx
+ * @output Exports InfoTip, InfoTipProps, InfoTipSize
+ * @position Barrel; consumed by packages/core/src/index.ts and the
+ *   `@astryxdesign/core/InfoTip` entry
+ */
+export { InfoTip } from "./InfoTip.js";

package/dist/Layer/layerAnimations.stylex.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file layerAnimations.stylex.ts
- * @input Uses StyleX, theme duration/easing tokens
+ * @input Uses StyleX, theme duration/easing tokens, the Reduce Motion fade
+ *   constants
  * @output Exports shared entry animation styles for layer-based components
  * @position Shared animation primitives; consumed by DropdownMenu, Popover,
  *   HoverCard, Tooltip, Selector, and any component using useLayer
@@ -30,13 +31,11 @@ import * as stylex from '@stylexjs/stylex';
  * Keyed by LayerPlacement ('above' | 'below' | 'start' | 'end')
  * for easy lookup: `layerAnimations[placement]`.
  *
- * Each entry disables its keyframe animation under
- * `prefers-reduced-motion: reduce` so the layer appears instantly instead of
- * translating/scaling in (infra-6). Under a finger (the primary pointer is
- * coarse) it fades in instead, opacity only and in 200 ms or less: on a touch
- * screen Reduce Motion replaces motion with a cross-fade rather than a jump
- * (design:reduced-motion DR2, DR3), as iOS does for its menus, popovers and
- * tips.
+ * Under `prefers-reduced-motion: reduce` each entry drops its travel and
+ * scale. Under a finger (the primary pointer is coarse) the layer fades in,
+ * opacity only, in 200 ms on easeInOut: on a touch screen Reduce Motion
+ * replaces motion with a cross-fade rather than a jump; under any other
+ * pointer it appears at once.
  */
 export declare const layerAnimations: Readonly<{
     readonly below: Readonly<{

package/dist/Layer/layerAnimations.stylex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA0E3C;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EAmC1B,CAAC"}
+{"version":3,"file":"layerAnimations.stylex.d.ts","sourceRoot":"","sources":["../../src/Layer/layerAnimations.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AA+E3C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1B,CAAC"}