<!-- source-hash: 98a7f0660803887b4fe8c81807718051 -->
Accessible, scrollable tab navigation component with optional URL synchronization and render prop support for content rendering.

## Key Components

### `TabNavigation`
Main component that renders a horizontal tab bar with scroll overflow handling, fade gradients, and flexible state management modes.

### Interfaces

| Export | Description |
|--------|-------------|
| `TabItem` | Tab definition — `id`, `label`, `icon`, optional `component` and status `indicator` |
| `TabNavigationUrlSyncOptions` | URL sync config — `paramName` (default: `'tab'`) and `replaceState` (default: `true`) |

### Utility Functions

| Function | Description |
|----------|-------------|
| `getTabById` | Finds a `TabItem` by `id` from a tabs array |
| `getTabComponent` | Returns the `component` for a given tab id, or `null` |

## Usage Example

**Controlled mode (no URL sync):**

```typescript
import { TabNavigation, TabItem } from './tab-navigation'
import { HomeIcon, SettingsIcon } from 'lucide-react'

const tabs: TabItem[] = [
  { id: 'home', label: 'Home', icon: HomeIcon },
  { id: 'settings', label: 'Settings', icon: SettingsIcon, indicator: 'warning' },
]

<TabNavigation
  tabs={tabs}
  activeTab={activeTab}
  onTabChange={setActiveTab}
>
  {(tab) => <div>Content for: {tab}</div>}
</TabNavigation>
```

**URL sync mode (persists active tab in query string):**

```typescript
<TabNavigation
  tabs={tabs}
  urlSync={{ paramName: 'section', replaceState: true }}
  defaultTab="home"
>
  {(activeTab) => <ActiveTabContent tabId={activeTab} />}
</TabNavigation>
```

**Forced scroll gradients with custom shadow color:**

```typescript
<TabNavigation
  tabs={tabs}
  showRightGradient
  shadowClassName="from-black"
  urlSync
/>
```

## Behavior Notes

- Scroll overflow is detected via `ResizeObserver` and `scroll` events — fade gradients appear automatically on overflowing edges
- The bottom border line fades to transparent on edges with active scroll shadows
- URL sync mode reacts to browser back/forward navigation via `searchParams` changes
- `indicator` dots render as color-coded badges (`error` → red, `warning` → accent yellow, `success` → green) over the tab icon