@arolariu/components 1.0.0 → 2.0.0

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;
 }
 

package/src/components/ui/progress.tsx

@@ -33,13 +33,14 @@ export interface ProgressProps extends Omit<React.ComponentPropsWithRef<typeof B
  *
  * @see {@link https://base-ui.com/react/components/progress | Base UI Documentation}
  */
-function Progress(props: Readonly<Progress.Props>): React.ReactElement {
+const Progress = React.forwardRef<HTMLDivElement, Progress.Props>(function Progress(props, forwardedRef) {
   const {className, render, value = 0, ...otherProps} = props;
 
   return (
     <BaseProgress.Root
       value={value}
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -49,7 +50,7 @@ function Progress(props: Readonly<Progress.Props>): React.ReactElement {
       </BaseProgress.Track>
     </BaseProgress.Root>
   );
-}
+});
 Progress.displayName = "Progress";
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API

package/src/components/ui/radio-group.tsx

@@ -10,9 +10,6 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 import styles from "./radio-group.module.css";
 
-type RadioGroupProps = React.ComponentPropsWithRef<typeof BaseRadioGroup>;
-type RadioGroupItemProps = React.ComponentPropsWithRef<typeof Radio.Root>;
-
 /**
  * Coordinates radio group state and selection behavior.
  *
@@ -84,13 +81,13 @@ const RadioGroupItem = React.forwardRef<React.ComponentRef<typeof Radio.Root>, R
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace RadioGroup {
-  export type Props = RadioGroupProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseRadioGroup>;
   export type State = BaseRadioGroup.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace RadioGroupItem {
-  export type Props = RadioGroupItemProps;
+  export type Props = React.ComponentPropsWithRef<typeof Radio.Root>;
   export type State = Radio.Root.State;
 }
 

package/src/components/ui/resizable.tsx

@@ -4,19 +4,19 @@
 
 import {GripVertical} from "lucide-react";
 import * as React from "react";
-import type {ImperativePanelGroupHandle, ImperativePanelHandle} from "react-resizable-panels";
+import type {GroupImperativeHandle, PanelImperativeHandle} from "react-resizable-panels";
 import * as ResizablePrimitive from "react-resizable-panels";
 
 import {cn} from "@/lib/utilities";
 
 import styles from "./resizable.module.css";
 
-export type {ImperativePanelGroupHandle, ImperativePanelHandle};
+export type {GroupImperativeHandle, PanelImperativeHandle};
 
 /**
  * Props for the {@link ResizablePanelGroup} component.
  */
-export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.PanelGroup>;
+export type ResizablePanelGroupProps = React.ComponentProps<typeof ResizablePrimitive.Group>;
 
 /**
  * Props for the {@link ResizablePanel} component.
@@ -28,7 +28,7 @@ export type ResizablePanelProps = React.ComponentProps<typeof ResizablePrimitive
  *
  * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
  */
-export interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+export interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.Separator> {
   /**
    * Renders a visual drag grip inside the resize handle to indicate that adjacent panels can be resized.
    *
@@ -42,26 +42,25 @@ export interface ResizableHandleProps extends React.ComponentProps<typeof Resiza
  * Wraps `react-resizable-panels` panel groups with shared styles.
  *
  * @remarks
- * - Third-party wrapper component
+ * - Third-party wrapper component (v4 API: `Group` with `orientation` prop)
  * - Styling via CSS Modules with `--ac-*` custom properties
  *
  * @example
  * ```tsx
- * <ResizablePanelGroup direction='horizontal'>...</ResizablePanelGroup>
+ * <ResizablePanelGroup orientation='horizontal'>...</ResizablePanelGroup>
  * ```
  *
  * @see {@link ResizablePanelGroupProps} for available props
  * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
- * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
  */
-const ResizablePanelGroup: React.ForwardRefExoticComponent<ResizablePanelGroupProps & React.RefAttributes<ImperativePanelGroupHandle>> =
-  React.forwardRef<ImperativePanelGroupHandle, ResizablePanelGroupProps>(({className, ...props}, ref) => (
-    <ResizablePrimitive.PanelGroup
-      ref={ref}
+function ResizablePanelGroup({className, ...props}: Readonly<ResizablePanelGroupProps>): React.JSX.Element {
+  return (
+    <ResizablePrimitive.Group
       className={cn(styles.group, className)}
       {...props}
     />
-  ));
+  );
+}
 
 /**
  * Re-exports the underlying resizable panel primitive for consistent composition.
@@ -72,12 +71,11 @@ const ResizablePanelGroup: React.ForwardRefExoticComponent<ResizablePanelGroupPr
  *
  * @example
  * ```tsx
- * <ResizablePanel defaultSize={50}>Content</ResizablePanel>
+ * <ResizablePanel defaultSize="50%">Content</ResizablePanel>
  * ```
  *
  * @see {@link ResizablePanelProps} for available props
  * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
- * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
  */
 const ResizablePanel = ResizablePrimitive.Panel;
 
@@ -85,7 +83,7 @@ const ResizablePanel = ResizablePrimitive.Panel;
  * Renders a draggable resize handle between resizable panels.
  *
  * @remarks
- * - Third-party wrapper component
+ * - Third-party wrapper component (v4 API: `Separator`)
  * - Styling via CSS Modules with `--ac-*` custom properties
  *
  * @example
@@ -95,11 +93,10 @@ const ResizablePanel = ResizablePrimitive.Panel;
  *
  * @see {@link ResizableHandleProps} for available props
  * @see {@link https://github.com/bvaughn/react-resizable-panels | react-resizable-panels docs}
- * @see {@link https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels#readme | react-resizable-panels API reference}
  */
 function ResizableHandle({withHandle = false, className, children, ...props}: Readonly<ResizableHandleProps>): React.JSX.Element {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <ResizablePrimitive.Separator
       className={cn(styles.handle, className)}
       {...props}>
       {Boolean(withHandle) && (
@@ -108,7 +105,7 @@ function ResizableHandle({withHandle = false, className, children, ...props}: Re
         </div>
       )}
       {children}
-    </ResizablePrimitive.PanelResizeHandle>
+    </ResizablePrimitive.Separator>
   );
 }
 

package/src/components/ui/scratcher.tsx

@@ -43,15 +43,10 @@ const ignoreAnimationError = (): null => null;
  *
  * @see {@link ScratcherProps} for available props
  */
-export const Scratcher: React.FC<ScratcherProps> = ({
-  width,
-  height,
-  minScratchPercentage = 50,
-  onComplete,
-  children,
-  className,
-  gradientColors = defaultGradientColors,
-}): React.JSX.Element => {
+export const Scratcher = React.forwardRef<HTMLDivElement, ScratcherProps>(function Scratcher(
+  {width, height, minScratchPercentage = 50, onComplete, children, className, gradientColors = defaultGradientColors},
+  forwardedRef,
+) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isScratching, setIsScratching] = useState(false);
   const [isComplete, setIsComplete] = useState(false);
@@ -173,6 +168,7 @@ export const Scratcher: React.FC<ScratcherProps> = ({
 
   return (
     <motion.div
+      ref={forwardedRef}
       className={cn(styles.root, className)}
       style={{
         width,
@@ -192,6 +188,6 @@ export const Scratcher: React.FC<ScratcherProps> = ({
       {children}
     </motion.div>
   );
-};
+});
 
 Scratcher.displayName = "Scratcher";

package/src/components/ui/scroll-area.tsx

@@ -8,9 +8,6 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 import styles from "./scroll-area.module.css";
 
-type ScrollAreaProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Root>;
-type ScrollBarProps = React.ComponentPropsWithRef<typeof BaseScrollArea.Scrollbar>;
-
 /**
  * Coordinates scroll area layout and scrolling behavior.
  *
@@ -88,13 +85,13 @@ function ScrollBar(props: Readonly<ScrollBar.Props>): React.ReactElement {
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ScrollArea {
-  export type Props = ScrollAreaProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseScrollArea.Root>;
   export type State = BaseScrollArea.Root.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ScrollBar {
-  export type Props = ScrollBarProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseScrollArea.Scrollbar>;
   export type State = BaseScrollArea.Scrollbar.State;
 }
 

package/src/components/ui/separator.tsx

@@ -36,13 +36,14 @@ export interface SeparatorProps extends Omit<React.ComponentPropsWithRef<typeof
  *
  * @see {@link https://base-ui.com/react/components/separator | Base UI Documentation}
  */
-function Separator(props: Readonly<Separator.Props>): React.ReactElement {
-  const {className, decorative: _decorative = true, orientation = "horizontal", render, ...otherProps} = props;
+const Separator = React.forwardRef<HTMLDivElement, Separator.Props>(function Separator(props, forwardedRef) {
+  const {className, orientation = "horizontal", render, ...otherProps} = props;
 
   return (
     <BaseSeparator
       orientation={orientation}
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -55,7 +56,7 @@ function Separator(props: Readonly<Separator.Props>): React.ReactElement {
       })}
     />
   );
-}
+});
 Separator.displayName = "Separator";
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API

package/src/components/ui/sheet.tsx

@@ -171,6 +171,7 @@ const SheetClose = BaseDialog.Close;
  */
 const SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTrigger.Props>(
   (props: Readonly<SheetTrigger.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;
 
@@ -277,6 +278,7 @@ const SheetContent = React.forwardRef<React.ComponentRef<typeof BaseDialog.Popup
  * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
  */
 function SheetHeader(props: Readonly<SheetHeader.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;
 
@@ -305,6 +307,7 @@ function SheetHeader(props: Readonly<SheetHeader.Props>): React.ReactElement {
  * @see {@link https://base-ui.com/react/components/dialog | Base UI Documentation}
  */
 function SheetFooter(props: Readonly<SheetFooter.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/sidebar.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 "use client";
 
 import {PanelLeft} from "lucide-react";

package/src/components/ui/{sonner.module.css → toast.module.css}

@@ -1,6 +1,6 @@
 .viewport {
   position: fixed;
-  z-index: 100;
+  z-index: 9999;
   display: flex;
   width: min(calc(100vw - 2rem), 24rem);
   flex-direction: column;

package/src/components/ui/{sonner.tsx → toast.tsx}

@@ -13,7 +13,7 @@ import {AlertCircle, BellRing, CheckCircle2, Info, LoaderCircle, TriangleAlert,
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
-import styles from "./sonner.module.css";
+import styles from "./toast.module.css";
 
 const DEFAULT_TOAST_DURATION = 5000;
 const DEFAULT_TOAST_LIMIT = 3;
@@ -384,7 +384,7 @@ function updateToast(toastId: ToastIdentifier, options: ToastUpdateOptions): str
   const normalizedToastId = String(toastId);
   const existingRecord = toastRecords.get(normalizedToastId);
   const mergedOptions: ToastOptions = {
-    ...(existingRecord?.options ?? {}),
+    ...existingRecord?.options,
     ...options,
   };
   const variant = options.variant ?? existingRecord?.snapshot.variant ?? "default";
@@ -594,16 +594,23 @@ function ToastViewportContent(): React.JSX.Element {
  *
  * @see {@link https://base-ui.com/react/components/toast | Base UI Toast Docs}
  */
-function Toaster({
-  className,
-  closeButton = true,
-  containerAriaLabel = DEFAULT_VIEWPORT_ARIA_LABEL,
-  duration = DEFAULT_TOAST_DURATION,
-  position = "bottom-right",
-  style,
-  toastOptions,
-  visibleToasts = DEFAULT_TOAST_LIMIT,
-}: Readonly<ToasterProps>): React.JSX.Element {
+/**
+ * Toaster is the root viewport container for displaying toast notifications.
+ * It should be rendered once at the app root level.
+ */
+const Toaster = React.forwardRef<HTMLDivElement, ToasterProps>(function Toaster(
+  {
+    className,
+    closeButton = true,
+    containerAriaLabel = DEFAULT_VIEWPORT_ARIA_LABEL,
+    duration = DEFAULT_TOAST_DURATION,
+    position = "bottom-right",
+    style,
+    toastOptions,
+    visibleToasts = DEFAULT_TOAST_LIMIT,
+  },
+  forwardedRef,
+) {
   const toasterId = React.useId();
 
   React.useEffect(() => {
@@ -624,6 +631,7 @@ function Toaster({
       toastManager={toastManager}>
       <Toast.Portal>
         <Toast.Viewport
+          ref={forwardedRef}
           aria-label={containerAriaLabel}
           className={cn(styles.viewport, positionStyles[position], className)}
           style={style}>
@@ -632,7 +640,7 @@ function Toaster({
       </Toast.Portal>
     </Toast.Provider>
   );
-}
+});
 
 Toaster.displayName = "Toaster";
 
@@ -776,5 +784,5 @@ toast.promise = async function promise<Value>(promiseValue: ToastPromise<Value>,
 toast.getToasts = (): ReadonlyArray<ToastSnapshot> => [...activeToasts.values()];
 toast.getHistory = (): ReadonlyArray<ToastSnapshot> => [...toastHistory];
 
-export type {Toast} from "@base-ui/react/toast";
+export type {Toast};
 export {toast, Toaster};

package/src/components/ui/toggle-group.tsx

@@ -63,12 +63,13 @@ export interface ToggleGroupItemProps extends Omit<ToggleProps, "pressed" | "def
  *
  * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group Docs}
  */
-function ToggleGroup(props: Readonly<ToggleGroup.Props>): React.ReactElement {
+const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroup.Props>(function ToggleGroup(props, forwardedRef) {
   const {className, children, render, size, variant, ...otherProps} = props;
 
   return (
     <BaseToggleGroup
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -77,7 +78,7 @@ function ToggleGroup(props: Readonly<ToggleGroup.Props>): React.ReactElement {
       <ToggleGroupContext.Provider value={{variant, size}}>{children}</ToggleGroupContext.Provider>
     </BaseToggleGroup>
   );
-}
+});
 
 /**
  * Renders an individual toggle item within a toggle group.
@@ -96,12 +97,13 @@ function ToggleGroup(props: Readonly<ToggleGroup.Props>): React.ReactElement {
  *
  * @see {@link https://base-ui.com/react/components/toggle-group | Base UI Toggle Group Docs}
  */
-function ToggleGroupItem(props: Readonly<ToggleGroupItem.Props>): React.ReactElement {
+const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItem.Props>(function ToggleGroupItem(props, forwardedRef) {
   const {className, size, variant, ...otherProps} = props;
   const context = React.useContext(ToggleGroupContext);
 
   return (
     <Toggle
+      ref={forwardedRef}
       className={cn(
         toggleVariants({
           variant: variant ?? context.variant,
@@ -114,7 +116,7 @@ function ToggleGroupItem(props: Readonly<ToggleGroupItem.Props>): React.ReactEle
       {...otherProps}
     />
   );
-}
+});
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ToggleGroup {

package/src/components/ui/toolbar.tsx

@@ -8,12 +8,6 @@ import * as React from "react";
 import {cn} from "@/lib/utilities";
 import styles from "./toolbar.module.css";
 
-type ToolbarProps = React.ComponentPropsWithRef<typeof BaseToolbar.Root>;
-type ToolbarButtonProps = React.ComponentPropsWithRef<typeof BaseToolbar.Button>;
-type ToolbarGroupProps = React.ComponentPropsWithRef<typeof BaseToolbar.Group>;
-type ToolbarSeparatorProps = React.ComponentPropsWithRef<typeof BaseToolbar.Separator>;
-type ToolbarLinkProps = React.ComponentPropsWithRef<typeof BaseToolbar.Link>;
-
 /**
  * Arranges related actions into a keyboard-accessible toolbar.
  *
@@ -32,12 +26,13 @@ type ToolbarLinkProps = React.ComponentPropsWithRef<typeof BaseToolbar.Link>;
  *
  * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
  */
-function Toolbar(props: Readonly<Toolbar.Props>): React.ReactElement {
+const Toolbar = React.forwardRef<HTMLDivElement, Toolbar.Props>(function Toolbar(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseToolbar.Root
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -46,7 +41,7 @@ function Toolbar(props: Readonly<Toolbar.Props>): React.ReactElement {
       {children}
     </BaseToolbar.Root>
   );
-}
+});
 
 /**
  * Renders an interactive button within a toolbar.
@@ -63,12 +58,13 @@ function Toolbar(props: Readonly<Toolbar.Props>): React.ReactElement {
  *
  * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
  */
-function ToolbarButton(props: Readonly<ToolbarButton.Props>): React.ReactElement {
+const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButton.Props>(function ToolbarButton(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseToolbar.Button
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "button",
         render: render as never,
@@ -77,7 +73,7 @@ function ToolbarButton(props: Readonly<ToolbarButton.Props>): React.ReactElement
       {children}
     </BaseToolbar.Button>
   );
-}
+});
 
 /**
  * Groups related toolbar controls into a single visual cluster.
@@ -96,12 +92,13 @@ function ToolbarButton(props: Readonly<ToolbarButton.Props>): React.ReactElement
  *
  * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
  */
-function ToolbarGroup(props: Readonly<ToolbarGroup.Props>): React.ReactElement {
+const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroup.Props>(function ToolbarGroup(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseToolbar.Group
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -110,7 +107,7 @@ function ToolbarGroup(props: Readonly<ToolbarGroup.Props>): React.ReactElement {
       {children}
     </BaseToolbar.Group>
   );
-}
+});
 
 /**
  * Renders a visual separator between toolbar items or groups.
@@ -126,12 +123,13 @@ function ToolbarGroup(props: Readonly<ToolbarGroup.Props>): React.ReactElement {
  *
  * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
  */
-function ToolbarSeparator(props: Readonly<ToolbarSeparator.Props>): React.ReactElement {
+const ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparator.Props>(function ToolbarSeparator(props, forwardedRef) {
   const {className, render, ...otherProps} = props;
 
   return (
     <BaseToolbar.Separator
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "div",
         render: render as never,
@@ -139,7 +137,7 @@ function ToolbarSeparator(props: Readonly<ToolbarSeparator.Props>): React.ReactE
       })}
     />
   );
-}
+});
 
 /**
  * Renders a link that visually matches toolbar buttons.
@@ -155,12 +153,13 @@ function ToolbarSeparator(props: Readonly<ToolbarSeparator.Props>): React.ReactE
  *
  * @see {@link https://base-ui.com/react/components/toolbar | Base UI Toolbar Docs}
  */
-function ToolbarLink(props: Readonly<ToolbarLink.Props>): React.ReactElement {
+const ToolbarLink = React.forwardRef<HTMLAnchorElement, ToolbarLink.Props>(function ToolbarLink(props, forwardedRef) {
   const {className, children, render, ...otherProps} = props;
 
   return (
     <BaseToolbar.Link
       {...otherProps}
+      ref={forwardedRef}
       render={useRender({
         defaultTagName: "a",
         render: render as never,
@@ -169,35 +168,35 @@ function ToolbarLink(props: Readonly<ToolbarLink.Props>): React.ReactElement {
       {children}
     </BaseToolbar.Link>
   );
-}
+});
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace Toolbar {
-  export type Props = ToolbarProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Root>;
   export type State = BaseToolbar.Root.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ToolbarButton {
-  export type Props = ToolbarButtonProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Button>;
   export type State = BaseToolbar.Button.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ToolbarGroup {
-  export type Props = ToolbarGroupProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Group>;
   export type State = BaseToolbar.Group.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ToolbarSeparator {
-  export type Props = ToolbarSeparatorProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Separator>;
   export type State = BaseToolbar.Separator.State;
 }
 
 // eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
 namespace ToolbarLink {
-  export type Props = ToolbarLinkProps;
+  export type Props = React.ComponentPropsWithRef<typeof BaseToolbar.Link>;
   export type State = BaseToolbar.Link.State;
 }