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

apps/web/app/home/(user)/layout.tsx

@@ -45,7 +45,9 @@ function SidebarLayout({ children }: React.PropsWithChildren) {
             <HomeSidebar workspace={workspace} minimized={sidebarMinimized} />
           </PageNavigation>
 
-          <MobileNavigation workspace={workspace} />
+          <PageMobileNavigation className={'flex items-center justify-between'}>
+            <MobileNavigation workspace={workspace} />
+          </PageMobileNavigation>
 
           {children}
         </Page>
@@ -64,7 +66,9 @@ function HeaderLayout({ children }: React.PropsWithChildren) {
           <HomeMenuNavigation workspace={workspace} />
         </PageNavigation>
 
-        <MobileNavigation workspace={workspace} />
+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <MobileNavigation workspace={workspace} />
+        </PageMobileNavigation>
 
         {children}
       </Page>
@@ -78,11 +82,11 @@ function MobileNavigation({
   workspace: Awaited<ReturnType<typeof loadUserWorkspace>>;
 }) {
   return (
-    <PageMobileNavigation className={'flex items-center justify-between'}>
+    <>
       <AppLogo />
 
       <HomeMobileNavigation workspace={workspace} />
-    </PageMobileNavigation>
+    </>
   );
 }
 

apps/web/styles/globals.css

@@ -98,7 +98,7 @@ Optimize dropdowns for mobile
 }
 
 [data-radix-menu-content] {
-  @apply rounded-none md:rounded-lg;
+  @apply rounded-none md:rounded-lg w-full md:w-auto;
 }
 
 [data-radix-menu-content] [role="menuitem"] {

packages/features/accounts/src/server/personal-accounts-server-actions.ts

@@ -3,8 +3,6 @@
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
-import { z } from 'zod';
-
 import { enhanceAction } from '@kit/next/actions';
 import { getLogger } from '@kit/shared/logger';
 import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
@@ -13,8 +11,6 @@ import { getSupabaseServerClient } from '@kit/supabase/server-client';
 import { DeletePersonalAccountSchema } from '../schema/delete-personal-account.schema';
 import { createDeletePersonalAccountService } from './services/delete-personal-account.service';
 
-const emailSettings = getEmailSettingsFromEnvironment();
-
 const enableAccountDeletion =
   process.env.NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION === 'true';
 
@@ -65,7 +61,6 @@ export const deletePersonalAccountAction = enhanceAction(
       adminClient: getSupabaseServerAdminClient(),
       userId: user.id,
       userEmail: user.email ?? null,
-      emailSettings,
     });
 
     logger.info(ctx, `Account request successfully sent`);
@@ -78,23 +73,3 @@ export const deletePersonalAccountAction = enhanceAction(
   },
   {},
 );
-
-function getEmailSettingsFromEnvironment() {
-  return z
-    .object({
-      fromEmail: z
-        .string({
-          required_error: 'Provide the variable EMAIL_SENDER',
-        })
-        .email(),
-      productName: z
-        .string({
-          required_error: 'Provide the variable NEXT_PUBLIC_PRODUCT_NAME',
-        })
-        .min(1),
-    })
-    .parse({
-      fromEmail: process.env.EMAIL_SENDER,
-      productName: process.env.NEXT_PUBLIC_PRODUCT_NAME,
-    });
-}

packages/features/accounts/src/server/services/delete-personal-account.service.ts

@@ -33,11 +33,6 @@ class DeletePersonalAccountService {
 
     userId: string;
     userEmail: string | null;
-
-    emailSettings: {
-      fromEmail: string;
-      productName: string;
-    };
   }) {
     const logger = await getLogger();
 

packages/features/auth/src/components/resend-auth-link-form.tsx

@@ -20,9 +20,7 @@ import { Trans } from '@kit/ui/trans';
 
 import { useCaptchaToken } from '../captcha/client';
 
-export function ResendAuthLinkForm(props: {
+export function ResendAuthLinkForm(props: { redirectPath?: string }) {
-  redirectPath?: string;
-}) {
   const resendLink = useResendLink();
 
   const form = useForm({

packages/features/notifications/src/components/notifications-popover.tsx

@@ -7,9 +7,9 @@ import { useTranslation } from 'react-i18next';
 
 import { Database } from '@kit/supabase/database';
 import { Button } from '@kit/ui/button';
-import { Divider } from '@kit/ui/divider';
 import { If } from '@kit/ui/if';
 import { Popover, PopoverContent, PopoverTrigger } from '@kit/ui/popover';
+import { Separator } from '@kit/ui/separator';
 import { cn } from '@kit/ui/utils';
 
 import { useDismissNotification, useFetchNotifications } from '../hooks';
@@ -147,7 +147,7 @@ export function NotificationsPopover(params: {
           {t('common:notifications')}
         </div>
 
-        <Divider />
+        <Separator />
 
         <If condition={!notifications.length}>
           <div className={'px-3 py-2 text-sm'}>

packages/supabase/src/auth-callback.service.ts

@@ -1,9 +1,10 @@
 import 'server-only';
 
-
+import {
-
+  AuthError,
-import {AuthError, type EmailOtpType, SupabaseClient} from '@supabase/supabase-js';
+  type EmailOtpType,
-
+  SupabaseClient,
+} from '@supabase/supabase-js';
 
 /**
  * @name createAuthCallbackService
@@ -113,7 +114,10 @@ class AuthCallbackService {
         url.searchParams.set('code', error.code);
       }
 
-      const errorMessage = getAuthErrorMessage({ error: error.message, code: error.code });
+      const errorMessage = getAuthErrorMessage({
+        error: error.message,
+        code: error.code,
+      });
 
       url.searchParams.set('error', errorMessage);
     }
@@ -253,10 +257,7 @@ function isVerifierError(error: string) {
   return error.includes('both auth code and code verifier should be non-empty');
 }
 
-function getAuthErrorMessage(params: {
+function getAuthErrorMessage(params: { error: string; code?: string }) {
-  error: string;
-  code?: string;
-}) {
   // this error arises when the user tries to sign in with an expired email link
   if (params.code) {
     if (params.code === 'otp_expired') {

packages/ui/package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.3",
     "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.4",
@@ -110,7 +111,6 @@
     "./utils": "./src/lib/utils/index.ts",
     "./if": "./src/makerkit/if.tsx",
     "./trans": "./src/makerkit/trans.tsx",
-    "./divider": "./src/makerkit/divider.tsx",
     "./sidebar": "./src/makerkit/sidebar.tsx",
     "./navigation-schema": "./src/makerkit/navigation-config.schema.ts",
     "./bordered-navigation-menu": "./src/makerkit/bordered-navigation-menu.tsx",

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<
+export const CardButton: React.FC<
-  HTMLButtonElement,
   {
     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<
+export const CardButtonTitle: React.FC<
-  HTMLDivElement,
   {
-    className?: string;
     asChild?: boolean;
     children: React.ReactNode;
-  }
+  } & React.HTMLAttributes<HTMLDivElement>
->(function CardButtonTitle({ className, asChild, ...props }, ref) {
+> = 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<
+export const CardButtonHeader: React.FC<
-  HTMLDivElement,
   {
-    className?: string;
     children: React.ReactNode;
     asChild?: boolean;
     displayArrow?: boolean;
-  }
+  } & React.HTMLAttributes<HTMLDivElement>
->(function CardButtonHeader(
+> = function CardButtonHeader({
-  { className, asChild, displayArrow = true, ...props },
+  className,
-  ref,
+  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<
+export const CardButtonContent: React.FC<
-  HTMLDivElement,
   {
-    className?: string;
     asChild?: boolean;
     children: React.ReactNode;
-  }
+  } & React.HTMLAttributes<HTMLDivElement>
->(function CardButtonContent({ className, asChild, ...props }, ref) {
+> = function CardButtonContent({ className, asChild, ...props }) {
   const Comp = asChild ? Slot : 'div';
 
   return (
-    <Comp
+    <Comp className={cn(className, 'flex flex-1 flex-col px-4')} {...props}>
-      className={cn(className, 'flex flex-1 flex-col px-4')}
-      {...props}
-      ref={ref}
-    >
       <Slottable>{props.children}</Slottable>
     </Comp>
   );
-});
+};
 
-export const CardButtonFooter = React.forwardRef<
+export const CardButtonFooter: React.FC<
-  HTMLDivElement,
   {
-    className?: string;
     asChild?: boolean;
     children: React.ReactNode;
-  }
+  } & React.HTMLAttributes<HTMLDivElement>
->(function CardButtonFooter({ className, asChild, ...props }, ref) {
+> = 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<
+const EmptyStateHeading: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  HTMLHeadingElement,
+  className,
-  React.HTMLAttributes<HTMLHeadingElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <h3
-    ref={ref}
     className={cn('text-2xl font-bold tracking-tight', className)}
     {...props}
   />
-));
+);
 EmptyStateHeading.displayName = 'EmptyStateHeading';
 
-const EmptyStateText = React.forwardRef<
+const EmptyStateText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLParagraphElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
-  <p
+  <p className={cn('text-sm text-muted-foreground', className)} {...props} />
-    ref={ref}
+);
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
 EmptyStateText.displayName = 'EmptyStateText';
 
-const EmptyStateButton = React.forwardRef<
+const EmptyStateButton: React.FC<
-  HTMLButtonElement,
   React.ComponentPropsWithoutRef<typeof Button>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
-  <Button ref={ref} className={cn('mt-4', className)} {...props} />
+  <Button className={cn('mt-4', className)} {...props} />
-));
+);
+
 EmptyStateButton.displayName = 'EmptyStateButton';
 
-const EmptyState = React.forwardRef<
+const EmptyState: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  children,
-  React.HTMLAttributes<HTMLDivElement>
+  className,
->(({ children, className, ...props }, ref) => {
+  ...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>(
+export const ImageUploadInput: React.FC<Props> =
-  function ImageUploadInputComponent(
+  function ImageUploadInputComponent({
-    {
+    children,
-      children,
+    image,
-      image,
+    onClear,
-      onClear,
+    onInput,
-      onInput,
+    onValueChange,
-      onValueChange,
+    ref: forwardedRef,
-      visible = true,
+    visible = true,
-      ...props
+    ...props
-    },
+  }) {
-    forwardedRef,
-  ) {
     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<
+const ComingSoonHeading: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  HTMLHeadingElement,
+  className,
-  React.HTMLAttributes<HTMLHeadingElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => <HeroTitle className={cn(className)} {...props} />;
-  <HeroTitle ref={ref} className={cn(className)} {...props} />
+
-));
 ComingSoonHeading.displayName = 'ComingSoonHeading';
 
-const ComingSoonText = React.forwardRef<
+const ComingSoonText: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLParagraphElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <GradientSecondaryText
-    ref={ref}
     className={cn('text-lg text-muted-foreground md:text-xl', className)}
     {...props}
   />
-));
+);
 ComingSoonText.displayName = 'ComingSoonText';
 
-const ComingSoonButton = React.forwardRef<
+const ComingSoonButton: React.FC<
-  HTMLButtonElement,
   React.ComponentPropsWithoutRef<typeof Button>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
-  <CtaButton ref={ref} className={cn('mt-8', className)} {...props} />
+  <CtaButton className={cn('mt-8', className)} {...props} />
-));
+);
 ComingSoonButton.displayName = 'ComingSoonButton';
 
-const ComingSoon = React.forwardRef<
+const ComingSoon: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  children,
-  React.HTMLAttributes<HTMLDivElement>
+  className,
->(({ children, className, ...props }, ref) => {
+  ...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<
+const ComingSoonLogo: React.FC<React.HTMLAttributes<HTMLImageElement>> = ({
-  HTMLDivElement,
+  className,
-  React.HTMLAttributes<HTMLImageElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => <div className={cn(className, 'fixed left-8 top-8')} {...props} />;
-  <div ref={ref} 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<
+export const CtaButton: React.FC<React.ComponentProps<typeof Button>> =
-  HTMLButtonElement,
+  function CtaButtonComponent({ className, children, ...props }) {
-  React.ComponentProps<typeof Button>
+    return (
->(function CtaButtonComponent({ className, children, ...props }, ref) {
+      <Button
-  return (
+        className={cn(
-    <Button
+          'h-12 rounded-xl px-4 text-base font-semibold',
-      className={cn('h-12 rounded-xl px-4 text-base font-semibold', className, {
+          className,
-        ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
+          {
-          props.variant === 'default' || !props.variant,
+            ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
-      })}
+              props.variant === 'default' || !props.variant,
-      asChild
+          },
-      ref={ref}
+        )}
-      {...props}
+        asChild
-    >
+        {...props}
-      {children}
+      >
-    </Button>
+        {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>(
+export const FeatureCard: React.FC<FeatureCardProps> = ({
-  function FeatureCardComponent(
+  className,
-    { className, label, description, image, children, ...props },
+  label,
-    ref,
+  description,
-  ) {
+  image,
-    return (
+  children,
-      <div
+  ...props
-        ref={ref}
+}) => {
-        className={cn(
+  return (
-          'rounded-3xl p-2 ring-2 ring-gray-100 dark:ring-primary/10',
+    <div
-          className,
+      className={cn(
-        )}
+        'rounded-3xl p-2 ring-2 ring-gray-100 dark:ring-primary/10',
-        {...props}
+        className,
-      >
+      )}
-        <CardHeader>
+      {...props}
-          <CardTitle className="text-xl font-semibold">{label}</CardTitle>
+    >
-          <CardDescription className="max-w-xs text-sm font-semibold tracking-tight text-muted-foreground">
+      <CardHeader>
-            {description}
+        <CardTitle className="text-xl font-semibold">{label}</CardTitle>
-          </CardDescription>
+        <CardDescription className="max-w-xs text-sm font-semibold tracking-tight text-muted-foreground">
-        </CardHeader>
+          {description}
-        <CardContent>
+        </CardDescription>
-          {image}
+      </CardHeader>
-          {children}
+      <CardContent>
-        </CardContent>
+        {image}
-      </div>
+        {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<
+export const FeatureGrid: React.FC<React.HTMLAttributes<HTMLDivElement>> =
-  HTMLDivElement,
+  function FeatureGridComponent({ className, children, ...props }) {
-  React.HTMLAttributes<HTMLDivElement>
+    return (
->(function FeatureGridComponent({ className, children, ...props }, ref) {
+      <div
-  return (
+        className={cn(
-    <div
+          'grid w-full grid-cols-1 gap-4 space-y-0 lg:grid-cols-3',
-      ref={ref}
+          className,
-      className={cn(
+        )}
-        'grid w-full grid-cols-1 gap-4 space-y-0 lg:grid-cols-3',
+        {...props}
-        className,
+      >
-      )}
+        {children}
-      {...props}
+      </div>
-    >
+    );
-      {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>(
+export const FeatureShowcase: React.FC<FeatureShowcaseProps> =
-  function FeatureShowcaseComponent(
+  function FeatureShowcaseComponent({
-    { className, heading, icon, children, ...props },
+    className,
-    ref,
+    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>(
+export const Footer: React.FC<FooterProps> = ({
-  function MarketingFooterComponent(
+  className,
-    { className, logo, description, copyright, sections, ...props },
+  logo,
-    ref,
+  description,
-  ) {
+  copyright,
-    return (
+  sections,
-      <footer
+  ...props
-        ref={ref}
+}) => {
-        className={cn(
+  return (
-          'site-footer relative mt-auto w-full py-8 2xl:py-16',
+    <footer
-          className,
+      className={cn(
-        )}
+        'site-footer relative mt-auto w-full py-8 2xl:py-16',
-        {...props}
+        className,
-      >
+      )}
-        <div className="container">
+      {...props}
-          <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="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>
-                <div className="flex flex-col space-y-4">
+                  <p className="text-sm text-muted-foreground">{description}</p>
-                  <div>
+                </div>
-                    <p className="text-sm text-muted-foreground">
+                <div className="flex text-xs text-muted-foreground">
-                      {description}
+                  <p>{copyright}</p>
-                    </p>
-                  </div>
-                  <div className="flex text-xs text-muted-foreground">
-                    <p>{copyright}</p>
-                  </div>
                 </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">
+          <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) => (
+            {sections.map((section, index) => (
-                <div key={index}>
+              <div key={index}>
-                  <div className="flex flex-col space-y-2.5">
+                <div className="flex flex-col space-y-2.5">
-                    <FooterSectionHeading>
+                  <FooterSectionHeading>{section.heading}</FooterSectionHeading>
-                      {section.heading}
-                    </FooterSectionHeading>
 
-                    <FooterSectionList>
+                  <FooterSectionList>
-                      {section.links.map((link, linkIndex) => (
+                    {section.links.map((link, linkIndex) => (
-                        <FooterLink key={linkIndex} href={link.href}>
+                      <FooterLink key={linkIndex} href={link.href}>
-                          {link.label}
+                        {link.label}
-                        </FooterLink>
+                      </FooterLink>
-                      ))}
+                    ))}
-                    </FooterSectionList>
+                  </FooterSectionList>
-                  </div>
                 </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<
+export const GradientSecondaryText: React.FC<
-  HTMLSpanElement,
   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<
+export const GradientText: React.FC<React.HTMLAttributes<HTMLSpanElement>> =
-  HTMLSpanElement,
+  function GradientTextComponent({ className, children, ...props }) {
-  React.HTMLAttributes<HTMLSpanElement>
+    return (
->(function GradientTextComponent({ className, children, ...props }, ref) {
+      <span
-  return (
+        className={cn(
-    <span
+          'bg-gradient-to-r bg-clip-text text-transparent',
-      ref={ref}
+          className,
-      className={cn(
+        )}
-        'bg-gradient-to-r bg-clip-text text-transparent',
+        {...props}
-        className,
+      >
-      )}
+        {children}
-      {...props}
+      </span>
-    >
+    );
-      {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>(
+export const Header: React.FC<HeaderProps> = function ({
-  function MarketingHeaderComponent(
+  className,
-    { className, logo, navigation, actions, ...props },
+  logo,
-    ref,
+  navigation,
-  ) {
+  actions,
-    return (
+  ...props
-      <div
+}) {
-        ref={ref}
+  return (
-        className={cn(
+    <div
-          'site-header sticky top-0 z-10 w-full bg-background/80 py-2 backdrop-blur-md dark:bg-background/50',
+      className={cn(
-          className,
+        'site-header sticky top-0 z-10 w-full bg-background/80 py-2 backdrop-blur-md dark:bg-background/50',
-        )}
+        className,
-        {...props}
+      )}
-      >
+      {...props}
-        <div className="container">
+    >
-          <div className="grid h-14 grid-cols-3 items-center">
+      <div className="container">
-            <div className={'mx-auto lg:mx-0'}>{logo}</div>
+        <div className="grid h-14 grid-cols-3 items-center">
-            <div className="order-first md:order-none">{navigation}</div>
+          <div className={'mx-auto lg:mx-0'}>{logo}</div>
-            <div className="flex items-center justify-end space-x-1">
+          <div className="order-first md:order-none">{navigation}</div>
-              {actions}
+          <div className="flex items-center justify-end space-x-1">
-            </div>
+            {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<
+export const HeroTitle: React.FC<
-  HTMLHeadingElement,
   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<
+export const Pill: React.FC<
-  HTMLHeadingElement,
   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>(
+export const SecondaryHero: React.FC<SecondaryHeroProps> =
-  function SecondaryHeroComponent(
+  function SecondaryHeroComponent({
-    { className, pill, heading, subheading, children, ...props },
+    className,
-    ref,
+    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<
+export const MultiStepFormStep: React.FC<
-  HTMLDivElement,
   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<
+export const MultiStepFormHeader: React.FC<
-  HTMLDivElement,
   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<
+export const MultiStepFormFooter: React.FC<
-  HTMLDivElement,
   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

packages/ui/src/shadcn/accordion.tsx

@@ -9,25 +9,18 @@ import { cn } from '../lib/utils';
 
 const Accordion = AccordionPrimitive.Root;
 
-const AccordionItem = React.forwardRef<
+const AccordionItem: React.FC<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithRef<typeof AccordionPrimitive.Item>
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item className={cn('border-b', className)} {...props} />
-  <AccordionPrimitive.Item
+);
-    ref={ref}
-    className={cn('border-b', className)}
-    {...props}
-  />
-));
 AccordionItem.displayName = 'AccordionItem';
 
-const AccordionTrigger = React.forwardRef<
+const AccordionTrigger: React.FC<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
-      ref={ref}
       className={cn(
         'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
         className,
@@ -38,21 +31,19 @@ const AccordionTrigger = React.forwardRef<
       <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-));
+);
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
-const AccordionContent = React.forwardRef<
+const AccordionContent: React.FC<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
-    ref={ref}
     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>
   </AccordionPrimitive.Content>
-));
+);
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

packages/ui/src/shadcn/alert-dialog.tsx

@@ -13,29 +13,25 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = React.forwardRef<
+const AlertDialogOverlay: React.FC<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
       'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
-    ref={ref}
   />
-));
+);
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
-const AlertDialogContent = React.forwardRef<
+const AlertDialogContent: React.FC<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
-      ref={ref}
       className={cn(
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className,
@@ -43,7 +39,7 @@ const AlertDialogContent = React.forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-));
+);
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
@@ -74,49 +70,41 @@ const AlertDialogFooter = ({
 );
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
-const AlertDialogTitle = React.forwardRef<
+const AlertDialogTitle: React.FC<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AlertDialogPrimitive.Title
-    ref={ref}
     className={cn('text-lg font-semibold', className)}
     {...props}
   />
-));
+);
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
-const AlertDialogDescription = React.forwardRef<
+const AlertDialogDescription: React.FC<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AlertDialogPrimitive.Description
-    ref={ref}
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
+);
 AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName;
 
-const AlertDialogAction = React.forwardRef<
+const AlertDialogAction: React.FC<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AlertDialogPrimitive.Action
-    ref={ref}
     className={cn(buttonVariants(), className)}
     {...props}
   />
-));
+);
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
-const AlertDialogCancel = React.forwardRef<
+const AlertDialogCancel: React.FC<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AlertDialogPrimitive.Cancel
-    ref={ref}
     className={cn(
       buttonVariants({ variant: 'outline' }),
       'mt-2 sm:mt-0',
@@ -124,7 +112,7 @@ const AlertDialogCancel = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {

packages/ui/src/shadcn/alert.tsx

@@ -25,41 +25,36 @@ const alertVariants = cva(
   },
 );
 
-const Alert = React.forwardRef<
+const Alert: React.FC<
-  HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+> = ({ className, variant, ...props }) => (
   <div
-    ref={ref}
     role="alert"
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-));
+);
 Alert.displayName = 'Alert';
 
-const AlertTitle = React.forwardRef<
+const AlertTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLHeadingElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <h5
-    ref={ref}
     className={cn('mb-1 font-bold leading-none tracking-tight', className)}
     {...props}
   />
-));
+);
 AlertTitle.displayName = 'AlertTitle';
 
-const AlertDescription = React.forwardRef<
+const AlertDescription: React.FC<
-  HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <div
-    ref={ref}
     className={cn('text-sm font-normal [&_p]:leading-relaxed', className)}
     {...props}
   />
-));
+);
 AlertDescription.displayName = 'AlertDescription';
 
 export { Alert, AlertTitle, AlertDescription };

packages/ui/src/shadcn/avatar.tsx

@@ -6,46 +6,40 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 
 import { cn } from '../lib/utils';
 
-const Avatar = React.forwardRef<
+const Avatar: React.FC<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AvatarPrimitive.Root
-    ref={ref}
     className={cn(
       'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
       className,
     )}
     {...props}
   />
-));
+);
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
-const AvatarImage = React.forwardRef<
+const AvatarImage: React.FC<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithRef<typeof AvatarPrimitive.Image>
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <AvatarPrimitive.Image
-    ref={ref}
     className={cn('aspect-square h-full w-full', className)}
     {...props}
   />
-));
+);
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
-const AvatarFallback = React.forwardRef<
+const AvatarFallback: React.FC<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <AvatarPrimitive.Fallback
-    ref={ref}
     className={cn(
       'flex h-full w-full items-center justify-center rounded-full bg-muted',
       className,
     )}
     {...props}
   />
-));
+);
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 export { Avatar, AvatarImage, AvatarFallback };

packages/ui/src/shadcn/breadcrumb.tsx

@@ -5,52 +5,47 @@ import { Slot } from '@radix-ui/react-slot';
 
 import { cn } from '../lib/utils';
 
-const Breadcrumb = React.forwardRef<
+const Breadcrumb: React.FC<
-  HTMLElement,
   React.ComponentPropsWithoutRef<'nav'> & {
     separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+> = ({ ...props }) => <nav aria-label="breadcrumb" {...props} />;
 Breadcrumb.displayName = 'Breadcrumb';
 
-const BreadcrumbList = React.forwardRef<
+const BreadcrumbList: React.FC<React.ComponentPropsWithRef<'ol'>> = ({
-  HTMLOListElement,
+  className,
-  React.ComponentPropsWithoutRef<'ol'>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <ol
-    ref={ref}
     className={cn(
       'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground',
       className,
     )}
     {...props}
   />
-));
+);
 BreadcrumbList.displayName = 'BreadcrumbList';
 
-const BreadcrumbItem = React.forwardRef<
+const BreadcrumbItem: React.FC<React.ComponentPropsWithRef<'li'>> = ({
-  HTMLLIElement,
+  className,
-  React.ComponentPropsWithoutRef<'li'>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <li
-    ref={ref}
     className={cn('inline-flex items-center gap-1.5', className)}
     {...props}
   />
-));
+);
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 
-const BreadcrumbLink = React.forwardRef<
+const BreadcrumbLink: React.FC<
-  HTMLAnchorElement,
   React.ComponentPropsWithoutRef<'a'> & {
     asChild?: boolean;
   }
->(({ asChild, className, ...props }, ref) => {
+> = ({ asChild, className, ...props }) => {
   const Comp = asChild ? Slot : 'a';
 
   return (
     <Comp
-      ref={ref}
       className={cn(
         'text-foreground transition-colors hover:underline',
         className,
@@ -58,22 +53,21 @@ const BreadcrumbLink = React.forwardRef<
       {...props}
     />
   );
-});
+};
 BreadcrumbLink.displayName = 'BreadcrumbLink';
 
-const BreadcrumbPage = React.forwardRef<
+const BreadcrumbPage: React.FC<React.ComponentPropsWithoutRef<'span'>> = ({
-  HTMLSpanElement,
+  className,
-  React.ComponentPropsWithoutRef<'span'>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <span
-    ref={ref}
     role="link"
     aria-disabled="true"
     aria-current="page"
     className={cn('font-normal text-foreground', className)}
     {...props}
   />
-));
+);
 BreadcrumbPage.displayName = 'BreadcrumbPage';
 
 const BreadcrumbSeparator = ({

packages/ui/src/shadcn/button.tsx

@@ -42,18 +42,23 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button: React.FC<ButtonProps> = ({
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  className,
-    const Comp = asChild ? Slot : 'button';
+  variant,
-    return (
+  size,
-      <Comp
+  asChild = false,
-        className={cn(buttonVariants({ variant, size, className }))}
+  ...props
-        ref={ref}
+}) => {
-        {...props}
+  const Comp = asChild ? Slot : 'button';
-      />
+
-    );
+  return (
-  },
+    <Comp
-);
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+};
+
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };

packages/ui/src/shadcn/card.tsx

@@ -2,72 +2,56 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-const Card = React.forwardRef<
+const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  className,
-  React.HTMLAttributes<HTMLDivElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <div
-    ref={ref}
     className={cn('rounded-xl border bg-card text-card-foreground', className)}
     {...props}
   />
-));
+);
 Card.displayName = 'Card';
 
-const CardHeader = React.forwardRef<
+const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  className,
-  React.HTMLAttributes<HTMLDivElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
-  <div
+  <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-    ref={ref}
+);
-    className={cn('flex flex-col space-y-1.5 p-6', className)}
-    {...props}
-  />
-));
 CardHeader.displayName = 'CardHeader';
 
-const CardTitle = React.forwardRef<
+const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLHeadingElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <h3
-    ref={ref}
     className={cn('font-semibold leading-none tracking-tight', className)}
     {...props}
   />
-));
+);
 CardTitle.displayName = 'CardTitle';
 
-const CardDescription = React.forwardRef<
+const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLParagraphElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
-  <p
+  <p className={cn('text-sm text-muted-foreground', className)} {...props} />
-    ref={ref}
+);
-    className={cn('text-sm text-muted-foreground', className)}
-    {...props}
-  />
-));
 CardDescription.displayName = 'CardDescription';
 
-const CardContent = React.forwardRef<
+const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  className,
-  React.HTMLAttributes<HTMLDivElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => <div className={cn('p-6 pt-0', className)} {...props} />;
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
 CardContent.displayName = 'CardContent';
 
-const CardFooter = React.forwardRef<
+const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  className,
-  React.HTMLAttributes<HTMLDivElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
-  <div
+  <div className={cn('flex items-center p-6 pt-0', className)} {...props} />
-    ref={ref}
+);
-    className={cn('flex items-center p-6 pt-0', className)}
-    {...props}
-  />
-));
 CardFooter.displayName = 'CardFooter';
 
 export {

packages/ui/src/shadcn/chart.tsx

@@ -36,15 +36,14 @@ function useChart() {
   return context;
 }
 
-const ChartContainer = React.forwardRef<
+const ChartContainer: React.FC<
-  HTMLDivElement,
   React.ComponentProps<'div'> & {
     config: ChartConfig;
     children: React.ComponentProps<
       typeof RechartsPrimitive.ResponsiveContainer
     >['children'];
   }
->(({ id, className, children, config, ...props }, ref) => {
+> = ({ id, className, children, config, ...props }) => {
   const uniqueId = React.useId();
   const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
 
@@ -52,7 +51,6 @@ const ChartContainer = React.forwardRef<
     <ChartContext.Provider value={{ config }}>
       <div
         data-chart={chartId}
-        ref={ref}
         className={cn(
           "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className,
@@ -66,7 +64,7 @@ const ChartContainer = React.forwardRef<
       </div>
     </ChartContext.Provider>
   );
-});
+};
 ChartContainer.displayName = 'Chart';
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
@@ -104,221 +102,218 @@ ${colorConfig
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
-const ChartTooltipContent = React.forwardRef<
+const ChartTooltipContent: React.FC<
-  HTMLDivElement,
+  React.ComponentPropsWithRef<typeof RechartsPrimitive.Tooltip> &
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentPropsWithRef<'div'> & {
-    React.ComponentProps<'div'> & {
       hideLabel?: boolean;
       hideIndicator?: boolean;
       indicator?: 'line' | 'dot' | 'dashed';
       nameKey?: string;
       labelKey?: string;
     }
->(
+> = ({
-  (
+  ref,
-    {
+  active,
-      active,
+  payload,
-      payload,
+  className,
-      className,
+  indicator = 'dot',
-      indicator = 'dot',
+  hideLabel = false,
-      hideLabel = false,
+  hideIndicator = false,
-      hideIndicator = false,
+  label,
-      label,
+  labelFormatter,
-      labelFormatter,
+  labelClassName,
-      labelClassName,
+  formatter,
-      formatter,
+  color,
-      color,
+  nameKey,
-      nameKey,
+  labelKey,
-      labelKey,
+}) => {
-    },
+  const { config } = useChart();
-    ref,
-  ) => {
-    const { config } = useChart();
 
-    const tooltipLabel = React.useMemo(() => {
+  const tooltipLabel = React.useMemo(() => {
-      if (hideLabel ?? !payload?.length) {
+    if (hideLabel ?? !payload?.length) {
-        return null;
-      }
-
-      const [item] = payload;
-      const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-
-      const value =
-        !labelKey && typeof label === 'string'
-          ? (config[label]?.label ?? label)
-          : itemConfig?.label;
-
-      if (labelFormatter) {
-        return (
-          <div className={cn('font-medium', labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        );
-      }
-
-      if (!value) {
-        return null;
-      }
-
-      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ]);
-
-    /* @ts-expect-error: TS issue */
-    if (!active ?? !payload?.length) {
       return null;
     }
 
-    const nestLabel = payload.length === 1 && indicator !== 'dot';
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-    return (
+    const value =
-      <div
+      !labelKey && typeof label === 'string'
-        ref={ref}
+        ? (config[label]?.label ?? label)
-        className={cn(
+        : itemConfig?.label;
-          'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
-          className,
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color ?? item.payload.fill ?? item.color;
 
-            return (
+    if (labelFormatter) {
-              <div
+      return (
-                key={item.dataKey}
+        <div className={cn('font-medium', labelClassName)}>
-                className={cn(
+          {labelFormatter(value, payload)}
-                  'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
-                  indicator === 'dot' && 'items-center',
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
-                            {
-                              'h-2.5 w-2.5': indicator === 'dot',
-                              'w-1': indicator === 'line',
-                              'w-0 border-[1.5px] border-dashed bg-transparent':
-                                indicator === 'dashed',
-                              'my-0.5': nestLabel && indicator === 'dashed',
-                            },
-                          )}
-                          style={
-                            {
-                              '--color-bg': indicatorColor,
-                              '--color-border': indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        'flex flex-1 justify-between leading-none',
-                        nestLabel ? 'items-end' : 'items-center',
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label ?? item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
         </div>
-      </div>
+      );
-    );
-  },
-);
-ChartTooltipContent.displayName = 'ChartTooltip';
-
-const ChartLegend = RechartsPrimitive.Legend;
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<'div'> &
-    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
-      hideIcon?: boolean;
-      nameKey?: string;
     }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey },
-    ref,
-  ) => {
-    const { config } = useChart();
 
-    if (!payload?.length) {
+    if (!value) {
       return null;
     }
 
-    return (
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
-      <div
+  }, [
-        ref={ref}
+    label,
-        className={cn(
+    labelFormatter,
-          'flex items-center justify-center gap-4',
+    payload,
-          verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+    hideLabel,
-          className,
+    labelClassName,
-        )}
+    config,
-      >
+    labelKey,
-        {payload.map((item) => {
+  ]);
-          /* eslint-disable @typescript-eslint/restrict-template-expressions */
+
-          const key = `${nameKey ?? item.dataKey ?? 'value'}`;
+  /* @ts-expect-error: TS issue */
+  if (!active ?? !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color ?? item.payload.fill ?? item.color;
 
           return (
             <div
-              key={item.value}
+              key={item.dataKey}
               className={cn(
-                'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
+                'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground',
+                indicator === 'dot' && 'items-center',
               )}
             >
-              {itemConfig?.icon && !hideIcon ? (
+              {formatter && item?.value !== undefined && item.name ? (
-                <itemConfig.icon />
+                formatter(item.value, item.name, item, index, item.payload)
               ) : (
-                <div
+                <>
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  {itemConfig?.icon ? (
-                  style={{
+                    <itemConfig.icon />
-                    backgroundColor: item.color,
+                  ) : (
-                  }}
+                    !hideIndicator && (
-                />
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label ?? item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="font-mono font-medium tabular-nums text-foreground">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
               )}
-              {itemConfig?.label}
             </div>
           );
         })}
       </div>
-    );
+    </div>
-  },
+  );
-);
+};
+
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent: React.FC<
+  React.ComponentPropsWithRef<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+> = ({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+  ref,
+}) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        /* eslint-disable @typescript-eslint/restrict-template-expressions */
+        const key = `${nameKey ?? item.dataKey ?? 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              'flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground',
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
 ChartLegendContent.displayName = 'ChartLegend';
 
 // Helper to extract item config from a payload.

packages/ui/src/shadcn/checkbox.tsx

@@ -7,12 +7,10 @@ import { CheckIcon } from '@radix-ui/react-icons';
 
 import { cn } from '../lib/utils';
 
-const Checkbox = React.forwardRef<
+const Checkbox: React.FC<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithRef<typeof CheckboxPrimitive.Root>
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
-    ref={ref}
     className={cn(
       'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className,
@@ -25,7 +23,7 @@ const Checkbox = React.forwardRef<
       <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-));
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 export { Checkbox };

packages/ui/src/shadcn/command.tsx

@@ -9,19 +9,17 @@ import { Command as CommandPrimitive } from 'cmdk';
 import { cn } from '../lib/utils';
 import { Dialog, DialogContent } from './dialog';
 
-const Command = React.forwardRef<
+const Command: React.FC<
-  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <CommandPrimitive
-    ref={ref}
     className={cn(
       'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
       className,
     )}
     {...props}
   />
-));
+);
 Command.displayName = CommandPrimitive.displayName;
 
 type CommandDialogProps = DialogProps;
@@ -38,15 +36,13 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   );
 };
 
-const CommandInput = React.forwardRef<
+const CommandInput: React.FC<
-  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Input>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   // eslint-disable-next-line react/no-unknown-property
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
-      ref={ref}
       className={cn(
         'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
@@ -54,77 +50,64 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-));
+);
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
-const CommandList = React.forwardRef<
+const CommandList: React.FC<
-  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive.List>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <CommandPrimitive.List
-    ref={ref}
     className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
-));
+);
 
 CommandList.displayName = CommandPrimitive.List.displayName;
 
-const CommandEmpty = React.forwardRef<
+const CommandEmpty: React.FC<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Empty>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+> = (props) => (
->((props, ref) => (
+  <CommandPrimitive.Empty className="py-6 text-center text-sm" {...props} />
-  <CommandPrimitive.Empty
+);
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
-const CommandGroup = React.forwardRef<
+const CommandGroup: React.FC<
-  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Group>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <CommandPrimitive.Group
-    ref={ref}
     className={cn(
       'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
       className,
     )}
     {...props}
   />
-));
+);
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
-const CommandSeparator = React.forwardRef<
+const CommandSeparator: React.FC<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Separator>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
-    ref={ref}
     className={cn('-mx-1 h-px bg-border', className)}
     {...props}
   />
-));
+);
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
-const CommandItem = React.forwardRef<
+const CommandItem: React.FC<
-  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Item>
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <CommandPrimitive.Item
-    ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-[selected='true']:bg-accent aria-[selected='true']:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className,
     )}
     {...props}
   />
-));
+);
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 

packages/ui/src/shadcn/dialog.tsx

@@ -15,29 +15,25 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
+const DialogOverlay: React.FC<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
-    ref={ref}
     className={cn(
       'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
   />
-));
+);
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
-const DialogContent = React.forwardRef<
+const DialogContent: React.FC<
-  React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
+> = ({ className, children, ...props }) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
-      ref={ref}
       className={cn(
         'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className,
@@ -51,7 +47,7 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
@@ -82,31 +78,27 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle = React.forwardRef<
+const DialogTitle: React.FC<
-  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithRef<typeof DialogPrimitive.Title>
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
-    ref={ref}
     className={cn(
       'text-lg font-semibold leading-none tracking-tight',
       className,
     )}
     {...props}
   />
-));
+);
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
+const DialogDescription: React.FC<
-  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithRef<typeof DialogPrimitive.Description>
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
-    ref={ref}
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
+);
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {

packages/ui/src/shadcn/dropdown-menu.tsx

@@ -23,14 +23,12 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
+const DropdownMenuSubTrigger: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
   }
->(({ className, inset, children, ...props }, ref) => (
+> = ({ className, inset, children, ...props }) => (
   <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
     className={cn(
       'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
@@ -41,33 +39,29 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-));
+);
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
+const DropdownMenuSubContent: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent>
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
-    ref={ref}
     className={cn(
       'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className,
     )}
     {...props}
   />
-));
+);
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
+const DropdownMenuContent: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Content>
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+> = ({ className, sideOffset = 4, ...props }) => (
->(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
-      ref={ref}
       sideOffset={sideOffset}
       className={cn(
         'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
@@ -77,17 +71,15 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
+);
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
+const DropdownMenuItem: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Item> & {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
+> = ({ className, inset, ...props }) => (
   <DropdownMenuPrimitive.Item
-    ref={ref}
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
@@ -95,15 +87,13 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
+const DropdownMenuCheckboxItem: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+> = ({ className, children, checked, ...props }) => (
->(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
@@ -118,16 +108,14 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+);
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
+const DropdownMenuRadioItem: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
-    ref={ref}
     className={cn(
       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
@@ -141,17 +129,15 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
+);
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
+const DropdownMenuLabel: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Label> & {
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
+> = ({ className, inset, ...props }) => (
   <DropdownMenuPrimitive.Label
-    ref={ref}
     className={cn(
       'px-2 py-1.5 text-sm font-semibold',
       inset && 'pl-8',
@@ -159,19 +145,17 @@ const DropdownMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
+const DropdownMenuSeparator: React.FC<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <DropdownMenuPrimitive.Separator
-    ref={ref}
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-));
+);
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({

packages/ui/src/shadcn/form.tsx

@@ -68,47 +68,43 @@ const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
 );
 
-const FormItem = React.forwardRef<
+const FormItem: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
-  HTMLDivElement,
+  className,
-  React.HTMLAttributes<HTMLDivElement>
+  ...props
->(({ className, ...props }, ref) => {
+}) => {
   const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      <div className={cn('space-y-2', className)} {...props} />
     </FormItemContext.Provider>
   );
-});
+};
 FormItem.displayName = 'FormItem';
 
-const FormLabel = React.forwardRef<
+const FormLabel: React.FC<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithRef<typeof LabelPrimitive.Root>
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+> = ({ className, ...props }) => {
->(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
 
   return (
     <Label
-      ref={ref}
       className={cn(error && 'text-destructive', className)}
       htmlFor={formItemId}
       {...props}
     />
   );
-});
+};
 FormLabel.displayName = 'FormLabel';
 
-const FormControl = React.forwardRef<
+const FormControl: React.FC<React.ComponentPropsWithoutRef<typeof Slot>> = ({
-  React.ElementRef<typeof Slot>,
+  ...props
-  React.ComponentPropsWithoutRef<typeof Slot>
+}) => {
->(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } =
     useFormField();
 
   return (
     <Slot
-      ref={ref}
       id={formItemId}
       aria-describedby={
         !error
@@ -119,30 +115,30 @@ const FormControl = React.forwardRef<
       {...props}
     />
   );
-});
+};
 FormControl.displayName = 'FormControl';
 
-const FormDescription = React.forwardRef<
+const FormDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLParagraphElement>
+  ...props
->(({ className, ...props }, ref) => {
+}) => {
   const { formDescriptionId } = useFormField();
 
   return (
     <p
-      ref={ref}
       id={formDescriptionId}
       className={cn('text-[0.8rem] text-muted-foreground', className)}
       {...props}
     />
   );
-});
+};
 FormDescription.displayName = 'FormDescription';
 
-const FormMessage = React.forwardRef<
+const FormMessage: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
-  HTMLParagraphElement,
+  className,
-  React.HTMLAttributes<HTMLParagraphElement>
+  children,
->(({ className, children, ...props }, ref) => {
+  ...props
+}) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
 
@@ -152,7 +148,6 @@ const FormMessage = React.forwardRef<
 
   return (
     <p
-      ref={ref}
       id={formMessageId}
       className={cn('text-[0.8rem] font-medium text-destructive', className)}
       {...props}
@@ -164,7 +159,7 @@ const FormMessage = React.forwardRef<
       )}
     </p>
   );
-});
+};
 FormMessage.displayName = 'FormMessage';
 
 export {

packages/ui/src/shadcn/input-otp.tsx

@@ -7,12 +7,12 @@ import { OTPInput, OTPInputContext } from 'input-otp';
 
 import { cn } from '../lib/utils';
 
-const InputOTP = React.forwardRef<
+const InputOTP: React.FC<React.ComponentPropsWithoutRef<typeof OTPInput>> = ({
-  React.ElementRef<typeof OTPInput>,
+  className,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
+  containerClassName,
->(({ className, containerClassName, ...props }, ref) => (
+  ...props
+}) => (
   <OTPInput
-    ref={ref}
     containerClassName={cn(
       'flex items-center gap-2 has-[:disabled]:opacity-50',
       containerClassName,
@@ -20,21 +20,19 @@ const InputOTP = React.forwardRef<
     className={cn('disabled:cursor-not-allowed', className)}
     {...props}
   />
-));
+);
 InputOTP.displayName = 'InputOTP';
 
-const InputOTPGroup = React.forwardRef<
+const InputOTPGroup: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
-  React.ElementRef<'div'>,
+  className,
-  React.ComponentPropsWithoutRef<'div'>
+  ...props
->(({ className, ...props }, ref) => (
+}) => <div className={cn('flex items-center', className)} {...props} />;
-  <div ref={ref} className={cn('flex items-center', className)} {...props} />
+
-));
 InputOTPGroup.displayName = 'InputOTPGroup';
 
-const InputOTPSlot = React.forwardRef<
+const InputOTPSlot: React.FC<
-  React.ElementRef<'div'>,
+  React.ComponentPropsWithRef<'div'> & { index: number }
-  React.ComponentPropsWithoutRef<'div'> & { index: number }
+> = ({ index, className, ...props }) => {
->(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext);
   const slot = inputOTPContext.slots[index];
 
@@ -46,7 +44,6 @@ const InputOTPSlot = React.forwardRef<
 
   return (
     <div
-      ref={ref}
       className={cn(
         'relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
         isActive && 'z-10 ring-1 ring-ring',
@@ -62,17 +59,16 @@ const InputOTPSlot = React.forwardRef<
       )}
     </div>
   );
-});
+};
 InputOTPSlot.displayName = 'InputOTPSlot';
 
-const InputOTPSeparator = React.forwardRef<
+const InputOTPSeparator: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
-  React.ElementRef<'div'>,
+  ...props
-  React.ComponentPropsWithoutRef<'div'>
+}) => (
->(({ ...props }, ref) => (
+  <div role="separator" {...props}>
-  <div ref={ref} role="separator" {...props}>
     <DashIcon />
   </div>
-));
+);
 InputOTPSeparator.displayName = 'InputOTPSeparator';
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

packages/ui/src/shadcn/input.tsx

@@ -4,21 +4,23 @@ import { cn } from '../lib/utils';
 
 export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input: React.FC<InputProps> = ({
-  ({ className, type = 'text', ...props }, ref) => {
+  className,
-    return (
+  type = 'text',
-      <input
+  ...props
-        type={type}
+}) => {
-        className={cn(
+  return (
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+    <input
-          className,
+      type={type}
-        )}
+      className={cn(
-        ref={ref}
+        'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        {...props}
+        className,
-      />
+      )}
-    );
+      {...props}
-  },
+    />
-);
+  );
+};
+
 Input.displayName = 'Input';
 
 export { Input };

packages/ui/src/shadcn/label.tsx

@@ -11,17 +11,12 @@ const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );
 
-const Label = React.forwardRef<
+const Label: React.FC<
-  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithRef<typeof LabelPrimitive.Root> &
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
     VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
-  <LabelPrimitive.Root
+  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
-    ref={ref}
+);
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 export { Label };

packages/ui/src/shadcn/navigation-menu.tsx

@@ -8,12 +8,10 @@ import { cva } from 'class-variance-authority';
 
 import { cn } from '../lib/utils';
 
-const NavigationMenu = React.forwardRef<
+const NavigationMenu: React.FC<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Root>
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
-    ref={ref}
     className={cn(
       'relative z-10 flex max-w-max flex-1 items-center justify-center',
       className,
@@ -23,22 +21,20 @@ const NavigationMenu = React.forwardRef<
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-));
+);
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
-const NavigationMenuList = React.forwardRef<
+const NavigationMenuList: React.FC<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
-    ref={ref}
     className={cn(
       'group flex flex-1 list-none items-center justify-center space-x-1',
       className,
     )}
     {...props}
   />
-));
+);
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
@@ -47,12 +43,10 @@ const navigationMenuTriggerStyle = cva(
   'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
 );
 
-const NavigationMenuTrigger = React.forwardRef<
+const NavigationMenuTrigger: React.FC<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Trigger>
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Trigger
-    ref={ref}
     className={cn(navigationMenuTriggerStyle(), 'group', className)}
     {...props}
   >
@@ -62,50 +56,44 @@ const NavigationMenuTrigger = React.forwardRef<
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-));
+);
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
-const NavigationMenuContent = React.forwardRef<
+const NavigationMenuContent: React.FC<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <NavigationMenuPrimitive.Content
-    ref={ref}
     className={cn(
       'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
       className,
     )}
     {...props}
   />
-));
+);
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = React.forwardRef<
+const NavigationMenuViewport: React.FC<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <div className={cn('absolute left-0 top-full flex justify-center')}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
         'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
         className,
       )}
-      ref={ref}
       {...props}
     />
   </div>
-));
+);
 NavigationMenuViewport.displayName =
   NavigationMenuPrimitive.Viewport.displayName;
 
-const NavigationMenuIndicator = React.forwardRef<
+const NavigationMenuIndicator: React.FC<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Indicator>
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.Indicator
-    ref={ref}
     className={cn(
       'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
       className,
@@ -114,7 +102,7 @@ const NavigationMenuIndicator = React.forwardRef<
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-));
+);
 NavigationMenuIndicator.displayName =
   NavigationMenuPrimitive.Indicator.displayName;
 

packages/ui/src/shadcn/popover.tsx

@@ -12,13 +12,11 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
-const PopoverContent = React.forwardRef<
+const PopoverContent: React.FC<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentProps<typeof PopoverPrimitive.Content>
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+> = ({ className, align = 'center', sideOffset = 4, ...props }) => (
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
-      ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
@@ -28,7 +26,8 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-));
+);
+
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

packages/ui/src/shadcn/progress.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../lib/utils';
+
+const Progress: React.FC<
+  React.ComponentProps<typeof ProgressPrimitive.Root>
+> = ({ className, value, ...props }) => (
+  <ProgressPrimitive.Root
+    className={cn(
+      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value ? value : 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+);
+
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

packages/ui/src/shadcn/radio-group.tsx

@@ -7,27 +7,23 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 
 import { cn } from '../lib/utils';
 
-const RadioGroup = React.forwardRef<
+const RadioGroup: React.FC<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithRef<typeof RadioGroupPrimitive.Root>
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+> = ({ className, ...props }) => {
->(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
       className={cn('grid gap-2', className)}
       {...props}
-      ref={ref}
     />
   );
-});
+};
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
-const RadioGroupItem = React.forwardRef<
+const RadioGroupItem: React.FC<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+> = ({ className, ...props }) => {
   return (
     <RadioGroupPrimitive.Item
-      ref={ref}
       className={cn(
         'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
         className,
@@ -39,7 +35,7 @@ const RadioGroupItem = React.forwardRef<
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   );
-});
+};
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 const RadioGroupItemLabel = (

packages/ui/src/shadcn/scroll-area.tsx

@@ -6,12 +6,10 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 import { cn } from '../lib/utils';
 
-const ScrollArea = React.forwardRef<
+const ScrollArea: React.FC<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+> = ({ className, children, ...props }) => (
   <ScrollAreaPrimitive.Root
-    ref={ref}
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
@@ -21,15 +19,13 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-));
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
-const ScrollBar = React.forwardRef<
+const ScrollBar: React.FC<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
+> = ({ className, orientation = 'vertical', ...props }) => (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
     orientation={orientation}
     className={cn(
       'flex touch-none select-none transition-colors',
@@ -43,7 +39,7 @@ const ScrollBar = React.forwardRef<
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
+);
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 export { ScrollArea, ScrollBar };

packages/ui/src/shadcn/select.tsx

@@ -18,12 +18,10 @@ const SelectGroup = SelectPrimitive.Group;
 
 const SelectValue = SelectPrimitive.Value;
 
-const SelectTrigger = React.forwardRef<
+const SelectTrigger: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Trigger>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
-    ref={ref}
     className={cn(
       'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
@@ -35,15 +33,13 @@ const SelectTrigger = React.forwardRef<
       <CaretSortIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
+);
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = React.forwardRef<
+const SelectScrollUpButton: React.FC<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
-    ref={ref}
     className={cn(
       'flex cursor-default items-center justify-center py-1',
       className,
@@ -52,15 +48,13 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUpIcon />
   </SelectPrimitive.ScrollUpButton>
-));
+);
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = React.forwardRef<
+const SelectScrollDownButton: React.FC<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithRef<typeof SelectPrimitive.ScrollDownButton>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
-    ref={ref}
     className={cn(
       'flex cursor-default items-center justify-center py-1',
       className,
@@ -69,17 +63,15 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDownIcon />
   </SelectPrimitive.ScrollDownButton>
-));
+);
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName;
 
-const SelectContent = React.forwardRef<
+const SelectContent: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
+> = ({ className, children, position = 'popper', ...props }) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-      ref={ref}
       className={cn(
         'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
@@ -102,27 +94,23 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-));
+);
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = React.forwardRef<
+const SelectLabel: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Label>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
-    ref={ref}
     className={cn('px-2 py-1.5 text-sm font-semibold', className)}
     {...props}
   />
-));
+);
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = React.forwardRef<
+const SelectItem: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Item>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+> = ({ className, children, ...props }) => (
->(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
-    ref={ref}
     className={cn(
       'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
@@ -136,19 +124,17 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-));
+);
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef<
+const SelectSeparator: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Separator>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
-    ref={ref}
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-));
+);
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {

packages/ui/src/shadcn/separator.tsx

@@ -6,27 +6,26 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 import { cn } from '../lib/utils';
 
-const Separator = React.forwardRef<
+const Separator: React.FC<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithRef<typeof SeparatorPrimitive.Root>
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+> = ({
->(
+  className,
-  (
+  orientation = 'horizontal',
-    { className, orientation = 'horizontal', decorative = true, ...props },
+  decorative = true,
-    ref,
+  ...props
-  ) => (
+}) => (
-    <SeparatorPrimitive.Root
+  <SeparatorPrimitive.Root
-      ref={ref}
+    decorative={decorative}
-      decorative={decorative}
+    orientation={orientation}
-      orientation={orientation}
+    className={cn(
-      className={cn(
+      'shrink-0 bg-border',
-        'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className,
-        className,
+    )}
-      )}
+    {...props}
-      {...props}
+  />
-    />
-  ),
 );
+
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };

packages/ui/src/shadcn/sheet.tsx

@@ -16,19 +16,17 @@ const SheetClose = SheetPrimitive.Close;
 
 const SheetPortal = SheetPrimitive.Portal;
 
-const SheetOverlay = React.forwardRef<
+const SheetOverlay: React.FC<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithRef<typeof SheetPrimitive.Overlay>
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+> = ({ className, ...props }) => (
->(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
       'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className,
     )}
     {...props}
-    ref={ref}
   />
-));
+);
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
@@ -54,14 +52,15 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {}
 
-const SheetContent = React.forwardRef<
+const SheetContent: React.FC<SheetContentProps> = ({
-  React.ElementRef<typeof SheetPrimitive.Content>,
+  side = 'right',
-  SheetContentProps
+  className,
->(({ side = 'right', className, children, ...props }, ref) => (
+  children,
+  ...props
+}) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
-      ref={ref}
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
@@ -72,7 +71,7 @@ const SheetContent = React.forwardRef<
       {children}
     </SheetPrimitive.Content>
   </SheetPortal>
-));
+);
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
@@ -103,28 +102,24 @@ const SheetFooter = ({
 );
 SheetFooter.displayName = 'SheetFooter';
 
-const SheetTitle = React.forwardRef<
+const SheetTitle: React.FC<
-  React.ElementRef<typeof SheetPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <SheetPrimitive.Title
-    ref={ref}
     className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
-));
+);
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
-const SheetDescription = React.forwardRef<
+const SheetDescription: React.FC<
-  React.ElementRef<typeof SheetPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <SheetPrimitive.Description
-    ref={ref}
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
+);
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {

packages/ui/src/shadcn/switch.tsx

@@ -6,17 +6,15 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 
 import { cn } from '../lib/utils';
 
-const Switch = React.forwardRef<
+const Switch: React.FC<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <SwitchPrimitives.Root
     className={cn(
       'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className,
     )}
     {...props}
-    ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
@@ -24,7 +22,7 @@ const Switch = React.forwardRef<
       )}
     />
   </SwitchPrimitives.Root>
-));
+);
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 export { Switch };

packages/ui/src/shadcn/table.tsx

@@ -2,110 +2,98 @@ import * as React from 'react';
 
 import { cn } from '../lib/utils';
 
-const Table = React.forwardRef<
+const Table: React.FC<React.HTMLAttributes<HTMLTableElement>> = ({
-  HTMLTableElement,
+  className,
-  React.HTMLAttributes<HTMLTableElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <div className="relative w-full overflow-auto">
     <table
-      ref={ref}
       className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
-));
+);
 Table.displayName = 'Table';
 
-const TableHeader = React.forwardRef<
+const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
-  HTMLTableSectionElement,
+  className,
-  React.HTMLAttributes<HTMLTableSectionElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => <thead className={cn('[&_tr]:border-b', className)} {...props} />;
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-));
 TableHeader.displayName = 'TableHeader';
 
-const TableBody = React.forwardRef<
+const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
-  HTMLTableSectionElement,
+  className,
-  React.HTMLAttributes<HTMLTableSectionElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
-  <tbody
+  <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
-    ref={ref}
+);
-    className={cn('[&_tr:last-child]:border-0', className)}
-    {...props}
-  />
-));
 TableBody.displayName = 'TableBody';
 
-const TableFooter = React.forwardRef<
+const TableFooter: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
-  HTMLTableSectionElement,
+  className,
-  React.HTMLAttributes<HTMLTableSectionElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <tfoot
-    ref={ref}
     className={cn(
       'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
       className,
     )}
     {...props}
   />
-));
+);
 TableFooter.displayName = 'TableFooter';
 
-const TableRow = React.forwardRef<
+const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
-  HTMLTableRowElement,
+  className,
-  React.HTMLAttributes<HTMLTableRowElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <tr
-    ref={ref}
     className={cn(
       'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
       className,
     )}
     {...props}
   />
-));
+);
 TableRow.displayName = 'TableRow';
 
-const TableHead = React.forwardRef<
+const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
-  HTMLTableCellElement,
+  className,
-  React.ThHTMLAttributes<HTMLTableCellElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <th
-    ref={ref}
     className={cn(
       'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}
   />
-));
+);
 TableHead.displayName = 'TableHead';
 
-const TableCell = React.forwardRef<
+const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
-  HTMLTableCellElement,
+  className,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <td
-    ref={ref}
     className={cn(
       'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className,
     )}
     {...props}
   />
-));
+);
 TableCell.displayName = 'TableCell';
 
-const TableCaption = React.forwardRef<
+const TableCaption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
-  HTMLTableCaptionElement,
+  className,
-  React.HTMLAttributes<HTMLTableCaptionElement>
+  ...props
->(({ className, ...props }, ref) => (
+}) => (
   <caption
-    ref={ref}
     className={cn('mt-4 text-sm text-muted-foreground', className)}
     {...props}
   />
-));
+);
 TableCaption.displayName = 'TableCaption';
 
 export {

packages/ui/src/shadcn/tabs.tsx

@@ -8,49 +8,43 @@ import { cn } from '../lib/utils';
 
 const Tabs = TabsPrimitive.Root;
 
-const TabsList = React.forwardRef<
+const TabsList: React.FC<
-  React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <TabsPrimitive.List
-    ref={ref}
     className={cn(
       'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       className,
     )}
     {...props}
   />
-));
+);
 TabsList.displayName = TabsPrimitive.List.displayName;
 
-const TabsTrigger = React.forwardRef<
+const TabsTrigger: React.FC<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <TabsPrimitive.Trigger
-    ref={ref}
     className={cn(
       'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       className,
     )}
     {...props}
   />
-));
+);
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
-const TabsContent = React.forwardRef<
+const TabsContent: React.FC<
-  React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
+> = ({ className, ...props }) => (
   <TabsPrimitive.Content
-    ref={ref}
     className={cn(
       'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
       className,
     )}
     {...props}
   />
-));
+);
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 export { Tabs, TabsList, TabsTrigger, TabsContent };

packages/ui/src/shadcn/textarea.tsx

@@ -4,20 +4,18 @@ import { cn } from '../lib/utils';
 
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea: React.FC<TextareaProps> = ({ className, ...props }) => {
-  ({ className, ...props }, ref) => {
+  return (
-    return (
+    <textarea
-      <textarea
+      className={cn(
-        className={cn(
+        'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        className,
-          className,
+      )}
-        )}
+      {...props}
-        ref={ref}
+    />
-        {...props}
+  );
-      />
+};
-    );
+
-  },
-);
 Textarea.displayName = 'Textarea';
 
 export { Textarea };

packages/ui/src/shadcn/tooltip.tsx

@@ -12,12 +12,10 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
+const TooltipContent: React.FC<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithRef<typeof TooltipPrimitive.Content>
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+> = ({ className, sideOffset = 4, ...props }) => (
->(({ className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Content
-    ref={ref}
     sideOffset={sideOffset}
     className={cn(
       'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
@@ -25,7 +23,7 @@ const TooltipContent = React.forwardRef<
     )}
     {...props}
   />
-));
+);
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

pnpm-lock.yaml

@@ -1322,6 +1322,9 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.1.4
         version: 1.1.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-progress':
+        specifier: ^1.1.1
+        version: 1.1.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
       '@radix-ui/react-radio-group':
         specifier: ^1.2.2
         version: 1.2.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
@@ -2909,6 +2912,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.1':
+    resolution: {integrity: sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-radio-group@1.2.2':
     resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
     peerDependencies:
@@ -4051,9 +4067,6 @@ packages:
   '@types/eslint@8.56.12':
     resolution: {integrity: sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==}
 
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
-
   '@types/estree-jsx@1.0.5':
     resolution: {integrity: sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==}
 
@@ -9518,6 +9531,16 @@ snapshots:
       '@types/react': types-react@19.0.0-rc.1
       '@types/react-dom': types-react-dom@19.0.0-rc.1
 
+  '@radix-ui/react-progress@1.1.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.1(react@19.0.0)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-primitive': 2.0.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
   '@radix-ui/react-radio-group@1.2.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -11171,7 +11194,7 @@ snapshots:
 
   '@types/eslint-scope@3.7.7':
     dependencies:
-      '@types/eslint': 9.6.1
+      '@types/eslint': 8.56.12
       '@types/estree': 1.0.6
 
   '@types/eslint@8.56.12':
@@ -11179,11 +11202,6 @@ snapshots:
       '@types/estree': 1.0.6
       '@types/json-schema': 7.0.15
 
-  '@types/eslint@9.6.1':
-    dependencies:
-      '@types/estree': 1.0.6
-      '@types/json-schema': 7.0.15
-
   '@types/estree-jsx@1.0.5':
     dependencies:
       '@types/estree': 1.0.6

tooling/scripts/src/license.mjs

@@ -105,6 +105,7 @@ function checkVisibility() {
 async function main() {
   try {
     await checkVisibility();
+
     await checkLicense().catch((error) => {
       console.error(`Check failed with error: ${error.message}`);
       process.exit(1);