<!-- source-hash: c8f7676bd726a51b4cf502a4fd6cee17 -->
Renders an individual navigation sidebar button with support for active state, disabled state, icon rendering, collapsible label visibility, and optional badge display.

## Key Components

### `NavigationSidebarItemButtonProps`
| Prop | Type | Description |
|------|------|-------------|
| `item` | `NavigationSidebarItem` | Navigation item data (label, icon, badge, isActive) |
| `showLabel` | `boolean` | Controls label and badge visibility (collapsed/expanded sidebar) |
| `disabled` | `boolean` | Disables interaction and applies reduced-opacity styling |
| `onClick` | `(item, event?) => void` | Click handler receiving the item and optional mouse event |

### `NavigationSidebarItemButton`
The primary exported component. Applies four distinct visual states via `cn()`:

| State | Appearance |
|-------|-----------|
| Default | Primary text, secondary icon fill |
| Hover (not active) | `ods-bg-hover` background |
| Active | Yellow-light background, accent text/icon, left accent border |
| Disabled | 50% opacity, `not-allowed` cursor |

## Usage Example

```typescript
import { NavigationSidebarItemButton } from './navigation-sidebar-item'
import { HomeIcon } from '../icons'

const item = {
  label: 'Dashboard',
  icon: <HomeIcon />,
  isActive: true,
  badge: '3',
}

<NavigationSidebarItemButton
  item={item}
  showLabel={true}
  disabled={false}
  onClick={(item, event) => console.log('Navigating to', item.label)}
/>
```

> **Note:** The icon is rendered via `cloneElement` to inject the appropriate `color` prop based on active/disabled state. Ensure icons accept an `IconProps`-compatible interface (`color`, `className`).