npm package: @profitliga/ui
Description: Vue 3 UI component library with TypeScript and SCSS
Author: Profit League
Latest version: 1.2.75

# UI Kit

Vue 3 UI component library with TypeScript and SCSS support.

## View Storybook Library

[Storybook Library](https://697758c596ce722ff0116b1e-dxbdjystav.chromatic.com/)

## Installation

```bash
yarn @profitliga/ui
```

## Usage

### Importing Components

```typescript
import { Button } from '@profitliga/ui/components'
import '@profitliga/ui/style.css'
```

### Using Components

```vue
<script setup lang="ts">
import { Button } from '@profitliga/ui/components'

const handleClick = () => {
	console.log('Button clicked!')
}
</script>

<template>
	<div>
		<Button @click="handleClick"> Click Me </Button>

		<Button variant="secondary" size="large"> Secondary Button </Button>

		<Button variant="outline" :disabled="true"> Disabled Button </Button>
	</div>
</template>
```

### Using Composables

```vue
<script setup lang="ts">
import { useCounter } from '@profitliga/ui/utils'

const { count, increment, decrement, reset, isAtMax, isAtMin } = useCounter({
	initialValue: 0,
	min: 0,
	max: 10
})
</script>

<template>
	<div>
		<p>Count: {{ count }}</p>
		<button @click="increment" :disabled="isAtMax">+</button>
		<button @click="decrement" :disabled="isAtMin">-</button>
		<button @click="reset">Reset</button>
	</div>
</template>
```

## Customization with SCSS

You can import and customize SCSS variables in your project:

```scss
// Override default variables
$primary-color: #your-color;
$border-radius: 0.5rem;

// Import ui-kit styles
@use '@profitliga/ui/styles/variables' as *;
@use '@profitliga/ui/styles/mixins' as *;
```

### Available SCSS Variables

```scss
// Colors
$primary-color: #3b82f6
$secondary-color: #64748b
$text-color: #1e293b
$background-color: #ffffff
$border-color: #e2e8f0

// Spacing
$spacing-xs: 0.25rem
$spacing-sm: 0.5rem
$spacing-md: 1rem
$spacing-lg: 1.5rem
$spacing-xl: 2rem

// Border radius
$border-radius: 0.375rem
$border-radius-sm: 0.25rem
$border-radius-lg: 0.5rem
```

### Available Mixins

```scss
@use '@profitliga/ui/styles/mixins' as *;

.my-component {
	@include flex-center;
	@include hover-lift;
	@include responsive('tablet') {
		// tablet styles
	}
}
```

## Components

### Button

A versatile button component with multiple variants and sizes.

**Props:**

- `variant`: `'primary' | 'secondary' | 'outline'` (default: `'primary'`)
- `size`: `'small' | 'medium' | 'large'` (default: `'medium'`)
- `disabled`: `boolean` (default: `false`)

**Events:**

- `click`: Emitted when button is clicked (with MouseEvent)

## Composables

### useCounter

A composable for managing counter state with min/max constraints.

**Options:**

- `initialValue`: Starting value (default: `0`)
- `min`: Minimum allowed value (default: `-Infinity`)
- `max`: Maximum allowed value (default: `Infinity`)

**Returns:**

- `count`: Reactive counter value
- `increment()`: Increment counter
- `decrement()`: Decrement counter
- `reset()`: Reset to initial value
- `set(value)`: Set to specific value
- `isAtMin`: Boolean indicating if at minimum
- `isAtMax`: Boolean indicating if at maximum

## Development

```bash
# Install dependencies
yarn

# Build library
yarn build

# Type check
yarn type-check
```

## License

MIT