@gentleduck/registry-ui 0.2.6 → 0.2.8

package/src/sidebar/sidebar.tsx

@@ -113,112 +113,120 @@ function SidebarProvider({
     </SidebarContext.Provider>
   )
 }
+SidebarProvider.displayName = 'SidebarProvider'
+
+const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
+  (
+    {
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
+      className,
+      children,
+      dir,
+      mobileTitle = 'Sidebar',
+      mobileDescription = 'Displays the mobile sidebar.',
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+    const direction = useDirection(dir as Direction)
 
-function Sidebar({
-  side = 'left',
-  variant = 'sidebar',
-  collapsible = 'offcanvas',
-  className,
-  children,
-  dir,
-  mobileTitle = 'Sidebar',
-  mobileDescription = 'Displays the mobile sidebar.',
-  ...props
-}: SidebarProps) {
-  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-  const direction = useDirection(dir as Direction)
-
-  if (collapsible === 'none') {
-    return (
-      <div
-        dir={direction}
-        data-slot="sidebar"
-        className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}
-        {...props}>
-        {children}
-      </div>
-    )
-  }
-
-  if (isMobile) {
-    return (
-      <Sheet dir={direction} open={openMobile} onOpenChange={setOpenMobile} {...props}>
-        <SheetContent
+    if (collapsible === 'none') {
+      return (
+        <div
+          ref={ref}
           dir={direction}
-          data-sidebar="sidebar"
           data-slot="sidebar"
-          data-mobile="true"
-          className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-          style={
-            {
-              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
-            } as React.CSSProperties
-          }
-          side={side}>
-          <SheetHeader className="sr-only">
-            <SheetTitle>{mobileTitle}</SheetTitle>
-            <SheetDescription>{mobileDescription}</SheetDescription>
-          </SheetHeader>
-          <div className="flex h-full w-full flex-col">{children}</div>
-        </SheetContent>
-      </Sheet>
-    )
-  }
+          className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)}
+          {...props}>
+          {children}
+        </div>
+      )
+    }
 
-  return (
-    <div
-      dir={direction}
-      className="group peer hidden text-sidebar-foreground md:block"
-      data-state={state}
-      data-collapsible={state === 'collapsed' ? collapsible : ''}
-      data-variant={variant}
-      data-side={side}
-      data-slot="sidebar">
-      {/* This is what handles the sidebar gap on desktop */}
-      <div
-        data-slot="sidebar-gap"
-        className={cn(
-          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
-          'group-data-[collapsible=offcanvas]:w-0',
-          variant === 'floating' || variant === 'inset'
-            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
-        )}
-      />
+    if (isMobile) {
+      return (
+        <Sheet dir={direction} open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            dir={direction}
+            data-sidebar="sidebar"
+            data-slot="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}>
+            <SheetHeader className="sr-only">
+              <SheetTitle>{mobileTitle}</SheetTitle>
+              <SheetDescription>{mobileDescription}</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
       <div
-        data-slot="sidebar-container"
+        ref={ref}
+        dir={direction}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
         data-side={side}
-        className={cn(
-          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] md:flex',
-          // Adjust the padding for floating and inset variants.
-          variant === 'floating' || variant === 'inset'
-            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
-          className,
-        )}
-        {...props}>
+        data-slot="sidebar">
+        {/* This is what handles the sidebar gap on desktop */}
         <div
-          data-sidebar="sidebar"
-          data-slot="sidebar-inner"
-          className="flex size-full flex-col overflow-hidden bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border">
-          {children}
+          data-slot="sidebar-gap"
+          className={cn(
+            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+            'group-data-[collapsible=offcanvas]:w-0',
+            variant === 'floating' || variant === 'inset'
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+          )}
+        />
+        <div
+          data-slot="sidebar-container"
+          data-side={side}
+          className={cn(
+            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=right]:right-0 data-[side=left]:left-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] md:flex',
+            // Adjust the padding for floating and inset variants.
+            variant === 'floating' || variant === 'inset'
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+              : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            className,
+          )}
+          {...props}>
+          <div
+            data-sidebar="sidebar"
+            data-slot="sidebar-inner"
+            className="flex size-full flex-col overflow-hidden bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border">
+            {children}
+          </div>
         </div>
       </div>
-    </div>
-  )
-}
-
-function SidebarTrigger({
-  className,
-  onClick,
-  text = 'Toggle Sidebar',
-  ...props
-}: React.ComponentProps<typeof Button> & { text?: string }) {
+    )
+  },
+)
+Sidebar.displayName = 'Sidebar'
+
+const SidebarTrigger = React.forwardRef<
+  React.ComponentRef<typeof Button>,
+  React.ComponentPropsWithoutRef<typeof Button> & { text?: string }
+>(({ className, onClick, text = 'Toggle Sidebar', ...props }, ref) => {
   const { toggleSidebar } = useSidebar()
   const direction = useDirection()
 
   return (
     <Button
+      ref={ref}
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       variant="ghost"
@@ -234,101 +242,122 @@ function SidebarTrigger({
       <span className="sr-only">{text}</span>
     </Button>
   )
-}
+})
+SidebarTrigger.displayName = 'SidebarTrigger'
 
-function SidebarRail({
-  className,
-  text = 'Toggle Sidebar',
-  ...props
-}: React.ComponentProps<'button'> & { text?: string }) {
-  const { toggleSidebar } = useSidebar()
-  const direction = useDirection()
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<'button'> & { text?: string }>(
+  ({ className, text = 'Toggle Sidebar', ...props }, ref) => {
+    const { toggleSidebar } = useSidebar()
+    const direction = useDirection()
 
-  return (
-    <button
-      data-sidebar="rail"
-      data-slot="sidebar-rail"
-      aria-label={text}
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      dir={direction}
-      className={cn(
-        'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
-        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',
-        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
-  const direction = useDirection()
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        data-slot="sidebar-rail"
+        aria-label={text}
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        dir={direction}
+        className={cn(
+          'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
+          'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+          'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',
+          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+SidebarRail.displayName = 'SidebarRail'
 
-  return (
-    <main
-      data-slot="sidebar-inset"
-      dir={direction}
-      className={cn(
-        'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
+const SidebarInset = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<'main'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
-  const direction = useDirection()
+    return (
+      <main
+        ref={ref}
+        data-slot="sidebar-inset"
+        dir={direction}
+        className={cn(
+          'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+SidebarInset.displayName = 'SidebarInset'
 
-  return (
-    <Input
-      data-slot="sidebar-input"
-      data-sidebar="input"
-      dir={direction}
-      className={cn('h-8 w-full bg-background shadow-none', className)}
-      {...props}
-    />
-  )
-}
+const SidebarInput = React.forwardRef<React.ComponentRef<typeof Input>, React.ComponentPropsWithoutRef<typeof Input>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  const direction = useDirection()
+    return (
+      <Input
+        ref={ref}
+        data-slot="sidebar-input"
+        data-sidebar="input"
+        dir={direction}
+        className={cn('h-8 w-full bg-background shadow-none', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarInput.displayName = 'SidebarInput'
 
-  return (
-    <div
-      data-slot="sidebar-header"
-      data-sidebar="header"
-      dir={direction}
-      className={cn('flex flex-col gap-2 p-2', className)}
-      {...props}
-    />
-  )
-}
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  const direction = useDirection()
+    return (
+      <div
+        ref={ref}
+        data-slot="sidebar-header"
+        data-sidebar="header"
+        dir={direction}
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarHeader.displayName = 'SidebarHeader'
 
-  return (
-    <div
-      data-slot="sidebar-footer"
-      data-sidebar="footer"
-      dir={direction}
-      className={cn('flex flex-col gap-2 p-2', className)}
-      {...props}
-    />
-  )
-}
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+    return (
+      <div
+        ref={ref}
+        data-slot="sidebar-footer"
+        data-sidebar="footer"
+        dir={direction}
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarFooter.displayName = 'SidebarFooter'
+
+const SidebarSeparator = React.forwardRef<
+  React.ComponentRef<typeof Separator>,
+  React.ComponentPropsWithoutRef<typeof Separator>
+>(({ className, ...props }, ref) => {
   const direction = useDirection()
 
   return (
     <Separator
+      ref={ref}
       data-slot="sidebar-separator"
       data-sidebar="separator"
       dir={direction}
@@ -336,54 +365,59 @@ function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof S
       {...props}
     />
   )
-}
+})
+SidebarSeparator.displayName = 'SidebarSeparator'
 
-function SidebarContent({
-  className,
-  noScroll = true,
-  ...props
-}: React.ComponentProps<'div'> & { noScroll?: boolean }) {
-  const direction = useDirection()
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'> & { noScroll?: boolean }>(
+  ({ className, noScroll = true, ...props }, ref) => {
+    const direction = useDirection()
 
-  return (
-    <div
-      data-slot="sidebar-content"
-      data-sidebar="content"
-      dir={direction}
-      className={cn(
-        'flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-        noScroll && 'no-scrollbar',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  const direction = useDirection()
+    return (
+      <div
+        ref={ref}
+        data-slot="sidebar-content"
+        data-sidebar="content"
+        dir={direction}
+        className={cn(
+          'flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+          noScroll && 'no-scrollbar',
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+SidebarContent.displayName = 'SidebarContent'
 
-  return (
-    <div
-      data-slot="sidebar-group"
-      data-sidebar="group"
-      dir={direction}
-      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-      {...props}
-    />
-  )
-}
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-function SidebarGroupLabel({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+    return (
+      <div
+        ref={ref}
+        data-slot="sidebar-group"
+        data-sidebar="group"
+        dir={direction}
+        className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarGroup.displayName = 'SidebarGroup'
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : 'div'
   const direction = useDirection()
 
   return (
     <Comp
+      ref={ref}
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       dir={direction}
@@ -394,18 +428,19 @@ function SidebarGroupLabel({
       {...props}
     />
   )
-}
+})
+SidebarGroupLabel.displayName = 'SidebarGroupLabel'
 
-function SidebarGroupAction({
-  className,
-  asChild = false,
-  ...props
-}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : 'button'
   const direction = useDirection()
 
   return (
     <Comp
+      ref={ref}
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       dir={direction}
@@ -416,112 +451,125 @@ function SidebarGroupAction({
       {...props}
     />
   )
-}
+})
+SidebarGroupAction.displayName = 'SidebarGroupAction'
 
-function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
-  const direction = useDirection()
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-  return (
-    <div
-      data-slot="sidebar-group-content"
-      data-sidebar="group-content"
-      dir={direction}
-      className={cn('w-full text-sm', className)}
-      {...props}
-    />
-  )
-}
+    return (
+      <div
+        ref={ref}
+        data-slot="sidebar-group-content"
+        data-sidebar="group-content"
+        dir={direction}
+        className={cn('w-full text-sm', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarGroupContent.displayName = 'SidebarGroupContent'
 
-function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
-  const direction = useDirection()
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-  return (
-    <ul
-      data-slot="sidebar-menu"
-      data-sidebar="menu"
-      dir={direction}
-      className={cn('flex w-full min-w-0 flex-col gap-0', className)}
-      {...props}
-    />
-  )
-}
+    return (
+      <ul
+        ref={ref}
+        data-slot="sidebar-menu"
+        data-sidebar="menu"
+        dir={direction}
+        className={cn('flex w-full min-w-0 flex-col gap-0', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarMenu.displayName = 'SidebarMenu'
 
-function SidebarMenuItem({ className, dir, ...props }: React.ComponentProps<'li'>) {
-  const direction = useDirection(dir as Direction)
-  return (
-    <li
-      data-slot="sidebar-menu-item"
-      dir={direction}
-      data-sidebar="menu-item"
-      className={cn('group/menu-item relative focus-within:z-10', className)}
-      {...props}
-    />
-  )
-}
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <li
+        ref={ref}
+        data-slot="sidebar-menu-item"
+        dir={direction}
+        data-sidebar="menu-item"
+        className={cn('group/menu-item relative focus-within:z-10', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarMenuItem.displayName = 'SidebarMenuItem'
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<'button'> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    { asChild = false, isActive = false, variant = 'default', size = 'default', tooltip, dir, className, ...props },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button'
+    const { isMobile, state } = useSidebar()
+    const direction = useDirection(dir as Direction)
+    const fallbackTooltipSide = direction === 'rtl' ? 'left' : 'right'
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-slot="sidebar-menu-button"
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive || undefined}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
 
-function SidebarMenuButton({
-  asChild = false,
-  isActive = false,
-  variant = 'default',
-  size = 'default',
-  tooltip,
-  dir,
-  className,
-  ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean
-  isActive?: boolean
-  tooltip?: string | React.ComponentProps<typeof TooltipContent>
-} & VariantProps<typeof sidebarMenuButtonVariants>) {
-  const Comp = asChild ? Slot : 'button'
-  const { isMobile, state } = useSidebar()
-  const direction = useDirection(dir as Direction)
-  const fallbackTooltipSide = direction === 'rtl' ? 'left' : 'right'
+    if (!tooltip) {
+      return button
+    }
 
-  const button = (
-    <Comp
-      data-slot="sidebar-menu-button"
-      data-sidebar="menu-button"
-      data-size={size}
-      data-active={isActive || undefined}
-      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-      {...props}
-    />
-  )
+    const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip
 
-  if (!tooltip) {
-    return button
+    return (
+      <Tooltip dir={direction}>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side={fallbackTooltipSide}
+          align="center"
+          hidden={state !== 'collapsed' || isMobile}
+          {...tooltipProps}
+        />
+      </Tooltip>
+    )
+  },
+)
+SidebarMenuButton.displayName = 'SidebarMenuButton'
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<'button'> & {
+    asChild?: boolean
+    showOnHover?: boolean
   }
-
-  const tooltipProps = typeof tooltip === 'string' ? { children: tooltip } : tooltip
-
-  return (
-    <Tooltip dir={direction}>
-      <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        side={fallbackTooltipSide}
-        align="center"
-        hidden={state !== 'collapsed' || isMobile}
-        {...tooltipProps}
-      />
-    </Tooltip>
-  )
-}
-
-function SidebarMenuAction({
-  className,
-  asChild = false,
-  showOnHover = false,
-  ...props
-}: React.ComponentProps<'button'> & {
-  asChild?: boolean
-  showOnHover?: boolean
-}) {
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? Slot : 'button'
   const direction = useDirection()
 
   return (
     <Comp
+      ref={ref}
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       dir={direction}
@@ -534,32 +582,34 @@ function SidebarMenuAction({
       {...props}
     />
   )
-}
+})
+SidebarMenuAction.displayName = 'SidebarMenuAction'
 
-function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
-  const direction = useDirection()
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    const direction = useDirection()
 
-  return (
-    <div
-      data-slot="sidebar-menu-badge"
-      data-sidebar="menu-badge"
-      dir={direction}
-      className={cn(
-        'pointer-events-none absolute end-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function SidebarMenuSkeleton({
-  className,
-  showIcon = false,
-  ...props
-}: React.ComponentProps<'div'> & {
-  showIcon?: boolean
-}) {
+    return (
+      <div
+        ref={ref}
+        data-slot="sidebar-menu-badge"
+        data-sidebar="menu-badge"
+        dir={direction}
+        className={cn(
+          'pointer-events-none absolute end-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+SidebarMenuBadge.displayName = 'SidebarMenuBadge'
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & { showIcon?: boolean }
+>(({ className, showIcon = false, ...props }, ref) => {
   const direction = useDirection()
 
   // Random width between 50 to 90%.
@@ -569,6 +619,7 @@ function SidebarMenuSkeleton({
 
   return (
     <div
+      ref={ref}
       data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
       dir={direction}
@@ -586,55 +637,61 @@ function SidebarMenuSkeleton({
       />
     </div>
   )
-}
-
-function SidebarMenuSub({ className, dir, ...props }: React.ComponentProps<'ul'>) {
-  const direction = useDirection(dir as Direction)
+})
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'
 
-  return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      data-sidebar="menu-sub"
-      dir={direction}
-      className={cn(
-        'mx-3.5 flex min-w-0 flex-col gap-1 border-sidebar-border border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden ltr:translate-x-px rtl:-translate-x-px',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
 
-function SidebarMenuSubItem({ className, dir, ...props }: React.ComponentProps<'li'>) {
-  const direction = useDirection(dir as Direction)
-  return (
-    <li
-      data-slot="sidebar-menu-sub-item"
-      data-sidebar="menu-sub-item"
-      dir={direction}
-      className={cn('group/menu-sub-item relative focus-within:z-10', className)}
-      {...props}
-    />
-  )
-}
+    return (
+      <ul
+        ref={ref}
+        data-slot="sidebar-menu-sub"
+        data-sidebar="menu-sub"
+        dir={direction}
+        className={cn(
+          'mx-3.5 flex min-w-0 flex-col gap-1 border-sidebar-border border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden ltr:translate-x-px rtl:-translate-x-px',
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+SidebarMenuSub.displayName = 'SidebarMenuSub'
 
-function SidebarMenuSubButton({
-  asChild = false,
-  size = 'md',
-  isActive = false,
-  className,
-  dir,
-  ...props
-}: React.ComponentProps<'a'> & {
-  asChild?: boolean
-  size?: 'sm' | 'md'
-  isActive?: boolean
-}) {
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <li
+        ref={ref}
+        data-slot="sidebar-menu-sub-item"
+        data-sidebar="menu-sub-item"
+        dir={direction}
+        className={cn('group/menu-sub-item relative focus-within:z-10', className)}
+        {...props}
+      />
+    )
+  },
+)
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean
+    size?: 'sm' | 'md'
+    isActive?: boolean
+  }
+>(({ asChild = false, size = 'md', isActive = false, className, dir, ...props }, ref) => {
   const Comp = asChild ? Slot : 'a'
   const direction = useDirection(dir as Direction)
 
   return (
     <Comp
+      ref={ref}
       data-slot="sidebar-menu-sub-button"
       data-sidebar="menu-sub-button"
       data-size={size}
@@ -647,7 +704,8 @@ function SidebarMenuSubButton({
       {...props}
     />
   )
-}
+})
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'
 
 export {
   Sidebar,