npm package: @jgoldfoot/conviva-ui
Description: Conviva-branded UI component library based on shadcn/ui
Author: Conviva
Latest version: 0.1.0

# @conviva/ui

Conviva-branded UI component library based on shadcn/ui with custom Conviva theming and analytics components.

## Features

- 🎨 **Conviva Branding**: All components styled with Conviva's brand colors (#73A600 green)
- ♿ **Accessible**: WCAG AA compliant with colorblind-friendly semantic colors
- 🎯 **Type-safe**: Full TypeScript support
- 📦 **Tree-shakeable**: Import only what you need
- 🔧 **Customizable**: Built with Tailwind CSS and Radix UI primitives
- 🚀 **bolt.new Compatible**: Registry support for easy integration

## Installation

```bash
npm install @conviva/ui
```

### Peer Dependencies

```bash
npm install react react-dom tailwindcss
```

## Setup

### 1. Configure Tailwind CSS

Add the package to your `tailwind.config.js`:

```js
module.exports = {
  content: [
    "./src/**/*.{ts,tsx}",
    "./node_modules/@conviva/ui/dist/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

### 2. Import Global Styles

Import the Conviva design tokens in your main CSS file or app entry point:

```tsx
import "@conviva/ui/dist/styles/globals.css";
```

Or copy the CSS variables from `src/styles/globals.css` to your own global CSS file.

## Components

### Button

Conviva-branded button with multiple variants:

```tsx
import { Button } from "@conviva/ui";

<Button>Primary (Conviva Green)</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
```

### Card

Layout component for content containers:

```tsx
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@conviva/ui";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Content goes here
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>
```

### Input

Form input with Conviva styling:

```tsx
import { Input } from "@conviva/ui";

<Input type="email" placeholder="Email" />
```

## Design Tokens

### Primary Colors
- **Primary (Conviva Green)**: `#73A600` - Brand-compliant green
- **Secondary**: Modern sophisticated blue
- **Success**: `#059669` - Cool green (distinct from primary)
- **Warning**: `#D97706` - Orange (better contrast than yellow)
- **Destructive**: `#DC2626` - Red with good contrast

### Utility Classes

```tsx
// Conviva branding
<div className="conviva-primary">Conviva primary background</div>
<div className="conviva-brand">Conviva brand background</div>
<div className="conviva-modern-blue">Modern blue background</div>

// Accessibility-friendly status indicators
<div className="status-success">Success status</div>
<div className="status-warning">Warning status</div>
<div className="status-error">Error status</div>
```

## Development

```bash
# Install dependencies
npm install

# Build the library
npm run build

# Watch mode
npm run dev

# Type checking
npm run typecheck
```

## bolt.new Integration

This package supports bolt.new registry integration. Components can be added to your bolt.new project using the registry files in the `registry/` directory.

## License

MIT

## Contributing

Contributions are welcome! Please ensure all components maintain:
- Conviva brand consistency
- WCAG AA accessibility standards
- TypeScript type safety
- Consistent API with shadcn/ui