Merge branch 'develop' into feature/MED-129

packages/ui/README.md

@@ -9,4 +9,4 @@ This package define two sets of components:
 
 ## Installing a Shadcn UI component
 
- Please refer to the [documentation](https://makerkit.dev/docs/next-supabase-turbo/components/shadcn).
+Please refer to the [documentation](https://makerkit.dev/docs/next-supabase-turbo/components/shadcn).

packages/ui/eslint.config.mjs

@@ -1,3 +0,0 @@
-import eslintConfigBase from '@kit/eslint-config/base.js';
-
-export default eslintConfigBase;

packages/ui/package.json

@@ -4,8 +4,6 @@
   "version": "0.1.0",
   "scripts": {
     "clean": "git clean -xdf .turbo node_modules",
-    "format": "prettier --check \"**/*.{ts,tsx}\"",
-    "lint": "eslint .",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
@@ -39,8 +37,6 @@
     "tailwind-merge": "^3.3.0"
   },
   "devDependencies": {
-    "@kit/eslint-config": "workspace:*",
-    "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
     "@tanstack/react-query": "5.76.1",
@@ -49,17 +45,14 @@
     "@types/react-dom": "19.1.5",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
-    "eslint": "^9.26.0",
     "next": "15.3.2",
     "next-themes": "0.4.6",
-    "prettier": "^3.5.3",
     "react-day-picker": "^8.10.1",
     "sonner": "^2.0.3",
     "tailwindcss": "4.1.7",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.3"
   },
-  "prettier": "@kit/prettier-config",
   "exports": {
     "./accordion": "./src/shadcn/accordion.tsx",
     "./alert-dialog": "./src/shadcn/alert-dialog.tsx",

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>
   );
 }