"use client"

import * as React from "react"

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

type RatingStarsIcon = "star" | "heart" | "thumb"

type RatingStarsSize = "sm" | "md" | "lg"

interface RatingStarsProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: number
  defaultValue?: number
  onChange?: (value: number) => void
  max?: number
  allowHalf?: boolean
  readOnly?: boolean
  size?: RatingStarsSize
  icon?: RatingStarsIcon
  renderIcon?: (props: { className?: string }) => React.ReactNode
}

const SIZE_STYLES: Record<RatingStarsSize, { icon: string; padding: string; gap: string }> = {
  sm: { icon: "h-4 w-4", padding: "p-1", gap: "gap-1" },
  md: { icon: "h-5 w-5", padding: "p-1.5", gap: "gap-2" },
  lg: { icon: "h-7 w-7", padding: "p-2", gap: "gap-3" },
}

const clampValue = (value: number, max: number) => Math.min(max, Math.max(0, value))

function RatingStars({
  value,
  defaultValue = 0,
  onChange,
  max = 5,
  allowHalf = true,
  readOnly = false,
  size = "md",
  icon = "star",
  renderIcon,
  className,
  ...props
}: RatingStarsProps) {
  const isControlled = value !== undefined
  const [internalValue, setInternalValue] = React.useState(defaultValue)
  const [hoverValue, setHoverValue] = React.useState<number | null>(null)

  const currentValue = clampValue(isControlled ? value ?? 0 : internalValue, max)
  const displayValue = hoverValue ?? currentValue
  const step = allowHalf ? 0.5 : 1
  const isInteractive = !readOnly && (Boolean(onChange) || !isControlled)

  const updateValue = (nextValue: number) => {
    const clamped = clampValue(nextValue, max)
    if (!isControlled) {
      setInternalValue(clamped)
    }
    onChange?.(clamped)
  }

  const getValueFromEvent = (
    event: React.MouseEvent<HTMLButtonElement>,
    index: number
  ) => {
    if (!allowHalf) {
      return index
    }
    const rect = event.currentTarget.getBoundingClientRect()
    const isHalf = event.clientX - rect.left < rect.width / 2
    return isHalf ? index - 0.5 : index
  }

  const { icon: iconSize, padding, gap } = SIZE_STYLES[size]
  const IconComponent = renderIcon
    ? renderIcon
    : ({ className }: { className?: string }) => (
        <RatingIconGraphic icon={icon} className={className} />
      )

  return (
    <div
      role="radiogroup"
      aria-label="Rating"
      aria-readonly={readOnly}
      className={cn("inline-flex items-center", gap, className)}
      {...props}
    >
      {Array.from({ length: max }, (_, index) => {
        const ratingValue = index + 1
        const fillPercent = Math.min(1, Math.max(0, displayValue - index))

        return (
          <button
            key={ratingValue}
            type="button"
            role="radio"
            aria-checked={ratingValue === Math.ceil(currentValue)}
            aria-label={`Rate ${ratingValue} out of ${max}`}
            className={cn(
              "rounded-md transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
              padding,
              isInteractive ? "cursor-pointer" : "cursor-default"
            )}
            onMouseMove={(event) => {
              if (!isInteractive) {
                return
              }
              const nextValue = getValueFromEvent(event, ratingValue)
              setHoverValue(nextValue)
            }}
            onMouseLeave={() => setHoverValue(null)}
            onFocus={() => setHoverValue(ratingValue)}
            onBlur={() => setHoverValue(null)}
            onClick={(event) => {
              if (!isInteractive) {
                return
              }
              const nextValue = getValueFromEvent(event, ratingValue)
              updateValue(nextValue)
            }}
            onKeyDown={(event) => {
              if (!isInteractive) {
                return
              }
              if (event.key === "ArrowRight" || event.key === "ArrowUp") {
                event.preventDefault()
                updateValue(currentValue + step)
              }
              if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
                event.preventDefault()
                updateValue(currentValue - step)
              }
              if (event.key === "Home") {
                event.preventDefault()
                updateValue(0)
              }
              if (event.key === "End") {
                event.preventDefault()
                updateValue(max)
              }
            }}
            disabled={!isInteractive}
          >
            <span className="relative inline-flex">
              <IconComponent
                className={cn(
                  iconSize,
                  "text-muted-foreground",
                  allowHalf ? "" : "transition"
                )}
              />
              <span
                className="absolute inset-0 overflow-hidden text-primary"
                style={{ width: `${fillPercent * 100}%` }}
              >
                <IconComponent className={iconSize} />
              </span>
            </span>
          </button>
        )
      })}
    </div>
  )
}

function RatingIconGraphic({
  icon,
  className,
}: {
  icon: RatingStarsIcon
  className?: string
}) {
  if (icon === "heart") {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
        <path
          d="M12 20.8c-4.2-2.5-7.4-5.8-9-9.3-1.5-3.2.4-7 4-7 2 0 3.6 1 5 2.7C13.4 5.5 15 4.5 17 4.5c3.6 0 5.5 3.8 4 7-1.6 3.5-4.8 6.8-9 9.3Z"
          fill="currentColor"
          stroke="currentColor"
          strokeWidth={1.2}
        />
      </svg>
    )
  }

  if (icon === "thumb") {
    return (
      <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
        <path
          d="M9.6 10.4V6.7c0-1.2.7-2.3 1.8-2.8l.9-.4c.5-.2 1.1 0 1.4.5l.2.4c.4.8.6 1.7.6 2.6v2.4h3.6c1.3 0 2.3 1.2 2 2.5l-1.2 6.2a2.2 2.2 0 0 1-2.1 1.8H9.3a2 2 0 0 1-2-2v-7.5c0-.8.6-1.5 1.4-1.5h1.9Zm-3 9.5c-.9 0-1.6-.7-1.6-1.6v-7.5c0-.9.7-1.6 1.6-1.6h1.1v10.7H6.6Z"
          fill="currentColor"
          stroke="currentColor"
          strokeWidth={1.2}
          strokeLinejoin="round"
        />
      </svg>
    )
  }

  return (
    <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
      <path
        d="M11.48 3.5c.2-.5.84-.5 1.04 0l2.16 5.3a1 1 0 0 0 .77.6l5.72.54c.54.05.76.73.35 1.08l-4.33 3.8a1 1 0 0 0-.32.98l1.3 5.6c.12.53-.45.95-.92.67l-4.9-2.92a1 1 0 0 0-1.02 0l-4.9 2.92c-.47.28-1.04-.14-.92-.67l1.3-5.6a1 1 0 0 0-.32-.98l-4.33-3.8c-.41-.35-.19-1.03.35-1.08l5.72-.54a1 1 0 0 0 .77-.6l2.16-5.3Z"
        fill="currentColor"
        stroke="currentColor"
        strokeWidth={1.2}
      />
    </svg>
  )
}

export { RatingStars, type RatingStarsProps }
Rating Stars

Dependencies

Files

Installation
