manuo/README.md

UI component library for React Native + NativeWind, mobile-first and platform-specific.

# 🧩 manuo

**manuo** is a mobile-first, cross-platform UI component library for **React Native** + **NativeWind**, tailored for modern apps built with **Expo**.  
It provides native-feeling, theme-aware components inspired by **Material Design (Android)** and **UIKit (iOS)**.

---

## 🚀 Installation

```bash
    npm install manuo
```
or
```bash
    yarn add manuo
```
Required peer dependencies:
- react, react-native, expo
- nativewind
- tailwindcss with nativewind/preset
⚙️ Tailwind Setup

Add manuo to your tailwind.config.js:
```tsx

// tailwind.config.js
module.exports = {
content: [
        './App.{js,ts,jsx,tsx}',
        './components/**/*.{js,ts,jsx,tsx}',
        './node_modules/manuo/**/*.{js,ts,jsx,tsx}', // ✅ include manuo
        ],
presets: [require('nativewind/preset')],
theme: {
extend: {},
},
plugins: [],
};
```

📦 Available Components

✅ Button
A platform-aware button that renders Pressable on iOS and TouchableNativeFeedback on Android, with built-in variants and full NativeWind support.
```tsx

import { Button } from 'manuo';
import { Ionicons } from '@expo/vector-icons';

<Button
    title="Primary"
    variant="primary"
    icon={<Ionicons name="play" size={16} color="white" />}
    onPress={() => console.log('Pressed')}
    className="w-48"
/>
```
Props

| Prop            | Type                                                   | Description                              |
| --------------- | ------------------------------------------------------ | ---------------------------------------- |
| `title`         | `string`                                               | The text inside the button               |
| `variant`       | `'primary'` \| `'secondary'` \| `'tonal'` \| `'plain'` | Visual style of the button               |
| `icon`          | `ReactNode`                                            | Icon component displayed before the text |
| `onPress`       | `(event) => void`                                      | Button press callback                    |
| `loading`       | `boolean`                                              | Displays `ActivityIndicator` when true   |
| `loaderColor`   | `string` (hex / color name)                            | Customize the loading spinner color      |
| `className`     | `string` (Tailwind classes)                            | Custom styles for the button container   |
| `textClassName` | `string` (Tailwind classes)                            | Custom styles for the button text        |

Variants Example
```tsx

<Button variant="primary" title="Primary" />
<Button variant="secondary" title="Secondary" />
<Button variant="tonal" title="Tonal" loading />
<Button variant="plain" title="Plain" />
<Button
  variant="tonal"
  icon={<Ionicons name="heart" size={20} color="#2563eb" />}
  className="w-10 h-10 rounded-xl"
/>
```
✨ Features

- 🎯 Platform-specific behavior (Ripple effect on Android, opacity on iOS)
- 🎨 Tailwind-compatible styling via NativeWind
- ⚙️ Themeable, customizable, mobile-first
- 💨 Lightweight and fast
- ✅ Fully typed with TypeScript


🧱 Roadmap (in progress)

- Button component (iOS & Android variants)
- Text component with variants and theming
- Switch / Toggle
- Input / TextField
- Modal & Dialog
- Responsive layout primitives (Stack, Box, Grid)

📄 License

MIT — © 2025