@z-os/ui

UI components for zOS - macOS-style windows, controls, and more.


Installation

``bash
npm install @z-os/ui


or


pnpm add @z-os/ui
`

Features

- ZWindow - Draggable, resizable macOS-style windows
- Window Controls - Traffic light buttons (close, minimize, maximize)
- Quick Look - File preview overlays
- Utilities - Class name helpers and theming

Usage

$3

`tsx
import { ZWindow } from '@z-os/ui';

function MyApp({ onClose, onFocus }) {
return (
title="My Application"
onClose={onClose}
onFocus={onFocus}
defaultWidth={600}
defaultHeight={400}
defaultPosition={{ x: 100, y: 100 }}
minWidth={300}
minHeight={200}
resizable={true}
>




);
}
`

$3

`tsx
import { WindowTitleBar } from '@z-os/ui';

function CustomWindow() {
return (



);
}
`

$3

`tsx
import { WindowControls } from '@z-os/ui';

function TitleBar({ onClose, onMinimize, onMaximize }) {
return (



);
}
`

$3

`tsx
import { QuickLookOverlay } from '@z-os/ui/quick-look';

function FilePreview({ file, onClose }) {
return (
file={file}
onClose={onClose}
/>
);
}
`

$3

`tsx
import { cn } from '@z-os/ui';

function Button({ className, variant, ...props }) {
return (
className={cn(
'px-4 py-2 rounded',
variant === 'primary' && 'bg-blue-500 text-white',
variant === 'secondary' && 'bg-gray-200 text-gray-800',
className
)}
{...props}
/>
);
}
`

Components

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | string | - | Window title |
| onClose | () => void | - | Close handler |
| onFocus | () => void | - | Focus handler |
| onMinimize | () => void | - | Minimize handler |
| onMaximize | () => void | - | Maximize handler |
| defaultWidth | number | 400 | Initial width |
| defaultHeight | number | 300 | Initial height |
| defaultPosition | { x, y } | centered | Initial position |
| minWidth | number | 200 | Minimum width |
| minHeight | number | 150 | Minimum height |
| resizable | boolean | true | Allow resizing |
| children | ReactNode | - | Window content |

$3

| Prop | Type | Description |
|------|------|-------------|
| onClose | () => void | Close button handler |
| onMinimize | () => void | Minimize button handler |
| onMaximize | () => void | Maximize button handler |
| disabled | boolean | Disable all controls |

Styling

Components use Tailwind CSS classes. Ensure you have Tailwind configured:

`js
// tailwind.config.js
module.exports = {
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@z-os/ui/*/.{js,ts,jsx,tsx}',
],
// ...
};
``

Bundle Size

~23 KB (gzipped)

License

MIT

Links

- GitHub
- Documentation
- npm