| 556 | } |
| 557 | |
| 558 | function SidebarMenuAction({ |
| 559 | className, |
| 560 | showOnHover = false, |
| 561 | render, |
| 562 | ...props |
| 563 | }: useRender.ComponentProps<"button"> & { |
| 564 | showOnHover?: boolean; |
| 565 | }) { |
| 566 | const defaultProps = { |
| 567 | className: cn( |
| 568 | "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", |
| 569 | // Increases the hit area of the button on mobile. |
| 570 | "after:-inset-2 after:absolute md:after:hidden", |
| 571 | "peer-data-[size=sm]/menu-button:top-1", |
| 572 | "peer-data-[size=default]/menu-button:top-1.5", |
| 573 | "peer-data-[size=lg]/menu-button:top-2.5", |
| 574 | "group-data-[collapsible=icon]:hidden", |
| 575 | showOnHover && |
| 576 | "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", |
| 577 | className, |
| 578 | ), |
| 579 | "data-sidebar": "menu-action", |
| 580 | "data-slot": "sidebar-menu-action", |
| 581 | }; |
| 582 | |
| 583 | return useRender({ |
| 584 | defaultTagName: "button", |
| 585 | props: mergeProps<"button">(defaultProps, props), |
| 586 | render, |
| 587 | }); |
| 588 | } |
| 589 | |
| 590 | function SidebarMenuBadge({ |
| 591 | className, |