Star Rating

1import * as React from "react";
2 
3import { IconPlaceholder } from "@/registry/icons/icon-placeholder";
4import { cn } from "@/lib/utils";
5 
6type StarRatingProps = {
7  value: number;
8  max?: number;
9  label?: string;
10  size?: "sm" | "md" | "lg";
11  orientation?: "vertical" | "horizontal";
12  /**
13   * Precision for partial stars. If set, the component will fill each star
14   * proportionally (e.g., 3.2 -> 60% of the 4th star). Defaults to true.
15   */
16  allowPartial?: boolean;
17  containerClassName?: string;
18};
19 
20export function StarRating({
21  value,
22  max = 5,
23  label,
24  size = "lg",
25  orientation = "vertical",
26  allowPartial = true,
27  className,
28  containerClassName,
29  ...props
30}: StarRatingProps & Omit<React.ComponentProps<"div">, "children">) {
31  const safeMax = Math.max(1, Math.floor(max));
32  const clampedValue = Math.max(0, Math.min(value, safeMax));
33 
34  return (
35    <div
36      data-size={size}
37      data-orientation={orientation}
38      data-slot="star-rating"
39      className={cn(
40        "flex flex-col items-center gap-1.5",
41        "data-[orientation=horizontal]:flex-row",
42        "data-[size=lg]:[--star-size:calc(--spacing(5))] data-[size=md]:[--star-size:calc(--spacing(4))] data-[size=sm]:[--star-size:calc(--spacing(3))]",
43        containerClassName
44      )}
45      aria-label={`${clampedValue} out of ${safeMax} stars`}
46      role="img"
47      {...props}
48    >
49      <div className={cn("flex items-center gap-0.5", className)}>
50        {Array.from({ length: safeMax }).map((_, index) => {
51          const starIndex = index + 1;
52          const filledRatio = allowPartial
53            ? Math.max(0, Math.min(1, clampedValue - index))
54            : clampedValue >= starIndex
55              ? 1
56              : 0;
57 
58          return (
59            <span key={index} className="relative inline-flex" aria-hidden="true">
60              {/* Base (unfilled) star */}
61              <IconPlaceholder
62                lucide="Star"
63                tabler="IconStar"
64                hugeicons="StarIcon"
65                phosphor="StarIcon"
66                remixicon="RiStarLine"
67                className="size-(--star-size)"
68              />
69              {/* Filled overlay */}
70              {filledRatio > 0 ? (
71                <span
72                  className="absolute inset-0 overflow-hidden"
73                  style={{ width: `${filledRatio * 100}%` }}
74                >
75                  <IconPlaceholder
76                    lucide="Star"
77                    tabler="IconStar"
78// … truncated