air-command-ui-library/README.md

A React component library for Air Command System with Storybook

# Air Command UI Library

A modern React component library built with TypeScript and CSS Modules.

## Typography

This component library uses [**Inter**](https://fonts.google.com/specimen/Inter) as the primary font
family across all components. Inter is a carefully crafted typeface specifically designed for
computer screens and user interfaces.

### Font Features

- **Weights**: 100-900 (Thin to Black)
- **Optimized**: for digital interfaces and high-resolution screens
- **Variable Font**: supports modern font features
- **Accessibility**: excellent readability at all sizes

### Usage

The Inter font is automatically loaded when you import any component from this library:

```tsx
import { Button, ComboBox, Input, Table } from 'air-command-ui-library';

// Inter font is automatically applied to all components
```

### Font Loading

The library uses Google Fonts CDN to load Inter with optimized weights:

```css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
```

## Components

- **Button** - Interactive buttons with multiple variants
- **ComboBox** - Dropdown selection component with search
- **Input** - Form input fields with validation
- **Table** - Data tables with sorting and filtering

All components are built with:

- ✅ **TypeScript** for type safety
- ✅ **CSS Modules** for scoped styling
- ✅ **Inter Font** for consistent typography
- ✅ **Dark/Light** theme support
- ✅ **Accessibility** features

## Installation

```bash
npm install air-command-ui-library
```

## Quick Start

```tsx
import { Button, ComboBox } from 'air-command-ui-library';

function App() {
  return (
    <div>
      <Button theme='dark' size='md'>
        Click me
      </Button>

      <ComboBox
        options={[
          { value: 'option1', label: 'Option 1' },
          { value: 'option2', label: 'Option 2' },
        ]}
        theme='light'
        placeholder='Select an option...'
      />
    </div>
  );
}
```