npm package: @pibit.ai/cure-design-system
Description: CURE Design System - React component library
Author: Pibit
Latest version: 0.3.12

# @pibit.ai/cure-design-system

A modern, accessible React component library for building B2B SaaS applications.

📚 **[View Storybook Documentation](https://pibit-ai.github.io/pibit-components/)**

## Installation

```bash
npm install @pibit.ai/cure-design-system
```

## Setup

Simply import the pre-built component styles in your app entry point:

```typescript
// Import component styles (includes theme + all utilities)
import '@pibit.ai/cure-design-system/styles';
```

**That's it!** No Tailwind configuration needed. All component styles are pre-built and ready to use.

### Alternative: Import theme only

If you're using your own Tailwind setup and want just the theme variables:

```typescript
import '@pibit.ai/cure-design-system/styles/theme';
```

## Components

### Primitives

- **Button** – Multiple variants, sizes, and states
- **Input** – Text input with labels, validation, and icons
- **Checkbox** – Accessible checkbox with label and description
- **Badge** – Status indicators and labels
- **Avatar** – Profile images with fallback support
- **Icon** – Unified icon system
- **Text** – Typography component
- **Heading** – Semantic headings
- **Toggle** – Switch component

### Patterns

- **Table** – Data table with sorting and pagination

## Usage

### Button

```tsx
import { Button } from '@pibit.ai/cure-design-system/primitives/button';

<Button variant="primary">Submit</Button>
<Button variant="secondary" size="lg">Cancel</Button>
<Button variant="destructive">Delete</Button>
```

### Input

```tsx
import { Input } from '@pibit.ai/cure-design-system/primitives/input';
import { Icon } from '@pibit.ai/cure-design-system/primitives/icon';

<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  isRequired
/>

<Input
  label="Search"
  leftIcon={<Icon name="SearchMd" size={16} />}
  placeholder="Search..."
/>

<Input
  label="Password"
  type="password"
  errorMessage="Password is required"
/>
```

### Checkbox

```tsx
import { Checkbox } from '@pibit.ai/cure-design-system/primitives/checkbox';

<Checkbox
  label="I accept the terms and conditions"
  description="You must accept to continue"
  checked={accepted}
  onCheckedChange={(checked) => setAccepted(!!checked)}
/>
```

### Badge

```tsx
import { Badge } from '@pibit.ai/cure-design-system/primitives/badge';

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="outline">Draft</Badge>
```

### Avatar

```tsx
import { Avatar } from '@pibit.ai/cure-design-system/primitives/avatar';

<Avatar
  src={user.avatarUrl}
  alt={user.name}
  fallback={user.initials}
  size="lg"
/>
```

### Icon

```tsx
import { Icon } from '@pibit.ai/cure-design-system/primitives/icon';

<Icon name="ChevronDown" size={16} />
<Icon name="SearchMd" size={20} className="text-gray-500" />
<Icon name="CheckCircle" size={24} className="text-success-600" />
```

## Imports

### Direct imports (recommended)

```typescript
import { Button } from '@pibit.ai/cure-design-system/primitives/button';
import { Input } from '@pibit.ai/cure-design-system/primitives/input';
```

### Barrel import

```typescript
import { Button, Input, Badge } from '@pibit.ai/cure-design-system';
```

## Accessibility

All components are built with accessibility as a priority:

- WCAG 2.1 AA compliant
- Full keyboard navigation
- Screen reader support
- Proper focus management
- Semantic HTML

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## License

MIT