@arolariu/components 1.0.0 → 2.0.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/form.tsx

@@ -3,7 +3,32 @@
 /* eslint-disable react/prop-types */
 
 import * as React from "react";
-import {Controller, FormProvider, useFormContext, type ControllerProps, type FieldPath, type FieldValues} from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useController,
+  useFieldArray,
+  useForm,
+  useFormContext,
+  useFormState,
+  useWatch,
+  type Control,
+  type ControllerFieldState,
+  type ControllerProps,
+  type ControllerRenderProps,
+  type DefaultValues,
+  type FieldError,
+  type FieldErrors,
+  type FieldPath,
+  type FieldValues,
+  type Path,
+  type RegisterOptions,
+  type Resolver,
+  type SubmitHandler,
+  type UseControllerReturn,
+  type UseFieldArrayReturn,
+  type UseFormReturn,
+} from "react-hook-form";
 
 import {cn} from "@/lib/utilities";
 
@@ -336,7 +361,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
 FormMessage.displayName = "FormMessage";
 FormField.displayName = "FormField";
 
-export {Controller, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch} from "react-hook-form";
+export {Controller, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch};
 export type {
   Control,
   ControllerFieldState,
@@ -354,6 +379,6 @@ export type {
   UseControllerReturn,
   UseFieldArrayReturn,
   UseFormReturn,
-} from "react-hook-form";
+};
 export {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField};
 export type {FormControlProps};

package/src/components/ui/input-otp.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import {OTPInput, OTPInputContext} from "input-otp";
+import {OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS, type OTPInputProps, type SlotProps} from "input-otp";
 import {Minus} from "lucide-react";
 import * as React from "react";
 
@@ -10,8 +10,8 @@ import styles from "./input-otp.module.css";
 
 const DEFAULT_SLOT_PLACEHOLDER_CHARACTER = "·";
 
-export {REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS} from "input-otp";
-export type {OTPInputProps, SlotProps} from "input-otp";
+export {REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS};
+export type {OTPInputProps, SlotProps};
 
 /**
  * Props for the {@link InputOTP} component.

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;