npm package: @pablituuu/quick-edit
Description: A React component for quick video editing with Mantine UI library
Author: Your Name
Latest version: 2.0.0

# Quick Edit - React Component Library

A beautiful React component built with Mantine UI library, featuring a counter and form example with full TypeScript support.

## 🚀 Features

- ⚛️ **React 18+** - Latest React with concurrent features
- 🎨 **Mantine 8** - Beautiful React components library
- 📱 **Responsive Design** - Built-in responsive utilities
- 🎯 **TypeScript** - Full type safety with exported types
- 🔧 **Customizable** - Props for customization and theming
- 📦 **NPM Package** - Ready to install and use

## 📦 Installation

```bash
npm install @pablituuu/quick-edit
# or
yarn add @pablituuu/quick-edit
# or
pnpm add @pablituuu/quick-edit
```

## 🎯 Usage

### Basic Usage

```tsx
import { QuickEdit } from '@pablituuu/quick-edit';

function App() {
  return (
    <QuickEdit 
      title="My Custom Title"
      initialCount={5}
      onSubmit={(data) => console.log('Form submitted:', data)}
      onCountChange={(count) => console.log('Count changed:', count)}
    />
  );
}
```

### With Custom Theme

```tsx
import { QuickEdit } from '@pablituuu/quick-edit';

function App() {
  return (
    <QuickEdit 
      theme={{
        primary: 'blue',
        secondary: 'green'
      }}
    />
  );
}
```

### With Custom Styling

```tsx
import { QuickEdit } from '@pablituuu/quick-edit';

function App() {
  return (
    <QuickEdit 
      className="my-custom-class"
      style={{ backgroundColor: '#f5f5f5' }}
    />
  );
}
```

## 🔧 Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | `"🚀 Mantine + Vite + React"` | Custom title for the component |
| `initialCount` | `number` | `0` | Initial value for the counter |
| `theme` | `object` | `{}` | Custom theme colors |
| `onSubmit` | `function` | `undefined` | Callback when form is submitted |
| `onCountChange` | `function` | `undefined` | Callback when count changes |
| `className` | `string` | `undefined` | Custom CSS class name |
| `style` | `object` | `undefined` | Custom inline styles |

## 📁 Project Structure

```
src/
├── QuickEdit.tsx        # Main component
├── types.ts             # TypeScript type definitions
├── index.ts             # Library entry point
├── App.tsx              # Demo app
└── main.tsx             # App entry point
```

## 🎨 Styling

The component uses Mantine's styling system. You can customize it by:

1. **Using Mantine theme provider** in your app
2. **Overriding CSS variables** for custom colors
3. **Using the theme prop** for component-specific customization
4. **Adding custom className and style props**

## 🔧 Development

### Prerequisites

- Node.js 18+
- pnpm (recommended) or npm

### Setup

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build library
pnpm build:lib

# Build demo app
pnpm build
```

### Publishing

```bash
# Build the library
pnpm build:lib

# Publish to npm
npm run publish
```

## 📚 Dependencies

- **@mantine/core** - UI component library
- **@mantine/hooks** - Useful React hooks
- **@tabler/icons-react** - Beautiful icons
- **React 18+** - React framework

## 🤝 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.

## 🔗 Links

- [Mantine Documentation](https://mantine.dev/)
- [React Documentation](https://react.dev/)
- [NPM Package](https://www.npmjs.com/package/@pablituuu/quick-edit)