Rating

import Rating from "@shpaw415/mui-lite/Rating";

import { useState } from "react";
import Rating from "@shpaw415/mui-lite/Rating";
import Typography from "@shpaw415/mui-lite/Typography";
 
export function ReviewScore() {
  const [value, setValue] = useState<number | null>(3.5);
  return (
    <>
      {/* Interactive: hover previews fill + glow; click commits */}
      <Rating
        name="review"
        value={value}
        precision={0.5}
        onChange={(_e, v) => setValue(v)}
      />
      <Typography>{value ?? "unset"}</Typography>
 
      {/* Display-only average */}
      <Rating name="avg" value={4.5} precision={0.5} readOnly />
 
      {/* Whole stars only */}
      <Rating name="whole" defaultValue={3} precision={1} />
    </>
  );
}

<Rating name="primary" defaultValue={3.5} color="primary" readOnly />
<Rating name="error" defaultValue={4} color="error" readOnly />
<Rating name="custom" defaultValue={4} colorOverRide="#9c27b0" readOnly />

function Heart({ filled }: { filled?: boolean }) {
  return (
    <svg viewBox="0 0 24 24" width="1em" height="1em" aria-hidden>
      <path
        fill="currentColor"
        d={
          filled
            ? "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
            : "M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"
        }
      />
    </svg>
  );
}
 
<Rating
  name="love"
  defaultValue={4}
  precision={1}
  color="error"
  icon={<Heart filled />}
  emptyIcon={<Heart />}
/>