npm package: @lyrnui/react
Description: React components for LyrnUI design system
Author: Kirill Lakhtachev
Latest version: 0.1.1

# @lyrnui/react

React components for the LyrnUI design system.

## Installation

```bash
npm install @lyrnui/react @lyrnui/core
```

## Usage

### Basic Setup

```tsx
import { Button, Input } from '@lyrnui/react';
import '@lyrnui/core/styles';

function App() {
  return (
    <div>
      <Button variant="primary" size="lg">
        Click me
      </Button>
      <Input label="Email" placeholder="Enter your email" />
    </div>
  );
}
```

## Components

### Button

A versatile button component with multiple variants and states.

```tsx
import { Button } from '@lyrnui/react';

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

// With variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// With sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

// With loading state
<Button loading>Loading...</Button>

// With icons
<Button leftIcon={<Icon />}>With Left Icon</Button>
<Button rightIcon={<Icon />}>With Right Icon</Button>
```

#### Button Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger'` | `'primary'` | Visual style variant |
| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Button size |
| `disabled` | `boolean` | `false` | Whether the button is disabled |
| `loading` | `boolean` | `false` | Whether the button is in loading state |
| `leftIcon` | `ReactNode` | - | Icon to display before text |
| `rightIcon` | `ReactNode` | - | Icon to display after text |
| `children` | `ReactNode` | - | Button content |

### Input

A form input component with validation states and accessibility features.

```tsx
import { Input } from '@lyrnui/react';

// Basic usage
<Input placeholder="Enter your name" />

// With label
<Input label="Email" placeholder="Enter your email" />

// With helper text
<Input 
  label="Password" 
  type="password"
  helperText="Must be at least 8 characters"
/>

// With validation states
<Input 
  label="Email" 
  error="Please enter a valid email"
/>

<Input 
  label="Username" 
  success="Username is available"
/>

<Input 
  label="Phone" 
  warning="Please include country code"
/>

// With addons
<Input 
  label="Price"
  leftAddon="$"
  rightAddon="USD"
/>

// With character count
<Input 
  label="Bio"
  maxLength={200}
  showCharacterCount
/>
```

#### Input Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | `string` | - | Input label |
| `helperText` | `string` | - | Helper text below input |
| `error` | `string` | - | Error message |
| `success` | `string` | - | Success message |
| `warning` | `string` | - | Warning message |
| `leftAddon` | `ReactNode` | - | Left addon (icon or text) |
| `rightAddon` | `ReactNode` | - | Right addon (icon or text) |
| `maxLength` | `number` | - | Maximum character count |
| `showCharacterCount` | `boolean` | `false` | Show character count |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |

## Theming

All components support theming through CSS custom properties:

```css
:root {
  --lyrnui-primary-500: #your-color;
  --lyrnui-radius-md: 0.5rem;
}
```

## Dark Mode

Components automatically support dark mode when the `dark` class is added to the HTML element:

```javascript
document.documentElement.classList.add('dark');
```

## Accessibility

All components are built with accessibility in mind:

- Proper ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- Focus management
- Color contrast compliance

## License

MIT