Stars Scrolling Wheel

import { StarsScrollingWheel } from '@hanzo/ui'

export function Default() {
  return <StarsScrollingWheel defaultValue={0} max={5} />
}

export function Controlled() {
  const [value, setValue] = useState(3)
  return (
    <YStack gap="$3" items="center">
      <StarsScrollingWheel value={value} max={5} onValueChange={setValue} />
      <Text>{value} of 5 stars</Text>
    </YStack>
  )
}

export function HalfStars() {
  return <StarsScrollingWheel defaultValue={2.5} max={5} step={0.5} />
}

export function HorizontalAndSizes() {
  return (
    <XStack gap="$6" items="center" flexWrap="wrap">
      <StarsScrollingWheel orientation="horizontal" defaultValue={4} max={5} size="lg" />
      <StarsScrollingWheel defaultValue={2} max={5} size="sm" />
      <StarsScrollingWheel defaultValue={3} max={5} disabled />
    </XStack>
  )
}

Types

export type StarsScrollingWheelOrientation = 'vertical' | 'horizontal'

export type StarsScrollingWheelSize = 'sm' | 'default' | 'lg'

export type StarsScrollingWheelProps = {
  /** The current rating. Omit for an uncontrolled wheel. */
  value?: number
  /** The rating an uncontrolled wheel starts at. Default 0. */
  defaultValue?: number
  /** Fires with the new rating, already clamped to `[0, max]` and rounded to `step`. */
  onValueChange?: (value: number) => void
  /** Highest rating the wheel offers. Default 5. */
  max?: number
  /** Rating increment between rows. Default 1; 0.5 adds a half-star row between each pair. */
  step?: number
  /** Which axis the wheel scrolls on. Default 'vertical'. */
  orientation?: StarsScrollingWheelOrientation
  /** Row size and star scale. Default 'default'. */
  size?: StarsScrollingWheelSize
  /** How many rows are visible in the viewport at once. Default 5. */
  visibleCount?: number
  disabled?: boolean
  'aria-label'?: string
}

Exports