feat(ui): add radio group component

Signed-off-by: Danil Kostromin <[email protected]>

libs/shared/tailwind-ui/src/index.ts

@@ -62,3 +62,4 @@ export * from './lib/form-alert';
 export * from './lib/alert-dialog';
 export * from './lib/avatar';
 export * from './lib/sonner-toaster';
+export * from './lib/radio-group';

libs/shared/tailwind-ui/src/lib/radio-group/index.ts

@@ -0,0 +1 @@
+export * from './radio-group.component';

libs/shared/tailwind-ui/src/lib/radio-group/radio-group.component.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../utils';
+
+const RadioGroup = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn('grid gap-2', className)}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+				className
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<div className="w-2 h-2 rounded-full bg-primary" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package.json

@@ -56,6 +56,7 @@
 		"@radix-ui/react-hover-card": "^1.0.7",
 		"@radix-ui/react-icons": "^1.3.0",
 		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-radio-group": "^1.1.3",
 		"@radix-ui/react-scroll-area": "^1.0.5",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-separator": "^1.0.3",