# AppWindow

Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.

- Install all: `npx @kznlabs/labsui add app-window segmented-tabs`
- Page: <https://kznlabs.github.io/labsUI/components/app-window>

## AppWindow (`app-window`, component)

Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.

- Install: `npx @kznlabs/labsui add app-window`
- Docs: <https://kznlabs.github.io/labsUI/components/app-window>
- Brings: utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, tailwind-merge@^3.7.0

### API

- `<AppWindow>` (+ <div> props)
  - `actions?: ReactNode`: Right-aligned titlebar slot.
  - `bodyClassName?: string`: Classes for the content area under the title bar.
  - `glass?: boolean`: Translucent, blurred surface.
  - `header?: ReactNode`: Custom titlebar content (tabs, navbar, search); replaces the centered title.
  - `onClose?: () => void`: Passing a handler turns the matching dot into a button.
  - `onMaximize?: () => void`: Shows the maximize control; called when it is pressed.
  - `onMinimize?: () => void`: Shows the minimize control; called when it is pressed.
  - `title?: ReactNode`: Centered titlebar text.

### Usage

```tsx
<AppWindow title="Preview" header={<SegmentedTabs label="Views" items={views} value={view} onChange={setView} />} actions={<Button size="sm" />} onClose={close}>…</AppWindow>
```

### Example: preview.tsx

```tsx
import { AppWindow } from "@/components/ui/app-window";
export function Preview() {
  return (
    <AppWindow title="Preview" onClose={close} glass bodyClassName="p-5">
      <p>Window content goes here.</p>
    </AppWindow>
  );
}
```

### Example: deploys-window.tsx

```tsx
"use client";

import { useState } from "react";
import { AppWindow } from "@/components/ui/app-window";
import { SegmentedTabs } from "@/components/ui/segmented-tabs";

const views = ["Overview", "Activity", "Settings"];

export function DeploysWindow({ onClose }: { onClose: () => void }) {
  const [view, setView] = useState(views[0]);
  return (
    <AppWindow
      onClose={onClose}
      header={<SegmentedTabs label="Views" items={views} value={view} onChange={setView} />}
      bodyClassName="p-5"
    >
      <h2 className="font-medium">{view}</h2>
    </AppWindow>
  );
}
```
## AppWindow (`segmented-tabs`, component)

Window container with close / minimize / zoom controls, title, custom header slot and actions. SegmentedTabs is the compact view switcher for its title bar.

- Install: `npx @kznlabs/labsui add segmented-tabs`
- Docs: <https://kznlabs.github.io/labsUI/components/app-window>
- Brings: overflow-focus, use-indicator, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<SegmentedTabs>`: Segmented tabs. One indicator slides under the active item on a spring, always behind the labels.
  - `items: readonly string[]`: Labels, also used as values.
  - `label: string`: Accessible name for the tab list.
  - `onChange: (item: string) => void`: Called with the pressed item.
  - `value: string`: Active item; marked `aria-current`.

### Usage

```tsx
<AppWindow title="Preview" header={<SegmentedTabs label="Views" items={views} value={view} onChange={setView} />} actions={<Button size="sm" />} onClose={close}>…</AppWindow>
```

### Example: preview.tsx

```tsx
import { AppWindow } from "@/components/ui/app-window";
export function Preview() {
  return (
    <AppWindow title="Preview" onClose={close} glass bodyClassName="p-5">
      <p>Window content goes here.</p>
    </AppWindow>
  );
}
```

### Example: deploys-window.tsx

```tsx
"use client";

import { useState } from "react";
import { AppWindow } from "@/components/ui/app-window";
import { SegmentedTabs } from "@/components/ui/segmented-tabs";

const views = ["Overview", "Activity", "Settings"];

export function DeploysWindow({ onClose }: { onClose: () => void }) {
  const [view, setView] = useState(views[0]);
  return (
    <AppWindow
      onClose={onClose}
      header={<SegmentedTabs label="Views" items={views} value={view} onChange={setView} />}
      bodyClassName="p-5"
    >
      <h2 className="font-medium">{view}</h2>
    </AppWindow>
  );
}
```