forked from cerc-io/snowballtools-base
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import React, { ComponentPropsWithoutRef } from 'react';
|
|
import {
|
|
Item as RadixRadio,
|
|
Indicator as RadixIndicator,
|
|
RadioGroupItemProps,
|
|
RadioGroupIndicatorProps,
|
|
} from '@radix-ui/react-radio-group';
|
|
import { radioTheme } from './Radio.theme';
|
|
|
|
export interface RadioItemProps extends RadioGroupItemProps {
|
|
/**
|
|
* The wrapper props of the radio item.
|
|
* You can use this prop to customize the wrapper props.
|
|
*/
|
|
wrapperProps?: ComponentPropsWithoutRef<'div'>;
|
|
/**
|
|
* The label props of the radio item.
|
|
* You can use this prop to customize the label props.
|
|
*/
|
|
labelProps?: ComponentPropsWithoutRef<'label'>;
|
|
/**
|
|
* The indicator props of the radio item.
|
|
* You can use this prop to customize the indicator props.
|
|
*/
|
|
indicatorProps?: RadioGroupIndicatorProps;
|
|
/**
|
|
* The id of the radio item.
|
|
*/
|
|
id?: string;
|
|
/**
|
|
* The label of the radio item.
|
|
*/
|
|
label?: string;
|
|
}
|
|
|
|
/**
|
|
* The RadioItem component is used to render a radio item.
|
|
*/
|
|
export const RadioItem = ({
|
|
className,
|
|
wrapperProps,
|
|
labelProps,
|
|
indicatorProps,
|
|
label,
|
|
id,
|
|
...props
|
|
}: RadioItemProps) => {
|
|
const { wrapper, label: labelClass, radio, indicator } = radioTheme();
|
|
|
|
// Generate a unique id for the radio item from the label if the id is not provided
|
|
const kebabCaseLabel = label?.toLowerCase().replace(/\s+/g, '-');
|
|
const componentId = id ?? kebabCaseLabel;
|
|
|
|
return (
|
|
<div className={wrapper({ className: wrapperProps?.className })}>
|
|
<RadixRadio {...props} className={radio({ className })} id={componentId}>
|
|
<RadixIndicator
|
|
forceMount
|
|
{...indicatorProps}
|
|
className={indicator({ className: indicatorProps?.className })}
|
|
/>
|
|
</RadixRadio>
|
|
{label && (
|
|
<label
|
|
{...labelProps}
|
|
className={labelClass({ className: labelProps?.className })}
|
|
htmlFor={componentId}
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|