feat: Add Radio Group (#90)

Author: Cahllagerfeld

.changeset/happy-goats-itch.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add radio group

package.json

@@ -61,6 +61,7 @@
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-hover-card": "^1.1.1",
 		"@radix-ui/react-progress": "^1.0.3",
+		"@radix-ui/react-radio-group": "^1.2.0",
 		"@radix-ui/react-scroll-area": "^1.1.0",
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-slot": "^1.0.2",

pnpm-lock.yaml

@@ -0,0 +1,45 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { RadioGroup, RadioGroupItem } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Radio Group",
+	component: RadioGroup,
+	decorators: [
+		(Story) => (
+			<div className="w-[400px] flex items-center justify-center bg-theme-surface-primary h-[200px]">
+				<Story />
+			</div>
+		)
+	],
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	render: () => (
+		<RadioGroup defaultValue="option-one">
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="option-one" id="option-one" />
+				<label htmlFor="option-one">Option One</label>
+			</div>
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem value="option-two" id="option-two" />
+				<label htmlFor="option-two">Option Two</label>
+			</div>
+			<div className="flex items-center space-x-2">
+				<RadioGroupItem disabled value="option-three" id="option-three" />
+				<label htmlFor="option-three">Option disabled</label>
+			</div>
+		</RadioGroup>
+	)
+};

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../../utilities";
+
+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-3 w-3 bg-theme-surface-primary rounded-rounded border border-theme-border-bold text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:data-[state=unchecked]:opacity-30 disabled:data-[state=checked]:bg-neutral-300",
+				className
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex text-theme-surface-strong items-center justify-center data-[state=checked]:data-[disabled]:text-theme-surface-primary">
+				<svg
+					className="h-[10px] w-[10px] fill-current text-current"
+					viewBox="0 0 100 100"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle cx="50" cy="50" r="50" />
+				</svg>
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1 @@
+export * from "./RadioGroup";

src/components/RadioGroup/index.tsx

@@ -16,3 +16,4 @@ export * from "./Switch";
 export * from "./AlertDialog";
 export * from "./ScrollArea";
 export * from "./HoverCard";
+export * from "./RadioGroup";