npm package: @jonasui/ui
Description: A theme-agnostic React UI component library built with Tailwind CSS and Atomic Design
Author: JonasUI
Latest version: 0.1.16

# @jonasui/ui

A theme-agnostic React UI component library built with Tailwind CSS and Atomic Design principles.

## Installation

```bash
npm install @jonasui/ui
```

**Peer Dependencies** (required):
```bash
npm install react react-dom tailwindcss
```

## Setup

### 1. Configure Tailwind CSS

Add the library path to your `tailwind.config.js`:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // Your project files
    './src/**/*.{js,ts,jsx,tsx}',
    // JonasUI components
    './node_modules/@jonasui/ui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Your custom theme
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
}
```

### 2. Add CSS Variables

Add these CSS variables to your global CSS file:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
}
```

## Usage

### Button Component

```tsx
import { Button } from '@jonasui/ui'

// Basic usage
<Button>Click me</Button>

// Variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Sizes
<Button size="default">Default</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <Icon />
</Button>

// Disabled state
<Button disabled>Disabled</Button>

// Composition with asChild
<Button asChild>
  <a href="/link">Link Button</a>
</Button>

// Custom styling
<Button className="w-full">Full Width</Button>
```

## Components

### Atoms

- **Button** - Interactive button component with multiple variants and sizes

### Molecules (Coming Soon)

- FormField - Label + Input + Error message composition

### Organisms (Coming Soon)

- LoginForm - Complete login form with validation

## Atomic Design Structure

This library follows Atomic Design methodology:

```
src/
├── atoms/        # Basic building blocks (Button, Input, Label)
├── molecules/    # Simple compositions (FormField, SearchBar)
├── organisms/    # Complex components (LoginForm, Navbar)
└── index.ts      # Main exports
```

## Features

- ✅ **TypeScript** - Full type support
- ✅ **Tailwind CSS** - Utility-first styling
- ✅ **Atomic Design** - Scalable component organization
- ✅ **Shadcn UI Patterns** - Battle-tested component patterns
- ✅ **Radix UI Primitives** - Accessible, unstyled components
- ✅ **Composition** - Flexible `asChild` prop for custom elements
- ✅ **Theme-Agnostic** - Bring your own Tailwind theme
- ✅ **Tree-Shakeable** - Only import what you need

## Development

```bash
# Install dependencies
npm install

# Run development server
npm run dev

# Run tests
npm test

# Build for production
npm run build
```

## License

MIT