Radio

1"use client";
2 
3import "./radio.css";
4import { Radio as BaseRadio } from "@base-ui/react/radio";
5import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
6import type React from "react";
7import { cn } from "tailwind-variants";
8 
9import { RadioContext, useRadioContext } from "./radio.context";
10import { radioVariants, type RadioVariants } from "./radio.variants";
11 
12export type RadioGroupProps = RadioVariants & React.ComponentProps<typeof BaseRadioGroup>;
13 
14export const RadioGroup = ({ children, className, size, ...props }: RadioGroupProps) => {
15  const slots = radioVariants({ size });
16 
17  return (
18    <RadioContext.Provider value={{ slots }}>
19      <BaseRadioGroup className={cn(slots.group(), className)} {...props}>
20        {children}
21      </BaseRadioGroup>
22    </RadioContext.Provider>
23  );
24};
25 
26export const RadioGroupRoot = RadioGroup;
27 
28export type RadioProps = React.ComponentProps<typeof BaseRadio.Root>;
29 
30export const RadioRoot = ({ className, ...props }: RadioProps) => {
31  const { slots } = useRadioContext();
32  return <BaseRadio.Root className={cn(slots.root(), className)} {...props} />;
33};
34 
35export const RadioItem = RadioRoot;
36 
37export type RadioIndicatorProps = React.ComponentProps<typeof BaseRadio.Indicator>;
38 
39export const RadioIndicator = ({ className, ...props }: RadioIndicatorProps) => {
40  const { slots } = useRadioContext();
41  return <BaseRadio.Indicator className={cn(slots.indicator(), className)} {...props} />;
42};