Rating

import Rating from '@/components/ui/rating.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Rating />
    </div>
  )
}

'use client'

import * as React from 'react'

import { cva, type VariantProps } from 'class-variance-authority'
import { StarIcon, type LucideProps } from 'lucide-react'

import { cn } from '@/lib/utils'

// Variants
const ratingVariants = cva('transition-colors', {
  variants: {
    variant: {
      default: 'text-foreground fill-current',
      destructive: 'text-destructive fill-current',
      outline: 'text-muted-foreground fill-transparent stroke-current',
      secondary: 'text-secondary-foreground fill-current',
      yellow: 'fill-current text-amber-600 dark:text-amber-400'
    }
  },
  defaultVariants: {
    variant: 'default'
  }
})

// Constants
const RATING_DEFAULTS = {
  precision: 1,
  maxStars: 5,
  size: 20,
  variant: 'default' as const,
  icon: <StarIcon />
} as const

// Types
interface RatingItemProps extends React.ComponentProps<'label'> {
  variant?: VariantProps<typeof ratingVariants>['variant']
  size: number
  value: number
  hoveredValue: number | null
  point: number
  name: string
  readOnly?: boolean
  disabled?: boolean
  precision: number
  Icon: React.ReactElement<LucideProps>
  onMouseLeave: React.MouseEventHandler<HTMLLabelElement>
  onValueHover: (value: number) => void
  onValueChange?: (value: number) => void
}

interface RatingProps extends React.ComponentProps<'div'> {
  value?: number
  defaultValue?: number
  name?: string
  max?: numbe