npm package: @notapro/notaui
Description: A lightweight, beautiful, and fully customizable React UI component library built by NotAPro.
Author: NotAPro
Latest version: 2.0.4

# NotAUI

A lightweight, beautiful, and fully customizable React UI component library built by NotAPro.

## ✨ Features

-   🔧 TypeScript-first: All components are fully typed
-   🎨 Theming System: CSS Variables with automatic dark mode support
-   ⚛️ Lightweight: Tree-shakable React components
-   📚 Storybook-ready: Complete documentation and examples
-   🛠️ Developer-friendly: Built-in debug utilities and comprehensive prop APIs
-   🌙 Dark Mode: Automatic system preference detection with manual override

## 📦 Installation

```bash
npm install @notapro/notaui
# or
yarn add @notapro/notaui
```

## 🚀 Quick Start

```jsx
import { Button, Input, Card, Alert, Viewer } from "@notapro/notaui";

export default function App() {
    const [data, setData] = useState({ message: "Hello NotAUI!" });

    return (
        <div>
            <Card>
                <Card.Header>Welcome to NotAUI</Card.Header>
                <Card.Body>
                    <Input placeholder="Your name" />
                    <Button label="Submit" color="primary" />
                </Card.Body>
            </Card>

            <Alert color="success" autoClose>
                Successfully submitted!
            </Alert>

            <Viewer data={data} copyable showLineNumbers />
        </div>
    );
}
```

## 🎨 Theming

NotAUI supports both light and dark themes automatically:

```css
/* Custom theme variables */
:root {
    --color-primary: #your-color;
    --color-success: #your-success-color;
    --spacing-md: 16px;
    --border-radius: 8px;
}
```

## 📚 Components

| Category   | Components                                                                                         | Description                      |
| ---------- | -------------------------------------------------------------------------------------------------- | -------------------------------- |
| Form       | Input, TextArea, Select, RadioGroup, Checkbox, Switch, FileUpload, Slider, ColorPicker, DatePicker | Form controls and input elements |
| Display    | Card, Avatar, Badge, Divider, Markdown                                                             | Content presentation             |
| Controls   | Button, ButtonGroup                                                                                | Interactive elements             |
| Feedback   | Alert                                                                                              | Toast-style notifications        |
| Utilities  | Viewer                                                                                             | Developer debugging tool         |
| Layout     | Container, Stack, Flex, Grid                                                                       | Layout and positioning           |
| Navigation | Breadcrumb                                                                                         | Site navigation                  |
| Loading    | Spinner, Progress, Placeholder                                                                     | Loading states and indicators    |
| Data       | Table, Rating                                                                                      | Data presentation                |

## 🛠️ Utility Classes

NotAUI includes utility classes for rapid development:

```jsx
<div className="flex items-center gap-sm p-md bg-surface rounded">
    <span className="text-success text-lg">✓</span>
    <span className="text-primary">Success!</span>
</div>
```

Available utilities:

-   Spacing: m-xs, p-md, mt-lg, pl-sm, etc.
-   Colors: text-primary, bg-success, text-warning
-   Typography: text-sm, text-lg

## 📖 Documentation

Launch Storybook locally to explore all components:

```bash
npm run storybook
```

## 🛠 Development

To build the library:

```bash
npm run build
```

To run tests:

```bash
npm test
```

To publish to npm:

```bash
npm publish --access public
```

⚠️ Make sure you are logged in with npm login

## 🧑‍💻 Author

Created by NotAPro

## 📄 License

MIT