Card.tsx

import { Slot } from '@radix-ui/react-slot';
import cl from 'clsx/lite';
import type { HTMLAttributes, ReactNode } from 'react';
import { forwardRef } from 'react';

export type CardProps = {
  /**
   * Changes background & border color
   * @default neutral
   */
  color?: 'neutral' | 'subtle' | 'brand1' | 'brand2' | 'brand3';
  /**
   * Change the default rendered element for the one passed as a child, merging their props and behavior.
   * @default false
   */
  asChild?: boolean;
  /**
   * Changes styling if card is used as a link
   * @default false
   */
  isLink?: boolean;
  /** Instances of `Card.Header`, `Card.Content`, `Card.Footer` or other React nodes like `Divider` */
  children: ReactNode;
} & HTMLAttributes<HTMLDivElement>;

/**
 * Card component to present content in a structured way.
 * @example
 * <Card>
 *  <Card.Header>Header</Card.Header>
 *  <Card.Content>Content</Card.Content>
 *  <Card.Footer>Footer</Card.Footer>
 * </Card>
 */
export const Card = forwardRef<HTMLDivElement, CardProps>(
  (
    { isLink = false, asChild = false, color = 'neutral', className, ...rest },
    ref,
  ) => {
    const Component = asChild ? Slot : 'div';
    return (
      <Component
        ref={ref}
        className={cl(`ds-card`, isLink && `ds-focus`, className)}
        data-color={color}
        data-link={isLink ? '' : undefined}
        {...rest}
      />
    );
  },
);

Card.displayName = 'Card';