initial commit

components/ui/radio-group.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface RadioGroupContextValue {
+  value?: string
+  onValueChange?: (value: string) => void
+  name?: string
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue>({})
+
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string
+  onValueChange?: (value: string) => void
+  name?: string
+}
+
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  ({ className, value, onValueChange, name, ...props }, ref) => {
+    return (
+      <RadioGroupContext.Provider value={{ value, onValueChange, name }}>
+        <div
+          className={cn("grid gap-2", className)}
+          {...props}
+          ref={ref}
+          role="radiogroup"
+        />
+      </RadioGroupContext.Provider>
+    )
+  }
+)
+RadioGroup.displayName = "RadioGroup"
+
+interface RadioGroupItemProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  value: string
+}
+
+const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
+  ({ className, value, ...props }, ref) => {
+    const context = React.useContext(RadioGroupContext)
+    
+    return (
+      <input
+        ref={ref}
+        type="radio"
+        className={cn(
+          "aspect-square h-4 w-4 rounded-full border border-primary 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:opacity-50",
+          className
+        )}
+        name={context.name}
+        value={value}
+        checked={context.value === value}
+        onChange={() => context.onValueChange?.(value)}
+        {...props}
+      />
+    )
+  }
+)
+RadioGroupItem.displayName = "RadioGroupItem"
+
+export { RadioGroup, RadioGroupItem }