Rating

npm install react-aria-components

"use client";

import { useState } from "react";
import { Label, Radio, RadioGroup } from "react-aria-components";

const STAR = "M8 1.600l1.900 3.900 4.300.600-3.100 3 .700 4.300L8 11.400l-3.800 2 .700-4.300-3.100-3 4.300-.600z";

export interface RatingProps {
  /** How many stars are filled. */
  value?: number;
  defaultValue?: number;
  onChange?: (value: number) => void;
  /** How many stars there are. */
  max?: number;
  /** Names the rating, e.g. "Rate this reply". Shown unless hideLabel is set. */
  label: string;
  hideLabel?: boolean;
  /** Shows a rating without letting it be changed. */
  isReadOnly?: boolean;
  isDisabled?: boolean;
  className?: string;
}

/** A row of stars to give or show a score. Each star is a choice, so the arrow keys move between them. */
export function Rating({ value, defaultValue = 0, onChange, max = 5, label, hideLabel, isReadOnly, isDisabled, className }: RatingProps) {
  const [inner, setInner] = useState(defaultValue);
  const [hover, setHover] = useState(0);
  const current = value ?? inner;
  const shown = hover || current;

  return (
    <RadioGroup
      value={current ? String(current) : null}
      onChange={(next) => {
        setInner(Number(next));
        onChange?.(Number(next));
      }}
      orientation="horizontal"
      isReadOnly={isReadOnly}
      isDisabled={isDisabled}
      className={["flex flex-col gap-(--tui-rating-label-gap) font-(family-name:--tui-font) data-disabled:opacity-(--tui-rating-disabled-opacity)", className].filter(Boolean).join(" ")}
    >
      <Label className={hideLabel ? "sr-only" : "text-(length:--tui-rating-label-size) leading-none font-medium text-(--tui-rating-label)"}>{label}</Label>
      <div className="flex gap-(--tui-rating-gap)" onPointerLeave={() => setHover(0)}>
        {Array.from({ length: max }, (_, i) => i + 1).map((n) => (
          <Radio
            key={n}
            value={String(n)}
            aria-label={`${n} of ${max}`}
            onHoverStart={() => !isReadOnly && setHover(n)}
            className="flex cursor-default rounded-[3px] outline-none transition-transform duration-(--tui-duration) data-focus-visible:[outline:var(--tui-rating-ring-width)_solid_var(--tui-rating-ring)] data-focus-visible:[outline-offset:2px] data-pressed:scale-90 data-readonly:cursor-auto"
          >
            <svg aria-hidden viewBox="0 0 16 16" className={`size-(--tui-rating-size) transition-colors duration-(--tui-duration) ${n <= shown ? "fill-(--tui-rating-on)" : "fill-(--tui-rating-off)"}`}>
              <path d={STAR} strokeLinejoin="round" />
            </svg>
          </Radio>
        ))}
      </div>
    </RadioGroup>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Rating */
  --tui-rating-size: calc(var(--tui-space) * 6);
  --tui-rating-gap: calc(var(--tui-space) * 1);
  --tui-rating-label-gap: calc(var(--tui-space) * 2);
  --tui-rating-label-size: 13px;
  --tui-rating-on: var(--tui-warning);
  --tui-rating-off: var(--tui-border);
  --tui-rating-label: var(--tui-fg);
  --tui-rating-ring: var(--tui-ring);
  --tui-rating-ring-width: 2px;
  --tui-rating-disabled-opacity: 0.5;
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}