From e53e53cbdf6b57e8f5eb95ffe2a3a531fc6e2966 Mon Sep 17 00:00:00 2001
From: nikec <nikec.job@gmail.com>
Date: Sun, 16 Apr 2023 00:41:33 +0200
Subject: [PATCH] Add className props to radio group

---
 packages/ui/src/RadioGroup.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/RadioGroup.tsx b/packages/ui/src/RadioGroup.tsx
index aabd2ad4c..768c6a13e 100644
--- a/packages/ui/src/RadioGroup.tsx
+++ b/packages/ui/src/RadioGroup.tsx
@@ -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}
 			>