Allow <Card> to be used as a label, fix <CheckboxGroup> props

Author: calebjacob

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

src/components/Card.tsx

@@ -5,6 +5,7 @@ import { type ThemeColor } from '../utils/theme';
 import s from './Card.module.scss';
 
 type Props = ComponentPropsWithRef<'div'> & {
+  as?: 'div' | 'label' | 'span';
   animateIn?: boolean;
   href?: string;
   target?: ComponentPropsWithRef<'a'>['target'];
@@ -21,6 +22,7 @@ type Props = ComponentPropsWithRef<'div'> & {
 export const Card = forwardRef<HTMLDivElement, Props>(
   (
     {
+      as = 'div',
       animateIn,
       background = 'sand-0',
       backgroundHover,
@@ -37,7 +39,8 @@ export const Card = forwardRef<HTMLDivElement, Props>(
     ref,
   ) => {
     const { Link } = usePagodaUi();
-    const Element: any = props.href ? Link : 'div';
+    const Tag = as;
+    const Element: any = props.href ? Link : Tag;
 
     return (
       <Element

src/components/Checkbox.tsx

@@ -18,7 +18,9 @@ export const Checkbox = forwardRef<HTMLInputElement, Props>(({ className = '', t
 });
 Checkbox.displayName = 'Checkbox';
 
-export const CheckboxGroup = forwardRef<HTMLInputElement, Props>(({ className = '', ...props }, ref) => {
+type CheckboxGroupProps = ComponentPropsWithRef<'div'>;
+
+export const CheckboxGroup = forwardRef<HTMLInputElement, CheckboxGroupProps>(({ className = '', ...props }, ref) => {
   return <div role="group" className={`${s.group} ${className}`} ref={ref} {...props} />;
 });
 CheckboxGroup.displayName = 'CheckboxGroup';