radio-group

1/**
2 * Slots: radio-group, radio-group-item, radio-group-indicator
3 */
4 
5'use client';
6 
7import * as React from 'react';
8import { Radio as RadioPrimitive } from '@base-ui/react/radio';
9import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
10import { cva, type VariantProps } from 'class-variance-authority';
11 
12import { cn } from '@/registry/lib/utils';
13 
14const radioVariants = cva(
15  'group/radio relative flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border transition-colors',
16  {
17    variants: {
18      variant: {
19        solid: 'border-line-ui bg-transparent data-checked:border-none data-checked:bg-fill',
20        surface: 'border-line-ui bg-ui data-checked:border-none data-checked:bg-active',
21      },
22    },
23    defaultVariants: {
24      variant: 'solid',
25    },
26  }
27);
28 
29function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
30  return (
31    <RadioGroupPrimitive
32      data-slot="radio-group"
33      className={cn('flex flex-col gap-2', className)}
34      {...props}
35    />
36  );
37}
38 
39function RadioGroupItem({
40  className,
41  variant = 'solid',
42  ...props
43}: RadioPrimitive.Root.Props & VariantProps<typeof radioVariants>) {
44  return (
45    <RadioPrimitive.Root
46      data-slot="radio-group-item"
47      data-variant={variant}
48      className={cn(
49        radioVariants({ variant }),
50        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
51        'data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50',
52        'aria-invalid:border-[var(--destructive-line-ui)] aria-invalid:data-checked:bg-[var(--destructive-fill)]',
53        variant === 'solid' && 'data-checked:focus-visible:outline-focus-fill',
54        className
55      )}
56      {...props}
57    >
58      <RadioPrimitive.Indicator
59        data-slot="radio-group-indicator"
60        className="flex size-4 items-center justify-center text-current"
61      >
62        <span className="size-2 rounded-full bg-on-fill" />
63      </RadioPrimitive.Indicator>
64    </RadioPrimitive.Root>
65  );
66}
67 
68export { RadioGroup, RadioGroupItem, radioVariants };