npm package: @fortune-kit/components
Description: Vue 3 UI components for iGaming - wheel, quiz, leaderboard, rewards
Author: Viktor Pavlov
Latest version: 0.1.1

# @fortune-kit/components

Vue 3 UI components for iGaming applications - wheel of fortune, quiz, leaderboard, rewards, and more.

## Installation

```bash
npm install @fortune-kit/components vue
```

## Quick Start

```vue
<script setup>
import { FkWheel, FkResultModal } from '@fortune-kit/components'
import '@fortune-kit/components/style.css'
import { ref } from 'vue'

const segments = [
  { id: '1', label: '100', value: 100, color: '#22c55e' },
  { id: '2', label: '500', value: 500, color: '#3b82f6' },
  { id: '3', label: 'JACKPOT', value: 5000, color: '#ef4444' },
]

const showResult = ref(false)
const result = ref(null)

function handleWin(segment) {
  result.value = segment
  showResult.value = true
}
</script>

<template>
  <FkWheel :segments="segments" @spin-end="handleWin" />

  <FkResultModal
    v-model:open="showResult"
    type="win"
    title="You Won!"
    :amount="result?.value"
    currency="$"
  />
</template>
```

## Components

### Gaming
- **FkWheel** - Spin-to-win wheel of fortune
- **FkQuiz** - Timed quiz with scoring
- **FkRewardReveal** - Animated reward reveal (chest/card/box)

### Results
- **FkResultModal** - Full-screen result with confetti
- **FkResultPanel** - Inline result display
- **FkResultToast** - Toast notification
- **FkResultWin/Lose/Info** - Semantic result components

### Progress
- **FkProgress** - Progress bar with milestones
- **FkStreak** - Daily streak tracker

### Leaderboard
- **FkLeaderboard** - Ranked player list

### Primitives
- **FkButton** - Button with variants
- **FkModal** - Accessible modal dialog
- **FkTabs** - Tabbed interface
- **FkTooltip** - Hover tooltip

### Theme
- **FkThemeProvider** - Theme context provider
- **FkThemeToggle** - Dark/light toggle

## Theming

```vue
<script setup>
import { FkThemeProvider, FkThemeToggle } from '@fortune-kit/components'
</script>

<template>
  <FkThemeProvider default-theme="system">
    <FkThemeToggle />
    <YourApp />
  </FkThemeProvider>
</template>
```

### Using Theme Composable

```vue
<script setup>
import { useTheme } from '@fortune-kit/components'

const { isDark, toggle, setTheme } = useTheme()
</script>
```

## Examples

### Wheel of Fortune

```vue
<template>
  <FkWheel
    :segments="segments"
    :size="320"
    :spin-duration="4000"
    show-probability
    @spin-start="onStart"
    @spin-end="onEnd"
  />
</template>
```

### Quiz Game

```vue
<template>
  <FkQuiz
    :questions="questions"
    :time-per-question="30"
    shuffle-options
    @answer="onAnswer"
    @complete="onComplete"
    @timeout="onTimeout"
  />
</template>
```

### Leaderboard

```vue
<template>
  <FkLeaderboard
    :entries="players"
    :current-user-id="myId"
    show-rank-change
    @entry-click="onPlayerClick"
  />
</template>
```

### Daily Streak

```vue
<template>
  <FkStreak
    :days="streakDays"
    :current-day="3"
    @claim="onClaim"
  />
</template>
```

## CSS Variables

All components use CSS custom properties with `--fk-` prefix:

```css
:root {
  --fk-color-primary-DEFAULT: #f59e0b;
  --fk-color-win-DEFAULT: #22c55e;
  --fk-color-lose-DEFAULT: #ef4444;
  --fk-color-background-DEFAULT: #09090b;
  --fk-color-foreground-DEFAULT: #fafafa;
}
```

## Documentation

Full documentation: https://fortune-kit.vercel.app

## License

MIT