@codefast/ui 0.0.64 → 0.0.66

package/src/react/heading.tsx

@@ -12,11 +12,13 @@ interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   asChild?: boolean;
 }
 
-const Heading = React.forwardRef<HeadingElement, HeadingProps>(({ asChild, as: Tag = 'h1', ...props }, ref) => {
-  const Component = asChild ? Slot : Tag;
+const Heading = React.forwardRef<HeadingElement, HeadingProps>(
+  ({ asChild, as: Tag = 'h1', ...props }, forwardedRef) => {
+    const Component = asChild ? Slot : Tag;
 
-  return <Component ref={ref} {...props} />;
-});
+    return <Component ref={forwardedRef} {...props} />;
+  },
+);
 
 Heading.displayName = 'Heading';
 

package/src/react/hover-card.tsx

@@ -26,10 +26,10 @@ type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Conten
 type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
 
 const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
-  ({ className, align = 'center', sideOffset = 6, ...props }, ref) => (
+  ({ className, align = 'center', sideOffset = 6, ...props }, forwardedRef) => (
     <HoverCardPrimitive.Portal>
       <HoverCardPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         align={align}
         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=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-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=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
@@ -51,9 +51,11 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 type HoverCardArrowElement = React.ElementRef<typeof HoverCardPrimitive.Arrow>;
 type HoverCardArrowProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Arrow>;
 
-const HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(({ className, ...props }, ref) => (
-  <HoverCardPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
-));
+const HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <HoverCardPrimitive.Arrow ref={forwardedRef} className={cn('fill-popover', className)} {...props} />
+  ),
+);
 
 HoverCardArrow.displayName = HoverCardPrimitive.Arrow.displayName;
 

package/src/react/input-otp.tsx

@@ -19,10 +19,10 @@ type InputOTPElement = React.ElementRef<typeof OTPInput>;
 type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
 
 const InputOTP = React.forwardRef<InputOTPElement, InputOTPProps>(
-  ({ className, containerClassName, ...props }, ref) => (
+  ({ className, containerClassName, ...props }, forwardedRef) => (
     <OTPInput
-      ref={ref}
-      className={cn('disabled:cursor-not-allowed', className)}
+      ref={forwardedRef}
+      className={cn('disabled:cursor-default', className)}
       containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
       {...props}
     />
@@ -38,9 +38,11 @@ InputOTP.displayName = 'InputOTP';
 type InputOTPGroupElement = HTMLDivElement;
 type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
 
-const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center', className)} {...props} />
-));
+const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <div ref={forwardedRef} className={cn('flex items-center', className)} {...props} />
+  ),
+);
 
 InputOTPGroup.displayName = 'InputOTPGroup';
 
@@ -54,29 +56,31 @@ interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
   index: number;
 }
 
-const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const slot = inputOTPContext.slots[index];
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-        slot?.isActive && 'z-10 outline outline-2',
-        className,
-      )}
-      {...props}
-    >
-      {slot?.char}
-      {slot?.hasFakeCaret ? (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
-        </div>
-      ) : null}
-    </div>
-  );
-});
+const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(
+  ({ index, className, ...props }, forwardedRef) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const slot = inputOTPContext.slots[index];
+
+    return (
+      <div
+        ref={forwardedRef}
+        className={cn(
+          'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+          slot?.isActive && 'z-10 outline outline-2',
+          className,
+        )}
+        {...props}
+      >
+        {slot?.char}
+        {slot?.hasFakeCaret ? (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+            <div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);
 
 InputOTPSlot.displayName = 'InputOTPSlot';
 
@@ -87,11 +91,13 @@ InputOTPSlot.displayName = 'InputOTPSlot';
 type InputOTPSeparatorElement = HTMLDivElement;
 type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
 
-const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <DotFilledIcon />
-  </div>
-));
+const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(
+  ({ ...props }, forwardedRef) => (
+    <div ref={forwardedRef} role="separator" {...props}>
+      <DotFilledIcon />
+    </div>
+  ),
+);
 
 InputOTPSeparator.displayName = 'InputOTPSeparator';
 

package/src/react/input.tsx

@@ -1,18 +1,34 @@
+'use client';
+
 import * as React from 'react';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { Spinner } from './spinner';
 
 /* -----------------------------------------------------------------------------
  * Variant: Input
  * -------------------------------------------------------------------------- */
 
 const inputVariants = tv({
-  base: 'border-input placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  slots: {
+    root: 'border-input inline-flex w-full cursor-text items-center gap-3 rounded-md border bg-transparent px-3 shadow-sm transition focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 has-[input[disabled]]:cursor-default has-[input[disabled]]:opacity-50 [&_svg]:size-4',
+    slot: 'placeholder:text-muted-foreground size-full flex-1 bg-transparent text-sm outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-default',
+  },
   variants: {
     inputSize: {
-      default: 'h-10',
-      xs: 'h-8',
-      sm: 'h-9',
-      lg: 'h-11',
+      default: {
+        root: 'h-10',
+      },
+      xs: {
+        root: 'h-8',
+      },
+      sm: {
+        root: 'h-9',
+      },
+      lg: {
+        root: 'h-11',
+      },
     },
   },
   defaultVariants: {
@@ -22,21 +38,108 @@ const inputVariants = tv({
 
 type InputVariantsProps = VariantProps<typeof inputVariants>;
 
+const { root, slot } = inputVariants();
+
+/* -----------------------------------------------------------------------------
+ * Context: Input
+ * -------------------------------------------------------------------------- */
+
+const INPUT_NAME = 'Input';
+
+type ScopedProps<P> = P & { __scopeInput?: Scope };
+const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
+
+interface InputContextValue {
+  inputRef: React.RefObject<HTMLInputElement>;
+  disabled?: boolean;
+}
+
+const [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);
+
 /* -----------------------------------------------------------------------------
  * Component: Input
  * -------------------------------------------------------------------------- */
 
-type InputElement = HTMLInputElement;
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputVariantsProps;
+interface InputProps extends React.PropsWithChildren, InputVariantsProps {
+  className?: string | undefined;
+  loaderPosition?: 'prefix' | 'suffix';
+  loading?: boolean;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
 
-const Input = React.forwardRef<InputElement, InputProps>(({ className, inputSize, ...props }, ref) => {
-  return <input ref={ref} className={inputVariants({ className, inputSize })} type="text" {...props} />;
-});
+function Input({
+  __scopeInput,
+  className,
+  prefix,
+  suffix,
+  loading,
+  loaderPosition,
+  inputSize,
+  children,
+  ...props
+}: ScopedProps<InputProps>): React.JSX.Element {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = (event) => {
+    const target = event.target as HTMLElement;
+
+    if (target.closest('input, a, button')) {
+      return;
+    }
+
+    const inputElement = inputRef.current;
+
+    if (!inputElement) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      inputElement.focus();
+    });
+  };
+
+  return (
+    <InputProvider inputRef={inputRef} scope={__scopeInput}>
+      <div className={root({ inputSize, className })} {...props} role="presentation" onPointerDown={handlePointerDown}>
+        {loading && loaderPosition === 'prefix' ? <Spinner /> : prefix}
+        {children}
+        {loading && loaderPosition === 'suffix' ? <Spinner /> : suffix}
+      </div>
+    </InputProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputSlot
+ * -------------------------------------------------------------------------- */
+
+const INPUT_SLOT_NAME = 'InputSlot';
+
+type InputSlotElement = HTMLInputElement;
+type InputSlotProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+const InputSlot = React.forwardRef<InputSlotElement, InputSlotProps>(
+  ({ __scopeInput, className, ...props }: ScopedProps<InputSlotProps>, forwardedRef) => {
+    const context = useInputContext(INPUT_SLOT_NAME, __scopeInput);
+    const composedInputRef = useComposedRefs(forwardedRef, context.inputRef);
+
+    return <input ref={composedInputRef} className={slot({ className })} type="text" {...props} />;
+  },
+);
 
-Input.displayName = 'Input';
+InputSlot.displayName = 'Input';
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Input, type InputProps };
+export {
+  createInputScope,
+  Input,
+  InputSlot,
+  inputVariants,
+  type InputProps,
+  type InputSlotProps,
+  type InputVariantsProps,
+};

package/src/react/kbd.tsx

@@ -12,12 +12,12 @@ interface KbdProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, ref) => {
+const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'kbd';
 
   return (
     <Component
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium',
         className,

package/src/react/label.tsx

@@ -11,9 +11,9 @@ import { cn } from '../lib/utils';
 type LabelElement = React.ElementRef<typeof LabelPrimitive.Root>;
 type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
 
-const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, ref) => (
+const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, forwardedRef) => (
   <LabelPrimitive.Root
-    ref={ref}
+    ref={forwardedRef}
     className={cn(
       'text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:opacity-70',
       className,

package/src/react/menubar.tsx

@@ -40,9 +40,9 @@ const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 type MenubarElement = React.ElementRef<typeof MenubarPrimitive.Root>;
 type MenubarProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>;
 
-const Menubar = React.forwardRef<MenubarElement, MenubarProps>(({ className, ...props }, ref) => (
+const Menubar = React.forwardRef<MenubarElement, MenubarProps>(({ className, ...props }, forwardedRef) => (
   <MenubarPrimitive.Root
-    ref={ref}
+    ref={forwardedRef}
     className={cn('bg-background flex h-10 items-center space-x-1 rounded-md border p-1 shadow-sm', className)}
     {...props}
   />
@@ -57,16 +57,18 @@ Menubar.displayName = MenubarPrimitive.Root.displayName;
 type MenubarTriggerElement = React.ElementRef<typeof MenubarPrimitive.Trigger>;
 type MenubarTriggerProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>;
 
-const MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    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-3 py-1 text-sm font-medium focus:outline-none',
-      className,
-    )}
-    {...props}
-  />
-));
+const MenubarTrigger = React.forwardRef<MenubarTriggerElement, MenubarTriggerProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <MenubarPrimitive.Trigger
+      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-3 py-1 text-sm font-medium focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
@@ -81,9 +83,9 @@ interface MenubarSubTriggerProps extends React.ComponentPropsWithoutRef<typeof M
 }
 
 const MenubarSubTrigger = React.forwardRef<MenubarSubTriggerElement, MenubarSubTriggerProps>(
-  ({ children, className, inset, ...props }, ref) => (
+  ({ children, className, inset, ...props }, forwardedRef) => (
     <MenubarPrimitive.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',
@@ -107,10 +109,10 @@ type MenubarSubContentElement = React.ElementRef<typeof MenubarPrimitive.SubCont
 type MenubarSubContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>;
 
 const MenubarSubContent = React.forwardRef<MenubarSubContentElement, MenubarSubContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.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=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
           className,
@@ -131,10 +133,10 @@ type MenubarContentElement = React.ElementRef<typeof MenubarPrimitive.Content>;
 type MenubarContentProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>;
 
 const MenubarContent = React.forwardRef<MenubarContentElement, MenubarContentProps>(
-  ({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  ({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, forwardedRef) => (
     <MenubarPrimitive.Portal>
       <MenubarPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         align={align}
         alignOffset={alignOffset}
         className={cn(
@@ -160,17 +162,19 @@ interface MenubarItemProps extends React.ComponentPropsWithoutRef<typeof Menubar
   inset?: boolean;
 }
 
-const MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    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',
-      className,
-    )}
-    {...props}
-  />
-));
+const MenubarItem = React.forwardRef<MenubarItemElement, MenubarItemProps>(
+  ({ className, inset, ...props }, forwardedRef) => (
+    <MenubarPrimitive.Item
+      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',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
@@ -182,9 +186,9 @@ type MenubarCheckboxItemElement = React.ElementRef<typeof MenubarPrimitive.Check
 type MenubarCheckboxItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>;
 
 const MenubarCheckboxItem = React.forwardRef<MenubarCheckboxItemElement, MenubarCheckboxItemProps>(
-  ({ children, className, checked, ...props }, ref) => (
+  ({ children, className, checked, ...props }, forwardedRef) => (
     <MenubarPrimitive.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',
@@ -212,9 +216,9 @@ type MenubarRadioItemElement = React.ElementRef<typeof MenubarPrimitive.RadioIte
 type MenubarRadioItemProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>;
 
 const MenubarRadioItem = React.forwardRef<MenubarRadioItemElement, MenubarRadioItemProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <MenubarPrimitive.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,
@@ -243,13 +247,15 @@ interface MenubarLabelProps extends React.ComponentPropsWithoutRef<typeof Menuba
   inset?: boolean;
 }
 
-const MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
-    {...props}
-  />
-));
+const MenubarLabel = React.forwardRef<MenubarLabelElement, MenubarLabelProps>(
+  ({ className, inset, ...props }, forwardedRef) => (
+    <MenubarPrimitive.Label
+      ref={forwardedRef}
+      className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      {...props}
+    />
+  ),
+);
 
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
@@ -261,8 +267,8 @@ type MenubarSeparatorElement = React.ElementRef<typeof MenubarPrimitive.Separato
 type MenubarSeparatorProps = React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>;
 
 const MenubarSeparator = React.forwardRef<MenubarSeparatorElement, MenubarSeparatorProps>(
-  ({ className, ...props }, ref) => (
-    <MenubarPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <MenubarPrimitive.Separator ref={forwardedRef} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
   ),
 );
 

package/src/react/navigation-menu.tsx

@@ -22,9 +22,9 @@ type NavigationMenuElement = React.ElementRef<typeof NavigationMenuPrimitive.Roo
 type NavigationMenuProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>;
 
 const NavigationMenu = React.forwardRef<NavigationMenuElement, NavigationMenuProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <NavigationMenuPrimitive.Root
-      ref={ref}
+      ref={forwardedRef}
       className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
       {...props}
     >
@@ -44,9 +44,9 @@ type NavigationMenuListElement = React.ElementRef<typeof NavigationMenuPrimitive
 type NavigationMenuListProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>;
 
 const NavigationMenuList = React.forwardRef<NavigationMenuListElement, NavigationMenuListProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <NavigationMenuPrimitive.List
-      ref={ref}
+      ref={forwardedRef}
       className={cn('group flex flex-1 list-none items-center justify-center space-x-1', className)}
       {...props}
     >
@@ -74,9 +74,9 @@ type NavigationMenuTriggerElement = React.ElementRef<typeof NavigationMenuPrimit
 type NavigationMenuTriggerProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>;
 
 const NavigationMenuTrigger = React.forwardRef<NavigationMenuTriggerElement, NavigationMenuTriggerProps>(
-  ({ children, className, ...props }, ref) => (
+  ({ children, className, ...props }, forwardedRef) => (
     <NavigationMenuPrimitive.Trigger
-      ref={ref}
+      ref={forwardedRef}
       className={navigationMenuTriggerVariants({
         className: ['group', className],
       })}
@@ -101,9 +101,9 @@ type NavigationMenuContentElement = React.ElementRef<typeof NavigationMenuPrimit
 type NavigationMenuContentProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>;
 
 const NavigationMenuContent = React.forwardRef<NavigationMenuContentElement, NavigationMenuContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <NavigationMenuPrimitive.Content
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto',
         className,
@@ -131,10 +131,10 @@ type NavigationMenuViewportElement = React.ElementRef<typeof NavigationMenuPrimi
 type NavigationMenuViewportProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>;
 
 const NavigationMenuViewport = React.forwardRef<NavigationMenuViewportElement, NavigationMenuViewportProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <div className="perspective-[125rem] absolute left-0 top-full flex justify-center">
       <NavigationMenuPrimitive.Viewport
-        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-90 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border transition-[width,height] sm:w-[var(--radix-navigation-menu-viewport-width)]',
           className,
@@ -155,9 +155,9 @@ type NavigationMenuIndicatorElement = React.ElementRef<typeof NavigationMenuPrim
 type NavigationMenuIndicatorProps = React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>;
 
 const NavigationMenuIndicator = React.forwardRef<NavigationMenuIndicatorElement, NavigationMenuIndicatorProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <NavigationMenuPrimitive.Indicator
-      ref={ref}
+      ref={forwardedRef}
       className={cn(
         'data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out top-full z-10 flex h-1.5 items-center justify-center overflow-hidden transition',
         className,

package/src/react/pagination.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
 import { cn } from '../lib/utils';
-import { buttonVariants, type ButtonProps } from './button';
+import { type ButtonProps, buttonVariants } from './button';
 
 /* -----------------------------------------------------------------------------
  * Component: Pagination
@@ -28,8 +28,8 @@ type PaginationContentElement = HTMLUListElement;
 type PaginationContentProps = React.HTMLAttributes<HTMLUListElement>;
 
 const PaginationContent = React.forwardRef<PaginationContentElement, PaginationContentProps>(
-  ({ className, ...props }, ref) => (
-    <ul ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <ul ref={forwardedRef} className={cn('flex flex-row items-center gap-1', className)} {...props} />
   ),
 );
 
@@ -42,8 +42,8 @@ PaginationContent.displayName = 'PaginationContent';
 type PaginationItemElement = HTMLLIElement;
 type PaginationItemProps = React.LiHTMLAttributes<HTMLLIElement>;
 
-const PaginationItem = React.forwardRef<PaginationItemElement, PaginationItemProps>((props, ref) => (
-  <li ref={ref} {...props} />
+const PaginationItem = React.forwardRef<PaginationItemElement, PaginationItemProps>((props, forwardedRef) => (
+  <li ref={forwardedRef} {...props} />
 ));
 
 PaginationItem.displayName = 'PaginationItem';

package/src/react/popover.tsx

@@ -33,10 +33,10 @@ type PopoverContentElement = React.ElementRef<typeof PopoverPrimitive.Content>;
 type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>;
 
 const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentProps>(
-  ({ className, align = 'center', sideOffset = 6, ...props }, ref) => (
+  ({ className, align = 'center', sideOffset = 6, ...props }, forwardedRef) => (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
-        ref={ref}
+        ref={forwardedRef}
         align={align}
         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=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
@@ -58,9 +58,11 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 type PopoverArrowElement = React.ElementRef<typeof PopoverPrimitive.Arrow>;
 type PopoverArrowProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>;
 
-const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(({ className, ...props }, ref) => (
-  <PopoverPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
-));
+const PopoverArrow = React.forwardRef<PopoverArrowElement, PopoverArrowProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <PopoverPrimitive.Arrow ref={forwardedRef} className={cn('fill-popover', className)} {...props} />
+  ),
+);
 
 PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
 

package/src/react/pre.tsx

@@ -11,10 +11,10 @@ interface PreProps extends React.HTMLAttributes<HTMLPreElement> {
   asChild?: boolean;
 }
 
-const Pre = React.forwardRef<PreElement, PreProps>(({ asChild, ...props }, ref) => {
+const Pre = React.forwardRef<PreElement, PreProps>(({ asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'pre';
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Pre.displayName = 'Pre';