@arolariu/components 1.0.0 → 1.1.0

package/src/components/ui/context-menu.tsx

@@ -222,6 +222,7 @@ const ContextMenuSub: typeof BaseContextMenu.SubmenuRoot & {displayName?: string
  */
 const ContextMenuTrigger = React.forwardRef<React.ComponentRef<typeof BaseContextMenu.Trigger>, ContextMenuTrigger.Props>(
   (props: Readonly<ContextMenuTrigger.Props>, ref): React.ReactElement => {
+    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
     const {asChild = false, children, className, render, ...otherProps} = props;
     const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -367,6 +368,7 @@ const ContextMenuContent = React.forwardRef<React.ComponentRef<typeof BaseContex
  * @see {@link https://base-ui.com/react/components/context-menu | Base UI Documentation}
  */
 function ContextMenuItem(props: Readonly<ContextMenuItem.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, inset = false, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -532,6 +534,7 @@ function ContextMenuSeparator(props: Readonly<ContextMenuSeparator.Props>): Reac
  * @see {@link https://base-ui.com/react/components/context-menu | Base UI Documentation}
  */
 function ContextMenuShortcut(props: Readonly<ContextMenuShortcut.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 

package/src/components/ui/drawer.tsx

@@ -258,6 +258,7 @@ const DrawerContent = React.forwardRef<React.ComponentRef<typeof BaseDrawer.Popu
  * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
  */
 function DrawerHeader(props: Readonly<DrawerHeader.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -286,6 +287,7 @@ function DrawerHeader(props: Readonly<DrawerHeader.Props>): React.ReactElement {
  * @see {@link https://base-ui.com/react/components/drawer | Base UI Documentation}
  */
 function DrawerFooter(props: Readonly<DrawerFooter.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 

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

@@ -222,6 +222,7 @@ const DropdownMenuSub: typeof BaseMenu.SubmenuRoot & {displayName?: string} = Ba
  */
 const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrigger.Props>(
   (props: Readonly<DropdownMenuTrigger.Props>, ref): React.ReactElement => {
+    // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
     const {asChild = false, children, className, render, ...otherProps} = props;
     const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -367,6 +368,7 @@ const DropdownMenuContent = React.forwardRef<React.ComponentRef<typeof BaseMenu.
  * @see {@link https://base-ui.com/react/components/menu | Base UI Documentation}
  */
 function DropdownMenuItem(props: Readonly<DropdownMenuItem.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, inset = false, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -532,6 +534,7 @@ function DropdownMenuSeparator(props: Readonly<DropdownMenuSeparator.Props>): Re
  * @see {@link https://base-ui.com/react/components/menu | Base UI Documentation}
  */
 function DropdownMenuShortcut(props: Readonly<DropdownMenuShortcut.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 

package/src/components/ui/dropdrawer.tsx

@@ -37,22 +37,25 @@ const useDropDrawerContext = (): DropDrawerContextValue => {
 const Drawer = BaseDrawer.Root;
 const DrawerPortal = BaseDrawer.Portal;
 
-function DrawerTrigger(props: Readonly<React.ComponentPropsWithRef<typeof BaseDrawer.Trigger> & {asChild?: boolean}>): React.ReactElement {
-  const {asChild = false, children, className, render, ...otherProps} = props;
-  const renderProp = asChild && React.isValidElement(children) ? children : render;
+const DrawerTrigger = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<typeof BaseDrawer.Trigger> & {asChild?: boolean}>(
+  function DrawerTrigger(props, forwardedRef) {
+    const {asChild = false, children, className, render, ...otherProps} = props;
+    const renderProp = asChild && React.isValidElement(children) ? children : render;
 
-  return (
-    <BaseDrawer.Trigger
-      {...otherProps}
-      render={useRender({
-        defaultTagName: "button",
-        render: renderProp as never,
-        props: mergeProps({className}, {}),
-      })}>
-      {renderProp ? undefined : children}
-    </BaseDrawer.Trigger>
-  );
-}
+    return (
+      <BaseDrawer.Trigger
+        {...otherProps}
+        ref={forwardedRef}
+        render={useRender({
+          defaultTagName: "button",
+          render: renderProp as never,
+          props: mergeProps({className}, {}),
+        })}>
+        {renderProp ? undefined : children}
+      </BaseDrawer.Trigger>
+    );
+  },
+);
 
 function DrawerOverlay(props: Readonly<React.ComponentPropsWithRef<typeof BaseDrawer.Backdrop>>): React.ReactElement {
   const {className, render, ...otherProps} = props;
@@ -69,29 +72,30 @@ function DrawerOverlay(props: Readonly<React.ComponentPropsWithRef<typeof BaseDr
   );
 }
 
-function DrawerContent(
-  props: Readonly<React.ComponentPropsWithRef<typeof BaseDrawer.Popup> & {children?: React.ReactNode}>,
-): React.ReactElement {
-  const {className, children, render, ...otherProps} = props;
+const DrawerContent = React.forwardRef<HTMLDivElement, React.ComponentPropsWithRef<typeof BaseDrawer.Popup> & {children?: React.ReactNode}>(
+  function DrawerContent(props, forwardedRef) {
+    const {className, children, render, ...otherProps} = props;
 
-  return (
-    <DrawerPortal>
-      <DrawerOverlay />
-      <BaseDrawer.Viewport className={styles.drawerViewport}>
-        <BaseDrawer.Popup
-          {...otherProps}
-          render={useRender({
-            defaultTagName: "div",
-            render: render as never,
-            props: mergeProps({className: cn(styles.drawerContent, className)}, {}),
-          })}>
-          <div className={styles.drawerHandle} />
-          <BaseDrawer.Content className={styles.drawerInnerContent}>{children}</BaseDrawer.Content>
-        </BaseDrawer.Popup>
-      </BaseDrawer.Viewport>
-    </DrawerPortal>
-  );
-}
+    return (
+      <DrawerPortal>
+        <DrawerOverlay />
+        <BaseDrawer.Viewport className={styles.drawerViewport}>
+          <BaseDrawer.Popup
+            {...otherProps}
+            ref={forwardedRef}
+            render={useRender({
+              defaultTagName: "div",
+              render: render as never,
+              props: mergeProps({className: cn(styles.drawerContent, className)}, {}),
+            })}>
+            <div className={styles.drawerHandle} />
+            <BaseDrawer.Content className={styles.drawerInnerContent}>{children}</BaseDrawer.Content>
+          </BaseDrawer.Popup>
+        </BaseDrawer.Viewport>
+      </DrawerPortal>
+    );
+  },
+);
 
 function DrawerHeader(
   props: Readonly<React.ComponentPropsWithRef<"div"> & {render?: useRender.RenderProp<Record<string, never>>}>,
@@ -136,34 +140,37 @@ function DrawerTitle(props: Readonly<React.ComponentPropsWithRef<typeof BaseDraw
 const DropdownMenu = BaseMenu.Root;
 const DropdownMenuSub = BaseMenu.SubmenuRoot;
 
-function DropdownMenuTrigger(
-  props: Readonly<React.ComponentPropsWithRef<typeof BaseMenu.Trigger> & {asChild?: boolean}>,
-): React.ReactElement {
-  const {asChild = false, children, className, render, ...otherProps} = props;
-  const renderProp = asChild && React.isValidElement(children) ? children : render;
+const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithRef<typeof BaseMenu.Trigger> & {asChild?: boolean}>(
+  function DropdownMenuTrigger(props, forwardedRef) {
+    const {asChild = false, children, className, render, ...otherProps} = props;
+    const renderProp = asChild && React.isValidElement(children) ? children : render;
 
-  return (
-    <BaseMenu.Trigger
-      {...otherProps}
-      render={useRender({
-        defaultTagName: "button",
-        render: renderProp as never,
-        props: mergeProps({className}, {}),
-      })}>
-      {renderProp ? undefined : children}
-    </BaseMenu.Trigger>
-  );
-}
+    return (
+      <BaseMenu.Trigger
+        {...otherProps}
+        ref={forwardedRef}
+        render={useRender({
+          defaultTagName: "button",
+          render: renderProp as never,
+          props: mergeProps({className}, {}),
+        })}>
+        {renderProp ? undefined : children}
+      </BaseMenu.Trigger>
+    );
+  },
+);
 
-function DropdownMenuContent(
-  props: Readonly<React.ComponentPropsWithRef<typeof BaseMenu.Positioner> & {children?: React.ReactNode}>,
-): React.ReactElement {
+const DropdownMenuContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithRef<typeof BaseMenu.Positioner> & {children?: React.ReactNode}
+>(function DropdownMenuContent(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseMenu.Portal>
       <BaseMenu.Positioner
         {...otherProps}
+        ref={forwardedRef}
         render={useRender({
           defaultTagName: "div",
           props: mergeProps({className: styles.dropdownPositioner}, {}),
@@ -179,7 +186,7 @@ function DropdownMenuContent(
       </BaseMenu.Positioner>
     </BaseMenu.Portal>
   );
-}
+});
 
 interface DropdownMenuItemProps extends React.ComponentPropsWithRef<typeof BaseMenu.Item> {
   /** @deprecated Prefer Base UI's `render` prop. */
@@ -192,6 +199,7 @@ interface DropdownMenuItemProps extends React.ComponentPropsWithRef<typeof BaseM
 }
 
 function DropdownMenuItem(props: Readonly<DropdownMenuItemProps>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, inset = false, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -408,11 +416,15 @@ function DropDrawer({children, ...props}: DropDrawerRootProps): React.JSX.Elemen
  *
  * @see {@link https://base-ui.com/react/components/drawer | Base UI Drawer Docs}
  */
-function DropDrawerTrigger({className, children, ...props}: DropDrawerTriggerProps): React.JSX.Element {
+const DropDrawerTrigger = React.forwardRef<HTMLButtonElement, DropDrawerTriggerProps>(function DropDrawerTrigger(
+  {className, children, ...props},
+  forwardedRef,
+) {
   const {isMobile} = useDropDrawerContext();
 
   return isMobile ? (
     <DrawerTrigger
+      ref={forwardedRef}
       data-slot='drop-drawer-trigger'
       className={className}
       {...(props as React.ComponentProps<typeof DrawerTrigger>)}>
@@ -420,13 +432,14 @@ function DropDrawerTrigger({className, children, ...props}: DropDrawerTriggerPro
     </DrawerTrigger>
   ) : (
     <DropdownMenuTrigger
+      ref={forwardedRef}
       data-slot='drop-drawer-trigger'
       className={className}
       {...(props as React.ComponentProps<typeof DropdownMenuTrigger>)}>
       {children}
     </DropdownMenuTrigger>
   );
-}
+});
 
 /**
  * Renders the responsive dropdown or drawer content surface.
@@ -444,7 +457,10 @@ function DropDrawerTrigger({className, children, ...props}: DropDrawerTriggerPro
  *
  * @see {@link https://base-ui.com/react/components/menu | Base UI Menu Docs}
  */
-function DropDrawerContent({className, children, ...props}: DropDrawerContentProps): React.JSX.Element {
+const DropDrawerContent = React.forwardRef<HTMLDivElement, DropDrawerContentProps>(function DropDrawerContent(
+  {className, children, ...props},
+  forwardedRef,
+) {
   const {isMobile} = useDropDrawerContext();
   const [activeSubmenu, setActiveSubmenu] = React.useState<string | null>(null);
   const [submenuTitle, setSubmenuTitle] = React.useState<string | null>(null);
@@ -594,6 +610,7 @@ function DropDrawerContent({className, children, ...props}: DropDrawerContentPro
           submenuTitle,
         }}>
         <DrawerContent
+          ref={forwardedRef}
           data-slot='drop-drawer-content'
           className={cn(styles.mobileContent, className)}
           {...(props as React.ComponentProps<typeof DrawerContent>)}>
@@ -670,6 +687,7 @@ function DropDrawerContent({className, children, ...props}: DropDrawerContentPro
         submenuTitle,
       }}>
       <DropdownMenuContent
+        ref={forwardedRef}
         data-slot='drop-drawer-content'
         align='end'
         sideOffset={4}
@@ -679,7 +697,7 @@ function DropDrawerContent({className, children, ...props}: DropDrawerContentPro
       </DropdownMenuContent>
     </SubmenuContext.Provider>
   );
-}
+});
 
 /**
  * Renders an actionable item inside the drop drawer surface.

package/src/components/ui/menubar.tsx

@@ -10,14 +10,6 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 import styles from "./menubar.module.css";
 
-type MenubarProps = Omit<React.ComponentPropsWithRef<typeof BaseMenubar>, "className"> & {className?: string};
-interface MenubarTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseMenu.Trigger>, "className"> {
-  /**
-   * Applies additional CSS classes to the component root element.
-   * @default undefined
-   */
-  className?: string;
-}
 interface MenubarSubTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseMenu.SubmenuTrigger>, "className"> {
   /**
    * Applies additional CSS classes to the component root element.
@@ -540,6 +532,7 @@ function MenubarSeparator(props: Readonly<MenubarSeparator.Props>): React.ReactE
  * @see {@link https://base-ui.com/react/components/menubar | Base UI Documentation}
  */
 function MenubarShortcut(props: Readonly<MenubarShortcut.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 
@@ -554,13 +547,19 @@ function MenubarShortcut(props: Readonly<MenubarShortcut.Props>): React.ReactEle
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace Menubar {
-  export type Props = MenubarProps;
+  export type Props = Omit<React.ComponentPropsWithRef<typeof BaseMenubar>, "className"> & {className?: string};
   export type State = BaseMenubar.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace MenubarTrigger {
-  export type Props = MenubarTriggerProps;
+  export type Props = Omit<React.ComponentPropsWithRef<typeof BaseMenu.Trigger>, "className"> & {
+    /**
+     * Applies additional CSS classes to the component root element.
+     * @default undefined
+     */
+    className?: string;
+  };
   export type State = BaseMenu.Trigger.State;
 }
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API

package/src/components/ui/meter.tsx

@@ -8,11 +8,6 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 import styles from "./meter.module.css";
 
-type MeterProps = React.ComponentPropsWithRef<typeof BaseMeter.Root>;
-type MeterTrackProps = React.ComponentPropsWithRef<typeof BaseMeter.Track>;
-type MeterIndicatorProps = React.ComponentPropsWithRef<typeof BaseMeter.Indicator>;
-type MeterLabelProps = React.ComponentPropsWithRef<typeof BaseMeter.Label>;
-
 /**
  * Displays a scalar measurement within a known range.
  *
@@ -32,12 +27,13 @@ type MeterLabelProps = React.ComponentPropsWithRef<typeof BaseMeter.Label>;
  *
  * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
  */
-function Meter(props: Readonly<Meter.Props>): React.ReactElement {
+const Meter = React.forwardRef<HTMLDivElement, Meter.Props>(function Meter(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseMeter.Root
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -46,7 +42,7 @@ function Meter(props: Readonly<Meter.Props>): React.ReactElement {
       {children}
     </BaseMeter.Root>
   );
-}
+});
 
 /**
  * Renders the background track for a meter.
@@ -62,12 +58,13 @@ function Meter(props: Readonly<Meter.Props>): React.ReactElement {
  *
  * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
  */
-function MeterTrack(props: Readonly<MeterTrack.Props>): React.ReactElement {
+const MeterTrack = React.forwardRef<HTMLDivElement, MeterTrack.Props>(function MeterTrack(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseMeter.Track
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -76,7 +73,7 @@ function MeterTrack(props: Readonly<MeterTrack.Props>): React.ReactElement {
       {children}
     </BaseMeter.Track>
   );
-}
+});
 
 /**
  * Renders the filled indicator that reflects the current meter value.
@@ -92,12 +89,13 @@ function MeterTrack(props: Readonly<MeterTrack.Props>): React.ReactElement {
  *
  * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
  */
-function MeterIndicator(props: Readonly<MeterIndicator.Props>): React.ReactElement {
+const MeterIndicator = React.forwardRef<HTMLDivElement, MeterIndicator.Props>(function MeterIndicator(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseMeter.Indicator
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -106,7 +104,7 @@ function MeterIndicator(props: Readonly<MeterIndicator.Props>): React.ReactEleme
       {children}
     </BaseMeter.Indicator>
   );
-}
+});
 
 /**
  * Renders the accessible label associated with a meter.
@@ -122,12 +120,13 @@ function MeterIndicator(props: Readonly<MeterIndicator.Props>): React.ReactEleme
  *
  * @see {@link https://base-ui.com/react/components/meter | Base UI Meter Docs}
  */
-function MeterLabel(props: Readonly<MeterLabel.Props>): React.ReactElement {
+const MeterLabel = React.forwardRef<HTMLSpanElement, MeterLabel.Props>(function MeterLabel(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseMeter.Label
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "span",
         render: render as never,
@@ -136,29 +135,29 @@ function MeterLabel(props: Readonly<MeterLabel.Props>): React.ReactElement {
       {children}
     </BaseMeter.Label>
   );
-}
+});
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace Meter {
-  export type Props = MeterProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseMeter.Root>;
   export type State = BaseMeter.Root.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace MeterTrack {
-  export type Props = MeterTrackProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseMeter.Track>;
   export type State = BaseMeter.Track.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace MeterIndicator {
-  export type Props = MeterIndicatorProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseMeter.Indicator>;
   export type State = BaseMeter.Indicator.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace MeterLabel {
-  export type Props = MeterLabelProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseMeter.Label>;
   export type State = BaseMeter.Label.State;
 }
 

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

@@ -176,22 +176,25 @@ const NavigationMenuItem = BaseNavigationMenu.Item;
  *
  * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI Documentation}
  */
-function NavigationMenuTrigger(props: Readonly<NavigationMenuTrigger.Props>): React.ReactElement {
-  const {className, children, render, ...otherProps} = props;
-
-  return (
-    <BaseNavigationMenu.Trigger
-      {...otherProps}
-      render={useRender({
-        defaultTagName: "button",
-        render: render as never,
-        props: mergeProps({className: cn(styles.trigger, className)}, {}),
-      })}>
-      {children}
-      <ChevronDown className={styles.triggerIcon} />
-    </BaseNavigationMenu.Trigger>
-  );
-}
+const NavigationMenuTrigger = React.forwardRef<HTMLButtonElement, NavigationMenuTrigger.Props>(
+  function NavigationMenuTrigger(props, forwardedRef) {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseNavigationMenu.Trigger
+        {...otherProps}
+        ref={forwardedRef}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className: cn(styles.trigger, className)}, {}),
+        })}>
+        {children}
+        <ChevronDown className={styles.triggerIcon} />
+      </BaseNavigationMenu.Trigger>
+    );
+  },
+);
 
 /**
  * Renders the navigation menu content.
@@ -208,21 +211,24 @@ function NavigationMenuTrigger(props: Readonly<NavigationMenuTrigger.Props>): Re
  *
  * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI Documentation}
  */
-function NavigationMenuContent(props: Readonly<NavigationMenuContent.Props>): React.ReactElement {
-  const {className, children, render, ...otherProps} = props;
-
-  return (
-    <BaseNavigationMenu.Content
-      {...otherProps}
-      render={useRender({
-        defaultTagName: "div",
-        render: render as never,
-        props: mergeProps({className: cn(styles.content, className)}, {}),
-      })}>
-      {children}
-    </BaseNavigationMenu.Content>
-  );
-}
+const NavigationMenuContent = React.forwardRef<HTMLDivElement, NavigationMenuContent.Props>(
+  function NavigationMenuContent(props, forwardedRef) {
+    const {className, children, render, ...otherProps} = props;
+
+    return (
+      <BaseNavigationMenu.Content
+        {...otherProps}
+        ref={forwardedRef}
+        render={useRender({
+          defaultTagName: "div",
+          render: render as never,
+          props: mergeProps({className: cn(styles.content, className)}, {}),
+        })}>
+        {children}
+      </BaseNavigationMenu.Content>
+    );
+  },
+);
 
 /**
  * Renders the navigation menu link.
@@ -239,12 +245,13 @@ function NavigationMenuContent(props: Readonly<NavigationMenuContent.Props>): Re
  *
  * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI Documentation}
  */
-function NavigationMenuLink(props: Readonly<NavigationMenuLink.Props>): React.ReactElement {
+const NavigationMenuLink = React.forwardRef<HTMLAnchorElement, NavigationMenuLink.Props>(function NavigationMenuLink(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseNavigationMenu.Link
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "a",
         render: render as never,
@@ -253,7 +260,7 @@ function NavigationMenuLink(props: Readonly<NavigationMenuLink.Props>): React.Re
       {children}
     </BaseNavigationMenu.Link>
   );
-}
+});
 
 /**
  * Renders the navigation menu viewport.
@@ -318,6 +325,7 @@ function NavigationMenuViewport(props: Readonly<NavigationMenuViewport.Props>):
  * @see {@link https://base-ui.com/react/components/navigation-menu | Base UI Documentation}
  */
 function NavigationMenuIndicator(props: Readonly<NavigationMenuIndicator.Props>): React.ReactElement {
+  // eslint-disable-next-line sonarjs/deprecation -- backward-compatible asChild API
   const {asChild = false, children, className, render, ...otherProps} = props;
   const renderProp = asChild && React.isValidElement(children) ? children : render;
 

package/src/components/ui/number-field.tsx

@@ -8,13 +8,6 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 import styles from "./number-field.module.css";
 
-type NumberFieldProps = React.ComponentPropsWithRef<typeof BaseNumberField.Root>;
-type NumberFieldGroupProps = React.ComponentPropsWithRef<typeof BaseNumberField.Group>;
-type NumberFieldInputProps = React.ComponentPropsWithRef<typeof BaseNumberField.Input>;
-type NumberFieldIncrementProps = React.ComponentPropsWithRef<typeof BaseNumberField.Increment>;
-type NumberFieldDecrementProps = React.ComponentPropsWithRef<typeof BaseNumberField.Decrement>;
-type NumberFieldScrubAreaProps = React.ComponentPropsWithRef<typeof BaseNumberField.ScrubArea>;
-
 /**
  * Provides a styled numeric input with optional steppers and scrub support.
  *
@@ -210,37 +203,37 @@ function NumberFieldScrubArea(props: Readonly<NumberFieldScrubArea.Props>): Reac
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace NumberField {
-  export type Props = NumberFieldProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseNumberField.Root>;
   export type State = BaseNumberField.Root.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace NumberFieldGroup {
-  export type Props = NumberFieldGroupProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseNumberField.Group>;
   export type State = BaseNumberField.Group.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace NumberFieldInput {
-  export type Props = NumberFieldInputProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseNumberField.Input>;
   export type State = BaseNumberField.Input.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace NumberFieldIncrement {
-  export type Props = NumberFieldIncrementProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseNumberField.Increment>;
   export type State = BaseNumberField.Increment.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace NumberFieldDecrement {
-  export type Props = NumberFieldDecrementProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseNumberField.Decrement>;
   export type State = BaseNumberField.Decrement.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace NumberFieldScrubArea {
-  export type Props = NumberFieldScrubAreaProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseNumberField.ScrubArea>;
   export type State = BaseNumberField.ScrubArea.State;
 }