forked from cerc-io/snowballtools-base
64 lines
1.2 KiB
TypeScript
64 lines
1.2 KiB
TypeScript
import {
|
|
Root as RadixRoot,
|
|
RadioGroupProps,
|
|
} from '@radix-ui/react-radio-group';
|
|
import { RadioTheme, radioTheme } from './Radio.theme';
|
|
import { RadioItem, RadioItemProps } from './RadioItem';
|
|
|
|
export interface RadioOption extends RadioItemProps {
|
|
/**
|
|
* The label of the radio option.
|
|
*/
|
|
label: string;
|
|
/**
|
|
* The value of the radio option.
|
|
*/
|
|
value: string;
|
|
}
|
|
|
|
export interface RadioProps extends RadioGroupProps, RadioTheme {
|
|
/**
|
|
* The options of the radio.
|
|
* @default []
|
|
* @example
|
|
* ```tsx
|
|
* const options = [
|
|
* {
|
|
* label: 'Label 1',
|
|
* value: '1',
|
|
* },
|
|
* {
|
|
* label: 'Label 2',
|
|
* value: '2',
|
|
* },
|
|
* {
|
|
* label: 'Label 3',
|
|
* value: '3',
|
|
* },
|
|
* ];
|
|
* ```
|
|
*/
|
|
options: RadioOption[];
|
|
}
|
|
|
|
/**
|
|
* The Radio component is used to select one option from a list of options.
|
|
*/
|
|
export const Radio = ({
|
|
className,
|
|
options,
|
|
orientation,
|
|
variant,
|
|
...props
|
|
}: RadioProps) => {
|
|
const { root } = radioTheme({ orientation, variant });
|
|
|
|
return (
|
|
<RadixRoot {...props} className={root({ className })}>
|
|
{options.map((option) => (
|
|
<RadioItem key={option.value} variant={variant} {...option} />
|
|
))}
|
|
</RadixRoot>
|
|
);
|
|
};
|