@rescui/menu 0.13.6 → 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14

package/README.md

@@ -1,3 +1,5 @@
 # Menu
 
-* [Usage examples](./docs/demo.md)
+## LLM
+
+To get the docs for the LLM, check out [this index](./llm/index.md).

package/lib/index.css

@@ -1,10 +1,10 @@
-._themeLight_1pzyeke_8{
+._themeLight_1be69r7_8{
   --rs-theme-dark:0;
 }
-._themeDark_1pzyeke_11{
+._themeDark_1be69r7_11{
   --rs-theme-dark:1;
 }
-._sizeS_1pzyeke_15{
+._sizeS_1be69r7_15{
   --_rs-menu-mi-icon-offset:8px;
   --_rs-menu-mi-icon-size:20px;
   --_rs-menu-mi-vertical-padding:6px;
@@ -43,7 +43,7 @@
   --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
   --_rs-typography-link-border-bottom-width-from-text:1px;
 }
-._sizeM_1pzyeke_18{
+._sizeM_1be69r7_18{
   --_rs-menu-mi-icon-offset:8px;
   --_rs-menu-mi-icon-size:24px;
   --_rs-menu-mi-vertical-padding:8px;
@@ -86,11 +86,11 @@
   --_rs-typography-link-border-bottom-width-from-text:1px;
 }
 @media screen and (max-width: 640px){
-._sizeM_1pzyeke_18{
+._sizeM_1be69r7_18{
     --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
 }
   }
-._sizeL_1pzyeke_21{
+._sizeL_1be69r7_21{
   --_rs-menu-mi-icon-offset:16px;
   --_rs-menu-mi-icon-size:28px;
   --_rs-menu-mi-vertical-padding:12px;
@@ -133,11 +133,11 @@
   --_rs-typography-link-border-bottom-width-from-text:1px;
 }
 @media screen and (max-width: 640px){
-._sizeL_1pzyeke_21{
+._sizeL_1be69r7_21{
     --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
 }
   }
-._modeClassic_1pzyeke_25{
+._modeClassic_1be69r7_25{
   --_rs-menu-mi-horizontal-padding-with-mode:var(
     --_rs-menu-mi-horizontal-padding
   );
@@ -151,7 +151,7 @@
     calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
   );
 }
-._modeRock_1pzyeke_28{
+._modeRock_1be69r7_28{
   --_rs-menu-mi-horizontal-padding-with-mode:var(
     --_rs-menu-mi-horizontal-padding
   );
@@ -165,7 +165,7 @@
     calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
   );
 }
-._modeClear_1pzyeke_31{
+._modeClear_1be69r7_31{
   --_rs-menu-mi-horizontal-padding-with-mode:0;
   --_rs-menu-mi-active-background:none;
   --_rs-menu-mi-selected-color:var(--_rs-color-primary);
@@ -178,15 +178,15 @@
     0.1
   );
 }
-._iconPlacementLeft_1pzyeke_35{
+._iconPlacementLeft_1be69r7_35{
   --_rs-menu-mi-flex-direction:row;
   --_rs-menu-mi-justify-content:initial;
 }
-._iconPlacementRight_1pzyeke_39{
+._iconPlacementRight_1be69r7_39{
   --_rs-menu-mi-flex-direction:row-reverse;
   --_rs-menu-mi-justify-content:space-between;
 }
-._wrapper_1pzyeke_43{
+._wrapper_1be69r7_43{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -196,7 +196,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._wrapper_1pzyeke_43{
+._wrapper_1be69r7_43{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -205,7 +205,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._wrapper_1pzyeke_43{
+._wrapper_1be69r7_43{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -213,11 +213,11 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._wrapper_1pzyeke_43 {
+._wrapper_1be69r7_43 {
 
   display:flex;
 }
-._menuItem_1pzyeke_50{
+._menuItem_1be69r7_50{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -258,52 +258,52 @@
   -webkit-font-smoothing:inherit;
   -moz-osx-font-smoothing:inherit;
 }
-._menuItem_1pzyeke_50:focus{
+._menuItem_1be69r7_50:focus{
     outline:none;
   }
-._keyboardNavigationDisabled_1pzyeke_85 ._menuItem_1pzyeke_50:focus[data-focus-method='key']{
+._keyboardNavigationDisabled_1be69r7_85 ._menuItem_1be69r7_50:focus[data-focus-method='key']{
     box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
   }
-._menuItem_1pzyeke_50:active{
+._menuItem_1be69r7_50:active{
     color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
     background:var(--_rs-menu-mi-active-background);
   }
-._menuItem_1pzyeke_50._selected_1pzyeke_99{
+._menuItem_1be69r7_50._selected_1be69r7_99{
     color:var(--_rs-menu-mi-selected-color);
     background:var(--_rs-menu-mi-selected-background);
   }
-._menuItem_1pzyeke_50._highlighted_1pzyeke_106,
-  ._menuItem_1pzyeke_50:not(._disableCursor_1pzyeke_107):hover{
+._menuItem_1be69r7_50._highlighted_1be69r7_106,
+  ._menuItem_1be69r7_50:not(._disableCursor_1be69r7_107):hover{
     color:var(--_rs-menu-mi-hover-color);
     background:var(--_rs-menu-mi-hover-background);
   }
-._menuItem_1pzyeke_50._highlighted_1pzyeke_106._selected_1pzyeke_99,
-  ._menuItem_1pzyeke_50._selected_1pzyeke_99:not(._disableCursor_1pzyeke_107):hover{
+._menuItem_1be69r7_50._highlighted_1be69r7_106._selected_1be69r7_99,
+  ._menuItem_1be69r7_50._selected_1be69r7_99:not(._disableCursor_1be69r7_107):hover{
     color:var(--_rs-menu-mi-selected-hover-color);
     background-color:var(--_rs-menu-mi-selected-hover-background);
   }
-._menuItem_1pzyeke_50._disabled_1pzyeke_120{
+._menuItem_1be69r7_50._disabled_1be69r7_120{
     pointer-events:none;
 
     color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
   }
-._disableCursor_1pzyeke_107{
+._disableCursor_1be69r7_107{
   pointer-events:none;
 }
-._content_1pzyeke_131{
+._content_1be69r7_131{
   flex-grow:1;
 
   font-size:inherit;
 }
-._icon_1pzyeke_35{
+._icon_1be69r7_35{
   flex:0 0;
   flex-basis:auto;
 }
-._icon_1pzyeke_35._resizedIcon_1pzyeke_141{
+._icon_1be69r7_35._resizedIcon_1be69r7_141{
     width:auto;
     height:var(--_rs-menu-mi-icon-size);
   }
-._divider_1pzyeke_149{
+._divider_1be69r7_149{
   flex-shrink:0;
 
   width:100%;
@@ -314,13 +314,13 @@
 
   background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
 }
-._groupHeaderThemeLight_1pzyeke_163{
+._groupHeaderThemeLight_1be69r7_163{
   --rs-theme-dark:0;
 }
-._groupHeaderThemeDark_1pzyeke_166{
+._groupHeaderThemeDark_1be69r7_166{
   --rs-theme-dark:1;
 }
-._groupHeaderSizeL_1pzyeke_170{
+._groupHeaderSizeL_1be69r7_170{
   --_rs-menu-gh-vertical-padding:12px;
   --_rs-menu-gh-horizontal-padding:16px;
   --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -354,7 +354,7 @@
   --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
   --_rs-typography-link-border-bottom-width-from-text:2px;
 }
-._groupHeaderSizeM_1pzyeke_173{
+._groupHeaderSizeM_1be69r7_173{
   --_rs-menu-gh-vertical-padding:8px;
   --_rs-menu-gh-horizontal-padding:16px;
   --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -388,7 +388,7 @@
   --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
   --_rs-typography-link-border-bottom-width-from-text:2px;
 }
-._groupHeaderSizeS_1pzyeke_176{
+._groupHeaderSizeS_1be69r7_176{
   --_rs-menu-gh-vertical-padding:6px;
   --_rs-menu-gh-horizontal-padding:8px;
   --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -422,7 +422,7 @@
   --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
   --_rs-typography-link-border-bottom-width-from-text:2px;
 }
-._groupHeader_1pzyeke_163{
+._groupHeader_1be69r7_163{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -432,7 +432,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._groupHeader_1pzyeke_163{
+._groupHeader_1be69r7_163{
     --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
     --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -441,7 +441,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._groupHeader_1pzyeke_163{
+._groupHeader_1be69r7_163{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -449,7 +449,7 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._groupHeader_1pzyeke_163 {
+._groupHeader_1be69r7_163 {
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)

package/lib/menu.p.module.css.js

@@ -1,30 +1,30 @@
 var styles = {
-  "themeLight": "_themeLight_1pzyeke_8",
-  "themeDark": "_themeDark_1pzyeke_11",
-  "sizeS": "_sizeS_1pzyeke_15",
-  "sizeM": "_sizeM_1pzyeke_18",
-  "sizeL": "_sizeL_1pzyeke_21",
-  "modeClassic": "_modeClassic_1pzyeke_25",
-  "modeRock": "_modeRock_1pzyeke_28",
-  "modeClear": "_modeClear_1pzyeke_31",
-  "iconPlacementLeft": "_iconPlacementLeft_1pzyeke_35",
-  "iconPlacementRight": "_iconPlacementRight_1pzyeke_39",
-  "wrapper": "_wrapper_1pzyeke_43",
-  "menuItem": "_menuItem_1pzyeke_50",
-  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1pzyeke_85",
-  "selected": "_selected_1pzyeke_99",
-  "highlighted": "_highlighted_1pzyeke_106",
-  "disableCursor": "_disableCursor_1pzyeke_107",
-  "disabled": "_disabled_1pzyeke_120",
-  "content": "_content_1pzyeke_131",
-  "icon": "_icon_1pzyeke_35",
-  "resizedIcon": "_resizedIcon_1pzyeke_141",
-  "divider": "_divider_1pzyeke_149",
-  "groupHeaderThemeLight": "_groupHeaderThemeLight_1pzyeke_163",
-  "groupHeaderThemeDark": "_groupHeaderThemeDark_1pzyeke_166",
-  "groupHeaderSizeL": "_groupHeaderSizeL_1pzyeke_170",
-  "groupHeaderSizeM": "_groupHeaderSizeM_1pzyeke_173",
-  "groupHeaderSizeS": "_groupHeaderSizeS_1pzyeke_176",
-  "groupHeader": "_groupHeader_1pzyeke_163"
+  "themeLight": "_themeLight_1be69r7_8",
+  "themeDark": "_themeDark_1be69r7_11",
+  "sizeS": "_sizeS_1be69r7_15",
+  "sizeM": "_sizeM_1be69r7_18",
+  "sizeL": "_sizeL_1be69r7_21",
+  "modeClassic": "_modeClassic_1be69r7_25",
+  "modeRock": "_modeRock_1be69r7_28",
+  "modeClear": "_modeClear_1be69r7_31",
+  "iconPlacementLeft": "_iconPlacementLeft_1be69r7_35",
+  "iconPlacementRight": "_iconPlacementRight_1be69r7_39",
+  "wrapper": "_wrapper_1be69r7_43",
+  "menuItem": "_menuItem_1be69r7_50",
+  "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1be69r7_85",
+  "selected": "_selected_1be69r7_99",
+  "highlighted": "_highlighted_1be69r7_106",
+  "disableCursor": "_disableCursor_1be69r7_107",
+  "disabled": "_disabled_1be69r7_120",
+  "content": "_content_1be69r7_131",
+  "icon": "_icon_1be69r7_35",
+  "resizedIcon": "_resizedIcon_1be69r7_141",
+  "divider": "_divider_1be69r7_149",
+  "groupHeaderThemeLight": "_groupHeaderThemeLight_1be69r7_163",
+  "groupHeaderThemeDark": "_groupHeaderThemeDark_1be69r7_166",
+  "groupHeaderSizeL": "_groupHeaderSizeL_1be69r7_170",
+  "groupHeaderSizeM": "_groupHeaderSizeM_1be69r7_173",
+  "groupHeaderSizeS": "_groupHeaderSizeS_1be69r7_176",
+  "groupHeader": "_groupHeader_1be69r7_163"
 };
 export { styles as default };

package/llm/components/menu.md

@@ -0,0 +1,237 @@
+# Menu (Deprecated)
+
+Deprecated: to get a side menu, use [this component](https://github.com/JetBrains/RescUI/tree/RUI-243-Rework-Menu-component/site/components/menu) instead.
+
+A menu is a group of elements consisting of actions and links, represented by combinations of icons and text.
+
+## Usage
+
+### Features showcase
+
+#### Example
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+
+<Menu style={{ maxWidth: 200 }}>
+  <MenuItem icon={<CartOutlineIcon />}>Cart</MenuItem>
+  <MenuItem icon={<BugOutlineIcon />}>Bug</MenuItem>
+  <MenuItem icon={<PersonOutlineIcon />}>Person</MenuItem>
+  <MenuItem icon={<TeamOutlineIcon />}>Team</MenuItem>
+  <MenuItem icon={<SuccessOutlineIcon />}>Success</MenuItem>
+</Menu>;
+```
+
+#### With glow hover and mode rock
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+import { useGlowHover } from '@rescui/use-glow-hover';
+
+const GlowMenuItem = props => {
+  const ref = useGlowHover({
+    preset: 'bright-pink',
+    lightSizeEnterAnimationTime: 0,
+    lightSizeLeaveAnimationTime: 0,
+    enableBurst: true
+  });
+  return <MenuItem {...props} ref={ref} />;
+};
+
+const Demo = () => (
+  <Menu mode="rock" style={{ maxWidth: 200 }}>
+    <GlowMenuItem icon={<CartOutlineIcon />}>Cart</GlowMenuItem>
+    <GlowMenuItem icon={<BugOutlineIcon />}>Bug</GlowMenuItem>
+    <GlowMenuItem icon={<PersonOutlineIcon />}>Person</GlowMenuItem>
+    <GlowMenuItem icon={<TeamOutlineIcon />}>Team</GlowMenuItem>
+    <GlowMenuItem icon={<SuccessOutlineIcon />}>Success</GlowMenuItem>
+  </Menu>
+);
+
+render(<Demo />);
+```
+
+#### Change size
+
+If you want to change a size of the menu and items content, you should use `resizeIcons` prop.
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+
+<Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
+  <MenuItem icon={<CartOutlineIcon />}>Cart</MenuItem>
+  <MenuItem icon={<BugOutlineIcon />}>Bug</MenuItem>
+  <MenuItem icon={<PersonOutlineIcon />}>Person</MenuItem>
+  <MenuItem icon={<TeamOutlineIcon />}>Team</MenuItem>
+  <MenuItem icon={<SuccessOutlineIcon />}>Success</MenuItem>
+</Menu>;
+```
+
+## CSS Mixins API
+
+#### `Menu` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-menu-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-menu-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-menu-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-menu-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-menu-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-menu-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
+| `rs-menu-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"left"` |
+| `rs-menu-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"right"` |
+
+##### Demo
+
+Use the controls to see the effect at different viewport widths.
+
+```tsx
+import { Menu, MenuItem } from '@rescui/menu';
+import {
+  PersonOutlineIcon,
+  CartOutlineIcon,
+  BugOutlineIcon,
+  TeamOutlineIcon,
+  SuccessOutlineIcon
+} from '@rescui/icons';
+
+const MyMenu = () => {
+  return (
+    <Menu
+      mode="rock"
+      size="l"
+      iconPlacement={'left'}
+      style={{ maxWidth: 300 }}
+      className="my-menu"
+    >
+      <MenuItem icon={<CartOutlineIcon size="l" className="icon" />}>
+        Cart
+      </MenuItem>
+      <MenuItem icon={<BugOutlineIcon size="l" className="icon" />}>
+        Bug
+      </MenuItem>
+      <MenuItem icon={<PersonOutlineIcon size="l" className="icon" />}>
+        Person
+      </MenuItem>
+      <MenuItem icon={<TeamOutlineIcon size="l" className="icon" />}>
+        Team
+      </MenuItem>
+      <MenuItem icon={<SuccessOutlineIcon size="l" className="icon" />}>
+        Success
+      </MenuItem>
+    </Menu>
+  );
+};
+
+render(<MyMenu />);
+```
+
+```postcss attached
+@import '@rescui/menu/lib/public-api.p.css';
+@import '@rescui/icons/lib/public-api.p.css';
+
+.my-menu {
+  @media (max-width: 640px) {
+    @mixin rs-menu-size-s;
+    @mixin rs-menu-mode-classic;
+    @mixin rs-menu-icon-placement-right;
+
+    .icon {
+      @mixin rs-icon-size-s;
+    }
+  }
+  @media (max-width: 500px) {
+    @mixin rs-menu-size-m;
+    @mixin rs-menu-mode-clear;
+    @mixin rs-menu-icon-placement-left;
+
+    .icon {
+      @mixin rs-icon-size-m;
+    }
+  }
+}
+```
+
+#### `MenuItem` mixins
+
+| Mixin name | Details |
+| --- | --- |
+| `rs-menu-item-size-s` | prop: `size`<br><br>value: `"s"` |
+| `rs-menu-item-size-m` | prop: `size`<br><br>value: `"m"` |
+| `rs-menu-item-size-l` | prop: `size`<br><br>value: `"l"` |
+| `rs-menu-item-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
+| `rs-menu-item-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
+| `rs-menu-item-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
+| `rs-menu-item-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"right"` |
+| `rs-menu-item-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"left"` |
+
+##### Demo
+
+Use the controls to see the effect at different viewport widths.
+
+```tsx
+import { MenuItem } from '@rescui/menu';
+import { PersonOutlineIcon } from '@rescui/icons';
+
+const MyMenuItem = () => {
+  return (
+    <MenuItem
+      icon={<PersonOutlineIcon size="l" className="icon" />}
+      className="my-menu-item"
+      style={{ maxWidth: 300 }}
+    >
+      Item
+    </MenuItem>
+  );
+};
+
+render(<MyMenuItem />);
+```
+
+```postcss
+@import '@rescui/menu/lib/public-api.p.css';
+@import '@rescui/icons/lib/public-api.p.css';
+
+.my-menu-item {
+  @media (max-width: 640px) {
+    @mixin rs-menu-item-size-s;
+    @mixin rs-menu-item-mode-classic;
+    @mixin rs-menu-item-icon-placement-right;
+
+    .icon {
+      @mixin rs-icon-size-s;
+    }
+  }
+  @media (max-width: 500px) {
+    @mixin rs-menu-item-size-m;
+    @mixin rs-menu-item-mode-clear;
+    @mixin rs-menu-item-icon-placement-left;
+
+    .icon {
+      @mixin rs-icon-size-m;
+    }
+  }
+}
+```

package/llm/index.md

@@ -0,0 +1,2 @@
+- Components and Hooks
+  - [Menu](./components/menu.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/menu",
-  "version": "0.13.6",
+  "version": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -9,6 +9,7 @@
   "src:main": "src/index.ts",
   "files": [
     "lib",
+    "llm",
     "LICENSE.txt"
   ],
   "publishConfig": {
@@ -22,14 +23,14 @@
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
     "prop-types": "^15",
-    "react": ">=16.8.0 <20"
+    "react": ">=17.0.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.1",
-    "@rescui/postcss-preset-library": "^0.2.2",
-    "@rescui/scripts": "^0.5.2",
-    "@rescui/typography": "^0.27.1",
-    "@rescui/visual-regression": "^0.1.4",
+    "@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/postcss-preset-library": "0.2.2",
+    "@rescui/scripts": "0.5.2",
+    "@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14+dbbefd7b8",
+    "@rescui/visual-regression": "0.1.4",
     "postcss": "^8.3.0"
   },
   "scripts": {
@@ -37,5 +38,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "a04f6790abce8e72834eedce3512ee83513c5e78"
+  "gitHead": "dbbefd7b8e24da18262edf3baffa35039ae01af3"
 }