@redis-ui/components 42.8.0 → 43.2.1

package/skills/redis-ui-components/references/Menu.md

@@ -0,0 +1,988 @@
+# Menu
+
+Dropdown menu with customizable placement and content.
+
+## Import
+
+```tsx
+import { Menu } from '@redislabsdev/redis-ui-components';
+```
+
+## Props
+
+### Menu
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Trigger and content nodes rendered inside the menu |
+| open | `boolean` | - | Controlled open state |
+| defaultOpen | `boolean` | - | Uncontrolled initial open state |
+| onOpenChange | `(open: boolean) => void` | - | Called when the menu open state changes |
+| modal | `boolean` | `false` | Whether the dropdown behaves as a modal menu |
+| disabled | `boolean` | `undefined` | Disables the menu and forces it closed through menu context |
+
+### Menu.Trigger
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| withButton | `boolean` | `false` | Renders an invisible button wrapper for multi-element or custom trigger content |
+
+`Menu.Trigger` also accepts the button-element props from `ComposeElementProps<HTMLButtonElement>`.
+
+### Menu.Trigger.Arrow
+
+`Menu.Trigger.Arrow` inherits `MonochromeIconProps`. It renders the chevron icon used in the trigger and rotates with menu state. The icon defaults to a down chevron and uses size `M`.
+
+### Menu.Content
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Menu items and composition blocks rendered inside the dropdown panel |
+| sideOffset | `number` | `5` | Offset from the trigger on the placement side |
+| placement | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Preferred menu side relative to the trigger |
+| align | `'start' \| 'center' \| 'end'` | `'center'` | Alignment of the dropdown panel on the placement axis |
+| alignOffset | `number` | - | Extra alignment offset |
+| portal | `HTMLElement` | `document.body` | Portal container used for rendering the dropdown panel |
+| onFocusOutside | `(event: Event) => void` | - | Called when focus leaves the dropdown content |
+| onCloseAutoFocus | `(event: Event) => void` | - | Called before Radix restores focus after closing |
+| onInteractOutside | `(event: Event) => void` | - | Called when the user interacts outside the dropdown |
+| collisionBoundary | `DropdownMenu.DropdownMenuContentProps['collisionBoundary']` | - | Collision boundary forwarded to Radix positioning |
+
+`Menu.Content` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### Menu.Content.Item
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| text | `React.ReactNode` | required for regular items | Main item text; optional when `subHead` is used |
+| subHead | `React.ReactNode` | - | Left-side header text that switches the item layout |
+| icon | `IconType` | - | Leading icon for the item |
+| description | `React.ReactNode` | - | Trailing description text |
+| selected | `boolean` | `false` | Marks the item as selected and non-clickable |
+| isSelected | `boolean` | `false` | Deprecated alias for `selected` |
+| variant | `'primary' \| 'destructive'` | `'primary'` | Visual variant for the item |
+| shift | `number \| string` | `0` | Adds left padding using the menu level offset |
+| disabled | `boolean` | `false` | Disables the item |
+| onSelect | `() => void` | - | Called when the menu item is selected |
+
+`Menu.Content.Item` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### Menu.Content.Item.Compose
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Building blocks that compose the custom item layout |
+| disabled | `boolean` | `false` | Disables the composed item |
+| onSelect | `() => void` | - | Called when the item is selected |
+| selected | `boolean` | `false` | Marks the item as selected and prevents interaction |
+| isSelected | `boolean` | `false` | Deprecated alias for `selected` |
+| variant | `'primary' \| 'destructive'` | `'primary'` | Visual variant for the item container |
+| shift | `number \| string` | `0` | Adds left padding using the menu level offset |
+
+`Menu.Content.Item.Compose` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### Menu.Content.Item.Text
+
+`Menu.Content.Item.Text` inherits `Typography.Body` props.
+
+### Menu.Content.Item.Icon
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | required | Icon rendered inside the item |
+
+`Menu.Content.Item.Icon` also accepts monochrome icon props such as `title`, `color`, and `customSize`.
+
+### Menu.Content.Item.SubHead
+
+`Menu.Content.Item.SubHead` uses the same props as `Menu.Content.Item.Text`, but renders the text with semi-bold body typography.
+
+### Menu.Content.Item.Check
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | `CheckBoldIcon` | Icon rendered for the selected-state check mark |
+
+`Menu.Content.Item.Check` also accepts monochrome icon props.
+
+### Menu.Content.Item.Split
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| minWidth | `string \| number \| undefined` | - | Optional minimum width used when splitting item content |
+
+`Menu.Content.Item.Split` also accepts native `HTMLAttributes<HTMLDivElement>` props.
+
+### Menu.Content.Label
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| text | `React.ReactNode` | `children` | Label text; strings are rendered with the label text style |
+| icon | `IconType` | - | Leading icon for the label |
+| variant | `'header' \| 'sub'` | `'header'` | Label variant |
+| shift | `number \| string` | `0` | Adds left padding using the menu label level offset |
+| children | `React.ReactNode` | deprecated | Deprecated alias for `text` |
+
+### Menu.Content.Label.Compose
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | `React.ReactNode` | required | Building blocks that compose the custom label layout |
+| variant | `'header' \| 'sub'` | `'header'` | Label variant |
+| shift | `number \| string` | `0` | Adds left padding using the menu label level offset |
+
+`Menu.Content.Label.Compose` also accepts the shared `ComposeElementProps` surface.
+
+### Menu.Content.Label.Text
+
+`Menu.Content.Label.Text` inherits `Typography.Body` props.
+
+### Menu.Content.Label.Icon
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| icon | `IconType` | required | Icon rendered inside the label |
+
+`Menu.Content.Label.Icon` also accepts monochrome icon props.
+
+### Menu.Content.Separator
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| className | `string` | - | Optional class name for styling the separator |
+
+`Menu.Content.Separator` also accepts native `HTMLAttributes<HTMLHRElement>` props, excluding `children`.
+
+### Menu.Content.DropdownArrow
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| className | `string` | - | Optional class name for styling the arrow |
+
+`Menu.Content.DropdownArrow` renders the menu panel arrow used inside `Menu.Content`.
+
+## Sub-components
+
+- `Menu.Trigger` - Trigger wrapper that can render as a regular trigger or as an invisible button wrapper
+- `Menu.Trigger.Arrow` - Chevron icon that indicates the open state of the trigger
+- `Menu.Content` - Dropdown panel container and Radix portal wrapper
+- `Menu.Content.Item` - Standard menu item with icon, description, selection, and `subHead` support
+- `Menu.Content.Item.Compose` - Low-level item container for building custom item layouts
+- `Menu.Content.Item.Text` - Typography body text used inside item compositions
+- `Menu.Content.Item.Icon` - Monochrome icon building block used inside item compositions
+- `Menu.Content.Item.SubHead` - Semi-bold text building block used for item sub-head layouts
+- `Menu.Content.Item.Check` - Selected-state check mark building block
+- `Menu.Content.Item.Split` - Spacer/split building block used between item content segments
+- `Menu.Content.Label` - Menu label block with text, icon, variant, and shift support
+- `Menu.Content.Label.Compose` - Low-level label container for custom label layouts
+- `Menu.Content.Label.Text` - Typography body text used inside label compositions
+- `Menu.Content.Label.Icon` - Monochrome icon building block used inside label compositions
+- `Menu.Content.Separator` - Horizontal separator used between menu groups
+- `Menu.Content.DropdownArrow` - Radix dropdown arrow rendered inside the menu panel
+
+## Examples
+
+### Menu
+
+#### Standard
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { CopyIcon, MoreactionsIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="start">
+    <Menu.Content.Label text="Menu Label" />
+    <Menu.Content.Item disabled text="Disabled item" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item text="Item, which is very long and we want to verify that it does not break to multi-line and instead will be shortened with ellipsis" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item text="Item with description" description="description" />
+    <Menu.Content.Item text="Item with icon" icon={CopyIcon} />
+    <Menu.Content.Item text="Selected item" icon={StarsIcon} selected />
+    <Menu.Content.Separator />
+    <Menu.Content.Item subHead="Subhead" text="with text and icon" icon={StarsIcon} />
+    <Menu.Content.Item subHead="Subhead with icon" icon={CopyIcon} />
+    <Menu.Content.Item subHead="Subhead with description" description="description" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+### Menu.Trigger
+
+#### WithButton
+
+> Menu Trigger has property `withButton` which allows wrapping trigger elements with invisible button. Use this property if you have multiple elements or your element doesn't work as trigger.
+>
+> Make sure you correctly styled disabled state for custom trigger components.
+
+```tsx
+import { Menu, Typography } from '@redislabsdev/redis-ui-components';
+import { CopyIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu>
+  <Menu.Trigger withButton>
+    <Typography.Body size="L">Click to open</Typography.Body>
+    <Menu.Trigger.Arrow color="neutral800" />
+  </Menu.Trigger>
+  <Menu.Content>
+    <Menu.Content.Item text="Item 1" icon={CopyIcon} />
+    <Menu.Content.Item text="Item 2" icon={StarsIcon} />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### WithoutButton
+
+> For a single element that correctly works as a trigger, `withButton` can be omitted and the trigger will render only that element.
+
+```tsx
+import { Button, Menu } from '@redislabsdev/redis-ui-components';
+import { CopyIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu>
+  <Menu.Trigger>
+    <Button>
+      Click to open
+      <Menu.Trigger.Arrow color="neutral100" />
+    </Button>
+  </Menu.Trigger>
+  <Menu.Content>
+    <Menu.Content.Item text="Item 1" icon={CopyIcon} />
+    <Menu.Content.Item text="Item 2" icon={StarsIcon} />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+### Menu.Content
+
+#### Playground
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { CopyIcon, MoreactionsIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu open>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content>
+    <Menu.Content.Item text="Item 1" icon={CopyIcon} />
+    <Menu.Content.Item text="Item 2" icon={StarsIcon} />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### Placement
+
+> Use `placement` prop to define the preferred side of the trigger for the menu. It can be reversed if collision occurs.
+
+```tsx
+import { Button, Menu } from '@redislabsdev/redis-ui-components';
+
+<>
+  <Menu defaultOpen>
+    <Menu.Trigger>
+      <Button>Left</Button>
+    </Menu.Trigger>
+    <Menu.Content placement="left">
+      <Menu.Content.Item text="Left" />
+      <Menu.Content.DropdownArrow />
+    </Menu.Content>
+  </Menu>
+  <Menu defaultOpen>
+    <Menu.Trigger>
+      <Button>Top</Button>
+    </Menu.Trigger>
+    <Menu.Content placement="top">
+      <Menu.Content.Item text="Top" />
+      <Menu.Content.DropdownArrow />
+    </Menu.Content>
+  </Menu>
+  <Menu defaultOpen>
+    <Menu.Trigger>
+      <Button>Bottom</Button>
+    </Menu.Trigger>
+    <Menu.Content placement="bottom">
+      <Menu.Content.Item text="Bottom" />
+      <Menu.Content.DropdownArrow />
+    </Menu.Content>
+  </Menu>
+  <Menu defaultOpen>
+    <Menu.Trigger>
+      <Button>Right</Button>
+    </Menu.Trigger>
+    <Menu.Content placement="right">
+      <Menu.Content.Item text="Right" />
+      <Menu.Content.DropdownArrow />
+    </Menu.Content>
+  </Menu>
+</>
+```
+
+#### DropdownArrow
+
+> Add `<Menu.Content.DropdownArrow />` inside `Menu.Content` to add the arrow.
+
+```tsx
+import { Button, Menu } from '@redislabsdev/redis-ui-components';
+import { CopyIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<>
+  <Menu defaultOpen>
+    <Menu.Trigger>
+      <Button>With arrow</Button>
+    </Menu.Trigger>
+    <Menu.Content>
+      <Menu.Content.Item text="Item 1" icon={CopyIcon} />
+      <Menu.Content.Item text="Item 2" icon={StarsIcon} />
+      <Menu.Content.DropdownArrow />
+    </Menu.Content>
+  </Menu>
+  <Menu defaultOpen>
+    <Menu.Trigger>
+      <Button>Without arrow</Button>
+    </Menu.Trigger>
+    <Menu.Content>
+      <Menu.Content.Item text="Item 1" icon={CopyIcon} />
+      <Menu.Content.Item text="Item 2" icon={StarsIcon} />
+    </Menu.Content>
+  </Menu>
+</>
+```
+
+### Menu.Content.Item
+
+#### Playground
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu open>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Item text="Item" icon={StarsIcon} />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### ItemGroupsComposition
+
+> Groups can be composed using `Menu.Content.Label` and `Menu.Content.Separator`.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Group Label" />
+    <Menu.Content.Item text="Item 1" />
+    <Menu.Content.Item text="Item 2" />
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="Other Label" />
+    <Menu.Content.Item text="Item 3" selected />
+    <Menu.Content.Item text="Item 4" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item text="Item 5" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### RegularItemExamples
+
+> `Menu.Content.Item` regular items can use `icon`, `text`, `description` and the selected check mark. Text is mandatory for regular items. Description and the check mark align to the right.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, CopyIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Regular Items:" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item text="Item with text" />
+    <Menu.Content.Item text="Item with text and icon" icon={StarsIcon} />
+    <Menu.Content.Item text="Item with text, icon and" icon={ShardIcon} description="description" />
+    <Menu.Content.Item text="Item with check mark" icon={CopyIcon} selected />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### ItemWithSubheadExamples
+
+> `Menu.Content.Item` items with `subHead` can use `subHead`, `icon`, `text` and `description`. All fields are optional if `subHead` is present. Description and icon align to the right.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, RocketIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Items with SubHead:" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item subHead="SubHead only" />
+    <Menu.Content.Item subHead="SubHead with" icon={StarsIcon} />
+    <Menu.Content.Item subHead="SubHead with" text="text" />
+    <Menu.Content.Item subHead="SubHead with" text="text" icon={ShardIcon} />
+    <Menu.Content.Item subHead="SubHead with" text="text" description="description" />
+    <Menu.Content.Item
+      subHead="SubHead with"
+      text="text"
+      description="description"
+      icon={RocketIcon}
+    />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### ItemVariants
+
+> Menu items support `primary` and `destructive` variants.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Regular Items" />
+    <Menu.Content.Item text="Variant: primary" icon={StarsIcon} variant="primary" />
+    <Menu.Content.Item text="Variant: destructive" icon={ShardIcon} variant="destructive" />
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="Items with SubHead" />
+    <Menu.Content.Item subHead="Variant:" text="primary" icon={StarsIcon} variant="primary" />
+    <Menu.Content.Item
+      subHead="Variant:"
+      text="destructive"
+      icon={ShardIcon}
+      variant="destructive"
+    />
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="Disabled Items" />
+    <Menu.Content.Item text="Variant: primary" icon={StarsIcon} variant="primary" disabled />
+    <Menu.Content.Item
+      text="Variant: destructive"
+      icon={ShardIcon}
+      variant="destructive"
+      disabled
+    />
+    <Menu.Content.Item
+      subHead="Variant:"
+      text="primary"
+      icon={StarsIcon}
+      variant="primary"
+      disabled
+    />
+    <Menu.Content.Item
+      subHead="Variant:"
+      text="destructive"
+      icon={ShardIcon}
+      variant="destructive"
+      disabled
+    />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### Shift
+
+> Items can use `shift` to add left padding to the content. Shift can be a number for the standard menu-level offset or a string for a custom CSS unit.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, StarsIcon, WandIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Item text="no shift" />
+    <Menu.Content.Item text="shift: 1" shift={1} />
+    <Menu.Content.Item text="shift: 2" shift={2} />
+    <Menu.Content.Item text="shift: 3" shift={3} />
+    <Menu.Content.Item text='shift: "1rem"' shift="1rem" />
+    <Menu.Content.Item text='shift: "1rem"' icon={WandIcon} shift="1rem" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### SelectedItems
+
+> Menu items can be selected.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Regular Items" />
+    <Menu.Content.Item text="Variant: primary" icon={StarsIcon} variant="primary" />
+    <Menu.Content.Item text="Variant: destructive" icon={ShardIcon} variant="destructive" />
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="Selected Items" />
+    <Menu.Content.Item text="Variant: primary" icon={StarsIcon} variant="primary" selected />
+    <Menu.Content.Item text="Variant: destructive" icon={ShardIcon} variant="destructive" selected />
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="Disabled Selected Items" />
+    <Menu.Content.Item
+      text="Variant: primary"
+      icon={StarsIcon}
+      variant="primary"
+      selected
+      disabled
+    />
+    <Menu.Content.Item
+      text="Variant: destructive"
+      icon={ShardIcon}
+      variant="destructive"
+      selected
+      disabled
+    />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+### Menu.Content.Item.Compose
+
+#### RegularItemComposition
+
+> This example shows how regular items can be composed from the building blocks.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, CopyIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Custom composed Regular Items:" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.Text>Item with text</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.Icon icon={StarsIcon} />
+      <Menu.Content.Item.Text>Item with text and icon</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.Icon icon={ShardIcon} />
+      <Menu.Content.Item.Text>Item with text, icon and</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Text>description</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose selected>
+      <Menu.Content.Item.Icon icon={CopyIcon} />
+      <Menu.Content.Item.Text>Item with check mark</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Check />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### ItemWithSubheadComposition
+
+> This example shows how items with `SubHead` can be composed from the building blocks.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, RocketIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Custom composed Items with SubHead:" />
+    <Menu.Content.Separator />
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.SubHead>SubHead only</Menu.Content.Item.SubHead>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.SubHead>SubHead with</Menu.Content.Item.SubHead>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Icon icon={StarsIcon} />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.SubHead>SubHead with</Menu.Content.Item.SubHead>
+      <Menu.Content.Item.Text>text</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.SubHead>SubHead with</Menu.Content.Item.SubHead>
+      <Menu.Content.Item.Text>text</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Icon icon={ShardIcon} />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.SubHead>SubHead with</Menu.Content.Item.SubHead>
+      <Menu.Content.Item.Text>text</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Text>description</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.SubHead>SubHead with</Menu.Content.Item.SubHead>
+      <Menu.Content.Item.Text>text</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Text>description</Menu.Content.Item.Text>
+      <Menu.Content.Item.Icon icon={RocketIcon} />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### ItemPropsAndComposition
+
+> Composed items work with `disabled`, `selected` and `variant` props.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, ModulesGeneralIcon, RocketIcon, ShardIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.Icon icon={ModulesGeneralIcon} />
+      <Menu.Content.Item.Text>Normal Item</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose disabled>
+      <Menu.Content.Item.Icon icon={StarsIcon} />
+      <Menu.Content.Item.Text>Disabled Item</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose variant="destructive">
+      <Menu.Content.Item.Icon icon={ShardIcon} />
+      <Menu.Content.Item.Text>Item variant: destructive</Menu.Content.Item.Text>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose selected>
+      <Menu.Content.Item.Icon icon={RocketIcon} />
+      <Menu.Content.Item.Text>Item with check mark</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Check />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### WildLayouts
+
+> Examples of custom item layouts using building blocks or user-defined styles and components.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import {
+  MoreactionsIcon,
+  ModulesGeneralIcon,
+  StarsIcon,
+  ToastDangerIcon,
+  ToastInfoIcon,
+  ToastNotificationIcon
+} from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="With building blocks" />
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.Icon icon={ModulesGeneralIcon} />
+      <Menu.Content.Item.Text>Info item</Menu.Content.Item.Text>
+      <Menu.Content.Item.Icon
+        icon={ToastInfoIcon}
+        title="Item information tooltip"
+        customSize="1.7rem"
+        color="neutral500"
+      />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <Menu.Content.Item.Icon icon={StarsIcon} />
+      <Menu.Content.Item.Text>Danger</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Icon
+        icon={ToastNotificationIcon}
+        color="attention300"
+        title="Something happened be careful"
+      />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose variant="destructive">
+      <Menu.Content.Item.Icon icon={ToastDangerIcon} />
+      <Menu.Content.Item.Text>Alert</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Icon icon={ToastDangerIcon} />
+      <Menu.Content.Item.Text>Alert</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Item.Icon icon={ToastDangerIcon} />
+      <Menu.Content.Item.Text>Alert</Menu.Content.Item.Text>
+      <Menu.Content.Item.Split />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="With user defined styles and components" />
+    <Menu.Content.Item.Compose>
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+        <StarsIcon customColor="currentColor" />
+        <span style={{ marginLeft: 10 }}>Danger</span>
+      </div>
+      <ToastNotificationIcon color="attention300" title="Something happened be careful" />
+    </Menu.Content.Item.Compose>
+    <Menu.Content.Item.Compose>
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-evenly'
+        }}
+      >
+        <StarsIcon customColor="red" />
+        <StarsIcon customColor="blue" />
+        <StarsIcon customColor="orange" />
+        <StarsIcon customColor="green" />
+        <StarsIcon customColor="magenta" />
+      </div>
+    </Menu.Content.Item.Compose>
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+### Menu.Content.Label
+
+#### Playground
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu open>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Label" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### TextAndIcon
+
+> Use the `text` and `icon` props to provide the label content.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { ContractIcon, MoreactionsIcon, WandIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Label with text and icon" icon={ContractIcon} />
+    <Menu.Content.Label text="Label with text only" />
+    <Menu.Content.Label icon={WandIcon} title="Label with icon only" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### Variants
+
+> Labels support `header` and `sub` variants.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { ContractIcon, MoreactionsIcon, WandIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="variant:header" icon={ContractIcon} />
+    <Menu.Content.Label text="variant:sub" icon={WandIcon} variant="sub" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### Shift
+
+> Labels can use `shift` to add left padding to the content. Shift can be a number for the standard menu-level offset or a string for a custom CSS unit.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, WandIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="no shift" />
+    <Menu.Content.Label text="shift: 1" shift={1} />
+    <Menu.Content.Label text="shift: 2" shift={2} />
+    <Menu.Content.Label text="shift: 3" shift={3} />
+    <Menu.Content.Label text='shift: "1rem"' shift="1rem" />
+    <Menu.Content.Label text='shift: "1rem"' icon={WandIcon} shift="1rem" />
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### LabelComposition
+
+> This example shows how labels can be composed from the building blocks.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import { MoreactionsIcon, StarsIcon } from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="Custom composed Labels:" />
+    <Menu.Content.Separator />
+    <Menu.Content.Label.Compose>
+      <Menu.Content.Label.Text>Label with text</Menu.Content.Label.Text>
+    </Menu.Content.Label.Compose>
+    <Menu.Content.Label.Compose>
+      <Menu.Content.Label.Icon icon={StarsIcon} />
+      <Menu.Content.Label.Text>Label with text and icon</Menu.Content.Label.Text>
+    </Menu.Content.Label.Compose>
+    <Menu.Content.Label.Compose>
+      <Menu.Content.Label.Text>Label with text</Menu.Content.Label.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Label.Text variant="italic">and other text</Menu.Content.Label.Text>
+    </Menu.Content.Label.Compose>
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+#### WildLayouts
+
+> Examples of custom label layouts using building blocks or user-defined styles and components.
+
+```tsx
+import { ActionIconButton, Menu } from '@redislabsdev/redis-ui-components';
+import {
+  MoreactionsIcon,
+  ModulesGeneralIcon,
+  StarsIcon,
+  ToastInfoIcon,
+  ToastNotificationIcon
+} from '@redislabsdev/redis-ui-icons';
+
+<Menu defaultOpen>
+  <Menu.Trigger>
+    <ActionIconButton size="L" variant="primary" icon={MoreactionsIcon} />
+  </Menu.Trigger>
+  <Menu.Content placement="right" align="center">
+    <Menu.Content.Label text="With building blocks" />
+    <Menu.Content.Label.Compose>
+      <Menu.Content.Label.Icon icon={ModulesGeneralIcon} />
+      <Menu.Content.Label.Text>Info label</Menu.Content.Label.Text>
+      <Menu.Content.Label.Icon
+        icon={ToastInfoIcon}
+        title="Label information tooltip"
+        customSize="1.7rem"
+        color="neutral500"
+      />
+    </Menu.Content.Label.Compose>
+    <Menu.Content.Label.Compose>
+      <Menu.Content.Label.Icon icon={StarsIcon} />
+      <Menu.Content.Label.Text>Danger</Menu.Content.Label.Text>
+      <Menu.Content.Item.Split />
+      <Menu.Content.Label.Icon
+        icon={ToastNotificationIcon}
+        color="attention300"
+        title="Something happened be careful"
+      />
+    </Menu.Content.Label.Compose>
+    <Menu.Content.Separator />
+    <Menu.Content.Label text="With user defined styles and components" />
+    <Menu.Content.Label.Compose>
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center' }}>
+        <StarsIcon customColor="currentColor" />
+        <span style={{ marginLeft: 10 }}>Danger</span>
+      </div>
+      <ToastNotificationIcon color="attention300" title="Something happened be careful" />
+    </Menu.Content.Label.Compose>
+    <Menu.Content.Label.Compose
+      style={{
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-evenly'
+      }}
+    >
+      <StarsIcon customColor="red" />
+      <StarsIcon customColor="blue" />
+      <StarsIcon customColor="orange" />
+      <StarsIcon customColor="green" />
+      <StarsIcon customColor="magenta" />
+    </Menu.Content.Label.Compose>
+    <Menu.Content.DropdownArrow />
+  </Menu.Content>
+</Menu>
+```
+
+## Notes
+
+- `Menu` wraps the dropdown root in a disabled-field context; when `disabled` is set, the menu is forced closed and `onOpenChange` is suppressed.
+- `Menu.Content` defaults to `placement="bottom"`, `align="center"`, `sideOffset={5}`, and `portal={document.body}`.
+- `Menu.Trigger` can render as an invisible button wrapper when `withButton` is enabled.
+- `Menu.Trigger.Arrow` uses a down-chevron icon that rotates with the menu open state.
+- `Menu.Content.Item` regular items require `text`; `subHead` switches the layout and makes the text optional.
+- `Menu.Content.Item` selection is handled through `selected` and `isSelected` is deprecated.
+- `Menu.Content.Item.Compose` disables click handling when the item is selected.
+- `Menu.Content.Item.Text` and `Menu.Content.Label.Text` inherit `Typography.Body` and render with ellipsis.
+- `Menu.Content.Item.SubHead` renders the same text surface with semi-bold typography.
+- `Menu.Content.Item.Check` defaults to `CheckBoldIcon`.
+- `Menu.Content.Label` uses `text` as the preferred content prop and keeps `children` only as a deprecated alias.
+- `Menu.Content.Label.Compose` defaults to the `header` variant.
+- `Menu.Content.DropdownArrow` is optional and only needed when the menu should render the Radix arrow.