# ColorSnap UI

![Version](https://img.shields.io/badge/version-v0.0.1-blue)
![License](https://img.shields.io/badge/license-Apache%202.0-green)
![React](https://img.shields.io/badge/react-18+-61DAFB)
![Website](https://img.shields.io/badge/docs-colorsnap.org-orange)

Build beautiful web interfaces faster with modern, reusable React, JavaScript, TypeScript, and HTML components.

> Python support is planned for v1.0.0.

ColorSnap UI is an open-source component library featuring accessible, customizable, and production-ready UI primitives.

## Features

* 🎨 Modern and clean design
* ⚡ Lightweight and fast
* ♿ Accessible components
* 📱 Responsive by default
* 🌙 Multiple built-in themes
* 🔧 Highly customizable
* 🚀 Production-ready
* 📖 Developer-friendly API

## Installation

```bash
npm install @colorsnap/ui
```

Current Release: **v0.0.1**

## CDN Usage

```html
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@colorsnap/ui/dist/colorsnap.umd.js"></script>
```

```js
const { Button, setTheme, initTheme } = window.ColorSnap;

initTheme();
setTheme('dark');
```

## Themes

Available themes:

* light
* dark
* midnight
* ocean
* forest
* rose
* mono

```jsx
import { setTheme, initTheme } from '@colorsnap/ui';
import '@colorsnap/ui/dist/ui.css';

initTheme();
setTheme('ocean');
```

## Usage

```jsx
import {
  Button,
  Input,
  Card,
  Stack,
  Select,
  Alert,
  Modal,
  Tabs,
  Avatar,
  Badge,
  Stat,
  ToastProvider,
  useToast,
} from '@colorsnap/ui';

import '@colorsnap/ui/dist/ui.css';
```

### Layout

```jsx
<Stack direction="column" gap="md">
  <Card title="Dashboard" description="Overview of your account">
    <p>Content here</p>
  </Card>
</Stack>
```

### Forms

```jsx
<Select
  label="Country"
  value={country}
  onChange={(e) => setCountry(e.target.value)}
  options={[
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
  ]}
/>
```

### Feedback

```jsx
const { toast } = useToast();

toast({
  message: 'Saved!',
  variant: 'success',
});
```

### Overlay

```jsx
<Modal open={open} onClose={() => setOpen(false)} title="Confirm">
  <p>Are you sure?</p>
</Modal>
```

### Navigation

```jsx
<Tabs
  value={tab}
  onChange={setTab}
  tabs={[
    { label: 'Overview', value: 'overview', content: <p>Overview</p> },
    { label: 'Settings', value: 'settings', content: <p>Settings</p> },
  ]}
/>
```

### Display

```jsx
<Avatar name="Jane Doe" size="md" />
<Badge variant="success">Active</Badge>
<Stat label="Revenue" value="$12,400" delta="+12%" deltaType="up" />
```

## Documentation

https://colorsnap.org

## Contact

[ayaanglobals@gmail.com](mailto:ayaanglobals@gmail.com)

## License

Licensed under the Apache License 2.0.

See the LICENSE file for details.