Improve types

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/components/card/page.mdx

@@ -110,7 +110,7 @@ Pass `onPress` and a `label` (used as the accessible name for screen readers) to
 
 ### Link
 
-Pass `href` to make the card surface navigate to a URL. The `label` prop is optional but recommended for accessibility when the card content alone may not sufficiently describe the destination.
+Pass `href` to make the card surface navigate to a URL. `label` is required — it provides the accessible name for the invisible overlay link read by screen readers.
 
 <Snippet
   align="center"

docs-ui/src/app/components/card/props-definition.ts

@@ -32,7 +32,7 @@ export const cardPropDefs: Record<string, PropDef> = {
     type: 'string',
     responsive: false,
     description:
-      'Accessible label announced by screen readers for the interactive overlay. Required when onPress is provided.',
+      'Accessible label announced by screen readers for the interactive overlay. Required when onPress or href is provided.',
   },
   ...classNamePropDefs,
   ...stylePropDefs,

packages/ui/report.api.md

@@ -603,9 +603,12 @@ export interface CardBodyProps
 
 // @public (undocumented)
 export type CardButtonVariant = {
-  onPress: () => void;
+  onPress: NonNullable<ButtonProps_2['onPress']>;
   href?: never;
   label: string;
+  target?: never;
+  rel?: never;
+  download?: never;
 };
 
 // @public
@@ -695,20 +698,23 @@ export type CardLinkVariant = {
   onPress?: never;
   label: string;
   target?: string;
-};
-
-// @public
-export type CardOwnProps = {
-  children?: ReactNode;
-  className?: string;
-  onPress?: () => void;
-  href?: string;
-  label?: string;
-  target?: string;
   rel?: string;
   download?: boolean | string;
 };
 
+// @public
+export type CardOwnProps = Pick<
+  CardBaseProps & (CardButtonVariant | CardLinkVariant | CardStaticVariant),
+  | 'children'
+  | 'className'
+  | 'onPress'
+  | 'href'
+  | 'label'
+  | 'target'
+  | 'rel'
+  | 'download'
+>;
+
 // @public
 export type CardProps = CardBaseProps &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'onPress'> &
@@ -719,6 +725,9 @@ export type CardStaticVariant = {
   onPress?: never;
   href?: never;
   label?: never;
+  target?: never;
+  rel?: never;
+  download?: never;
 };
 
 // @public (undocumented)

packages/ui/src/components/Card/Card.module.css

@@ -51,6 +51,7 @@
    */
   .bui-Card[data-interactive] {
     cursor: pointer;
+    overflow: hidden;
 
     &::after {
       content: '';

packages/ui/src/components/Card/Card.tsx

@@ -24,7 +24,6 @@ import {
   CardFooterDefinition,
 } from './definition';
 import type {
-  CardOwnProps,
   CardProps,
   CardHeaderProps,
   CardBodyProps,
@@ -40,8 +39,7 @@ import { Box } from '../Box/Box';
 export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   const { ownProps, restProps, dataAttributes } = useDefinition(
     CardDefinition,
-    props as CardOwnProps &
-      Omit<React.HTMLAttributes<HTMLDivElement>, 'onPress'>,
+    props,
   );
   const { classes, children, onPress, href, label, target, rel, download } =
     ownProps;

packages/ui/src/components/Card/types.ts

@@ -15,21 +15,7 @@
  */
 
 import type { ReactNode } from 'react';
-
-/**
- * Flat own-props shape used by the component definition system.
- * @public
- */
-export type CardOwnProps = {
-  children?: ReactNode;
-  className?: string;
-  onPress?: () => void;
-  href?: string;
-  label?: string;
-  target?: string;
-  rel?: string;
-  download?: boolean | string;
-};
+import type { ButtonProps as RAButtonProps } from 'react-aria-components';
 
 /** @public */
 export type CardBaseProps = { children?: ReactNode; className?: string };
@@ -37,10 +23,13 @@ export type CardBaseProps = { children?: ReactNode; className?: string };
 /** @public */
 export type CardButtonVariant = {
   /** Handler called when the card is pressed. Makes the card interactive as a button. */
-  onPress: () => void;
+  onPress: NonNullable<RAButtonProps['onPress']>;
   href?: never;
   /** Accessible label announced by screen readers for the interactive card. */
   label: string;
+  target?: never;
+  rel?: never;
+  download?: never;
 };
 
 /** @public */
@@ -52,6 +41,10 @@ export type CardLinkVariant = {
   label: string;
   /** Specifies where to open the linked URL (e.g. `_blank` for a new tab). */
   target?: string;
+  /** Relationship between the current document and the linked URL (e.g. `noopener`). */
+  rel?: string;
+  /** Prompts the user to save the linked URL. Pass `true` for default filename or a string for a custom filename. */
+  download?: boolean | string;
 };
 
 /** @public */
@@ -59,6 +52,9 @@ export type CardStaticVariant = {
   onPress?: never;
   href?: never;
   label?: never;
+  target?: never;
+  rel?: never;
+  download?: never;
 };
 
 /**
@@ -70,6 +66,23 @@ export type CardProps = CardBaseProps &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'onPress'> &
   (CardButtonVariant | CardLinkVariant | CardStaticVariant);
 
+/**
+ * Flat own-props shape used by the component definition system.
+ * Derived from the Card variant types so it automatically stays in sync with CardProps.
+ * @public
+ */
+export type CardOwnProps = Pick<
+  CardBaseProps & (CardButtonVariant | CardLinkVariant | CardStaticVariant),
+  | 'children'
+  | 'className'
+  | 'onPress'
+  | 'href'
+  | 'label'
+  | 'target'
+  | 'rel'
+  | 'download'
+>;
+
 /** @public */
 export type CardHeaderOwnProps = {
   children?: ReactNode;