@astryxdesign/lab 0.1.4-canary.39ffd21 → 0.1.4-canary.3b5f42e

package/dist/InfoTip/InfoTip.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Lab experiment (RFC facebook/astryx#3349); core implementation consumed by index.ts
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/InfoTip/index.ts (exports if types change)
+ */
+import { type ReactNode } from 'react';
+import { type IconSize } from '@astryxdesign/core/Icon';
+/**
+ * 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 {
+    /**
+     * Content to display in the tooltip.
+     * Typically short, non-interactive text. Mirrors Tooltip's `content` prop.
+     */
+    content: ReactNode;
+    /**
+     * Accessible name for the trigger button.
+     * @default 'More information'
+     */
+    label?: string;
+    /**
+     * Size of the info icon.
+     * @default 'sm'
+     */
+    size?: InfoTipSize;
+}
+/**
+ * An inline info-icon help affordance: a small "i" button that reveals a
+ * tooltip on hover and keyboard focus. Use it next to labels, values, and
+ * metrics for permission notes, metric definitions, and field help.
+ *
+ * The value over hand-composing Icon inside Tooltip is the pre-wired
+ * accessible trigger: a real button with an aria-label, Tab-reachable,
+ * tooltip on hover AND focus, and Escape dismissal.
+ *
+ * Composed entirely from core primitives (Tooltip + Icon); the info icon
+ * resolves from the global icon registry, so themes can override 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, }: 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;;;;;;;;;;GAUG;AAEH,OAAO,EAAgC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGpE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,yBAAyB,CAAC;AAU5D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;AAEnC,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAmCD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,KAA0B,EAC1B,IAAW,GACZ,EAAE,YAAY,GAAG,SAAS,CA4C1B;yBAhDe,OAAO"}

package/dist/InfoTip/InfoTip.js

@@ -0,0 +1,91 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Lab experiment (RFC facebook/astryx#3349); core implementation consumed by index.ts
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/InfoTip/index.ts (exports if types change)
+ */
+import { useCallback, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Icon } from '@astryxdesign/core/Icon';
+import { Tooltip } from '@astryxdesign/core/Tooltip';
+import '@astryxdesign/core/theme/tokens.stylex';
+import { colorVars, durationVars, easeVars, radiusVars, spacingVars } from '@astryxdesign/core/theme/tokens.stylex';
+
+/**
+ * Size of the info icon. Maps 1:1 to Icon sizes
+ * (xsm: 12px, sm: 16px, md: 20px, lg: 24px).
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * An inline info-icon help affordance: a small "i" button that reveals a
+ * tooltip on hover and keyboard focus. Use it next to labels, values, and
+ * metrics for permission notes, metric definitions, and field help.
+ *
+ * The value over hand-composing Icon inside Tooltip is the pre-wired
+ * accessible trigger: a real button with an aria-label, Tab-reachable,
+ * tooltip on hover AND focus, and Escape dismissal.
+ *
+ * Composed entirely from core primitives (Tooltip + Icon); the info icon
+ * resolves from the global icon registry, so themes can override 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 = 'More information',
+  size = 'sm'
+}) {
+  // Escape dismissal: `true` force-hides the tooltip (Tooltip isOpen={false});
+  // `false` returns control to Tooltip's own hover/focus triggers (isOpen
+  // undefined). Reset when the pointer or focus leaves the trigger so the
+  // tooltip can re-open on the next hover/focus.
+  const [isDismissed, setIsDismissed] = useState(false);
+  const isOpenRef = useRef(false);
+  const handleOpenChange = useCallback(isOpen => {
+    isOpenRef.current = isOpen;
+  }, []);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Escape' && isOpenRef.current) {
+      // Only swallow Escape when it actually dismissed the tooltip, so an
+      // enclosing dialog still closes on the next press.
+      event.stopPropagation();
+      setIsDismissed(true);
+    }
+  }, []);
+  const handleReset = useCallback(() => {
+    setIsDismissed(false);
+  }, []);
+  return /*#__PURE__*/_jsx(Tooltip, {
+    content: content,
+    isOpen: isDismissed ? false : undefined,
+    onOpenChange: handleOpenChange,
+    children: /*#__PURE__*/_jsx("button", {
+      type: "button",
+      "aria-label": label,
+      onKeyDown: handleKeyDown,
+      onBlur: handleReset,
+      onMouseLeave: handleReset,
+      ...{
+        className: "x3nfvp2 x6s0dn4 xl56j7k xxymvpz x12nba7r x1ghz6dp xng3xce xjbqb8w xjspbzw x1ypdohk xv9yike xkxie9p x17nn4n9 x1wfwxd8 x7s97pk xt3l3uh xuedmi6 xlr8y92"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "info",
+        size: size
+      })
+    })
+  });
+}
+InfoTip.displayName = 'InfoTip';

package/dist/InfoTip/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file InfoTip component barrel export
+ */
+export { InfoTip } from './InfoTip';
+export type { InfoTipProps, InfoTipSize } from './InfoTip';
+//# 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;;GAEG;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,8 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip component barrel export
+ */
+export { InfoTip } from "./InfoTip.js";

package/dist/index.d.ts

@@ -12,6 +12,7 @@
 export { CodeBlock, type CodeBlockProps } from './CodeBlock';
 export { CodeEditor, type CodeEditorProps } from './CodeEditor';
 export { tokenize, tokenizeAsync, SYNC_TOKENIZE_THRESHOLD, type SyntaxToken, } from '@astryxdesign/core/CodeBlock';
+export { InfoTip, type InfoTipProps, type InfoTipSize } from './InfoTip';
 export { ChatReasoning, type ChatReasoningProps, } from './ChatReasoning/ChatReasoning';
 export * from './Schedule';
 export { SVGIcon, type SVGIconProps, type SVGIconVariation, type SVGIconSize, type SVGIconColor, type SVGIconDef, type IconShape, type IconShapeRole, iconVars, variations, opticalSize, xIcon, checkIcon, bellIcon, homeIcon, settingsIcon, calendarIcon, menuIcon, heartIcon, eyeIcon, starIcon, folderIcon, shieldIcon, searchIcon, mailIcon, lockIcon, starterIcons, } from './SVGIcon';

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -17,6 +17,9 @@ export { CodeBlock } from "./CodeBlock/index.js";
 export { CodeEditor } from "./CodeEditor/index.js";
 export { tokenize, tokenizeAsync, SYNC_TOKENIZE_THRESHOLD } from '@astryxdesign/core/CodeBlock';
 
+// InfoTip — accessible info-icon help affordance (RFC facebook/astryx#3349)
+export { InfoTip } from "./InfoTip/index.js";
+
 // Chat — experimental reasoning display
 export { ChatReasoning } from "./ChatReasoning/ChatReasoning.js";
 

package/dist/lab.css

@@ -52,6 +52,7 @@
   .x1ghz6dp:not(#\#){margin:0}
   .x10h29id:not(#\#){margin:var(--spacing-0-5)}
   .x1717udv:not(#\#){padding:0}
+  .x12nba7r:not(#\#){padding:var(--spacing-0-5)}
   .x103w4nt:not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-blue) 48%,var(--color-border))}
   .x14n1b0s:not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-cyan) 48%,var(--color-border))}
   .x1uk4s2l:not(#\#):not(#\#){border-color:color-mix(in srgb,var(--color-border-green) 48%,var(--color-border))}
@@ -79,6 +80,7 @@
   .xh6dtrn:not(#\#):not(#\#){border-radius:var(--radius-element)}
   .xjspbzw:not(#\#):not(#\#){border-radius:var(--radius-full)}
   .xx3sua9:not(#\#):not(#\#){border-radius:var(--radius-inner)}
+  .xng3xce:not(#\#):not(#\#){border-style:none}
   .x1y0btm7:not(#\#):not(#\#){border-style:solid}
   .xc342km:not(#\#):not(#\#){border-width:0}
   .x1litavf:not(#\#):not(#\#){border-width:var(--border-width)}
@@ -326,11 +328,14 @@
   .x19jd1h0:not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}
   .x1cb1t30:not(#\#):not(#\#):not(#\#){transform:translateY(-50%)}
   .xkvfbh3:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast-min)}
+  .xuedmi6:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast)}
   .x80gvsz:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-medium)}
   .x15406qy:not(#\#):not(#\#):not(#\#){transition-property:background-color}
+  .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
   .xxnu56j:not(#\#):not(#\#):not(#\#){transition-property:stroke-dashoffset}
   .xlr8y92:not(#\#):not(#\#):not(#\#){transition-timing-function:var(--ease-standard)}
   .x87ps6o:not(#\#):not(#\#):not(#\#){user-select:none}
+  .xxymvpz:not(#\#):not(#\#):not(#\#){vertical-align:middle}
   .xlshs6z:not(#\#):not(#\#):not(#\#){visibility:hidden}
   .xuxw1ft:not(#\#):not(#\#):not(#\#){white-space:nowrap}
   .x1sdyfia:not(#\#):not(#\#):not(#\#){white-space:pre}
@@ -344,6 +349,7 @@
   @media (prefers-reduced-motion: reduce){.xnh0sag.xnh0sag:not(#\#):not(#\#):not(#\#){animation-duration:3s}}
   @media (prefers-reduced-motion: reduce){.xy02sl2.xy02sl2:not(#\#):not(#\#):not(#\#){animation-duration:4s}}
   @media (hover: hover){.xe9uy6x.xe9uy6x:hover:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}}
+  @media (hover: hover){.xkxie9p.xkxie9p:hover:not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}}
   .xw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}
   .x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
   .x1qhh985:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/lab",
-  "version": "0.1.4-canary.39ffd21",
+  "version": "0.1.4-canary.3b5f42e",
   "description": "Experimental Astryx components — published to npm only under the @canary dist-tag for early testing; never released as a stable (latest) version.",
   "author": "Meta Open Source",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@stylexjs/stylex": ">=0.10.0",
-    "@astryxdesign/core": "0.1.4-canary.39ffd21",
+    "@astryxdesign/core": "0.1.4-canary.3b5f42e",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },

package/src/InfoTip/InfoTip.doc.mjs

@@ -0,0 +1,97 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('../docs-types').ComponentDoc} */
+
+export const docs = {
+  name: 'InfoTip',
+  displayName: 'Info Tip',
+  category: 'Feedback & Status',
+  keywords: ["info","tooltip","help","hint","affordance","icon","label","field","metric","definition"],
+  props: [
+    {
+      name: 'content',
+      type: 'ReactNode',
+      description: 'Content to display in the tooltip. Typically short, non-interactive text. Mirrors Tooltip’s content prop.',
+      required: true,
+    },
+    {
+      name: 'label',
+      type: 'string',
+      description: 'Accessible name for the trigger button.',
+      default: "'More information'",
+    },
+    {
+      name: 'size',
+      type: "'xsm' | 'sm' | 'md' | 'lg'",
+      description: 'Size of the info icon (12px, 16px, 20px, 24px). Maps 1:1 to Icon sizes.',
+      default: "'sm'",
+    },
+  ],
+  usage: {
+    description:
+      'An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover and keyboard focus. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help. Its value over hand-composing Icon inside Tooltip is the pre-wired accessible trigger: a real button with an aria-label, Tab-reachable, tooltip on hover AND focus, and Escape dismissal.',
+    bestPractices: [
+      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
+      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
+      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.' },
+      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
+    ],
+  },
+};
+
+/** @type {import('../docs-types').ComponentDoc} */
+export const docsZh = {
+  name: 'InfoTip',
+  displayName: 'Info Tip',
+  props: [
+    {
+      name: 'content',
+      type: 'ReactNode',
+      description: '工具提示中显示的内容。通常为简短的非交互文本。与 Tooltip 的 content 属性一致。',
+      required: true,
+    },
+    {
+      name: 'label',
+      type: 'string',
+      description: '触发按钮的无障碍名称。',
+      default: "'More information'",
+    },
+    {
+      name: 'size',
+      type: "'xsm' | 'sm' | 'md' | 'lg'",
+      description: '信息图标的尺寸（12px、16px、20px、24px）。与 Icon 尺寸一一对应。',
+      default: "'sm'",
+    },
+  ],
+  usage: {
+    description:
+      'An inline info-icon help affordance: a small "i" button that reveals a tooltip on hover and keyboard focus. Use it next to labels, values, and metrics for permission notes, metric definitions, and field help.',
+    bestPractices: [
+      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
+      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
+      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable, so keyboard and screen-reader users never see it.' },
+      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
+    ],
+  },
+};
+
+/** @type {import('../docs-types').TranslationDoc} */
+export const docsDense = {
+  description:
+    'Inline info-icon help affordance: accessible "i" button trigger pre-wired into a Tooltip.',
+  usage: {
+    description:
+      'A small "i" button that reveals a tooltip on hover and keyboard focus. Use next to labels, values, and metrics for permission notes, metric definitions, and field help. Pre-wired accessible trigger: real button, aria-label, Tab-reachable, tooltip on hover AND focus, Escape dismissal.',
+    bestPractices: [
+      { guidance: true, description: 'Keep tooltip content concise, plain, and non-interactive; use Popover or HoverCard for links and buttons.' },
+      { guidance: true, description: 'Override label when "More information" is too generic, e.g. "About this metric".' },
+      { guidance: false, description: 'Hand-compose Icon inside Tooltip for info affordances; the bare Icon is aria-hidden and unfocusable.' },
+      { guidance: false, description: 'Use InfoTip for essential information users must see to complete a task; put that text inline instead.' },
+    ],
+  },
+  propDescriptions: {
+    content: 'Tooltip content. Short, non-interactive text. Mirrors Tooltip content prop.',
+    label: "Accessible name for the trigger button. Default 'More information'.",
+    size: 'Info icon size (12/16/20/24px). Maps 1:1 to Icon sizes.',
+  },
+};

package/src/InfoTip/InfoTip.test.tsx

@@ -0,0 +1,169 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file InfoTip.test.tsx
+ * @input Uses vitest, @testing-library/react, @testing-library/user-event, InfoTip component
+ * @output Unit tests for InfoTip trigger accessibility and tooltip behavior
+ * @position Testing; validates InfoTip.tsx implementation
+ *
+ * SYNC: When InfoTip.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
+import {render, screen, fireEvent, waitFor, act} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {InfoTip} from './InfoTip';
+
+// Store original matches to restore later
+const originalMatches = HTMLElement.prototype.matches;
+
+// Track popover open state per element
+const popoverOpenState = new WeakMap<HTMLElement, boolean>();
+
+// Mock Popover API for jsdom, and :focus-visible for keyboard-focus tests
+// (same harness as core Tooltip.test.tsx, plus :focus-visible)
+beforeAll(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    popoverOpenState.set(this, true);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    popoverOpenState.set(this, false);
+  });
+
+  // Intercept :popover-open and :focus-visible, delegate everything else
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = function (
+    selector: string,
+  ): boolean {
+    if (selector === ':popover-open') {
+      return popoverOpenState.get(this) ?? false;
+    }
+    if (selector === ':focus-visible') {
+      // Treat any focused element as keyboard-focused in tests
+      return this === document.activeElement;
+    }
+    return originalMatches.call(this, selector);
+  };
+});
+
+afterAll(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = originalMatches;
+});
+
+/** Focus the trigger the way a keyboard user would land on it. */
+function focusTrigger(trigger: HTMLElement) {
+  act(() => {
+    trigger.focus();
+  });
+  fireEvent.focusIn(trigger);
+}
+
+describe('InfoTip', () => {
+  it('renders a button trigger with the default accessible name', () => {
+    render(<InfoTip content="Helpful context" />);
+    expect(
+      screen.getByRole('button', {name: 'More information'}),
+    ).toBeInTheDocument();
+  });
+
+  it('uses a custom label as the accessible name', () => {
+    render(
+      <InfoTip content="30-day rolling average." label="About this metric" />,
+    );
+    const trigger = screen.getByRole('button', {name: 'About this metric'});
+    expect(trigger).toHaveAttribute('aria-label', 'About this metric');
+  });
+
+  it('links the trigger to the tooltip layer via aria-describedby', () => {
+    render(<InfoTip content="Helpful context" />);
+    const layer = screen.getByRole('tooltip', {hidden: true});
+    expect(layer).toHaveTextContent('Helpful context');
+    const trigger = screen.getByRole('button', {name: 'More information'});
+    expect(trigger.getAttribute('aria-describedby')).toBe(layer.id);
+  });
+
+  it('is reachable with Tab', async () => {
+    const user = userEvent.setup();
+    render(<InfoTip content="Helpful context" />);
+    const trigger = screen.getByRole('button', {name: 'More information'});
+    await user.tab();
+    expect(trigger).toHaveFocus();
+  });
+
+  it('shows the tooltip on hover', async () => {
+    vi.mocked(HTMLElement.prototype.showPopover).mockClear();
+    render(<InfoTip content="Helpful context" />);
+    const trigger = screen.getByRole('button', {name: 'More information'});
+
+    fireEvent.mouseEnter(trigger);
+
+    await waitFor(() => {
+      expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
+    });
+  });
+
+  it('shows the tooltip on keyboard focus', async () => {
+    vi.mocked(HTMLElement.prototype.showPopover).mockClear();
+    render(<InfoTip content="Helpful context" />);
+    const trigger = screen.getByRole('button', {name: 'More information'});
+
+    focusTrigger(trigger);
+
+    await waitFor(() => {
+      expect(HTMLElement.prototype.showPopover).toHaveBeenCalled();
+    });
+    const layer = screen.getByRole('tooltip', {hidden: true});
+    expect(popoverOpenState.get(layer)).toBe(true);
+  });
+
+  it('closes the tooltip on Escape', async () => {
+    render(<InfoTip content="Helpful context" />);
+    const trigger = screen.getByRole('button', {name: 'More information'});
+    const layer = screen.getByRole('tooltip', {hidden: true});
+
+    focusTrigger(trigger);
+    await waitFor(() => {
+      expect(popoverOpenState.get(layer)).toBe(true);
+    });
+
+    fireEvent.keyDown(trigger, {key: 'Escape'});
+
+    await waitFor(() => {
+      expect(popoverOpenState.get(layer)).toBe(false);
+    });
+  });
+
+  it('re-opens after Escape once the trigger is left and re-hovered', async () => {
+    render(<InfoTip content="Helpful context" />);
+    const trigger = screen.getByRole('button', {name: 'More information'});
+    const layer = screen.getByRole('tooltip', {hidden: true});
+
+    focusTrigger(trigger);
+    await waitFor(() => {
+      expect(popoverOpenState.get(layer)).toBe(true);
+    });
+
+    fireEvent.keyDown(trigger, {key: 'Escape'});
+    await waitFor(() => {
+      expect(popoverOpenState.get(layer)).toBe(false);
+    });
+
+    // Leave (resets dismissal), then re-enter
+    act(() => {
+      trigger.blur();
+    });
+    fireEvent.focusOut(trigger);
+    fireEvent.mouseLeave(trigger);
+
+    fireEvent.mouseEnter(trigger);
+    await waitFor(() => {
+      expect(popoverOpenState.get(layer)).toBe(true);
+    });
+  });
+
+  it('renders ReactNode tooltip content', () => {
+    render(<InfoTip content={<span data-testid="rich-content">Rich</span>} />);
+    expect(screen.getByTestId('rich-content')).toBeInTheDocument();
+  });
+});

package/src/InfoTip/InfoTip.tsx

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip.tsx
+ * @input Uses React, stylex, Tooltip + Icon from @astryxdesign/core, color/spacing/radius/duration/ease tokens
+ * @output Exports InfoTip component, InfoTipProps, InfoTipSize types
+ * @position Lab experiment (RFC facebook/astryx#3349); core implementation consumed by index.ts
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/lab/src/InfoTip/InfoTip.doc.mjs (props table, features)
+ * - /packages/lab/src/InfoTip/InfoTip.test.tsx (tests for new/changed behavior)
+ * - /packages/lab/src/InfoTip/index.ts (exports if types change)
+ */
+
+import {useCallback, useRef, useState, type ReactNode} from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+import {Icon, type IconSize} from '@astryxdesign/core/Icon';
+import {Tooltip} from '@astryxdesign/core/Tooltip';
+import {
+  colorVars,
+  durationVars,
+  easeVars,
+  radiusVars,
+  spacingVars,
+} from '@astryxdesign/core/theme/tokens.stylex';
+
+/**
+ * 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 {
+  /**
+   * Content to display in the tooltip.
+   * Typically short, non-interactive text. Mirrors Tooltip's `content` prop.
+   */
+  content: ReactNode;
+  /**
+   * Accessible name for the trigger button.
+   * @default 'More information'
+   */
+  label?: string;
+  /**
+   * Size of the info icon.
+   * @default 'sm'
+   */
+  size?: InfoTipSize;
+}
+
+const styles = stylex.create({
+  trigger: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle',
+    padding: spacingVars['--spacing-0-5'],
+    margin: 0,
+    borderStyle: 'none',
+    backgroundColor: 'transparent',
+    borderRadius: radiusVars['--radius-full'],
+    cursor: 'pointer',
+    color: {
+      default: colorVars['--color-icon-secondary'],
+      ':hover': {
+        default: null,
+        '@media (hover: hover)': colorVars['--color-icon-primary'],
+      },
+    },
+    outline: {
+      default: null,
+      ':focus-visible': `2px solid ${colorVars['--color-accent']}`,
+    },
+    outlineOffset: {
+      default: '0',
+      ':focus-visible': '2px',
+    },
+    transitionProperty: 'color',
+    transitionDuration: durationVars['--duration-fast'],
+    transitionTimingFunction: easeVars['--ease-standard'],
+  },
+});
+
+/**
+ * An inline info-icon help affordance: a small "i" button that reveals a
+ * tooltip on hover and keyboard focus. Use it next to labels, values, and
+ * metrics for permission notes, metric definitions, and field help.
+ *
+ * The value over hand-composing Icon inside Tooltip is the pre-wired
+ * accessible trigger: a real button with an aria-label, Tab-reachable,
+ * tooltip on hover AND focus, and Escape dismissal.
+ *
+ * Composed entirely from core primitives (Tooltip + Icon); the info icon
+ * resolves from the global icon registry, so themes can override 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 = 'More information',
+  size = 'sm',
+}: InfoTipProps): ReactNode {
+  // Escape dismissal: `true` force-hides the tooltip (Tooltip isOpen={false});
+  // `false` returns control to Tooltip's own hover/focus triggers (isOpen
+  // undefined). Reset when the pointer or focus leaves the trigger so the
+  // tooltip can re-open on the next hover/focus.
+  const [isDismissed, setIsDismissed] = useState(false);
+  const isOpenRef = useRef(false);
+
+  const handleOpenChange = useCallback((isOpen: boolean) => {
+    isOpenRef.current = isOpen;
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (event.key === 'Escape' && isOpenRef.current) {
+        // Only swallow Escape when it actually dismissed the tooltip, so an
+        // enclosing dialog still closes on the next press.
+        event.stopPropagation();
+        setIsDismissed(true);
+      }
+    },
+    [],
+  );
+
+  const handleReset = useCallback(() => {
+    setIsDismissed(false);
+  }, []);
+
+  return (
+    <Tooltip
+      content={content}
+      isOpen={isDismissed ? false : undefined}
+      onOpenChange={handleOpenChange}>
+      <button
+        type="button"
+        aria-label={label}
+        onKeyDown={handleKeyDown}
+        onBlur={handleReset}
+        onMouseLeave={handleReset}
+        {...stylex.props(styles.trigger)}>
+        <Icon icon="info" size={size} />
+      </button>
+    </Tooltip>
+  );
+}
+
+InfoTip.displayName = 'InfoTip';

package/src/InfoTip/index.ts

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file InfoTip component barrel export
+ */
+
+export {InfoTip} from './InfoTip';
+export type {InfoTipProps, InfoTipSize} from './InfoTip';

package/src/index.ts

@@ -22,6 +22,9 @@ export {
   type SyntaxToken,
 } from '@astryxdesign/core/CodeBlock';
 
+// InfoTip — accessible info-icon help affordance (RFC facebook/astryx#3349)
+export {InfoTip, type InfoTipProps, type InfoTipSize} from './InfoTip';
+
 // Chat — experimental reasoning display
 export {
   ChatReasoning,