> ## Documentation Index
> Fetch the complete documentation index at: https://bkey.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Sheets & overlays

> BMoniBottomSheet, BMoniTitledBottomSheet, BMoniOptionsBottomSheet, SelectorBottomSheet, and SearchableSelectorBottomSheet.

## BMoniBottomSheet.show

The base utility for presenting any content as a bottom sheet. Returns the value the child pops with.

```dart theme={null}
final String? result = await BMoniBottomSheet.show<String>(
  context: context,
  child: const BMoniTitledBottomSheet(
    title: 'Choose an option',
    children: [/* ... */],
  ),
);
```

***

## BMoniTitledBottomSheet

A bottom sheet with a drag handle, a centred title, and a scrollable `children` list.

```dart theme={null}
BMoniTitledBottomSheet(
  title: 'Choose action',
  children: [
    ListTile(title: const Text('Option A'), onTap: () => Navigator.pop(context, 'A')),
    ListTile(title: const Text('Option B'), onTap: () => Navigator.pop(context, 'B')),
  ],
)
```

***

## BMoniOptionsBottomSheet

A pre-built options menu. Each option has an SVG icon, a title, and an `onTap` callback.

```dart theme={null}
BMoniOptionsBottomSheet(
  title: 'More actions',
  options: [
    BMoniBottomSheetOption(
      icon: 'assets/svgs/edit.svg',
      title: 'Edit',
      onTap: () => Navigator.pop(context),
    ),
    BMoniBottomSheetOption(
      icon: 'assets/svgs/delete.svg',
      title: 'Delete',
      onTap: () => Navigator.pop(context),
    ),
  ],
)
```

### BMoniBottomSheetOption props

| Prop    | Type           | Description                       |
| ------- | -------------- | --------------------------------- |
| `icon`  | `String`       | Asset path to an SVG icon.        |
| `title` | `String`       | Label shown next to the icon.     |
| `onTap` | `VoidCallback` | Called when the option is tapped. |

***

## SelectorBottomSheet\<T>

A generic, scrollable list selector with an optional icon per item.

```dart theme={null}
final Currency? picked = await BMoniBottomSheet.show<Currency>(
  context: context,
  child: SelectorBottomSheet<Currency>(
    items: currencies,
    selected: currentCurrency,
    title: 'Choose currency',
    label: (c) => c.name,
    value: (c) => c.code,
    icon: (c) => c.flagAsset,
    showIcon: true,
  ),
);
```

| Prop       | Type                   | Description                                            |
| ---------- | ---------------------- | ------------------------------------------------------ |
| `items`    | `List<T>`              | All selectable items.                                  |
| `selected` | `T?`                   | The currently selected item.                           |
| `title`    | `String`               | Sheet title.                                           |
| `label`    | `String Function(T)`   | Returns the display label for an item.                 |
| `value`    | `String Function(T)`   | Returns the value key for an item (used for equality). |
| `icon`     | `String? Function(T)?` | Returns an optional SVG asset path for an item.        |
| `showIcon` | `bool`                 | Whether to show the icon column.                       |

***

## SearchableSelectorBottomSheet\<T>

Same as `SelectorBottomSheet` but with a search bar at the top that filters items client-side.

```dart theme={null}
SearchableSelectorBottomSheet<Country>(
  items: countries,
  selected: currentCountry,
  title: 'Choose country',
  label: (c) => c.name,
  value: (c) => c.code,
  icon: (c) => c.flagAsset,
  showIcon: true,
)
```