Radio Rows

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 
9interface RadioRowsProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
10  containerClassName?: string
11}
12 
13function RadioRows({ className, containerClassName, ...props }: RadioRowsProps) {
14  const containerStyles = cn("flex flex-col gap-y-1", "h-auto items-start", containerClassName)
15 
16  return (
17    <RadioGroupPrimitive.Root data-slot="radio-rows" className={cn("w-full", className)} {...props}>
18      <div className={containerStyles}>{props.children}</div>
19    </RadioGroupPrimitive.Root>
20  )
21}
22 
23const radioRowsItemVariants = cva(
24  [
25    "group w-full",
26    "p-3 pr-4 rounded-md relative flex items-center gap-x-3 justify-between",
27    "transition-all duration-300 font-medium",
28    "cursor-pointer select-none outline-none",
29    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
30    "disabled:cursor-not-allowed disabled:opacity-50",
31  ],
32  {
33    variants: {
34      variant: {
35        default: [
36          "border-2 border-muted-foreground/20",
37          "bg-muted/5",
38          "data-[state=checked]:bg-foreground data-[state=checked]:text-background data-[state=checked]:border-muted-foreground/20",
39          "hover:border-muted-foreground/30",
40        ],
41        outline: [
42          "border-2 border-muted-foreground/20",
43          "bg-transparent",
44          "data-[state=checked]:border-foreground data-[state=checked]:bg-foreground/5 data-[state=checked]:text-foreground",
45          "hover:border-muted-foreground/30",
46        ],
47        primary: [
48          "border-2 border-muted-foreground/20",
49          "bg-transparent",
50          "data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:text-foreground",
51          "hover:border-muted-foreground/30",
52        ],
53        secondary: [
54          "border border-muted-foreground/10",
55          "bg-muted/5",
56          "data-[state=checked]:bg-muted data-[state=checked]:border-muted-foreground/20 data-[state=checked]:text-foreground",
57          "hover:bg-muted/10",
58        ],
59      },
60    },
61    defaultVariants: {
62      variant: "default",
63    },
64  },
65)
66 
67interface RadioRowsItemProps
68  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,
69    VariantProps<typeof radioRowsItemVariants> {
70  children: React.ReactNode
71}
72 
73// … truncated