Storybook stories for the `RadioGroupBlock` component, covering all visual states, variants, and interactive behaviors for the ODS design system's bordered radio group. ## Key Components - **`Default`** — Basic radio group with no pre-selected value - **`WithDefaultValue`** — Pre-selected option via `defaultValue` - **`WithDescriptions`** — Options with descriptive sub-text (e.g., pricing tiers) - **`Disabled`** / **`DisabledItem`** — Whole group or individual option disabled - **`Error`** — Group with inline validation error message - **`Controlled`** — Controlled component with `useState` showing selected value - **`AllStates`** — Combined showcase of selected, disabled, error, and description states - **`DevicePricing`** / **`DevicePricingDisabled`** — `grouped` variant with trailing `Tag` discount badges, modeled after Figma device-pricing picker - **`Grouped`** — `grouped` variant with dividers, no trailing slot (billing period example) - **`FlamingoTheme`** — Same group rendered inside a `data-app-type="flamingo"` container for theme verification ## Usage Example ```typescript // Controlled usage with grouped variant and trailing slots import { RadioGroupBlock } from '../components/ui/radio-group'; import { Tag } from '../components/ui/tag'; , }, { value: '300', label: '300 devices', description: '$14,400/year', trailing: , }, ]} /> ``` **Configurable `argTypes`:** `defaultValue`, `value`, `disabled`, `error`, `variant` (`separated` | `grouped`), `onValueChange`. All stories render at `400px` width via a shared decorator.