Merge branch 'develop' into feature/MED-129

packages/ui/src/makerkit/app-breadcrumbs.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import { Fragment } from 'react';
-import clsx from 'clsx';
 
 import { usePathname } from 'next/navigation';
 
+import clsx from 'clsx';
+
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -57,9 +58,11 @@ export function AppBreadcrumbs(props: {
 
           return (
             <Fragment key={index}>
-              <BreadcrumbItem className={clsx('lg:text-xs', {
-                'font-bold text-black': isLast,
-              })}>
+              <BreadcrumbItem
+                className={clsx('lg:text-xs', {
+                  'font-bold text-black': isLast,
+                })}
+              >
                 <If
                   condition={index < visiblePaths.length - 1}
                   fallback={label}
@@ -69,7 +72,7 @@ export function AppBreadcrumbs(props: {
                       '/' +
                       splitPath.slice(0, splitPath.indexOf(path) + 1).join('/')
                     }
-                    className='text-muted-foreground'
+                    className="text-muted-foreground"
                   >
                     {label}
                   </BreadcrumbLink>

packages/ui/src/makerkit/page.tsx

@@ -120,7 +120,7 @@ export function PageNavigation(props: React.PropsWithChildren) {
 export function PageDescription(props: React.PropsWithChildren) {
   return (
     <div className={'flex items-center'}>
-      <div className={'text-muted-foreground text-sm font-normal leading-6'}>
+      <div className={'text-muted-foreground text-sm leading-6 font-normal'}>
         {props.children}
       </div>
     </div>
@@ -158,7 +158,7 @@ export function PageHeader({
   return (
     <div
       className={cn(
-        'flex py-5 flex-col sm:flex-row items-start sm:items-center sm:justify-between',
+        'flex flex-col items-start py-5 sm:flex-row sm:items-center sm:justify-between',
         className,
       )}
     >

packages/ui/src/shadcn/card.tsx

@@ -34,19 +34,24 @@ const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex flex-col space-y-1.5 p-4 sm:p-6', className)} {...props} />
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  className,
-  ...props
-}) => (
-  <h3
-    className={cn('leading-none font-semibold tracking-tight', className)}
+  <div
+    className={cn('flex flex-col space-y-1.5 p-4 sm:p-6', className)}
     {...props}
   />
 );
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle: React.FC<
+  React.HTMLAttributes<HTMLHeadingElement> & { size?: 'h3' | 'h4' | 'h5' }
+> = ({ className, size = 'h3', ...props }) => {
+  const Component = size;
+  return (
+    <Component
+      className={cn('leading-none font-semibold tracking-tight', className)}
+      {...props}
+    />
+  );
+};
 CardTitle.displayName = 'CardTitle';
 
 const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
@@ -60,14 +65,17 @@ CardDescription.displayName = 'CardDescription';
 const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
-}) => <div className={cn('p-4 sm:p-6 pt-0', className)} {...props} />;
+}) => <div className={cn('p-4 pt-0 sm:p-6', className)} {...props} />;
 CardContent.displayName = 'CardContent';
 
 const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
 }) => (
-  <div className={cn('flex items-center p-4 sm:p-6 pt-0', className)} {...props} />
+  <div
+    className={cn('flex items-center p-4 pt-0 sm:p-6', className)}
+    {...props}
+  />
 );
 CardFooter.displayName = 'CardFooter';
 

packages/ui/src/shadcn/skeleton.tsx

@@ -2,13 +2,23 @@ import { cn } from '../lib/utils';
 
 function Skeleton({
   className,
+  children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+      className={cn('relative inline-block align-top', className)}
       {...props}
-    />
+    >
+      <div className="invisible">
+        {children ?? <span className="block h-4 w-24" />}
+      </div>
+
+      <div
+        aria-hidden
+        className="bg-primary/10 absolute inset-0 animate-pulse rounded-md"
+      />
+    </div>
   );
 }