rating

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import { Star } from "lucide-react";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8import { VisuallyHiddenInput } from "@/registry/bases/base/components/visually-hidden-input";
9import { useAsRef } from "@/registry/bases/base/hooks/use-as-ref";
10import { useIsomorphicLayoutEffect } from "@/registry/bases/base/hooks/use-isomorphic-layout-effect";
11import { useLazyRef } from "@/registry/bases/base/hooks/use-lazy-ref";
12import { useComposedRefs } from "@/registry/bases/base/lib/compose-refs";
13import { useDirection } from "@/registry/bases/base/ui/direction";
14 
15type Direction = "ltr" | "rtl";
16type Orientation = "horizontal" | "vertical";
17type ActivationMode = "automatic" | "manual";
18type Size = "default" | "sm" | "lg";
19type Step = 0.5 | 1;
20type DataState = "full" | "partial" | "empty";
21type FocusIntent = "first" | "last" | "prev" | "next";
22 
23type RootElement = HTMLDivElement;
24type ItemElement = HTMLButtonElement;
25 
26const ROOT_NAME = "Rating";
27const ITEM_NAME = "RatingItem";
28 
29const ENTRY_FOCUS = "ratingFocusGroup.onEntryFocus";
30const EVENT_OPTIONS = { bubbles: false, cancelable: true };
31 
32function getItemId(id: string, value: number) {
33  return `${id}-item-${value}`;
34}
35 
36function getPartialFillGradientId(id: string, step: Step) {
37  return `partial-fill-gradient-${id}-${step}`;
38}
39 
40const MAP_KEY_TO_FOCUS_INTENT: Record<string, FocusIntent> = {
41  ArrowLeft: "prev",
42  ArrowUp: "prev",
43  ArrowRight: "next",
44  ArrowDown: "next",
45  Home: "first",
46  End: "last",
47};
48 
49function getDirectionAwareKey(key: string, dir?: Direction) {
50  if (dir !== "rtl") return key;
51  return key === "ArrowLeft"
52    ? "ArrowRight"
53    : key === "ArrowRight"
54      ? "ArrowLeft"
55      : key;
56}
57 
58function getFocusIntent(
59  event: React.KeyboardEvent<ItemElement>,
60  dir?: Direction,
61  orientation?: Orientation,
62) {
63  const key = getDirectionAwareKey(event.key, dir);
64  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key))
65    return undefined;
66  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key))
67    return undefined;
68  return MAP_KEY_TO_FOCUS_INTENT[key];
69}
70 
71function focusFirst(
72  candidates: React.RefObject<ItemElement | null>[],
73  preventScroll = false,
74) {
75  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
76  for (const candidateRef of candidates) {
77    const candidate = candidateRef.current;
78// … truncated