Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-13 08:24:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add className props to radio group

Browse source
This commit is contained in:
nikec 2023-04-16 00:41:33 +02:00
parent d42e4dc988
commit e53e53cbdf
1 changed files with 12 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/ui/src/RadioGroup.tsx
View file

@ -18,17 +18,25 @@ export const Root = forwardRef<HTMLDivElement, RootProps>(
// RadioGroup.Item
// )`rounded-md border border-app-line bg-app-box px-4 py-2 flex items-center space-x-2`;
export interface ItemProps extends RadioGroup.RadioGroupItemProps {}
export const Item = ({ children, ...props }: ItemProps) => {
export interface ItemProps extends RadioGroup.RadioGroupItemProps {
radioClassName?: string;
}
export const Item = ({ children, className, radioClassName, ...props }: ItemProps) => {
return (
<div className="flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3">
<div
className={clsx(
'flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3',
className
)}
>
<RadioGroup.Item
id={'radio' + props.value}
className={cx(
'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-transparent',
'radix-state-checked:bg-accent',
'radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900',
'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800'
'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800',
radioClassName
)}
{...props}
>