feat: added menu title

src/Menu/Menu.stories.tsx

@@ -12,9 +12,9 @@ export const Default: Story<MenuProps> = (args) => {
   return (
     <div className="bg-base-200">
       <Menu {...args} className="bg-base-100 w-56">
-        <Menu.Item title>
+        <Menu.Title>
           <a>This is a title</a>
-        </Menu.Item>
+        </Menu.Title>
         <Menu.Item>
           <a>Item 1</a>
         </Menu.Item>

src/Menu/Menu.tsx

@@ -4,8 +4,10 @@ import { twMerge } from 'tailwind-merge'
 
 import { IComponentBaseProps, ComponentSize } from '../types'
 
+import MenuTitle, { MenuTitleProps as TitleProps } from './MenuTitle'
 import MenuItem, { MenuItemProps as ItemProps } from './MenuItem'
 
+export type MenuTitleProps = TitleProps
 export type MenuItemProps = ItemProps
 
 export type MenuProps = React.HTMLAttributes<HTMLUListElement> &
@@ -78,6 +80,7 @@ const Menu = ({
   return <ul className={classes} {...props} />
 }
 
+Menu.Title = MenuTitle
 Menu.Item = MenuItem
 
 export default Menu

src/Menu/MenuItem.tsx

@@ -6,15 +6,13 @@ import { IComponentBaseProps } from '../types'
 
 export type MenuItemProps = React.LiHTMLAttributes<HTMLLIElement> &
   IComponentBaseProps & {
-    title?: boolean
     disabled?: boolean
   }
 
-const MenuItem = ({ className, title, disabled, ...props }: MenuItemProps) => {
+const MenuItem = ({ className, disabled, ...props }: MenuItemProps) => {
   const classes = twMerge(
     className,
     clsx({
-      'menu-title': title,
       disabled: disabled,
     })
   )

src/Menu/MenuTitle.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
+
+import { IComponentBaseProps } from '../types'
+
+export type MenuTitleProps = React.LiHTMLAttributes<HTMLLIElement> &
+  IComponentBaseProps
+
+const MenuTitle = ({ className, ...props }: MenuTitleProps) => {
+  const classes = twMerge(
+    'menu-title',
+    className,
+  )
+
+  return <li className={classes} {...props} />
+}
+
+export default MenuTitle