chore(examples): removes all instances of React.forwardRef (#10334)

Similar to #10331. Since React 19, refs can now be passed directly
through props without the need for `React.forwardRef`. This greatly
simplifies components types and overall syntax.

examples/auth/src/app/(app)/_components/Gutter/index.tsx

@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
+import React from 'react'
-
-import React, { forwardRef } from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
-  const { children, className, left = true, right = true } = props
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
+}
-
-Gutter.displayName = 'Gutter'

examples/draft-preview/src/components/Gutter/index.tsx

@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
+import React from 'react'
-
-import React, { forwardRef } from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
-  const { children, className, left = true, right = true } = props
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
+}
-
-Gutter.displayName = 'Gutter'

examples/form-builder/src/components/Gutter/index.tsx

@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
+import React from 'react'
-
-import React, { forwardRef } from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
-  const { children, className, left = true, right = true } = props
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -25,6 +23,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
+}
-
-Gutter.displayName = 'Gutter'

examples/live-preview/src/app/(app)/_components/Gutter/index.tsx

@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
+import React from 'react'
-
-import React, { forwardRef } from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Gutter: React.FC<Props & { ref?: React.Ref<HTMLDivElement> }> = (props) => {
-  const { children, className, left = true, right = true } = props
+  const { children, className, left = true, right = true, ref } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
+}
-
-Gutter.displayName = 'Gutter'

examples/localization/src/components/ui/button.tsx

@@ -34,16 +34,19 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean
+  ref?: React.Ref<HTMLButtonElement>
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button: React.FC<ButtonProps> = ({
-  ({ asChild = false, className, size, variant, ...props }, ref) => {
+  asChild = false,
+  className,
+  size,
+  variant,
+  ref,
+  ...props
+}) => {
   const Comp = asChild ? Slot : 'button'
-    return (
+  return <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
-      <Comp className={cn(buttonVariants({ className, size, variant }))} ref={ref} {...props} />
+}
-    )
-  },
-)
-Button.displayName = 'Button'
 
 export { Button, buttonVariants }

examples/localization/src/components/ui/card.tsx

@@ -1,56 +1,48 @@
-/* eslint-disable jsx-a11y/heading-has-content */
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const Card: React.FC<
-  ({ className, ...props }, ref) => (
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
   <div
     className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
     ref={ref}
     {...props}
   />
-  ),
 )
-Card.displayName = 'Card'
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader: React.FC<
-  ({ className, ...props }, ref) => (
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
   <div className={cn('flex flex-col space-y-1.5 p-6', className)} ref={ref} {...props} />
-  ),
 )
-CardHeader.displayName = 'CardHeader'
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle: React.FC<
-  ({ className, ...props }, ref) => (
+  { ref?: React.Ref<HTMLHeadingElement> } & React.HTMLAttributes<HTMLHeadingElement>
+> = ({ className, ref, ...props }) => (
   <h3
     className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
     ref={ref}
     {...props}
   />
-  ),
 )
-CardTitle.displayName = 'CardTitle'
 
-const CardDescription = React.forwardRef<
+const CardDescription: React.FC<
-  HTMLParagraphElement,
+  { ref?: React.Ref<HTMLParagraphElement> } & React.HTMLAttributes<HTMLParagraphElement>
-  React.HTMLAttributes<HTMLParagraphElement>
+> = ({ className, ref, ...props }) => (
->(({ className, ...props }, ref) => (
   <p className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />
-))
+)
-CardDescription.displayName = 'CardDescription'
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent: React.FC<
-  ({ className, ...props }, ref) => (
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
   <div className={cn('p-6 pt-0', className)} ref={ref} {...props} />
-  ),
 )
-CardContent.displayName = 'CardContent'
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter: React.FC<
-  ({ className, ...props }, ref) => (
+  { ref?: React.Ref<HTMLDivElement> } & React.HTMLAttributes<HTMLDivElement>
+> = ({ className, ref, ...props }) => (
   <div className={cn('flex items-center p-6 pt-0', className)} ref={ref} {...props} />
-  ),
 )
-CardFooter.displayName = 'CardFooter'
 
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

examples/localization/src/components/ui/checkbox.tsx

@@ -5,10 +5,11 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { Check } from 'lucide-react'
 import * as React from 'react'
 
-const Checkbox = React.forwardRef<
+const Checkbox: React.FC<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  {
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+    ref?: React.Ref<HTMLButtonElement>
->(({ className, ...props }, ref) => (
+  } & React.ComponentProps<typeof CheckboxPrimitive.Root>
+> = ({ className, ref, ...props }) => (
   <CheckboxPrimitive.Root
     className={cn(
       'peer h-4 w-4 shrink-0 rounded border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
@@ -21,7 +22,6 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
+)
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
 export { Checkbox }

examples/localization/src/components/ui/input.tsx

@@ -1,10 +1,11 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+const Input: React.FC<
-
+  {
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ref?: React.Ref<HTMLInputElement>
-  ({ type, className, ...props }, ref) => {
+  } & React.InputHTMLAttributes<HTMLInputElement>
+> = ({ type, className, ref, ...props }) => {
   return (
     <input
       className={cn(
@@ -16,8 +17,6 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       {...props}
     />
   )
-  },
+}
-)
-Input.displayName = 'Input'
 
 export { Input }

examples/localization/src/components/ui/label.tsx

@@ -9,12 +9,11 @@ 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>,
+  { ref?: React.Ref<HTMLLabelElement> } & React.ComponentProps<typeof LabelPrimitive.Root> &
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
+> = ({ className, ref, ...props }) => (
   <LabelPrimitive.Root className={cn(labelVariants(), className)} ref={ref} {...props} />
-))
+)
-Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }

examples/localization/src/components/ui/pagination.tsx

@@ -1,11 +1,9 @@
-/* eslint-disable react/button-has-type */
 import type { ButtonProps } from '@/components/ui/button'
 
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from 'src/utilities/cn'
 import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'
 import * as React from 'react'
-import { useTranslations } from 'next-intl'
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
@@ -15,19 +13,16 @@ const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
     {...props}
   />
 )
-Pagination.displayName = 'Pagination'
 
-const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+const PaginationContent: React.FC<
-  ({ className, ...props }, ref) => (
+  { ref?: React.Ref<HTMLUListElement> } & React.HTMLAttributes<HTMLUListElement>
+> = ({ className, ref, ...props }) => (
   <ul className={cn('flex flex-row items-center gap-1', className)} ref={ref} {...props} />
-  ),
 )
-PaginationContent.displayName = 'PaginationContent'
 
-const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+const PaginationItem: React.FC<
-  ({ className, ...props }, ref) => <li className={cn('', className)} ref={ref} {...props} />,
+  { ref?: React.Ref<HTMLLIElement> } & React.HTMLAttributes<HTMLLIElement>
-)
+> = ({ className, ref, ...props }) => <li className={cn('', className)} ref={ref} {...props} />
-PaginationItem.displayName = 'PaginationItem'
 
 type PaginationLinkProps = {
   isActive?: boolean
@@ -47,15 +42,11 @@ const PaginationLink = ({ className, isActive, size = 'icon', ...props }: Pagina
     {...props}
   />
 )
-PaginationLink.displayName = 'PaginationLink'
 
 const PaginationPrevious = ({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) => {
+}: React.ComponentProps<typeof PaginationLink>) => (
-  const t = useTranslations()
-
-  return (
   <PaginationLink
     aria-label="Go to previous page"
     className={cn('gap-1 pl-2.5', className)}
@@ -63,45 +54,32 @@ const PaginationPrevious = ({
     {...props}
   >
     <ChevronLeft className="h-4 w-4" />
-      <span>{t('previous')}</span>
+    <span>Previous</span>
   </PaginationLink>
 )
-}
-PaginationPrevious.displayName = 'PaginationPrevious'
 
-const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => {
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  const t = useTranslations()
-
-  return (
   <PaginationLink
     aria-label="Go to next page"
     className={cn('gap-1 pr-2.5', className)}
     size="default"
     {...props}
   >
-      <span>{t('next')}</span>
+    <span>Next</span>
     <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-}
-PaginationNext.displayName = 'PaginationNext'
 
-const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => {
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
-  const t = useTranslations()
-
-  return (
   <span
     aria-hidden
     className={cn('flex h-9 w-9 items-center justify-center', className)}
     {...props}
   >
     <MoreHorizontal className="h-4 w-4" />
-      <span className="sr-only">{t('more-pages')}</span>
+    <span className="sr-only">More pages</span>
   </span>
 )
-}
-
-PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 export {
   Pagination,

examples/localization/src/components/ui/select.tsx

@@ -11,10 +11,9 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-const SelectTrigger = React.forwardRef<
+const SelectTrigger: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  { ref?: React.Ref<HTMLButtonElement> } & React.ComponentProps<typeof SelectPrimitive.Trigger>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+> = ({ children, className, ref, ...props }) => (
->(({ children, className, ...props }, ref) => (
   <SelectPrimitive.Trigger
     className={cn(
       'flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-inherit ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
@@ -28,13 +27,11 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown 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>,
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ref, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -42,13 +39,13 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
+)
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-const SelectScrollDownButton = React.forwardRef<
+const SelectScrollDownButton: React.FC<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+    typeof SelectPrimitive.ScrollDownButton
->(({ className, ...props }, ref) => (
+  >
+> = ({ className, ref, ...props }) => (
   <SelectPrimitive.ScrollDownButton
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     ref={ref}
@@ -56,13 +53,13 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDown className="h-4 w-4" />
   </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>
+    ref?: React.Ref<HTMLDivElement>
->(({ children, className, position = 'popper', ...props }, ref) => (
+  } & React.ComponentProps<typeof SelectPrimitive.Content>
+> = ({ children, className, position = 'popper', ref, ...props }) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       className={cn(
@@ -88,25 +85,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>,
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Label>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+> = ({ className, ref, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
     ref={ref}
     {...props}
   />
-))
+)
-SelectLabel.displayName = SelectPrimitive.Label.displayName
 
-const SelectItem = React.forwardRef<
+const SelectItem: React.FC<
-  React.ElementRef<typeof SelectPrimitive.Item>,
+  { ref?: React.Ref<HTMLDivElement>; value: string } & React.ComponentProps<
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+    typeof SelectPrimitive.Item
->(({ children, className, ...props }, ref) => (
+  >
+> = ({ children, className, ref, ...props }) => (
   <SelectPrimitive.Item
     className={cn(
       'relative flex w-full cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -123,20 +118,17 @@ const SelectItem = React.forwardRef<
 
     <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>,
+  { ref?: React.Ref<HTMLDivElement> } & React.ComponentProps<typeof SelectPrimitive.Separator>
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+> = ({ className, ref, ...props }) => (
->(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     ref={ref}
     {...props}
   />
-))
+)
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,

examples/localization/src/components/ui/textarea.tsx

@@ -1,10 +1,11 @@
 import { cn } from 'src/utilities/cn'
 import * as React from 'react'
 
-export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+const Textarea: React.FC<
-
+  {
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ref?: React.Ref<HTMLTextAreaElement>
-  ({ className, ...props }, ref) => {
+  } & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+> = ({ className, ref, ...props }) => {
   return (
     <textarea
       className={cn(
@@ -15,8 +16,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       {...props}
     />
   )
-  },
+}
-)
-Textarea.displayName = 'Textarea'
 
 export { Textarea }

examples/tailwind-shadcn-ui/src/components/ui/alert.tsx

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

packages/ui/src/elements/Gutter/index.tsx

@@ -46,5 +46,3 @@ export const Gutter: React.FC<GutterProps> = (props) => {
     </div>
   )
 }
-
-Gutter.displayName = 'Gutter'

test/live-preview/app/live-preview/_components/Gutter/index.tsx

@@ -1,6 +1,4 @@
-import type { Ref } from 'react'
+import React from 'react'
-
-import React, { forwardRef } from 'react'
 
 import classes from './index.module.scss'
 
@@ -8,12 +6,12 @@ type Props = {
   children: React.ReactNode
   className?: string
   left?: boolean
-  ref?: Ref<HTMLDivElement>
+  ref?: React.Ref<HTMLDivElement>
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Gutter: React.FC<{ ref?: React.Ref<HTMLDivElement> } & Props> = (props) => {
-  const { children, className, left = true, right = true } = props
+  const { children, className, left = true, ref, right = true } = props
 
   return (
     <div
@@ -30,6 +28,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
+}
-
-Gutter.displayName = 'Gutter'

test/live-preview/prod/app/live-preview/_components/Gutter/index.tsx

@@ -1,6 +1,6 @@
 import type { Ref } from 'react'
 
-import React, { forwardRef } from 'react'
+import React from 'react'
 
 import classes from './index.module.scss'
 
@@ -12,8 +12,8 @@ type Props = {
   right?: boolean
 }
 
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
+export const Gutter: React.FC<{ ref?: Ref<HTMLDivElement> } & Props> = (props) => {
-  const { children, className, left = true, right = true } = props
+  const { children, className, left = true, ref, right = true } = props
 
   return (
     <div
@@ -30,6 +30,4 @@ export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props,
       {children}
     </div>
   )
-})
+}
-
-Gutter.displayName = 'Gutter'