# @klikui/core

Modern React UI component library. Built with CSS Modules + SCSS for production-ready applications.

[![npm version](https://img.shields.io/npm/v/@klikui/core)](https://www.npmjs.com/package/@klikui/core)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Features

- 🎨 **Silent design** - Refined, sophisticated UI with attention to detail
- ♿ **Accessibility first** - WCAG 2.1 AA compliant with ARIA support
- 🎯 **TypeScript native** - Full type safety out of the box
- 📦 **Tree-shakeable** - Import only what you need
- 🎭 **CSS Modules + SCSS** - Scoped styles, no runtime overhead
- 🌗 **Dual builds** - ESM and CommonJS support
- ⚡ **React 18 & 19** - Works with latest React versions

## Installation

```bash
npm install @klikui/core
```

## Quick Start

```tsx
import { Button, Input, Alert } from '@klikui/core';
import '@klikui/core/styles';

function App() {
  return (
    <div>
      <Alert variant="info">Welcome to klikui!</Alert>
      <Input label="Email" placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
    </div>
  );
}
```

## Available Components

### Forms & Inputs
- **Button** - Primary actions with 5 variants and loading states
- **Input** - Text inputs with labels, validation, and prefix/suffix
- **Checkbox** - Binary selection with indeterminate support
- **Radio** - Single selection control

### Feedback
- **Alert** - Inline messages with 4 severity levels
- **Toast** - Notifications with queue management
- **Modal** - Dialogs with focus trap and accessibility
- **Loading** - Animated spinner with optional message

### Layout & Navigation
- **Card** - Composable containers with Header/Body/Footer
- **Navigation** - App navigation bar with brand and links

### Display
- **Badge** - Status indicators and counts

## Component Examples

### Button

```tsx
import { Button } from '@klikui/core';

<Button variant="primary" size="lg" onClick={handleClick}>
  Click me
</Button>

<Button variant="danger" loading>
  Processing...
</Button>
```

### Input

```tsx
import { Input } from '@klikui/core';

<Input
  label="Username"
  placeholder="Enter username"
  helperText="Choose a unique username"
  error={errors.username}
/>
```

### Alert

```tsx
import { Alert } from '@klikui/core';

<Alert variant="success" closable>
  Your changes have been saved!
</Alert>
```

### Card

```tsx
import { Card, CardHeader, CardBody, CardFooter } from '@klikui/core';

<Card variant="elevated">
  <CardHeader>
    <h2>Card Title</h2>
  </CardHeader>
  <CardBody>
    <p>Card content goes here</p>
  </CardBody>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>
```

## Styling

klikui uses CSS Modules + SCSS for styling. Import the styles once in your app:

```tsx
import '@klikui/core/styles';
```

All components are styled with a sleek, modern design system featuring:
- Refined color palette
- Mathematical spacing scale (4px grid)
- Smooth animations with reduced-motion support
- Subtle shadows and depth

## TypeScript Support

klikui is written in TypeScript and includes full type definitions:

```tsx
import type { ButtonProps, InputProps } from '@klikui/core';

const CustomButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};
```

## Browser Support

- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)

## Documentation

Full documentation and interactive examples at [klikui.com](https://klikui.com)

## Contributing

Contributions welcome! Please read our contributing guidelines first.

## License

MIT © Sami