<!-- source-hash: 4ce2842195a657133d85cd45ada36ad6 -->
A React component that creates grouped toggle buttons with shared state and consistent styling, built on Radix UI primitives with context-based variant management.

## Key Components

- **ToggleGroup** - Main container component that manages shared styling context and layout
- **ToggleGroupItem** - Individual toggle button within the group that inherits context styling
- **ToggleGroupContext** - React context for sharing variant and size props across items

## Usage Example

```typescript
import { ToggleGroup, ToggleGroupItem } from "./toggle-group"

// Single selection toggle group
<ToggleGroup type="single" defaultValue="center" variant="outline" size="sm">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

// Multiple selection toggle group
<ToggleGroup type="multiple" defaultValue={["bold"]} variant="default">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>

// With controlled state
const [value, setValue] = useState("option1")
<ToggleGroup type="single" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="option1">Option 1</ToggleGroupItem>
  <ToggleGroupItem value="option2">Option 2</ToggleGroupItem>
</ToggleGroup>
```

The component automatically applies consistent styling to all items through context, supports both single and multiple selection modes, and provides flexible variant and size options.