[pull] main from adobe:main

packages/@react-spectrum/ai/exports/index.ts

@@ -1,5 +1,4 @@
 export {Attachment, AttachmentList} from '../src/AttachmentList';
-export {BasicHorizontalCard, CardPreview, HorizontalCard} from '../src/HorizontalCard';
 export {MessageFeedback} from '../src/MessageFeedback';
 export {MessageSource, SourceList, SourceListItem} from '../src/MessageSource';
 export {MessageSuggestion, MessageSuggestionList} from '../src/MessageSuggestion';
@@ -20,7 +19,6 @@ export {TokenSegmentList} from '../src/TokenSegmentList';
 export {UserMessage} from '../src/UserMessage';
 
 export type {AttachmentProps, AttachmentListProps} from '../src/AttachmentList';
-export type {HorizontalCardProps, BasicCardProps} from '../src/HorizontalCard';
 export type {
   PromptFieldProps,
   PromptFieldSubmitButtonProps,

packages/@react-spectrum/ai/stories/BasicHorizontalCard.stories.tsx

@@ -12,7 +12,7 @@
 
 import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {ActionMenu} from '@react-spectrum/s2/ActionMenu';
-import {type BasicCardProps, BasicHorizontalCard} from '@react-spectrum/ai';
+import {type BasicCardProps, BasicHorizontalCard} from '../src/HorizontalCard';
 import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils';
 import ChevronRight from '@react-spectrum/s2/icons/ChevronRight';
 import {Content} from '@react-spectrum/s2/Content';

packages/@react-spectrum/ai/stories/HorizontalCard.stories.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CardPreview, HorizontalCard, type HorizontalCardProps} from '@react-spectrum/ai';
+import {CardPreview, HorizontalCard, type HorizontalCardProps} from '../src/HorizontalCard';
 import {categorizeArgTypes, getActionArgs} from '../../s2/stories/utils';
 import {Content} from '@react-spectrum/s2/Content';
 import {Image} from '@react-spectrum/s2/Image';

packages/@react-spectrum/s2/exports/index.ts

@@ -150,6 +150,8 @@ export {pressScale} from '../src/pressScale';
 
 export {mergeStyles} from '../style/runtime';
 
+export {CenterBaseline} from '../src/CenterBaseline';
+
 export {Autocomplete} from 'react-aria-components/Autocomplete';
 export {Collection} from 'react-aria/Collection';
 export {FileTrigger} from 'react-aria-components/FileTrigger';

packages/@react-spectrum/s2/src/CenterBaseline.tsx

@@ -30,6 +30,23 @@ const styles = style({
   alignItems: 'center'
 });
 
+/**
+ * Vertically centers its children against the surrounding text baseline.
+ * Use this to align icons or other inline elements with adjacent text without
+ * breaking baseline alignment.
+ *
+ * @example
+ *   import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import CheckmarkIcon from '@react-spectrum/s2/icons/Checkmark';
+ *
+ *   <span className={style({display: 'flex', gap: 4, alignItems: 'baseline'})}>
+ *     <CenterBaseline>
+ *       <CheckmarkIcon />
+ *     </CenterBaseline>
+ *     <span>Done</span>
+ *   </span>;
+ */
 export function CenterBaseline(props: CenterBaselineProps): ReactNode {
   let domProps = filterDOMProps(props);
   return (

packages/dev/parcel-packager-docs/DocsPackager.js

@@ -440,6 +440,7 @@ function visitChildren(obj, fn) {
         typeParameters: obj.typeParameters.map(i => fn(i, 'typeParameters')),
         ref: obj.ref ? fn(obj.ref, 'ref') : null,
         description: obj.description,
+        examples: obj.examples,
         access: obj.access
       };
     case 'conditional':

packages/dev/parcel-transformer-docs/DocsTransformer.js

@@ -298,7 +298,8 @@ module.exports = new Transformer({
               ref && ref.typeAnnotation
                 ? processExport(path.get('params.1.typeAnnotation.typeAnnotation'))
                 : null,
-            description: docs.description || null
+            description: docs.description || null,
+            examples: docs.examples || null
           });
         } else {
           let docs = getJSDocs(path);

packages/dev/parcel-transformer-docs/__tests__/__snapshots__/DocsTransformer.parceltest.tsx.snap

@@ -49,6 +49,7 @@ exports[`DocsTransformer - API components writes export entry for React componen
   "exports": {
     "App1": {
       "description": null,
+      "examples": null,
       "id": "/test/src/index.tsx:App1",
       "name": "App1",
       "props": null,
@@ -66,6 +67,7 @@ exports[`DocsTransformer - API components writes export entry for localName Reac
   "exports": {
     "AppReal": {
       "description": null,
+      "examples": null,
       "id": "/test/src/index.tsx:App2",
       "name": "AppReal",
       "props": null,

packages/dev/s2-docs/pages/s2/style-macro.mdx

@@ -1,6 +1,7 @@
 import {Layout} from '../../src/Layout';
 import {InlineAlert, Heading, Content, Link} from '@react-spectrum/s2';
 import {FunctionJSDoc} from '../../src/FunctionJSDoc';
+import {ComponentJSDoc} from '../../src/ComponentJSDoc';
 import {StyleMacroProperties} from '../../src/StyleMacroProperties';
 import docs from 'docs:@react-spectrum/s2';
 import styleDocs from 'docs:@react-spectrum/s2/style';
@@ -119,3 +120,7 @@ See the [Icons](icons#api) page for more information.
 ### setColorScheme
 
 <FunctionJSDoc function={styleDocs.exports.setColorScheme} />
+
+### CenterBaseline
+
+<ComponentJSDoc component={docs.exports.CenterBaseline} />

packages/dev/s2-docs/src/ComponentJSDoc.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Code} from './Code';
+import React from 'react';
+import {renderHTMLfromMarkdown} from './types';
+import {standaloneCode} from './CodeBlock';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+interface ComponentJSDocProps {
+  component: {
+    description?: string | null;
+    examples?: string[] | null;
+  };
+}
+
+export function ComponentJSDoc({component}: ComponentJSDocProps) {
+  let examples = Array.isArray(component.examples) ? component.examples.filter(Boolean) : [];
+
+  return (
+    <div className={style({marginBottom: 16})}>
+      <span className={style({font: 'body-lg'})}>
+        {renderHTMLfromMarkdown(component.description, {forceInline: false, forceBlock: true})}
+      </span>
+      {examples.map((example, index) => {
+        return (
+          <div key={index} className={style({marginTop: 12})}>
+            {examples.length > 1 && (
+              <strong className={style({font: 'title-sm'})}>Example {index + 1}:</strong>
+            )}
+            <pre className={standaloneCode}>
+              <Code lang="tsx">{example.trim()}</Code>
+            </pre>
+          </div>
+        );
+      })}
+    </div>
+  );
+}