Genarrative/packages/shared/src/components/ui/card.tsx

import { type HTMLAttributes, type ReactNode } from 'react';

import { cn } from '../../lib/utils';

export type CardProps = HTMLAttributes<HTMLElement> & {
  as?: 'section' | 'div' | 'article' | 'aside';
  tone?: 'default' | 'soft' | 'contrast';
  padding?: 'sm' | 'md' | 'lg' | 'none';
  children?: ReactNode;
};

export function Card({
  as: Component = 'div',
  tone = 'default',
  padding = 'md',
  className,
  ...props
}: CardProps) {
  return (
    <Component
      {...props}
      data-slot="card"
      className={cn(
        'genarrative-ui-subpanel',
        `genarrative-ui-subpanel--${tone}`,
        `genarrative-ui-subpanel--padding-${padding}`,
        className,
      )}
    />
  );
}

export function CardHeader({
  className,
  ...props
}: HTMLAttributes<HTMLElement>) {
  return (
    <header
      {...props}
      data-slot="card-header"
      className={cn('genarrative-ui-subpanel__header', className)}
    />
  );
}

export function CardTitle({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLHeadingElement> & { children?: ReactNode }) {
  return (
    <h2
      {...props}
      data-slot="card-title"
      className={cn('genarrative-ui-subpanel__title', className)}
    >
      {children}
    </h2>
  );
}

export function CardActions({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      {...props}
      data-slot="card-actions"
      className={cn('genarrative-ui-subpanel__actions', className)}
    />
  );
}