@react-native-reusables/cli 0.4.0 → 0.4.1

package/__generated/components/ui/menubar.tsx

@@ -18,46 +18,55 @@ const MenubarSub = MenubarPrimitive.Sub;
 
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
-const Menubar = React.forwardRef<MenubarPrimitive.RootRef, MenubarPrimitive.RootProps>(
-  ({ className, ...props }, ref) => (
+function Menubar({
+  className,
+  ...props
+}: MenubarPrimitive.RootProps & {
+  ref?: React.RefObject<MenubarPrimitive.RootRef>;
+}) {
+  return (
     <MenubarPrimitive.Root
-      ref={ref}
       className={cn(
         'flex flex-row h-10 native:h-12 items-center space-x-1 rounded-md border border-border bg-background p-1',
         className
       )}
       {...props}
     />
-  )
-);
-Menubar.displayName = MenubarPrimitive.Root.displayName;
+  );
+}
 
-const MenubarTrigger = React.forwardRef<MenubarPrimitive.TriggerRef, MenubarPrimitive.TriggerProps>(
-  ({ className, ...props }, ref) => {
-    const { value } = MenubarPrimitive.useRootContext();
-    const { value: itemValue } = MenubarPrimitive.useMenuContext();
+function MenubarTrigger({
+  className,
+  ...props
+}: MenubarPrimitive.TriggerProps & {
+  ref?: React.RefObject<MenubarPrimitive.TriggerRef>;
+}) {
+  const { value } = MenubarPrimitive.useRootContext();
+  const { value: itemValue } = MenubarPrimitive.useMenuContext();
 
-    return (
-      <MenubarPrimitive.Trigger
-        ref={ref}
-        className={cn(
-          'flex flex-row web:cursor-default web:select-none items-center rounded-sm px-3 py-1.5 text-sm native:h-10 native:px-5 native:py-0 font-medium web:outline-none web:focus:bg-accent active:bg-accent web:focus:text-accent-foreground',
-          value === itemValue && 'bg-accent text-accent-foreground',
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-);
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+  return (
+    <MenubarPrimitive.Trigger
+      className={cn(
+        'flex flex-row web:cursor-default web:select-none items-center rounded-sm px-3 py-1.5 text-sm native:h-10 native:px-5 native:py-0 font-medium web:outline-none web:focus:bg-accent active:bg-accent web:focus:text-accent-foreground',
+        value === itemValue && 'bg-accent text-accent-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
 
-const MenubarSubTrigger = React.forwardRef<
-  MenubarPrimitive.SubTriggerRef,
-  MenubarPrimitive.SubTriggerProps & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => {
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenubarPrimitive.SubTriggerProps & {
+  ref?: React.RefObject<MenubarPrimitive.SubTriggerRef>;
+  className?: string;
+  inset?: boolean;
+  children?: React.ReactNode;
+}) {
   const { open } = MenubarPrimitive.useSubContext();
   const Icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
   return (
@@ -68,7 +77,6 @@ const MenubarSubTrigger = React.forwardRef<
       )}
     >
       <MenubarPrimitive.SubTrigger
-        ref={ref}
         className={cn(
           'flex flex-row web:cursor-default web:select-none items-center gap-2 web:focus:bg-accent active:bg-accent web:hover:bg-accent rounded-sm px-2 py-1.5 native:py-2 web:outline-none',
           open && 'bg-accent',
@@ -77,22 +85,22 @@ const MenubarSubTrigger = React.forwardRef<
         )}
         {...props}
       >
-        <>{children}</>
+        {children}
         <Icon size={18} className='ml-auto text-foreground' />
       </MenubarPrimitive.SubTrigger>
     </TextClassContext.Provider>
   );
-});
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+}
 
-const MenubarSubContent = React.forwardRef<
-  MenubarPrimitive.SubContentRef,
-  MenubarPrimitive.SubContentProps
->(({ className, ...props }, ref) => {
+function MenubarSubContent({
+  className,
+  ...props
+}: MenubarPrimitive.SubContentProps & {
+  ref?: React.RefObject<MenubarPrimitive.SubContentRef>;
+}) {
   const { open } = MenubarPrimitive.useSubContext();
   return (
     <MenubarPrimitive.SubContent
-      ref={ref}
       className={cn(
         'z-50 min-w-[8rem] overflow-hidden rounded-md border mt-1 border-border bg-popover p-1 shadow-md shadow-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         open
@@ -103,19 +111,22 @@ const MenubarSubContent = React.forwardRef<
       {...props}
     />
   );
-});
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+}
 
-const MenubarContent = React.forwardRef<
-  MenubarPrimitive.ContentRef,
-  MenubarPrimitive.ContentProps & { portalHost?: string }
->(({ className, portalHost, ...props }, ref) => {
+function MenubarContent({
+  className,
+  portalHost,
+  ...props
+}: MenubarPrimitive.ContentProps & {
+  ref?: React.RefObject<MenubarPrimitive.ContentRef>;
+  className?: string;
+  portalHost?: string;
+}) {
   const { value } = MenubarPrimitive.useRootContext();
   const { value: itemValue } = MenubarPrimitive.useMenuContext();
   return (
     <MenubarPrimitive.Portal hostName={portalHost}>
       <MenubarPrimitive.Content
-        ref={ref}
         className={cn(
           'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 shadow-md shadow-foreground/5',
           value === itemValue
@@ -127,108 +138,121 @@ const MenubarContent = React.forwardRef<
       />
     </MenubarPrimitive.Portal>
   );
-});
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+}
+
+function MenubarItem({
+  className,
+  inset,
+  ...props
+}: MenubarPrimitive.ItemProps & {
+  ref?: React.RefObject<MenubarPrimitive.ItemRef>;
+  className?: string;
+  inset?: boolean;
+}) {
+  return (
+    <TextClassContext.Provider value='select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground'>
+      <MenubarPrimitive.Item
+        className={cn(
+          'relative flex flex-row web:cursor-default items-center gap-2 rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group',
+          inset && 'pl-8',
+          props.disabled && 'opacity-50 web:pointer-events-none',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
 
-const MenubarItem = React.forwardRef<
-  MenubarPrimitive.ItemRef,
-  MenubarPrimitive.ItemProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <TextClassContext.Provider value='select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground'>
-    <MenubarPrimitive.Item
-      ref={ref}
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: MenubarPrimitive.CheckboxItemProps & {
+  ref?: React.RefObject<MenubarPrimitive.CheckboxItemRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
       className={cn(
-        'relative flex flex-row web:cursor-default items-center gap-2 rounded-sm px-2 py-1.5 native:py-2 web:outline-none web:focus:bg-accent active:bg-accent web:hover:bg-accent group',
-        inset && 'pl-8',
-        props.disabled && 'opacity-50 web:pointer-events-none',
+        'relative flex flex-row web:cursor-default items-center web:group rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
+        props.disabled && 'web:pointer-events-none opacity-50',
         className
       )}
+      checked={checked}
       {...props}
-    />
-  </TextClassContext.Provider>
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-
-const MenubarCheckboxItem = React.forwardRef<
-  MenubarPrimitive.CheckboxItemRef,
-  MenubarPrimitive.CheckboxItemProps
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'relative flex flex-row web:cursor-default items-center web:group rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
-      props.disabled && 'web:pointer-events-none opacity-50',
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
-      <MenubarPrimitive.ItemIndicator>
-        <Check size={14} strokeWidth={3} className='text-foreground' />
-      </MenubarPrimitive.ItemIndicator>
-    </View>
-    <>{children}</>
-  </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+    >
+      <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <MenubarPrimitive.ItemIndicator>
+          <Check size={14} strokeWidth={3} className='text-foreground' />
+        </MenubarPrimitive.ItemIndicator>
+      </View>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  );
+}
 
-const MenubarRadioItem = React.forwardRef<
-  MenubarPrimitive.RadioItemRef,
-  MenubarPrimitive.RadioItemProps
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'relative flex flex-row web:cursor-default web:group items-center rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
-      props.disabled && 'web:pointer-events-none opacity-50',
-      className
-    )}
-    {...props}
-  >
-    <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
-      <MenubarPrimitive.ItemIndicator>
-        <View className='bg-foreground h-2 w-2 rounded-full' />
-      </MenubarPrimitive.ItemIndicator>
-    </View>
-    <>{children}</>
-  </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+function MenubarRadioItem({
+  className,
+  children,
+  ...props
+}: MenubarPrimitive.RadioItemProps & {
+  ref?: React.RefObject<MenubarPrimitive.RadioItemRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      className={cn(
+        'relative flex flex-row web:cursor-default web:group items-center rounded-sm py-1.5 native:py-2 pl-8 pr-2 web:outline-none web:focus:bg-accent active:bg-accent',
+        props.disabled && 'web:pointer-events-none opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <View className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
+        <MenubarPrimitive.ItemIndicator>
+          <View className='bg-foreground h-2 w-2 rounded-full' />
+        </MenubarPrimitive.ItemIndicator>
+      </View>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  );
+}
 
-const MenubarLabel = React.forwardRef<
-  MenubarPrimitive.LabelRef,
-  MenubarPrimitive.LabelProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      'px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default',
-      inset && 'pl-8',
-      className
-    )}
-    {...props}
-  />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: MenubarPrimitive.LabelProps & {
+  ref?: React.RefObject<MenubarPrimitive.LabelRef>;
+  className?: string;
+  inset?: boolean;
+}) {
+  return (
+    <MenubarPrimitive.Label
+      className={cn(
+        'px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default',
+        inset && 'pl-8',
+        className
+      )}
+      {...props}
+    />
+  );
+}
 
-const MenubarSeparator = React.forwardRef<
-  MenubarPrimitive.SeparatorRef,
-  MenubarPrimitive.SeparatorProps
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-border', className)}
-    {...props}
-  />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+function MenubarSeparator({
+  className,
+  ...props
+}: MenubarPrimitive.SeparatorProps & {
+  ref?: React.RefObject<MenubarPrimitive.SeparatorRef>;
+}) {
+  return (
+    <MenubarPrimitive.Separator className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />
+  );
+}
 
-const MenubarShortcut = ({ className, ...props }: TextProps) => {
+function MenubarShortcut({ className, ...props }: TextProps) {
   return (
     <Text
       className={cn(
@@ -238,8 +262,7 @@ const MenubarShortcut = ({ className, ...props }: TextProps) => {
       {...props}
     />
   );
-};
-MenubarShortcut.displayName = 'MenubarShortcut';
+}
 
 export {
   Menubar,

package/__generated/components/ui/navigation-menu.tsx

@@ -14,35 +14,40 @@ import Animated, {
 import { ChevronDown } from '../../lib/icons/ChevronDown';
 import { cn } from '../../lib/utils';
 
-const NavigationMenu = React.forwardRef<
-  NavigationMenuPrimitive.RootRef,
-  NavigationMenuPrimitive.RootProps
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn('relative z-10 flex flex-row max-w-max items-center justify-center', className)}
-    {...props}
-  >
-    {children}
-    {Platform.OS === 'web' && <NavigationMenuViewport />}
-  </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+function NavigationMenu({
+  className,
+  children,
+  ...props
+}: NavigationMenuPrimitive.RootProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.RootRef>;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      className={cn('relative z-10 flex flex-row max-w-max items-center justify-center', className)}
+      {...props}
+    >
+      {children}
+      {Platform.OS === 'web' && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
 
-const NavigationMenuList = React.forwardRef<
-  NavigationMenuPrimitive.ListRef,
-  NavigationMenuPrimitive.ListProps
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      'web:group flex flex-1 flex-row web:list-none items-center justify-center gap-1',
-      className
-    )}
-    {...props}
-  />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+function NavigationMenuList({
+  className,
+  ...props
+}: NavigationMenuPrimitive.ListProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.ListRef>;
+}) {
+  return (
+    <NavigationMenuPrimitive.List
+      className={cn(
+        'web:group flex flex-1 flex-row web:list-none items-center justify-center gap-1',
+        className
+      )}
+      {...props}
+    />
+  );
+}
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
@@ -50,10 +55,14 @@ const navigationMenuTriggerStyle = cva(
   'web:group web:inline-flex flex-row h-10 native:h-12 native:px-3 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium web:transition-colors web:hover:bg-accent active:bg-accent web:hover:text-accent-foreground web:focus:bg-accent web:focus:text-accent-foreground web:focus:outline-none web:disabled:pointer-events-none disabled:opacity-50 web:data-[active]:bg-accent/50 web:data-[state=open]:bg-accent/50'
 );
 
-const NavigationMenuTrigger = React.forwardRef<
-  NavigationMenuPrimitive.TriggerRef,
-  NavigationMenuPrimitive.TriggerProps
->(({ className, children, ...props }, ref) => {
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: Omit<NavigationMenuPrimitive.TriggerProps, 'children'> & {
+  children?: React.ReactNode;
+  ref?: React.RefObject<NavigationMenuPrimitive.TriggerRef>;
+}) {
   const { value } = NavigationMenuPrimitive.useRootContext();
   const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
 
@@ -67,7 +76,6 @@ const NavigationMenuTrigger = React.forwardRef<
 
   return (
     <NavigationMenuPrimitive.Trigger
-      ref={ref}
       className={cn(
         navigationMenuTriggerStyle(),
         'web:group gap-1.5',
@@ -76,7 +84,7 @@ const NavigationMenuTrigger = React.forwardRef<
       )}
       {...props}
     >
-      <>{children}</>
+      {children}
       <Animated.View style={chevronStyle}>
         <ChevronDown
           size={12}
@@ -86,21 +94,22 @@ const NavigationMenuTrigger = React.forwardRef<
       </Animated.View>
     </NavigationMenuPrimitive.Trigger>
   );
-});
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+}
 
-const NavigationMenuContent = React.forwardRef<
-  NavigationMenuPrimitive.ContentRef,
-  NavigationMenuPrimitive.ContentProps & {
-    portalHost?: string;
-  }
->(({ className, children, portalHost, ...props }, ref) => {
+function NavigationMenuContent({
+  className,
+  children,
+  portalHost,
+  ...props
+}: NavigationMenuPrimitive.ContentProps & {
+  portalHost?: string;
+  ref?: React.RefObject<NavigationMenuPrimitive.ContentRef>;
+}) {
   const { value } = NavigationMenuPrimitive.useRootContext();
   const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
   return (
     <NavigationMenuPrimitive.Portal hostName={portalHost}>
       <NavigationMenuPrimitive.Content
-        ref={ref}
         className={cn(
           'w-full native:border native:border-border native:rounded-lg native:shadow-lg native:bg-popover native:text-popover-foreground native:overflow-hidden',
           value === itemValue
@@ -119,15 +128,16 @@ const NavigationMenuContent = React.forwardRef<
       </NavigationMenuPrimitive.Content>
     </NavigationMenuPrimitive.Portal>
   );
-});
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+}
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
-const NavigationMenuViewport = React.forwardRef<
-  NavigationMenuPrimitive.ViewportRef,
-  NavigationMenuPrimitive.ViewportProps
->(({ className, ...props }, ref) => {
+function NavigationMenuViewport({
+  className,
+  ...props
+}: NavigationMenuPrimitive.ViewportProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.ViewportRef>;
+}) {
   return (
     <View className={cn('absolute left-0 top-full flex justify-center')}>
       <View
@@ -135,20 +145,21 @@ const NavigationMenuViewport = React.forwardRef<
           'web:origin-top-center relative mt-1.5 web:h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-lg web:animate-in web:zoom-in-90',
           className
         )}
-        ref={ref}
         {...props}
       >
         <NavigationMenuPrimitive.Viewport />
       </View>
     </View>
   );
-});
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+}
 
-const NavigationMenuIndicator = React.forwardRef<
-  NavigationMenuPrimitive.IndicatorRef,
-  NavigationMenuPrimitive.IndicatorProps
->(({ className, ...props }, ref) => {
+function NavigationMenuIndicator({
+  ref,
+  className,
+  ...props
+}: NavigationMenuPrimitive.IndicatorProps & {
+  ref?: React.RefObject<NavigationMenuPrimitive.IndicatorRef>;
+}) {
   const { value } = NavigationMenuPrimitive.useRootContext();
   const { value: itemValue } = NavigationMenuPrimitive.useItemContext();
 
@@ -165,8 +176,7 @@ const NavigationMenuIndicator = React.forwardRef<
       <View className='relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md shadow-foreground/5' />
     </NavigationMenuPrimitive.Indicator>
   );
-});
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+}
 
 export {
   NavigationMenu,

package/__generated/components/ui/popover.tsx

@@ -1,5 +1,4 @@
 import * as PopoverPrimitive from '@rn-primitives/popover';
-import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 import { cn } from '../../lib/utils';
@@ -9,17 +8,22 @@ const Popover = PopoverPrimitive.Root;
 
 const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverContent = React.forwardRef<
-  PopoverPrimitive.ContentRef,
-  PopoverPrimitive.ContentProps & { portalHost?: string }
->(({ className, align = 'center', sideOffset = 4, portalHost, ...props }, ref) => {
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  portalHost,
+  ...props
+}: PopoverPrimitive.ContentProps & {
+  ref?: React.RefObject<PopoverPrimitive.ContentRef>;
+  portalHost?: string;
+}) {
   return (
     <PopoverPrimitive.Portal hostName={portalHost}>
       <PopoverPrimitive.Overlay style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}>
         <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut}>
           <TextClassContext.Provider value='text-popover-foreground'>
             <PopoverPrimitive.Content
-              ref={ref}
               align={align}
               sideOffset={sideOffset}
               className={cn(
@@ -33,7 +37,6 @@ const PopoverContent = React.forwardRef<
       </PopoverPrimitive.Overlay>
     </PopoverPrimitive.Portal>
   );
-});
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+}
 
 export { Popover, PopoverContent, PopoverTrigger };

package/__generated/components/ui/progress.tsx

@@ -10,23 +10,24 @@ import Animated, {
 } from 'react-native-reanimated';
 import { cn } from '../../lib/utils';
 
-const Progress = React.forwardRef<
-  ProgressPrimitive.RootRef,
-  ProgressPrimitive.RootProps & {
-    indicatorClassName?: string;
-  }
->(({ className, value, indicatorClassName, ...props }, ref) => {
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}: ProgressPrimitive.RootProps & {
+  ref?: React.RefObject<ProgressPrimitive.RootRef>;
+  indicatorClassName?: string;
+}) {
   return (
     <ProgressPrimitive.Root
-      ref={ref}
       className={cn('relative h-4 w-full overflow-hidden rounded-full bg-secondary', className)}
       {...props}
     >
       <Indicator value={value} className={indicatorClassName} />
     </ProgressPrimitive.Root>
   );
-});
-Progress.displayName = ProgressPrimitive.Root.displayName;
+}
 
 export { Progress };