<!-- source-hash: 59a0ae55416cf1e4d81e6e2acf777fff -->
A compound checkbox component that renders a labeled checkbox alongside a title and descriptive text, built on Radix UI's `CheckboxPrimitive` with ODS design tokens.

## Key Components

- **`CheckboxWithDescription`** — A `forwardRef` wrapper component combining a Radix UI checkbox, a `Label`, and a secondary description span into a card-style container
- **`CheckboxWithDescriptionProps`** — Interface defining required and optional props:
  - `id` — Links the label to the checkbox input
  - `checked` / `onCheckedChange` — Controlled state
  - `title` — Primary label text
  - `description` — Secondary helper text rendered in `ods-text-secondary`
  - `disabled` / `className` — Optional modifiers

## Usage Example

```typescript
import { CheckboxWithDescription } from "@/components/ui/checkbox-with-description"

function NotificationSettings() {
  const [enabled, setEnabled] = React.useState(false)

  return (
    <CheckboxWithDescription
      id="email-notifications"
      checked={enabled}
      onCheckedChange={setEnabled}
      title="Email Notifications"
      description="Receive alerts and updates directly to your inbox."
    />
  )
}
```

## Notes

- Applies `opacity-50 cursor-not-allowed` to the entire container when `disabled` is set, not just the native input
- Uses ODS design tokens (`ods-accent`, `ods-border`, `ods-card`) for consistent theming
- Checkbox indicator renders `CheckboxCheckmarkIcon` at 10px when `data-[state=checked]` is active
- `displayName` is set for React DevTools clarity