# react-utils/window

Tabbed panel system: `Window` manages active-tab state, `WindowTab` is the clickable tab trigger, and `WindowTabContent` conditionally shows content for a given tab.

<iframe src="examples/window/" class="example-frame" title="Window example"></iframe>

```typescript
import Window, { WindowTab, WindowTabContent } from '@yaoc1996/js-tools/react-utils'
```

---

## Components

---

### `Window({ activeTabId?, onTabChanged?, children? })`

Tab container that manages which tab is active. Wraps children in a `WindowContext` provider.

#### Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `activeTabId` | `TabId \| null` | `null` | The currently active tab id. Update externally to control the active tab. |
| `onTabChanged` | `(id: TabId) => void` | — | Called with the new tab id whenever a `WindowTab` is clicked. |
| `children` | `ReactNode` | — | Tab triggers and content panels. |

#### Example

```tsx
<Window activeTabId={activeTab} onTabChanged={setActiveTab}>
    <WindowTab tabId="info"><button>Info</button></WindowTab>
    <WindowTab tabId="settings"><button>Settings</button></WindowTab>
    <WindowTabContent forTab="info"><InfoPanel /></WindowTabContent>
    <WindowTabContent forTab="settings"><SettingsPanel /></WindowTabContent>
</Window>
```

---

### `WindowTab({ tabId, children? })`

Clickable tab trigger. Calls `setTabId` from `WindowContext` when clicked. Renders as a `display: contents` wrapper.

Must be rendered inside a `<Window>`.

#### Props

| Name | Type | Description |
|------|------|-------------|
| `tabId` | `TabId` | The tab id this trigger activates. |
| `children` | `ReactNode` | Tab trigger content (e.g. a button or label). |

#### Example

```tsx
<WindowTab tabId="details">
    <button>Details</button>
</WindowTab>
```

---

### `WindowTabContent({ forTab, children? })`

Conditionally shows its children when `forTab` matches the currently active tab id. Hidden via `display: none` otherwise.

Must be rendered inside a `<Window>`.

#### Props

| Name | Type | Description |
|------|------|-------------|
| `forTab` | `TabId` | The tab id this panel belongs to. |
| `children` | `ReactNode` | Content to show when the tab is active. |

#### Example

```tsx
<WindowTabContent forTab="details">
    <p>Detailed content here.</p>
</WindowTabContent>
```

#### Notes

- Uses strict equality (`===`) to match `forTab` against the active tab id — `0` and `"0"` are distinct.
- Hidden panels are kept in the DOM (`display: none`), so component state is preserved across tab switches.

---

## Types

```typescript
type TabId = string | number;
```
