Merge pull request #476 from acelaya-forks/feature/card-ref

Add ref to Card and SimpleCard

Author: acelaya

CHANGELOG.md

@@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
+## [0.9.5] - 2025-05-30
+### Added
+* *Nothing*
+
+### Changed
+* *Nothing*
+
+### Deprecated
+* *Nothing*
+
+### Removed
+* *Nothing*
+
+### Fixed
+* Allow `ref` to be passed to `Card` and its nested components.
+
+
 ## [0.9.4] - 2025-05-29
 ### Added
 * Add `sticky-cell` tailwind utility.

src/tailwind/surfaces/Card.tsx

@@ -1,49 +1,54 @@
 import clsx from 'clsx';
-import type { FC, HTMLProps } from 'react';
+import type { HTMLProps } from 'react';
+import { forwardRef } from 'react';
 
-export type CardProps = HTMLProps<HTMLDivElement>;
+export type CardProps = Omit<HTMLProps<HTMLDivElement>, 'ref'>;
 
-const Header: FC<CardProps> = ({ className, ...rest }) => (
+const Header = forwardRef<HTMLDivElement, CardProps>(({ className, ...rest }, ref) => (
   <div
     className={clsx(
       'tw:px-4 tw:py-3 tw:rounded-t-md',
       'tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-b tw:border-lm-border tw:dark:border-dm-border',
       className,
     )}
     {...rest}
+    ref={ref}
   />
-);
+));
 
-const Body: FC<CardProps> = ({ className, ...rest }) => (
+const Body = forwardRef<HTMLDivElement, CardProps>(({ className, ...rest }, ref) => (
   <div
     className={clsx(
       'tw:p-4 tw:bg-lm-primary tw:dark:bg-dm-primary tw:first:rounded-t-md',
       'tw:first:rounded-t-md tw:last:rounded-b-md',
       className,
     )}
     {...rest}
+    ref={ref}
   />
-);
+));
 
-const Footer: FC<CardProps> = ({ className, ...rest }) => (
+const Footer = forwardRef<HTMLDivElement, CardProps>(({ className, ...rest }, ref) => (
   <div
     className={clsx(
       'tw:px-4 tw:py-3 tw:rounded-b-md',
       'tw:bg-lm-primary tw:dark:bg-dm-primary tw:border-t tw:border-lm-border tw:dark:border-dm-border',
       className,
     )}
     {...rest}
+    ref={ref}
   />
-);
+));
 
-const BaseCard: FC<CardProps> = ({ className, ...props }) => (
+const BaseCard = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
   <div
     className={clsx(
       'tw:group/card tw:rounded-md tw:shadow-md',
       'tw:border tw:border-lm-border tw:dark:border-dm-border tw:bg-lm-primary tw:dark:bg-dm-primary',
       className)}
     {...props}
+    ref={ref}
   />
-);
+));
 
 export const Card = Object.assign(BaseCard, { Body, Header, Footer });

src/tailwind/surfaces/SimpleCard.tsx

@@ -1,4 +1,5 @@
-import type { FC, ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
 import type { Size } from '../types';
 import type { CardProps } from './Card';
 import { Card } from './Card';
@@ -17,15 +18,15 @@ export type SimpleCardProps = Omit<CardProps, 'title' | 'size'> & {
   bodyClassName?: string;
 } & (TitleProps | NoTitleProps);
 
-export const SimpleCard: FC<SimpleCardProps> = ({ bodyClassName, children, ...rest }) => {
+export const SimpleCard = forwardRef<HTMLDivElement, SimpleCardProps>(({ bodyClassName, children, ...rest }, ref) => {
   const { title, titleSize = 'md', ...cardProps } = 'title' in rest ? rest : {
     ...rest,
     title: undefined,
     titleSize: undefined,
   };
 
   return (
-    <Card {...cardProps}>
+    <Card {...cardProps} ref={ref}>
       {title && (
         <Card.Header>
           {titleSize === 'lg' && <h4>{title}</h4>}
@@ -38,4 +39,4 @@ export const SimpleCard: FC<SimpleCardProps> = ({ bodyClassName, children, ...re
       </Card.Body>
     </Card>
   );
-};
+});