@codefast/ui 0.0.65 → 0.0.66

package/src/react/avatar.tsx

@@ -11,9 +11,9 @@ import { cn } from '../lib/utils';
 type AvatarElement = React.ElementRef<typeof AvatarPrimitive.Root>;
 type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
 
-const Avatar = React.forwardRef<AvatarElement, AvatarProps>(({ className, ...props }, ref) => (
+const Avatar = React.forwardRef<AvatarElement, AvatarProps>(({ className, ...props }, forwardedRef) => (
   <AvatarPrimitive.Root
-    ref={ref}
+    ref={forwardedRef}
     className={cn('relative flex size-10 shrink-0 overflow-hidden rounded-full', className)}
     {...props}
   />
@@ -28,8 +28,8 @@ Avatar.displayName = AvatarPrimitive.Root.displayName;
 type AvatarImageElement = React.ElementRef<typeof AvatarPrimitive.Image>;
 type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
 
-const AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square size-full', className)} {...props} />
+const AvatarImage = React.forwardRef<AvatarImageElement, AvatarImageProps>(({ className, ...props }, forwardedRef) => (
+  <AvatarPrimitive.Image ref={forwardedRef} className={cn('aspect-square size-full', className)} {...props} />
 ));
 
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
@@ -41,13 +41,15 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 type AvatarFallbackElement = React.ElementRef<typeof AvatarPrimitive.Fallback>;
 type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
 
-const AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-    {...props}
-  />
-));
+const AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <AvatarPrimitive.Fallback
+      ref={forwardedRef}
+      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
+      {...props}
+    />
+  ),
+);
 
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 

package/src/react/blockquote.tsx

@@ -11,10 +11,10 @@ interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuoteElemen
   asChild?: boolean;
 }
 
-const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>(({ asChild, ...props }, ref) => {
+const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>(({ asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : 'blockquote';
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Blockquote.displayName = 'Blockquote';

package/src/react/box.tsx

@@ -19,10 +19,10 @@ type BoxProps = (BoxDivProps | BoxSpanProps) & {
   asChild?: boolean;
 };
 
-const Box = React.forwardRef<BoxElement, BoxProps>(({ as: Tag = 'div', asChild, ...props }, ref) => {
+const Box = React.forwardRef<BoxElement, BoxProps>(({ as: Tag = 'div', asChild, ...props }, forwardedRef) => {
   const Component = asChild ? Slot : Tag;
 
-  return <Component ref={ref} {...props} />;
+  return <Component ref={forwardedRef} {...props} />;
 });
 
 Box.displayName = 'Box';

package/src/react/breadcrumb.tsx

@@ -13,8 +13,8 @@ interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   separator?: React.ReactNode;
 }
 
-const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, ref) => (
-  <nav ref={ref} aria-label="breadcrumb" {...props} />
+const Breadcrumb = React.forwardRef<BreadcrumbElement, BreadcrumbProps>(({ ...props }, forwardedRef) => (
+  <nav ref={forwardedRef} aria-label="breadcrumb" {...props} />
 ));
 
 Breadcrumb.displayName = 'Breadcrumb';
@@ -26,16 +26,18 @@ Breadcrumb.displayName = 'Breadcrumb';
 type BreadcrumbListElement = HTMLOListElement;
 type BreadcrumbListProps = React.OlHTMLAttributes<HTMLOListElement>;
 
-const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListProps>(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
-      className,
-    )}
-    {...props}
-  />
-));
+const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <ol
+      ref={forwardedRef}
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 BreadcrumbList.displayName = 'BreadcrumbList';
 
@@ -46,9 +48,11 @@ BreadcrumbList.displayName = 'BreadcrumbList';
 type BreadcrumbItemElement = HTMLLIElement;
 type BreadcrumbItemProps = React.LiHTMLAttributes<HTMLLIElement>;
 
-const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, BreadcrumbItemProps>(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
-));
+const BreadcrumbItem = React.forwardRef<BreadcrumbItemElement, BreadcrumbItemProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <li ref={forwardedRef} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
+  ),
+);
 
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 
@@ -63,10 +67,10 @@ interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorEleme
 }
 
 const BreadcrumbLink = React.forwardRef<BreadcrumbLinkElement, BreadcrumbLinkProps>(
-  ({ asChild, className, ...props }, ref) => {
+  ({ asChild, className, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : 'a';
 
-    return <Component ref={ref} className={cn('hover:text-foreground transition', className)} {...props} />;
+    return <Component ref={forwardedRef} className={cn('hover:text-foreground transition', className)} {...props} />;
   },
 );
 
@@ -79,16 +83,18 @@ BreadcrumbLink.displayName = 'BreadcrumbLink';
 type BreadcrumbPageElement = HTMLSpanElement;
 type BreadcrumbPageProps = React.HTMLAttributes<HTMLSpanElement>;
 
-const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    aria-current="page"
-    aria-disabled="true"
-    className={cn('text-foreground font-normal', className)}
-    role="link"
-    {...props}
-  />
-));
+const BreadcrumbPage = React.forwardRef<BreadcrumbPageElement, BreadcrumbPageProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <span
+      ref={forwardedRef}
+      aria-current="page"
+      aria-disabled="true"
+      className={cn('text-foreground font-normal', className)}
+      role="link"
+      {...props}
+    />
+  ),
+);
 
 BreadcrumbPage.displayName = 'BreadcrumbPage';
 

package/src/react/button.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Fragment } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { tv, type VariantProps } from 'tailwind-variants';
@@ -55,14 +54,14 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, But
 }
 
 const Button = React.forwardRef<ButtonElement, ButtonProps>(
-  ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {
+  ({ children, className, variant, size, loading = false, asChild = false, ...props }, forwardedRef) => {
     const Component = asChild ? Slot : 'button';
-    const ComponentLoading = asChild ? 'span' : Fragment;
+    const ComponentLoading = asChild ? 'span' : React.Fragment;
     const disabled = loading || props.disabled;
 
     return (
       <Component
-        ref={ref}
+        ref={forwardedRef}
         className={buttonVariants({ variant, size, loading, className })}
         type={asChild ? undefined : 'button'}
         {...props}

package/src/react/card.tsx

@@ -8,8 +8,12 @@ import { cn } from '../lib/utils';
 type CardElement = HTMLDivElement;
 type CardProps = React.HTMLAttributes<HTMLDivElement>;
 
-const Card = React.forwardRef<CardElement, CardProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)} {...props} />
+const Card = React.forwardRef<CardElement, CardProps>(({ className, ...props }, forwardedRef) => (
+  <div
+    ref={forwardedRef}
+    className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)}
+    {...props}
+  />
 ));
 
 Card.displayName = 'Card';
@@ -21,8 +25,8 @@ Card.displayName = 'Card';
 type CardHeaderElement = HTMLDivElement;
 type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CardHeader = React.forwardRef<CardHeaderElement, CardHeaderProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+const CardHeader = React.forwardRef<CardHeaderElement, CardHeaderProps>(({ className, ...props }, forwardedRef) => (
+  <div ref={forwardedRef} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
 ));
 
 CardHeader.displayName = 'CardHeader';
@@ -34,11 +38,13 @@ CardHeader.displayName = 'CardHeader';
 type CardTitleElement = HTMLParagraphElement;
 type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
-const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(({ children, className, ...props }, ref) => (
-  <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
-    {children}
-  </h3>
-));
+const CardTitle = React.forwardRef<CardTitleElement, CardTitleProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <h3 ref={forwardedRef} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
+      {children}
+    </h3>
+  ),
+);
 
 CardTitle.displayName = 'CardTitle';
 
@@ -50,8 +56,8 @@ type CardDescriptionElement = HTMLParagraphElement;
 type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
 
 const CardDescription = React.forwardRef<CardDescriptionElement, CardDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <p ref={forwardedRef} className={cn('text-muted-foreground text-sm', className)} {...props} />
   ),
 );
 
@@ -64,8 +70,8 @@ CardDescription.displayName = 'CardDescription';
 type CardContentElement = HTMLDivElement;
 type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CardContent = React.forwardRef<CardContentElement, CardContentProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+const CardContent = React.forwardRef<CardContentElement, CardContentProps>(({ className, ...props }, forwardedRef) => (
+  <div ref={forwardedRef} className={cn('p-6 pt-0', className)} {...props} />
 ));
 
 CardContent.displayName = 'CardContent';
@@ -77,8 +83,8 @@ CardContent.displayName = 'CardContent';
 type CardFooterElement = HTMLDivElement;
 type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
-const CardFooter = React.forwardRef<CardFooterElement, CardFooterProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+const CardFooter = React.forwardRef<CardFooterElement, CardFooterProps>(({ className, ...props }, forwardedRef) => (
+  <div ref={forwardedRef} className={cn('flex items-center p-6 pt-0', className)} {...props} />
 ));
 
 CardFooter.displayName = 'CardFooter';

package/src/react/carousel.tsx

@@ -50,7 +50,7 @@ type CarouselProps = React.HTMLAttributes<HTMLDivElement> & BaseCarouselProps;
 const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
   (
     { __scopeCarousel, children, orientation, opts, setApi, plugins, className, ...props }: ScopedProps<CarouselProps>,
-    ref,
+    forwardedRef,
   ) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
@@ -128,7 +128,7 @@ const Carousel = React.forwardRef<CarouselElement, CarouselProps>(
         scrollPrev={scrollPrev}
       >
         <div
-          ref={ref}
+          ref={forwardedRef}
           aria-roledescription="carousel"
           className={cn('relative', className)}
           role="region"
@@ -154,13 +154,13 @@ type CarouselContentElement = HTMLDivElement;
 type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CarouselContent = React.forwardRef<CarouselContentElement, CarouselContentProps>(
-  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, ref) => {
+  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselContentProps>, forwardedRef) => {
     const { carouselRef, orientation } = useCarouselContext(CAROUSEL_CONTENT_NAME, __scopeCarousel);
 
     return (
       <div ref={carouselRef} className="overflow-hidden">
         <div
-          ref={ref}
+          ref={forwardedRef}
           className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
           {...props}
         />
@@ -181,12 +181,12 @@ type CarouselItemElement = HTMLDivElement;
 type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CarouselItem = React.forwardRef<CarouselItemElement, CarouselItemProps>(
-  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, ref) => {
+  ({ __scopeCarousel, className, ...props }: ScopedProps<CarouselItemProps>, forwardedRef) => {
     const { orientation } = useCarouselContext(CAROUSEL_ITEM_NAME, __scopeCarousel);
 
     return (
       <div
-        ref={ref}
+        ref={forwardedRef}
         aria-roledescription="slide"
         className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
         role="group"
@@ -210,13 +210,13 @@ type CarouselPreviousProps = ButtonProps;
 const CarouselPrevious = React.forwardRef<CarouselPreviousElement, CarouselPreviousProps>(
   (
     { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselPreviousProps>,
-    ref,
+    forwardedRef,
   ) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarouselContext(CAROUSEL_PREVIOUS_NAME, __scopeCarousel);
 
     return (
       <Button
-        ref={ref}
+        ref={forwardedRef}
         className={cn(
           'absolute size-8 rounded-full',
           orientation === 'horizontal'
@@ -251,13 +251,13 @@ type CarouselNextProps = ButtonProps;
 const CarouselNext = React.forwardRef<CarouselNextElement, CarouselNextProps>(
   (
     { __scopeCarousel, className, variant = 'outline', size = 'icon', ...props }: ScopedProps<CarouselNextProps>,
-    ref,
+    forwardedRef,
   ) => {
     const { orientation, scrollNext, canScrollNext } = useCarouselContext(CAROUSEL_NEXT_NAME, __scopeCarousel);
 
     return (
       <Button
-        ref={ref}
+        ref={forwardedRef}
         className={cn(
           'absolute size-8 rounded-full',
           orientation === 'horizontal'

package/src/react/checkbox-cards.tsx

@@ -12,9 +12,11 @@ import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
 type CheckboxCardsElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
 type CheckboxCardsProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
 
-const CheckboxCards = React.forwardRef<CheckboxCardsElement, CheckboxCardsProps>(({ className, ...props }, ref) => {
-  return <CheckboxGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
-});
+const CheckboxCards = React.forwardRef<CheckboxCardsElement, CheckboxCardsProps>(
+  ({ className, ...props }, forwardedRef) => {
+    return <CheckboxGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={forwardedRef} />;
+  },
+);
 
 CheckboxCards.displayName = CheckboxGroupPrimitive.Root.displayName;
 
@@ -29,14 +31,14 @@ interface CheckboxCardsItemProps extends React.ComponentPropsWithoutRef<typeof C
 }
 
 const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCardsItemProps>(
-  ({ children, className, checkboxClassName, ...props }, ref) => {
+  ({ children, className, checkboxClassName, ...props }, forwardedRef) => {
     return (
       <label className={cn('flex items-center justify-center gap-4 rounded-md border p-4', className)}>
         {children}
         <CheckboxGroupPrimitive.Item
-          ref={ref}
+          ref={forwardedRef}
           className={cn(
-            'border-input aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer 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 aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 cursor-pointer rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default disabled:opacity-50',
             checkboxClassName,
           )}
           {...props}

package/src/react/checkbox-group.primitive.tsx

@@ -65,7 +65,7 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
       onValueChange,
       ...props
     }: ScopedProps<CheckboxGroupProps>,
-    ref,
+    forwardedRef,
   ) => {
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
     const direction = useDirection(dir);
@@ -101,7 +101,13 @@ const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>
       >
         <RovingFocusGroup.Root asChild {...rovingFocusGroupScope} dir={direction} loop={loop} orientation={orientation}>
           {/* eslint-disable-next-line react/jsx-pascal-case -- radix-ui */}
-          <Primitive.div ref={ref} data-disabled={disabled ? '' : undefined} dir={direction} role="group" {...props} />
+          <Primitive.div
+            ref={forwardedRef}
+            data-disabled={disabled ? '' : undefined}
+            dir={direction}
+            role="group"
+            {...props}
+          />
         </RovingFocusGroup.Root>
       </CheckboxGroupProvider>
     );
@@ -127,7 +133,7 @@ interface CheckboxGroupItemProps
 }
 
 const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
-  ({ __scopeCheckboxGroup, disabled, ...props }: ScopedProps<CheckboxGroupItemProps>, ref) => {
+  ({ __scopeCheckboxGroup, disabled, ...props }: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {
     const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
     const isDisabled = context.disabled || disabled;
     const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
@@ -137,7 +143,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
     return (
       <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} active={checked} focusable={!isDisabled}>
         <CheckboxPrimitive.Root
-          ref={ref}
+          ref={forwardedRef}
           checked={checked}
           disabled={isDisabled}
           name={context.name}
@@ -169,10 +175,10 @@ type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.I
 type CheckboxGroupIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
 
 const CheckboxGroupIndicator = React.forwardRef<CheckboxGroupIndicatorElement, CheckboxGroupIndicatorProps>(
-  ({ __scopeCheckboxGroup, ...props }: ScopedProps<CheckboxGroupIndicatorProps>, ref) => {
+  ({ __scopeCheckboxGroup, ...props }: ScopedProps<CheckboxGroupIndicatorProps>, forwardedRef) => {
     const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
 
-    return <CheckboxPrimitive.Indicator ref={ref} {...checkboxScope} {...props} />;
+    return <CheckboxPrimitive.Indicator ref={forwardedRef} {...checkboxScope} {...props} />;
   },
 );
 

package/src/react/checkbox-group.tsx

@@ -12,9 +12,11 @@ import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
 type CheckboxGroupElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
 type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
 
-const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(({ className, ...props }, ref) => {
-  return <CheckboxGroupPrimitive.Root ref={ref} className={cn('grid gap-2', className)} {...props} />;
-});
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
+  ({ className, ...props }, forwardedRef) => {
+    return <CheckboxGroupPrimitive.Root ref={forwardedRef} className={cn('grid gap-2', className)} {...props} />;
+  },
+);
 
 CheckboxGroup.displayName = 'CheckboxGroup';
 
@@ -26,10 +28,10 @@ type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.I
 type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item>;
 
 const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, ...props }, forwardedRef) => {
     return (
       <CheckboxGroupPrimitive.Item
-        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:pointer-events-none disabled:opacity-50',
           className,

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,