Refactor CardButtonTitle and CardButtonHeader components for flexibility

Changed the component type of CardButtonTitle from HTMLSpanElement to HTMLDivElement to provide more flexibility. Modified the CardButtonHeader component to include new optional properties (asChild and displayArrow), and revised its structure to correctly display its children and ChevronRight icon based on the provided props.

packages/ui/src/makerkit/card-button.tsx

@@ -30,14 +30,14 @@ export const CardButton = React.forwardRef<
 });
 
 export const CardButtonTitle = React.forwardRef<
-  HTMLSpanElement,
+  HTMLDivElement,
   {
     className?: string;
     asChild?: boolean;
     children: React.ReactNode;
   }
 >(function CardButtonTitle({ className, asChild, ...props }, ref) {
-  const Comp = asChild ? Slot : 'span';
+  const Comp = asChild ? Slot : 'div';
 
   return (
     <Comp
@@ -58,18 +58,30 @@ export const CardButtonHeader = React.forwardRef<
   {
     className?: string;
     children: React.ReactNode;
+    asChild?: boolean;
+    displayArrow?: boolean;
   }
->(function CardButtonHeader({ className, ...props }, ref) {
+>(function CardButtonHeader(
-  return (
+  { className, asChild, displayArrow = true, ...props },
-    <div className={cn(className, 'p-4')} {...props} ref={ref}>
+  ref,
-      {props.children}
+) {
+  const Comp = asChild ? Slot : 'div';
 
-      <ChevronRight
+  return (
-        className={
+    <Comp className={cn(className, 'p-4')} {...props} ref={ref}>
-          'absolute right-2 top-4 h-4 text-muted-foreground transition-colors group-hover:text-secondary-foreground'
+      <Slottable>
-        }
+        {props.children}
-      />
+
-    </div>
+        <ChevronRight
+          className={cn(
+            'absolute right-2 top-4 h-4 text-muted-foreground transition-colors group-hover:text-secondary-foreground',
+            {
+              hidden: !displayArrow,
+            },
+          )}
+        />
+      </Slottable>
+    </Comp>
   );
 });