@react-native-reusables/cli 0.3.8 → 0.4.1

package/__generated/components/ui/dialog.tsx

@@ -13,60 +13,66 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlayWeb = React.forwardRef<DialogPrimitive.OverlayRef, DialogPrimitive.OverlayProps>(
-  ({ className, ...props }, ref) => {
-    const { open } = DialogPrimitive.useRootContext();
-    return (
-      <DialogPrimitive.Overlay
-        className={cn(
-          'bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
-          open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
-          className
-        )}
-        {...props}
-        ref={ref}
-      />
-    );
-  }
-);
-
-DialogOverlayWeb.displayName = 'DialogOverlayWeb';
+function DialogOverlayWeb({
+  className,
+  ...props
+}: DialogPrimitive.OverlayProps & {
+  ref?: React.RefObject<DialogPrimitive.OverlayRef>;
+}) {
+  const { open } = DialogPrimitive.useRootContext();
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        'bg-black/80 flex justify-center items-center p-2 absolute top-0 right-0 bottom-0 left-0',
+        open ? 'web:animate-in web:fade-in-0' : 'web:animate-out web:fade-out-0',
+        className
+      )}
+      {...props}
+    />
+  );
+}
 
-const DialogOverlayNative = React.forwardRef<
-  DialogPrimitive.OverlayRef,
-  DialogPrimitive.OverlayProps
->(({ className, children, ...props }, ref) => {
+function DialogOverlayNative({
+  className,
+  children,
+  ...props
+}: DialogPrimitive.OverlayProps & {
+  ref?: React.RefObject<DialogPrimitive.OverlayRef>;
+  children?: React.ReactNode;
+}) {
   return (
     <DialogPrimitive.Overlay
       style={StyleSheet.absoluteFill}
       className={cn('flex bg-black/80 justify-center items-center p-2', className)}
       {...props}
-      ref={ref}
     >
       <Animated.View entering={FadeIn.duration(150)} exiting={FadeOut.duration(150)}>
-        <>{children}</>
+        {children}
       </Animated.View>
     </DialogPrimitive.Overlay>
   );
-});
-
-DialogOverlayNative.displayName = 'DialogOverlayNative';
+}
 
 const DialogOverlay = Platform.select({
   web: DialogOverlayWeb,
   default: DialogOverlayNative,
 });
 
-const DialogContent = React.forwardRef<
-  DialogPrimitive.ContentRef,
-  DialogPrimitive.ContentProps & { portalHost?: string }
->(({ className, children, portalHost, ...props }, ref) => {
+function DialogContent({
+  className,
+  children,
+  portalHost,
+  ...props
+}: DialogPrimitive.ContentProps & {
+  ref?: React.RefObject<DialogPrimitive.ContentRef>;
+  className?: string;
+  portalHost?: string;
+}) {
   const { open } = DialogPrimitive.useRootContext();
   return (
     <DialogPortal hostName={portalHost}>
       <DialogOverlay>
         <DialogPrimitive.Content
-          ref={ref}
           className={cn(
             'max-w-lg gap-4 border border-border web:cursor-default bg-background p-6 shadow-lg web:duration-200 rounded-lg',
             open
@@ -91,47 +97,53 @@ const DialogContent = React.forwardRef<
       </DialogOverlay>
     </DialogPortal>
   );
-});
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+}
 
-const DialogHeader = ({ className, ...props }: ViewProps) => (
-  <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
-);
-DialogHeader.displayName = 'DialogHeader';
+function DialogHeader({ className, ...props }: ViewProps) {
+  return (
+    <View className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} {...props} />
+  );
+}
 
-const DialogFooter = ({ className, ...props }: ViewProps) => (
-  <View
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
-    {...props}
-  />
-);
-DialogFooter.displayName = 'DialogFooter';
+function DialogFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)}
+      {...props}
+    />
+  );
+}
 
-const DialogTitle = React.forwardRef<DialogPrimitive.TitleRef, DialogPrimitive.TitleProps>(
-  ({ className, ...props }, ref) => (
+function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.TitleProps & {
+  ref?: React.RefObject<DialogPrimitive.TitleRef>;
+}) {
+  return (
     <DialogPrimitive.Title
-      ref={ref}
       className={cn(
         'text-lg native:text-xl text-foreground font-semibold leading-none tracking-tight',
         className
       )}
       {...props}
     />
-  )
-);
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+  );
+}
 
-const DialogDescription = React.forwardRef<
-  DialogPrimitive.DescriptionRef,
-  DialogPrimitive.DescriptionProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-sm native:text-base text-muted-foreground', className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.DescriptionProps & {
+  ref?: React.RefObject<DialogPrimitive.DescriptionRef>;
+}) {
+  return (
+    <DialogPrimitive.Description
+      className={cn('text-sm native:text-base text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
 
 export {
   Dialog,

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

@@ -28,12 +28,17 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  DropdownMenuPrimitive.SubTriggerRef,
-  DropdownMenuPrimitive.SubTriggerProps & {
-    inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => {
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: DropdownMenuPrimitive.SubTriggerProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.SubTriggerRef>;
+  className?: string;
+  inset?: boolean;
+  children?: React.ReactNode;
+}) {
   const { open } = DropdownMenuPrimitive.useSubContext();
   const Icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
   return (
@@ -44,7 +49,6 @@ const DropdownMenuSubTrigger = React.forwardRef<
       )}
     >
       <DropdownMenuPrimitive.SubTrigger
-        ref={ref}
         className={cn(
           'flex flex-row web:cursor-default web:select-none gap-2 items-center web:focus:bg-accent web:hover:bg-accent active:bg-accent rounded-sm px-2 py-1.5 native:py-2 web:outline-none',
           open && 'bg-accent',
@@ -53,22 +57,22 @@ const DropdownMenuSubTrigger = React.forwardRef<
         )}
         {...props}
       >
-        <>{children}</>
+        {children}
         <Icon size={18} className='ml-auto text-foreground' />
       </DropdownMenuPrimitive.SubTrigger>
     </TextClassContext.Provider>
   );
-});
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+}
 
-const DropdownMenuSubContent = React.forwardRef<
-  DropdownMenuPrimitive.SubContentRef,
-  DropdownMenuPrimitive.SubContentProps
->(({ className, ...props }, ref) => {
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SubContentProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.SubContentRef>;
+}) {
   const { open } = DropdownMenuPrimitive.useSubContext();
   return (
     <DropdownMenuPrimitive.SubContent
-      ref={ref}
       className={cn(
         'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border mt-1 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
@@ -79,17 +83,20 @@ const DropdownMenuSubContent = React.forwardRef<
       {...props}
     />
   );
-});
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  DropdownMenuPrimitive.ContentRef,
-  DropdownMenuPrimitive.ContentProps & {
-    overlayStyle?: StyleProp<ViewStyle>;
-    overlayClassName?: string;
-    portalHost?: string;
-  }
->(({ className, overlayClassName, overlayStyle, portalHost, ...props }, ref) => {
+}
+
+function DropdownMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}: DropdownMenuPrimitive.ContentProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.ContentRef>;
+  overlayStyle?: StyleProp<ViewStyle>;
+  overlayClassName?: string;
+  portalHost?: string;
+}) {
   const { open } = DropdownMenuPrimitive.useRootContext();
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
@@ -98,7 +105,7 @@ const DropdownMenuContent = React.forwardRef<
           overlayStyle
             ? StyleSheet.flatten([
                 Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined,
-                overlayStyle,
+                overlayStyle as typeof StyleSheet.absoluteFill,
               ])
             : Platform.OS !== 'web'
             ? StyleSheet.absoluteFill
@@ -107,7 +114,6 @@ const DropdownMenuContent = React.forwardRef<
         className={overlayClassName}
       >
         <DropdownMenuPrimitive.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 web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2',
             open
@@ -120,108 +126,124 @@ const DropdownMenuContent = React.forwardRef<
       </DropdownMenuPrimitive.Overlay>
     </DropdownMenuPrimitive.Portal>
   );
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-const DropdownMenuItem = React.forwardRef<
-  DropdownMenuPrimitive.ItemRef,
-  DropdownMenuPrimitive.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'>
-    <DropdownMenuPrimitive.Item
-      ref={ref}
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  ...props
+}: DropdownMenuPrimitive.ItemProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.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'>
+      <DropdownMenuPrimitive.Item
+        className={cn(
+          'relative flex flex-row web:cursor-default gap-2 items-center 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>
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: DropdownMenuPrimitive.CheckboxItemProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.CheckboxItemRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      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'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check size={14} strokeWidth={3} className='text-foreground' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </View>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: DropdownMenuPrimitive.RadioItemProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.RadioItemRef>;
+  children?: React.ReactNode;
+}) {
+  return (
+    <DropdownMenuPrimitive.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'>
+        <DropdownMenuPrimitive.ItemIndicator>
+          <View className='bg-foreground h-2 w-2 rounded-full' />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </View>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: DropdownMenuPrimitive.LabelProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.LabelRef>;
+  className?: string;
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
       className={cn(
-        'relative flex flex-row web:cursor-default gap-2 items-center 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',
+        'px-2 py-1.5 text-sm native:text-base font-semibold text-foreground web:cursor-default',
         inset && 'pl-8',
-        props.disabled && 'opacity-50 web:pointer-events-none',
         className
       )}
       {...props}
     />
-  </TextClassContext.Provider>
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  DropdownMenuPrimitive.CheckboxItemRef,
-  DropdownMenuPrimitive.CheckboxItemProps
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.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'>
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check size={14} strokeWidth={3} className='text-foreground' />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </View>
-    <>{children}</>
-  </DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-const DropdownMenuRadioItem = React.forwardRef<
-  DropdownMenuPrimitive.RadioItemRef,
-  DropdownMenuPrimitive.RadioItemProps
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.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'>
-      <DropdownMenuPrimitive.ItemIndicator>
-        <View className='bg-foreground h-2 w-2 rounded-full' />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </View>
-    <>{children}</>
-  </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-const DropdownMenuLabel = React.forwardRef<
-  DropdownMenuPrimitive.LabelRef,
-  DropdownMenuPrimitive.LabelProps & {
-    inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.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}
-  />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-const DropdownMenuSeparator = React.forwardRef<
-  DropdownMenuPrimitive.SeparatorRef,
-  DropdownMenuPrimitive.SeparatorProps
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-border', className)}
-    {...props}
-  />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-const DropdownMenuShortcut = ({ className, ...props }: TextProps) => {
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: DropdownMenuPrimitive.SeparatorProps & {
+  ref?: React.RefObject<DropdownMenuPrimitive.SeparatorRef>;
+}) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      className={cn('-mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({ className, ...props }: TextProps) {
   return (
     <Text
       className={cn(
@@ -231,8 +253,7 @@ const DropdownMenuShortcut = ({ className, ...props }: TextProps) => {
       {...props}
     />
   );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+}
 
 export {
   DropdownMenu,

package/__generated/components/ui/hover-card.tsx

@@ -9,10 +9,14 @@ const HoverCard = HoverCardPrimitive.Root;
 
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
-const HoverCardContent = React.forwardRef<
-  HoverCardPrimitive.ContentRef,
-  HoverCardPrimitive.ContentProps
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => {
+function HoverCardContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: HoverCardPrimitive.ContentProps & {
+  ref?: React.RefObject<HoverCardPrimitive.ContentRef>;
+}) {
   const { open } = HoverCardPrimitive.useRootContext();
   return (
     <HoverCardPrimitive.Portal>
@@ -22,7 +26,6 @@ const HoverCardContent = React.forwardRef<
         <Animated.View entering={FadeIn}>
           <TextClassContext.Provider value='text-popover-foreground'>
             <HoverCardPrimitive.Content
-              ref={ref}
               align={align}
               sideOffset={sideOffset}
               className={cn(
@@ -39,7 +42,6 @@ const HoverCardContent = React.forwardRef<
       </HoverCardPrimitive.Overlay>
     </HoverCardPrimitive.Portal>
   );
-});
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+}
 
 export { HoverCard, HoverCardContent, HoverCardTrigger };

package/__generated/components/ui/input.tsx

@@ -2,23 +2,24 @@ import * as React from 'react';
 import { TextInput, type TextInputProps } from 'react-native';
 import { cn } from '../../lib/utils';
 
-const Input = React.forwardRef<React.ElementRef<typeof TextInput>, TextInputProps>(
-  ({ className, placeholderClassName, ...props }, ref) => {
-    return (
-      <TextInput
-        ref={ref}
-        className={cn(
-          'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-          props.editable === false && 'opacity-50 web:cursor-not-allowed',
-          className
-        )}
-        placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
-        {...props}
-      />
-    );
-  }
-);
-
-Input.displayName = 'Input';
+function Input({
+  className,
+  placeholderClassName,
+  ...props
+}: TextInputProps & {
+  ref?: React.RefObject<TextInput>;
+}) {
+  return (
+    <TextInput
+      className={cn(
+        'web:flex h-10 native:h-12 web:w-full rounded-md border border-input bg-background px-3 web:py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground placeholder:text-muted-foreground web:ring-offset-background file:border-0 file:bg-transparent file:font-medium web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+        props.editable === false && 'opacity-50 web:cursor-not-allowed',
+        className
+      )}
+      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+      {...props}
+    />
+  );
+}
 
 export { Input };

package/__generated/components/ui/label.tsx

@@ -2,8 +2,17 @@ import * as LabelPrimitive from '@rn-primitives/label';
 import * as React from 'react';
 import { cn } from '../../lib/utils';
 
-const Label = React.forwardRef<LabelPrimitive.TextRef, LabelPrimitive.TextProps>(
-  ({ className, onPress, onLongPress, onPressIn, onPressOut, ...props }, ref) => (
+function Label({
+  className,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}: LabelPrimitive.TextProps & {
+  ref?: React.RefObject<LabelPrimitive.TextRef>;
+}) {
+  return (
     <LabelPrimitive.Root
       className='web:cursor-default'
       onPress={onPress}
@@ -12,7 +21,6 @@ const Label = React.forwardRef<LabelPrimitive.TextRef, LabelPrimitive.TextProps>
       onPressOut={onPressOut}
     >
       <LabelPrimitive.Text
-        ref={ref}
         className={cn(
           'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
           className
@@ -20,8 +28,7 @@ const Label = React.forwardRef<LabelPrimitive.TextRef, LabelPrimitive.TextProps>
         {...props}
       />
     </LabelPrimitive.Root>
-  )
-);
-Label.displayName = LabelPrimitive.Root.displayName;
+  );
+}
 
 export { Label };