`Segmented` is an accessible radio group component styled as a segmented control.

### Features

- Keyboard navigation with arrow keys - Screen reader support with ARIA attributes - Flexible content rendering - Equal-width segments distribution - Tooltip support for each option

Uses a compound component pattern with Segmented.Item components to define each option

### Disabled Options

Use the `disabled` property to disable specific segments in the control:

- Disabled options cannot be selected - They display a visual disabled state - They're excluded from keyboard navigation - Screen readers announce them as disabled

### Custom Content Styling

The component provides flexible styling options:

- Use the `className` property to directly style individual options - Use `classNames.container` to style the outer container

#### Best Practices

- For text content, add horizontal padding using `px-{size}` - For icon + text combinations, use `gap-{size}` to control spacing - Keep padding consistent across all options for visual alignment

### Mixed Content with Icons and Labels

The component supports flexible content rendering, allowing you to combine icons and text:

#### Features

- Supports any valid React node as content - Maintains consistent alignment with mixed content - Automatically handles spacing and layout

#### Best Practices

- Use consistent icon sizes within the same control - Maintain a logical reading order (icon + label) - Provide `aria-label` for icon-only options - Use `gap-1` or `gap-2` for spacing between icon and text

### Tooltip Configuration

The component supports two levels of tooltip configuration:

#### 1. Individual Option Tooltips

- Set through the `tooltip` property in each option - Automatically used as `aria-label` if no explicit label is provided - Ideal for icon-only options or additional context

#### 2. Global Tooltip Settings

- Applied to all options through the component's `tooltip` prop - Controls behavior such as placement, delay, and animations - Can be overridden by individual option settings

#### Accessibility Notes

The component follows a priority order for accessibility labels:

1. Explicit `aria-label` if provided 2. `tooltip` text if available 3. String content if the option content is a string

Visual Variants

Demonstrates different visual variants of the segmented control:

- **default**: Follows the page theme dynamically (light/dark mode) - **light**: Fixed light appearance regardless of theme - **dark**: Fixed dark appearance regardless of theme - **reset**: Removes variant styling, no variant settings applied

Each variant maintains full functionality while adapting its visual style to different contexts and themes.