@codefast/ui 0.0.64 → 0.0.66

package/src/react/checkbox.tsx

@@ -12,11 +12,11 @@ import { cn } from '../lib/utils';
 type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
 type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 
-const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, ref) => (
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, forwardedRef) => (
   <CheckboxPrimitive.Root
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
-      'border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      'border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50',
       className,
     )}
     {...props}

package/src/react/code.tsx

@@ -11,10 +11,10 @@ interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, ref) => {
+const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'code';
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Code.displayName = 'Code';

package/src/react/collapsible.tsx

@@ -26,9 +26,9 @@ type CollapsibleContentElement = React.ElementRef<typeof CollapsiblePrimitive.Co
 type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>;
 
 const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <CollapsiblePrimitive.CollapsibleContent
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden',
         className,

package/src/react/command.tsx

@@ -13,9 +13,9 @@ import { Dialog, DialogContent } from './dialog';
 type CommandElement = React.ElementRef<typeof CommandPrimitive>;
 type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
 
-const Command = React.forwardRef<CommandElement, CommandProps>(({ className, ...props }, ref) => (
+const Command = React.forwardRef<CommandElement, CommandProps>(({ className, ...props }, forwardedRef) => (
   <CommandPrimitive
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
       className,
@@ -51,19 +51,21 @@ function CommandDialog({ children, ...props }: CommandDialogProps): React.JSX.El
 type CommandInputElement = React.ElementRef<typeof CommandPrimitive.Input>;
 type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;
 
-const CommandInput = React.forwardRef<CommandInputElement, CommandInputProps>(({ className, ...props }, ref) => (
-  <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="size-5 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  </div>
-));
+const CommandInput = React.forwardRef<CommandInputElement, CommandInputProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
+      <MagnifyingGlassIcon className="size-5 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        ref={forwardedRef}
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent text-sm outline-none disabled:cursor-default disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  ),
+);
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
@@ -74,8 +76,12 @@ CommandInput.displayName = CommandPrimitive.Input.displayName;
 type CommandListElement = React.ElementRef<typeof CommandPrimitive.List>;
 type CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
 
-const CommandList = React.forwardRef<CommandListElement, CommandListProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.List ref={ref} className={cn('max-h-72 overflow-y-auto overflow-x-hidden', className)} {...props} />
+const CommandList = React.forwardRef<CommandListElement, CommandListProps>(({ className, ...props }, forwardedRef) => (
+  <CommandPrimitive.List
+    ref={forwardedRef}
+    className={cn('max-h-72 overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
 ));
 
 CommandList.displayName = CommandPrimitive.List.displayName;
@@ -87,8 +93,8 @@ CommandList.displayName = CommandPrimitive.List.displayName;
 type CommandEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;
 type CommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;
 
-const CommandEmpty = React.forwardRef<CommandEmptyElement, CommandEmptyProps>((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+const CommandEmpty = React.forwardRef<CommandEmptyElement, CommandEmptyProps>((props, forwardedRef) => (
+  <CommandPrimitive.Empty ref={forwardedRef} className="py-6 text-center text-sm" {...props} />
 ));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
@@ -100,16 +106,18 @@ CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 type CommandGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;
 type CommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;
 
-const CommandGroup = React.forwardRef<CommandGroupElement, CommandGroupProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
-      className,
-    )}
-    {...props}
-  />
-));
+const CommandGroup = React.forwardRef<CommandGroupElement, CommandGroupProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <CommandPrimitive.Group
+      ref={forwardedRef}
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
@@ -121,8 +129,8 @@ type CommandSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separato
 type CommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;
 
 const CommandSeparator = React.forwardRef<CommandSeparatorElement, CommandSeparatorProps>(
-  ({ className, ...props }, ref) => (
-    <CommandPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 h-px', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <CommandPrimitive.Separator ref={forwardedRef} className={cn('bg-border -mx-1 h-px', className)} {...props} />
   ),
 );
 
@@ -135,9 +143,9 @@ CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 type CommandItemElement = React.ElementRef<typeof CommandPrimitive.Item>;
 type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;
 
-const CommandItem = React.forwardRef<CommandItemElement, CommandItemProps>(({ className, ...props }, ref) => (
+const CommandItem = React.forwardRef<CommandItemElement, CommandItemProps>(({ className, ...props }, forwardedRef) => (
   <CommandPrimitive.Item
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-selected:outline-none',
       className,
@@ -155,9 +163,11 @@ CommandItem.displayName = CommandPrimitive.Item.displayName;
 type CommandLoadingElement = React.ElementRef<typeof CommandPrimitive.Loading>;
 type CommandLoadingProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>;
 
-const CommandLoading = React.forwardRef<CommandLoadingElement, CommandLoadingProps>(({ className, ...props }, ref) => (
-  <CommandPrimitive.Loading ref={ref} className={cn('flex justify-center p-2', className)} {...props} />
-));
+const CommandLoading = React.forwardRef<CommandLoadingElement, CommandLoadingProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <CommandPrimitive.Loading ref={forwardedRef} className={cn('flex justify-center p-2', className)} {...props} />
+  ),
+);
 
 CommandLoading.displayName = CommandPrimitive.Loading.displayName;
 

package/src/react/container.tsx

@@ -12,11 +12,13 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   asChild?: boolean;
 }
 
-const Container = React.forwardRef<ContainerElement, ContainerProps>(({ className, asChild, ...props }, ref) => {
-  const Component = asChild ? Slot : 'div';
+const Container = React.forwardRef<ContainerElement, ContainerProps>(
+  ({ className, asChild, ...props }, forwardedRef) => {
+    const Component = asChild ? Slot : 'div';
 
-  return <Component ref={ref} className={cn('container', className)} {...props} />;
-});
+    return <Component ref={forwardedRef} className={cn('container', className)} {...props} />;
+  },
+);
 
 Container.displayName = 'Container';
 

package/src/react/context-menu.tsx

@@ -51,9 +51,9 @@ interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<type
 }
 
 const ContextMenuSubTrigger = React.forwardRef<ContextMenuSubTriggerElement, ContextMenuSubTriggerProps>(
-  ({ children, className, inset, ...props }, ref) => (
+  ({ children, className, inset, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.SubTrigger
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
         inset && 'pl-8',
@@ -77,10 +77,10 @@ type ContextMenuSubContentElement = React.ElementRef<typeof ContextMenuPrimitive
 type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>;
 
 const ContextMenuSubContent = React.forwardRef<ContextMenuSubContentElement, ContextMenuSubContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.SubContent
-        ref={ref}
+        ref={forwardedRef}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
           className,
@@ -101,10 +101,10 @@ type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrimitive.Co
 type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
 
 const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.Portal>
       <ContextMenuPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
           className,
@@ -128,9 +128,9 @@ interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof Con
 }
 
 const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItemProps>(
-  ({ className, inset, ...props }, ref) => (
+  ({ className, inset, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.Item
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         inset && 'pl-8',
@@ -151,9 +151,9 @@ type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMenuPrimiti
 type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>;
 
 const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement, ContextMenuCheckboxItemProps>(
-  ({ children, className, checked, ...props }, ref) => (
+  ({ children, className, checked, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.CheckboxItem
-      ref={ref}
+      ref={forwardedRef}
       checked={checked}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
@@ -181,9 +181,9 @@ type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.
 type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>;
 
 const ContextMenuRadioItem = React.forwardRef<ContextMenuRadioItemElement, ContextMenuRadioItemProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.RadioItem
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         className,
@@ -213,9 +213,9 @@ interface ContextMenuLabelProps extends React.ComponentPropsWithoutRef<typeof Co
 }
 
 const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLabelProps>(
-  ({ className, inset, ...props }, ref) => (
+  ({ className, inset, ...props }, forwardedRef) => (
     <ContextMenuPrimitive.Label
-      ref={ref}
+      ref={forwardedRef}
       className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
       {...props}
     />
@@ -232,8 +232,12 @@ type ContextMenuSeparatorElement = React.ElementRef<typeof ContextMenuPrimitive.
 type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>;
 
 const ContextMenuSeparator = React.forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(
-  ({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <ContextMenuPrimitive.Separator
+      ref={forwardedRef}
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
   ),
 );
 
@@ -257,8 +261,8 @@ type ContextMenuArrowElement = React.ElementRef<typeof ContextMenuPrimitive.Arro
 type ContextMenuArrowProps = ContextMenuPrimitive.ContextMenuArrowProps;
 
 const ContextMenuArrow = React.forwardRef<ContextMenuArrowElement, ContextMenuArrowProps>(
-  ({ className, ...props }, ref) => (
-    <ContextMenuPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <ContextMenuPrimitive.Arrow ref={forwardedRef} className={cn('fill-popover', className)} {...props} />
   ),
 );
 

package/src/react/dialog.tsx

@@ -34,13 +34,13 @@ type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
 
 const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <DialogPrimitive.Portal>
       <DialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=closed]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 grid place-items-center overflow-auto bg-black/80 p-4 sm:pb-12 sm:pt-8">
         <DialogPrimitive.Content
-          ref={ref}
+          ref={forwardedRef}
           className={cn(
-            'bg-background data-[state=open]:animate-in data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-200 data-[state=closed]:animate-duration-200 data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out relative z-50 flex w-full max-w-lg origin-top flex-col rounded-lg border shadow-lg',
+            'bg-background data-[state=open]:animate-in data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-200 data-[state=closed]:animate-duration-200 data-[state=open]:fade-in data-[state=closed]:animate-out data-[state=closed]:fade-out relative z-50 flex w-full max-w-lg flex-col rounded-lg border shadow-lg',
             className,
           )}
           {...props}
@@ -79,7 +79,7 @@ function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Ele
 
 type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
 
-function DialogBody({ className, ...props }: DialogFooterProps): React.JSX.Element {
+function DialogBody({ className, ...props }: DialogBodyProps): React.JSX.Element {
   return <main className={cn('overflow-auto px-6 py-2', className)} {...props} />;
 }
 
@@ -92,7 +92,7 @@ type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element {
   return (
     <footer
-      className={cn('flex shrink-0 flex-col-reverse px-6 pb-6 pt-4 sm:flex-row sm:justify-end sm:space-x-2', className)}
+      className={cn('flex shrink-0 flex-col-reverse gap-2 px-6 pb-6 pt-4 sm:flex-row sm:justify-end', className)}
       {...props}
     />
   );
@@ -105,9 +105,9 @@ function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Ele
 type DialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
 type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 
-const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(({ className, ...props }, ref) => (
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(({ className, ...props }, forwardedRef) => (
   <DialogPrimitive.Title
-    ref={ref}
+    ref={forwardedRef}
     className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
@@ -123,8 +123,12 @@ type DialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Descript
 type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
 
 const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <DialogPrimitive.Description
+      ref={forwardedRef}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
   ),
 );
 

package/src/react/drawer.tsx

@@ -36,11 +36,11 @@ type DrawerContentElement = React.ElementRef<typeof DrawerPrimitive.Content>;
 type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>;
 
 const DrawerContent = React.forwardRef<DrawerContentElement, DrawerContentProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <DrawerPrimitive.Portal>
       <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
       <DrawerPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         className={cn(
           'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border',
           className,
@@ -83,9 +83,9 @@ function DrawerFooter({ className, ...props }: DrawerFooterProps): React.JSX.Ele
 type DrawerTitleElement = React.ElementRef<typeof DrawerPrimitive.Title>;
 type DrawerTitleProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>;
 
-const DrawerTitle = React.forwardRef<DrawerTitleElement, DrawerTitleProps>(({ className, ...props }, ref) => (
+const DrawerTitle = React.forwardRef<DrawerTitleElement, DrawerTitleProps>(({ className, ...props }, forwardedRef) => (
   <DrawerPrimitive.Title
-    ref={ref}
+    ref={forwardedRef}
     className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
@@ -101,8 +101,12 @@ type DrawerDescriptionElement = React.ElementRef<typeof DrawerPrimitive.Descript
 type DrawerDescriptionProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>;
 
 const DrawerDescription = React.forwardRef<DrawerDescriptionElement, DrawerDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <DrawerPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <DrawerPrimitive.Description
+      ref={forwardedRef}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
   ),
 );
 

package/src/react/dropdown-menu.tsx

@@ -51,9 +51,9 @@ interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typ
 }
 
 const DropdownMenuSubTrigger = React.forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
-  ({ children, className, inset, ...props }, ref) => (
+  ({ children, className, inset, ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.SubTrigger
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'focus:bg-accent data-[state=open]:bg-accent flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
         inset && 'pl-8',
@@ -78,10 +78,10 @@ type DropdownMenuSubContentProps = DropdownMenuPrimitive.DropdownMenuSubContentP
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   DropdownMenuSubContentProps
->(({ className, ...props }, ref) => (
+>(({ className, ...props }, forwardedRef) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.SubContent
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
         className,
@@ -101,10 +101,10 @@ type DropdownMenuContentElement = React.ElementRef<typeof DropdownMenuPrimitive.
 type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
 
 const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
-  ({ className, sideOffset = 6, ...props }, ref) => (
+  ({ className, sideOffset = 6, ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         className={cn(
           'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
           className,
@@ -129,9 +129,9 @@ interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof Dr
 }
 
 const DropdownMenuItem = React.forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
-  ({ className, inset, ...props }, ref) => (
+  ({ className, inset, ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Item
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         inset && 'pl-8',
@@ -152,9 +152,9 @@ type DropdownMenuCheckboxItemElement = React.ElementRef<typeof DropdownMenuPrimi
 type DropdownMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
 
 const DropdownMenuCheckboxItem = React.forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
-  ({ children, className, checked, ...props }, ref) => (
+  ({ children, className, checked, ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.CheckboxItem
-      ref={ref}
+      ref={forwardedRef}
       checked={checked}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
@@ -182,9 +182,9 @@ type DropdownMenuRadioItemElement = React.ElementRef<typeof DropdownMenuPrimitiv
 type DropdownMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
 
 const DropdownMenuRadioItem = React.forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.RadioItem
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm transition focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
         className,
@@ -214,9 +214,9 @@ interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof D
 }
 
 const DropdownMenuLabel = React.forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
-  ({ className, inset, ...props }, ref) => (
+  ({ className, inset, ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Label
-      ref={ref}
+      ref={forwardedRef}
       className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
       {...props}
     />
@@ -233,8 +233,12 @@ type DropdownMenuSeparatorElement = React.ElementRef<typeof DropdownMenuPrimitiv
 type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
 
 const DropdownMenuSeparator = React.forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
-  ({ className, ...props }, ref) => (
-    <DropdownMenuPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <DropdownMenuPrimitive.Separator
+      ref={forwardedRef}
+      className={cn('bg-muted -mx-1 my-1 h-px', className)}
+      {...props}
+    />
   ),
 );
 

package/src/react/em.tsx

@@ -11,10 +11,10 @@ interface EmProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Em = React.forwardRef<EmElement, EmProps>(({ asChild, ...props }, ref) => {
+const Em = React.forwardRef<EmElement, EmProps>(({ asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'em';
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Em.displayName = 'Em';

package/src/react/form.tsx

@@ -104,12 +104,12 @@ function FormField<
 type FormItemElement = HTMLDivElement;
 type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
 
-const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, ref) => {
+const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, forwardedRef) => {
   const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+      <div ref={forwardedRef} className={cn('space-y-2', className)} {...props} />
     </FormItemContext.Provider>
   );
 });
@@ -123,10 +123,12 @@ FormItem.displayName = 'FormItem';
 type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
 type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
 
-const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, ref) => {
+const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, forwardedRef) => {
   const { error, formItemId } = useFormField();
 
-  return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;
+  return (
+    <Label ref={forwardedRef} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />
+  );
 });
 
 FormLabel.displayName = 'FormLabel';
@@ -138,12 +140,12 @@ FormLabel.displayName = 'FormLabel';
 type FormControlElement = React.ElementRef<typeof Slot>;
 type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
 
-const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, ref) => {
+const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, forwardedRef) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
-      ref={ref}
+      ref={forwardedRef}
       aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={Boolean(error)}
       id={formItemId}
@@ -162,10 +164,17 @@ type FormDescriptionElement = HTMLParagraphElement;
 type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 
 const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, ...props }, forwardedRef) => {
     const { formDescriptionId } = useFormField();
 
-    return <p ref={ref} className={cn('text-muted-foreground text-xs', className)} id={formDescriptionId} {...props} />;
+    return (
+      <p
+        ref={forwardedRef}
+        className={cn('text-muted-foreground text-xs', className)}
+        id={formDescriptionId}
+        {...props}
+      />
+    );
   },
 );
 
@@ -178,20 +187,27 @@ FormDescription.displayName = 'FormDescription';
 type FormMessageElement = HTMLParagraphElement;
 type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
 
-const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ children, className, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error?.message ? String(error.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p ref={ref} className={cn('text-destructive text-xs font-medium', className)} id={formMessageId} {...props}>
-      {body}
-    </p>
-  );
-});
+const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(
+  ({ children, className, ...props }, forwardedRef) => {
+    const { error, formMessageId } = useFormField();
+    const body = error?.message ? String(error.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p
+        ref={forwardedRef}
+        className={cn('text-destructive text-xs font-medium', className)}
+        id={formMessageId}
+        {...props}
+      >
+        {body}
+      </p>
+    );
+  },
+);
 
 FormMessage.displayName = 'FormMessage';