"use client";

import * as React from "react";

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

type RatingIcon = "star" | "heart";

interface RatingInputProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  value?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
  max?: number;
  icon?: RatingIcon;
  allowHalf?: boolean;
}

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

function RatingInput({
  value,
  defaultValue = 0,
  onChange,
  max = 5,
  icon = "star",
  allowHalf = false,
  className,
  ...props
}: RatingInputProps) {
  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 = 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;
  };

  return (
    <div
      role="radiogroup"
      aria-label="Rating"
      className={cn("inline-flex items-center gap-2", 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 p-1 transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
              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">
              <RatingIconGraphic
                icon={icon}
                className="h-5 w-5 text-muted-foreground"
              />
              <span
                className="absolute inset-0 overflow-hidden text-primary"
                style={{ width: `${fillPercent * 100}%` }}
              >
                <RatingIconGraphic icon={icon} className="h-5 w-5" />
              </span>
            </span>
          </button>
        );
      })}
    </div>
  );
}

function RatingIconGraphic({
  icon,
  className,
}: {
  icon: RatingIcon;
  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>
    );
  }

  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 { RatingInput };
Rating Input

Dependencies

Files

Installation
