[pull] main from adobe:main

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

@@ -1 +1,2 @@
 export {BasicHorizontalCard, HorizontalCard, CardPreview} from '../src/HorizontalCard';
+export type {CardProps, BasicCardProps} from '../src/HorizontalCard';

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

@@ -75,13 +75,22 @@ export interface CardProps extends Omit<
    *
    * @default 'primary'
    */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
+  variant?: 'primary' | 'secondary' | 'tertiary';
   /**
    * Spectrum-defined styles, returned by the `style()` macro.
    */
   styles?: StyleString;
 }
 
+export interface BasicCardProps extends Omit<CardProps, 'variant'> {
+  /**
+   * The visual style of the Card.
+   *
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
+}
+
 const borderRadius = {
   default: 'lg',
   size: {
@@ -93,7 +102,7 @@ const borderRadius = {
 
 // Figma missing a lot of combinations of variant, tshirt, density
 // Quiet Basic cards?
-// Does Basic not participate in selection?
+// Does Basic not participate in selection? (It does, but it's denoted by the border...)
 // Why is there a flipped horizontal card?
 // Max width on contents for horizontal cards? Doesn't appear to be one that includes the preview because the preview can have any ratio and that
 // causes the width grow.
@@ -112,18 +121,20 @@ let card = style({
       variant: {
         primary: 'elevated',
         secondary: 'layer-1',
-        basic: 'layer-2'
+        tertiary: 'layer-2'
+      },
+      isBasic: {
+        variant: {
+          primary: 'layer-2',
+          secondary: 'layer-1',
+          tertiary: 'layer-2',
+          quiet: 'layer-2'
+        }
       },
       forcedColors: 'ButtonFace'
     }
   },
-  backgroundColor: {
-    default: '--s2-container-bg',
-    variant: {
-      tertiary: 'transparent',
-      quiet: 'transparent'
-    }
-  },
+  backgroundColor: '--s2-container-bg',
   // TODO: No box shadow for basic, secondary, dark
   // also none for basic tertiary
   boxShadow: {
@@ -172,7 +183,16 @@ let card = style({
         XL: 240
       }
     },
-    isBasic: 68,
+    isBasic: {
+      default: 68,
+      size: {
+        XS: 52,
+        S: 60,
+        M: 68,
+        L: 76,
+        XL: 80
+      }
+    },
     isCardView: 'full',
     [onlyPreview]: 68
   },
@@ -218,22 +238,19 @@ let card = style({
       [onlyPreview]: 0
     }
   },
+  alignItems: {
+    isBasic: 'center'
+  },
   '--card-padding-y': {
     type: 'paddingTop',
     value: {
-      default: '--card-spacing',
-      variant: {
-        quiet: 0
-      }
+      default: '--card-spacing'
     }
   },
   '--card-padding-x': {
     type: 'paddingStart',
     value: {
-      default: '--card-spacing',
-      variant: {
-        quiet: 0
-      }
+      default: '--card-spacing'
     }
   },
   paddingY: '--card-padding-y',
@@ -439,7 +456,10 @@ const actionButtonSize = {
 } as const;
 
 const Card = forwardRef(function Card(
-  props: CardProps & {isBasic?: boolean},
+  props: Omit<CardProps, 'variant'> & {
+    isBasic?: boolean;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
+  },
   ref: DOMRef<HTMLDivElement>
 ) {
   let {ElementType} = useContext(InternalCardViewContext);
@@ -689,10 +709,6 @@ const collection = style({
 
 const collectionImage = style({
   width: 'full',
-  aspectRatio: {
-    default: 'square',
-    ':nth-last-child(4):first-child': '3/2'
-  },
   gridColumnEnd: {
     ':nth-last-child(4):first-child': 'span 3'
   },
@@ -731,7 +747,7 @@ export const HorizontalCard = forwardRef(function HorizontalCard(
 ) {
   let {size = 'M'} = props;
   return (
-    <Card {...props} ref={ref}>
+    <Card {...props} size={size} ref={ref}>
       {composeRenderProps(props.children, children => (
         <Provider
           values={[
@@ -743,7 +759,6 @@ export const HorizontalCard = forwardRef(function HorizontalCard(
                     alt: '',
                     styles: style({
                       height: 'full',
-                      aspectRatio: '1/1',
                       objectFit: 'cover',
                       pointerEvents: 'none',
                       userSelect: 'none'
@@ -811,12 +826,12 @@ export const HorizontalCard = forwardRef(function HorizontalCard(
 });
 
 export const BasicHorizontalCard = forwardRef(function BasicHorizontalCard(
-  props: CardProps,
+  props: BasicCardProps,
   ref: DOMRef<HTMLDivElement>
 ) {
   let {size = 'M'} = props;
   return (
-    <Card {...props} ref={ref} isBasic>
+    <Card {...props} size={size} ref={ref} isBasic>
       {composeRenderProps(props.children, children => (
         <Provider
           values={[
@@ -832,13 +847,7 @@ export const BasicHorizontalCard = forwardRef(function BasicHorizontalCard(
                       pointerEvents: 'none',
                       userSelect: 'none',
                       size: '--basic-thumb-size',
-                      borderRadius: {
-                        default: 'default',
-                        size: {
-                          XS: 'sm',
-                          S: 'sm'
-                        }
-                      },
+                      borderRadius: '[3px]',
                       objectFit: 'cover',
                       outlineStyle: 'solid',
                       outlineWidth: {

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

@@ -13,8 +13,12 @@
 import {ActionButton} from '@react-spectrum/s2/ActionButton';
 import {ActionMenu} from '@react-spectrum/s2/ActionMenu';
 import {Attachment as AttachmentComponent, AttachmentList} from '@react-spectrum/ai/AttachmentList';
-import {BasicHorizontalCard, CardPreview, HorizontalCard} from '@react-spectrum/ai/HorizontalCard';
-import {Card, CardProps} from '@react-spectrum/s2/Card';
+import {
+  BasicHorizontalCard,
+  CardPreview,
+  type CardProps,
+  HorizontalCard
+} from '@react-spectrum/ai/HorizontalCard';
 import ChevronRight from '@react-spectrum/s2/icons/ChevronRight';
 import {Content} from '@react-spectrum/s2/Content';
 import {Footer} from '@react-spectrum/s2/Footer';
@@ -57,7 +61,8 @@ const meta: Meta<CardProps & {isLoading?: boolean}> = {
 
 export default meta;
 
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof HorizontalCard>;
+type BasicStory = StoryObj<typeof BasicHorizontalCard>;
 
 export const Horizontal: Story = {
   render: args => (
@@ -109,6 +114,27 @@ export const Horizontal: Story = {
           </Text>
         </Content>
       </HorizontalCard>
+    </div>
+  )
+};
+
+export const Basic: BasicStory = {
+  render: args => (
+    <div
+      className={style({
+        display: 'flex',
+        gap: 16,
+        flexWrap: 'wrap',
+        alignItems: 'start',
+        justifyContent: 'center',
+        padding: 16,
+        backgroundColor: {
+          default: 'layer-1',
+          variant: {
+            secondary: 'layer-2'
+          }
+        }
+      })({variant: args.variant})}>
       <BasicHorizontalCard {...args} styles={style({maxWidth: 400})}>
         <Image
           slot="thumbnail"
@@ -166,7 +192,13 @@ export const Horizontal: Story = {
         />
       </BasicHorizontalCard>
     </div>
-  )
+  ),
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['primary', 'secondary', 'tertiary', 'quiet']
+    }
+  }
 };
 
 export const AIAttachmentList: Story = {

yarn.lock

@@ -10672,27 +10672,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/react@npm:^16.0.0":
-  version: 16.2.0
-  resolution: "@testing-library/react@npm:16.2.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.12.5"
-  peerDependencies:
-    "@testing-library/dom": ^10.0.0
-    "@types/react": ^18.0.0 || ^19.0.0
-    "@types/react-dom": ^18.0.0 || ^19.0.0
-    react: ^18.0.0 || ^19.0.0
-    react-dom: ^18.0.0 || ^19.0.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 10c0/7adaedaf237002b42e04a6261d2756074a19cbca0f0c79ba375660f618e123c0ee56256ced00aeb0bb7225ba1a8a81b92b692cca053521a21bb92a8cace1e4c6
-  languageName: node
-  linkType: hard
-
-"@testing-library/react@npm:^16.3.0":
+"@testing-library/react@npm:^16.0.0, @testing-library/react@npm:^16.3.0":
   version: 16.3.2
   resolution: "@testing-library/react@npm:16.3.2"
   dependencies: