@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

package/lib/__templates__/expo/client/heroui/components/menu/menu.md

@@ -1,620 +0,0 @@
-# Menu
-
-A floating context menu with positioning, selection groups, and multiple presentation modes.
-
-## Import
-
-```tsx
-import { Menu } from '@/heroui';
-```
-
-## Anatomy
-
-```tsx
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover">
-      <Menu.Close />
-      <Menu.Label>...</Menu.Label>
-      <Menu.Group>
-        <Menu.Item>
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>...</Menu.ItemTitle>
-          <Menu.ItemDescription>...</Menu.ItemDescription>
-        </Menu.Item>
-      </Menu.Group>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-- **Menu**: Main container that manages open/close state, positioning, and provides context to child components.
-- **Menu.Trigger**: Clickable element that toggles the menu visibility.
-- **Menu.Portal**: Renders menu content in a portal layer above other content.
-- **Menu.Overlay**: Optional background overlay to capture outside clicks and close the menu.
-- **Menu.Content**: Container for menu content with two presentation modes: floating popover with positioning and collision detection, or bottom sheet modal.
-- **Menu.Close**: Close button that dismisses the menu when pressed.
-- **Menu.Label**: Non-interactive section heading text within the menu.
-- **Menu.Group**: Groups menu items with optional selection state (none, single, multiple).
-- **Menu.Item**: Pressable menu item with animated press feedback. Standalone or within a Group for selection.
-- **Menu.ItemTitle**: Primary label text for a menu item.
-- **Menu.ItemDescription**: Secondary description text for a menu item.
-- **Menu.ItemIndicator**: Visual selection indicator (checkmark or dot) for a menu item.
-
-## Usage
-
-### Basic Usage
-
-The Menu component uses compound parts to create a floating context menu.
-
-```tsx
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" width={220}>
-      <Menu.Item>
-        <Menu.ItemTitle>View Profile</Menu.ItemTitle>
-      </Menu.Item>
-      <Menu.Item>
-        <Menu.ItemTitle>Settings</Menu.ItemTitle>
-      </Menu.Item>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### With Item Descriptions
-
-Add secondary description text to menu items alongside titles.
-
-```tsx
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" width={260}>
-      <Menu.Item className="items-start">
-        <View className="flex-1">
-          <Menu.ItemTitle>New file</Menu.ItemTitle>
-          <Menu.ItemDescription>Create a new file</Menu.ItemDescription>
-        </View>
-      </Menu.Item>
-      <Menu.Item className="items-start">
-        <View className="flex-1">
-          <Menu.ItemTitle>Copy link</Menu.ItemTitle>
-          <Menu.ItemDescription>Copy the file link</Menu.ItemDescription>
-        </View>
-      </Menu.Item>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### Single Selection
-
-Use `Menu.Group` with `selectionMode="single"` to allow one selected item at a time.
-
-```tsx
-const [theme, setTheme] = useState<Set<MenuKey>>(() => new Set(['system']));
-
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" width={180}>
-      <Menu.Label>Appearance</Menu.Label>
-      <Menu.Group
-        selectionMode="single"
-        selectedKeys={theme}
-        onSelectionChange={setTheme}
-      >
-        <Menu.Item id="light">
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>Light</Menu.ItemTitle>
-        </Menu.Item>
-        <Menu.Item id="dark">
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>Dark</Menu.ItemTitle>
-        </Menu.Item>
-        <Menu.Item id="system">
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>System</Menu.ItemTitle>
-        </Menu.Item>
-      </Menu.Group>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### Multiple Selection
-
-Use `selectionMode="multiple"` to allow selecting multiple items simultaneously.
-
-```tsx
-const [textStyles, setTextStyles] = useState<Set<MenuKey>>(
-  () => new Set(['bold', 'italic'])
-);
-
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" width={250}>
-      <Menu.Label>Text Style</Menu.Label>
-      <Menu.Group
-        selectionMode="multiple"
-        selectedKeys={textStyles}
-        onSelectionChange={setTextStyles}
-      >
-        <Menu.Item id="bold">
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>Bold</Menu.ItemTitle>
-        </Menu.Item>
-        <Menu.Item id="italic">
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>Italic</Menu.ItemTitle>
-        </Menu.Item>
-        <Menu.Item id="underline">
-          <Menu.ItemIndicator />
-          <Menu.ItemTitle>Underline</Menu.ItemTitle>
-        </Menu.Item>
-      </Menu.Group>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### Danger Variant
-
-Use `variant="danger"` on a menu item for destructive actions.
-
-```tsx
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" width={220}>
-      <Menu.Item>
-        <Menu.ItemTitle>Edit</Menu.ItemTitle>
-      </Menu.Item>
-      <Menu.Item variant="danger">
-        <Menu.ItemTitle>Delete</Menu.ItemTitle>
-      </Menu.Item>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### Placements
-
-Control where the menu appears relative to the trigger.
-
-```tsx
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" placement="right" width={200}>
-      <Menu.Item>
-        <Menu.ItemTitle>Option A</Menu.ItemTitle>
-      </Menu.Item>
-      <Menu.Item>
-        <Menu.ItemTitle>Option B</Menu.ItemTitle>
-      </Menu.Item>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### Bottom Sheet Presentation
-
-Use `presentation="bottom-sheet"` to display menu content as a bottom sheet modal.
-
-```tsx
-<Menu presentation="bottom-sheet">
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="bottom-sheet">
-      <Menu.Item>
-        <Menu.ItemTitle>Option A</Menu.ItemTitle>
-      </Menu.Item>
-      <Menu.Item>
-        <Menu.ItemTitle>Option B</Menu.ItemTitle>
-      </Menu.Item>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-### Dot Indicator
-
-Use `variant="dot"` on `Menu.ItemIndicator` to show a filled circle instead of a checkmark.
-
-```tsx
-<Menu>
-  <Menu.Trigger>...</Menu.Trigger>
-  <Menu.Portal>
-    <Menu.Overlay />
-    <Menu.Content presentation="popover" width={180}>
-      <Menu.Group
-        selectionMode="single"
-        selectedKeys={alignment}
-        onSelectionChange={setAlignment}
-      >
-        <Menu.Item id="left">
-          <Menu.ItemIndicator variant="dot" />
-          <Menu.ItemTitle>Left</Menu.ItemTitle>
-        </Menu.Item>
-        <Menu.Item id="center">
-          <Menu.ItemIndicator variant="dot" />
-          <Menu.ItemTitle>Center</Menu.ItemTitle>
-        </Menu.Item>
-        <Menu.Item id="right">
-          <Menu.ItemIndicator variant="dot" />
-          <Menu.ItemTitle>Right</Menu.ItemTitle>
-        </Menu.Item>
-      </Menu.Group>
-    </Menu.Content>
-  </Menu.Portal>
-</Menu>
-```
-
-## Example
-
-```tsx
-import type { MenuKey } from '@/heroui';
-import { Button, Menu, Separator } from '@/heroui';
-import { useState } from 'react';
-import { Text, View } from 'react-native';
-
-export default function MenuExample() {
-  const [textStyles, setTextStyles] = useState<Set<MenuKey>>(
-    () => new Set(['bold', 'italic'])
-  );
-  const [alignment, setAlignment] = useState<Set<MenuKey>>(
-    () => new Set(['left'])
-  );
-
-  return (
-    <Menu>
-      <Menu.Trigger asChild>
-        <Button variant="secondary">Styles</Button>
-      </Menu.Trigger>
-      <Menu.Portal>
-        <Menu.Overlay />
-        <Menu.Content presentation="popover" width={250}>
-          <Menu.Label className="mb-1">Text Style</Menu.Label>
-          <Menu.Group
-            selectionMode="multiple"
-            selectedKeys={textStyles}
-            onSelectionChange={setTextStyles}
-          >
-            <Menu.Item id="bold">
-              <Menu.ItemIndicator />
-              <Menu.ItemTitle>Bold</Menu.ItemTitle>
-              <Text className="text-sm text-muted">⌘ B</Text>
-            </Menu.Item>
-            <Menu.Item id="italic">
-              <Menu.ItemIndicator />
-              <Menu.ItemTitle>Italic</Menu.ItemTitle>
-              <Text className="text-sm text-muted">⌘ I</Text>
-            </Menu.Item>
-            <Menu.Item id="underline">
-              <Menu.ItemIndicator />
-              <Menu.ItemTitle>Underline</Menu.ItemTitle>
-              <Text className="text-sm text-muted">⌘ U</Text>
-            </Menu.Item>
-          </Menu.Group>
-          <Separator className="mx-2 my-2 opacity-75" />
-          <Menu.Label className="mb-1">Text Alignment</Menu.Label>
-          <Menu.Group
-            selectionMode="single"
-            selectedKeys={alignment}
-            onSelectionChange={setAlignment}
-          >
-            <Menu.Item id="left">
-              <Menu.ItemIndicator variant="dot" />
-              <Menu.ItemTitle>Left</Menu.ItemTitle>
-            </Menu.Item>
-            <Menu.Item id="center">
-              <Menu.ItemIndicator variant="dot" />
-              <Menu.ItemTitle>Center</Menu.ItemTitle>
-            </Menu.Item>
-            <Menu.Item id="right">
-              <Menu.ItemIndicator variant="dot" />
-              <Menu.ItemTitle>Right</Menu.ItemTitle>
-            </Menu.Item>
-          </Menu.Group>
-        </Menu.Content>
-      </Menu.Portal>
-    </Menu>
-  );
-}
-```
-
-You can find more examples in the [GitHub repository](https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/menu.tsx).
-
-## API Reference
-
-### Menu
-
-| prop              | type                                       | default      | description                                              |
-| ----------------- | ------------------------------------------ | ------------ | -------------------------------------------------------- |
-| `children`        | `React.ReactNode`                          | -            | The content of the menu                                  |
-| `presentation`    | `'popover' \| 'bottom-sheet'`              | `'popover'`  | Presentation mode for the menu content                   |
-| `isOpen`          | `boolean`                                  | -            | Controlled open state of the menu                        |
-| `isDefaultOpen`   | `boolean`                                  | -            | Open state when initially rendered (uncontrolled)        |
-| `isDisabled`      | `boolean`                                  | -            | Whether the menu is disabled                             |
-| `animation`       | `MenuRootAnimation`                        | -            | Animation configuration for menu root                    |
-| `onOpenChange`    | `(open: boolean) => void`                  | -            | Callback fired when the menu open state changes          |
-| `...ViewProps`    | `ViewProps`                                | -            | All standard React Native View props are supported       |
-
-#### MenuRootAnimation
-
-Animation configuration for menu root component. Can be:
-
-- `"disable-all"`: Disable all animations including children
-- `true` or `undefined`: Use default animations
-
-### Menu.Trigger
-
-| prop                | type              | default | description                                             |
-| ------------------- | ----------------- | ------- | ------------------------------------------------------- |
-| `children`          | `React.ReactNode` | -       | The trigger element content                             |
-| `className`         | `string`          | -       | Additional CSS class for the trigger                    |
-| `isDisabled`        | `boolean`         | `false` | Whether the trigger is disabled                         |
-| `asChild`           | `boolean`         | -       | Render as child element using Slot pattern              |
-| `...PressableProps` | `PressableProps`  | -       | All standard React Native Pressable props are supported |
-
-### Menu.Portal
-
-| prop                        | type              | default | description                                                                           |
-| --------------------------- | ----------------- | ------- | ------------------------------------------------------------------------------------- |
-| `children`                  | `React.ReactNode` | -       | The portal content                                                                    |
-| `className`                 | `string`          | -       | Additional CSS class for the portal container                                         |
-| `disableFullWindowOverlay`  | `boolean`         | `false` | Use a regular View instead of FullWindowOverlay on iOS                                |
-| `hostName`                  | `string`          | -       | Optional name of the host element for the portal                                      |
-| `forceMount`                | `boolean`         | -       | Force mount the portal regardless of open state                                       |
-
-### Menu.Overlay
-
-| prop                     | type                     | default | description                                             |
-| ------------------------ | ------------------------ | ------- | ------------------------------------------------------- |
-| `className`              | `string`                 | -       | Additional CSS class for the overlay                    |
-| `closeOnPress`           | `boolean`                | `true`  | Whether to close the menu when the overlay is pressed   |
-| `animation`              | `MenuOverlayAnimation`   | -       | Animation configuration for overlay                     |
-| `isAnimatedStyleActive`  | `boolean`                | `true`  | Whether animated styles (react-native-reanimated) are active |
-| `forceMount`             | `boolean`                | -       | Force mount the overlay regardless of open state        |
-| `...PressableProps`      | `PressableProps`         | -       | All standard React Native Pressable props are supported |
-
-#### MenuOverlayAnimation
-
-Animation configuration for menu overlay component. Can be:
-
-- `false` or `"disabled"`: Disable all animations
-- `true` or `undefined`: Use default animations
-- `object`: Custom animation configuration
-
-| prop                     | type                          | default                     | description                                          |
-| ------------------------ | ----------------------------- | --------------------------- | ---------------------------------------------------- |
-| `state`                  | `'disabled' \| boolean`       | -                           | Disable animations while customizing properties      |
-| `opacity.entering.value` | `EntryOrExitLayoutType`       | `FadeIn.duration(200)`      | Custom entering animation for overlay                |
-| `opacity.exiting.value`  | `EntryOrExitLayoutType`       | `FadeOut.duration(150)`     | Custom exiting animation for overlay                 |
-
-### Menu.Content (Popover)
-
-Props when `presentation="popover"`.
-
-| prop                | type                                                 | default          | description                                                |
-| ------------------- | ---------------------------------------------------- | ---------------- | ---------------------------------------------------------- |
-| `children`          | `React.ReactNode`                                    | -                | The menu content                                           |
-| `presentation`      | `'popover'`                                          | -                | Presentation mode (must match Menu root)                   |
-| `placement`         | `'top' \| 'bottom' \| 'left' \| 'right'`            | `'bottom'`       | Where the menu appears relative to the trigger             |
-| `align`             | `'start' \| 'center' \| 'end'`                      | `'center'`       | Alignment of the menu relative to the trigger              |
-| `avoidCollisions`   | `boolean`                                            | `true`           | Whether to reposition to avoid screen edges                |
-| `offset`            | `number`                                             | `9`              | Distance from the trigger element in pixels                |
-| `alignOffset`       | `number`                                             | `0`              | Offset along the alignment axis in pixels                  |
-| `width`             | `'content-fit' \| 'trigger' \| 'full' \| number`    | `'content-fit'`  | Content width sizing strategy                              |
-| `className`         | `string`                                             | -                | Additional CSS class for the content container             |
-| `animation`         | `MenuContentAnimation`                               | -                | Animation configuration for content                        |
-| `...ViewProps`      | `ViewProps`                                          | -                | All standard React Native View props are supported         |
-
-#### MenuContentAnimation
-
-Animation configuration for menu popover content component. Can be:
-
-- `false` or `"disabled"`: Disable all animations
-- `true` or `undefined`: Use default animations
-- `object`: Custom animation configuration
-
-| prop               | type                          | default                              | description                                     |
-| ------------------ | ----------------------------- | ------------------------------------ | ----------------------------------------------- |
-| `state`            | `'disabled' \| boolean`       | -                                    | Disable animations while customizing properties |
-| `entering.value`   | `EntryOrExitLayoutType`       | Scale + fade entering animation      | Custom entering animation for content           |
-| `exiting.value`    | `EntryOrExitLayoutType`       | Scale + fade exiting animation       | Custom exiting animation for content            |
-
-### Menu.Content (Bottom Sheet)
-
-Props when `presentation="bottom-sheet"`. Extends `@gorhom/bottom-sheet` BottomSheet props.
-
-| prop                           | type                                       | default | description                                    |
-| ------------------------------ | ------------------------------------------ | ------- | ---------------------------------------------- |
-| `children`                     | `React.ReactNode`                          | -       | The bottom sheet content                       |
-| `presentation`                 | `'bottom-sheet'`                           | -       | Presentation mode (must match Menu root)       |
-| `className`                    | `string`                                   | -       | Additional CSS class for the bottom sheet      |
-| `backgroundClassName`          | `string`                                   | -       | Additional CSS class for the background        |
-| `handleIndicatorClassName`     | `string`                                   | -       | Additional CSS class for the handle indicator  |
-| `contentContainerClassName`    | `string`                                   | -       | Additional CSS class for the content container |
-| `contentContainerProps`        | `Omit<BottomSheetViewProps, 'children'>`   | -       | Props for the content container                |
-| `animation`                    | `AnimationDisabled`                        | -       | Set to `false` or `"disabled"` to disable animations |
-| `...BottomSheetProps`          | `Partial<BottomSheetProps>`                | -       | All `@gorhom/bottom-sheet` props are supported |
-
-### Menu.Close
-
-Extends `CloseButtonProps`. Automatically closes the menu when pressed.
-
-| prop                | type              | default | description                                             |
-| ------------------- | ----------------- | ------- | ------------------------------------------------------- |
-| `iconProps`         | `CloseButtonIconProps` | -  | Props for customizing the close icon                    |
-| `...ButtonProps`    | `ButtonRootProps` | -       | All Button root props are supported                     |
-
-### Menu.Group
-
-| prop                    | type                                  | default  | description                                                         |
-| ----------------------- | ------------------------------------- | -------- | ------------------------------------------------------------------- |
-| `children`              | `React.ReactNode`                     | -        | The group content (Menu.Item elements)                              |
-| `selectionMode`         | `'none' \| 'single' \| 'multiple'`   | `'none'` | The type of selection allowed in the group                          |
-| `selectedKeys`          | `Iterable<MenuKey>`                   | -        | Currently selected keys (controlled)                                |
-| `defaultSelectedKeys`   | `Iterable<MenuKey>`                   | -        | Initially selected keys (uncontrolled)                              |
-| `isDisabled`            | `boolean`                             | `false`  | Whether the entire group is disabled                                |
-| `disabledKeys`          | `Iterable<MenuKey>`                   | -        | Keys of items that should be disabled                               |
-| `shouldCloseOnSelect`   | `boolean`                             | -        | Whether selecting an item should close the menu                     |
-| `className`             | `string`                              | -        | Additional CSS class for the group container                        |
-| `onSelectionChange`     | `(keys: Set<MenuKey>) => void`        | -        | Callback fired when the selection changes                           |
-| `...ViewProps`          | `ViewProps`                           | -        | All standard React Native View props are supported                  |
-
-### Menu.Label
-
-| prop           | type              | default | description                                            |
-| -------------- | ----------------- | ------- | ------------------------------------------------------ |
-| `children`     | `React.ReactNode` | -       | The label text content                                 |
-| `className`    | `string`          | -       | Additional CSS class for the label                     |
-| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported     |
-
-### Menu.Item
-
-| prop                    | type                                                             | default     | description                                                |
-| ----------------------- | ---------------------------------------------------------------- | ----------- | ---------------------------------------------------------- |
-| `children`              | `React.ReactNode \| ((props: MenuItemRenderProps) => ReactNode)` | -           | Child elements or a render function                        |
-| `id`                    | `MenuKey`                                                        | -           | Unique identifier, required when inside a Menu.Group       |
-| `variant`               | `'default' \| 'danger'`                                         | `'default'` | Visual variant of the menu item                            |
-| `isDisabled`            | `boolean`                                                        | `false`     | Whether the item is disabled                               |
-| `isSelected`            | `boolean`                                                        | -           | Controlled selected state for standalone items             |
-| `shouldCloseOnSelect`   | `boolean`                                                        | `true`      | Whether pressing this item should close the menu           |
-| `className`             | `string`                                                         | -           | Additional CSS class for the item                          |
-| `animation`             | `MenuItemAnimation`                                              | -           | Animation configuration for press feedback                 |
-| `isAnimatedStyleActive` | `boolean`                                                        | `true`      | Whether animated styles (react-native-reanimated) are active |
-| `onSelectedChange`      | `(selected: boolean) => void`                                    | -           | Callback when standalone item's selected state changes     |
-| `...PressableProps`     | `PressableProps`                                                 | -           | All standard React Native Pressable props are supported    |
-
-#### MenuItemRenderProps
-
-Props passed to the render function when `children` is a function.
-
-| prop         | type                    | description                              |
-| ------------ | ----------------------- | ---------------------------------------- |
-| `isSelected` | `boolean`               | Whether this item is currently selected  |
-| `isDisabled` | `boolean`               | Whether the item is disabled             |
-| `isPressed`  | `SharedValue<boolean>`  | Whether the item is currently pressed    |
-| `variant`    | `'default' \| 'danger'` | Visual variant of the item               |
-
-#### MenuItemAnimation
-
-Animation configuration for menu item press feedback. Can be:
-
-- `false` or `"disabled"`: Disable all item animations
-- `true` or `undefined`: Use default animations
-- `object`: Custom animation configuration
-
-| prop                          | type               | default                    | description                              |
-| ----------------------------- | ------------------ | -------------------------- | ---------------------------------------- |
-| `scale.value`                 | `number`           | `0.98`                     | Scale value when pressed                 |
-| `scale.timingConfig`          | `WithTimingConfig` | `{ duration: 150 }`       | Spring animation configuration for scale |
-| `backgroundColor.value`       | `string`           | `useThemeColor('default')` | Background color shown while pressed     |
-| `backgroundColor.timingConfig`| `WithTimingConfig` | `{ duration: 150 }`       | Animation timing for background color    |
-
-### Menu.ItemTitle
-
-| prop           | type              | default | description                                          |
-| -------------- | ----------------- | ------- | ---------------------------------------------------- |
-| `children`     | `React.ReactNode` | -       | The title text content                               |
-| `className`    | `string`          | -       | Additional CSS class for the item title              |
-| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported   |
-
-### Menu.ItemDescription
-
-| prop           | type              | default | description                                          |
-| -------------- | ----------------- | ------- | ---------------------------------------------------- |
-| `children`     | `React.ReactNode` | -       | The description text content                         |
-| `className`    | `string`          | -       | Additional CSS class for the item description        |
-| `...TextProps` | `TextProps`       | -       | All standard React Native Text props are supported   |
-
-### Menu.ItemIndicator
-
-| prop           | type                         | default        | description                                            |
-| -------------- | ---------------------------- | -------------- | ------------------------------------------------------ |
-| `children`     | `React.ReactNode`            | -              | Custom indicator content, defaults to checkmark or dot |
-| `variant`      | `'checkmark' \| 'dot'`      | `'checkmark'`  | Visual variant of the indicator                        |
-| `iconProps`    | `MenuItemIndicatorIconProps` | -              | Icon configuration (checkmark variant)                 |
-| `forceMount`   | `boolean`                    | `true`         | Force mount the indicator regardless of selected state |
-| `className`    | `string`                     | -              | Additional CSS class for the item indicator            |
-| `...ViewProps` | `ViewProps`                  | -              | All standard React Native View props are supported     |
-
-#### MenuItemIndicatorIconProps
-
-| prop    | type     | default  | description                                      |
-| ------- | -------- | -------- | ------------------------------------------------ |
-| `size`  | `number` | `16`     | Size of the indicator icon (8 for dot variant)   |
-| `color` | `string` | `muted`  | Color of the indicator icon                      |
-
-## Hooks
-
-### useMenu
-
-Hook to access the menu root context. Must be used within a `Menu` component.
-
-```tsx
-import { useMenu } from '@/heroui';
-
-const { isOpen, onOpenChange, presentation, isDisabled } = useMenu();
-```
-
-#### Returns
-
-| property        | type                           | description                                  |
-| --------------- | ------------------------------ | -------------------------------------------- |
-| `isOpen`        | `boolean`                      | Whether the menu is currently open           |
-| `onOpenChange`  | `(open: boolean) => void`      | Callback to change the open state            |
-| `presentation`  | `'popover' \| 'bottom-sheet'`  | Current presentation mode                    |
-| `isDisabled`    | `boolean \| undefined`         | Whether the menu is disabled                 |
-| `nativeID`      | `string`                       | Unique identifier for the menu instance      |
-
-### useMenuItem
-
-Hook to access the menu item context. Must be used within a `Menu.Item` component.
-
-```tsx
-import { useMenuItem } from '@/heroui';
-
-const { id, isSelected, isDisabled, variant } = useMenuItem();
-```
-
-#### Returns
-
-| property     | type                    | description                              |
-| ------------ | ----------------------- | ---------------------------------------- |
-| `id`         | `MenuKey \| undefined`  | Item identifier                          |
-| `isSelected` | `boolean`               | Whether the item is currently selected   |
-| `isDisabled` | `boolean`               | Whether the item is disabled             |
-| `variant`    | `'default' \| 'danger'` | Visual variant of the item               |
-
-### useMenuAnimation
-
-Hook to access the menu animation context. Must be used within a `Menu` component.
-
-```tsx
-import { useMenuAnimation } from '@/heroui';
-
-const { progress, isDragging } = useMenuAnimation();
-```
-
-#### Returns
-
-| property     | type                   | description                                            |
-| ------------ | ---------------------- | ------------------------------------------------------ |
-| `progress`   | `SharedValue<number>`  | Animation progress shared value (0=idle, 1=open, 2=close) |
-| `isDragging` | `SharedValue<boolean>` | Whether the bottom sheet is currently being dragged    |