@codefast/ui 0.0.64 → 0.0.66

package/src/react/alert-dialog.tsx

@@ -27,17 +27,18 @@ type AlertDialogContentElement = React.ElementRef<typeof AlertDialogPrimitive.Co
 type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>;
 
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  ({ className, ...props }, ref) => (
+  ({ className, ...props }, forwardedRef) => (
     <AlertDialogPrimitive.Portal>
-      <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
-      <AlertDialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          'bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-          className,
-        )}
-        {...props}
-      />
+      <AlertDialogPrimitive.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">
+        <AlertDialogPrimitive.Content
+          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 flex-col rounded-lg border shadow-lg',
+            className,
+          )}
+          {...props}
+        />
+      </AlertDialogPrimitive.Overlay>
     </AlertDialogPrimitive.Portal>
   ),
 );
@@ -51,7 +52,22 @@ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 type AlertDialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): React.JSX.Element {
-  return <div className={cn('flex flex-col space-y-2 text-center', 'sm:text-left', className)} {...props} />;
+  return (
+    <div
+      className={cn('flex shrink-0 flex-col gap-1.5 px-6 pb-4 pt-6 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: DialogBody
+ * -------------------------------------------------------------------------- */
+
+type AlertDialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
+
+function AlertDialogBody({ className, ...props }: AlertDialogBodyProps): React.JSX.Element {
+  return <main className={cn('overflow-auto px-6 py-2', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -61,7 +77,12 @@ function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): Rea
 type AlertDialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
 function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): React.JSX.Element {
-  return <div className={cn('flex flex-col-reverse gap-2', 'sm:flex-row sm:justify-end', className)} {...props} />;
+  return (
+    <div
+      className={cn('flex shrink-0 flex-col-reverse gap-2 px-6 pb-6 pt-4 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  );
 }
 
 /* -----------------------------------------------------------------------------
@@ -72,8 +93,12 @@ type AlertDialogTitleElement = React.ElementRef<typeof AlertDialogPrimitive.Titl
 type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
 
 const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTitleProps>(
-  ({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Title
+      ref={forwardedRef}
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
   ),
 );
 
@@ -87,8 +112,12 @@ type AlertDialogDescriptionElement = React.ElementRef<typeof AlertDialogPrimitiv
 type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
 
 const AlertDialogDescription = React.forwardRef<AlertDialogDescriptionElement, AlertDialogDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Description
+      ref={forwardedRef}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
   ),
 );
 
@@ -102,8 +131,8 @@ type AlertDialogActionElement = React.ElementRef<typeof AlertDialogPrimitive.Act
 type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
 
 const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialogActionProps>(
-  ({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Action ref={ref} className={buttonVariants({ className })} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Action ref={forwardedRef} className={buttonVariants({ className })} {...props} />
   ),
 );
 
@@ -117,8 +146,12 @@ type AlertDialogCancelElement = React.ElementRef<typeof AlertDialogPrimitive.Can
 type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
 
 const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialogCancelProps>(
-  ({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Cancel ref={ref} className={buttonVariants({ variant: 'outline', className })} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <AlertDialogPrimitive.Cancel
+      ref={forwardedRef}
+      className={buttonVariants({ variant: 'outline', className })}
+      {...props}
+    />
   ),
 );
 
@@ -133,6 +166,7 @@ export {
   AlertDialogTrigger,
   AlertDialogContent,
   AlertDialogHeader,
+  AlertDialogBody,
   AlertDialogFooter,
   AlertDialogTitle,
   AlertDialogDescription,
@@ -142,6 +176,7 @@ export {
   type AlertDialogTriggerProps,
   type AlertDialogContentProps,
   type AlertDialogHeaderProps,
+  type AlertDialogBodyProps,
   type AlertDialogFooterProps,
   type AlertDialogTitleProps,
   type AlertDialogDescriptionProps,

package/src/react/alert.tsx

@@ -28,8 +28,8 @@ type AlertVariantsProps = VariantProps<typeof alertVariants>;
 type AlertElement = HTMLDivElement;
 type AlertProps = React.HTMLAttributes<HTMLDivElement> & AlertVariantsProps;
 
-const Alert = React.forwardRef<AlertElement, AlertProps>(({ className, variant, ...props }, ref) => (
-  <div ref={ref} className={alertVariants({ variant, className })} role="alert" {...props} />
+const Alert = React.forwardRef<AlertElement, AlertProps>(({ className, variant, ...props }, forwardedRef) => (
+  <div ref={forwardedRef} className={alertVariants({ variant, className })} role="alert" {...props} />
 ));
 
 Alert.displayName = 'Alert';
@@ -41,11 +41,13 @@ Alert.displayName = 'Alert';
 type AlertTitleElement = HTMLHeadingElement;
 type AlertTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
 
-const AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>(({ children, className, ...props }, ref) => (
-  <h5 ref={ref} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props}>
-    {children}
-  </h5>
-));
+const AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>(
+  ({ children, className, ...props }, forwardedRef) => (
+    <h5 ref={forwardedRef} className={cn('mb-1 font-medium leading-none tracking-tight', className)} {...props}>
+      {children}
+    </h5>
+  ),
+);
 
 AlertTitle.displayName = 'AlertTitle';
 
@@ -57,8 +59,8 @@ type AlertDescriptionElement = HTMLDivElement;
 type AlertDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
 
 const AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+  ({ className, ...props }, forwardedRef) => (
+    <div ref={forwardedRef} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
   ),
 );
 

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('transition', 'hover:text-foreground', 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,