npm package: @mrpvi/ui-kit
Description: A flexible, modern React UI kit with dual usage patterns
Author: Your Name
Latest version: 1.1.0

# React UI Kit

A flexible, modern React UI kit that offers dual usage patterns:
1. **NPM Package Import** - Plug-and-play components with zero configuration
2. **Local Component Copy** - Full customization via CLI tool (Shadcn-style)

## 🎯 Features

- **React + TypeScript**: Robust component library with type safety
- **Tailwind v4**: Modern, utility-first CSS framework with @layer components for scoped styles
- **Custom Design Tokens**: Automatically injected for consistent theming
- **Universal Compatibility**: Works seamlessly with Next.js, Vite, Gatsby, Create React App, and any React-based project
- **CLI Tool**: Copy components locally for full customization (Shadcn-style)
- **No Tailwind Setup Required**: Styles and tokens are injected automatically
- **Fully Customizable**: Modify components when copied locally

## 📦 Installation

```bash
npm install @mrpvi/ui-kit
```

Or with Yarn:
```bash
yarn add @your-scope/ui-kit
```

## 🚀 Usage

### 1. Import Components Directly

Import and use components without any Tailwind configuration:

```tsx
import { Button } from "@your-scope/ui-kit";

export default function Page() {
  return <Button variant="primary">Click me</Button>;
}
```

Styles and design tokens are applied automatically.

### 2. Copy Components Locally

Use the CLI to copy components into your project for customization:

```bash
npx @mrpvi/ui-kit-cli add button
```

This copies the Button component and styles to `components/ui/button.tsx`.

## 🎨 Components

### Button
- **Variants**: `primary`, `secondary`
- **Sizes**: `sm`, `md`, `lg`
- **States**: `loading`, `disabled`
- **Props**: `block`, `icon`

```tsx
<Button variant="primary" size="lg" loading>
  Loading...
</Button>
```

### Input
- **Types**: `text`, `email`, `password`, `number`, `tel`, `url`
- **States**: `error`, `disabled`
- **Features**: `label`, `helperText`, `errorMessage`, `required`

```tsx
<Input
  label="Email"
  type="email"
  placeholder="Enter your email"
  helperText="We'll never share your email"
  required
/>
```

### Card
- **Variants**: `default`, `outlined`, `elevated`
- **Components**: `Card`, `CardHeader`, `CardBody`, `CardFooter`

```tsx
<Card variant="outlined">
  <CardHeader title="Card Title" subtitle="Card subtitle" />
  <CardBody>
    <p>Card content goes here</p>
  </CardBody>
  <CardFooter>
    <Button variant="primary">Action</Button>
  </CardFooter>
</Card>
```

### Typography
- **Variants**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `body1`, `body2`, `caption`, `small`
- **Props**: `color`, `align`, `component`

```tsx
<Typography variant="h1">Main Heading</Typography>
<Typography variant="body1" color="primary">
  Body text with primary color
</Typography>
```

### Container
- **Sizes**: `sm`, `md`, `lg`, `xl`, `2xl`, `full`
- **Props**: `fluid`

```tsx
<Container size="lg">
  <p>Centered content with max-width</p>
</Container>
```

## 🎨 Styling

Styles are scoped using Tailwind's `@layer components` and injected automatically:

```css
@layer components {
  .ar-btn {
    @apply px-4 py-3 rounded-lg leading-none transition-all text-body-2-strong flex justify-center items-center gap-2 h-10 hover:cursor-pointer;
  }

  .ar-btn-primary {
    @apply bg-primary-bg2-default text-neutral-fg3-default;
    &:hover {
      @apply bg-primary-bg2-hover;
    }
    &:active {
      @apply bg-primary-bg2-press;
    }
    &:disabled {
      @apply bg-primary-bg2-disable;
    }
  }
}
```

## 🎨 Custom Design Tokens

Tokens are embedded using CSS custom properties:

```css
@layer base {
  :root {
    --color-primary-bg2-default: #3b82f6;
    --color-primary-bg2-hover: #2563eb;
    --color-primary-bg2-press: #1d4ed8;
    --color-primary-bg2-disable: #93c5fd;
    --text-body-2-strong: 600 14px/20px var(--font-sans);
  }
}
```

No `tailwind.config.js` setup is required unless you want to extend or override tokens.

## 🛠️ CLI Usage

### Installation
```bash
npm install -g @mrpvi/ui-kit-cli
```

### Commands
```bash
npx @mrpvi/ui-kit-cli add button
npx @mrpvi/ui-kit-cli add dropdown
```

This copies component source files to your project for customization.

## 🌐 Supported Frameworks

- Next.js
- Vite (React)
- Gatsby
- Create React App
- Any React-based setup

No Tailwind configuration or plugins are needed.

## 🔧 Build & Develop

### Install Dependencies
```bash
npm install
```

### Build the Library
```bash
npm run build
```

### Develop Locally
```bash
npm run dev
```

### Type Checking
```bash
npm run type-check
```

## 📦 Publishing

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

Ensure your package.json includes:
```json
{
  "name": "@your-scope/ui-kit",
  "main": "dist/index.cjs.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts"
}
```

## 📄 License

MIT © YourName