radio-group

1"use client"
2 
3import * as React from "react"
4import { RadioGroup as RadioGroupPrimitive } from "radix-ui"
5 
6import { cn } from "@/registry/radix-sera/lib/utils"
7 
8function RadioGroup({
9  className,
10  ...props
11}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
12  return (
13    <RadioGroupPrimitive.Root
14      data-slot="radio-group"
15      className={cn("grid w-full gap-3", className)}
16      {...props}
17    />
18  )
19}
20 
21function RadioGroupItem({
22  className,
23  ...props
24}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
25  return (
26    <RadioGroupPrimitive.Item
27      data-slot="radio-group-item"
28      className={cn(
29        "group/radio-group-item peer relative flex aspect-square size-4.5 shrink-0 rounded-full border border-input bg-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-foreground dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-foreground",
30        className
31      )}
32      {...props}
33    >
34      <RadioGroupPrimitive.Indicator
35        data-slot="radio-group-indicator"
36        className="flex size-4.5 items-center justify-center"
37      >
38        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground" />
39      </RadioGroupPrimitive.Indicator>
40    </RadioGroupPrimitive.Item>
41  )
42}
43 
44export { RadioGroup, RadioGroupItem }