Wheel Picker

<script setup lang="ts">
import { ref } from 'vue'
import { WheelPicker, WheelPickerWrapper } from '@/components/ui/wheel-picker'

const dateState = ref({ month: 5, day: 15, year: 2025 })
// ... options arrays (months, days, years)
</script>

<template>
  <WheelPickerWrapper>
    <WheelPicker v-model="dateState.month" :options="months" infinite class="flex-[2]" />
    <WheelPicker v-model="dateState.day" :options="days" infinite class="flex-1" />
    <WheelPicker v-model="dateState.year" :options="years" infinite class="flex-1" />
  </WheelPickerWrapper>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { WheelPicker, WheelPickerWrapper } from '@/components/ui/wheel-picker'

const score = ref(5)
const scores = Array.from({ length: 11 }, (_, i) => ({ value: i, label: i.toString() }))
</script>

<template>
  <WheelPickerWrapper>
    <WheelPicker
      v-model="score"
      :options="scores"
      :class-names="{
        highlightWrapper: 'border-blue-500/50 bg-blue-500/10 rounded-lg',
        highlightItem: 'text-blue-500 font-bold'
      }"
    />
  </WheelPickerWrapper>
</template>