Radio Group

1"use client";
2 
3import * as React from "react";
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
5import { cn } from "@/lib/utils";
6 
7const RadioGroup = React.forwardRef<
8  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
9  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
10>(({ className, ...props }, ref) => (
11  <RadioGroupPrimitive.Root
12    data-slot="radio-group"
13    className={cn("grid gap-3", className)}
14    ref={ref}
15    {...props}
16  />
17));
18RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
19 
20const RadioGroupItem = React.forwardRef<
21  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
22  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
23>(({ className, ...props }, ref) => (
24  <RadioGroupPrimitive.Item
25    ref={ref}
26    data-slot="radio-group-item"
27    className={cn(
28      "group relative size-5 shrink-0 cursor-pointer rounded-full border border-input bg-surface shadow-xs",
29      "after:absolute after:-inset-2 after:content-['']",
30      "transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)]",
31      "focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/25",
32      "data-[state=checked]:border-primary",
33      "disabled:cursor-not-allowed disabled:border-border disabled:bg-disabled disabled:opacity-100",
34      className,
35    )}
36    {...props}
37  >
38    <RadioGroupPrimitive.Indicator
39      data-slot="radio-group-indicator"
40      className="flex items-center justify-center animate-poyraz-scale-in"
41    >
42      <div className="size-2.5 rounded-full bg-primary" />
43    </RadioGroupPrimitive.Indicator>
44  </RadioGroupPrimitive.Item>
45));
46RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
47 
48export { RadioGroup, RadioGroupItem };