radio-group.tsx 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. "use client"
  2. import * as React from "react"
  3. import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
  4. import { Circle } from "lucide-react"
  5. import { cn } from "@/lib/utils"
  6. const RadioGroup = React.forwardRef<
  7. React.ElementRef<typeof RadioGroupPrimitive.Root>,
  8. React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
  9. >(({ className, ...props }, ref) => {
  10. return (
  11. <RadioGroupPrimitive.Root
  12. className={cn("grid gap-2", className)}
  13. {...props}
  14. ref={ref}
  15. />
  16. )
  17. })
  18. RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
  19. const RadioGroupItem = React.forwardRef<
  20. React.ElementRef<typeof RadioGroupPrimitive.Item>,
  21. React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
  22. >(({ className, ...props }, ref) => {
  23. return (
  24. <RadioGroupPrimitive.Item
  25. ref={ref}
  26. className={cn(
  27. "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",
  28. className
  29. )}
  30. {...props}
  31. >
  32. <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
  33. <Circle className="h-2.5 w-2.5 fill-current text-current" />
  34. </RadioGroupPrimitive.Indicator>
  35. </RadioGroupPrimitive.Item>
  36. )
  37. })
  38. RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
  39. export { RadioGroup, RadioGroupItem }