maie-ui-library/README.md

Comprehensive UI component library with CSS variables for easy customization

# @maie/ui-library

A comprehensive React TypeScript UI component library with 64+ components and CSS variable customization.

## 🚀 Features

- **64+ Components** organized into 7 categories
- **TypeScript Support** with full type definitions
- **CSS Variables** for easy customization
- **React 18+ Compatible**
- **Zero Dependencies** (except React and react-icons)
- **Tree Shakeable** - import only what you need

## 📦 Installation

```bash
npm install @maie/ui-library
```

## 🎨 Quick Start

### 1. Import the CSS Variables

```css
/* In your main CSS file */
@import "@maie/ui-library/ui-library.css";
```

### 2. Override Variables (Optional)

```css
/* Override default variables */
:root {
  --ui-primary: #your-brand-color;
  --ui-secondary: #your-secondary-color;
  --ui-font-size-base: 16px;
  --ui-border-radius: 8px;
}
```

### 3. Import Components

```tsx
import React from "react";
import { Button, Message, Loader } from "@maie/ui-library";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Message type="success">Success!</Message>
      <Loader size="medium" />
    </div>
  );
}
```

## 🎯 Component Categories

### Core Components (8)

- ActionButtons, Button, ButtonGroup, IconButton, ButtonBar, Switch, AuthFormCard, LinkButton

### Feedback Components (6)

- Loader, Message, StatusIndicator, Toast, ToastContainer, InfoBox, InfoTooltip

### Form Components (13)

- Input, TextField, NumberField, NativeSelect, LabeledInput, DescriptionField, EditableTitle, FormLayout, FormRow, QuestionAnswerForm, QuestionAnswerInterface, MultiCateogrySelector, NestedDragAndDropEditor

### Data Display Components (20)

- Accordion, Badge, Dropdown, Pill, PillsGrid, OptionGrid, DataField, KeyValueList, AddableList, CollapsibleSection, JsonTree, JsonTreeView, ModeSelector, PillSelector, QuickActionsDropdown, SectionedStepper, SectionedStepperActions, SelectibleList, SortFilterControls, SummaryReport, AutoNextToggle, GenericReport

### Layout Components (6)

- Card, ContentCard, PageLayout, AppLayout, HeroSection, WelcomePanel

### Navigation Components (5)

- TopBar, NavigationMenu, CollapsibleSidebar, UserProfileMenu, CollapsibleNavigationMenu

### Overlay Components (2)

- Modal, ConfirmModal

## 🎨 CSS Variables

The library uses CSS variables for easy customization. All variables are prefixed with `--ui-`:

### Colors

```css
--ui-primary: #007bff;
--ui-secondary: #6c757d;
--ui-success: #28a745;
--ui-danger: #dc3545;
--ui-warning: #ffc107;
--ui-info: #17a2b8;
```

### Typography

```css
--ui-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
  sans-serif;
--ui-font-size-base: 16px;
--ui-font-weight-normal: 400;
--ui-font-weight-bold: 700;
```

### Spacing

```css
--ui-padding: 8px;
--ui-margin: 8px;
--ui-gap: 8px;
```

### Border & Radius

```css
--ui-border-radius: 4px;
--ui-border-width: 1px;
--ui-border-color: #e9ecef;
```

## 📚 Documentation

For detailed component documentation and examples, visit our [documentation site](https://ui-library.maie.dev).

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🆘 Support

- 📧 Email: support@maie.dev
- 💬 Discord: [Join our community](https://discord.gg/maie)
- 📖 Documentation: [docs.maie.dev](https://docs.maie.dev)