# MtAir

![MtAir](img/banner.png)

[![Release](https://img.shields.io/badge/release-v0.1.0-2F6B4F)](https://git.ollyhearn.ru/olly/mt-air/releases)
[![License: MIT](https://img.shields.io/badge/license-MIT-2F6B4F)](https://opensource.org/licenses/MIT)
[![React](https://img.shields.io/badge/react-%3E%3D18-2F6B4F)](https://react.dev)
[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Built with Radix UI](https://img.shields.io/badge/built%20with-Radix%20UI-D97A1F)](https://www.radix-ui.com/)

Calm, light-first React components built on [Radix](https://www.radix-ui.com/) primitives.
Simplicity, air, lightness — every interface should feel as open and uncluttered as a
deep breath.

## Install

Add the registry to your project `.npmrc`:

```
@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/
```

Then install:

```bash
npm install @olly/mt-air
```

`react` and `react-dom` (>=18) are peer dependencies — your app provides them.

## Usage

```tsx
import '@olly/mt-air/styles.css';        // required — tokens + components
import '@olly/mt-air/fonts.css';         // optional — branded faces
import { ThemeProvider, TooltipProvider, Button } from '@olly/mt-air';

export function App() {
  return (
    <ThemeProvider>
      <TooltipProvider delayDuration={200}>
        <Button variant="primary">Click</Button>
      </TooltipProvider>
    </ThemeProvider>
  );
}
```

### Theme

`ThemeProvider` manages a `data-theme` attribute (`light` / `dark`) on `<html>` and
persists the choice to `localStorage`. Read or change it anywhere with `useTheme()`.

### Fonts

Components read the `--mta-font-sans` and `--mta-font-mono` tokens. Import
`@olly/mt-air/fonts.css` for the branded faces (Plus Jakarta Sans + Fira Code), or
override those tokens to map the components onto fonts your app already loads.

## Components

Badge, Button, Icon Button, Card, Callout, Dialog, Alert Dialog, List, Menu,
Progress, Scroll Area, Segmented Control, Select, Selection, Slider, Spinner, Table,
Tabs, Text Field, Tooltip.

Browse every component, its prop table, and live controls in Storybook (see below).

## Development

```bash
npm install        # install dependencies
npm run dev         # start the rsbuild dev server
npm run storybook   # browse components in Storybook
npm run build        # build the package for publishing
npm run lint         # lint with rslint
npm run format       # format with prettier
```

## Learn more

- [Rsbuild documentation](https://rsbuild.rs)
- [Storybook documentation](https://storybook.js.org)
