| ... | @@ -800,7 +800,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { | ... | @@ -800,7 +800,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { |
| 800 | } | 800 | } |
| 801 | | 801 | |
| 802 | const sidebarMenuButtonVariants = cva( | 802 | const sidebarMenuButtonVariants = cva( |
| 803 | "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground", | 803 | "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground", |
| 804 | { | 804 | { |
| 805 | defaultVariants: { | 805 | defaultVariants: { |
| 806 | size: "default", | 806 | size: "default", |
| ... | @@ -875,38 +875,6 @@ function SidebarMenuButton({ | ... | @@ -875,38 +875,6 @@ function SidebarMenuButton({ |
| 875 | ); | 875 | ); |
| 876 | } | 876 | } |
| 877 | | 877 | |
| 878 | function SidebarMenuAction({ | | |
| 879 | className, | | |
| 880 | showOnHover = false, | | |
| 881 | render, | | |
| 882 | ...props | | |
| 883 | }: useRender.ComponentProps<"button"> & { | | |
| 884 | showOnHover?: boolean; | | |
| 885 | }) { | | |
| 886 | const defaultProps = { | | |
| 887 | className: cn( | | |
| 888 | "absolute top-1.5 right-1 flex aspect-square w-5 cursor-pointer items-center justify-center rounded-lg p-0 text-sidebar-foreground outline-hidden ring-ring transition-transform hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-foreground [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0", | | |
| 889 | // Increases the hit area of the button on mobile. | | |
| 890 | "after:-inset-2 after:absolute md:after:hidden", | | |
| 891 | "peer-data-[size=sm]/menu-button:top-1", | | |
| 892 | "peer-data-[size=default]/menu-button:top-1.5", | | |
| 893 | "peer-data-[size=lg]/menu-button:top-2.5", | | |
| 894 | "group-data-[collapsible=icon]:hidden", | | |
| 895 | showOnHover && | | |
| 896 | "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-foreground md:opacity-0", | | |
| 897 | className, | | |
| 898 | ), | | |
| 899 | "data-sidebar": "menu-action", | | |
| 900 | "data-slot": "sidebar-menu-action", | | |
| 901 | }; | | |
| 902 | | | |
| 903 | return useRender({ | | |
| 904 | defaultTagName: "button", | | |
| 905 | props: mergeProps<"button">(defaultProps, props), | | |
| 906 | render, | | |
| 907 | }); | | |
| 908 | } | | |
| 909 | | | |
| 910 | function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) { | 878 | function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">) { |
| 911 | return ( | 879 | return ( |
| 912 | <div | 880 | <div |
| ... | @@ -1029,7 +997,6 @@ export { | ... | @@ -1029,7 +997,6 @@ export { |
| 1029 | SidebarInput, | 997 | SidebarInput, |
| 1030 | SidebarInset, | 998 | SidebarInset, |
| 1031 | SidebarMenu, | 999 | SidebarMenu, |
| 1032 | SidebarMenuAction, | | |
| 1033 | SidebarMenuBadge, | 1000 | SidebarMenuBadge, |
| 1034 | SidebarMenuButton, | 1001 | SidebarMenuButton, |
| 1035 | SidebarMenuItem, | 1002 | SidebarMenuItem, |