Label Selector

1"use client"
2 
3import * as React from "react"
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5import { cva, type VariantProps } from "class-variance-authority"
6 
7import { cn } from "@/lib/utils"
8 
9function LabelSelectorRoot({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
10  return (
11    <RadioGroupPrimitive.Root
12      data-slot="label-selector-root"
13      className={cn(
14        "flex items-center justify-between gap-4 py-3 bg-muted dark:bg-muted/60 p-3 pl-5 rounded-full",
15        className,
16      )}
17      {...props}
18    />
19  )
20}
21 
22interface LabelSelectorLabelProps extends React.HTMLAttributes<HTMLDivElement> {
23  value: string
24}
25 
26function LabelSelectorLabel({ className, value, ...props }: LabelSelectorLabelProps) {
27  return (
28    <div data-slot="label-selector-label" className={cn("text-base font-normal leading-none", className)} {...props}>
29      {value}
30    </div>
31  )
32}
33 
34function LabelSelectorContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
35  return <div data-slot="label-selector-content" className={cn("flex items-center gap-2", className)} {...props} />
36}
37 
38const labelSelectorItemVariants = cva(
39  "group relative shrink-0 cursor-pointer outline-none transition-all flex items-center justify-center disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
40  {
41    variants: {
42      variant: {
43        default:
44          "border-2 border-muted-foreground/20 bg-background hover:border-muted-foreground/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
45        outline:
46          "border-2 border-input bg-background hover:bg-accent hover:text-accent-foreground data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:text-foreground",
47        ghost:
48          "hover:bg-accent hover:text-accent-foreground data-[state=checked]:bg-accent data-[state=checked]:text-foreground",
49        solid:
50          "bg-muted text-muted-foreground hover:bg-muted/80 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
51      },
52      size: {
53        sm: "min-w-[2rem] h-8 px-3 text-xs",
54        default: "min-w-[2.5rem] h-10 px-4 text-sm",
55        lg: "min-w-[3rem] h-12 px-5 text-base",
56      },
57      rounded: {
58        none: "rounded-none",
59        sm: "rounded-sm",
60        md: "rounded-md",
61        lg: "rounded-lg",
62// … truncated