Accessible radio group components built on Radix UI primitives, providing three levels of abstraction: a base `RadioGroup`, a styled `RadioGroupItem`, and a higher-level `RadioGroupBlock` that renders labeled option cards from a data array. ## Key Components | Export | Type | Description | |--------|------|-------------| | `RadioGroup` | Component | Thin wrapper around Radix `RadioGroup.Root` with `grid gap-2` layout | | `RadioGroupItem` | Component | Styled circular radio input with focus ring, disabled, hover, and checked states | | `RadioGroupBlock` | Component | Data-driven option list with label, description, trailing slot, error state, and two layout variants | | `RadioGroupBlockOption` | Interface | Option shape: `value`, `label`, `description?`, `disabled?`, `trailing?` | | `RadioGroupBlockProps` | Interface | Props for `RadioGroupBlock` including `options`, `variant`, `error`, `itemClassName` | ## Usage Example ```typescript import { RadioGroup, RadioGroupItem, RadioGroupBlock } from "@/components/ui/radio-group" // Primitive usage // Block usage — separated variant (default) Popular }, { value: "ent", label: "Enterprise", disabled: true }, ]} error="Please select a plan" /> // Block usage — grouped variant (single bordered card) ``` > The `grouped` variant wraps all options in a single rounded border with dividers between rows, while `separated` (default) renders each option as its own card. Both variants propagate `error` as a red border and an absolute helper text rendered below the group.