vdk-components/README.md

React component library built with TypeScript and SCSS

# VDK Components

A React component library built with TypeScript and SCSS.

## Installation

```bash
npm install vdk-components
# or
yarn add vdk-components
```

## Usage

### Import Components

```jsx
import { Button, Card, Avatar } from 'vdk-components';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Card title="My Card">Card content</Card>
      <Avatar alt="John Doe" />
    </div>
  );
}
```

### Import Styles

Import the global styles in your app's entry point (e.g., `App.tsx` or `index.tsx`):

```jsx
import 'vdk-components/dist/styles.css';
```

## Available Components

### Avatar
- Supports images and initials
- Multiple sizes: small, medium, large
- Shapes: circle, square
- Status indicators: online, offline, away, busy

### Button
- Variants: primary, secondary, outline
- Sizes: small, medium, large
- Disabled state

### Card
- Multiple variants: default, elevated, outlined, gradient, dark, interactive, bordered, compact
- Optional image
- Optional footer
- Click handler support

### Switch
- Toggle state
- Loading state
- Disabled state
- Custom labels
- Success, warning, and error states

### Toast
- Types: success, error, warning, info
- Custom duration
- Auto-close option
- Manual close support

### Tooltip
- Positions: top, right, bottom, left
- Custom delay
- HTML content support
- Custom triggers

## Development

```bash
# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build the library
npm run build
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.