React 19 refactoring: Removed forwardRef references in all UI Components (#99)

* React 19 refactoring: Removed forwardRef references in all UI Components
* Added Progress UI component from Shadcn
* Updated dependencies
* Formatted files
* Fix Mobile Dropdowns

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

@@ -5,19 +5,17 @@ import { ChevronRight } from 'lucide-react';
 
 import { cn } from '../lib/utils';
 
-export const CardButton = React.forwardRef<
-  HTMLButtonElement,
+export const CardButton: React.FC<
   {
     asChild?: boolean;
     className?: string;
     children: React.ReactNode;
   } & React.ButtonHTMLAttributes<HTMLButtonElement>
->(function CardButton({ className, asChild, ...props }, ref) {
+> = function CardButton({ className, asChild, ...props }) {
   const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
-      ref={ref}
       className={cn(
         'group relative flex h-36 flex-col rounded-lg border transition-all hover:bg-secondary/20 hover:shadow active:bg-secondary active:bg-secondary/50 active:shadow-lg dark:shadow-primary/20',
         className,
@@ -27,21 +25,18 @@ export const CardButton = React.forwardRef<
       <Slottable>{props.children}</Slottable>
     </Comp>
   );
-});
+};
 
-export const CardButtonTitle = React.forwardRef<
-  HTMLDivElement,
+export const CardButtonTitle: React.FC<
   {
-    className?: string;
     asChild?: boolean;
     children: React.ReactNode;
-  }
->(function CardButtonTitle({ className, asChild, ...props }, ref) {
+  } & React.HTMLAttributes<HTMLDivElement>
+> = function CardButtonTitle({ className, asChild, ...props }) {
   const Comp = asChild ? Slot : 'div';
 
   return (
     <Comp
-      ref={ref}
       className={cn(
         className,
         'align-super text-sm font-medium text-muted-foreground transition-colors group-hover:text-secondary-foreground',
@@ -51,24 +46,24 @@ export const CardButtonTitle = React.forwardRef<
       <Slottable>{props.children}</Slottable>
     </Comp>
   );
-});
+};
 
-export const CardButtonHeader = React.forwardRef<
-  HTMLDivElement,
+export const CardButtonHeader: React.FC<
   {
-    className?: string;
     children: React.ReactNode;
     asChild?: boolean;
     displayArrow?: boolean;
-  }
->(function CardButtonHeader(
-  { className, asChild, displayArrow = true, ...props },
-  ref,
-) {
+  } & React.HTMLAttributes<HTMLDivElement>
+> = function CardButtonHeader({
+  className,
+  asChild,
+  displayArrow = true,
+  ...props
+}) {
   const Comp = asChild ? Slot : 'div';
 
   return (
-    <Comp className={cn(className, 'p-4')} {...props} ref={ref}>
+    <Comp className={cn(className, 'p-4')} {...props}>
       <Slottable>
         {props.children}
 
@@ -83,37 +78,29 @@ export const CardButtonHeader = React.forwardRef<
       </Slottable>
     </Comp>
   );
-});
+};
 
-export const CardButtonContent = React.forwardRef<
-  HTMLDivElement,
+export const CardButtonContent: React.FC<
   {
-    className?: string;
     asChild?: boolean;
     children: React.ReactNode;
-  }
->(function CardButtonContent({ className, asChild, ...props }, ref) {
+  } & React.HTMLAttributes<HTMLDivElement>
+> = function CardButtonContent({ className, asChild, ...props }) {
   const Comp = asChild ? Slot : 'div';
 
   return (
-    <Comp
-      className={cn(className, 'flex flex-1 flex-col px-4')}
-      {...props}
-      ref={ref}
-    >
+    <Comp className={cn(className, 'flex flex-1 flex-col px-4')} {...props}>
       <Slottable>{props.children}</Slottable>
     </Comp>
   );
-});
+};
 
-export const CardButtonFooter = React.forwardRef<
-  HTMLDivElement,
+export const CardButtonFooter: React.FC<
   {
-    className?: string;
     asChild?: boolean;
     children: React.ReactNode;
-  }
->(function CardButtonFooter({ className, asChild, ...props }, ref) {
+  } & React.HTMLAttributes<HTMLDivElement>
+> = function CardButtonFooter({ className, asChild, ...props }) {
   const Comp = asChild ? Slot : 'div';
 
   return (
@@ -123,9 +110,8 @@ export const CardButtonFooter = React.forwardRef<
         'mt-auto flex h-0 w-full flex-col justify-center border-t px-4',
       )}
       {...props}
-      ref={ref}
     >
       <Slottable>{props.children}</Slottable>
     </Comp>
   );
-});
+};

packages/ui/src/makerkit/cookie-banner.tsx

@@ -31,6 +31,7 @@ export function CookieBanner() {
   return (
     <DialogPrimitive.Root open modal={false}>
       <DialogPrimitive.Content
+        onOpenAutoFocus={(e) => e.preventDefault()}
         className={`dark:shadow-primary-500/40 fixed bottom-0 w-full max-w-lg border bg-background p-6 shadow-2xl delay-1000 duration-1000 animate-in fade-in zoom-in-95 slide-in-from-bottom-16 fill-mode-both lg:bottom-[2rem] lg:left-[2rem] lg:h-48 lg:rounded-lg`}
       >
         <div className={'flex flex-col space-y-4'}>

packages/ui/src/makerkit/divider.tsx

@@ -1,5 +0,0 @@
-import { cn } from '../lib/utils';
-
-export function Divider(props: { className?: string }) {
-  return <div className={cn('h-[1px] w-full bg-border', props.className)} />;
-}

packages/ui/src/makerkit/empty-state.tsx

@@ -3,42 +3,38 @@ import React from 'react';
 import { cn } from '../lib/utils';
 import { Button } from '../shadcn/button';
 
-const EmptyStateHeading = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
+const EmptyStateHeading: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className,
+  ...props
+}) => (
   <h3
-    ref={ref}
     className={cn('text-2xl font-bold tracking-tight', className)}
     {...props}
   />
-));
+);
 EmptyStateHeading.displayName = 'EmptyStateHeading';
 
-const EmptyStateText = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
+const EmptyStateText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className,
+  ...props
+}) => (
+  <p className={cn('text-sm text-muted-foreground', className)} {...props} />
+);
 EmptyStateText.displayName = 'EmptyStateText';
 
-const EmptyStateButton = React.forwardRef<
-  HTMLButtonElement,
+const EmptyStateButton: React.FC<
   React.ComponentPropsWithoutRef<typeof Button>
->(({ className, ...props }, ref) => (
-  <Button ref={ref} className={cn('mt-4', className)} {...props} />
-));
+> = ({ className, ...props }) => (
+  <Button className={cn('mt-4', className)} {...props} />
+);
+
 EmptyStateButton.displayName = 'EmptyStateButton';
 
-const EmptyState = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
+const EmptyState: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className,
+  ...props
+}) => {
   const childrenArray = React.Children.toArray(children);
 
   const heading = childrenArray.find(
@@ -63,7 +59,6 @@ const EmptyState = React.forwardRef<
 
   return (
     <div
-      ref={ref}
       className={cn(
         'flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm',
         className,
@@ -78,7 +73,7 @@ const EmptyState = React.forwardRef<
       </div>
     </div>
   );
-});
+};
 EmptyState.displayName = 'EmptyState';
 
 export { EmptyState, EmptyStateHeading, EmptyStateText, EmptyStateButton };

packages/ui/src/makerkit/image-upload-input.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { FormEvent, MouseEventHandler } from 'react';
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 import Image from 'next/image';
 
@@ -17,23 +17,21 @@ type Props = Omit<React.InputHTMLAttributes<unknown>, 'value'> & {
   onClear?: () => void;
   onValueChange?: (props: { image: string; file: File }) => void;
   visible?: boolean;
-};
+} & React.ComponentPropsWithRef<'input'>;
 
 const IMAGE_SIZE = 22;
 
-export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
-  function ImageUploadInputComponent(
-    {
-      children,
-      image,
-      onClear,
-      onInput,
-      onValueChange,
-      visible = true,
-      ...props
-    },
-    forwardedRef,
-  ) {
+export const ImageUploadInput: React.FC<Props> =
+  function ImageUploadInputComponent({
+    children,
+    image,
+    onClear,
+    onInput,
+    onValueChange,
+    ref: forwardedRef,
+    visible = true,
+    ...props
+  }) {
     const localRef = useRef<HTMLInputElement>(null);
 
     const [state, setState] = useState({
@@ -199,5 +197,4 @@ export const ImageUploadInput = forwardRef<React.ElementRef<'input'>, Props>(
         </div>
       </label>
     );
-  },
-);
+  };

packages/ui/src/makerkit/marketing/coming-soon.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { Button } from '@kit/ui/button';
 import { cn } from '@kit/ui/utils';
@@ -7,38 +7,36 @@ import { CtaButton } from './cta-button';
 import { GradientSecondaryText } from './gradient-secondary-text';
 import { HeroTitle } from './hero-title';
 
-const ComingSoonHeading = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <HeroTitle ref={ref} className={cn(className)} {...props} />
-));
+const ComingSoonHeading: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className,
+  ...props
+}) => <HeroTitle className={cn(className)} {...props} />;
+
 ComingSoonHeading.displayName = 'ComingSoonHeading';
 
-const ComingSoonText = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const ComingSoonText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className,
+  ...props
+}) => (
   <GradientSecondaryText
-    ref={ref}
     className={cn('text-lg text-muted-foreground md:text-xl', className)}
     {...props}
   />
-));
+);
 ComingSoonText.displayName = 'ComingSoonText';
 
-const ComingSoonButton = React.forwardRef<
-  HTMLButtonElement,
+const ComingSoonButton: React.FC<
   React.ComponentPropsWithoutRef<typeof Button>
->(({ className, ...props }, ref) => (
-  <CtaButton ref={ref} className={cn('mt-8', className)} {...props} />
-));
+> = ({ className, ...props }) => (
+  <CtaButton className={cn('mt-8', className)} {...props} />
+);
 ComingSoonButton.displayName = 'ComingSoonButton';
 
-const ComingSoon = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ children, className, ...props }, ref) => {
+const ComingSoon: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  children,
+  className,
+  ...props
+}) => {
   const childrenArray = React.Children.toArray(children);
 
   const logo = childrenArray.find(
@@ -72,7 +70,6 @@ const ComingSoon = React.forwardRef<
 
   return (
     <div
-      ref={ref}
       className={cn(
         'container flex min-h-screen flex-col items-center justify-center space-y-12 p-4',
         className,
@@ -92,15 +89,13 @@ const ComingSoon = React.forwardRef<
       </div>
     </div>
   );
-});
+};
 ComingSoon.displayName = 'ComingSoon';
 
-const ComingSoonLogo = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLImageElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn(className, 'fixed left-8 top-8')} {...props} />
-));
+const ComingSoonLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
+  className,
+  ...props
+}) => <div className={cn(className, 'fixed left-8 top-8')} {...props} />;
 ComingSoonLogo.displayName = 'ComingSoonLogo';
 
 export {

packages/ui/src/makerkit/marketing/cta-button.tsx

@@ -1,23 +1,22 @@
-import { forwardRef } from 'react';
-
 import { cn } from '../../lib/utils';
 import { Button } from '../../shadcn/button';
 
-export const CtaButton = forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(function CtaButtonComponent({ className, children, ...props }, ref) {
-  return (
-    <Button
-      className={cn('h-12 rounded-xl px-4 text-base font-semibold', className, {
-        ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
-          props.variant === 'default' || !props.variant,
-      })}
-      asChild
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </Button>
-  );
-});
+export const CtaButton: React.FC<React.ComponentProps<typeof Button>> =
+  function CtaButtonComponent({ className, children, ...props }) {
+    return (
+      <Button
+        className={cn(
+          'h-12 rounded-xl px-4 text-base font-semibold',
+          className,
+          {
+            ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
+              props.variant === 'default' || !props.variant,
+          },
+        )}
+        asChild
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+  };

packages/ui/src/makerkit/marketing/feature-card.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { cn } from '../../lib/utils';
 import {
@@ -14,31 +14,32 @@ interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
   image?: React.ReactNode;
 }
 
-export const FeatureCard = forwardRef<HTMLDivElement, FeatureCardProps>(
-  function FeatureCardComponent(
-    { className, label, description, image, children, ...props },
-    ref,
-  ) {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'rounded-3xl p-2 ring-2 ring-gray-100 dark:ring-primary/10',
-          className,
-        )}
-        {...props}
-      >
-        <CardHeader>
-          <CardTitle className="text-xl font-semibold">{label}</CardTitle>
-          <CardDescription className="max-w-xs text-sm font-semibold tracking-tight text-muted-foreground">
-            {description}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {image}
-          {children}
-        </CardContent>
-      </div>
-    );
-  },
-);
+export const FeatureCard: React.FC<FeatureCardProps> = ({
+  className,
+  label,
+  description,
+  image,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={cn(
+        'rounded-3xl p-2 ring-2 ring-gray-100 dark:ring-primary/10',
+        className,
+      )}
+      {...props}
+    >
+      <CardHeader>
+        <CardTitle className="text-xl font-semibold">{label}</CardTitle>
+        <CardDescription className="max-w-xs text-sm font-semibold tracking-tight text-muted-foreground">
+          {description}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {image}
+        {children}
+      </CardContent>
+    </div>
+  );
+};

packages/ui/src/makerkit/marketing/feature-grid.tsx

@@ -1,21 +1,18 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { cn } from '../../lib/utils';
 
-export const FeatureGrid = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(function FeatureGridComponent({ className, children, ...props }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'grid w-full grid-cols-1 gap-4 space-y-0 lg:grid-cols-3',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
+export const FeatureGrid: React.FC<React.HTMLAttributes<HTMLDivElement>> =
+  function FeatureGridComponent({ className, children, ...props }) {
+    return (
+      <div
+        className={cn(
+          'grid w-full grid-cols-1 gap-4 space-y-0 lg:grid-cols-3',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  };

packages/ui/src/makerkit/marketing/feature-showcase.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { cn } from '../../lib/utils';
 
@@ -7,14 +7,16 @@ interface FeatureShowcaseProps extends React.HTMLAttributes<HTMLDivElement> {
   icon?: React.ReactNode;
 }
 
-export const FeatureShowcase = forwardRef<HTMLDivElement, FeatureShowcaseProps>(
-  function FeatureShowcaseComponent(
-    { className, heading, icon, children, ...props },
-    ref,
-  ) {
+export const FeatureShowcase: React.FC<FeatureShowcaseProps> =
+  function FeatureShowcaseComponent({
+    className,
+    heading,
+    icon,
+    children,
+    ...props
+  }) {
     return (
       <div
-        ref={ref}
         className={cn('flex flex-col justify-between space-y-8', className)}
         {...props}
       >
@@ -27,8 +29,7 @@ export const FeatureShowcase = forwardRef<HTMLDivElement, FeatureShowcaseProps>(
         {children}
       </div>
     );
-  },
-);
+  };
 
 export function FeatureShowcaseIconContainer(
   props: React.PropsWithChildren<{

packages/ui/src/makerkit/marketing/footer.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react';
-
 import { cn } from '../../lib/utils';
 
 interface FooterSection {
@@ -17,63 +15,60 @@ interface FooterProps extends React.HTMLAttributes<HTMLElement> {
   sections: FooterSection[];
 }
 
-export const Footer = forwardRef<HTMLElement, FooterProps>(
-  function MarketingFooterComponent(
-    { className, logo, description, copyright, sections, ...props },
-    ref,
-  ) {
-    return (
-      <footer
-        ref={ref}
-        className={cn(
-          'site-footer relative mt-auto w-full py-8 2xl:py-16',
-          className,
-        )}
-        {...props}
-      >
-        <div className="container">
-          <div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0">
-            <div className="flex w-full space-x-2 lg:w-4/12 xl:w-4/12 xl:space-x-6 2xl:space-x-8">
+export const Footer: React.FC<FooterProps> = ({
+  className,
+  logo,
+  description,
+  copyright,
+  sections,
+  ...props
+}) => {
+  return (
+    <footer
+      className={cn(
+        'site-footer relative mt-auto w-full py-8 2xl:py-16',
+        className,
+      )}
+      {...props}
+    >
+      <div className="container">
+        <div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0">
+          <div className="flex w-full space-x-2 lg:w-4/12 xl:w-4/12 xl:space-x-6 2xl:space-x-8">
+            <div className="flex flex-col space-y-4">
+              <div>{logo}</div>
               <div className="flex flex-col space-y-4">
-                <div>{logo}</div>
-                <div className="flex flex-col space-y-4">
-                  <div>
-                    <p className="text-sm text-muted-foreground">
-                      {description}
-                    </p>
-                  </div>
-                  <div className="flex text-xs text-muted-foreground">
-                    <p>{copyright}</p>
-                  </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">{description}</p>
+                </div>
+                <div className="flex text-xs text-muted-foreground">
+                  <p>{copyright}</p>
                 </div>
               </div>
             </div>
+          </div>
 
-            <div className="flex w-full flex-col space-y-8 lg:flex-row lg:justify-end lg:space-x-6 lg:space-y-0 xl:space-x-16">
-              {sections.map((section, index) => (
-                <div key={index}>
-                  <div className="flex flex-col space-y-2.5">
-                    <FooterSectionHeading>
-                      {section.heading}
-                    </FooterSectionHeading>
+          <div className="flex w-full flex-col space-y-8 lg:flex-row lg:justify-end lg:space-x-6 lg:space-y-0 xl:space-x-16">
+            {sections.map((section, index) => (
+              <div key={index}>
+                <div className="flex flex-col space-y-2.5">
+                  <FooterSectionHeading>{section.heading}</FooterSectionHeading>
 
-                    <FooterSectionList>
-                      {section.links.map((link, linkIndex) => (
-                        <FooterLink key={linkIndex} href={link.href}>
-                          {link.label}
-                        </FooterLink>
-                      ))}
-                    </FooterSectionList>
-                  </div>
+                  <FooterSectionList>
+                    {section.links.map((link, linkIndex) => (
+                      <FooterLink key={linkIndex} href={link.href}>
+                        {link.label}
+                      </FooterLink>
+                    ))}
+                  </FooterSectionList>
                 </div>
-              ))}
-            </div>
+              </div>
+            ))}
           </div>
         </div>
-      </footer>
-    );
-  },
-);
+      </div>
+    </footer>
+  );
+};
 
 function FooterSectionHeading(props: React.PropsWithChildren) {
   return <span className="font-heading">{props.children}</span>;

packages/ui/src/makerkit/marketing/gradient-secondary-text.tsx

@@ -1,20 +1,16 @@
-import { forwardRef } from 'react';
-
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
 import { cn } from '../../lib/utils';
 
-export const GradientSecondaryText = forwardRef<
-  HTMLSpanElement,
+export const GradientSecondaryText: React.FC<
   React.HTMLAttributes<HTMLSpanElement> & {
     asChild?: boolean;
   }
->(function GradientSecondaryTextComponent({ className, ...props }, ref) {
+> = function GradientSecondaryTextComponent({ className, ...props }) {
   const Comp = props.asChild ? Slot : 'span';
 
   return (
     <Comp
-      ref={ref}
       className={cn(
         'bg-gradient-to-r from-foreground/50 to-foreground bg-clip-text text-transparent',
         className,
@@ -24,4 +20,4 @@ export const GradientSecondaryText = forwardRef<
       <Slottable>{props.children}</Slottable>
     </Comp>
   );
-});
+};

packages/ui/src/makerkit/marketing/gradient-text.tsx

@@ -1,21 +1,18 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { cn } from '../../lib/utils';
 
-export const GradientText = forwardRef<
-  HTMLSpanElement,
-  React.HTMLAttributes<HTMLSpanElement>
->(function GradientTextComponent({ className, children, ...props }, ref) {
-  return (
-    <span
-      ref={ref}
-      className={cn(
-        'bg-gradient-to-r bg-clip-text text-transparent',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-});
+export const GradientText: React.FC<React.HTMLAttributes<HTMLSpanElement>> =
+  function GradientTextComponent({ className, children, ...props }) {
+    return (
+      <span
+        className={cn(
+          'bg-gradient-to-r bg-clip-text text-transparent',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    );
+  };

packages/ui/src/makerkit/marketing/header.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react';
-
 import { cn } from '../../lib/utils';
 
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -8,30 +6,30 @@ interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: React.ReactNode;
 }
 
-export const Header = forwardRef<HTMLDivElement, HeaderProps>(
-  function MarketingHeaderComponent(
-    { className, logo, navigation, actions, ...props },
-    ref,
-  ) {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'site-header sticky top-0 z-10 w-full bg-background/80 py-2 backdrop-blur-md dark:bg-background/50',
-          className,
-        )}
-        {...props}
-      >
-        <div className="container">
-          <div className="grid h-14 grid-cols-3 items-center">
-            <div className={'mx-auto lg:mx-0'}>{logo}</div>
-            <div className="order-first md:order-none">{navigation}</div>
-            <div className="flex items-center justify-end space-x-1">
-              {actions}
-            </div>
+export const Header: React.FC<HeaderProps> = function ({
+  className,
+  logo,
+  navigation,
+  actions,
+  ...props
+}) {
+  return (
+    <div
+      className={cn(
+        'site-header sticky top-0 z-10 w-full bg-background/80 py-2 backdrop-blur-md dark:bg-background/50',
+        className,
+      )}
+      {...props}
+    >
+      <div className="container">
+        <div className="grid h-14 grid-cols-3 items-center">
+          <div className={'mx-auto lg:mx-0'}>{logo}</div>
+          <div className="order-first md:order-none">{navigation}</div>
+          <div className="flex items-center justify-end space-x-1">
+            {actions}
           </div>
         </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+};

packages/ui/src/makerkit/marketing/hero-title.tsx

@@ -1,20 +1,16 @@
-import { forwardRef } from 'react';
-
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
 import { cn } from '../../lib/utils';
 
-export const HeroTitle = forwardRef<
-  HTMLHeadingElement,
+export const HeroTitle: React.FC<
   React.HTMLAttributes<HTMLHeadingElement> & {
     asChild?: boolean;
   }
->(function HeroTitleComponent({ children, className, ...props }, ref) {
+> = function HeroTitleComponent({ children, className, ...props }) {
   const Comp = props.asChild ? Slot : 'h1';
 
   return (
     <Comp
-      ref={ref}
       className={cn(
         'hero-title flex flex-col text-center font-sans text-4xl font-semibold tracking-tighter dark:text-white sm:text-6xl lg:max-w-5xl lg:text-7xl xl:text-[4.85rem]',
         className,
@@ -24,4 +20,4 @@ export const HeroTitle = forwardRef<
       <Slottable>{children}</Slottable>
     </Comp>
   );
-});
+};

packages/ui/src/makerkit/marketing/pill.tsx

@@ -1,21 +1,17 @@
-import { forwardRef } from 'react';
-
 import { Slot, Slottable } from '@radix-ui/react-slot';
 
 import { cn } from '../../lib/utils';
 
-export const Pill = forwardRef<
-  HTMLHeadingElement,
+export const Pill: React.FC<
   React.HTMLAttributes<HTMLHeadingElement> & {
     label?: string;
     asChild?: boolean;
   }
->(function PillComponent({ className, asChild, ...props }, ref) {
+> = function PillComponent({ className, asChild, ...props }) {
   const Comp = asChild ? Slot : 'h3';
 
   return (
     <Comp
-      ref={ref}
       className={cn(
         'space-x-2.5 rounded-full border border-gray-100 px-2 py-2.5 text-center text-sm font-medium text-transparent dark:border-primary/10',
         className,
@@ -36,4 +32,4 @@ export const Pill = forwardRef<
       </Slottable>
     </Comp>
   );
-});
+};

packages/ui/src/makerkit/marketing/secondary-hero.tsx

@@ -1,5 +1,3 @@
-import { forwardRef } from 'react';
-
 import { cn } from '../../lib/utils';
 import { Heading } from '../../shadcn/heading';
 
@@ -9,14 +7,17 @@ interface SecondaryHeroProps extends React.HTMLAttributes<HTMLDivElement> {
   subheading: React.ReactNode;
 }
 
-export const SecondaryHero = forwardRef<HTMLDivElement, SecondaryHeroProps>(
-  function SecondaryHeroComponent(
-    { className, pill, heading, subheading, children, ...props },
-    ref,
-  ) {
+export const SecondaryHero: React.FC<SecondaryHeroProps> =
+  function SecondaryHeroComponent({
+    className,
+    pill,
+    heading,
+    subheading,
+    children,
+    ...props
+  }) {
     return (
       <div
-        ref={ref}
         className={cn(
           'flex flex-col items-center space-y-6 text-center',
           className,
@@ -38,5 +39,4 @@ export const SecondaryHero = forwardRef<HTMLDivElement, SecondaryHeroProps>(
         {children}
       </div>
     );
-  },
-);
+  };

packages/ui/src/makerkit/multi-step-form.tsx

@@ -128,22 +128,22 @@ export function MultiStepFormContextProvider(props: {
   return props.children(ctx);
 }
 
-export const MultiStepFormStep = React.forwardRef<
-  HTMLDivElement,
+export const MultiStepFormStep: React.FC<
   React.PropsWithChildren<
     {
       asChild?: boolean;
+      ref?: React.Ref<HTMLDivElement>;
     } & HTMLProps<HTMLDivElement>
   >
->(function MultiStepFormStep({ children, asChild, ...props }, ref) {
+> = function MultiStepFormStep({ children, asChild, ...props }) {
   const Cmp = asChild ? Slot : 'div';
 
   return (
-    <Cmp ref={ref} {...props}>
+    <Cmp {...props}>
       <Slottable>{children}</Slottable>
     </Cmp>
   );
-});
+};
 
 export function useMultiStepFormContext<Schema extends z.ZodType>() {
   const context = useContext(MultiStepFormContext) as ReturnType<
@@ -165,6 +165,7 @@ export function useMultiStepFormContext<Schema extends z.ZodType>() {
  * @param schema
  * @param form
  * @param stepNames
+ * @param onSubmit
  */
 export function useMultiStepForm<Schema extends z.ZodType>(
   schema: Schema,
@@ -323,39 +324,37 @@ export function useMultiStepForm<Schema extends z.ZodType>(
   );
 }
 
-export const MultiStepFormHeader = React.forwardRef<
-  HTMLDivElement,
+export const MultiStepFormHeader: React.FC<
   React.PropsWithChildren<
     {
       asChild?: boolean;
     } & HTMLProps<HTMLDivElement>
   >
->(function MultiStepFormHeader({ children, asChild, ...props }, ref) {
+> = function MultiStepFormHeader({ children, asChild, ...props }) {
   const Cmp = asChild ? Slot : 'div';
 
   return (
-    <Cmp ref={ref} {...props}>
+    <Cmp {...props}>
       <Slottable>{children}</Slottable>
     </Cmp>
   );
-});
+};
 
-export const MultiStepFormFooter = React.forwardRef<
-  HTMLDivElement,
+export const MultiStepFormFooter: React.FC<
   React.PropsWithChildren<
     {
       asChild?: boolean;
     } & HTMLProps<HTMLDivElement>
   >
->(function MultiStepFormFooter({ children, asChild, ...props }, ref) {
+> = function MultiStepFormFooter({ children, asChild, ...props }) {
   const Cmp = asChild ? Slot : 'div';
 
   return (
-    <Cmp ref={ref} {...props}>
+    <Cmp {...props}>
       <Slottable>{children}</Slottable>
     </Cmp>
   );
-});
+};
 
 /**
  * @name createStepSchema