rating-group

1"use client"
2 
3import * as React from "react"
4 
5import { RatingGroup as RatingGroupPrimitive } from "@ark-ui/react/rating-group"
6import { StarIcon } from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9 
10const RatingGroup = RatingGroupPrimitive.Root
11 
12const RatingGroupProvider = RatingGroupPrimitive.RootProvider
13 
14const RatingGroupContext = RatingGroupPrimitive.Context
15 
16const RatingGroupLabel = React.forwardRef<
17  React.ElementRef<typeof RatingGroupPrimitive.Label>,
18  RatingGroupPrimitive.LabelProps
19>(({ className, ...props }, ref) => (
20  <RatingGroupPrimitive.Label
21    ref={ref}
22    className={cn(
23      "font-medium text-sm leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
24      className
25    )}
26    {...props}
27  />
28))
29RatingGroupLabel.displayName = "RatingGroupLabel"
30 
31const RatingGroupControl = React.forwardRef<
32  React.ElementRef<typeof RatingGroupPrimitive.Control>,
33  RatingGroupPrimitive.ControlProps
34>(({ className, children, ...props }, ref) => (
35  <RatingGroupPrimitive.Control
36    ref={ref}
37    className={cn("flex w-max gap-0.5", className)}
38    {...props}
39  >
40    <RatingGroupPrimitive.HiddenInput />
41    {children}
42  </RatingGroupPrimitive.Control>
43))
44RatingGroupControl.displayName = "RatingGroupControl"
45 
46const RatingGroupItem = React.forwardRef<
47  React.ElementRef<typeof RatingGroupPrimitive.Item>,
48  RatingGroupPrimitive.ItemProps
49>(({ className, ...props }, ref) => (
50  <RatingGroupPrimitive.Item
51    ref={ref}
52    className={cn(
53      "cursor-pointer transition-all data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 *:data-[highlighted]:fill-current",
54      className
55    )}
56    {...props}
57  >
58    <StarIcon />
59  </RatingGroupPrimitive.Item>
60))
61RatingGroupItem.displayName = "RatingGroupItem"
62 
63export {
64  RatingGroup,
65  RatingGroupContext,
66  RatingGroupControl,
67  RatingGroupItem,
68  RatingGroupLabel,
69  RatingGroupProvider,
70}